.dxbl-treeview .dxbl-text-edit {
    /* --- Set the CSS variables for the component --- */
    --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%;
}

.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-edit-dropdown-body .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;
} 

.dxbl-sc-table {
    font-family: "Roboto Mono", monospace !important;
    background: black;
    color: white;
    font-weight: 800;
}

.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;
}


.dxbl-text-edit .dxbl-text-edit-input {
    color: white !important; /* white text for edit row */
    background-color: #404954;
    font-family: "Roboto Mono", monospace !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-edit-row {
    background-color: #404954 !important; /* dark background for edit row */
    color: white !important; /* white text for edit row */
}

/*
 * 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;
}

.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-grid > .dxbl-grid-bottom-panel:last-of-type {
    background-color: black !important;
    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: #6b5eae !important;
    color: white;
    font-weight: bold !important;
}

.dxbl-treeview .dxbl-treeview-container {
    background-color: #37404a !important; /* Curve view looked bad when black*/
    color: white;
}

.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-text-edit > .dxbl-btn-group-vertical > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear,.dxbl-btn.dxbl-btn-icon), .dxbl-text-edit >
.dxbl-btn-group > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear,.dxbl-btn.dxbl-btn-icon), .dxbl-text-edit > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear,.dxbl-btn.dxbl-btn-icon) {
    background-color: #404954 !important;
    color: white !important;
}

.dxbl-btn {
    color: white;
}

.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*/
.dxbl-pivot-table > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    background-color: #404954 !important;
}


.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 */
}

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

.dx-pivot-header {
    color: white;
    font-size: smaller;
    font-family: "Roboto Mono", monospace !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);
}

.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;
}

.dxbl-dropdown > .dxbl-dropdown-dialog, .dxbl-itemlist-dropdown > .dxbl-dropdown-dialog {
    background-color: black !important;
    color: white !important;
}

.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;
}
    

.dx-toolbar-dark {
    background-color: #404954;
    color: white !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;
}

.dxbl-pivot-table > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table {
    border-color: #727cf5;
    background-color: #404954;
    color: white !important;
}
.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;
}

/*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;
}

/*Commented out !important*/
.dxbl-grid .dxbl-grid-table > tbody > tr > td {
    background-color: #404954;
    color: #ffff;
}


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

.dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr > td {
    background-color: #313a46;
}

.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;
}