html[data-bs-theme='dark'] .dxbl-text-edit > .dxbl-text-edit-input, .dxbl-text-edit > .dxbl-text-edit-template, .dxbl-text-edit > .dxbl-text-edit-template .dxbl-text-edit-input, .dxbl-text-edit > textarea {
    font-family: "Roboto Mono", monospace !important;
    background-color: rgb(70, 79, 91);
    color: white;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header .dxbl-modal-header-default, .dxbl-modal >
.dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header .dxbl-modal-header-default {
    background: #404954 !important;
    color: white;
    font-weight: bold !important;
}

html[data-bs-theme='dark'] .dxbl-btn-dropdown-popup .dxbl-btn-dropdown-list-item .dxbl-btn-dropdown-item > .dxbl-btn:first-child {
    color: white !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-fixed-cell {
    background-color: #39afd1 !important;
    color: white !important;
}

.gridEditor.gridEditor-dark.dxbl-pivot-table,
.gridEditor.gridEditor-dark .dxbl-pivot-table .dxbl-scroll-viewer-content > table {
    background-color: #404954 !important;
}

.gridEditor.gridEditor-light.dxbl-pivot-table,
.gridEditor.gridEditor-light .dxbl-pivot-table .dxbl-scroll-viewer-content > table {
    background-color: #ffffff !important;
}

/* 2. Style all header (th) and data (td) cells within the light grid */
.gridEditor.gridEditor-light .dxbl-pivot-table th,
.gridEditor.gridEditor-light .dxbl-pivot-table td {
    color: #343a40 !important; /* Dark text for readability on a light background */
    border-color: #dee2e6 !important; /* A light grey border to separate cells */
}

/* 3. Give headers a distinct, very light grey background */
.gridEditor.gridEditor-light .dxbl-pivot-table th {
    background-color: #f8f9fa !important;
}

/* 4. Ensure the data cells have a clean white background */
.gridEditor.gridEditor-light .dxbl-pivot-table td {
    background-color: #ffffff !important;
}

.grid-cell-dirty {
    background-color: rgba(255, 255, 0, 0.2) !important; /* A gentle yellow highlight */
}

.dxbl-window > .dxbl-window-dialog > .dxbl-window-header {
    background-color: #404954 !important;
}

.dxbl-pager {
    color: white !important;
    --dxbl-pager-btn-color: black !important;
    --dxbl-btn-bg: #404954 !important;
}

.dxbl-treeview.dxbl-text-edit input::placeholder {
    color: #A0AEC0;
    opacity: 0.7;    
}

.dxbl-treeview .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn.dxbl-btn-icon + input[type=search], .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn.dxbl-btn-icon + input[type=text], .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn.dxbl-btn-icon + input[type=search], .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn.dxbl-btn-icon + input[type=text], .dxbl-text-edit > .dxbl-btn.dxbl-btn-icon + input[type=search], .dxbl-text-edit > .dxbl-btn.dxbl-btn-icon + input[type=text] {
    padding: 12px;
}



/* Style the small 'x' clear button and search icon to be more visible */
.dxbl-treeview .dxbl-text-edit .dxbl-image {
    color: #A0AEC0 !important;
    margin: 5px;
}

.dxbl-grid-table > tbody > tr.internal-trade-row > td {
    background-color: #6c757d !important; /* Light blue background */
    color: white !important; /* Darker text for readability on the light background */
}

/* Optional: Maintain a distinct hover effect */
.dxbl-grid-table > tbody > tr.internal-trade-row:hover > td {
    background-color: #343a40 !important; /* A slightly darker blue on hover */
    color: white !important;
}

.dxbl-pivot-table-area-multiple-headers-inner-container {
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 5px;
    margin-bottom: 5px;
}

.dxbl-sm .dxbl-image {
    --dxbl-image-height: 0.8rem;
    --dxbl-image-width: 0.8rem;
    --dxbl-image-margin-x: 0;
    --dxbl-image-margin-y: 0.075rem;
}

.dxbl-pivot-table .dxbl-pivot-table-header-field {
    font-family: var(--dxbl-pivot-table-font-family);
    font-size: smaller;
    line-height: var(--dxbl-pivot-table-line-height);
    border-color: white;
    border-style: solid;
    border-width: 1px;
    font-weight: inherit;
    height: fit-content;
    width: 100%;
    padding: var(--dxbl-pivot-table-cell-padding-x) var(--dxbl-pivot-table-cell-padding-y);
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex !important;
    -webkit-align-items: inherit;
    align-items: inherit;
    justify-content: space-between !important
}

.dxbl-dropdown > .dxbl-dropdown-dialog.dxbl-edit-dropdown >  .dxbl-date-time-edit-calendar {
    /* REMOVE height: calc(1.5em + .75rem + 2px); */
    padding: 0.5rem; /* Example: Give some general padding to the container, or remove if not needed */
    font-size: 0.8rem; /* Consider setting a base font-size here if needed, or let children define */
    line-height: 1.4; /* More typical line-height for readability */
    color: #CDD4DA; /* Lighter text color for dark background */
    font-family: "Roboto Mono", monospace !important; /* Keep if desired for whole calendar */
    background-color: #404954;
    border: 1px solid #505A66; /* Slightly adjusted border for dark theme */
    border-radius: .25rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175); /* A subtle shadow often looks good */
}

.dxbl-btn dxbl-btn-secondary dxbl-sm dxbl-toolbar-layout-block-item dxbl-toolbar-btn dxbl-toolbar-item dxbl-btn-last dxbl-btn-first {
    background: #404954 !important;

}

.alert-info .alert-link {
    color: white !important;
    font-weight: 600; /* Make it a bit bolder */
}

.dxbl-calendar div.dxbl-calendar-footer .dxbl-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    color: white;
    background-color: #727cf5 !important;
    border: 1px solid #505A66;
    font-family: "Roboto Mono", monospace !important;
}

.dxbl-calendar-buttons-container .dxbl-btn:hover {
    background-color: #6973e3;
}

.dxbl-calendar .dxbl-calendar-content .dxbl-calendar-days-of-week > th {
    color: white;
    font-size: var(--ct-dropdown-font-size);
    font-family: "Roboto Mono", monospace !important;
}

.dxbl-calendar .dxbl-calendar-header .dxbl-btn {
    background-color: #404954;
    color: white;
    font-size: 0.8rem;
    font-family: "Roboto Mono", monospace !important;
}

.dxbl-calendar .dxbl-calendar-header .dxbl-btn {
    background-color: #404954;
    color: white;
    font-size: 0.8rem;
    font-family: "Roboto Mono", monospace !important;
}

.dxbl-calendar-buttons-container .dxbl-btn { /* Targeting the container for bottom buttons */
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    color: #CDD4DA;
    background-color: #727cf5 !important;
    border: 1px solid #505A66;
    font-family: "Roboto Mono", monospace !important;
}


.position-container {
    /* --- Main Container Styling --- */
    display: block;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 6px; /* Space between each position block */
    padding: 8px; /* Give content some breathing room */
    height: auto;
    white-space: normal;
    text-align: left;
    font-size: 0.8rem; /* A slightly smaller font can look cleaner */
}

.position-row {
    /* --- Row Styling (Flexbox) --- */
    display: flex;
    justify-content: space-between; /* Aligns key to left, value to right */
    padding: 2px 0; /* A little vertical space for each row */

}

.position-key {
    /* --- Key/Label Styling --- */
    font-weight: 600; /* Makes the label stand out */
    padding-right: 15px; /* Ensures space between key and value */
}

 .position-value {
    /* --- Value Styling --- */
    /* You could add specific colors or styles here if needed */
}


.badge-container .badge {
    /* 1. Allow the badge's text to wrap in the first place. This is critical. */
    white-space: normal !important;
    /* 2. Force the browser to break the long "word" (the position string) */
    overflow-wrap: break-word;
    word-wrap: break-word; /* Legacy fallback for older browsers */
    /* 3. Ensure the badge can expand vertically to fit the wrapped text */
    height: auto;
    /* 4. (Recommended) Align the text to the left for better readability on multiple lines */
    text-align: left;
    padding: 0.5rem;
    margin-bottom: 5px;
    display: block;
    width: 100%;
}

.dxbl-sc-apt-subject {
    white-space: normal !important;
    overflow: revert !important;
    font-weight: 300;
}


.dxbl-sc-tooltip-header {
    background-color: #727cf5;
    color: white;
} 


.appointment-text-header {
    background-color: #727cf5;
    color: white;
    font-weight: 600;
    font-family: "Roboto Mono", monospace !important;
}

/* Hides the time */
.dxbl-sc-apt-time {
    display: none !important;
}

.appointment-text-content {
    font-family: "Roboto Mono", monospace !important;
}

.dxbl-calendar-buttons-container .dxbl-btn:hover {
    background-color: #6973e3;
}

.dxbl-flyout > .dxbl-flyout-dialog > .dxbl-flyout-body {
    background-color: #404954;
    color: white;
    font-weight: 600;
    font-family: "Roboto Mono", monospace !important;
}


/* =================================================================== */
/*             FINAL THEME-AWARE DEVEXPRESS DATE CONTROL               */
/* =================================================================== */

/* --- LIGHT THEME DATE CONTROL (inside the light toolbar) --- */

/* This styles the main container for the date picker */
.dx-toolbar-light .dxbl-date-edit {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
}

/* This styles the text input part */
.dx-toolbar-light .dxbl-text-edit-input {
    background-color: transparent !important; /* Inherit from parent */
    color: #495057 !important; /* Dark text */
}

/* This styles the calendar icon button */
.dx-toolbar-light .dxbl-button {
    color: #6c757d !important; /* Standard icon color */
}


/* --- DARK THEME DATE CONTROL (inside the dark toolbar) --- */

/* This styles the main container for the date picker */
.dx-toolbar-dark .dxbl-date-edit {
    background-color: #404954 !important;
    border: 1px solid #555e68 !important;
}

/* This styles the text input part */
.dx-toolbar-dark .dxbl-text-edit-input {
    background-color: transparent !important; /* Inherit from parent */
    color: #ffffff !important; /* White text */
}

/* This styles the calendar icon button */
.dx-toolbar-dark .dxbl-button {
    color: #adb5bd !important; /* Lighter icon color */
}


/*
 * STEP 1: Define the insulated Grid container.
 * This establishes a strong boundary that will not leak or break other layouts.
 * It will take up the full width available and have a flexible height.
*/
.grid-layout-container {
    display: grid;
    /* You can use a fixed height or a viewport-relative height */
    /*height:80vh;  75% of the viewport height - adjust as needed */
}

/*
* STEP 2: The Fix. This combines all our successful tests.
* The wrapper is now a grid item.
*/
.grid-layout-container .pivot-scroll-wrapper {
    /*
    * This is the canonical fix for grid/flex items that need to shrink.
    * It allows the wrapper to become narrower than its content.
    */
    min-width: 0;
    /*
    * Now that the wrapper is constrained, this will create the scrollbar.
    */
    overflow-x: auto;
}


.curve-container {
    display: grid;
    width: 338px !important;
    /* You can use a fixed height or a viewport-relative height */
    /*height:80vh;  75% of the viewport height - adjust as needed */
}

/*
* STEP 3: The necessary DevExpress override.
* This lets the inner table expand and trigger our wrapper's scrollbar.
*/
.grid-layout-container .dxbl-scroll-viewer {
    overflow: visible !important;
}

/* REMOVES ADD NEW FIELDS*/
.grid-layout-container .dxbl-pivot-table-area-data {
    font-size: 0;
}


.logo-lg img {
    height: 60px !important;
    width: auto; /* This will make the width adjust based on the new viewBox and set height */
    display: inline-block; /* Or block, depending on layout needs */
}


.widget-title {
    color: white !important;
    font-weight: bold !important;
}

.widget-title-light {
    color: black !important;
    font-weight: bold !important;
}

.dxbl-list-box-render-container > .dxbl-scroll-viewer, .dxbl-list-box > .dxbl-scroll-viewer {
    background-color: #404954 !important;
    color: white !important;
}

.small-badge {
    line-height: 2 !important;
    font-size: 1em !important;
}

.dxc-val-elements text { 
    font-family: "Roboto Mono", monospace;
}




.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header .dxbl-modal-header-default, .dxbl-modal > 
    .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header .dxbl-modal-header-default {
    background: #6b5eae !important;
    color: white;
    font-weight: bold !important;
}



.dxbl-btn dxbl-btn-outline-secondary dxbl-sm dxbl-edit-btn-dropdown {
    background-color: #00CF97 !important;
}

.fee-detail-cell {
    display: block; /* Make span fill the cell */
    padding: inherit; /* Optional: inherit padding if needed */
    margin: -0.5rem -0.625rem; /* Adjust default negative margins if needed to fill cell */
    padding: 0.5rem 0.625rem; /* Restore padding */
    background-color: black !important;
    color: white;
    font-weight: bold !important; /* For "strong" white font */
}


.small-tree-height {
    max-height: 400px; /* Adjust the height as needed */
    overflow-y: auto;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-body {
    padding: var(--dxbl-popup-body-padding-y) var(--dxbl-popup-body-padding-x);
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    /* Ensures text wraps inside the modal */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.dxbl-grid-empty-cell {
    background-color: #404954;
}

.dxbl-btn dxbl-btn-outline-secondary dxbl-sm dxbl-pager-page-btn {
    background-color: #00CF97 !important;
}

.dxbl-pager {
    --dxbl-pager-page-btn-bg: #00CF97 !important;
}

.dxbl-pager-container > .dxbl-pager-page-size-selector > .dxbl-text-edit {
    background-color: #404954 !important;
    color: white !important;
}



.dxbl-grid-header-content {
    color: white;
    font-weight: bold;
}

.dxbl-modal-body {
    background-color: #404954;
    font-weight: bold;
    color: white;
}


.large-tree-height {
    max-height: 800px; /* Adjust the height as needed */
    overflow-y: auto;
}

.dxbl-grid .dxbl-grid-footer-row {
    background-color: #404954;
    font-weight: bold;
    color: white;
}

.dxbl-grid .dxbl-grid-table .dxbl-grid-selected-row:not(.dxbl-grid-focused-row):not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) >
td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    color: white !important;
}

.dxbl-toast-text {
    font-family: var(--ct-body-font-family);
}

.decimal-dropdown {
    color: white !important;
    background-color:black !important;
}

.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-list-item .dxbl-btn-dropdown-item {
    background-color: black;
}


.dxbl-grid-filter-menu-dropdown {
    background-color: red;
    color: var(--ct-dropdown-color);
    font-size: var(--ct-dropdown-font-size);
    border-color: var(--ct-dropdown-bg);
    z-index: 1600 !important; /* Set this higher than your modal's z-index */
}

.dxbl-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-header, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-header {
    padding:2px 2px 2px 2px;
    margin: 0;
    font-size: var(--ct-dropdown-font-size);
    color: white;
    background-color: #727cf5;
    border-color: var(--ct-dropdown-bg);
}

/* Bottom bit on grid*/
.gridEditor-dark .dxbl-pivot-table > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    background-color: #404954 !important;
}

.gridEditor-dark.dxbl-pivot-table > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table {
    border-color: #727cf5;
    background-color: #404954;
    color: white !important;
}

.gridEditor-dark.dxbl-pivot-table > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > tbody > tr > td.dxbl-pivot-table-row-field-item, .dxbl-pivot-table > .dxbl-scroll-viewer >
.dxbl-scroll-viewer-content > table > thead > tr > td.dxbl-pivot-table-row-field-item {
    border-color: #727cf5;
    background-color: #404954 !important;
    color: white !important;
}

.gridEditor-dark .dx-pivot-header {
    color: white;
    font-size: smaller;
    font-family: "Roboto Mono", monospace !important;
}

.gridEditor-light .dxbl-pivot-table > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table {
    background-color: #ffffff !important; /* Set the white background */
    color: black !important; /* Set dark text for readability */
}


.gridEditor-light .dxbl-pivot-table td {
    color: #343a40 !important; /* Dark text */
    background-color: #ffffff !important; /* Ensure data cell background is white */
    border-color: #dee2e6 !important; /* A light grey border */
}

/* This new rule styles ONLY the header cells (th) */
.gridEditor-light .dxbl-pivot-table th {
    color: #343a40 !important; /* Dark text */
    background-color: #f8f9fa !important; /* The new light grey background */
    border-color: #dee2e6 !important; /* A light grey border */
}




.gridEditor-light .dx-pivot-header {
    color: black;
    background-color: #f8f9fa !important;
    font-size: smaller;
    font-family: "Roboto Mono", monospace !important;
}




/* Required to get filter menu rendered in a modal */
.dxbl-popup-cell {
    z-index: 1060 !important;
}





.text-mono {
    font-family: "Roboto Mono", monospace;
    font-size: small;
}

.dxbl-chart-legend-text {
    font-family: "Roboto Mono", monospace;
    font-size: x-small;
}

.dxbl-chart-tooltip-content {
    font-family: "Roboto Mono", monospace !important;
    color: white;
    background-color: #404954;
    border-color: var(--ct-dropdown-bg);
    font-size: x-small;
}

.dxbl-chart-tooltip-content-container {
    background-color: #404954;
}

.dxbl-chart-tooltip > .dxbl-chart-tooltip-content-container {
    background-color: #404954;
}


.dxbl-grid-filter-menu-dropdown {
    z-index: 1600 !important; /* Set this higher than your modal's z-index */
    background-color: #727cf5;
}


.dxbl-dropdown-dialog {
    position: absolute !important;
    z-index: 1600 !important;
    background-color: var(--ct-dropdown-bg);
}


    

.dx-toolbar-dark {
    background-color: #404954;
    color: white !important;
}

.dx-toolbar-light {
    background-color: white !important;    
    color: black !important;
}

.dxbl-toolbar-title {
    color: white !important;
    background-color: #404954 !important; 
}

.dxbl-window > .dxbl-window-dialog > .dxbl-window-header {
    background-color: #727cf5;
    color: white !important;
}



/*Hides the expand button*/
.hideDetailButton .dxbl-grid-expand-button-cell .dxbl-grid-expand-button {
    visibility: hidden;
}

/*Hides the expand button*/
.showDetailButton .dxbl-grid-expand-button-cell .dxbl-grid-expand-button {
    visibility: visible;
}

.dxbl-window-title {
    background-color: #404954;
    color: white !important;
}

.dxbl-grid-column-chooser-dialog .dxbl-grid-column-chooser-item {
    background-color: #404954;
    border: none;
    color: white !important;
    padding: 0px 1px 0px 1px;
}

.dxbl-grid-column-chooser-dialog {
    background-color: #404954;
    height: 400px;

}


.grid-column-selector {
    font-family: var(--ct-body-font-family);
}

.dxbl-grid-header-row {
    background-color: #313a46;
}

.gridEditor-dark .dxbl-grid-table > thead > tr > th {
    background-color: #313a46; /* A very dark grey for the header */
    color: #ffffff;
    border-color: #555e68;
}

/* Dark Theme Body Cells */
.gridEditor-dark .dxbl-grid-table > tbody > tr > td {
    background-color: #404954; /* Your original dark row color */
    color: #ffffff;
    border-color: #555e68; /* A border visible in dark mode */
}

.dxbl-grid .dxbl-grid-table > * > tr > td.dxbl-grid-empty-cell {
    background-color: #404954 !important;
}

.gridEditor-dark.dxbl-grid-row-hover-enabled .dxbl-grid-table > tbody > tr:hover > td {
    background-color: #4a5461; /* A slightly lighter grey for hover */
}

.gridEditor-light .dxbl-grid-table > thead > tr > th {
    background-color: #f8f9fa; /* Standard light header color */
    color: #343a40; /* Dark text */
    border-color: #dee2e6;
}

/* Light Theme Body Cells */
.gridEditor-light .dxbl-grid-table > tbody > tr > td {
    background-color: #ffffff; /* White rows */
    color: #343a40; /* Dark text */
    border-color: #dee2e6; /* Standard light border color */
}

/* Light Theme Row Hover Effect */
.gridEditor-light.dxbl-grid-row-hover-enabled .dxbl-grid-table > tbody > tr:hover > td {
    background-color: #e9ecef; /* A light grey for hover */
}

.gridEditor-dark.dxbl-grid > .dxbl-grid-bottom-panel:last-of-type {
    background-color: black !important;
    color: white;
}

.gridEditor-dark.dxbl-light > .dxbl-grid-bottom-panel:last-of-type {
    background-color: #e9ecef !important;
    color: black;
}

.dxbl-checkbox {
    padding: var(--ct-dropdown-padding-y) var(--ct-dropdown-padding-x);
    margin: 0;
    font-size: var(--ct-dropdown-font-size);
    color: var(--ct-dropdown-color);
    text-align: right;
    background-color: var(--ct-dropdown-bg);
    --dxbl-checkbox-line-height: 1.0px;

}

.dxbl-chart-title {
    font-size: 0.8rem;
    color: var(--ct-chart-title-color);
}

.side-nav-link-title {
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--ct-menu-item-color);
    font-weight: 700;
    font-size: calc(var(--ct-menu-item-font-size) * 0.74) !important;
    padding: var(--ct-menu-item-padding-y) calc(var(--ct-menu-item-padding-x) * 2);
}

.grid-search-box input::placeholder {
    color: #999;
    font-style: italic;
    font-family: var(--ct-body-font-family);
}

.grid-search-box input {
    width: 200px; /* Adjust as needed */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--ct-body-font-family);
}

.dxc-val-title {
    color: var(--ct-chart-title-color);
    font-family: var(--ct-body-font-family);
}

.dxbl-list-box {
    height: auto;
    max-height: 200px;
}

.dxbl-checkbox input {
    position: relative
}

.dxbl-listbox {
    display: block;
    min-width: var(--ct-dropdown-min-width);
    padding: var(--ct-dropdown-padding-y) var(--ct-dropdown-padding-x);
    margin: 0;
    font-size: var(--ct-dropdown-font-size);
    color: var(--ct-dropdown-color);
    text-align: right;
    list-style: none;
    background-color: var(--ct-dropdown-bg);
    background-clip: padding-box;
    border: var(--ct-dropdown-border-width) solid var(--ct-dropdown-border-color);
    border-radius: var(--ct-dropdown-border-radius);
    border-color: var(--ct-dropdown-bg)
}

/* Override styles for the specific selector */
.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li:not([dxbl-bottom-virtual-spacer-element]):not([dxbl-top-virtual-spacer-element]),
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li:not([dxbl-bottom-virtual-spacer-element]):not([dxbl-top-virtual-spacer-element]) {
    border: 0;
    border-color: var(--ct-dropdown-bg);
    padding: 0;
}

/* Define a custom CSS class for the smaller button */
.grid-btn-link-small {
    padding: 0; /* Remove padding */
    font-size: 1rem; /* Reduce font size */
    line-height: 1.0; /* Adjust line height */
    width: auto; /* Adjust width */
    height: auto; /* Adjust height */
    display: inline-block; /* Ensure inline-block display */
    text-align: center; /* Center text */
}

/* Override styles for the specific selector */
.daterangepicker .calendar-table {
    background-color: var(--ct-light) !important;
    border-color: var(--ct-light) !important
}

.dxbl-grid {
    --dxbl-grid-hover-bg: var(--ct-light) !important; /* New background color */
}

daterangepicker {
    background-color: var(--ct-light) !important;
    border-color: var(--ct-light) !important
}

td.off, td.off.in-range, td.off.start-date, td.off.end-date {
    background-color: var(--ct-light) !important;
    border-color: var(--ct-light) !important
}

td.in-range {
    background-color: var(--ct-light) !important;
    border-color: var(--ct-light) !important
}

select.hourselect, select.minuteselect, select.secondselect, select.ampmselect {
    background-color: var(--ct-light) !important;
    border-color: var(--ct-light) !important
}

.d-flex.flex-column.align-items-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* =================================================================== */
/*             THEME-AWARE DEVEXPRESS TREEVIEW STYLES                  */
/* =================================================================== */

/* --- LIGHT THEME --- */

/* Main TreeView container */
.dxbl-treeview.theme-light {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
}

    /* Filter Panel */
    .dxbl-treeview.theme-light .dxbl-treeview-filter-panel {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

        /* Filter Input Box */
        .dxbl-treeview.theme-light .dxbl-treeview-filter-panel input.dx-texteditor-input {
            background-color: #ffffff;
            color: #343a40;
        }

    /* TreeView Node Text (inside your custom template) */
    .dxbl-treeview.theme-light .d-flex span {
        color: #343a40;
    }

    /* TreeView Node Hover Effect */
    .dxbl-treeview.theme-light .dxbl-treeview-node:hover {
        background-color: #e9ecef;
    }

/* --- DARK THEME --- */

/* Main TreeView container */
.dxbl-treeview.theme-dark {
    background-color: #404954;
    border: 1px solid #555e68;
}



/* Filter Panel */
.dxbl-treeview.theme-dark .dxbl-treeview-filter-panel {
    background-color: #313a46;
    border-bottom: 1px solid #555e68;
}

    /* Filter Input Box */
    .dxbl-treeview.theme-dark .dxbl-treeview-filter-panel input.dx-texteditor-input {
        background-color: #404954;
        color: #ffffff;
        border-color: #555e68;
    }

/* TreeView Node Text (inside your custom template) */
.dxbl-treeview.theme-dark .d-flex span {
    color: #ffffff;
}

/* TreeView Node Hover Effect */
.dxbl-treeview.theme-dark .dxbl-treeview-node:hover {
    background-color: #4a5461;
}

/* --- LIGHT THEME FILTER BOX --- */
.dxbl-treeview.theme-light .dxbl-text-edit {
    --dxbl-text-edit-bg: #ffffff; /* White background */
    --dxbl-text-edit-color: #343a40; /* Dark text */
    --dxbl-text-edit-border-color: #dee2e6; /* Light grey border */
    --dxbl-text-edit-hover-border-color: #727cf5; /* Primary accent on hover */
    --dxbl-text-edit-focus-shadow: 0 0 0 2px rgba(114, 124, 245, 0.25); /* Subtle glow on focus */
    --dxbl-text-edit-border-radius: 6px;
    --dxbl-text-edit-padding-x: 12px;
    width: 75%;
}

/* --- DARK THEME FILTER BOX --- */
.dxbl-treeview.theme-dark .dxbl-text-edit {
    --dxbl-text-edit-bg: #2D3748;
    --dxbl-text-edit-color: #E2E8F0;
    --dxbl-text-edit-border-color: #4A5568;
    --dxbl-text-edit-hover-border-color: #39afd1; /* Accent color on hover */
    --dxbl-text-edit-focus-shadow: 0 0 0 2px rgba(57, 175, 209, 0.25); /* Subtle glow on focus */
    --dxbl-text-edit-border-radius: 6px;
    --dxbl-text-edit-padding-x: 12px;
    width: 75%;
}

.dx-toolbar-light .my-specific-dxdate-styles.dx-date-edit {
    background-color: #ffffff; /* White background */
    border: 1px solid #ced4da; /* Standard light border */
}

/* Styles the actual text input field */
.dx-toolbar-light .my-specific-dxdate-styles .dx-texteditor-input {
    color: #495057; /* Dark text color */
}

/* Styles the calendar dropdown button */
.dx-toolbar-light .my-specific-dxdate-styles .dx-dropdown-button {
    color: #6c757d; /* Standard icon color */
}

/* --- DARK THEME DATE CONTROL --- */

/* Targets the main container of the date edit component */
.dx-toolbar-dark .my-specific-dxdate-styles.dx-date-edit {
    background-color: #404954; /* Dark background */
    border: 1px solid #555e68; /* Darker border */
}

/* Styles the actual text input field */
.dx-toolbar-dark .my-specific-dxdate-styles .dx-texteditor-input {
    color: #ffffff; /* Light text color */
}

/* Styles the calendar dropdown button */
.dx-toolbar-dark .my-specific-dxdate-styles .dx-dropdown-button {
    color: #adb5bd; /* Lighter icon color for dark mode */
}

/* Styles the component's outer border and background */
.dx-toolbar-light .dxbl-date-edit {
    background-color: #ffffff;
    border: 1px solid #ced4da;
}

/* Styles the actual text input field */
.dx-toolbar-light .dxbl-text-edit .dxbl-text-edit-input {
    color: #495057 !important; /* Dark text */
    background-color: transparent !important; /* Inherit from parent */
    font-family: "Roboto Mono", monospace !important;
}

/* Styles the calendar dropdown button */
.dx-toolbar-light .dxbl-date-edit .dxbl-dropdown-button {
    color: #6c757d;
}


/* --- DARK THEME DATE INPUT --- */

/* Styles the component's outer border and background */
.dx-toolbar-dark .dxbl-date-edit {
    background-color: #404954;
    border: 1px solid #555e68;
}

/* Styles the actual text input field */
.dx-toolbar-dark .dxbl-text-edit .dxbl-text-edit-input {
    color: white !important;
    background-color: transparent !important; /* Inherit from parent */
    font-family: "Roboto Mono", monospace !important;
}

/* Styles the calendar dropdown button */
.dx-toolbar-dark .dxbl-date-edit .dxbl-dropdown-button {
    color: #adb5bd;
}

.dxbl-sm .dxbl-image {
    --dxbl-image-height: 0.8rem;
    --dxbl-image-width: 0.8rem;
    --dxbl-image-margin-x: 0;
    --dxbl-image-margin-y: 0.075rem;
}





/* =================================================================== */
/*        FINAL THEME-AWARE DATE INPUT & ICON BUTTON STYLES            */
/* =================================================================== */

/* --- LIGHT THEME --- */

/* Date Input Field Container */
html[data-bs-theme='light'] .dxbl-date-edit {
    background-color: #ffffff;
    border: 1px solid #ced4da;
}
    /* Date Input Text */
    html[data-bs-theme='light'] .dxbl-date-edit .dxbl-text-edit-input {
        color: #495057 !important;
        background-color: transparent !important;
    }
    /* Calendar Icon Button Background */
    html[data-bs-theme='light'] .dxbl-date-edit .dxbl-dropdown-button {
        background-color: #f8f9fa !important; /* A very light grey */
        border-left: 1px solid #dee2e6; /* Separator line */
    }
    /* Calendar Icon Itself */
    html[data-bs-theme='light'] .dxbl-date-edit .dx-icon-calendar {
        color: #6c757d !important;
    }

/* --- DARK THEME --- */

/* Date Input Field Container */
html[data-bs-theme='dark'] .dxbl-date-edit {
    background-color: #404954;
    border: 1px solid #555e68;
}
/* Date Input Text */
html[data-bs-theme='dark'] .dxbl-date-edit .dxbl-text-edit-input {
    color: #ffffff !important;
    background-color: transparent !important;
}
/* Calendar Icon Button Background */
html[data-bs-theme='dark'] .dxbl-date-edit .dxbl-dropdown-button {
    background-color: #404954 !important; /* Match the input background */
    border-left: 1px solid #555e68;
}
/* Calendar Icon Itself */
html[data-bs-theme='dark'] .dxbl-date-edit .dx-icon-calendar {
    color: #adb5bd !important;
}

html[data-bs-theme='dark'] .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn,
html[data-bs-theme='dark'] .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn,
html[data-bs-theme='dark'] .dxbl-text-edit > .dxbl-btn {
    background-color: #404954 !important; /* The correct dark background */
    border-left: 1px solid #555e68 !important;
}
/* This makes the icon itself visible in DARK mode */
html[data-bs-theme='dark'] .dxbl-date-edit .dx-icon-calendar {
    color: #adb5bd !important;
}

/* = a================================================================= */
/*        FINAL FIX: OVERRIDE GENERAL .dxbl-image FILL COLOR           */
/* =================================================================== */

/*
  This rule is highly specific. It targets the SVG icon inside the
  dark-themed date control and sets its fill color to a readable grey,
  overriding the general yellow style.
*/
html[data-bs-theme='dark'] .dxbl-image:not(.dxbl-image-fill) {
    fill: #adb5bd !important; /* A readable light grey */
}

/*
  This optional rule does the same for the light theme, ensuring
  the icon is a standard dark grey instead of yellow.
*/
html[data-bs-theme='light'] .dxbl-image:not(.dxbl-image-fill) {
    fill: #6c757d !important; /* A standard dark grey for icons */
}

/* =================================================================== */
/*        FINAL UNIFIED THEME-AWARE DEVEXPRESS SCHEDULER STYLES        */
/* =================================================================== */

/* --- LIGHT THEME --- */

/* This is the MASTER rule for all scheduler table cells in LIGHT mode */
html[data-bs-theme='light'] .dxbl-sc-table > tbody > tr > td,
html[data-bs-theme='light'] .dxbl-sc-table > tbody > tr > th,
html[data-bs-theme='light'] .dxbl-sc-table > tfoot > tr > td,
html[data-bs-theme='light'] .dxbl-sc-table > tfoot > tr > th,
html[data-bs-theme='light'] .dxbl-sc-table > thead > tr > td,
html[data-bs-theme='light'] .dxbl-sc-table > thead > tr > th {
    color: #343a40 !important; /* Default dark text for all cells */
    border-color: #dee2e6 !important;
}

/* Specific background for HEADER cells in LIGHT mode */
html[data-bs-theme='light'] .dxbl-sc-table > thead > tr > th {
    background-color: #f8f9fa !important;
}

/* Specific background for BODY cells in LIGHT mode */
html[data-bs-theme='light'] .dxbl-sc-table > tbody > tr > td {
    background-color: #ffffff !important;
}


/* --- DARK THEME --- */

/* This is the MASTER rule for all scheduler table cells in DARK mode */
html[data-bs-theme='dark'] .dxbl-sc-table > tbody > tr > td,
html[data-bs-theme='dark'] .dxbl-sc-table > tbody > tr > th,
html[data-bs-theme='dark'] .dxbl-sc-table > tfoot > tr > td,
html[data-bs-theme='dark'] .dxbl-sc-table > tfoot > tr > th,
html[data-bs-theme='dark'] .dxbl-sc-table > thead > tr > td,
html[data-bs-theme='dark'] .dxbl-sc-table > thead > tr > th {
    color: #ffffff !important; /* Default white text for all cells */
    border-color: #555e68 !important;
}

/* Specific background for HEADER cells in DARK mode */
html[data-bs-theme='dark'] .dxbl-sc-table > thead > tr > th {
    background-color: #313a46 !important;
}

/* Specific background for BODY cells in DARK mode */
html[data-bs-theme='dark'] .dxbl-sc-table > tbody > tr > td {
    background-color: #404954 !important;
}

html[data-bs-theme='dark'] .dxbl-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body {
    padding: 2px 2px 2px 2px;
    font-size: var(--ct-dropdown-font-size);
    color: var(--ct-dropdown-color);
    background-color: #727cf5;
    border-color: var(--ct-dropdown-bg);
    z-index: 1600 !important; /* Set this higher than your modal's z-index */
}


/* =================================================================== */
/*        FINAL THEME-AWARE DEVEXPRESS SPLIT BUTTON STYLES             */
/* =================================================================== */

/* --- LIGHT THEME --- */

/* This styles the main button and its border in LIGHT mode */
html[data-bs-theme='light'] .dxbl-btn-outline-secondary {
    color: #6c757d !important; /* A standard dark grey for text */
    border-color: #6c757d !important;
}

/* This styles the dropdown arrow part of the button */
html[data-bs-theme='light'] .dxbl-btn-outline-secondary.dxbl-btn-split-dropdown {
    color: #6c757d !important;
}

/* This handles the hover effect for the button */
html[data-bs-theme='light'] .dxbl-btn-outline-secondary:hover {
    background-color: #6c757d !important;
    color: #ffffff !important;
}


/* --- DARK THEME --- */

/* This styles the main button and its border in DARK mode */
html[data-bs-theme='dark'] .dxbl-btn-outline-secondary {
    color: #adb5bd !important; /* A readable light grey for text */
    border-color: #adb5bd !important;
}

/* This styles the dropdown arrow part of the button */
html[data-bs-theme='dark'] .dxbl-btn-outline-secondary.dxbl-btn-split-dropdown {
    color: #adb5bd !important;
}

/* This handles the hover effect for the button */
html[data-bs-theme='dark'] .dxbl-btn-outline-secondary:hover {
    background-color: #adb5bd !important;
    color: #343a40 !important; /* Dark text on hover */
}

html[data-bs-theme='dark'] .dxbl-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body {
    padding: 2px 2px 2px 2px;
    font-size: var(--ct-dropdown-font-size);
    color: var(--ct-dropdown-color);
    background-color: #727cf5;
    border-color: var(--ct-dropdown-bg);
    z-index: 1600 !important; /* Set this higher than your modal's z-index */
}

html[data-bs-theme='light'] .dxbl-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body {
    padding: 2px 2px 2px 2px;
    font-size: var(--ct-dropdown-font-size);
    color: black !important;
    background-color: white;
    border-color: var(--ct-dropdown-bg);
    z-index: 1600 !important; /* Set this higher than your modal's z-index */
}

html[data-bs-theme='dark'] .dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content, .dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table, .dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > thead, .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content, .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table, .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > thead {
    background-color: black !important;
    color: white !important;
}

html[data-bs-theme='dark'] .dxbl-dropdown > .dxbl-dropdown-dialog, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog {
    background-color: black !important;
    color: white !important;
}

html[data-bs-theme='dark'] .dxbl-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-header, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-header {
    background-color: #404954;
    color: white !important;
    padding: 10px 10px 10px 10px;
    font-family: "Roboto Mono", monospace !important;
}

html[data-bs-theme='light'] .dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content, .dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table, .dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > thead, .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content, .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table, .dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > thead {
background-color: white !important;
color: #404954 !important;
}

html[data-bs-theme='light'] .dxbl-dropdown > .dxbl-dropdown-dialog, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog {
background-color: white !important;
color: #404954 !important;
}

    html[data-bs-theme='light'] .dxbl-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-header, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-header {
        background-color: white !important;
        color: #404954 !important;
        padding: 10px 10px 10px 10px;
        font-family: "Roboto Mono", monospace !important;
    }


/* =================================================================== */
/*        FINAL THEME-AWARE DEVEXPRESS DROPDOWN MENU STYLES            */
/* =================================================================== */

/* --- LIGHT THEME --- */
html[data-bs-theme='light'] .dxbl-btn-dropdown-popup {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
}

    html[data-bs-theme='light'] .dxbl-btn-dropdown-popup .dxbl-btn-dropdown-item {
        color: #343a40 !important; /* Dark text */
    }

        html[data-bs-theme='light'] .dxbl-btn-dropdown-popup .dxbl-btn-dropdown-item:hover {
            background-color: #f8f9fa !important; /* Light grey hover */
        }

/* --- DARK THEME --- */
html[data-bs-theme='dark'] .dxbl-btn-dropdown-popup {
    background-color: #313a46 !important; /* Dark background */
    border: 1px solid #555e68 !important;
}

html[data-bs-theme='dark'] .dxbl-btn-dropdown-popup .dxbl-btn-dropdown-item {
    color: #ffffff !important; /* White text */
}

    html[data-bs-theme='dark'] .dxbl-btn-dropdown-popup .dxbl-btn-dropdown-item:hover {
        background-color: #404954 !important; /* Lighter dark hover */
    }

/* =================================================================== */
/*           FINAL THEME-AWARE DEVEXPRESS GRID EDIT ROW STYLES         */
/* =================================================================== */

/* --- LIGHT THEME --- */
.gridEditor-light .dxbl-grid-edit-row .dxbl-text-edit-input {
    background-color: #ffffff !important;
    color: #343a40 !important; /* Dark text */
    border-color: #ced4da !important;
}

/* --- DARK THEME --- */
.gridEditor-dark .dxbl-grid-edit-row .dxbl-text-edit-input {
    background-color: #404954 !important;
    color: #ffffff !important; /* White text */
    border-color: #555e68 !important;
}


/* =================================================================== */
/*        FINAL THEME-AWARE BUTTON DROPDOWN (v2 w/ Corner Fix)         */
/* =================================================================== */

/* --- LIGHT THEME --- */

/* 1. Style the main popup container with border-radius and overflow */
html[data-bs-theme='light'] .dxbl-btn-dropdown-popup {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.25rem; /* Standard Bootstrap border radius */
    overflow: hidden; /* THIS FIXES the corner dots */
}
    /* 2. Style the BUTTONS inside the menu (using your discovery) */
    html[data-bs-theme='light'] .dxbl-btn-dropdown-popup .dxbl-btn {
        color: #343a40 !important; /* Standard dark text */
        background-color: #ffffff !important; /* CRITICAL: Set the white background here */
}
/* 3. Style the hover effect */
html[data-bs-theme='light'] .dxbl-btn-dropdown-popup .dxbl-btn:hover {
    background-color: #f8f9fa !important; /* A very light grey for hover */
}


/* --- DARK THEME --- */

/* 1. Style the main popup container with border-radius and overflow */
html[data-bs-theme='dark'] .dxbl-btn-dropdown-popup {
    border: 1px solid #555e68 !important;
    border-radius: 0.25rem;
    overflow: hidden;
}
/* 2. Style the BUTTONS inside the menu (using your discovery) */
html[data-b-theme='dark'] .dxbl-btn-dropdown-popup .dxbl-btn {
    color: #ffffff !important; /* White text */
    background-color: #313a46 !important; /* CRITICAL: Set the dark background here */
}
/* 3. Style the hover effect */
html[data-bs-theme='dark'] .dxbl-btn-dropdown-popup .dxbl-btn:hover {
    background-color: #404954 !important; /* Lighter grey for hover */
}

/* =================================================================== */
/*           FINAL THEME-AWARE DEVEXPRESS GRID EDIT ROW STYLES         */
/* =================================================================== */

/* --- LIGHT THEME --- */

/* This styles the background of the entire edit row */
html[data-bs-theme='light'] .dxbl-grid-table > tbody > tr.dxbl-grid-edit-row > td {
    background-color: #f0f3f8 !important; /* A light, distinct background for editing */
}

/* This styles all input fields (text, number, date) within the light edit row */
html[data-bs-theme='light'] .dxbl-grid-edit-row .dxbl-text-edit,
html[data-bs-theme='light'] .dxbl-grid-edit-row .dxbl-spin-edit,
html[data-bs-theme='light'] .dxbl-grid-edit-row .dxbl-date-edit {
    background-color: #ffffff !important;
    color: #343a40 !important;
    border: 1px solid #ced4da !important;
}

html[data-bs-theme='light'] .dxbl-grid-edit-row .dxbl-text-edit-input {
    color: #343a40 !important;
}


/* --- DARK THEME --- */

/* This styles the background of the entire edit row */
html[data-bs-theme='dark'] .dxbl-grid-table > tbody > tr.dxbl-grid-edit-row > td {
    background-color: #313a46 !important; /* A slightly different dark to distinguish editing */
}

/* This styles all input fields (text, number, date) within the dark edit row */
html[data-bs-theme='dark'] .dxbl-grid-edit-row .dxbl-text-edit,
html[data-bs-theme='dark'] .dxbl-grid-edit-row .dxbl-spin-edit,
html[data-bs-theme='dark'] .dxbl-grid-edit-row .dxbl-date-edit {
    background-color: #404954 !important;
    color: #ffffff !important;
    border: 1px solid #555e68 !important;
}

html[data-bs-theme='dark'] .dxbl-grid-edit-row .dxbl-text-edit-input {
    color: #ffffff !important;
}