@charset "UTF-8";
@import url("open-iconic-bootstrap.min.css");
/* ==========================================================================
  Poppins font weights
  --------------------------------------------------------------------------
  Purpose:
  Registers all local Poppins font files for normal and italic styles so the
  application can use Poppins consistently without relying on external font
  providers.
  ========================================================================== */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src: url("../fonts/poppins/poppins-latin-100-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-display: swap;
  font-weight: 100;
  src: url("../fonts/poppins/poppins-latin-100-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 200;
  src: url("../fonts/poppins/poppins-latin-200-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-display: swap;
  font-weight: 200;
  src: url("../fonts/poppins/poppins-latin-200-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url("../fonts/poppins/poppins-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-display: swap;
  font-weight: 300;
  src: url("../fonts/poppins/poppins-latin-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/poppins/poppins-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/poppins/poppins-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/poppins/poppins-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/poppins/poppins-latin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/poppins/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/poppins/poppins-latin-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/poppins/poppins-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/poppins/poppins-latin-700-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("../fonts/poppins/poppins-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-display: swap;
  font-weight: 800;
  src: url("../fonts/poppins/poppins-latin-800-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url("../fonts/poppins/poppins-latin-900-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-display: swap;
  font-weight: 900;
  src: url("../fonts/poppins/poppins-latin-900-italic.woff2") format("woff2");
}
/* ==========================================================================
   Conventus icon font
   --------------------------------------------------------------------------
   Purpose:
   Registers the custom Conventus icon font used by all .conv-* icon classes.
   When updating the icon font files, the codepoints below should be checked
   and updated as well.
   ========================================================================== */
@font-face {
  font-family: "conventus-ivons";
  font-style: normal;
  font-display: block;
  font-weight: normal;
  src: url("../fonts/conventus-ivons.ttf?dnyf2") format("truetype"), url("../fonts/conventus-ivons.woff?dnyf2") format("woff"), url("../fonts/conventus-ivons.svg?dnyf2#conventus-ivons") format("svg");
}
/* ==========================================================================
   Conventus icon base class
   --------------------------------------------------------------------------
   Purpose:
   Applies the custom Conventus icon font to all icon classes that start with
   conv- or contain conv-. The !important prevents browser extensions or global
   font rules from replacing the icon font.
   ========================================================================== */
[class^=conv-],
[class*=" conv-"] {
  font-family: "conventus-ivons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Conventus icon codepoints
   --------------------------------------------------------------------------
   Purpose:
   Maps each Conventus icon class to the correct glyph inside the custom icon
   font. These values must stay in sync with the generated icon font files.
   ========================================================================== */
.conv-icon-storage::before {
  content: "\e900";
}

.conv-icon-activity::before {
  content: "\e901";
}

.conv-icon-add::before {
  content: "\e902";
}

.conv-icon-add-time::before {
  content: "\e903";
}

.conv-icon-brand::before {
  content: "\e904";
}

.conv-icon-calendar::before {
  content: "\e905";
}

.conv-icon-category::before {
  content: "\e906";
}

.conv-icon-close::before {
  content: "\e907";
}

.conv-icon-components::before {
  content: "\e908";
}

.conv-icon-confirm::before {
  content: "\e909";
}

.conv-icon-contact::before {
  content: "\e90a";
}

.conv-icon-copy::before {
  content: "\e90b";
}

.conv-icon-customers::before {
  content: "\e90c";
}

.conv-icon-dashboard::before {
  content: "\e90d";
}

.conv-icon-delete::before {
  content: "\e90e";
}

.conv-icon-doc-add::before {
  content: "\e90f";
}

.conv-icon-dropdown::before {
  content: "\e910";
}

.conv-icon-edit::before {
  content: "\e911";
}

.conv-icon-equipment::before {
  content: "\e912";
}

.conv-icon-filter::before {
  content: "\e913";
}

.conv-icon-filter-2::before {
  content: "\e914";
}

.conv-icon-gear::before {
  content: "\e915";
}

.conv-icon-gear-2::before {
  content: "\e916";
}

.conv-icon-gear-2-square::before {
  content: "\e917";
}

.conv-icon-hidemenu::before {
  content: "\e918";
}

.conv-icon-invoice::before {
  content: "\e919";
}

.conv-icon-locationpin::before {
  content: "\e91a";
}

.conv-icon-mail::before {
  content: "\e91b";
}

.conv-icon-messages::before {
  content: "\e91c";
}

.conv-icon-notification::before {
  content: "\e91d";
}

.conv-icon-phone::before {
  content: "\e91e";
}

.conv-icon-product::before {
  content: "\e91f";
}

.conv-icon-production-orders::before {
  content: "\e920";
}

.conv-icon-project-2::before {
  content: "\e921";
}

.conv-icon-purchaseorders::before {
  content: "\e922";
}

.conv-icon-quotation::before {
  content: "\e923";
}

.conv-icon-resource::before {
  content: "\e924";
}

.conv-icon-salesorders::before {
  content: "\e925";
}

.conv-icon-search::before {
  content: "\e926";
}

.conv-icon-shipment::before {
  content: "\e927";
}

.conv-icon-stats::before {
  content: "\e928";
}

.conv-icon-sub-category::before {
  content: "\e929";
}

.conv-icon-suppliers::before {
  content: "\e92a";
}

.conv-icon-support::before {
  content: "\e92b";
}

.conv-icon-textsize::before {
  content: "\e92c";
}

.conv-icon-units::before {
  content: "\e92d";
}

.conv-icon-upload::before {
  content: "\e92e";
}

.conv-icon-view-doc::before {
  content: "\e92f";
}

.conv-icon-warehouse::before {
  content: "\e930";
}

.conv-icon-warning::before {
  content: "\e931";
}

.conv-icon-workorder::before {
  content: "\e932";
}

.conv-icon-work-order-template::before {
  content: "\e933";
}

:root {
  --cv-primary: #f07e26;
  --cv-primary-dark: #ca6510;
  --cv-secondary: #f1f1f1;
  --cv-text-primary: #000000;
  --cv-text-secondary: #7e7e7e;
  --bs-primary: var(--cv-primary);
  --bs-danger-rgb: rgb(232, 17, 35);
  --dxbl-fl-item-spacing-x: 1.25rem;
  --dxbl-fl-item-spacing-y: 0.5rem;
  --grid-out-of-stock: #ff121273;
  --grid-out-of-stock-hover: #ff1212b8;
  --cv-icon-muted: #9c9c9c;
  --cv-icon-muted-dark: #565656;
  --cv-primary-brand: #ba580d;
  --cv-icon-orange: #f47b20;
  --cv-messagebox-btn-primary: #fd7e14;
  --cv-messagebox-btn-secondary-text: #343a40;
  --cv-messagebox-btn-secondary-border: #495057;
  --cv-status-grey: #b9b9b9;
  --cv-status-success: #25b315;
  --cv-status-danger: #c92600;
  --cv-status-warning: #ffa700;
  --cv-status-info: #1560bd;
  --cv-status-dark-blue: #191970;
  --cv-status-yellow: #f6dd29;
  --cv-status-red: #e50000;
  --cv-status-dark-red: #720004;
  --cv-kpi-danger-accent: #e15759;
  --cv-kpi-positive: #28a745;
  --cv-kpi-negative: #dc3545;
  --cv-grid-row-invalid: #e93142;
  --cv-border: #d6d6d6;
  --cv-border-strong: #8f8f8f;
  --cv-border-muted: #b7b7b7;
  --cv-border-panel: #e4e6eb;
  --cv-border-section: #eceef1;
  --cv-border-faint: #f0f1f3;
  --cv-border-input: #ced4da;
  --cv-surface-muted: #eeeeee;
  --cv-surface-subtle: #f8f9fa;
  --cv-surface-icon-bg: #ececec;
  --cv-text-heading: #2f3437;
  --cv-text-dark: #333333;
  --cv-text-muted: #6c757d;
  --cv-text-subtle: #6f6f6f;
  --cv-popover-text: #303030;
}

/* ==========================================================================
   Fluid container reset
   --------------------------------------------------------------------------
   Purpose:
   Removes default Bootstrap container padding so the page content can align
   flush with the surrounding Conventus layout.
   ========================================================================== */
.container-fluid {
  padding: 0 !important;
}

/* ==========================================================================
   Badge base styling
   --------------------------------------------------------------------------
   Purpose:
   Defines compact badge sizing, spacing and border radius for status labels
   and small inline indicators.
   ========================================================================== */
.badge {
  padding: 0.4em 0.65em 0.35em;
  color: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  vertical-align: middle;
  border-radius: 5px;
}

/* ==========================================================================
   Badge color variants
   --------------------------------------------------------------------------
   Purpose:
   Provides Conventus-specific badge color variants for primary, secondary,
   success, danger, warning, info, light and dark states.
   ========================================================================== */
.badge-primary {
  color: #fff !important;
  background-color: var(--cv-primary) !important;
}

.badge-secondary {
  color: #000 !important;
  background-color: var(--cv-status-grey) !important;
}

.badge-success {
  color: #fff !important;
  background-color: var(--cv-status-success) !important;
}

.badge-danger {
  color: #fff !important;
  background-color: var(--cv-status-danger) !important;
}

.badge-warning {
  color: #000 !important;
  background-color: var(--cv-status-warning) !important;
}

.badge-info {
  color: #fff !important;
  background-color: var(--cv-status-info) !important;
}

.badge-light {
  color: #000 !important;
  background-color: var(--cv-secondary) !important;
}

.badge-dark {
  color: #fff !important;
  background-color: var(--cv-status-dark-blue) !important;
}

/* ==========================================================================
   Conventus theme overwrite variables
   --------------------------------------------------------------------------
   Purpose:
   List of CSS variables that overwrite the default Fluent Theme variables to match
   Conventus design. These are defined as CSS variables here because they are used frequently across the application and defining them as CSS variables
   allows for easier maintenance and potential dynamic theming in the future.
   ========================================================================== */
:root {
  --conventus-primary: var(--cv-primary-brand);
  --conventus-border: var(--cv-border);
  --conventus-font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   Theme variables overwrite
   --------------------------------------------------------------------------
   Purpose:
   List of theme variables that are overwritten to match Conventus design.
   ========================================================================== */
:root {
  --bs-primary-rgb: 186, 88, 13;
  --dxbl-text-font-family: var(--conventus-font-family) !important;
  --dxbl-grid-font-family: var(--conventus-font-family) !important;
  --dxds-font-family-sans-serif: var(--conventus-font-family) !important;
  --bs-link-color: #ff6c00;
  --bs-btn-bg: var(--conventus-primary);
  --dxds-color-content-highlight-rest: var(--conventus-primary);
}

/* ==========================================================================
  Conventus Fluent Grid Layer
  --------------------------------------------------------------------------
  Purpose:
  Adds Conventus-specific behavior and layout on top of the DevExpress Fluent
  theme. This file should not replace the Fluent theme; it should be loaded
  after it through ThemeFluentProperties.AddFilePaths(...).
  ========================================================================== */
/* ==========================================================================
   Local CSS variables
   --------------------------------------------------------------------------
   Purpose:
   Centralizes Conventus colors and fallbacks used by the grid overrides.
   Existing app variables such as --cv-primary and --cv-secondary are respected.
   ========================================================================== */
:root {
  --cv-grid-primary: var(--cv-primary, #ba580d);
  --cv-grid-secondary: var(--cv-secondary, #f1f1f1);
  --cv-grid-out-of-stock: var(--grid-out-of-stock, #fff3cd);
  --cv-grid-out-of-stock-hover: var(--grid-out-of-stock-hover, #ffe69c);
  --cv-grid-danger: var(--cv-grid-row-invalid);
  --cv-grid-validation-danger: var(--cv-status-danger);
  --cv-grid-detail-border: var(--cv-border-muted);
  --cv-grid-edit-form-padding: 1.25rem;
  --cv-grid-command-button-padding: 5px;
  --cv-grid-header-indent-radius: 20px;
}

/* ==========================================================================
   Old Conventus grid visual parity layer
   --------------------------------------------------------------------------
   Purpose:
   Restores the most visible differences between the old Office White based
   Conventus grid and the new Fluent grid.
   ========================================================================== */
:root {
  --cv-grid-primary: var(--cv-primary, #ba580d);
  --cv-grid-secondary: var(--cv-secondary, #f1f1f1);
  --cv-grid-header-bg: var(--cv-surface-muted);
  --cv-grid-border: var(--cv-border);
  --cv-grid-border-strong: var(--cv-border-strong);
  --cv-grid-icon-color: var(--cv-icon-orange);
  --cv-grid-text-muted: var(--cv-text-subtle);
}

/* ==========================================================================
   Reusable helpers
   --------------------------------------------------------------------------
   Purpose:
   Keeps repeated border, button and row behavior consistent and easier to
   adjust when DevExpress changes small Fluent details.
   ========================================================================== */
/* ==========================================================================
   Main DxGrid behavior
   --------------------------------------------------------------------------
   Purpose:
   Removes the old heavy theme border, restores row cursor behavior, controls
   table layout, and keeps cell content compact and single-line.
   ========================================================================== */
.dxbl-grid {
  border: none;
}
.dxbl-grid tr td {
  cursor: pointer;
}
.dxbl-grid tr td.dxbl-grid-edit-form {
  cursor: default;
}
.dxbl-grid .dxbl-grid-table {
  border-collapse: collapse;
}
.dxbl-grid .dxbl-grid-table td {
  width: 1rem;
  overflow: hidden;
  white-space: nowrap;
}
.dxbl-grid .dxbl-grid-table th.searchbox-open {
  width: 30rem;
}

/* ==========================================================================
   Grid top panel and search area
   --------------------------------------------------------------------------
   Purpose:
   Restores the Conventus full-width toolbar/search layout inside the DxGrid
   top panel.
   ========================================================================== */
.dxbl-grid .dxbl-grid-top-panel {
  border: none;
}
.dxbl-grid .dxbl-grid-top-panel .dxbl-grid-search-box-container {
  width: 100%;
  margin-left: 0;
  padding: 15px 0 0.5rem;
}
.dxbl-grid .dxbl-grid-top-panel .dxbl-grid-search-box-container .input-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
}
.dxbl-grid .dxbl-grid-top-panel .dxbl-grid-search-box-container .input-group i {
  margin-right: 0.5rem;
}
.dxbl-grid .dxbl-grid-top-panel .dxbl-grid-search-box-container .input-group .grid-search {
  border: none;
}
.dxbl-grid .dxbl-grid-top-panel .dxbl-grid-search-box-container .input-group .grid-search input {
  padding-left: 0;
}
.dxbl-grid .dxbl-grid-top-panel .dxbl-grid-search-box-container .grid-button {
  white-space: nowrap;
}
.dxbl-grid .dxbl-grid-top-panel .dxbl-grid-search-box-container .grid-button span:not(.dxbl-image) {
  text-decoration: none;
}
.dxbl-grid .dxbl-grid-top-panel .dxbl-grid-search-box-container ::deep .dbl-text-edit:has(:focus)::after {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ==========================================================================
   Grid body rows
   --------------------------------------------------------------------------
   Purpose:
   Restores Conventus row hover, selection, border and spacing behavior while
   still using Fluent as the base grid style.
   ========================================================================== */
.dxbl-grid .dxbl-grid-table > tbody > tr:hover, .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row {
  background-color: var(--cv-grid-secondary);
}
.dxbl-grid .dxbl-grid-table > tbody > tr:hover.workplan-out-of-stock, .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row.workplan-out-of-stock {
  background-color: var(--cv-grid-out-of-stock-hover);
}
.dxbl-grid .dxbl-grid-table > tbody > tr:hover td, .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row td {
  color: var(--dxbl-grid-color, #000) !important;
}
.dxbl-grid .dxbl-grid-table > tbody > tr.workplan-out-of-stock {
  background-color: var(--cv-grid-out-of-stock);
}
.dxbl-grid .dxbl-grid-table > tbody > tr.invalid-row {
  color: #fff;
  background-color: var(--cv-grid-danger) !important;
}
.dxbl-grid .dxbl-grid-table > tbody > tr td.invalid-cell {
  box-shadow: inset 0 0 0 2px var(--bs-danger) !important;
}
.dxbl-grid .dxbl-grid-table > tbody > tr td {
  border-left-width: 0;
  border-bottom-width: 0;
  border-top-width: 1px;
  border-image: none !important;
  border-top-color: var(--cv-grid-secondary);
  border-bottom: 1px solid var(--cv-grid-secondary);
}
.dxbl-grid .dxbl-grid-table > tbody > tr td:first-child {
  position: relative;
  border: none;
  overflow: visible;
  border-top-width: 1px;
  border-top-color: var(--cv-grid-secondary);
  border-bottom: 1px solid var(--cv-grid-secondary);
}
.dxbl-grid .dxbl-grid-table > tbody > tr td:last-child {
  position: relative;
  border: none;
  overflow: visible;
  border-top-width: 1px;
  border-top-color: var(--cv-grid-secondary);
  border-bottom: 1px solid var(--cv-grid-secondary);
}
.dxbl-grid .dxbl-grid-table > tbody > tr td:first-child {
  min-width: 21rem !important;
  overflow: hidden;
}
.dxbl-grid .dxbl-grid-table > tbody > tr:nth-last-child(2) td:first-child::before, .dxbl-grid .dxbl-grid-table > tbody > tr:nth-last-child(2) td:last-child::before {
  content: none;
}

/* ==========================================================================
   Edit form row
   --------------------------------------------------------------------------
   Purpose:
   Restores the Conventus inline edit area: secondary background, generous
   padding and clear validation-message styling.
   ========================================================================== */
.dxbl-grid .dxbl-grid-table > tbody > tr td.dxbl-grid-edit-form {
  padding: var(--cv-grid-edit-form-padding);
  background: var(--cv-grid-secondary);
  border-bottom: 2px solid #fff;
}
.dxbl-grid .dxbl-grid-table > tbody > tr td.dxbl-grid-edit-form::before {
  bottom: -4px;
  width: calc(100% - 2.5rem);
}

/* ==========================================================================
   Read-only grid variants
   --------------------------------------------------------------------------
   Purpose:
   Supports popup/embedded read-only grids with constrained dimensions and a
   stronger selected-row style.
   ========================================================================== */
.readonly-grid {
  width: 1000px;
  max-width: 50dvw;
  height: 400px;
  max-height: 50dvh;
  padding: 10px;
}
.readonly-grid .dxbl-grid {
  max-height: 90%;
}
.readonly-grid .dxbl-grid-selected-row {
  color: #fff;
  background-color: var(--cv-grid-primary);
}
.readonly-grid .dxbl-grid-selected-row td {
  border: none !important;
}
.readonly-grid .dxbl-grid-selected-row td:hover {
  background-color: var(--cv-grid-primary);
}
.readonly-grid .dxbl-grid-selected-row:hover {
  background-color: var(--cv-grid-primary) !important;
}
.readonly-grid .dxbl-grid-selected-row:hover.workplan-out-of-stock {
  background-color: var(--cv-grid-out-of-stock-hover);
}

/* ==========================================================================
   Scroll and virtualization helpers
   --------------------------------------------------------------------------
   Purpose:
   Fixes phantom 1px scrolling caused by sub-pixel rounding in non-virtual
   grids and constrains virtual scrolling grids.
   ========================================================================== */
.dxbl-grid:not(.virtual-scrolling-grid):not(.nested-virtual-scrolling-grid) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table {
  contain: paint;
}

.nested-virtual-scrolling-grid {
  max-height: 300px;
}

.virtual-scrolling-grid {
  height: calc(100dvh - 220px);
}

.gridlayout-content:has(.virtual-scrolling-grid) {
  overflow-y: hidden;
}

/* ==========================================================================
   Grid header and filter row
   --------------------------------------------------------------------------
   Purpose:
   The old grid had a clear grey header band. Fluent is much flatter by
   default, so we explicitly restore the old header/filter visual separation.

   Adds a Bootstrap Icons search icon to input editors inside the DevExpress
   Grid filter row, matching the old Conventus filter styling.

   Removes borders from filter row editors and adds padding to keep the target cell
   ========================================================================== */
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row {
  background-color: var(--cv-grid-header-bg);
  border-bottom: 0;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th.dxbl-grid-header,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th.dxbl-grid-fixed-cell:not(.dxbl-grid-empty-cell) {
  background-color: var(--cv-grid-header-bg);
  border-color: white;
  color: #000;
  font-weight: 600;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  border-width: 2px;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th > .dxbl-grid-header-content > span,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th.dxbl-grid-header > .dxbl-grid-header-content > span,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th.dxbl-grid-fixed-cell:not(.dxbl-grid-empty-cell) > .dxbl-grid-header-content > span {
  white-space: nowrap;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row {
  background-color: #fff;
  border-bottom: 2px solid var(--cv-grid-border-strong);
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row .filter-type-container > .element-container {
  flex-grow: 1;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-input-editor::after {
  content: "\f3e1" !important;
  color: var(--cv-icon-muted);
  font-family: bootstrap-icons;
  background: transparent !important;
  display: flex;
  align-items: center;
  margin-right: 0.75rem;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-date-time-edit,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-date-edit {
  border: none;
  width: 100%;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-date-time-edit button,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-date-edit button {
  border: none;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-date-time-edit::after,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-date-edit::after {
  display: none !important;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-spinedit {
  border: none;
  width: calc(100% + 15px);
  /* Decrease padding so the targetted border on the TD is not interrupted by this inputs border */
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-spinedit::after {
  display: none !important;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row dxbl-spinedit input {
  padding: 0 1.25rem !important;
}
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row > td,
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-filter-row > th {
  background-color: #fff;
  border-color: white;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* ==========================================================================
   Command/action icons
   --------------------------------------------------------------------------
   Purpose:
   The old grid used orange action icons. Fluent text buttons default darker,
   so command buttons are recolored back to Conventus orange.
   ========================================================================== */
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text-primary {
  color: var(--cv-grid-icon-color);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn .dxbl-image,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn i,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn [class^=conv-],
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn [class*=" conv-"],
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text .dxbl-image,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text i,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text [class^=conv-],
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text [class*=" conv-"],
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text-primary .dxbl-image,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text-primary i,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text-primary [class^=conv-],
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text-primary [class*=" conv-"] {
  color: var(--cv-grid-icon-color);
}
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn:hover,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text:hover,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text-primary:hover {
  background-color: var(--cv-primary-dark);
}
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn:hover span.dxbl-image,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text:hover span.dxbl-image,
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn.dxbl-btn-text-primary:hover span.dxbl-image {
  color: #fff !important;
}

/* ==========================================================================
   Grid editable status cell
   --------------------------------------------------------------------------
   Purpose:
   Updates the cursor for editable status cells to indicate they are clickable and editable,
   while keeping non-editable status cells with the default cursor.
   This is important for user experience, as it provides a visual cue that the status can be interacted with and changed, which is especially relevant if the status cell uses a custom template that may not have other obvious interactive elements.
   ========================================================================== */
.grid-cell-editable {
  cursor: text !important;
}

/* ==========================================================================
   Inline grid action icon
   --------------------------------------------------------------------------
   Purpose:
   Keeps inline action icons compact, clickable and aligned inside grid cells.
   ========================================================================== */
.grid-inline-action {
  display: inline-flex;
  height: 1.2rem;
  padding: 0 5px;
  margin: 0;
  cursor: pointer !important;
}

/* ==========================================================================
   Grid edited/interactive cell states
   --------------------------------------------------------------------------
   Purpose:
   Highlights modified grid cells and applies pointer cursors to editable
   grid cells.
   ========================================================================== */
.grid-modified-cell {
  background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
}

.grid-cell-editable {
  cursor: pointer !important;
}

/* ==========================================================================
   Grid cell link
   --------------------------------------------------------------------------
   Purpose:
   Provides link-style visual feedback for clickable cell content that
   navigates to a detail page. Shows underline on hover and pointer cursor.
   ========================================================================== */
.grid-cell-link {
  display: block;
  width: 100%;
  height: 100%;
  margin: -0.5rem;
  padding: 0.5rem;
  color: var(--bs-primary);
  text-decoration: none;
  cursor: pointer;
}
.grid-cell-link:hover {
  text-decoration: underline;
  color: var(--bs-primary);
}

/* ==========================================================================
   Grid empty cell fix
   --------------------------------------------------------------------------
   Purpose:
   Sets the empty cells width to 0 to prevent them from taking space.
   Without this fix there would be a row which can't be interacted with and serves no purpose
   ========================================================================== */
.dxbl-grid-empty-cell {
  width: 0 !important;
}

/* ==========================================================================
   Greyed-out grid styling
   --------------------------------------------------------------------------
   Purpose:
   Gives a grid the same background as the grid header and visually greys out
   the body cells. This is useful for grids that should remain visible but look
   inactive, disabled, or read-only.
   ========================================================================== */
.dxbl-grid.greyed-out .dxbl-grid-table {
  background-color: var(--cv-grid-header-bg);
  border-collapse: separate;
}
.dxbl-grid.greyed-out .dxbl-grid-table .dxbl-grid-header {
  border: none;
  border-radius: 0 !important;
}
.dxbl-grid.greyed-out .dxbl-grid-table tbody {
  background-color: var(--cv-grid-header-bg);
}
.dxbl-grid.greyed-out .dxbl-grid-table tbody td {
  background-color: var(--cv-secondary) !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   Grid detail cell
   --------------------------------------------------------------------------
   Purpose:
   Adds a dashed left border and compact padding to detail/expand rows.
   ========================================================================== */
.dxbl-grid .dxbl-grid-table .dxbl-grid-detail-cell {
  padding: 4px 16px;
  border-left: 2px dashed #b7b7b7;
}

/* ==========================================================================
   Grid toolbar dropdown — active option
   --------------------------------------------------------------------------
   Purpose:
   Makes the currently selected option in the grid toolbar submenus
   (text size, edit mode, virtual scrolling) clearly stand out — bold and
   in the Conventus brand color, instead of relying on the check icon alone.
   ========================================================================== */
.grid-buttongroup-button.active {
  font-weight: 600 !important;
  color: var(--cv-grid-primary) !important;
}
.grid-buttongroup-button.active .dxbl-image,
.grid-buttongroup-button.active i {
  color: var(--cv-grid-primary) !important;
}

/* ==========================================================================
  Header navigation
  --------------------------------------------------------------------------
  Purpose:
  Removes extra padding from the DevExpress menu title and keeps the header
  menu items aligned to the right in a single horizontal row.
  ========================================================================== */
.header-navbar.dxbl-menu-horizontal .dxbl-menu-title {
  padding: 0;
}
.header-navbar .dxbl-menu-item-list {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

/* ==========================================================================
   Main grid layout
   --------------------------------------------------------------------------
   Purpose:
   Ensures the main DevExpress GridLayout fills the available page height while
   preserving the desired horizontal spacing between grid columns.
   Additionally, it hides horizontal overflow on grid layout items to prevent
   unwanted horizontal scrollbars when content exceeds the available width, while
   preserving vertical scrolling for content that exceeds the available height.
   ========================================================================== */
.main-grid {
  /* Scope overflow handling to the content area only. Targeting every grid item (the bare
     .dxbl-gridlayout-item) also clipped the sidebar and header, cutting off the navigation menu. */
}
.main-grid .dxbl-gridlayout-item.content-layout-item {
  overflow-x: hidden;
  overflow-y: auto;
}
.main-grid .dx-gridlayout-root {
  height: auto;
  min-height: 100%;
  grid-column-gap: 1.25rem !important;
}

/* ==========================================================================
   Nested DevExpress FormLayout groups
   --------------------------------------------------------------------------
   Purpose:
   Adjusts nested form layout groups so they look cleaner inside edit/detail
   forms: fixed label width, hidden nested group headers, compact dropdown/edit
   buttons, and Conventus primary coloring for editor icons.
   ========================================================================== */
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col label {
  min-width: 190px;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col {
  margin-top: 0;
  margin-bottom: 0;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-group-header {
  display: none;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col svg .dxbl-image {
  color: red;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-text-edit > .dxbl-btn > svg.dxbl-image,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn > svg.dxbl-image,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn.dxbl-btn > svg.dxbl-image {
  opacity: 1;
  color: var(--cv-primary);
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-text-edit > .dxbl-btn > svg.dxbl-image,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn:not(.dxbl-edit-btn-dropdown, .dxbl-btn-outline-secondary) > svg.dxbl-image,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn.dxbl-btn:not(.dxbl-edit-btn-dropdown, .dxbl-btn-outline-secondary) > svg.dxbl-image {
  color: #fff;
  background-color: var(--cv-primary);
}

/* ==========================================================================
   DevExpress tabs
   --------------------------------------------------------------------------
   Purpose:
   Keeps the active tab aligned with the Conventus visual style: active text
   inherits the current theme color and uses a slightly stronger font weight.
   ========================================================================== */
.dxbl-tabs > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active {
  font-weight: 600;
}
.dxbl-tabs > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active .dxbl-text {
  color: inherit;
}
.dxbl-tabs > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active {
  font-weight: 600;
}
.dxbl-tabs > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active .dxbl-text {
  color: inherit;
}

/* ==========================================================================
   DevExpress grid size variants
   --------------------------------------------------------------------------
   Purpose:
   Overrides DevExpress grid cell padding for small and large grid variants so
   both sizes keep the same Conventus spacing.
   ========================================================================== */
.dxbl-grid.dxbl-sm, .dxbl-grid.dxbl-lg {
  --dxbl-grid-text-cell-padding-x: 1.25rem;
  --dxbl-grid-text-cell-padding-y: 0.5rem;
}

/* ==========================================================================
   Disabled editor buttons
   --------------------------------------------------------------------------
   Purpose:
   Hides disabled custom editor buttons inside text editor button groups, while
   keeping clear buttons and icon-only buttons visible.
   ========================================================================== */
.dxbl-text-edit > .dxbl-btn-group > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon).dxbl-disabled, .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon):disabled {
  display: none;
}

/* ==========================================================================
   GridLayout row spacing
   --------------------------------------------------------------------------
   Purpose:
   Adds a fixed 10px vertical gap between rows in DevExpress GridLayout
   instances that opt in with the grid-layout-row-gap-10 class.
   ========================================================================== */
.grid-layout-row-gap-10 dxbl-grid-layout-root {
  row-gap: 10px;
}

/* ==========================================================================
   Bootstrap primary button background
   --------------------------------------------------------------------------
   Purpose:
   Overrides Bootstrap's primary button background variable. This affects
   buttons such as <button class="btn btn-primary">...</button>.
   ========================================================================== */
.btn.btn-primary {
  --bs-btn-bg: var(--cv-primary);
  --bs-btn-border-color: var(--cv-primary);
  --bs-btn-hover-bg: var(--cv-primary-dark);
  --bs-btn-hover-border-color: var(--cv-primary-dark);
  --bs-btn-active-bg: var(--cv-primary-dark);
  --bs-btn-active-border-color: var(--cv-primary-dark);
}

/* ==========================================================================
   Standalone text-primary button color
   --------------------------------------------------------------------------
   Purpose:
   Applies the Conventus orange color to standalone DevExpress text-primary
   buttons, such as icon/action buttons that are not part of a button group.
   ========================================================================== */
.dxbl-btn.dxbl-btn-text-primary.dxbl-btn-standalone {
  color: var(--cv-primary);
}

/* ==========================================================================
   Main button sizing
   --------------------------------------------------------------------------
   Purpose:
   Normalizes the height and padding for primary, secondary and outline
   Secondary DevExpress buttons so normal buttons visually match split buttons.
   Split buttons are left with smaller padding to accommodate the dropdown arrow without increasing the overall button size.

   Excluded:
   Form field buttons such as dropdown or the clear button
   ========================================================================== */
.dxbl-btn.dxbl-btn-primary:not(.dxbl-edit-btn-dropdown):not(.dxbl-edit-btn-clear):not(.dxbl-spin-btn-inc):not(.dxbl-spin-btn-dec), .dxbl-btn.dxbl-btn-secondary:not(.dxbl-edit-btn-dropdown):not(.dxbl-edit-btn-clear):not(.dxbl-spin-btn-inc):not(.dxbl-spin-btn-dec), .dxbl-btn.dxbl-btn-outline-secondary:not(.dxbl-edit-btn-dropdown):not(.dxbl-edit-btn-clear):not(.dxbl-spin-btn-inc):not(.dxbl-spin-btn-dec) {
  height: 2.65em;
  padding: 1rem;
}
.dxbl-btn.dxbl-btn-split-dropdown {
  padding: 0.5rem;
}

/* ==========================================================================
   Secondary button styling
   --------------------------------------------------------------------------
   Purpose:
   Keeps secondary DevExpress buttons flat and neutral: black border, no shadow,
   and white background when active.
   ========================================================================== */
.dxbl-btn.dxbl-btn-secondary {
  --dxbl-btn-border-color: black;
  --dxbl-btn-hover-border-color: black;
  --dxbl-btn-active-bg: #ffffff;
  box-shadow: none;
}

/* ==========================================================================
   Link button underline spacing
   --------------------------------------------------------------------------
   Purpose:
   Improves readability for DevExpress link-style buttons by adding a small
   offset between the text and underline.
   ========================================================================== */
.dxbl-btn.dxbl-btn-link span:not(.dxbl-image), .dxbl-btn.dxbl-btn-outline-link span:not(.dxbl-image), .dxbl-btn.dxbl-btn-text-link span:not(.dxbl-image) {
  text-underline-offset: 2px;
}

/* ==========================================================================
   DevExpress SplitButton dropdown menu
   --------------------------------------------------------------------------
   Purpose:
   Makes SplitButton dropdown menu text darker and removes the large empty
   space around a small menu item list.
   ========================================================================== */
.dxbl-dropdown .dxbl-listbox,
.dxbl-dropdown .dxbl-menu,
.dxbl-dropdown .dxbl-menu-item-list,
.dxbl-popup .dxbl-listbox,
.dxbl-popup .dxbl-menu,
.dxbl-popup .dxbl-menu-item-list {
  min-width: max-content;
  width: max-content;
}
.dxbl-dropdown .dxbl-listbox-item,
.dxbl-dropdown .dxbl-menu-item,
.dxbl-popup .dxbl-listbox-item,
.dxbl-popup .dxbl-menu-item {
  min-height: 32px;
  padding: 6px 14px;
  color: #000;
}
.dxbl-dropdown .dxbl-listbox-item .dxbl-text,
.dxbl-dropdown .dxbl-menu-item .dxbl-text,
.dxbl-popup .dxbl-listbox-item .dxbl-text,
.dxbl-popup .dxbl-menu-item .dxbl-text {
  color: #000;
}

/* ==========================================================================
   DevExpress dropdown minimum width
   --------------------------------------------------------------------------
   Purpose:
   Sets a reasonable minimum width for DevExpress dropdowns sub buttons,
   ensure they have less unused space.
   ========================================================================== */
.dxbl-dropdown > .dxbl-dropdown-dialog,
.dxbl-itemlist-dropdown > .dxbl-dropdown-dialog {
  --dxbl-dropdown-min-width: 10rem;
}

/* ==========================================================================
   DevExpress SplitButton dropdown popup content
   --------------------------------------------------------------------------
   Purpose:
   Reduces unnecessary white space inside the popup/dropdown container itself.
   ========================================================================== */
.dxbl-popup-content,
.dxbl-dropdown-body,
.dxbl-dropdown-content {
  padding: 0;
}
.dxbl-popup-content .dxbl-listbox,
.dxbl-popup-content .dxbl-menu,
.dxbl-dropdown-body .dxbl-listbox,
.dxbl-dropdown-body .dxbl-menu,
.dxbl-dropdown-content .dxbl-listbox,
.dxbl-dropdown-content .dxbl-menu {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Disabled SplitButton dropdown items
   --------------------------------------------------------------------------
   Purpose:
   Optional: keeps disabled dropdown items readable. Remove this block if you
   want disabled actions to stay visibly greyed out.
   ========================================================================== */
.dxbl-listbox-item.dxbl-disabled, .dxbl-listbox-item:disabled {
  color: #000;
  opacity: 1;
}
.dxbl-listbox-item.dxbl-disabled .dxbl-text, .dxbl-listbox-item:disabled .dxbl-text {
  color: #000;
  opacity: 1;
}

.dxbl-menu-item.dxbl-disabled, .dxbl-menu-item:disabled {
  color: #000;
  opacity: 1;
}
.dxbl-menu-item.dxbl-disabled .dxbl-text, .dxbl-menu-item:disabled .dxbl-text {
  color: #000;
  opacity: 1;
}

/* ==========================================================================
   Disabled form field behavior
   --------------------------------------------------------------------------
   Purpose:
   Keeps all disabled DevExpress form fields readable and clearly non-editable.
   This removes the faded disabled look, keeps text black, and applies a
   not-allowed cursor to text boxes, dropdowns, combo boxes, date edits,
   spin edits, memo fields, tag boxes and checkboxes.
   ========================================================================== */
.dxbl-fl .dxbl-text-edit.dxbl-disabled, .dxbl-fl .dxbl-text-edit:disabled,
.dxbl-fl .dxbl-combobox.dxbl-disabled,
.dxbl-fl .dxbl-combobox:disabled,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled,
.dxbl-fl .dxbl-dropdown-box:disabled,
.dxbl-fl .dxbl-date-edit.dxbl-disabled,
.dxbl-fl .dxbl-date-edit:disabled,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled,
.dxbl-fl .dxbl-date-time-edit:disabled,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled,
.dxbl-fl .dxbl-spin-edit:disabled,
.dxbl-fl .dxbl-memo.dxbl-disabled,
.dxbl-fl .dxbl-memo:disabled,
.dxbl-fl .dxbl-tag-box.dxbl-disabled,
.dxbl-fl .dxbl-tag-box:disabled,
.dxbl-fl .dxbl-checkbox.dxbl-disabled,
.dxbl-fl .dxbl-checkbox:disabled {
  --dxbl-text-edit-disabled-opacity: 1;
  --dxbl-disabled-opacity: 1;
  color: #000;
  cursor: not-allowed;
  opacity: 1;
}
.dxbl-fl .dxbl-text-edit.dxbl-disabled *, .dxbl-fl .dxbl-text-edit:disabled *,
.dxbl-fl .dxbl-combobox.dxbl-disabled *,
.dxbl-fl .dxbl-combobox:disabled *,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled *,
.dxbl-fl .dxbl-dropdown-box:disabled *,
.dxbl-fl .dxbl-date-edit.dxbl-disabled *,
.dxbl-fl .dxbl-date-edit:disabled *,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled *,
.dxbl-fl .dxbl-date-time-edit:disabled *,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled *,
.dxbl-fl .dxbl-spin-edit:disabled *,
.dxbl-fl .dxbl-memo.dxbl-disabled *,
.dxbl-fl .dxbl-memo:disabled *,
.dxbl-fl .dxbl-tag-box.dxbl-disabled *,
.dxbl-fl .dxbl-tag-box:disabled *,
.dxbl-fl .dxbl-checkbox.dxbl-disabled *,
.dxbl-fl .dxbl-checkbox:disabled * {
  color: #000;
  cursor: not-allowed;
  opacity: 1;
}
.dxbl-fl .dxbl-text-edit.dxbl-disabled input,
.dxbl-fl .dxbl-text-edit.dxbl-disabled textarea,
.dxbl-fl .dxbl-text-edit.dxbl-disabled button,
.dxbl-fl .dxbl-text-edit.dxbl-disabled .dxbl-text,
.dxbl-fl .dxbl-text-edit.dxbl-disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-text-edit.dxbl-disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-text-edit.dxbl-disabled .dxbl-btn,
.dxbl-fl .dxbl-text-edit.dxbl-disabled .dxbl-image, .dxbl-fl .dxbl-text-edit:disabled input,
.dxbl-fl .dxbl-text-edit:disabled textarea,
.dxbl-fl .dxbl-text-edit:disabled button,
.dxbl-fl .dxbl-text-edit:disabled .dxbl-text,
.dxbl-fl .dxbl-text-edit:disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-text-edit:disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-text-edit:disabled .dxbl-btn,
.dxbl-fl .dxbl-text-edit:disabled .dxbl-image,
.dxbl-fl .dxbl-combobox.dxbl-disabled input,
.dxbl-fl .dxbl-combobox.dxbl-disabled textarea,
.dxbl-fl .dxbl-combobox.dxbl-disabled button,
.dxbl-fl .dxbl-combobox.dxbl-disabled .dxbl-text,
.dxbl-fl .dxbl-combobox.dxbl-disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-combobox.dxbl-disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-combobox.dxbl-disabled .dxbl-btn,
.dxbl-fl .dxbl-combobox.dxbl-disabled .dxbl-image,
.dxbl-fl .dxbl-combobox:disabled input,
.dxbl-fl .dxbl-combobox:disabled textarea,
.dxbl-fl .dxbl-combobox:disabled button,
.dxbl-fl .dxbl-combobox:disabled .dxbl-text,
.dxbl-fl .dxbl-combobox:disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-combobox:disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-combobox:disabled .dxbl-btn,
.dxbl-fl .dxbl-combobox:disabled .dxbl-image,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled input,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled textarea,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled button,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled .dxbl-text,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled .dxbl-btn,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled .dxbl-image,
.dxbl-fl .dxbl-dropdown-box:disabled input,
.dxbl-fl .dxbl-dropdown-box:disabled textarea,
.dxbl-fl .dxbl-dropdown-box:disabled button,
.dxbl-fl .dxbl-dropdown-box:disabled .dxbl-text,
.dxbl-fl .dxbl-dropdown-box:disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-dropdown-box:disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-dropdown-box:disabled .dxbl-btn,
.dxbl-fl .dxbl-dropdown-box:disabled .dxbl-image,
.dxbl-fl .dxbl-date-edit.dxbl-disabled input,
.dxbl-fl .dxbl-date-edit.dxbl-disabled textarea,
.dxbl-fl .dxbl-date-edit.dxbl-disabled button,
.dxbl-fl .dxbl-date-edit.dxbl-disabled .dxbl-text,
.dxbl-fl .dxbl-date-edit.dxbl-disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-date-edit.dxbl-disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-date-edit.dxbl-disabled .dxbl-btn,
.dxbl-fl .dxbl-date-edit.dxbl-disabled .dxbl-image,
.dxbl-fl .dxbl-date-edit:disabled input,
.dxbl-fl .dxbl-date-edit:disabled textarea,
.dxbl-fl .dxbl-date-edit:disabled button,
.dxbl-fl .dxbl-date-edit:disabled .dxbl-text,
.dxbl-fl .dxbl-date-edit:disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-date-edit:disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-date-edit:disabled .dxbl-btn,
.dxbl-fl .dxbl-date-edit:disabled .dxbl-image,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled input,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled textarea,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled button,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled .dxbl-text,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled .dxbl-btn,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled .dxbl-image,
.dxbl-fl .dxbl-date-time-edit:disabled input,
.dxbl-fl .dxbl-date-time-edit:disabled textarea,
.dxbl-fl .dxbl-date-time-edit:disabled button,
.dxbl-fl .dxbl-date-time-edit:disabled .dxbl-text,
.dxbl-fl .dxbl-date-time-edit:disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-date-time-edit:disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-date-time-edit:disabled .dxbl-btn,
.dxbl-fl .dxbl-date-time-edit:disabled .dxbl-image,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled input,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled textarea,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled button,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled .dxbl-text,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled .dxbl-btn,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled .dxbl-image,
.dxbl-fl .dxbl-spin-edit:disabled input,
.dxbl-fl .dxbl-spin-edit:disabled textarea,
.dxbl-fl .dxbl-spin-edit:disabled button,
.dxbl-fl .dxbl-spin-edit:disabled .dxbl-text,
.dxbl-fl .dxbl-spin-edit:disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-spin-edit:disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-spin-edit:disabled .dxbl-btn,
.dxbl-fl .dxbl-spin-edit:disabled .dxbl-image,
.dxbl-fl .dxbl-memo.dxbl-disabled input,
.dxbl-fl .dxbl-memo.dxbl-disabled textarea,
.dxbl-fl .dxbl-memo.dxbl-disabled button,
.dxbl-fl .dxbl-memo.dxbl-disabled .dxbl-text,
.dxbl-fl .dxbl-memo.dxbl-disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-memo.dxbl-disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-memo.dxbl-disabled .dxbl-btn,
.dxbl-fl .dxbl-memo.dxbl-disabled .dxbl-image,
.dxbl-fl .dxbl-memo:disabled input,
.dxbl-fl .dxbl-memo:disabled textarea,
.dxbl-fl .dxbl-memo:disabled button,
.dxbl-fl .dxbl-memo:disabled .dxbl-text,
.dxbl-fl .dxbl-memo:disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-memo:disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-memo:disabled .dxbl-btn,
.dxbl-fl .dxbl-memo:disabled .dxbl-image,
.dxbl-fl .dxbl-tag-box.dxbl-disabled input,
.dxbl-fl .dxbl-tag-box.dxbl-disabled textarea,
.dxbl-fl .dxbl-tag-box.dxbl-disabled button,
.dxbl-fl .dxbl-tag-box.dxbl-disabled .dxbl-text,
.dxbl-fl .dxbl-tag-box.dxbl-disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-tag-box.dxbl-disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-tag-box.dxbl-disabled .dxbl-btn,
.dxbl-fl .dxbl-tag-box.dxbl-disabled .dxbl-image,
.dxbl-fl .dxbl-tag-box:disabled input,
.dxbl-fl .dxbl-tag-box:disabled textarea,
.dxbl-fl .dxbl-tag-box:disabled button,
.dxbl-fl .dxbl-tag-box:disabled .dxbl-text,
.dxbl-fl .dxbl-tag-box:disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-tag-box:disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-tag-box:disabled .dxbl-btn,
.dxbl-fl .dxbl-tag-box:disabled .dxbl-image,
.dxbl-fl .dxbl-checkbox.dxbl-disabled input,
.dxbl-fl .dxbl-checkbox.dxbl-disabled textarea,
.dxbl-fl .dxbl-checkbox.dxbl-disabled button,
.dxbl-fl .dxbl-checkbox.dxbl-disabled .dxbl-text,
.dxbl-fl .dxbl-checkbox.dxbl-disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-checkbox.dxbl-disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-checkbox.dxbl-disabled .dxbl-btn,
.dxbl-fl .dxbl-checkbox.dxbl-disabled .dxbl-image,
.dxbl-fl .dxbl-checkbox:disabled input,
.dxbl-fl .dxbl-checkbox:disabled textarea,
.dxbl-fl .dxbl-checkbox:disabled button,
.dxbl-fl .dxbl-checkbox:disabled .dxbl-text,
.dxbl-fl .dxbl-checkbox:disabled .dxbl-text-edit-input,
.dxbl-fl .dxbl-checkbox:disabled .dxbl-text-edit-template,
.dxbl-fl .dxbl-checkbox:disabled .dxbl-btn,
.dxbl-fl .dxbl-checkbox:disabled .dxbl-image {
  color: #000;
  cursor: not-allowed;
  opacity: 1;
}
.dxbl-fl .dxbl-text-edit.dxbl-disabled svg, .dxbl-fl .dxbl-text-edit:disabled svg,
.dxbl-fl .dxbl-combobox.dxbl-disabled svg,
.dxbl-fl .dxbl-combobox:disabled svg,
.dxbl-fl .dxbl-dropdown-box.dxbl-disabled svg,
.dxbl-fl .dxbl-dropdown-box:disabled svg,
.dxbl-fl .dxbl-date-edit.dxbl-disabled svg,
.dxbl-fl .dxbl-date-edit:disabled svg,
.dxbl-fl .dxbl-date-time-edit.dxbl-disabled svg,
.dxbl-fl .dxbl-date-time-edit:disabled svg,
.dxbl-fl .dxbl-spin-edit.dxbl-disabled svg,
.dxbl-fl .dxbl-spin-edit:disabled svg,
.dxbl-fl .dxbl-memo.dxbl-disabled svg,
.dxbl-fl .dxbl-memo:disabled svg,
.dxbl-fl .dxbl-tag-box.dxbl-disabled svg,
.dxbl-fl .dxbl-tag-box:disabled svg,
.dxbl-fl .dxbl-checkbox.dxbl-disabled svg,
.dxbl-fl .dxbl-checkbox:disabled svg {
  color: var(--cv-icon-muted);
  fill: var(--cv-icon-muted);
}

/* ==========================================================================
   DevExpress group headers and bodies
   --------------------------------------------------------------------------
   Purpose:
   Makes group headers more compact and bold, and reduces group body padding
   for denser Conventus form layouts.
   ========================================================================== */
.dxbl-group > .dxbl-group-header {
  padding: 4px 8px 0;
}
.dxbl-group > .dxbl-group-header > .dxbl-text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  margin-top: 0.5rem;
  margin-left: 0.65rem;
}

.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content {
  padding: 8px 15px;
}

/* ==========================================================================
   FormLayout group spacing
   --------------------------------------------------------------------------
   Purpose:
   Reduces the default vertical spacing between FormLayout groups for a denser
   Conventus form layout.
   ========================================================================== */
.dxbl-fl .dxbl-fl-gd,
.dxbl-fl .dxbl-fl-gt {
  margin-bottom: calc(var(--dxbl-fl-group-spacing-y) * 0.1);
}

/* ==========================================================================
   Checkbox alignment
   --------------------------------------------------------------------------
   Purpose:
   Vertically centers DevExpress checkbox content.
   ========================================================================== */
.dxbl-checkbox {
  padding-left: 0;
  align-items: center;
}
.dxbl-checkbox > .dxbl-checkbox-check-element {
  width: 1.125rem;
  height: 1.125rem;
}
.dxbl-checkbox.dxbl-checkbox-unchecked > .dxbl-checkbox-check-element {
  background: white;
  border: 2px solid rgba(118, 118, 118, 0.3);
}
.dxbl-checkbox.dxbl-checkbox-checked.dxbl-disabled > .dxbl-checkbox-check-element {
  background-color: black;
  opacity: 0.3;
}

/* ==========================================================================
   FormLayout captions
   --------------------------------------------------------------------------
   Purpose:
   Adds a small top margin to columns and gives form captions a medium font
   weight with compact vertical padding.
   ========================================================================== */
.dxbl-col {
  margin-top: 0.5rem;
}

.dxbl-fl:not(.dxbl-fl-calc) .dxbl-fl-item > .dxbl-fl-cpt {
  padding: 1px 0;
  font-weight: 500;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col label {
  padding: 1px 0;
  font-weight: 500;
}

/* ==========================================================================
   Editor input padding
   --------------------------------------------------------------------------
   Purpose:
   Normalizes left padding for text editors and TagBox tags so editor content
   aligns consistently across controls.
   ========================================================================== */
.dxbl-tag-box > .dxbl-tag {
  padding-left: 8px;
}

.dxbl-text-edit > .dxbl-text-edit-template,
.dxbl-text-edit > .dxbl-text-edit-input,
.dxbl-text-edit > textarea {
  padding-left: 8px;
}
.dxbl-text-edit > .dxbl-text-edit-template .dxbl-text-edit-input {
  padding-left: 8px;
}

/* ==========================================================================
   Validation messages
   --------------------------------------------------------------------------
   Purpose:
   Styles validation errors consistently and renders grouped validation
   messages as a custom bullet list without relying on native list styling.
   ========================================================================== */
.validation-message {
  color: var(--bs-danger-rgb);
}

.validation-error-group {
  padding-left: 1rem;
  margin-top: 0;
  margin-bottom: 1rem;
  list-style-type: none;
}
.validation-error-group .validation-message {
  position: relative;
  padding-left: 1rem;
  color: var(--bs-danger-rgb);
}
.validation-error-group .validation-message::before {
  content: "•";
  position: absolute;
  top: -0.3rem;
  left: -0.05rem;
  font-size: 1.4rem;
}

/* ==========================================================================
   Editor validation status spacing
   --------------------------------------------------------------------------
   Purpose:
   Adds spacing before the DevExpress validation icon/status element.
   ========================================================================== */
.dxbl-edit-validation-status {
  padding-left: 6px !important;
}

/* ==========================================================================
   FormLayout group card background
   --------------------------------------------------------------------------
   Purpose:
   Restores the old Conventus FormLayout group styling that existed in the
   Office White based theme: grey group background, rounded corners, no visible
   border, and consistent inner padding for grouped form sections.
   ========================================================================== */
.dxbl-fl .dxbl-fl-group > .dxbl-group,
.dxbl-fl .dxbl-fl-group > dxbl-group-control,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group {
  overflow: hidden;
  color: #000;
  background-color: var(--cv-secondary);
  border: 0;
  border-radius: 20px;
  box-shadow: none;
}
.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-header,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > .dxbl-group-header,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > .dxbl-group-header {
  color: #000;
  background-color: var(--cv-secondary);
  border: 0;
}
.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body,
.dxbl-fl .dxbl-fl-group > .dxbl-group > dxbl-group-body,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > .dxbl-group-body,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > dxbl-group-body,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > .dxbl-group-body,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > dxbl-group-body {
  background-color: var(--cv-secondary);
}
.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > .dxbl-group > dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > .dxbl-group > dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > .dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > .dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > .dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > .dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > dxbl-group-body > dxbl-group-body-content {
  padding: 1.25rem;
  background-color: var(--cv-secondary);
}
.dxbl-fl .dxbl-fl-group > .dxbl-group .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group .dxbl-group-body-content {
  background-color: var(--cv-secondary);
}

/* ==========================================================================
   FormLayout group spacing
   --------------------------------------------------------------------------
   Purpose:
   Recreates the old spacing between grouped form sections without adding a
   large gap inside the grey group card itself.
   ========================================================================== */
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd, .dxbl-fl .dxbl-fl-group.dxbl-fl-gt {
  margin: 10px 0 0;
}

/* ==========================================================================
   FormLayout group outer spacing
   --------------------------------------------------------------------------
   Purpose:
   Adds spacing between FormLayout groups while keeping enough room at the top
   of each grey group so labels are not clipped by the rounded container.
   ========================================================================== */
.dxbl-fl > .dxbl-fl-gd,
.dxbl-fl > .dxbl-fl-gt {
  margin: 10px 0 0;
}

/* ==========================================================================
   Nested FormLayout groups
   --------------------------------------------------------------------------
   Purpose:
   Prevents nested groups from creating a second grey rounded card inside an
   existing grey group. This keeps nested groups visually flat and compact.
   ========================================================================== */
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > .dxbl-group,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-group-control,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-form-layout-group {
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > .dxbl-group > .dxbl-group-header,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-group-control > .dxbl-group-header,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-form-layout-group > .dxbl-group-header {
  display: none;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > .dxbl-group > .dxbl-group-body,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > .dxbl-group > dxbl-group-body,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-group-control > .dxbl-group-body,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-group-control > dxbl-group-body,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-form-layout-group > .dxbl-group-body,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-form-layout-group > dxbl-group-body {
  background-color: transparent;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > .dxbl-group > .dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > .dxbl-group > dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > .dxbl-group > dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-group-control > .dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-group-control > .dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-group-control > dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-group-control > dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-form-layout-group > .dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-form-layout-group > .dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-form-layout-group > dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-form-layout-group > dxbl-group-body > dxbl-group-body-content {
  padding: 0;
  background-color: transparent;
}
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > .dxbl-group .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-group-control .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group.dxbl-fl-gd.dxbl-col .dxbl-fl-group.dxbl-fl-gd.dxbl-col > dxbl-form-layout-group .dxbl-group-body-content {
  background-color: transparent;
}

/* ==========================================================================
   FormLayout group inner padding
   --------------------------------------------------------------------------
   Purpose:
   Restores the old Conventus spacing inside FormLayout groups. Without this,
   the Fluent theme places labels and editors too close to the rounded group
   edges, causing the form to look cramped and sometimes visually clipped.
   ========================================================================== */
.dxbl-fl .dxbl-fl-group > .dxbl-group,
.dxbl-fl .dxbl-fl-group > dxbl-group-control,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group {
  padding: 0;
}
.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body,
.dxbl-fl .dxbl-fl-group > .dxbl-group > dxbl-group-body,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > .dxbl-group-body,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > dxbl-group-body,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > .dxbl-group-body,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > dxbl-group-body {
  padding: 0;
  background-color: var(--cv-secondary);
}
.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > .dxbl-group > dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > .dxbl-group > dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > .dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > .dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control > dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > .dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > .dxbl-group-body > dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > dxbl-group-body > .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group > dxbl-group-body > dxbl-group-body-content {
  padding: 1.25rem;
  background-color: var(--cv-secondary);
}
.dxbl-fl .dxbl-fl-group > .dxbl-group .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-group-control .dxbl-group-body-content,
.dxbl-fl .dxbl-fl-group > dxbl-form-layout-group .dxbl-group-body-content {
  padding: 1.25rem;
  background-color: var(--cv-secondary);
}

/* ==========================================================================
   White form background variant
   --------------------------------------------------------------------------
   Purpose:
   Forces selected forms back to a white background when they should not use
   the default grey Conventus FormLayout group styling.
   ========================================================================== */
.form-background-white {
  background: #fff !important;
}
.form-background-white .dxbl-fl-group,
.form-background-white .dxbl-group,
.form-background-white dxbl-group-control,
.form-background-white dxbl-form-layout-group,
.form-background-white .dxbl-group-header,
.form-background-white .dxbl-group-body,
.form-background-white .dxbl-group-body-content {
  background: #fff !important;
}

/* ==========================================================================
   Readonly and disabled editor background
   --------------------------------------------------------------------------
   Purpose:
   Keeps readonly and disabled DevExpress text editors visually white instead
   of greyed out.
   ========================================================================== */
.dxbl-text-edit.dxbl-disabled, .dxbl-text-edit.dxbl-readonly {
  background: #fff;
}

/* ==========================================================================
   Readonly and disabled text editor lock icon
   --------------------------------------------------------------------------
   Purpose:
   Adds a centered Bootstrap Icons lock indicator to disabled/readonly
   DevExpress text editors. The icon is positioned absolutely so it stays
   vertically centered regardless of editor height.
   ========================================================================== */
.dxbl-text-edit.dxbl-disabled, .dxbl-text-edit.dxbl-readonly {
  position: relative;
}
.dxbl-text-edit.dxbl-disabled::after, .dxbl-text-edit.dxbl-readonly::after {
  content: "\f47a" !important;
  position: absolute !important;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: var(--cv-icon-muted);
  font-family: bootstrap-icons;
  font-size: 0.85rem;
  line-height: 1;
  background: transparent !important;
  pointer-events: none;
}
.dxbl-text-edit.dxbl-disabled .dxbl-text-edit-input, .dxbl-text-edit.dxbl-readonly .dxbl-text-edit-input {
  padding-right: 1.75rem;
}

/* ==========================================================================
   Disabled checkbox lock icon
   --------------------------------------------------------------------------
   Purpose:
   Adds a Bootstrap Icons lock indicator to disabled checkboxes, using a
   slightly different color because checkbox rendering differs from text edits.
   ========================================================================== */
.dxbl-checkbox.dxbl-disabled::after {
  content: "\f47a" !important;
  position: relative !important;
  color: var(--cv-icon-muted-dark);
  font-family: bootstrap-icons;
  background: transparent !important;
  margin-left: 0.25rem;
}

/* ==========================================================================
   Full-height FormLayout group
   --------------------------------------------------------------------------
   Purpose:
   Forces specific FormLayout groups to fill the available row height.
   ========================================================================== */
.group-height-100 dxbl-group-control {
  height: 100%;
}

/* ==========================================================================
   Form group header decoration reset
   --------------------------------------------------------------------------
   Purpose:
   Removes the dark grey pseudo-element/header bar from DevExpress group
   headers.
   ========================================================================== */
.dxbl-group > .dxbl-group-header::before {
  background-color: transparent !important;
}

/* ==========================================================================
   TimeEdit footer customization
   --------------------------------------------------------------------------
   Purpose:
   Hides the "Now" button in TimeEdit dropdown footers for controls that opt in
   with the timeedit-hide-now class.
   ========================================================================== */
.timeedit-hide-now .dxbl-edit-dropdown-footer > button:first-child {
  display: none;
}

/* ==========================================================================
   Calendar and DateEdit dropdown footer buttons
   --------------------------------------------------------------------------
   Purpose:
   Styles DateEdit/Calendar footer buttons so Apply is primary and Today/Close
   are secondary.
   ========================================================================== */
.dxbl-edit-dropdown-footer > .dxbl-btn:nth-child(2) {
  --dxbl-btn-bg: var(--cv-primary) !important;
  --dxbl-btn-border-color: var(--cv-primary) !important;
  --dxbl-btn-hover-bg: var(--cv-primary) !important;
  --dxbl-btn-hover-border-color: var(--cv-primary) !important;
  --dxbl-btn-active-bg: var(--cv-primary) !important;
  --dxbl-btn-active-border-color: var(--cv-primary) !important;
  --dxbl-btn-color: #ffffff !important;
  color: #fff !important;
}
.dxbl-edit-dropdown-footer > .dxbl-btn:nth-child(1), .dxbl-edit-dropdown-footer > .dxbl-btn:nth-child(3) {
  --dxbl-btn-bg: #ffffff !important;
  --dxbl-btn-border-color: black !important;
  --dxbl-btn-hover-bg: #ffffff !important;
  --dxbl-btn-hover-border-color: black !important;
  --dxbl-btn-active-bg: #ffffff !important;
  --dxbl-btn-color: black !important;
  color: black !important;
}

/* ==========================================================================
   Calendar fixed width
   --------------------------------------------------------------------------
   Purpose:
   Prevents calendar dropdown width changes caused by different month-name
   lengths.
   ========================================================================== */
.dxbl-calendar {
  width: 325px;
}

/* ==========================================================================
   List box height adjustment
   --------------------------------------------------------------------------
   Purpose:
   Sets list boxes to fill the available height of their container, preventing
   awkward empty space when list content is short.
   ========================================================================== */
.dxbl-list-box {
  height: 100%;
}

/* ==========================================================================
   DropDownBox & TagBox clear button icon contrast
   --------------------------------------------------------------------------
   Purpose:
   Makes the clear/dismiss icon inside DevExpress DropDownBox controls more
   visible by forcing the SVG to a consistent size, circular shape, and white
   fill/stroke color.
   ========================================================================== */
dxbl-tag-box button.dxbl-edit-btn-clear svg.dxbl-image,
dxbl-date-edit button.dxbl-edit-btn-clear svg.dxbl-image,
dxbl-dropdown-box button.dxbl-edit-btn-clear svg.dxbl-image {
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 50%;
  fill: #fff !important;
  stroke: #fff !important;
  stroke-width: 0 !important;
  stroke-linecap: round;
}

/* ==========================================================================
   Input placeholder visibility for disabled editors
   --------------------------------------------------------------------------
   Purpose:
   Hides the placeholder text for disabled input fields
   ========================================================================== */
input:disabled::placeholder {
  color: transparent !important;
}

/* ==========================================================================
   Input required indicator
   --------------------------------------------------------------------------
   Purpose:
   Adds a red mark to the end of form labels for required fields. This is a simple visual
   Helper to easily see what fields are required
   ========================================================================== */
.required-caption:after {
  content: "*";
  color: red;
}

/* ==========================================================================
   Tagbox pill styling
   --------------------------------------------------------------------------
   Purpose:
   Reduces the paddings to the sides and font weight
   ========================================================================== */
dxbl-tag-box .dxbl-tag .dxbl-tag-text {
  font-weight: 400;
  padding-left: 0.125rem !important;
  padding-right: 0.125rem !important;
}

/* ==========================================================================
   Modal vertical alignment
   --------------------------------------------------------------------------
   Purpose:
   Centers modal dialogs vertically inside the modal root container.
   ========================================================================== */
.dxbl-modal > .dxbl-modal-root {
  align-content: center;
}

/* ==========================================================================
   Modal footer button spacing
   --------------------------------------------------------------------------
   Purpose:
   Adds consistent spacing between action buttons in modal footers.
   ========================================================================== */
.dxbl-modal-footer button {
  margin-left: 0.5em;
}

/* ==========================================================================
   Modal close button radius
   --------------------------------------------------------------------------
   Purpose:
   Prevents an oval hover/active shape on the popup close button by forcing a
   small border radius.
   ========================================================================== */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header .dxbl-popup-header-button {
  --dxbl-btn-border-radius: 5%;
}

/* ==========================================================================
   Modal border reset
   --------------------------------------------------------------------------
   Purpose:
   Removes the default border around DevExpress modal content.
   ========================================================================== */
.dxbl-modal-content {
  border: 0 !important;
}

/* ==========================================================================
   Popover and appointment dialog headers
   --------------------------------------------------------------------------
   Purpose:
   Restores the Conventus orange header styling for popovers and scheduler
   appointment edit dialogs.
   ========================================================================== */
.popover-body {
  color: var(--cv-popover-text);
}

.popover-header,
.dxbl-apt-edit-dialog-header {
  background: var(--cv-primary) !important;
}
.popover-header > div,
.popover-header > .dxbl-btn,
.popover-header > .dxbl-sc-dialog-title,
.popover-header > .dxbl-btn-tool,
.dxbl-apt-edit-dialog-header > div,
.dxbl-apt-edit-dialog-header > .dxbl-btn,
.dxbl-apt-edit-dialog-header > .dxbl-sc-dialog-title,
.dxbl-apt-edit-dialog-header > .dxbl-btn-tool {
  color: #fff !important;
}
.popover-header .dxbl-btn.dxbl-btn-tool:hover,
.dxbl-apt-edit-dialog-header .dxbl-btn.dxbl-btn-tool:hover {
  color: #fff !important;
  background: var(--cv-primary-dark) !important;
  background-color: var(--cv-primary-dark) !important;
  border-color: var(--cv-primary-dark) !important;
}

/* ==========================================================================
   Message box footer buttons
   --------------------------------------------------------------------------
   Purpose:
   Restores Conventus-specific colors for message box primary and secondary
   buttons where DevExpress variables are not enough.
   ========================================================================== */
.dxbl-message-box-footer .dxbl-message-box-footer-primary-button {
  background-color: var(--cv-messagebox-btn-primary) !important;
}
.dxbl-message-box-footer .dxbl-message-box-footer-primary-button:hover {
  color: #fff !important;
  background-color: var(--cv-primary-dark) !important;
  border-color: var(--cv-primary-dark) !important;
}
.dxbl-message-box-footer .dxbl-message-box-footer-secondary-button {
  color: var(--cv-messagebox-btn-secondary-text) !important;
  border-color: var(--cv-messagebox-btn-secondary-border) !important;
}
.dxbl-message-box-footer .dxbl-message-box-footer-secondary-button:hover {
  color: var(--cv-messagebox-btn-secondary-text) !important;
  background-color: var(--cv-surface-subtle) !important;
  border-color: var(--cv-messagebox-btn-secondary-border) !important;
}

/* ==========================================================================
   Status indicator base
   --------------------------------------------------------------------------
   Purpose:
   Defines the shared visual shape for status indicators: a small inline
   circular marker that aligns with surrounding text and leaves space before
   the status label.
   ========================================================================== */
.status-indicator {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 10px;
  font-style: normal;
  text-align: center;
  vertical-align: middle;
}

/* ==========================================================================
   Hidden status indicator
   --------------------------------------------------------------------------
   Purpose:
   Hides the status indicator completely when no visible status marker should
   be shown.
   ========================================================================== */
.status-none {
  display: none;
}

/* ==========================================================================
   Status wrapper
   --------------------------------------------------------------------------
   Purpose:
   Removes default paragraph spacing around status content so indicators and
   labels align cleanly inside compact layouts such as grids.
   ========================================================================== */
.status-wrapper {
  margin: 0;
}

/* ==========================================================================
   Filled status color variants
   --------------------------------------------------------------------------
   Purpose:
   Provides reusable background and text color combinations for status
   indicators that need a colored circular marker.
   ========================================================================== */
.status-black {
  color: #fff;
  background-color: #000;
}

.status-grey {
  color: #000;
  background-color: var(--cv-status-grey);
}

.status-green {
  color: #fff;
  background-color: var(--cv-status-success);
}

.status-orange {
  color: #000;
  background-color: var(--cv-primary-brand);
}

.status-yellow {
  color: #000;
  background-color: var(--cv-status-yellow);
}

.status-red {
  color: #fff;
  background-color: var(--cv-status-red);
}

.status-dark-red {
  color: #fff;
  background-color: var(--cv-status-dark-red);
}

.status-light-blue {
  color: #fff;
  background-color: var(--cv-status-info);
}

.status-blue {
  color: #fff;
  background-color: var(--cv-status-dark-blue);
}

/* ==========================================================================
   Text-only status color variants
   --------------------------------------------------------------------------
   Purpose:
   Provides reusable text color classes for statuses where only the text should
   be colored and no filled circular marker is needed.
   ========================================================================== */
.status-orange-color {
  color: var(--cv-primary-brand);
}

.status-red-color {
  color: red;
}

/* ==========================================================================
   Readonly status positioning
   --------------------------------------------------------------------------
   Purpose:
   Places the tabs status wrapper in the same position as the edit form status wrapper, so the
   status indicator and label are consistently located across the application regardless of the context.
   ========================================================================== */
.tabs-container .status-wrapper {
  padding: 1rem 1rem 1.25rem 1rem;
  height: 2.65em;
}

/* ==========================================================================
   Main text behavior
   --------------------------------------------------------------------------
   Purpose:
   Overwrites the default text settings of the Fluent Theme to match
   Conventus design. This is required because the old theme set the font
   ========================================================================== */
html,
body {
  font-family: var(--conventus-font-family);
  font-size: var(--conventus-font-size);
  line-height: var(--conventus-line-height);
}
html .bi::before, html [class*=" bi-"]::before,
body .bi::before,
body [class*=" bi-"]::before {
  line-height: inherit;
}

/* ==========================================================================
   Status text styling
   --------------------------------------------------------------------------
   Purpose:
   Highlights warning and danger text with stronger font weight and status
   colors. Also styles urgent Bootstrap icons so they stand out slightly more
   and have spacing before the text.
   ========================================================================== */
.text-danger {
  font-weight: 600;
  color: #C92600 !important;
}

.text-warning {
  font-weight: 600;
  color: #ffa700 !important;
}

.urgent {
  font-weight: 600;
  color: #C92600 !important;
}
.urgent.bi::before {
  margin-right: 5px;
  font-size: 1.2em;
}

/* ==========================================================================
   Scheduler appointment dialog sizing
   --------------------------------------------------------------------------
   Purpose:
   Allows scheduler appointment dialogs that contain work order content to use
   more horizontal space than the default DevExpress modal width, while still
   keeping the dialog within the viewport.
   ========================================================================== */
dxbl-modal-dialog.dxbl-scheduler-color.appointment-with-workorder {
  width: 60vw;
  max-width: 80vw !important;
}

/* ==========================================================================
   Scheduler appointment tooltip header button styling
   --------------------------------------------------------------------------
   Purpose:
   Aligns the tooltip header buttons with the default of the fluent theme
   ========================================================================== */
.dxbl-sc-tooltip-header button {
  color: #000 !important;
}

/* ==========================================================================
   File dropzone container
   --------------------------------------------------------------------------
   Purpose:
   Styles the upload dropzone as a fixed-height dashed area with centered
   content, making it visually clear where files can be dropped or selected.
   ========================================================================== */
.file-dropzone {
  display: flex;
  height: 230px;
  margin-top: 20px !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-width: 3px !important;
  border-style: dashed !important;
}
.file-dropzone svg {
  width: 42px;
  height: 42px;
}

/* ==========================================================================
   Placeholder upload image wrapper
   --------------------------------------------------------------------------
   Purpose:
   Centers a placeholder image inside the upload area and keeps the image
   height constrained relative to the viewport width.
   ========================================================================== */
.placeholder-img-upload-wrapper {
  position: relative;
  display: flex;
  height: 15vw;
  align-items: center;
  justify-content: center;
}
.placeholder-img-upload-wrapper img {
  height: 100%;
}

/* ==========================================================================
   Upload button overlay
   --------------------------------------------------------------------------
   Purpose:
   Positions upload buttons above the placeholder image and centers them within
   the upload area. Adds spacing before primary DevExpress buttons.
   ========================================================================== */
.upload-button-wrapper {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-button-wrapper .dxbl-btn.dxbl-btn-primary {
  margin-left: 5px;
}

/* ==========================================================================
   Hidden upload panel
   --------------------------------------------------------------------------
   Purpose:
   Hides the DevExpress Upload panel for upload controls that opt in with the
   hide-upload class. This is useful when the upload control is used behind a
   custom dropzone or custom upload UI and the default cancel/progress panel
   should not be visible.
   ========================================================================== */
.hide-upload .dxbl-upload-container .dxbl-upload-panel {
  display: none !important;
}

/* ==========================================================================
   Primary flyout header
   --------------------------------------------------------------------------
   Purpose:
   Applies the Conventus primary color to flyout headers that opt in with the
   background-color-primary class.
   ========================================================================== */
.dxbl-flyout-header.background-color-primary {
  background-color: var(--cv-primary) !important;
}

/* ==========================================================================
   Custom flyout header
   --------------------------------------------------------------------------
   Purpose:
   Styles custom flyout headers with compact padding, white text, a title area
   and right-aligned action buttons.
   ========================================================================== */
.flyout-header {
  padding: 4.6875px 11.25px 4.6875px 5.25px;
  font-weight: 400;
  color: #fff;
  align-content: center;
}
.flyout-header .header-title {
  font-size: 18px;
}
.flyout-header .header-buttons {
  display: flex;
  float: right;
  align-items: center;
  font-size: 13px;
}
.flyout-header .header-buttons .header-close {
  cursor: pointer;
}

/* ==========================================================================
   Flyout button row
   --------------------------------------------------------------------------
   Purpose:
   Aligns flyout footer buttons to the right with consistent spacing and a top
   separator line.
   ========================================================================== */
.flyout-button-row {
  display: flex;
  width: 100%;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--cv-text-secondary);
}

/* ==========================================================================
   Dashboard card container
   --------------------------------------------------------------------------
   Purpose:
   Provides a clean white card surface for dashboard widgets, including rounded
   corners, subtle shadow and consistent inner spacing.
   ========================================================================== */
.dashboard-card {
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   KPI widget layout
   --------------------------------------------------------------------------
   Purpose:
   Arranges the KPI widget content vertically so the header and KPI cards stack
   cleanly.
   ========================================================================== */
.kpi-widget {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   KPI header
   --------------------------------------------------------------------------
   Purpose:
   Adds spacing between the KPI title/header area and the KPI card list below.
   ========================================================================== */
.kpi-header {
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   KPI title
   --------------------------------------------------------------------------
   Purpose:
   Styles the KPI section title with a slightly larger, semibold appearance
   while removing default heading margin.
   ========================================================================== */
.kpi-title {
  margin: 0;
  color: var(--bs-body-color);
  font-size: 1.1rem;
  font-weight: 600;
}

/* ==========================================================================
   KPI card collection
   --------------------------------------------------------------------------
   Purpose:
   Displays KPI cards in a responsive wrapping row with consistent spacing
   between cards.
   ========================================================================== */
.kpi-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-content: flex-start;
}

/* ==========================================================================
   KPI inner card
   --------------------------------------------------------------------------
   Purpose:
   Styles each individual KPI value card with flexible sizing, compact padding,
   a subtle background and a left status border.
   ========================================================================== */
.kpi-inner-card {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  justify-content: center;
  min-width: 140px;
  max-width: 260px;
  padding: 0.75rem 1rem;
  background: var(--bs-tertiary-bg);
  border-left: 4px solid;
  border-radius: 0.375rem;
}
.kpi-inner-card.kpi-inner-card-danger {
  border-left-color: var(--cv-kpi-danger-accent) !important;
}

/* ==========================================================================
   KPI amount
   --------------------------------------------------------------------------
   Purpose:
   Emphasizes the primary KPI value and provides positive/negative color
   variants for financial or performance indicators.
   ========================================================================== */
.kpi-amount {
  color: var(--bs-body-color);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.kpi-amount.kpi-positive {
  color: var(--cv-kpi-positive);
}
.kpi-amount.kpi-negative {
  color: var(--cv-kpi-negative);
}

/* ==========================================================================
   KPI label
   --------------------------------------------------------------------------
   Purpose:
   Styles the descriptive label below a KPI value with smaller, muted text.
   ========================================================================== */
.kpi-label {
  margin-top: 0.25rem;
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ==========================================================================
   Empty KPI state
   --------------------------------------------------------------------------
   Purpose:
   Displays a muted empty-state message when no KPI data is available.
   ========================================================================== */
.kpi-empty {
  color: var(--bs-secondary-color);
  font-size: 1.25rem;
}

.drawer-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #fff;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--cv-surface-subtle) 0%, #fff 100%);
  border-bottom: 1px solid var(--cv-border-panel);
  flex-shrink: 0;
  min-width: 0;
}

.drawer-header-icon {
  font-size: 1.4rem;
  color: var(--cv-primary-brand);
}

.drawer-header-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cv-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-header-title i {
  font-size: 0.65rem;
  color: var(--cv-text-muted);
  vertical-align: middle;
  margin: 0 2px;
}

.drawer-close-btn {
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
}

.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.drawer-body .table td:first-child {
  width: 40%;
}

.drawer-shadow .dxbl-drawer-panel {
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.12), -2px 0 6px rgba(0, 0, 0, 0.06);
  border-left: 1px solid var(--cv-border-panel);
}

.drawer-history {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cv-border-section);
}

.drawer-history-list {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.drawer-history-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--cv-border-faint);
}
.drawer-history-item:last-child {
  border-bottom: none;
}

.drawer-history-date {
  font-size: 0.75rem;
  color: var(--cv-text-muted);
  margin-bottom: 2px;
}

.drawer-history-event {
  font-size: 0.85rem;
  color: var(--cv-text-dark);
  line-height: 1.4;
}

.drop-down-button-container {
  position: relative;
  height: 2.65em;
  min-width: 75px;
}
.drop-down-button-container .dxbl-btn {
  height: 100% !important;
  padding: unset !important;
}
.drop-down-button-container .dxbl-btn .status-wrapper .status-text {
  padding-right: 0.25rem;
}
.drop-down-button-container .drop-down-button-items {
  z-index: 9999;
  position: absolute;
  width: fit-content;
  min-width: 100%;
  background-color: white;
  /* Reset default styling for a unordered list */
  list-style-type: none;
  padding: 0;
  margin: 2px 0 0;
  border: 1px solid var(--cv-border-input);
  border-radius: 0.125rem;
}
.drop-down-button-container .drop-down-button-items.align-right {
  right: 0;
}
.drop-down-button-container .drop-down-button-items[data-is-visible] {
  display: none;
}
.drop-down-button-container .drop-down-button-items[data-is-visible=true] {
  display: block;
}
.drop-down-button-container .drop-down-button-items .drop-down-button-item {
  cursor: pointer;
  white-space: nowrap;
  padding: 0.5rem 1.25rem;
  background-color: #ffffff;
}
.drop-down-button-container .drop-down-button-items .drop-down-button-item:hover {
  background-color: var(--cv-secondary);
}

.events-container {
  margin-top: 15px;
  overflow-y: auto;
  height: 450px;
  padding: 0 0 15px 15px;
}
.events-container h1 {
  font-size: 1em;
  font-weight: bold;
}
.events-container .navigation-event, .events-container .historic-event {
  margin-bottom: 12px;
}
.events-container .navigation-event label, .events-container .historic-event label {
  font-size: 0.875em;
  font-weight: 600;
  display: block;
}
.events-container .navigation-event span, .events-container .historic-event span {
  font-size: 0.875em;
}
.events-container .navigation-event .dxbl-btn {
  padding: 0;
  text-align: left;
}
.events-container .navigation-event .dxbl-btn span {
  font-size: 0.875rem;
  color: black;
}
.events-container .navigation-event .dxbl-btn > .dxbl-image {
  background: var(--cv-surface-icon-bg);
  border-radius: 20px;
  padding: 10px;
  height: 2.5em;
  width: 3em;
}

html, body, #app {
  height: 100%;
  width: 100%;
}

/* Prevent text selection during drag */
.no-select,
.no-select * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -moz-user-select: none !important;
}

@media (max-width: 576px) {
  html, body {
    font-size: 11px;
    --bs-body-font-size: 11px;
  }
}
@media (min-width: 576px) {
  html, body {
    font-size: 12px;
    --bs-body-font-size: 12px;
  }
}
@media (min-width: 768px) {
  html, body {
    font-size: 13px;
    --bs-body-font-size: 13px;
  }
}
/*# sourceMappingURL=app.css.map */