@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/*** COMMON CSS FROM HERE ***/

:root {
    --header-image-height: 40px;
    --header-image-padding-y: 0px; /* 0.3125rem; */ /* --bs-navbar-brand-padding-y */
    --header-image-padding-x: 0px;
    --header-image-margin-y: 0px;
    --header-image-margin-x: 0px;
    --header-content-height: calc(var(--header-image-height) + (var(--header-image-margin-y) * 2));
    --header-padding-y: 0.5rem; /* --bs-navbar-padding-y */
    --header-height: calc(var(--header-content-height) + (var(--header-padding-y) * 2));
    --header-margin-bottom: 0.75rem;
    --header-total-height: calc(var(--header-height) + calc(var(--header-margin-bottom) * 2));
    /* defaults the full page height to 100vh, but this will be overwritten using the setCssPageHeight JavaScript function to set the exact page height 
        (as the 100vh includes the height of the address bar which can then hide / scroll away on mobile devices to give more viewing space) */
    --full-page-height: 100vh;
    --page-height: calc(var(--full-page-height) - var(--header-total-height));

    /* Design tokens - "Elite Contract Costing - Web UI" (Claude Design, turn 3 on the agreed 2a design).
       Light chrome throughout; navy is an accent (3px caps on panels, the bar on an active row), TMS red is the
       brand mark and the Favourites accent, #1b6ec2 is the primary action colour already used by .btn-primary. */
    --cc-primary: #1b6ec2;
    --cc-primary-line: #1861ac;
    --cc-primary-dark: #12518f;
    --cc-link: #0366d6;
    --cc-link-strong: #0d5aa7;
    --cc-navy: #12324f;
    --cc-navy-dark: #0b2138;
    --cc-red: #d42c48;
    --cc-green: #146c43;
    --cc-amber: #664d03;
    --cc-danger: #b02a37;
    --cc-danger-line: #e6b3ba;
    --cc-folder: #a8792a;
    --cc-ink: #212529;
    --cc-ink-2: #343a40;
    --cc-ink-3: #495057;
    --cc-muted: #6c757d;
    --cc-faint: #adb5bd;
    --cc-surface: #fff;
    --cc-canvas: #f8f9fa;
    --cc-line: #dee2e6;
    --cc-line-soft: #e9ecef;
    --cc-line-faint: #f1f3f5;
    --cc-input-line: #ced4da;
    --cc-hover: #f4f6f8;
    --cc-active-bg: #eef4fa;
    --cc-selected-bg: #e7f1fb;
    --cc-selected-line: #a9c9e8;
    --cc-group-line: #cfe0f0;
    --cc-chip-bg: #f1f4f7;
    --cc-chip-line: #d6dde4;
    --cc-grid-head: #f1f3f5;
    --cc-grid-filter: #eef1f4;
}

/* The application bar (Shared/MainLayout.razor): 60px on desktop, 48px on tablets, 52px navy on phones. */
@media (min-width: 1200px) {
    :root {
        --header-height: 60px;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    :root {
        --header-height: 48px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --header-height: 52px;
    }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--cc-ink);
}

body {
    background: var(--cc-canvas);
}

.main {
    padding-top: calc(var(--header-height) + var(--header-margin-bottom));
}

/* A full-bleed page (PageInfo.IsFullBleed) sits flush against the application bar and fills the window exactly -
   so there is no margin under the header, and --page-height is recomputed without it here rather than on :root. */
.main.main-bleed {
    padding-top: var(--header-height);
}

    .main.main-bleed .page-height {
        --page-height: calc(var(--full-page-height) - var(--header-height));
    }

.page-height {
    height: var(--page-height);
}

/* If a header alert banner is visible as indicated by the presence of the header-alert-visible class on a parent), reduce the page-height to take the height of the banner into account */
.header-alert-visible .page-height {
    --bs-alert-margin-bottom: 16px;
    --header-alert-height: calc(65px + var(--bs-alert-margin-bottom));
    --header-height-with-alert: calc(var(--header-total-height) + var(--header-alert-height));
    --page-height: calc(var(--full-page-height) - var(--header-height-with-alert));
}

.replace-header-margin-with-padding {
    margin-top: calc(0px - var(--header-margin-bottom)) !important;
    padding-top: var(--header-margin-bottom) !important;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.container-breakout {
    position: absolute;
    left: 0;
    right: 0;
}

/* The x-axis padding on indent-xs gets set to 0.75rem (12px) when the screen size is EXTRA SMALL/XS, otherwise they are zero */
.indent-xs {
}

/* Adding the class "tight" causes x-axis margins/padding/borders etc. to be reduced to zero for EXTRA SMALL/XS screens so the content buts right up to the edge of the screen */
@media (max-width: 575.98px) {
    /* Remove the x-axis padding for any main or container blocks */
    .container.tight, .container-sm.tight, .container-md.tight, .container-lg.tight, .container-xl.tight, .container-xxl.tight, .container-fluid.tight {
        padding-right: 0;
        padding-left: 0;
    }

        /* Remove the x-axis borders and the radius of cards so they fill the whole width of the page */
        .container.tight div.card, .container-sm.tight div.card, .container-md.tight div.card, .container-lg.tight div.card, .container-xl.tight div.card, .container-xxl.tight div.card, .container-fluid.tight div.card {
            border-radius: 0px;
            border-left: 0px;
            border-right: 0px;
        }

        .container.tight .card-header, .container-sm.tight .card-header, .container-md.tight .card-header, .container-lg.tight .card-header, .container-xl.tight .card-header, .container-xxl.tight .card-header, .container-fluid.tight .card-header {
            border-radius: 0px;
        }

        /* Add x-axis padding to indent-xs so basic text components are not butted right up to the left and right edges of the screen */
        .container.tight .indent-xs, .container-sm.tight .indent-xs, .container-md.tight .indent-xs, .container-lg.tight .indent-xs, .container-xl.tight .indent-xs, .container-xxl.tight .indent-xs, .container-fluid.tight .indent-xs {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        /* Override the bootstrap x-axis gutter constant so row classes do not end up with negative margins.
       Not doing this causes content to overflow the width of the page and allows slight horizontal scrolling
       and breaks any position:fixed header navbar components (which end up scrolling off the page by the same amount as the overflow) */
        .container.tight .row, .container-sm.tight .row, .container-md.tight .row, .container-lg.tight .row, .container-xl.tight .row, .container-xxl.tight .row, .container-fluid.tight .row {
            --bs-gutter-x: 0;
        }
}

/* Remove unnecessary padding from Dev Express DxFormLayoutTabPage */
dxbl-form-layout.tight dxbl-form-layout-tab {
    --dxbl-fl-tab-group-content-padding-x: 0;
}

.card-header, .card-body, .card-footer {
    padding: 0.75rem;
}

@media (max-width: 768px) {
    .card-tight > .card-body {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Shims for the Bootstrap 4 to Bootstrap 5 upgrade which fix spacing*/
.form-group {
    margin-bottom: 0.75rem !important;
}

/* Used on all EliteLabel controls */
.control-label {
    font-weight: 500;
    font-size: 0.9em;
    margin-bottom: .2rem;
}
/* End of shims*/

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.top-title {
    font-size: 1.25rem;
}

    .top-title a {
        text-decoration: none;
        color: inherit;
    }

    .top-title .btn-close {
        margin: 0px;
    }

.top-title-image {
    height: var(--header-image-height);
    margin: var(--header-image-margin-y) var(--header-image-margin-x);
    padding: var(--header-image-padding-y) var(--header-image-padding-x);
}

@media (max-width: 640.98px) {
    .top-title a, .top-title .btn-link {
        margin-left: 0;
    }
}

@media (max-width: 576px) {
    .dxbs-modal > .dxbs-popup {
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

/* blazor.web.js shows this by setting style.display = "block" directly (not a class), so the layout below has
   to work as plain block/inline flow rather than flex - an inline style always wins the cascade over a stylesheet
   rule for the same property. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1100;
    width: 100%;
    padding: 0.7rem 2.5rem 0.7rem 1.25rem;
    background: var(--cc-navy, #12324f);
    color: #fff;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
}

    #blazor-error-ui .fa-triangle-exclamation {
        margin-right: 8px;
        /* Not --cc-amber (#664d03) - that token is tuned for warning text on a light background, which is
           unreadable against this banner's dark navy: ~1.6:1 contrast. This is a plain bright amber picked for
           contrast against var(--cc-navy) instead (~8:1). */
        color: #ffc107;
        font-size: 1.1rem;
    }

    #blazor-error-ui .reload {
        margin-left: 12px;
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
        white-space: nowrap;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.9rem;
        top: 0.6rem;
        color: #fff;
        opacity: 0.75;
    }

        #blazor-error-ui .dismiss:hover {
            opacity: 1;
        }

#overlay {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.1);
    z-index: 2;
    cursor: pointer;
}

.homepage-card {
    cursor: pointer;
    height: 100%;
}

@media (min-width: 576px) {
    .homepage-card .card-header {
        min-height: 65px;
    }
}

.homepage-card .card-title {
    line-height: 1.6rem;
}

.modal-tight {
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* Workaround for background being indented when container.tight is applied, taking the content into the right 12 pixels of the screen */
.dxbl-modal-open .container-breakout > .container-fluid.tight {
    padding-right: 12px;
}

/* Workaround for Bootstrap 5.3.x showing a white background round the placeholder text after a field on a form has been auto-completed */
.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}

/* Hide DxGrid column headers */
.grid-hide-column-headers {
}

    .grid-hide-column-headers .dxbl-grid-header-row {
        display: none;
    }

.search-item {
    width: 10rem;
}

.dxbl-menu-item .search {
    min-width: 123px
}

.dxbl-menu-item-tmpl > .search {
    position: relative;
}

/* GridToolbarWithSearch CSS for positioning and styling the search box & icon */
.search-button {
    opacity: 0.4;
}

.search {
    position: relative;
    min-width: 180px;
    max-width: 180px;
}

    .search .search-input {
        padding-left: calc(22px + 0.5rem);
    }

    .search .search-button {
        left: 0px;
        top: 0px;
        pointer-events: auto;
        z-index: 3;
        width: auto;
        display: flex;
        align-items: center;
        height: 100%;
        position: absolute;
    }

        .search .search-button .search-icon {
            width: 1rem;
            height: 1rem;
            opacity: 0.8;
        }

/* Plus/Minus buttons */
.btn-number {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.125rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* CSS to allow DxGrid to hide a number of columns positioned at the end of the grid */
.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(2),
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+3),
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+4),
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+5),
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+6),
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+7),
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+8),
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > colgroup > col:nth-last-child(n+2):nth-last-child(-n+9) {
    width: 0px !important;
}

.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(2),
.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(3) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(2),
.dxbl-grid.grid-hide-last-columns-1 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(2):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+3),
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(4) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+3),
.dxbl-grid.grid-hide-last-columns-2 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+3):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+4),
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(5) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+4),
.dxbl-grid.grid-hide-last-columns-3 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+4):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+5),
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(6) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+5),
.dxbl-grid.grid-hide-last-columns-4 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+5):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+6),
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(7) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+6),
.dxbl-grid.grid-hide-last-columns-5 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+6):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+7),
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(8) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+7),
.dxbl-grid.grid-hide-last-columns-6 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+7):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+8),
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(9) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+8),
.dxbl-grid.grid-hide-last-columns-7 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+8):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area),
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(n+2):nth-last-child(-n+9),
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr > th.dxbl-grid-header:nth-last-child(10) .dxbl-grid-column-resize-anchor,
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead > tr.dxbl-grid-filter-row td:nth-last-child(n+2):nth-last-child(-n+9),
.dxbl-grid.grid-hide-last-columns-8 > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr > td:nth-last-child(n+2):nth-last-child(-n+9):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area) {
    display: none !important;
}

/* CSS to use a DxFormLayoutItem as a column headings row */
.dxbl-fl-item .fl-item-heading {
    padding-top: 7px;
    margin-bottom: -7px;
}

/* CSS to reduce the padding round toolbars on extra small screens when contained within a DxGrid */
@media (max-width: 576px) {
    .dxbl-grid-toolbar-container {
        --dxbl-grid-toolbar-container-padding-y: 0rem;
        --dxbl-grid-toolbar-container-padding-x: 0.25rem;
    }
}

/* CSS to allow us to adjust DxGrid border visibility, i.e. when no borders are requied or when merging the top with a tab control */
.dxbl-grid.no-top-border {
    border-top-width: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.dxbl-fl-group.no-top-border > .dxbl-group {
    border-top-width: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.dxbl-fl-group.no-border {
    margin: 0px;
    padding: 0px;
}

    .dxbl-fl-group.no-border > .dxbl-group {
        border-width: 0px;
    }

/* Specify popup-no-padding on DxPopup's to remove body padding */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.popup-no-padding > .dxbl-modal-content > .dxbl-modal-body {
    padding: 0px !important;
}

/* UserInterfaceIntermediary's message box / Messages dialog chrome. DxPopup renders outside the component's CSS
   scope, so these have to be global. They follow the desktop's WPF dialogs: no shaded header/footer bars, square
   white buttons with a coloured border on the default one, and a centred title on the Messages window. */
.dxbl-popup.uii-popup > .dxbl-modal-content > .dxbl-modal-header,
.dxbl-popup.uii-popup > .dxbl-modal-content > .dxbl-modal-footer {
    background: #fff;
    border: none;
}

.dxbl-popup.uii-popup > .dxbl-modal-content > .dxbl-modal-footer {
    padding-top: 0.25rem;
}

.dxbl-popup.uii-messages-popup > .dxbl-modal-content > .dxbl-modal-header {
    justify-content: center;
    font-weight: 600;
}

.dxbl-popup.uii-messages-popup > .dxbl-modal-content > .dxbl-modal-header .dxbl-modal-title {
    flex: 1;
    text-align: center;
}

.dxbl-popup.uii-messages-popup > .dxbl-modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dxbl-popup.uii-messages-popup > .dxbl-modal-content > .dxbl-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.dxbl-popup.uii-popup .uii-dialog-button {
    min-width: 100px;
    border-radius: 0;
    background: #fdfdfd;
    color: #333;
    border-color: #ABABAB;
}

.dxbl-popup.uii-popup .uii-dialog-button:hover {
    background: #eaf2fb;
    border-color: #7EB4EA;
    color: #333;
}

.dxbl-popup.uii-popup .uii-dialog-button.uii-default-button {
    border-color: #2B79D8;
}

/* Secify pdf-viewer-no-border to remove the border and shading of DxPdfViewer */
.pdf-viewer-no-border {
    border: none !important;
    box-shadow: none !important;
}

/* CSS to display attachment thumbnails */
.attachment-image-thumbnail {
    cursor: pointer;
    max-width: 100%;
}

.attachment-image-fullsize {
    display: block;
    margin: auto;
}

.attachment-pdf-thumbnail {
    max-width: inherit;
    width: 100%;
    height: 400px;
}

.attachment-pdf-fullsize {
    max-width: inherit;
    width: 100%;
    height: 100%;
}

.attachment {
    max-width: inherit;
}

.attachment-fullsize {
    max-width: inherit;
    height: 100%;
}

.attachment-pdf-viewer {
    max-width: 100%;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: grey;
}

/* Make the upload button container relative so that the absolute position 
    of the upload label can be sized to full the entire are of the button */
button.attachment-upload {
    position: relative;
}

.attachment-upload input[type=file] {
    position: absolute;
    display: none;
}

.attachment-upload label {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/*** APPLICATION SPECIFIC CSS FROM HERE ***/
.goodsin-grid-small {
    font-size: 1em;
    padding-top: 5px;
    padding-left: 3px;
    padding-right: 3px;
}

/*Remove list-group-item border when it is used within a DevExpress list*/
table.dxbl-grid-table .list-group-item {
    border: none;
}

.docman-text {
    font-size: smaller;
}

/* ----- Tagging lists (Action = actTaggingList) -------------------------------------------------------------
   The tag box, rendered by both Shared/ChildListGrid.razor (a child list on a detail screen) and
   Pages/GenericList.razor (a main-menu tagging list). It lives here rather than in either component's
   .razor.css because Blazor scopes those to the one component that renders the markup, and both do.

   A button rather than an <input type="checkbox"> because the state is three-way - the business object is
   allowed to answer "indeterminate" - and a real checkbox's indeterminate state is a DOM property that cannot
   be set from Blazor markup. The icons match the desktop's own Tag All / Un-Tag All glyphs (check-square.svg /
   square.svg in ListViewViewModel.LoadCommands). */

.child-tag-button {
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.child-tag-button:disabled {
    cursor: default;
    opacity: .5;
}

.child-tag-button .child-tag-on {
    color: var(--bs-success, #198754);
}

.child-tag-button .child-tag-unknown {
    color: var(--bs-warning, #ffc107);
}

.child-tag-pending {
    opacity: .5;
    font-size: .75rem;
}

/* ===========================================================================================================
   Design system - "Elite Contract Costing - Web UI" (Claude Design turn 3). Shared pieces that more than one
   component renders, so they can't live in a single component's .razor.css (DevExpress renders the markup).
   =========================================================================================================== */

/* ----- .cc-grid: a dictionary-driven DxGrid (GenericList, BatchList, ChildListGrid) -------------------------- */

.cc-grid .dxbl-grid {
    border: 0;
    border-radius: 0;
    font-size: 14.5px;
    color: var(--cc-ink);
    background: var(--cc-surface);
}

/* Toolbar: title, then bordered buttons with icons; New (the only fa-plus item) is the filled primary button. */
.cc-grid .dxbl-grid-toolbar-container {
    min-height: 56px;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cc-line);
    background: var(--cc-surface);
}

    .cc-grid .dxbl-grid-toolbar-container > .dxbl-toolbar,
    .cc-grid .dxbl-grid-toolbar-container > .cc-list-toolbar {
        flex: 1;
        min-width: 0;
    }

/* ListViewToolbar: the commands (a DxToolbar that folds into its own "..." menu) and the search box beside them. The
   search box never shrinks below a usable width; when the row can't hold both it wraps onto its own line. */
.cc-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

    .cc-list-toolbar > .cc-list-toolbar-commands {
        flex: 1 1 300px;
        min-width: 0;
    }

    .cc-list-toolbar > .cc-list-toolbar-search {
        flex: 0 1 260px;
        min-width: 180px;
    }

@media (max-width: 767.98px) {
    .cc-list-toolbar > .cc-list-toolbar-search {
        flex: 1 1 100%;
    }
}

.cc-grid .dxbl-toolbar .dxbl-toolbar-title {
    margin-right: 16px;
    font-size: 20px;
    font-weight: 600;
    color: var(--cc-ink);
}

.cc-grid .dxbl-toolbar .dxbl-btn-toolbar,
.cc-grid .dxbl-toolbar .dxbl-btn-group {
    gap: 10px;
}

.cc-grid .dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 13px;
    border: 1px solid var(--cc-line) !important;
    border-radius: 6px !important;
    background: var(--cc-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--cc-ink-2);
    box-shadow: none;
}

    .cc-grid .dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn:hover:not(:disabled) {
        border-color: var(--cc-selected-line) !important;
        background: var(--cc-selected-bg);
        color: var(--cc-link-strong);
    }

    .cc-grid .dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn > .dxbl-image {
        font-size: 12.5px;
    }

    .cc-grid .dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn:has(> .fa-plus) {
        border-color: var(--cc-primary-line) !important;
        background: var(--cc-primary);
        font-weight: 600;
        color: #fff;
    }

        .cc-grid .dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn:has(> .fa-plus):hover:not(:disabled) {
            border-color: var(--cc-primary-line) !important;
            background: var(--cc-primary-line);
            color: #fff;
        }

/* Group panel - the design's grey strip under the toolbar. */
.cc-grid .dxbl-grid .dxbl-grid-top-panel > .dxbl-grid-group-panel-container {
    padding: 0;
}

.cc-grid .dxbl-grid .dxbl-grid-top-panel {
    min-height: 38px;
    padding: 4px 24px;
    display: flex;
    align-items: center;
    background: var(--cc-canvas);
    border-bottom: 1px solid var(--cc-line-soft);
    font-size: 13.5px;
    color: var(--cc-ink-3);
}

/* Column headings and the auto filter row. */
.cc-grid .dxbl-grid-table > thead > .dxbl-grid-header-row > th {
    height: 36px;
    padding-left: 14px;
    padding-right: 14px;
    background: var(--cc-grid-head);
    border-bottom: 1px solid var(--cc-input-line);
    font-size: 13px;
    font-weight: 700;
    color: var(--cc-ink);
}

.cc-grid .dxbl-grid-table > thead > .dxbl-grid-filter-row > td {
    height: 32px;
    padding: 0 6px;
    background: var(--cc-grid-filter);
    border-bottom: 1px solid var(--cc-input-line);
}

    /* As specific as DevExpress's own in-place editor rule (bootstrap-external.bs5), which strips these borders. */
    .cc-grid .dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-filter-row > td:not(.dxbl-grid-command-cell):not(.dxbl-grid-selection-cell) > .dxbl-text-edit {
        --dxbl-text-edit-border-radius: 3px;
        border: 1px solid #c4ccd4;
        border-radius: 3px;
        background: var(--cc-surface);
        font-size: 13px;
    }

/* Rows - 32px on a desktop, denser than the design's 42px (which read as sparse at full width); tablet and phone keep
   their taller, touch-friendly rows (media queries below). Hairline separators; the first (key) column is a
   medium-weight link. Only real data rows (data-visible-index): the virtual scroller's spacer rows must keep the
   heights it gives them. */
.cc-grid .dxbl-grid-table > tbody > tr[data-visible-index] > td {
    height: 32px;
    padding-left: 14px;
    padding-right: 14px;
    border-bottom: 1px solid var(--cc-line-faint);
    font-size: 14px;
    color: var(--cc-ink);
}

    .cc-grid .dxbl-grid-table > tbody > tr > td > a {
        font-weight: 500;
        color: var(--cc-link);
        text-decoration: none;
        font-variant-numeric: tabular-nums;
    }

        .cc-grid .dxbl-grid-table > tbody > tr > td > a:hover {
            text-decoration: underline;
        }

.cc-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td {
    background: var(--cc-selected-bg);
}

/* Compact variant - child lists docked on a detail screen (the design's Cost / Sales transaction panels). */
.cc-grid-compact .dxbl-grid-toolbar-container {
    min-height: 44px;
    padding: 4px 18px;
}

/* A fixed-width caption: the Related records tabs swap lists in place, and a caption sized to its own text made the
   New/Refresh/... buttons beside it jump sideways with every tab. Long captions end in an ellipsis (the tab above
   already shows the full name). */
.cc-grid-compact .dxbl-toolbar .dxbl-toolbar-title {
    flex: none;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15.5px;
}

@media (max-width: 767.98px) {
    .cc-grid-compact .dxbl-toolbar .dxbl-toolbar-title {
        width: 130px;
        min-width: 130px;
        max-width: 130px;
    }
}

.cc-grid-compact .dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn {
    height: 30px;
    padding: 0 9px;
    font-size: 13.5px;
}

.cc-grid-compact .dxbl-grid .dxbl-grid-top-panel {
    min-height: 34px;
    padding: 2px 18px;
    font-size: 12.5px;
}

.cc-grid-compact .dxbl-grid-table > thead > .dxbl-grid-header-row > th {
    height: 34px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12.5px;
}

.cc-grid-compact .dxbl-grid-table > thead > .dxbl-grid-filter-row > td {
    height: 32px;
    padding: 0 5px;
}

.cc-grid-compact .dxbl-grid-table > tbody > tr[data-visible-index] > td {
    height: 38px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13.5px;
}

/* The frozen key column's right edge - the design's heavier rule and soft shadow. */
.cc-grid .dxbl-grid-table > * > tr > .dxbl-grid-fixed-cell:not(.dxbl-grid-fixed-right-cell) {
    border-right: 1.5px solid var(--cc-faint);
    box-shadow: 2px 0 5px rgba(0, 0, 0, .06);
}

/* Tablet and phone: the denser toolbar and rows of the design's 3g / 3k. Columns keep the widths their View gives
   them (FrameworkViews), so a narrow screen scrolls sideways under the frozen key column rather than squeezing. */
@media (max-width: 1199.98px) {

    .cc-grid .dxbl-grid-toolbar-container {
        min-height: 46px;
        padding: 4px 12px;
    }

    .cc-grid .dxbl-toolbar .dxbl-toolbar-title {
        font-size: 16px;
        margin-right: 8px;
    }

    .cc-grid .dxbl-toolbar .dxbl-btn-toolbar,
    .cc-grid .dxbl-toolbar .dxbl-btn-group {
        gap: 7px;
    }

    .cc-grid .dxbl-toolbar .dxbl-btn.dxbl-toolbar-btn {
        height: 32px;
        padding: 0 9px;
        font-size: 13px;
    }

    .cc-grid .dxbl-grid .dxbl-grid-top-panel {
        min-height: 34px;
        padding: 2px 12px;
        font-size: 12px;
    }

    .cc-grid .dxbl-grid-table > thead > .dxbl-grid-header-row > th {
        height: 34px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 11.5px;
    }

    .cc-grid .dxbl-grid-table > thead > .dxbl-grid-filter-row > td {
        height: 30px;
        padding: 0 5px;
    }

    .cc-grid .dxbl-grid-table > tbody > tr[data-visible-index] > td {
        height: 38px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12.5px;
    }
}

@media (max-width: 767.98px) {
    .cc-grid .dxbl-grid .dxbl-grid-top-panel {
        display: none;
    }

    .cc-grid .dxbl-grid-table > tbody > tr[data-visible-index] > td {
        height: 46px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
    }
}

/* ----- Lookup grids (Elite.Controls.Razor's lookup popup, DxGrid with CssClass="LookupGrid") ----------------------
   Always a simple, dense grid: one line per row and heading, whatever the text - never the list styling above, and
   never DxGrid's default wrapping, which let rows grow to different heights. */
.dxbl-grid.LookupGrid .dxbl-grid-table > thead > tr > th,
.dxbl-grid.LookupGrid .dxbl-grid-table > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- .cc-tabs: DxTabs as the design's underlined tab strip ------------------------------------------------ */

.cc-tabs .dxbl-tabs-tablist {
    padding: 0 24px;
    border-bottom: 1px solid var(--cc-line);
    background: var(--cc-surface);
}

.cc-tabs .dxbl-tabs-item {
    height: 44px;
    padding: 0 16px;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 15px;
    font-weight: 400;
    color: var(--cc-ink-3);
}

    .cc-tabs .dxbl-tabs-item:hover {
        color: var(--cc-primary);
    }

    .cc-tabs .dxbl-tabs-item.dxbl-active {
        font-weight: 600;
        color: var(--cc-primary);
        box-shadow: inset 0 -2.5px 0 var(--cc-primary);
    }

@media (max-width: 1199.98px) {
    .cc-tabs .dxbl-tabs-tablist {
        padding: 0 14px;
    }

    .cc-tabs .dxbl-tabs-item {
        height: 38px;
        padding: 0 12px;
        font-size: 13.5px;
    }
}

@media (max-width: 767.98px) {
    .cc-tabs .dxbl-tabs-tablist {
        padding: 0 12px;
    }

    .cc-tabs .dxbl-tabs-item {
        height: 44px;
        font-size: 14px;
    }
}

/* ----- .cc-btn: the detail screen's toolbar buttons ----------------------------------------------------------- */

.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--cc-line);
    border-radius: 6px;
    background: var(--cc-surface);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--cc-ink-2);
    white-space: nowrap;
    cursor: pointer;
}

    .cc-btn i {
        font-size: 12.5px;
    }

    .cc-btn:hover:not(:disabled) {
        border-color: var(--cc-selected-line);
        background: var(--cc-selected-bg);
        color: var(--cc-link-strong);
    }

    .cc-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(27, 110, 194, .25);
    }

    .cc-btn:disabled {
        border-color: var(--cc-line-soft);
        background: var(--cc-canvas);
        color: var(--cc-muted);
        opacity: .7;
        cursor: default;
    }

.cc-btn-primary {
    border-color: var(--cc-primary-line);
    background: var(--cc-primary);
    font-weight: 600;
    color: #fff;
}

    .cc-btn-primary:hover:not(:disabled) {
        border-color: var(--cc-primary-line);
        background: var(--cc-primary-line);
        color: #fff;
    }

    .cc-btn-primary:disabled {
        border-color: var(--cc-primary-line);
        background: var(--cc-primary);
        color: #fff;
        opacity: .45;
    }

.cc-btn-danger {
    border-color: var(--cc-danger-line);
    color: var(--cc-danger);
}

    .cc-btn-danger:hover:not(:disabled) {
        border-color: var(--cc-danger);
        background: #fbeaec;
        color: var(--cc-danger);
    }

.cc-btn.dropdown-toggle::after {
    display: none;
}

.cc-btn-caret {
    font-size: 8px !important;
    color: var(--cc-muted);
}

/* The segmented First / Previous / Next / Last cluster. */
.cc-btn-cluster {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--cc-line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--cc-surface);
}

    .cc-btn-cluster > button {
        width: 36px;
        height: 34px;
        border: 0;
        border-left: 1px solid var(--cc-line-soft);
        background: none;
        font-size: 13px;
        color: var(--cc-ink-3);
    }

        .cc-btn-cluster > button:first-child {
            border-left: 0;
        }

        .cc-btn-cluster > button:hover:not(:disabled) {
            background: var(--cc-selected-bg);
            color: var(--cc-link-strong);
        }

        .cc-btn-cluster > button:disabled {
            color: var(--cc-faint);
        }