/*Once we can put CSS in a shared project, this will move to that shared project*/

@charset "UTF-8";

:root {
    --dm-light-silver: #F4F4F4;
    --dm-silver: #e9eaed;
    --dmBlue: rgba(0, 103, 172, 1);
    --dmBlue-light: rgba(0, 103, 172, 0.2);
    --dmBlue-lighter: rgba(0, 103, 172, 0.1);
    --dmOrange: #FAAF40;
    --dmDark-gray: #BBBEBF;
    --dmSuperDark-gray: #343434;
    --dmTan: #F6EADB;
    --dmTan-light: #f6eadb80;
    --dmText-gray: #4F4F50;
    --hover-blue: #0480e7;
    --primary: var(--dmBlue); /*Overide Radzen's default color to make these DM Blue*/
    --danger: var(--dmBlue);
    --dmInfo: #3ba5fc;
    --dmInfo-light: #53b0fc;
    --dmInfo-lighter: rgba(59, 165, 252, 0.2);
    --dmInfo-lighter-no-opacity: rgba(224,236,252, 1);
    --dmInfo-dark: #3698e8;
    --dmInfo-darker: #2c7cbd;
    --dmheader-background-color: rgb(62, 63, 63);
    /*Make the upload button menu look good*/
    --rz-upload-button-bar-background-color: var(--rz-secondary);
    --rz-upload-choose-background-color: var(--rz-primary-darker);
    --rz-upload-choose-color: var(--rz-secondary);
    --rz-upload-choose-hover-background-color: var(--rz-primary-darker);
    --rz-upload-choose-hover-color: var(--rz-secondary);
    /*Make the switch toggle look good*/
    --rz-switch-background-color: var(--dmBlue-light);
    --rz-switch-checked-background-color: var(--dmBlue);
    --rz-switch-circle-background-color: var(--white);
    --rz-switch-checked-circle-background-color: var(--white);
    /*Make the tooltips look good*/
    --rz-tooltip-color: var(--rz-text-color); /* text color */
    --rz-tooltip-background-color: var(--rz-base-200);
}

/*This override is to change the base background color to white instead of gray, per the Figma diagram
*/
body {
    background-color: var(--rz-base-background-color);
}

/*This override is to change the height and the color of the text*/
hr {
    height: 4px;
    color: var(--rz-text-color);
}

/*This is to give our buttons rounded edges*/
button {
    border-radius: 4px;
}

/*All these badge changes are to make the background color DM Blue*/
.badge-primary {
    color: #fff;
    background-color: var(--dmBlue);
}

a.badge-primary:hover, a.badge-primary:focus {
    color: #fff;
    background-color: var(--dmBlue);
}

a.badge-primary:focus, a.badge-primary.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--dmBlue);
}

.badge-secondary {
    color: #fff;
    background-color: var(--dmBlue);
}

a.badge-secondary:hover, a.badge-secondary:focus {
    color: #fff;
    background-color: var(--dmBlue);
}

a.badge-secondary:focus, a.badge-secondary.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--dmBlue);
}


/*I wish Radzen had made these be variables, so I could just override them to be DM Blue once at the beginning.  oh well*/

.bg-primary {
    background-color: var(--dmBlue) !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--dmBlue) !important;
}

.bg-secondary {
    background-color: var(--dmBlue) !important;
}

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
    background-color: var(--dmBlue) !important;
}

.bg-success {
    background-color: var(--dmBlue) !important;
}

a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
    background-color: var(--dmBlue) !important;
}

.bg-info {
    background-color: var(--dmBlue) !important;
}

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
    background-color: var(--dmBlue) !important;
}

.bg-warning {
    background-color: var(--dmBlue) !important;
}

a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
    background-color: var(--dmBlue) !important;
}

.bg-danger {
    background-color: var(--dmBlue) !important;
}

a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
    background-color: var(--dmBlue) !important;
}


/*Fix the border color being off-theme*/
.border-secondary {
    border-color: var(--secondary) !important;
}

/*Make the text colors correct, Hover Blue and DM Blue*/
.text-primary {
    color: var(--dmBlue) !important;
}

a.text-primary:hover, a.text-primary:focus {
    color: var(--hover-blue) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

a.text-secondary:hover, a.text-secondary:focus {
    color: var(--dmBlue) !important;
}


/*Why does Radzen have a secondary Root section?  Who knows, man
    Most all of these overrides are just to get themes to be DMBlue, DMBlue-Lighter, or white when appropriate

*/

:root {
    --rz-primary: var(--dmBlue);
    --rz-primary-light: var(--dmBlue);
    --rz-primary-lighter: var(--dmBlue-lighter);
    --rz-primary-dark: var(--dmBlue);
    --rz-primary-darker: var(--dmBlue);
    --rz-secondary: var(--white);
    --rz-secondary-light: var(--white);
    --rz-secondary-lighter: var(--white);
    --rz-secondary-dark: var(--white);
    --rz-secondary-darker: var(--white);
    --rz-info: var(--dmBlue);
    --rz-info-light: var(--dmBlue);
    --rz-info-lighter: var(--dmBlue);
    --rz-info-dark: var(--dmBlue);
    --rz-info-darker: var(--dmBlue);
    /*    --rz-success: var(--dmBlue);
    --rz-success-light: var(--dmBlue);
    --rz-success-lighter: var(--dmBlue);
    --rz-success-dark: var(--dmBlue);
    --rz-success-darker: var(--dmBlue);*/
    --rz-warning: var(--dmBlue);
    --rz-warning-light: var(--dmBlue);
    --rz-warning-lighter: var(--dmBlue);
    --rz-warning-dark: var(--dmBlue);
    --rz-warning-darker: var(--dmBlue);
    /*    --rz-danger: var(--dmBlue);
    --rz-danger-light: var(--dmBlue);
    --rz-danger-lighter: var(--dmBlue);
    --rz-danger-dark: var(--dmBlue);
    --rz-danger-darker: var(--dmBlue);*/
    --rz-on-primary-light: var(--dmBlue-lighter);
    --rz-on-primary-lighter: var(--rz-white);
    --rz-on-secondary-light: var(--dmBlue-lighter);
    --rz-on-secondary-lighter: var(--rz-white);
    --rz-on-info: var(--rz-white);
    --rz-on-info-light: var(--dmBlue-lighter);
    --rz-on-info-lighter: var(--rz-white);
    --rz-on-success-light: var(--dmBlue-lighter);
    --rz-on-success-lighter: var(--rz-white);
    --rz-on-warning-light: var(--dmBlue-lighter);
    --rz-on-warning-lighter: var(--rz-white);
    --rz-on-danger-light: var(--dmBlue-lighter);
    --rz-on-danger-lighter: var(--rz-white);
    --rz-link-color: var(--hover-blue);
}

/*And radzen has EVEN MORE root elements*/

:root {
    --rz-text-contrast-color: var(--hover-blue);
}

/*round the buttons and remove their borders*/
:root {
    --rz-border-none: var(--rz-border-width) solid var(--rz-base-300) border:0;
}

:root {
    --rz-border-radius: 4px;
}


/*Round the edges*/
.rz-fileupload-row .rz-paginator-element .rz-icon-trash, .rz-datatable .rzi-chevron-circle-right, .rz-datatable .rzi-chevron-circle-down, .rz-sortable-column .rzi-grid-sort, .rz-datatable-header .rzi-plus, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-column-drag {
    font-family: var(--rz-icon-font-family);
    font-weight: normal;
    font-style: normal;
    font-size: var(--rz-icon-size);
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    border-radius: var(--rz-border-radius);
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}



/*why would we make multiple elements for the buttons in distinct statements, when we could make WALL OF TEXT?
    I have pulled out like 3 things from the BUTTON WALL OF TEXT in the original and made tiny changes to them

*/

.rz-button.rz-primary.rz-shade-lighter, .rz-primary.rz-shade-lighter.rz-paginator-element {
    background-color: var(--rz-primary-lighter0); /*First small change to help buttons look good*/
    color: var(--rz-on-primary-lighter);
}


.rz-button.rz-variant-outlined.rz-primary, .rz-variant-outlined.rz-primary.rz-paginator-element {
    background-color: var(--rz-primary-lighter); /*Second small change to help buttons look good*/
}


    .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-variant-outlined.rz-primary.rz-paginator-element:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):focus:not(:active), .rz-variant-outlined.rz-primary.rz-paginator-element:not(.rz-state-disabled):focus:not(:active), .rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):active, .rz-variant-outlined.rz-primary.rz-paginator-element:not(.rz-state-disabled):active {
        background-color: var(--rz-primary-lighter);
        color: var(--hover-blue); /*Third small change to help buttons look good*/
        background-image: none;
    }


:root {
    --rz-header-background-color: var(--rz-base-background-color);
    --rz-header-min-height: 3.125rem;
    --rz-header-z: 3000; /* fun fact, this must be > 2000 or else the dropdowns will fly over the header*/
    --rz-header-border: var(--rz-border-base-200);
    --rz-header-color: var(--rz-text-color);
    --rz-header-shadow: none;
    --rz-grid-frozen-cell-background-color: var(--rz-base-background-color); /*executive decision by RLA, authorized by BK: the frozen background color's ugly, not using it*/
}


/*Root stuff to make grids look okay*/
:root {
    --rz-grid-right-cell-border: var(--rz-border-none); /*DM doesn't like lines in between our cells*/
    --rz-grid-hover-background-color: var(--dmTan-light);
    --rz-grid-hover-color: var(--rz-text-color);
    --rz-grid-selected-background-color: var(--dmTan);
    --rz-grid-selected-color: var(--rz-text-color); /*Needs to be darker to be readable, not the contrast color*/
    --rz-grid-header-background-color: var(--dmDark-gray);
    --rz-grid-apply-filter-button-color: var(--rz-secondary);
    --rz-grid-filter-background-color: var(--rz-base-background-color);
    --rz-grid-border-radius: 4px; /*Round! Those! Edges!*/
}


/*Because DM wants the paginator color highlights to be opposite how Radzen wants them*/

:root {
    --rz-paginator-numeric-button-background-color: var(--rz-base-background-color);
    --rz-paginator-numeric-button-border: 1px solid; /*not transparent*/
    --rz-paginator-numeric-button-selected-background-color: var(--rz-base-200); /*make this lighter*/
    --rz-paginator-numeric-button-selected-color: var(--rz-text-color); /*make this text readable*/
}


/*Make the tabs look presentable!*/

:root {
    --rz-tabs-tab-background-color: var(--rz-base-background-color);
    --rz-tabs-tab-color: var(--rz-text-title-color);
    --rz-tabs-tab-selected-top-border-color: var(--dmBlue); /*DM Blue*/
    --rz-tabs-tab-hover-color: var(--rz-primary); /*more DM Blue, effectively*/
}

/*SOMEBODY doesn't like there to be extra padding on the DM search box, making it look misaligned relative to the other boxes*/
:root {
    --rz-form-field-margin: 0 0 0;
}


.rz-cell-filter {
    border-bottom: var(--rz-grid-filter-border); /*Otherwise there's no border on the filter cells with custom dropdowns in them.
                                                The border's a little thin compared to the others, but at least it's something!*/
    min-height: 53px; /*Otherwise if you make a custom filter, it might have extra gray on the top and the bottom*/
}

/*This makes the horizontal scrollbar on the RadzenGrids visible */
body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb {
    background: rgba(141, 142, 144, 0.5);
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 8px;
}

/*Apparently RadzenHumanistic wants checkbox colors to be the opposite of what the default and our UI designer says*/

:root {
    --rz-checkbox-checked-background-color: var(--rz-text-contrast-color);
    --rz-checkbox-checked-hover-background-color: var(--rz-primary-light);
    --rz-checkbox-checked-disabled-background-color: var(--rz-primary);
    --rz-checkbox-checked-color: var(--rz-secondary);
}


/*These are formatting for the side dialog detail pages*/
.rz-dialog-side-position-right {
    width: 1000px;
    background-color: var(--rz-base-background-color) !important;
    border-radius: 0px !important;
}

.rz-dialog-side-titlebar, .rz-dialog-titlebar {
    background-color: var(--rz-base-background-color) !important;
    margin-top: 20px; /*so that the "x" button doesn't get hidden under the header*/
}

.rz-dialog-side-content {
    width: 100%;
    padding-right: 0;
    height: 100%;
}

@media screen and (max-width: 1000px) {
    .rz-dialog-side-position-right {
        width: 100%;
    }

    .rz-dialog-titlebar {
        margin-top: 4rem; /*so that you can see the titlebar below the header in mobile view*/
    }
}

/*This is for pop-ups that we don't want quite as wide as our standard ones*/
.narrowerPopup {
    width: 500px !important;
    overflow: hidden;
}

/*This makes the little loading dots look the same everywhere we use them*/
.loading {
    display: flex; /* Use flexbox to center the image vertically and horizontally */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    align-self: center;
    height: fit-content;
    width: fit-content;
}

.loadingContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.scale_image {
    object-fit: contain; /* Fill the container while maintaining aspect ratio */
    width: 30%;
}



/*This prevents scrolling on the background page when you have a dialog popped up*/
body:has(.rz-dialog-mask) {
    overflow: hidden !important;
}

/*Make the upload button menu look good*/
.rz-fileupload-buttonbar {
    position: relative;
    border-radius: var(--rz-input-border-radius);
    border: var(--rz-input-border)
}

/*Make the danger buttons red instead of pink*/
.rz-button.rz-danger.rz-shade-default {
    background-color: var(--red);
}

/*Puts normal dialogs (used for pop-ups) above side dialogs (used for slide-out pages)*/
.rz-dialog-wrapper {
    z-index: 1002;
}

/*Makes the InputSelect component look like the radzen dropdowns*/
.form-control {
    outline: none;
    border: var(--rz-input-border);
    border-radius: var(--rz-input-border-radius);
    box-shadow: var(--rz-input-shadow);
    background-color: var(--rz-input-background-color);
}

    .form-control:disabled {
        color: var(--rz-input-disabled-color);
        box-shadow: var(--rz-input-disabled-shadow);
        background-color: var(--rz-input-disabled-background-color);
        border: var(--rz-input-disabled-border);
        opacity: var(--rz-input-disabled-opacity);
    }

/*Consistent formatting for the download bottom that can be added to the bottom of a search grid*/
.downloadGridButton {
    width: 9em !important;
    float: right;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .downloadGridButton {
        width: 100% !important;
    }
}

/*This next section is all of the css we use on most search pages*/
.basicSearchPage {
    min-height: 65vh;
}

@media (max-width: 768px) {
    .basicSearchPage {
        padding-left: 10px;
        padding-top: 60px;
        padding-bottom: 5px;
    }
}

@media (min-width: 769px) {
    .basicSearchPage {
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 50px;
        padding-bottom: 35px;
    }
}

.basicSearchPage .title {
    margin-bottom: 2rem;
}

    .basicSearchPage .title .rz-stack {
        gap: 0.3rem;
    }

.breadcrumbLink {
    color: var(--dmBlue) !important;
    padding: 0px 5px;
}


    .breadcrumbLink:hover {
        text-decoration: underline !important;
        cursor: pointer !important;
    }

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local("Material Icons"), local("MaterialIcons-Regular"), url("../fonts/MaterialIcons-Regular.woff?V01") format("woff");
}

.rz-numeric-button .rzi-caret-down:before {
    background-color: var(--rz-numeric-button-background-color);
    color: var(--rz-numeric-button-color);

}

.rz-numeric-button .rzi-caret-up:before {
    background-color: var(--rz-numeric-button-background-color);
    color: var(--rz-numeric-button-color);
}

.rz-calendar-month-dropdown, .rz-calendar-year-dropdown {
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    min-width:80px;
}