@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
    --stream-white: #ffffff;
    --stream-grey-10: #f0f0f0;
    --stream-grey-20: #cccccc;
    --stream-grey-40: #777777;
    --stream-grey-60: #000000;
    --stream-grey-80: #404040;
    --stream-blue-10: #b0c4e5;
    --stream-blue-15: #5672c7;
    --stream-blue-20: #0071c1;
    --stream-blue-40: #324a92; /* BAH Light Blue */
    --stream-blue-60: #174979;
    --stream-blue-80: #1f2455; /* BAH Dark Blue */
    --stream-blue-mid-50: #324a92;
    --stream-blue-mid-70: #1f2455;
    --stream-green-10: #9febb7;
    --stream-green-20: #00cb5b;
    --stream-green-40: #26b050;
    --stream-green-60: #377d4a;
    --stream-green-80: #305030;
    --stream-yellow-10: #efd979;
    --stream-yellow-20: #d1bc61;
    --stream-yellow-40: #000000;
    --stream-yellow-60: #eb8b0a;
    --stream-yellow-80: #ffc800;
    --stream-red-20: #000000;
    --stream-red-40: #dc3545;
    --stream-red-60: #ef0000;
    --stream-red-80: #503030;
    --stream-required: #a80000;
    --stream-required-10: #ffe4da;
    --stream-required-40: #db184f;
    --stream-pill-toggle-inactive: #767676;
    --stream-pill-toggle-active: #0677d8;
    --designer-hover-spacing-vertical: 0rem;
    --designer-hover-spacing-horizontal: 0.1rem;
    --scrollbarBG: #0000001A;
    --thumbBG: #00000030;
    --btn-primary-blue-40: #00838F;
    --btn-primary-blue-60: #006972;
    --box-shadow: #1a2e4d;
    --transparent-white-10: rgba(255, 255, 255, 0.10);
    --transparent-white-25: rgba(255, 255, 255, 0.25);
    --transparent-white-50: rgba(255, 255, 255, 0.5);
    --transparent-white-90: rgba(255, 255, 255, 0.9);
    --transparent-black-05: rgba(0, 0, 0, 0.05);
    --transparent-black-10: rgba(0, 0, 0, 0.10);
    --transparent-black-25: rgba(0, 0, 0, 0.25);
    --transparent-black-50: rgba(0, 0, 0, 0.5);
    --transparent-black-90: rgba(0, 0, 0, 0.9);
    --stream-component-accent: var(--stream-primary-main);
    --stream-component-accent-hover: var(--stream-primary-dark);
    --stream-component-accent-soft: var(--stream-primary-light);
    --stream-component-active-surface: var(--stream-primary-light);
    --stream-component-active-text: white;
    --stream-component-selected-surface: var(--stream-primary-light);
    --stream-component-selected-border: var(--stream-primary-main);
    --stream-component-selected-text: var(--stream-tertiary-light);
    --stream-component-supporting-text: var(--stream-secondary-dark);
    --stream-component-surface-accent: var(--stream-tertiary-light);
    --stream-component-border: var(--stream-tertiary-main);
    --stream-component-muted-surface: var(--stream-grey-10);
    --opacity-05: 0.05;
    --opacity-10: 0.10;
    --opacity-25: 0.25;
    --opacity-50: 0.50;
    --opacity-90: 0.90;
    --opacity-100: 1.00;
    --highlight-blue-01: 70, 200, 250;
    --dark-blue-01: 31, 36, 85;
}

html, body {
    font-family: 'Inter', sans-serif !important;
    overflow: hidden;
    min-height: 100%;
}

.bold-800 {
    font-weight: 800 !important;
}

h1:focus {
    outline: none;
}


.required-asterisk {
    color: var(--stream-required);
    margin-left: 5px;
}

a, .btn-link {
    color: var(--stream-primary-dark);
    cursor: pointer;
}

    a:hover, .btn-link:hover {
        color: var(--stream-primary-light) !important;
        text-decoration: underline;
    }

TranslatorBox {
    border: 3px solid var(--stream-blue-40);
    padding: 20px;
    box-shadow: 3px 3px 5px var(--box-shadow);
    margin: 20px;
}

.translatorComboBox .k-input-inner {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.fixed-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 16.666667%;
    z-index: 1000;
    background-color: white;
    height: 100vh;
    padding-top: 20px;
    overflow-y: auto;
}

.offset-2 {
    margin-left: 16.666667%;
}

.card-shadow {
    box-shadow: 3px 3px 5px var(--box-shadow);
    -moz-box-shadow: 3px 3px 5px var(--box-shadow);
}

.small-caps {
    font-variant: small-caps;
}

.font-08 {
    font-size: 0.8em;
}

.font-xs {
    font-size: 0.75rem;
}

.btn-group-xs > .btn {
    font-size: 0.75rem;
}

.btn-group-xs > .stream-tooltip-target > .btn {
    font-size: 0.75rem;
}

.btn-group-xs i {
    width: 20px;
}

.content {
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--stream-green-20);
}

.invalid {
    outline: 1px solid var(--stream-red-60);
}

/*Validation*/
.k-picker:focus,
.k-picker:focus-within,
.k-picker.k-valid:focus,
.k-picker.k-valid:focus-within,
.k-picker-solid.k-valid:focus,
.k-picker-solid.k-valid:focus-within,
.k-textbox:focus,
.k-textbox:focus-within,
.k-textbox.k-valid:focus,
.k-textbox.k-valid:focus-within,
.k-textbox-solid.k-valid:focus,
.k-textbox-solid.k-valid:focus-within,
.k-textarea:focus,
.k-textarea:focus-within,
.k-textarea.k-valid:focus,
.k-textarea.k-valid:focus-within,
.k-textarea.k-input-solid.k-valid:focus,
.k-textarea.k-input-solid.k-valid:focus-within,
.k-datepicker:focus,
.k-datepicker:focus-within,
.k-datepicker.k-valid:focus,
.k-datepicker.k-valid:focus-within {
    box-shadow: 0 0 0 0.25rem var(--stream-blue-10);
}

.k-picker-solid.k-valid,
.k-textbox.k-valid,
.k-textarea.k-valid {
    outline: none;
    border-color: var(--stream-grey-40);
}

.k-picker:has(+.validation-message),
.k-picker:has(+.text-danger),
.k-textbox:has(+.validation-message),
.k-textbox:has(+.text-danger),
.k-textarea:has(+.validation-message),
.k-textarea:has(+.text-danger) {
    outline: 1px solid var(--stream-red-60);
    border-color: var(--transparent-white-90);
}

.k-picker-solid {
    background-color: #fff;
}

.validation-message {
    color: var(--stream-red-60);
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px var(--box-shadow);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.bg-section-header {
    margin-bottom: 1rem !important;
}

form .row {
    align-items: start !important;
}

row-top {
    align-items: flex-start !important;
}

.k-form .k-form-legend {
    display: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 34px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--stream-pill-toggle-inactive);
    -webkit-transition: .2s;
    transition: .2s;
    border-radius: 34px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .2s;
        transition: .2s;
        border-radius: 50%;
    }

    .slider:after {
        content: 'No';
        color: white;
        display: block;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        font-size: 14px;
        font-variant: small-caps;
        text-align: center;
    }

input:checked + .slider {
    background-color: var(--stream-pill-toggle-active);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--box-shadow);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(65px);
}


input:checked + .slider:after {
    content: 'Yes';
}

/*--------- TOOLTIP --------*/
.editor .k-tooltip {
    font-size: 1em;
    background: var(--stream-red-60);
}

    .editor .k-tooltip .k-callout {
        color: var(--stream-red-60);
    }

.info-text .k-tooltip {
    font-size: 1.3em;
    background: var(--stream-secondary-main);
    color: white;
    border-color: var(--stream-secondary-dark);
    padding: 0.7rem;
    max-width: 80vw;
    box-shadow: 0 0 1px var(--box-shadow);
}

    .info-text .k-tooltip .k-callout {
        color: var(--stream-blue-60);
    }

.custom-tooltip .k-tooltip .editor {
}

.stream-tooltip-target {
    display: inline-flex;
}

.btn-group-vertical > .stream-tooltip-target {
    width: 100%;
}

.stream-tooltip-target > .btn {
    width: 100%;
}

.stream-tooltip .k-tooltip {
    background: var(--stream-secondary-main);
    border-color: var(--stream-secondary-dark);
    border-radius: 4px;
    color: var(--stream-white, #fff);
    font-size: .95rem;
    line-height: 1.35;
    max-width: 18rem;
    padding: .5rem .65rem;
}

.stream-tooltip .k-tooltip .k-callout {
    color: var(--stream-secondary-main);
}
/*--------- Client Tracker --------*/
.row-ClientTrackerSelector {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

/*--------- RADIO GROUP --------*/
.radiogroup-inline {
    display: inline-flex;
    vertical-align: middle;
    flex-direction: row-reverse;
    font-size: 14px;
    font-variant: small-caps;
}

    .radiogroup-inline .k-radio-item {
        margin: 0;
        padding: 0;
        position: relative;
        margin-left: 2px;
    }

    .radiogroup-inline .k-radio {
        opacity: 0;
        position: absolute;
    }

        .radiogroup-inline .k-radio:checked::before {
            display: none;
        }

    .radiogroup-inline .k-radio-wrap:has(.k-radio:checked) + .k-radio-label {
        /* Your desired selected styles */
        background-color: var(--stream-primary-main);
        color: white;
    }


    .radiogroup-inline .k-radio-label {
        display: inline-block;
        margin: 0;
        padding: 0 12px;
        min-width: 60px;
        height: 34px;
        border-radius: 34px;
        border: 2px solid var(--stream-pill-toggle-inactive);
        color: var(--stream-pill-toggle-inactive);
        background-color: white;
        position: relative;
        align-items: center !important;
        display: inline-flex !important;
        justify-content: center !important;
    }

.subtext {
    font-size: 0.8em;
    font-style: italic;
}

#formMain {
    padding-bottom: 10rem !important;
    height: calc(100vh - 168px);
    height: calc(100vh - 166px);
    height: calc(100vh - 202px);
}

#navbarForms {
    height: calc(100vh - 88px);
}

.nav.nav-pills {
    overflow-y: auto;
    flex-wrap: nowrap;
}

.nav-height {
    min-height: calc( 70px + 1rem );
    height: calc( 70px + 1rem );
    max-height: calc( 70px + 1rem );
}

.navbar {
    background-color: var(--stream-primary-main);
    border: 2px solid vaR(--stream-primary-dark);
}

.nav-height img {
    height: 70px;
}

.top-row.px-4, .bg-section-header {
    background-color: @ColorService.Primary;
}

.nav-item button {
    background-color: @ColorService.Primary;
}

/* Top Right Header For Designer Mode*/
.designerinfo {
    background: var(--stream-primary-dark);
    border: 1px solid var(--stream-primary-light);
    box-shadow: 0px 4px 8px var(--box-shadow);
    border-radius: 4px;
    font-size: 14px;
    color: var(--stream-grey-80);
    padding: 10px;
}

/* Navigation pills */
.nav-item {
    --bs-nav-pills-border-radius: 0;
    --bs-nav-pills-link-active-color: black;
    --bs-nav-pills-link-active-bg: var(--stream-yellow-20);
    --bs-nav-pills-link-active-bg-hover: var(--stream-yellow-10);
}

    .nav-item button {
        border-bottom: 1px solid var(--stream-grey-80) !important;
        border-top: 1pt solid var(--stream-grey-20);
        background-color: var(--stream-secondary-dark);
        color: var(--stream-grey-10);
    }

        .nav-item button:hover {
            background-color: var(--stream-blue-10);
            color: var(--stream-grey-80);
        }

        .nav-item button.active {
        }

            .nav-item button.active:hover {
                background-color: var(--bs-nav-pills-link-active-bg-hover) !important;
            }

            .nav-item button.active:after {
                content: "\f0da";
                font: var(--fa-font-sharp-solid);
            }

.nav-section:before {
    font: var(--fa-font-sharp-regular);
    color: white;
    padding-right: 0.5em;
    display: inline-block;
    width: 30px;
}

.nav-section.is-completed:before {
    content: "\f058";
    color: var(--stream-green-40);
    text-shadow: var(--stream-green-80) -0.5px -0.5px 0;
}

.nav-section.is-not-completed:before {
    content: "\f057";
    color: var(--stream-red-60);
    text-shadow: var(--stream-red-80) -0.5px -0.5px 0;
}

.nav-section.is-visited:before {
    content: "\f111";
    color: white;
    text-shadow: var(--stream-grey-80) -0.5px -0.5px 0;
}

.nav-section.is-undetermined:before {
    content: "\e10a";
    color: grey;
    text-shadow: var(--stream-grey-80) -0.5px -0.5px 0;
}

.nav-section.is-editing:before {
    content: "\e20e";
    color: grey;
    text-shadow: var(--stream-grey-80) -0.5px -0.5px 0;
}

.nav-section.add-new-section:before {
    font: var(--fa-font-sharp-light);
    content: "\e4a3";
    color: white;
    text-shadow: var(--stream-grey-80) -0.5px -0.5px 0;
}

.btn-extra-sm {
    padding: .25rem .5rem;
    font-size: .75rem;
    line-height: 1;
}

.col-with-scroll {
    height: 300px;
    overflow-y: auto;
}


.nav-section.add-new-section span {
    font-style: italic;
    font-weight: 600;
    font-size: 0.8rem;
}

.add-new-section-button {
    outline-style: dashed;
    outline-width: 1px;
    outline-offset: -7px;
    outline-color: var(--transparent-white-50);
}

    .add-new-section-button:focus:not(:focus-visible) {
        /* These will need to be set to adjustable variables */
        color: white;
        outline-style: dashed;
        outline-width: 1px;
        outline-color: var(--transparent-white-50);
    }

.nav-item .add-new-section-button:hover {
    background-color: var(--stream-green-60);
    color: white;
}

    .nav-item .add-new-section-button:hover:before {
        color: black;
    }

.dash-outline {
    border-style: dashed;
}

.add-new-page {
    outline-style: dashed;
    outline-width: 1px;
    outline-offset: -7px;
    outline-color: var(--stream-yellow-80);
}

    .add-new-page:hover {
        outline-color: var(--transparent-black-25);
    }

#navbarForms {
    width: 300px;
    background-color: var(--stream-blue-60) !important;
}

#navbarFormsColorOverwrite {
    width: 300px;
    margin-right: -1px;
    height: calc( 100vh - 86px );
    max-height: calc( 100vh - 86px );
}

.w-300px {
    min-width: 300px;
    width: 300px;
    max-width: 300px;
}

.img-fit {
    height: auto;
    object-fit: contain;
    width: 100%;
}

#userSettings button {
    height: 80px !important;
    border-top: 1pt solid var(--transparent-white-50);
    background-color: var(--stream-blue-40);
    color: var(--transparent-white-90) !important;

}

    #userSettings button:hover {
        background-color: var(--stream-blue-10);
        color: var(--transparent-black-90) !important;
    }
.login-nav-footer--header {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    min-width: 0;
}

.login-nav-footer--user {
    align-items: center;
    display: flex;
    font-size: 14px;
    gap: 0.5rem;
    min-width: 0;
    text-wrap: nowrap;
}

.login-nav-footer--action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    color: white;
}

/* Designer Mode */
.faint-button {
    background-color: var(--stream-grey-10);
    color: var(--stream-grey-80);
    border: none;
}

.dropzone {
    margin: 0;
    padding: 0rem;
    width: 100%;
}

.droparea {
    height: auto;
    min-height: 1rem;
    min-width: 1rem;
    outline: 2px dashed var(--stream-grey-20);
    outline-offset: -5px;
    padding: 6px;
}

    .droparea.can-drop {
        outline-color: var(--stream-green-60);
    }

    .droparea .dropzone {
        margin: 0;
        /*padding: 0.5rem;*/
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .droparea .dropzone:after {
            font: var(--fa-font-sharp-solid);
            font-weight: 400;
            font-size: 2rem;
            content: "";
            color: var(--stream-grey-20);
            height: 32px;
            width: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 4px 0;
        }

        .droparea .dropzone.is-dragging:after {
            content: "\e269";
        }

        .droparea .dropzone.can-drop {
            background-color: var(--stream-green-10);
        }

            .droparea .dropzone.can-drop:after {
                content: "\f0fe";
                color: var(--stream-green-40);
            }


.container {
    display: flex;
    flex-direction: column;
}

.button-container {
    margin-bottom: 10px;
}

#Toolbox {
    max-height: 88px;
}

.tool-box::-webkit-scrollbar {
    width: 11px;
}

.tool-box::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

.tool-box::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
}

.tool-box {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.draggable {
    cursor: pointer;
}

.tool-box {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    white-space: nowrap;
    position: relative;
}

    .tool-box.hide-scroll {
        overflow-x: auto !important;
    }

#ToolboxContainer {
    height: 80px !important;
    position: absolute;
}

.toolbox-container {
    width: min-content;
    min-width: 80px;
    max-width: 130px;
    padding: 0.3rem;
    margin: 0 0.2em;
    display: inline-block;
    text-align: center !important;
    font-size: 0.75rem;
    font-variant: small-caps;
}

    .toolbox-container:hover {
        outline-width: 1px;
        outline-style: outset;
        outline-color: var(--transparent-black-50);
        outline-offset: 0px;
        border-radius: 0px;
        background-size: 100% 100%;
        background-position: 0px 0px;
        background-image: linear-gradient(var(--stream-blue-10), var(--stream-blue-20));
    }

        .toolbox-container:hover .toolbox-label {
            color: white;
        }

.toolbox-item {
    /*padding: 0.6rem 0.2rem;*/
    font-size: 1.3rem;
    border-top: 2px ridge var(--stream-blue-10);
    border-right: 2px ridge var(--stream-blue-10);
    border-bottom: 6px ridge var(--stream-blue-10);
    border-left: 2px ridge var(--stream-blue-10);
    background-color: white;
}

.toolbox-label {
    line-height: 1.0 !important;
    white-space: wrap;
    word-break: keep-all;
}

.lh-1-1 {
    line-height: 1.1 !important;
}

.tabstrip-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*Designer Mode*/
.collection.designer-mode:hover {
    outline: 2px dotted var(--stream-green-20);
    outline-offset: -5px;
}

.custodian {
    padding: 0;
}

    .custodian.designer-mode {
        position: relative;
        padding-top: 50px;
        padding-bottom: 50px;
    }

        .custodian.designer-mode input {
            pointer-events: none;
        }

        .custodian.designer-mode:hover {
            outline: 2px solid var(--stream-blue-40);
            outline-offset: -4px;
        }

.custodian-content {
    display: flex;
    padding: 0.3rem 1rem;
    margin: 0.3rem 0.4rem;
    align-items: center;
}

.datepicker-wrapper > .custodian-content {
    padding: 0px 0px;
    margin: 0px 0px;
}

.custodian-content-required {
    display: none;
    height: 100%;
    position: relative;
}

.highlighted .custodian-content-required {
    display: block;
}

.required-text {
    position: absolute;
    top: -10px;
    left: -7px;
    font-size: 1.4rem;
    color: var(--stream-required);
    font-variant: small-caps;
}

.icon-container {
    display: flex;
    justify-content: center;
    margin: 1px;
}

.center-icons i {
    margin: 1px;
}
/*Designer Hover Buttons*/
.intake-form-container {
    /*padding: 8px 12px;*/
    margin: 1rem 0;
    outline-style: solid;
    outline-width: 1px;
    outline-color: var(--transparent-black-25);
    outline-offset: 0;
}

    .intake-form-container:hover,
    .intake-form-container:focus-within,
    .intake-form-container:focus-visible {
        outline-color: var(--stream-primary-dark);
    }

        .intake-form-container:hover .home-buttons .enter-designer-mode,
        .intake-form-container:hover .home-buttons .remove-external-link,
        .intake-form-container:focus-within .home-buttons .enter-designer-mode,
        .intake-form-container:focus-within .home-buttons .remove-external-link,
        .intake-form-container:focus-visible .home-buttons .enter-designer-mode,
        .intake-form-container:focus-visible .home-buttons .remove-external-link {
            display: flex;
            position: relative;
        }

.home-buttons .enter-designer-mode {
    display: none;
    border-radius: 0 !important;
    height: 100%;
    border: none !important;
    border-left: 1px solid var(--stream-primary-dark) !important;
    background-color: white !important;
    color: var(--stream-primary-dark) !important;
}

    .home-buttons .enter-designer-mode:hover,
    .home-buttons .enter-designer-mode:focus-within,
    .home-buttons .enter-designer-mode:focus-visible {
        border-left: 1px solid var(--stream-primary-light) !important;
        background-color: var(--stream-primary-light) !important;
        color: white !important;
    }

.home-buttons .remove-external-link {
    display: none;
    border-radius: 0 !important;
    height: 100%;
    border: none !important;
    border-left: 1px solid var(--stream-red-40) !important;
    background-color: white !important;
    color: var(--stream-red-40) !important;
}

    .home-buttons .remove-external-link:hover,
    .home-buttons .remove-external-link:focus-within,
    .home-buttons .remove-external-link:focus-visible {
        border-left: 1px solid var(--stream-required) !important;
        background-color: var(--stream-required) !important;
        color: white !important;
    }

.add-new-panel {
    border-radius: 0;
    width: 100%;
    background-color: white;
    color: var(--stream-blue-80);
    outline: 1px solid var(--stream-primary-dark);
    outline-offset: -1px;
    border: none !important;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

    .add-new-panel.intake-add-button {
        width: auto;
        white-space: nowrap;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .add-new-panel:hover,
    .add-new-panel:focus-within,
    .add-new-panel:focus-visible {
        color: white;
        background-color: var(--stream-blue-80);
    }


.custodian.designer-mode:hover .editor-buttons {
    display: flex;
    /*flex-direction: row-reverse;*/
}

.editor-buttons {
    display: none;
    /*position: relative;*/
    /*justify-content: space-between;*/
}

.editor-button-group {
    height: 50px;
    position: absolute;
}

    .editor-button-group.top-toolbar {
        top: 0px;
    }

    .editor-button-group.bottom-toolbar {
        bottom: 0px;
    }

.editor-buttons-header {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
    padding: 5px;
    background-color: #f5f5f5;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.top-toolbar .btn {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.top-toolbar > div:first-of-type .btn:first-of-type {
    border-bottom-left-radius: 0px;
}

.top-toolbar > div:last-of-type .btn:last-of-type {
    border-bottom-right-radius: 0px;
}

.bottom-toolbar .btn {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.bottom-toolbar > div:first-of-type .btn:first-of-type {
    border-top-left-radius: 0px;
}

.bottom-toolbar > div:last-of-type .btn:last-of-type {
    border-top-right-radius: 0px;
}

.editor-meta-info {
    color: white;
    background-color: var(--stream-blue-mid-50);
    font-size: 1rem;
}

.editor-button-edit .btn:disabled {
    opacity: 100%;
    background-color: var(--stream-blue-15);
    border-color: var(--stream-blue-20);
}

.collection.designer-mode:hover .collection-edit {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    position: -webkit-sticky;
    z-index: 500;
    top: 0;
}

.collection-row {
    margin: 0;
    margin-left: calc(0.5 * var(--bs-gutter-x));
    margin-right: calc(0.5 * var(--bs-gutter-x));
}

.collection-edit {
    display: none;
}

    .collection-edit .btn {
        position: absolute;
        top: 0;
        color: var(--stream-grey-80);
        background: white;
        border-radius: 0;
        z-index: 500;
    }

        .collection-edit .btn:hover {
            color: white;
            background: var(--stream-grey-80);
        }

.mt-6px {
    margin-top: 6px;
}

.me-6px {
    margin-right: 6px;
}

.save-button {
    padding: 10px;
    margin-right: 10px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
/* Also see Index.razor for btn-phase styling */
.k-step-list-horizontal .k-step {
    width: unset !important;
    margin: 0 1em;
}

.k-stepper .k-step-link {
    max-width: unset !important;
}
/* This is required to make stepper tooltips work. It doesn't normally work on disabled elements. Events don't fire. */
.k-stepper .k-step button:disabled {
    pointer-events: auto;
}

.tooltip-phase {
    border-radius: 0;
}

.k-switch-track {
    font-size: 14px;
    font-variant: small-caps;
}

.target {
    flex: 1 0 0%;
}

.footer-buttons {
    padding: 0 !important;
    padding-left: 1px !important;
    border-radius: 0 !important;
    height: 80px;
}

.label-placeholder {
    min-height: 1.5rem;
}

.k-tabstrip-prev,
.k-tabstrip-next {
    background-color: var(--stream-primary-main) !important; /* Light cyan */
    border-radius: 6px !important;
    padding: 6px !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.3s !important;
}

    .k-tabstrip-prev:hover,
    .k-tabstrip-next:hover {
        background-color: var(--stream-primary-light) !important; /* Darker cyan on hover */
    }

/* Target the button part of the dropdown */
.k-picker .k-input-button,
.k-toolbar .k-button-solid,
.k-clear-value {
    background-color: var(--stream-primary-main) !important; /* dark blue */
    border-left: 1px solid var(--stream-primary-dark);
    color: white;
    transition: background-color 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.k-button.k-button-link.k-button-solid {
    background-color: white !important;
    color: var(--stream-primary-main) !important;
}

    .k-button.k-button-link.k-button-solid:hover {
        background-color: white !important;
        color: var(--stream-primary-40) !important;
    }

/* Hover effect: light blue */
.k-button:hover,
.k-toolbar .k-button-solid:hover {
    background-color: var(--stream-primary-light); /* light blue */
    color: white;
}

.k-svg-icon {
    width: 26px;
}

    .k-svg-icon > svg,
    .k-menu-expand-arrow .k-svg-icon > svg {
        fill: white;
    }

.k-toolbar-overflow-button .k-svg-icon > svg {
    fill: var(--stream-primary-main)
}

.k-toolbar-popup .k-popup .k-menu-group, .k-menu-popup {
    background-color: var(--stream-secondary-dark);
    border-color: var(--stream-primary-main);
}

    .k-toolbar-popup .k-popup .k-menu-group .k-menu-popup, .k-menu-link-text {
        color: var(--transparent-white-90);
    }

.stream-telerik-button {
    background-color: #0d6efd !important; /* hover-out base */
    color: white !important;
    border: none !important;
    transition: background-color 0.2s ease;
}

    .stream-telerik-button:hover {
        background-color: #0b5ed7 !important; /* hover-in color */
        color: white !important;
    }

.k-grid .k-table-td, .k-table-th, .k-button-text {
    text-align: left !important;
    font-family: 'Inter', sans-serif;
    overflow-wrap: normal;
}

.k-window-titlebar-actions .k-svg-icon > svg {
    fill: black;
}

.k-window, .k-input-value-text,
.k-input, .k-input-inner,
.k-list-item {
    font-family: 'Inter', sans-serif !important;
}

.k-button-solid,
.btn-primary,
.stream-button {
    background-color: var(--stream-primary-main) !important;
    color: white !important;
    border: none;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

    .k-button-solid:hover,
    .btn-primary:hover,
    .stream-button:hover {
        background-color: var(--stream-primary-light);
        color: white;
    }

.stream-button-link {
    background-color: var(--stream-primary-main) !important;
    color: white;
    border: none;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

    .stream-button-link > .k-button-text {
        color: white !important;
    }

    .stream-button-link:hover {
        background-color: var(--stream-primary-main) !important;
        color: var(--stream-primary-40) !important;
    }

.k-button-link:hover {
    background-color: transparent;
}

.k-chip-icon > svg {
    fill: var(--stream-secondary-dark) !important;
}

.k-grid-header .k-svg-icon:not(.k-button-icon) > svg {
    fill: black;
}

.errorDiv {
    background-color: var(--stream-required);
    padding: 10px;
    color: white;
    border: 2px solid darkred;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.stream-header-grid .k-grid-header .k-column-title {
    white-space: normal !important;
    word-wrap: break-word;
    text-align: left;
}

.k-grid .k-grid-header .k-table-th {
    text-align: left !important;
    font-weight: bold !important;
}
/* Force black color on sort arrows */
.k-grid-header .k-svg-icon {
    color: black !important;
}

.k-dropdownlist-popup.k-list-container {
    height: auto !important;
    min-height: unset !important;
    max-height: 300px !important;
    min-width: 300px !important;
}

/* Normal state (hover out) */
.k-grid-header th {
    transition: background-color 0.2s ease;
}

.hide-no-records .k-grid-norecords,
.hide-no-records tr.k-grid-norecords,
.hide-no-records td.k-grid-norecords {
    display: none !important;
}

.auto-height-grid {
    max-height: 500px !important;
    height: auto !important;
    overflow-y: auto;
}

label {
    font-weight: bold !important;
}

.custodian-label {
    font-weight: bold !important;
    text-align: left;
}

.k-switch-on .k-switch-track,
.k-switch-on.k-disabled .k-switch-track {
    background-color: var(--stream-primary-main);
}

.radiogroup-inline .k-radio:checked + .k-radio-label {
    background-color: var(--stream-secondary-main);
    border-color: var(--stream-secondary-main);
    color: white;
}

.k-switch-label-on,
.k-switch-label-off {
    display: inline;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

.k-switch-label-off {
    right: 10px;
}

.k-switch-label-on {
    left: 10px;
    color: white
}

.k-switch-md {
    min-width: 80px;
    width: 80%;
    max-width: 120px;
}

.k-input-solid.k-rounded-md,
.k-picker-solid.k-rounded-md {
    border: 0.2px solid #060606;
    border-radius: 0.375rem;
}

.k-tabstrip-items-wrapper {
    border-bottom-color: var(--stream-grey-80);
    border-bottom-width: 2px;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
    color: var(--stream-secondary-dark);
    font-weight: bold;
    border-top-width: 1px;
    border-right-width: 1px;
    border-color: var(--stream-grey-40);
}

    .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
        background-color: var(--stream-primary-dark);
        color: white;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        border-color: var(--stream-grey-80);
        border-width: 2px;
    }

    .k-tabstrip-top > .k-tabstrip-items-wrapper .k-state-default:hover, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-hover {
        background-color: var(--stream-grey-10);
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        border-color: var(--stream-grey-80);
        border-width: 2px;
    }

.landing-menu {
    background-color: var(--stream-primary-main) !important;
    padding: 0 !important;
}

.header-item {
    color: var(--transparent-white-90) !important;
    padding: 4px 0.25rem;
}

.k-popup {
    border-radius: 0
}

    .k-popup .k-menu-group, .k-menu-popup {
        background-color: var(--stream-primary-dark);
        border-color: var(--stream-primary-main);
    }

.landing-menu > .k-popup .k-menu-group, .k-menu-popup {
    background-color: var(--stream-secondary-dark);
    border-color: var(--stream-primary-main);
}

    .landing-menu > .k-popup .k-menu-group .k-item .k-menu-item {
        background-color: inherit;
        border-width: 2px;
        border-style: solid;
        border-color: white;
    }

.k-popup .k-menu-group .k-item .k-link.k-active,
.k-popup .k-menu-group .k-item .k-link:hover,
.k-popup .k-menu-group .k-item .k-link:focus-within,
.k-popup .k-menu-group .k-item .k-link:focus-visible,
.k-popup .k-menu-group .k-item .k-link:target,
.k-popup .k-menu-group .k-item.k-active,
.k-popup .k-menu-group .k-item:hover,
.k-popup .k-menu-group .k-item:focus-within,
.k-popup .k-menu-group .k-item:focus-visible,
.k-popup .k-menu-group .k-item:target {
    background-color: var(--stream-primary-dark);
    color: var(--transparent-white-90);
}

.landing-menu > .k-menu-item:hover {
    background-color: var(--stream-primary-dark);
}

.k-icon {
    color: var(--transparent-white-90) !important;
}

.employee-selector-container {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}


.career-selector-container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.k-button-link .k-button-text, .k-calendar-nav-today {
    color: var(--stream-secondary-dark);
}

.k-calendar-nav-next .k-button-icon > svg, .k-calendar-nav-prev .k-button-icon > svg {
    fill: var(--stream-secondary-dark);
}

.k-button-link .k-button-text:hover {
    color: var(--stream-secondary-light);
}

.k-calendar .k-calendar-td.k-selected .k-link {
    background-color: var(--stream-secondary-main);
    border-color: var(--stream-secondary-dark);
}

    .k-calendar .k-calendar-td.k-selected .k-link:hover {
        background-color: var(--stream-secondary-light);
        border-color: var(--stream-secondary-main);
    }

.k-switch-off .k-switch-track {
    border-color: black;
}

.k-menu {
    background-color: var(--stream-secondary-main);
    border: none;
    color: #fff;
}

.k-menu-item {
    CORNER-SHAPE: SUPERELLIPSE(0.5);
    transition: background-color 0.3s ease;
    padding-left: 15px;
    padding-bottom: 5px;
}

    .k-menu-item.k-state-active {
        color: #e3e3e3;
        font-weight: 600;
    }


.k-menu-vertical > .k-menu-item > .k-menu-link {
    padding-inline: 0rem !important;
}

    .k-menu-vertical > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
        margin-inline-start: 0rem !important;
        margin-inline-end: calc(-1.5rem + -16px);
        padding-inline: 0rem !important;
    }


.k-stepper .k-step-done .k-step-indicator {
    background-color: var(--stream-secondary-main);
    border-color: var(--stream-primary-main);
}

.k-stepper .k-step-current .k-step-indicator {
    background-color: var(--stream-primary-light);
    border-color: var(--stream-secondary);
}

.dark-disabled-stepper .k-step.k-step-disabled .k-step-label,
.dark-disabled-stepper .k-step.k-disabled .k-step-label,
.dark-disabled-stepper .k-step:disabled .k-step-label {
    color: var(--stream-grey-40) !important;
    font-weight: 500;
    opacity: 1 !important;
}



.top-row.px-4, .bg-section-header {
    padding-left: 14px;
    background-color: var(--stream-primary-dark);
}


.k-input-inner {
    color: black;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: white;
    background-color: var(--stream-secondary-dark) !important;
}

/* Target Telerik TextBox input completely */

.k-grid td,
.k-grid th {
    border: 1px solid black !important;
}

/* Grid header row */
.k-grid-header,
.k-grid-header-wrap {
    border-bottom: 1px solid black !important;
}

/* Grid body wrapper and cell rows */
.k-grid-content,
.k-grid-content td {
    border-color: black !important;
}

/* Footer or pager area */
.k-grid-footer,
.k-grid-pager {
    border-top: 1px solid black !important;
}

.k-grid-content-sticky::after,
.k-grid-header-sticky::after {
    content: '' !important;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px !important;
    z-index: 200 !important;
    border-right: 1px solid black;
    border-left: 1px solid black;
    pointer-events: none !important;
}

.k-grid .k-grid-content-sticky,
.k-grid .k-grid-header-sticky {
    transform: translateZ(1) !important;
}

/* Optional: fix double borders or gaps */
.k-table {
    border-collapse: collapse !important;
}

.showred, .showalarm, .showerror, .showerror .k-input, .showerror .k-input-inner {
    border: none !important;
    box-shadow: none !important; /* Removes any shadow if present */
    color: var(--stream-red-60) !important;
}

.gridedit-calendar-padding {
    padding-right: calc(.5 * var(--bs-gutter-x));
}

.leftalign-wrap {
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
    max-width: 100%;
    padding-left: 0px;
    margin-left: 0px;
}

.responsive-image {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

#HeaderMenu {
    background-color: var(--stream-secondary-main);
}

.child {
    background-color: orange;
    width: 100px;
    height: 100px;
}

.padTop10 {
    padding-top: 10px;
    text-align: center;
    color: #666;
    font-size: 12px;
}

.padBottom20 {
    padding-bottom: 20px;
}

.bold {
    font-weight: bold;
}

.container {
    max-width: 1600px;
    margin: auto;
}

.panel-wrapper {
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--stream-primary-main);
    color: var(--stream-tertiary-light);
    padding: .5rem;
    z-index: 999;
}

.service-center {
    /* background-color: #f9f9f9; */
    /* border: 1px solid #ddd; */
    /* border-radius: 5px; */
    background-color: var(--stream-tertiary-light);
    background-image: linear-gradient( rgba(var(--stream-tertiary-light), 0.05 ), rgba(var(--stream-tertiary-light), 0.20 ) );
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    filter: brightness(1.1) contrast(1.1) grayscale(0.4);
}

.service-panel {
    /* background-color: #f9f9f9; */
    /* border: 1px solid #ddd; */
    /* border-radius: 5px; */
    background-color: var(--stream-tertiary-light);
    background-image: linear-gradient( rgba(var(--stream-tertiary-light), 0.05 ), rgba(var(--stream-tertiary-light), 0.20 ) );
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    filter: brightness(1.1) contrast(1.1) grayscale(0.4);
}

.service-list {
    list-style-type: none;
    padding-left: 0;
    padding: 10px;
    max-height: 70vh;
    overflow-y: scroll;
    position: relative;
}

    .service-list li {
        padding: 8px;
        border-bottom: 1px solid #eee;
    }

        .service-list li:last-child {
            border-bottom: none;
        }

.panel-title {
    font-weight: 600;
    font-variant: small-caps;
}

#LandingPage {
    /* background-color: var(--stream-blue-10); */
    background-color: var(--stream-secondary-dark);
}

#LandingPageContent {
    background-image: linear-gradient( rgba(var(--stream-primary-main), 0.20 ), rgba(var(--stream-primary-main), 0.05 ) );
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100vh - 88px - 71px);
    /* background-color: var(--transparent-black-25); */
    /* background-color: rgba( var(--dark-blue-01), var(--opacity-25) ); */
    /* background-color: rgba( var(--highlight-blue-01), var(--opacity-50) ); */
    backdrop-filter: brightness(1) contrast(1) grayscale(0.2);
    padding-bottom: 100px;
}

#siteHeader {
    position: sticky;
    z-index: 1200;
    box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.5);
}

    #siteHeader a {
        text-decoration: none;
        color: white !important;
    }

.header-link {
    background-color: var(--stream-secondary-light);
    border-bottom: 1px solid var(--transparent-black-50);
}

    .header-link:hover,
    .header-link:focus-within,
    .header-link:focus-visible {
        filter: brightness(1.2);
    }

.panel-card-icon {
    color: var(--stream-primary-dark);
    width: 32px;
}

    .panel-card-icon::before {
        position: relative;
    }

.panel-button {
    text-decoration: none;
    margin: 0;
    padding: 0;
    border: none;
    padding: 8px 12px;
    background-color: white;
}

    .panel-button:hover,
    .panel-button:focus-within,
    .panel-button:focus-visible {
        outline-offset: -2px;
        outline: 2px solid var(--stream-primary-main);
    }

.showerror {
    width: 100% !important;
}

.info-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.info-box.refreshable {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.info-box--buttons {
    border-left: 1px solid #a39b9b;
    margin-left: 5px;
}

    .info-box--buttons .fa {
        margin-left: 5px;
    }

.validation-container .accordion {
    width: 100%;
}

.validation-container .accordion-header {
    display: flex;
    align-items: center;
}

    .validation-container .accordion-header .badge {
        margin: 1rem;
    }

.info-box {
    background-color: #f0f4f8;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--stream-secondary-main);
    transition: background-color 0.2s, transform 0.2s;
}

    .info-box:hover {
        background-color: #f0f4f8;
        transform: translateY(-3px);
    }

    .info-box span {
        color: var(--stream-primary-main); /* Contrast for readability */
    }

.grid-alarm-rightpadding, .calendar-padding {
    padding-right: calc(var(--bs-gutter-x) * 1);
}

.k-panelbar > .k-item > .k-link, .k-panelbar > .k-panelbar-header > .k-link {
    background-color: var(--stream-primary-dark) !important;
    color: white;
}

    .k-panelbar > .k-item > .k-link.k-selected, .k-panelbar > .k-panelbar-header > .k-link.k-selected {
        background-color: var(--stream-primary-dark) !important;
        color: white;
    }

.hideeditortoolbar .k-editor-toolbar,
.hideeditortoolbar .k-toolbar {
    display: none;
}

#assistanceContainer {
    height: calc(100dvh - 140px) !important;
}

.redesign-button-container {
    z-index: 100;
    position: absolute;
    right: 30px;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 40px;
    max-width: 200px;
}

.redesign-button {
    z-index: 100;
    max-width: 200px;
    border: 1pt solid white;
    background-color: var(--stream-secondary-main);
    color: white;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

    .redesign-button:hover {
        background-color: var(--stream-secondary-dark);
        font-size: 1.05rem;
        transition: background-color 0.2s ease;
    }

/* Default (unchecked) border color */
.k-checkbox {
    border-color: black !important;
    border-width: 3px !important;
}

/* Make the whole wizard a vertical flex layout */
.wizard-fill.k-wizard {
    display: flex;
    flex-direction: column;
    height: 100%; /* respects the Height you set on the component */
}

/* Let the content area take all remaining space between stepper and buttons */
.wizard-fill .k-wizard-content {
    flex: 1 1 auto; /* grow to fill */
    min-height: 0; /* important for proper scrolling inside */
    overflow: auto; /* scroll if the step gets tall */
}

/* Buttons stay sized to content at the bottom */
.wizard-fill .k-wizard-buttons {
    flex: 0 0 auto;
}

/* GROUPS are flex too */
.wizard-fill .k-wizard-buttons-left,
.wizard-fill .k-wizard-buttons-right {
    display: flex;
    gap: .5rem; /* spacing between buttons */
}

/* =========================================
       1) Right aligned (but properly lined up)
       ========================================= */
.align-right .k-wizard-buttons {
    justify-content: flex-end;
}

/* footer row stays a normal left-aligned flex row */
.wizard-fill.align-right .k-wizard-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* IMPORTANT: don't push everything right */
}

/* push only the right group to the far edge */
.wizard-fill.align-right .k-wizard-buttons-right {
    margin-inline-start: auto; /* LTR: margin-left:auto */
    /* optional extra gap from the edge for the buttons */
    margin-inline-end: 16px; /* tweak to taste, or remove */
}
/* push group to the right */

/* =========================================
       2) Center aligned
       ========================================= */
.align-center .k-wizard-buttons {
    justify-content: center;
}

.align-center .k-wizard-buttons-right {
    margin: 0 auto;
}
/* center the right group */

/* =========================================
       3) Left aligned
       ========================================= */
/* left-aligned footer with space between "Step 1 of 4" and the buttons */
.align-left .k-wizard-buttons {
    justify-content: flex-start;
    align-items: center; /* neat vertical alignment */
    gap: clamp(12px, 2vw, 24px); /* space BETWEEN the left & right groups */
}

/* keep per-button spacing inside each group */
.wizard-fill .k-wizard-buttons-left {
    display: flex;
    gap: .5rem; /* spacing between buttons themselves */
}

.k-stepper .k-step-label .k-step-text {
    max-width: 100% !important;
    overflow: auto;
    white-space: wrap;
    font-weight: 500;
}

.colored-tab .k-link-text {
    font-weight: 700 !important;
}

.colored-tab.k-active .k-link {
    border-style: solid;
    border-color: black !important;
    border-width: 4px;
    border: solid;
}

.colored-tab.k-active .k-link-text {
    text-decoration: underline;
}

.colored-tab.grey .k-link {
    color: black !important;
    background-color: rgb(43, 43, 43, 0.25);
}

.colored-tab.green .k-link {
    color: rgb(26, 26, 26);
    background-color: rgb(0, 88, 23, 0.51);
}

.colored-tab.k-active.green .k-link {
    color: white !important;
    background-color: rgb(0, 88, 23, 1);
}

.colored-tab.orange .k-link {
    color: rgb(26, 26, 26);
    background-color: rgb(255, 148, 0, 0.40);
}

.colored-tab.k-active.orange .k-link {
    color: white !important;
    background-color: rgb(255, 148, 0, 1);
}

.colored-tab.red .k-link {
    color: rgb(26, 26, 26);
    background-color: rgb(247, 10, 10, 0.41);
}

.colored-tab.k-active.red .k-link {
    color: white !important;
    background-color: rgb(247, 10, 10, 1);
}

.colored-tab.black .k-link {
    color: rgb(26, 26, 26);
    background-color: rgb(96 96 96);
}

.colored-tab.k-active.black .k-link {
    color: white !important;
    background-color: black;
}

/* Solid border */
hr.solid {
    border-top: 2px solid #495057;
}

#timerContainer {
    position: fixed;
    top: 0;
    height: 86px;
    left: 250px;
    z-index: 9999;
    /*background-color: #324A92;*/
    color: white;
    text-align: center;
    padding: 6px 24px;
    font-size: 1.5em;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-height: 800px) {
    .y-scrollable {
        max-height: 600px;
        overflow-y: auto !important;
    }
}

@media (min-height: 801px) and (max-height: 1000px) {
    .y-scrollable {
        max-height: 800px;
        overflow-y: auto !important;
    }
}

@media (min-height: 1001px) and (max-height: 1200px) {
    .y-scrollable {
        max-height: 1000px;
        overflow-y: auto !important;
    }
}

@media (min-height: 1201px) and (max-height: 1400px) {
    .y-scrollable {
        max-height: 1200px;
        overflow-y: auto !important;
    }
}

@media (min-height: 1401px) and (max-height: 1600px) {
    .y-scrollable {
        max-height: 1400px;
        overflow-y: auto !important;
    }
}

@media (min-height: 1601px) {
    .y-scrollable {
        max-height: 1600px;
        overflow-x: auto !important;
    }
}

@media (max-width: 800px) {
    .x-scrollable {
        white-space: nowrap;
        overflow-x: auto !important;
    }

    .x-scroll-inner {
        min-width: 600px; /* Wider than outer div */
    }
}

@media (min-width: 801px) and (max-width: 1000px) {
    .x-scrollable {
        white-space: nowrap;
        overflow-x: auto !important;
    }

    .x-scroll-inner {
        min-width: 800px; /* Wider than outer div */
    }
}

@media (min-width: 1001px) and (max-width: 1200px) {
    .x-scrollable {
        white-space: nowrap;
        overflow-x: auto !important;
    }

    .x-scroll-inner {
        min-width: 1000px; /* Wider than outer div */
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .x-scrollable {
        white-space: nowrap;
        overflow-x: auto !important;
    }

    .x-scroll-inner {
        min-width: 1200px; /* Wider than outer div */
    }
}

@media (min-width: 1401px) and (max-width: 1600px) {
    .x-scrollable {
        white-space: nowrap;
        overflow-x: auto !important;
    }

    .x-scroll-inner {
        min-width: 1400px; /* Wider than outer div */
    }
}

@media (min-width: 1601px) and (max-width: 1800px) {
    .x-scrollable {
        white-space: nowrap;
        overflow-x: auto !important;
    }

    .x-scroll-inner {
        min-width: 1600px; /* Wider than outer div */
    }
}

@media (min-width: 1801px) {
    .x-scrollable {
        white-space: nowrap;
        overflow-x: auto !important;
    }
}

/*Modal styling*/
.modal-window {
    display: contents;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    text-align: center;
    padding: 40px;
    border-radius: 10px;
    background-color: #ffffff; /* White background color */
}


/* Validation Container */
.bg-light-pink {
    background-color: #ffcad3 !important;
}

.bg-light-green {
    background-color: #c9efc2 !important;
}

.bg-red {
    background-color: #ff0000 !important;
}

.bg-green {
    background-color: #00c718 !important;
}

.validation-container {
    gap: 0px;
}

.validation-container--header {
    font-weight: 600;
    color: white;
}

.required-control-message {
    cursor: pointer;
}

    .required-control-message.readonly {
        cursor: none;
        pointer-events: none;
    }

.validation-container .accordion-placeholder {
}

.validation-container .accordion-header {
}

    .validation-container .accordion-header .accordion-button {
        font-weight: 600;
    }

.validation-container .accordion-item {
    border: 0;
}


@keyframes highlight-fade {
    0% {
        background-color: rgba(255, 255, 0, 0.4);
    }

    100% {
        background-color: transparent;
    }
}

.flash-focus {
    animation: highlight-fade 2s ease-out;
    border-radius: 4px;
}



/*** Grouper Component Styling ***/
.tabber {
}

.grouper {
}

    .grouper .btn {
        height: 40px;
    }

.grouper--panel {
    max-height: 60vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.grouper .card {
    border-radius: 0 !important;
}

.grouper .card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.grouper--header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.grouper .accordion {
    border-radius: 0 !important;
}

.grouper .accordion-item {
    border-radius: 0 !important;
}

.grouper .accordion-button {
    border-radius: 0 !important;
}

.grouper .accordion-header {
    border-radius: 0 !important;
}

.grouper--content-wrapper {
}

.grouper--selector .list-group {
    overflow-y: scroll;
    max-height: 50vh;
}

.grouper--selector-item {
    padding: 1rem;
    cursor: pointer;
}

    .grouper--selector-item:hover {
        background-color: var(--stream-component-muted-surface);
    }

    .grouper--selector-item.selected:hover {
        background-color: var(--stream-component-selected-surface);
    }

    .grouper--selector-item.selected {
        background-color: var(--stream-component-selected-surface);
        border: 2px solid var(--stream-component-selected-border);
        border-radius: .3rem;
        color: var(--stream-component-selected-text);
        outline: 1px solid var(--stream-component-accent-hover);
        outline-offset: -4px;
    }

.grouper--searchform {
}

.grouper--searchform-wrapper {
}

.stream-supporting-text {
    color: var(--stream-component-supporting-text);
}

.grouper--selector-item.selected .stream-supporting-text,
.grouper--child-item.selected .stream-supporting-text {
    color: var(--stream-component-selected-text);
}

.stream-toggle-button {
    min-width: 5.75rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

.stream-toggle-button--on {
    color: #fff !important;
    background-color: var(--bs-success, #198754) !important;
    border-color: var(--bs-success, #198754) !important;
}

.stream-toggle-button--off {
    color: #fff !important;
    background-color: var(--bs-danger, #dc3545) !important;
    border-color: var(--bs-danger, #dc3545) !important;
}

.warning-badge {
    background-color: var(--stream-required-10);
    border: 1px solid var(--stream-required);
    color: var(--stream-required);
    font-weight: 800;
}

.former--text-match-field {
    position: relative;
}

    .former--text-match-field .k-input-inner {
        padding-right: 6.75rem;
    }

.former--text-match-toggle {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    z-index: 2;
    margin-top: .7rem;
    height: 30px !important;
}

.grouper--panel-wrapper {
    border-right: 1px dotted var(--stream-component-border);
    padding: 1rem;
}

.grouper--selector {
    border-right: 1px dotted var(--stream-component-border);
    padding: 1rem;
}
/** Telerik Context Menu Overload **/
/****** Temporary overload, will likely replace with configurated styling */
.k-link.k-menu-link:hover, .k-item.k-menu-item:hover {
    background-color: var(--stream-component-accent-hover) !important;
}

.tabber .k-tabstrip-content,
.tabber .k-tabstrip > .k-content {
    display: block;
    overflow-x: hidden;
    padding: 0;
}

.tabber .k-tabstrip-items .k-link,
.tabber .k-tabstrip-items .k-link:hover {
    color: white;
}

.tabber .k-item.k-tabstrip-item {
    background-color: var(--stream-component-accent);
}

    .tabber .k-item.k-tabstrip-item:hover,
    .tabber .k-item.k-tabstrip-item.k-hover {
        background-color: var(--stream-component-accent-hover);
    }

    .tabber .k-item.k-tabstrip-item.k-active,
    .tabber .k-item.k-tabstrip-item.k-active:hover,
    .tabber .k-item.k-tabstrip-item.k-active.k-hover {
        background-color: var(--stream-component-active-surface);
    }

        .tabber .k-item.k-tabstrip-item.k-active .k-link,
        .tabber .k-item.k-tabstrip-item.k-active .k-link:hover {
            color: var(--stream-component-active-text);
        }

.k-disabled,
.k-disabled *,
.k-tabstrip-items .k-item.k-disabled,
.k-tabstrip-items .k-item.k-disabled .k-link {
    cursor: not-allowed !important;
}

    .k-tabstrip-items .k-item.k-disabled .k-link::after {
        content: "\f023";
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        display: inline-block;
        margin-left: 0.5rem;
        font-size: 0.875em;
        line-height: 1;
        vertical-align: middle;
    }

/* Sidebar Layout */
#wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    transition: all 0.3s ease;
}

#sidebar-wrapper {
    transition: margin-left 0.3s ease;
    z-index: 100;
}

#page-content-wrapper {
    background-color: #fff;
    transition: margin-left 0.3s ease;
}

.layout-container {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
}

.main-content {
    background-color: #f7f7f7;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

.sidebar {
    background-color: var(--stream-secondary-main);
    border-right: 2px solid var(--stream-secondary-main);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    height: 100vh;
    max-width: 300px;
    min-height: 0;
    min-width: 300px;
}

.sidebar.main {
    --main-sidebar-offset: 86px;
    height: calc(100vh - var(--main-sidebar-offset));
    max-height: calc(100vh - var(--main-sidebar-offset));
}

.sidebar.collapse {
    max-width: 100px;
    min-width: 100px;
    width: 100px;
}

.sidebar.main #navbarForms {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    width: 100%;
}

.sidebar.main .sidebar-height,
.sidebar.main .sidebar-height-designer,
.sidebar.main #navbarForms > .nav {
    flex: 1 1 auto;
    height: auto;
    margin-bottom: 0 !important;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
}

.sidebar-title {
    color: #fff;
    margin: 0;
}

.sidebar-heading {
    background-color: var(--stream-primary-dark);
    color: #fff;
    font-weight: bold;
    padding: 5px;
    text-align: center;
}

.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.25rem;
    transition: color 0.3s ease;
}

.sidebar-toggle-btn:hover {
    color: #ddd;
}

.scroll-wrapper {
    position: relative;
    max-height: 75vh;
}

.scroll-wrapper::before,
.scroll-wrapper::after {
    content: '';
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    transition: opacity 0.3s;
    z-index: 2;
}

.scroll-wrapper::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
    height: 20px;
    top: 0;
}

.scroll-wrapper::after {
    background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
    bottom: 0;
    height: 20px;
}

.show-top-shadow::before {
    opacity: 1;
}

.show-bottom-shadow::after {
    opacity: 1;
}

.sidebar-menu.y-scrollable {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--stream-tertiary-light) var(--stream-primary-dark);
    scrollbar-width: thin;
}

.sidebar-menu::-webkit-scrollbar {
    display: none;
}

.sidebar-menu.y-scrollable::-webkit-scrollbar {
    display: initial;
    width: 8px;
}

.sidebar-menu.y-scrollable::-webkit-scrollbar-track {
    background: var(--stream-primary-main);
}

.sidebar-menu.y-scrollable::-webkit-scrollbar-thumb {
    background-color: var(--stream-secondary-main);
    border-radius: 4px;
}

.sidebar-menu.y-scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--stream-tertiary-light);
}

.sidebar-menu > .k-menu {
    background-color: var(--stream-secondary-main);
    display: inline;
}

.sidebar-notification-badge {
    align-items: center;
    border-radius: 4px;
    box-shadow: 2px 2px 3px #0000003d;
    color: #ffffff;
    display: inline-flex;
    font-size: 15px;
    font-weight: 700;
    height: 20px;
    margin-left: -4px;
    min-width: 15px;
    padding: 0 6px;
    vertical-align: text-bottom;
}

.sidebar-notification-badge.active {
    background-color: #8B0000;
}

.sidebar-notification-badge.inactive {
    background-color: #444444;
}

.sidebar-menu-button:hover {
    background-color: var(--stream-primary-light);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.sidebar-menu-button:active {
    box-shadow: none;
    transform: translateY(0);
}

.processor-nav-button {
    align-content: space-evenly;
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-grid;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    gap: 10px;
    grid-auto-flow: column;
    max-width: 80%;
    padding: 5px;
    text-align: left;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sidebar .processor-nav-button {
    text-wrap: auto;
}

.processor-nav-button > i.fa-solid {
    width: 22px;
}

.processor-nav-button:hover {
    color: #e3e3e3;
    transform: translateY(-2px);
}

.processor-nav-button:active {
    background-color: #40588c;
    box-shadow: none;
    transform: translateY(0);
}

.processor-nav-button .icon {
    font-size: 1.2rem;
}

.k-menu-expand-arrow {
    margin-inline-start: 4px;
}

.LoginDisplay {
    align-items: center;
    background-color: var(--stream-primary-main);
    border-top: 1pt solid var(--transparent-white-50);
    color: var(--transparent-white-90) !important;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    margin-top: auto;
    min-height: 50px;
    width: 100%;
}

#userSettingsColorOverwrite {
    display: flex;
    justify-content: center;
}

#userSettingsColorOverwrite button,
#userSettingsColorOverwrite a {
    align-items: center;
    background-color: inherit;
    color: white;
    display: flex;
}

#userSettingsColorOverwrite button:hover {
    color: var(--stream-tertiary-light);
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: -250px;
}

@media (max-width: 768px) {
    #wrapper {
        position: relative;
    }

    #sidebar-wrapper {
        left: -250px;
        position: absolute;
    }

    #wrapper.toggled #sidebar-wrapper {
        left: 0;
    }
}

#ProfileButton {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: row;
}