/* Base type scale (rem root).  This enables rem-driven sizing throughout the site.
 * Use `rem` for sizing as much as possible so all sizing will be relative to the user's viewport size.
 * When necessary, use the following breakpoints for media queries:
 *     Small:       @media (width < 1920px) { ...
 *     Medium:      @media (1920px <= width < 2560px) { ...
 *     Large:       @media (2560px <= width < 3300px) { ...
 *     Extra-Large: @media (3300px <= width) { ...
 */

html {
    font-size: 16px;
}

@media (width < 1920px) { /* S */
    html {
        font-size: 16px;
    }
}

@media (1920px <= width < 2560px) { /* M */
    html {
        font-size: 18px;
    }
}

@media (2560px <= width < 3300px) { /* L */
    html {
        font-size: 22px;
    }
}

@media (3300px <= width) { /* XL */
    html {
        font-size: 26px;
    }
}


/* CSS Isolation
 *
 *   Throughout the app, it is wise to use .css isolation whenever possible.  Add styles here in app.css
 *   whenever the styles are meant to apply to all elements globally.  If you need to uniquely style a
 *   component or a page, please utilize .css isolation.  However, CSS isolation does not apply to 3rd
 *   party controls like a TelerikCard.  To use .css isolation with Telerik controls, simply wrap the page,
 *   component, or control in a div, then use the ::deep combinator in your local .css file.  For more
 *   information, search the solution for existing examples of this.
 *   References:
 *     Blazor CSS Isolation:  https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation
 *     Telerik's Solution:  https://docs.telerik.com/blazor-ui/knowledge-base/common-css-isolation
 */


/* Font Definition. */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
}

body {
    font-family: "IBM Plex Sans", Arial, sans-serif;
}


/* Background Image. */

.container-background {
    position: relative;
    z-index: 0;
    background: none;
}

    /* paint a viewport-fixed layer behind the app */
    .container-background::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1; /* Behind everything in this stacking context. */
        /* Visual Studio complains that "cover is not a valid value for the background property", but this is a valid SVG2 property - the VS CSS validator just doesn't know about it yet. Ignore the warning. */
        background: url('/images/GasbMainBackground.png') center / cover no-repeat;
    }

/* When in the GasbFormTool pages, add a "readabiity" gradient which partially obfuscates the background
 *    image.  This creates an elliptical white-to-transparent gradient bloom behind the center rail content.
 *    100% white at the *top center* of the center rail fading to transparent at the left/right/bottom edges.
 *    Stays stationary even when the site scrolls vertically. */
.page.gasb-tool-layout .container-background::before {
    /*background-color: red;*/ /* Uncomment this to view the gradient for troubleshooting. */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1; /* Stays behind all content. */
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Two layers: [0] = gradient (on top of background image), [1] = background image. */
    background-image: radial-gradient(ellipse 50% 100% at top center, rgba(255,255,255,1.00) 0%, rgba(255,255,255,0.98) 22%, rgba(255,255,255,0.88) 44%, rgba(255,255,255,0.65) 72%, rgba(255,255,255,0.35) 92%, rgba(255,255,255,0.00) 100%), url('/images/GasbMainBackground.png');
    background-size: var(--center-rail) 100vh, cover;
    background-position: var(--edge-center-left) 0, center;
    background-repeat: no-repeat, no-repeat;
}


/* Login styles. */

.auth-logo {
    height: 3.5rem;
    margin-bottom: 1rem;
}

.auth-header h2 {
    font-family: "IBM Plex Sans", Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #222B36;
    margin-bottom: 1rem;
}

.login-component-container,
.password-change-component-container {
    padding: 20px;
    width: 450px;
}


/* Custom color definitions. */

.g-color-primary {
    color: #0078D4;
}

.g-color-primary-hover {
    color: #006BBD;
}

.g-color-warning {
    color: #DA1E28;
}

.g-color-base {
    color: #222B36;
}

.g-color-secondary {
    color: #A2AFB8;
}

.g-color-white {
    color: #FFF;
}

.g-color-lightgray {
    color: #646A72;
}


/* Theme Customizations
 *
 *   To customize the styles in this theme, use css variable overrides in the :root section below whenever
 *   possible.  For example, see the font override below:  --kendo-font-family: "IBM Plex Sans";  We may wind
 *   up replacing the wwwroot/css/telerik/fluent-main.css file with a customized "Milliman Theme" in the
 *   future.  We may also decide to utilize .scss files, but for now, we are going with theme variables.
 *   References:
 *     Available css variables:  https://www.telerik.com/design-system/docs/themes/kendo-themes/fluent/theme-variables
 *     Customization examples:  https://www.telerik.com/design-system/docs/themes/kendo-themes/fluent/customization
 */

:root {
    --kendo-body-bg: #fff;
    --kendo-color-primary: #222B36;
    --kendo-font-family: "IBM Plex Sans", Arial, sans-serif;
    --kendo-font-family-sans: "IBM Plex Sans", Arial, sans-serif;
    --kendo-font-family-sans-serif: "IBM Plex Sans", Arial, sans-serif;
    --kendo-invalid-text: #F44336;
    --kendo-line-height: 1.55;
    --kendo-font-size: 0.95rem;
    --kendo-font-size-xs: 0.67rem;
    --kendo-font-size-sm: 0.81rem;
    --kendo-font-size-md: 0.95rem;
    --kendo-font-size-lg: 1.08rem;
    --kendo-font-size-xl: 1.35rem;
}


/* Width Movement Model:
 *
 *    Base widths are calculated to exactly fill our minimum supported viewport width of 1280px.
 *    Above a 1280px width, distribute all extra width using growth "weights".  Weights are
 *    calculated to match the pixel widths in the Figma at a 1920px viewpoprt width.  As width
 *    increases beyond 1920px toward our maximum supported width of 3840px, the same weights
 *    ensure the center rail grows the most, rails next, and gutters/spacers the least.
 */

:root {
    /* Supported range */
    --layout-min: 1280px;
    --layout-max: 3840px;
    --layout-range: calc(var(--layout-max) - var(--layout-min));
    /* Clamp extra width to [0, 2560px] */
    --layout-extra: clamp(0px, calc(100vw - var(--layout-min)), var(--layout-range));
    /* Base widths at 1280px viewport: */
    --lg-base: 30px; /* left gutter   */
    --lr-base: 266.667px; /* left rail     */
    --lsp-base: 16.667px; /* left spacer   */
    --c-base: 586.667px; /* center rail   */
    --rsp-base: 16.667px; /* right spacer  */
    --rr-base: 333.333px; /* right rail    */
    --rg-base: 30px; /* right gutter  */
    /* Growth weights (relative; units don't matter): */
    --lg-grow: 60;
    --lr-grow: 58.333;
    --lsp-grow: 33.333;
    --c-grow: 228.333;
    --rsp-grow: 33.333;
    --rr-grow: 166.667;
    --rg-grow: 60;
    /* Normalize weights (sum is ~640). Using calc keeps it source-of-truth. */
    --grow-sum: 640;
    --lg-frac: calc(var(--lg-grow) / var(--grow-sum));
    --lr-frac: calc(var(--lr-grow) / var(--grow-sum));
    --lsp-frac: calc(var(--lsp-grow) / var(--grow-sum));
    --c-frac: calc(var(--c-grow) / var(--grow-sum));
    --rsp-frac: calc(var(--rsp-grow) / var(--grow-sum));
    --rr-frac: calc(var(--rr-grow) / var(--grow-sum));
    --rg-frac: calc(var(--rg-grow) / var(--grow-sum));
    /* Derived widths that can be used anywhere in the app (i.e. header nav, footer, landing page, etc. */
    --gutter-left: calc(var(--lg-base) + var(--layout-extra) * var(--lg-frac));
    --gutter-right: calc(var(--rg-base) + var(--layout-extra) * var(--rg-frac));
    --rail-left: calc(var(--lr-base) + var(--layout-extra) * var(--lr-frac));
    --rail-right: calc(var(--rr-base) + var(--layout-extra) * var(--rr-frac));
    --spacer-left: calc(var(--lsp-base) + var(--layout-extra) * var(--lsp-frac));
    --spacer-right: calc(var(--rsp-base) + var(--layout-extra) * var(--rsp-frac));
    --center-rail: calc(var(--c-base) + var(--layout-extra) * var(--c-frac));
    /* Left edge of left rail. */
    --edge-left-rail: var(--gutter-left);
    /* Left edge of center rail */
    --edge-center-left: calc(var(--gutter-left) + var(--rail-left) + var(--spacer-left));
    /* Right edge aligned to right gutter */
    --edge-right: calc(100vw - var(--gutter-right));
}

/* Utility class for aligning to the calculated gutters. */
.align-to-gutters {
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
}


/* Global Theme Overrides */

.global-color-primary {
    color: #0078D4;
}

.k-h1, .k-h2, .k-h3, .k-h4, .k-h5, .k-h6 {
    font-weight: normal;
}

h1 {
    font-size: 2.2em;
}

    h1:focus {
        outline: none;
    }

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.8em;
}

h4 {
    font-size: 1.6em;
}

h5 {
    font-size: 1.4em;
}

h6 {
    font-size: 1.2em;
}


/* General styles (many get overridden with cascades below and in isolated files.) */

.btn,
.k-button {
    border-radius: 0.18rem;
    font-weight: normal;
}

a, .btn-link {
    color: #0071C1;
}

    .btn-link.nav-link:focus,
    .form-control:focus,
    .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258CFB;
    }

.btn-primary,
.login-page-container button,
.password-reset-page-container button,
.password-change-page-container button {
    background-color: #0078D4;
    border-color: #0078D4;
    color: #FFF;
}

    /* Hover state. */
    .btn-primary:hover,
    .login-page-container button:hover,
    .password-reset-page-container button:hover,
    .password-change-page-container button:hover {
        background-color: #006BBD;
        border-color: #006BBD;
    }

    /* Keyboard focus state. */
    .btn-primary:focus-visible,
    .login-page-container button:focus-visible,
    .password-reset-page-container button:focus-visible,
    .password-change-page-container button:focus-visible {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #00417D;
        outline: 0;
    }

    /* Don't stay "pressed" after click. */
    .btn-primary:focus:not(:focus-visible),
    .login-page-container button:focus:not(:focus-visible),
    .password-reset-page-container button:focus:not(:focus-visible),
    .password-change-page-container button:focus:not(:focus-visible) {
        background-color: #0078D4;
        border-color: #0078D4;
        box-shadow: none;
        outline: 0;
    }

    /* "Pressed" state (only while the mouse button is depressed). */
    .btn-primary:active, .btn-primary:active:focus, .btn-primary:focus:active,
    .login-page-container button:active, .login-page-container button:active:focus, .login-page-container button:focus:active,
    .password-reset-page-container button:active, .password-reset-page-container button:active:focus, .password-reset-page-container button:focus:active,
    .password-change-page-container button:active, .password-change-page-container button:active:focus, .password-change-page-container button:focus:active {
        background-color: #00417D;
        border-color: #00417D;
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #00417D;
    }


.btn-secondary {
    background-color: #7C8087;
    border-color: #7C8087;
    color: #FFF;
}

    /* Hover state. */
    .btn-secondary:hover {
        background-color: #646A72;
        border-color: #646A72;
    }

    /* "Pressed" state (don't need to worry about after-click states - if we do in the future, mimick the styles of btn-primary above). */
    .btn-secondary:focus,
    .btn-secondary:active:focus {
        background-color: #4D545D;
        border-color: #4D545D;
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #4D545D;
        outline: 0;
    }

.btn-tertiary {
    background-color: #FFF;
    border: 1px solid #0078D4;
    color: #0078D4;
}

    /* Hover state. */
    .btn-tertiary:hover {
        background-color: #0078D4;
        border-color: #0078D4;
        color: #FFF;
    }

    /* "Pressed" state (don't need to worry about after-click states - if we do in the future, mimick the styles of btn-primary above). */
    .btn-tertiary:focus,
    .btn-tertiary:active:focus {
        background-color: #005EA6; /* Slightly darker blue for pressed state */
        border-color: #005EA6;
        color: #FFF;
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0078D4;
        outline: 0;
    }

.btn:disabled,
.k-button.k-disabled { /* This must come after the .btn-* styles above in order to properly win the cascade. */
    background-color: #E1E1E1;
    border-color: #E1E1E1;
    color: #999;
    cursor: not-allowed;
    pointer-events: none;
}

/* Remove Telerik's thin inner focus outline/overlay (applied via ::after). */
.k-button:is(:focus, :focus-visible, .k-focus, .k-focus-visible)::after {
    content: none;
}

.btn-pop-up:focus,
.btn-pop-up:active:focus {
    box-shadow: none;
}

.icon-logout {
    align-items: center;
    display: flex;
    color: #646A72;
    cursor: pointer;
}

    .icon-logout:hover {
        color: black;
    }

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

.invalid {
    outline: 1px solid #D92D20;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #E0E0E0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1B6EC2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #C02D76;
}


/* Style all instances of the Telerik loading spinner within the app.
 * Make all loader containers anchored to the viewport for full-screen overlay.
 * A high z-index and !important are needed in several places to ensure it truly stays on top of everything. */
.k-loader-container.telerik-blazor {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 20000;
    overflow: hidden;
}
    /* Colorize the dots and text. */
    .k-loader-container.telerik-blazor .k-loader {
        color: #004578;
    }

    /* Ensure the dark overlay covers the fixed container's bounds. */
    .k-loader-container.telerik-blazor .k-loader-container-overlay {
        position: absolute;
        inset: 0;
    }


/* BEGIN Raw Initial Loading Spinner. */
/* This non-component based spinner mimics Telerik's Loader with the ConvergingSpinner style. */
/* It gets displayed while the Blazor app downloads. */

#initial-loader {
    background-image: url('/images/GasbMainBackground.png');
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

    /* Loader text. */
    #initial-loader .loading-text {
        color: #A9A9A9;
        margin-top: 10px;
        font-size: 0.9rem;
    }

    /* The spinner container. */
    #initial-loader .spinner {
        width: 35px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* The actual spinning portion. */
    #initial-loader .ring {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        animation: spin 1.7s cubic-bezier(0.8, 0, 0.2, 1) infinite; /* first half: spin 180° with cubic-bezier so they "whip around"; second half: hold (while the dots converge on the center and diverge back to the corners) */
        transform-origin: center center; /* center of rotation */
    }

    /* The four little dots. */
    #initial-loader .dot {
        --offset: calc(0.375 * 35px);
        width: 25%;
        aspect-ratio: 1;
        background: #A9A9A9;
        border-radius: 50%;
        position: absolute;
        animation: converge 1.7s ease-in-out infinite;
    }

        /* The dots are placed at the four corners. */
        #initial-loader .dot:nth-child(1) {
            top: 0;
            left: 0;
            --tx: var(--offset);
            --ty: var(--offset);
        }

        #initial-loader .dot:nth-child(2) {
            top: 0;
            right: 0;
            --tx: calc(-1 * var(--offset));
            --ty: var(--offset);
        }

        #initial-loader .dot:nth-child(3) {
            bottom: 0;
            right: 0;
            --tx: calc(-1 * var(--offset));
            --ty: calc(-1 * var(--offset));
        }

        #initial-loader .dot:nth-child(4) {
            bottom: 0;
            left: 0;
            --tx: var(--offset);
            --ty: calc(-1 * var(--offset));
        }

/* Key frame animation fot the dots. */

/* 0–50%: rotate the ring 0 -> 180° (ease-in-out)
   50–100%: keep it at 180° so it doesn’t move during converge/expand */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

/* 0–50%: dots stay put (no translate)
   50–75%: move in toward center
   75–100%: move back out to their corners */
@keyframes converge {
    0%, 50% {
        transform: translate(0, 0);
    }

    75% {
        transform: translate(var(--tx), var(--ty));
    }

    100% {
        transform: translate(0, 0);
    }
}

/* END Raw Initial Loading Spinner. */


/* Global Container Formatting */

html, body {
    min-height: 100%;
    margin: 0;
    overflow: hidden;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Allow document height to grow beyond viewport. */
    width: 100%; /* Avoid 100vw which can cause stray horizontal scrollbars. */
}

    #app .content {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        width: 100%;
    }


/* Helpful Background */

.helpful-background-component-container {
    margin: 0;
}

.helpful-background-header {
    color: #FF832B;
    font-weight: bold;
}

.helpful-background-card {
    background-color: #F8F9FA;
    border: 1px solid #E7E7E7;
    border-radius: .2rem;
    box-shadow: none;
    padding: .8rem;
    font-size: .8rem;
}

@media (width < 1920px) { /* S */
    .helpful-background-card {
        font-size: .8rem;
    }
}

@media (1920px <= width < 2560px) { /* M */
    .helpful-background-card {
        font-size: .9rem;
    }
}

@media (2560px <= width < 3300px) { /* L */
    .helpful-background-card {
        font-size: .95rem;
    }
}

@media (3300px <= width) { /* XL */
    .helpful-background-card {
        font-size: 1.1rem;
    }

    h6 {
        font-size: 1.4em;
    }
}


/* Branding */

.branding,
.branding * {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: row;
}

    .branding img {
        height: 22px;
    }

    .branding .logo {
        border-right: 1px solid white;
        height: 100%;
        padding-right: 20px;
    }

    .branding .app-name {
        padding: 8px 20px 0 20px;
        font-size: 20px;
    }


/* Global scrollbar styles */

:root {
    --sb-size: 0.45rem;
}

::-webkit-scrollbar {
    background: #FFF;
    width: var(--sb-size);
    height: var(--sb-size);
}

::-webkit-scrollbar-track {
    background: #FFF !important;
}

::-webkit-scrollbar-thumb {
    background-color: #8B8B8B;
    border-radius: calc(var(--sb-size) / 2);
    border: none;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #636363;
    }

::-webkit-scrollbar-corner {
    background: #FFF;
}


/* GASB Tool Container - style generic controls within the questionnaire flow. */

.gasb-tool-container .k-datepicker {
    width: 12rem;
}

.gasb-tool-container .k-textbox,
.gasb-tool-container .k-dropdownlist,
.gasb-tool-container .k-numerictextbox,
.gasb-tool-container .k-datepicker {
    border-color: #E7E7E7;
}

.gasb-tool-container input[type="radio"],
.gasb-tool-container input[type="checkbox"] {
    accent-color: #A8A8A8;
    border-color: #A8A8A8;
}

    .gasb-tool-container input[type="radio"]:checked,
    .gasb-tool-container .k-radio.k-checked {
        border-color: black;
        accent-color: black;
    }

/* Replace Telerik's triangle icons with caret icons per the Figma designs (svg paths taken from Font-Awesome). */
/* Visual Studio complains that "d is not a known CSS property name", but this is a valid SVG2 property - the VS CSS validator just doesn't know about it yet. Ignore the warning. */
.gasb-tool-container .k-dropdownlist .k-input-button .k-svg-icon svg path,
.gasb-tool-container .k-numerictextbox .k-icon-button .k-svg-icon.k-svg-i-caret-alt-down svg path {
    d: path("M180.7 363.3c6.2 6.2 16.4 6.2 22.6 0l160-160c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 329.4 43.3 180.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l160 160z");
}

.gasb-tool-container .k-numerictextbox .k-icon-button .k-svg-icon.k-svg-i-caret-alt-up svg path {
    d: path("M180.7 148.7c6.2-6.2 16.4-6.2 22.6 0l160 160c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L192 182.6 43.3 331.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l160-160z");
}



/* Dialog Styles - Blazor and Telerik render modals in their own dialog-wrappers so CSS Isolation is not possible for dialogs or modals. */

.settings-modal .k-window-titlebar {
    border-bottom: 1px solid #222B36;
}

.gasb-confirmation-dialog {
    background-color: #F4F4F4;
    border-radius: 0 0.2rem 0.2rem 0;
    min-width: 25%;
    max-width: 45%;
}

    /* Dialog titlebar styles. */

    .gasb-confirmation-dialog .k-dialog-titlebar .k-window-titlebar-actions [title="Close"].k-window-titlebar-action.k-icon-button:hover::before {
        opacity: 0; /* Hide the default Telerik on-hover background color change. */
    }

    .gasb-confirmation-dialog .k-dialog-titlebar .k-window-titlebar-actions [title="Close"].k-window-titlebar-action.k-icon-button:is(:focus, :focus-visible, .k-focus)::after {
        outline: none !important; /* Hides the default Telerik on-focus border.  !important is needed to override the Telerik styles. */
    }

    /* Size/position the icon wrapper for the "X" icon. */
    .gasb-confirmation-dialog .k-window-titlebar-actions [title="Close"].k-window-titlebar-action.k-icon-button .k-svg-icon {
        position: relative;
        inline-size: 1.125rem;
        block-size: 1.125rem;
    }

        /* Remove the default Telerik "X" icon SVG so we can replace it. */
        .gasb-confirmation-dialog .k-window-titlebar-actions [title="Close"].k-window-titlebar-action.k-icon-button .k-svg-icon svg {
            display: none;
        }

        /* Thin "X" icon (default state). */
        .gasb-confirmation-dialog .k-window-titlebar-actions [title="Close"].k-window-titlebar-action.k-icon-button .k-svg-icon::before {
            background-color: currentColor;
            content: "";
            inset: 0;
            opacity: 0.8;
            position: absolute;
            -webkit-mask: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<g fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round">\<path d="M6 6 18 18"/>\<path d="M6 18 18 6"/>\</g>\</svg>') no-repeat center / contain;
            mask: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<g fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round">\<path d="M6 6 18 18"/>\<path d="M6 18 18 6"/>\</g>\</svg>') no-repeat center / contain;
            mask-size: 75% 75%;
        }

    /* Bold "X" icon (hover state). */
    .gasb-confirmation-dialog .k-window-titlebar-actions [title="Close"].k-window-titlebar-action.k-icon-button:hover .k-svg-icon::before {
        opacity: 1;
        -webkit-mask-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<g fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round">\<path d="M6 6 18 18"/>\<path d="M6 18 18 6"/>\</g>\</svg>');
        mask-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<g fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round">\<path d="M6 6 18 18"/>\<path d="M6 18 18 6"/>\</g>\</svg>');
        mask-size: 75% 75%;
    }

    /* Overall title bar container (needs to come after the above styles for proper cascading). */
    .gasb-confirmation-dialog .k-dialog-titlebar {
        background-color: #F4F4F4;
        position: relative;
        padding: 0 1rem 0.5rem 2rem;
        padding-inline-end: 2.5rem;
        min-block-size: 4rem;
        display: flex;
        align-items: flex-start;
    }

        /* Pin the actions group to the exact top-right inside the padding box. */
        .gasb-confirmation-dialog .k-dialog-titlebar .k-window-titlebar-actions {
            position: absolute;
            inset-block-start: 0.5rem;
            inset-inline-end: 0.5rem;
            margin: 0;
        }

            /* Keep a comfy hit-area around the "X" button. */
            .gasb-confirmation-dialog .k-dialog-titlebar .k-window-titlebar-actions [title="Close"].k-window-titlebar-action.k-icon-button {
                width: 2rem;
                height: 2rem;
                padding: 0;
                background: transparent !important;
            }

        /* Push the title text down without moving the "X". */
        .gasb-confirmation-dialog .k-dialog-titlebar .k-window-title.k-dialog-title {
            margin-block-start: 1.6rem;
        }

    /* Nudge the "X" svg to the upper-right corner of the button click area. */
    .gasb-confirmation-dialog .k-window-titlebar .k-window-titlebar-actions [title="Close"].k-icon-button .k-svg-icon {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
    }

    /* Dialog content styles. */

    .gasb-confirmation-dialog .k-dialog-content {
        padding: 0.5rem 2rem 0.5rem 2rem;
    }

    /* Dialog action buttons styles. */

    .gasb-confirmation-dialog .k-dialog-actions {
        padding: 0 1rem 1rem 2rem;
        justify-content: end;
    }

        .gasb-confirmation-dialog .k-dialog-actions.k-actions-stretched > * {
            flex: none;
        }

        .gasb-confirmation-dialog .k-dialog-actions button {
            border-color: #A2AFB8;
            border-radius: 0.2rem;
            color: #222B36;
            font-weight: normal;
        }

            .gasb-confirmation-dialog .k-dialog-actions button.cancel-button {
                background-color: #FFF;
            }

                .gasb-confirmation-dialog .k-dialog-actions button.cancel-button:hover {
                    background-color: #F4F4F4;
                }

            .gasb-confirmation-dialog .k-dialog-actions button.action-button {
                color: #FFF;
            }

    /* Dialog theme styles - warning */

    .gasb-confirmation-dialog.warning {
        border-left: 0.5rem solid #F1C21B;
    }

        .gasb-confirmation-dialog.warning .k-dialog-title::before {
            color: #F1C21B;
            content: "\f06a"; /* circle-exclamation */
            font: normal 900 1.5rem/1 "Font Awesome 7 Pro";
            margin-right: 0.5rem;
        }

        .gasb-confirmation-dialog.warning .k-dialog-actions button.action-button {
            background-color: #F1C21B;
            color: #222B36;
        }

            .gasb-confirmation-dialog.warning .k-dialog-actions button.action-button:hover {
                background-color: #D8AE18;
            }

    /* Dialog theme styles - error */

    .gasb-confirmation-dialog.error {
        border-left: 0.5rem solid #C02126;
    }

        .gasb-confirmation-dialog.error .k-dialog-title::before {
            color: #C02126;
            content: "\f5ec"; /* do-not-enter (circle with dash) */
            font: normal 900 1.5rem/1 "Font Awesome 7 Pro";
            margin-right: 0.5rem;
        }

        .gasb-confirmation-dialog.error .k-dialog-actions button.action-button {
            background-color: #C02126;
        }

            .gasb-confirmation-dialog.error .k-dialog-actions button.action-button:hover {
                background-color: #991A1E;
            }


    .gasb-confirmation-dialog.statement {
        border-left: 0.5rem solid #0078d4;
    }

        .gasb-confirmation-dialog.statement .k-dialog-title::before {
            color: #0078d4;
            content: "\f06a"; /* circle-exclamation */
            font: normal 900 1.5rem/1 "Font Awesome 7 Pro";
            margin-right: 0.5rem;
        }

        .gasb-confirmation-dialog.statement .k-dialog-actions button.action-button {
            background-color: #0078d4;
            color: white;
        }

            .gasb-confirmation-dialog.statement .k-dialog-actions button.action-button:hover {
                background-color: #006BBD;
            }

/* Trends */

.trend-table thead th {
    background-color: #6C757D;
    border-color: #6C757D;
    color: #FFF;
    overflow-wrap: normal;
    white-space: break-spaces;
    word-break: normal;
}

.trend-table tbody tr:nth-child(even) {
    background-color: #E3F2FD;
}

.trend-table tbody tr:nth-child(odd) {
    background-color: white;
}

.trend-input {
    font-size: 0.9rem;
}

@media (width < 1600px) { /* S */
    .trend-input {
        font-size: 0.7rem;
    }
}

/* Shared Base Styles */

.plan-member-groups {
    border-collapse: collapse;
    width: 100%;
}

    .plan-member-groups th {
        background-color: #6c757d;
        color: white;
        border: 1px solid #6c757d;
        padding: 8px;
        text-align: left;
    }

    .plan-member-groups td {
        border: 1px solid #e3f2fd;
        padding: 8px;
        text-align: left;
    }


/* Table 1: 3 groups of 3 rows */

.table-1 tbody tr:nth-child(1),
.table-1 tbody tr:nth-child(2),
.table-1 tbody tr:nth-child(3) {
    background-color: white;
}

.table-1 tbody tr:nth-child(4),
.table-1 tbody tr:nth-child(5),
.table-1 tbody tr:nth-child(6) {
    background-color: #e3f2fd;
}

.table-1 tbody tr:nth-child(7),
.table-1 tbody tr:nth-child(8),
.table-1 tbody tr:nth-child(9) {
    background-color: white;
}


/* Tables 2 & 3: simpler structures */

.table-alt tbody tr:nth-child(1),
.table-alt tbody tr:nth-child(2),
.table-alt tbody tr:nth-child(3) {
    background-color: white;
}

.table-alt tbody tr:nth-child(4) {
    background-color: #E3F2FD;
}

.table-alt tbody tr:nth-child(5) {
    background-color: white;
}

.card {
    border: 1px solid #DEE2E6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.table-responsive::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.table-responsive {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.height-10px {
    height: 10px;
}

.background-color-transparent {
    background-color: transparent;
}

.render-fragment-list {
    list-style-type: disc;
    padding-left: 20px;
    margin: 5px 0;
}

.render-fragment-sub-list {
    list-style-type: circle;
    padding-left: 20px;
    margin: 3px 0;
}

.render-fragment-list-item {
    margin-bottom: 2px;
}

.bold-blue-text {
    font-weight: bold;
    color: #0078d4;
    font-size: 1rem;
}

.blue-text {
    color: #0078d4;
}

.red-text {
    color: #D92D20;
}

.col-width-18-75 {
    width: 18.75%;
}

.popup-align {
    text-align: center;
    margin: 10px;
}

.admin-container-format {
    margin: 0 var(--gutter-left);
}


/* These are weird - we normally wouldn't do this - but these are needed to avoid CSP errors. */

.width-35pct {
    width: 35%;
}

.width-50pct {
    width: 50%;
}


/* Control Styles - used on forms. */

.control-container {
    position: relative;
}

    .control-container .control-title,
    .control-container .control-title.required {
        font-size: .9em;
        font-weight: bold;
        margin-bottom: 5px;
    }

        .control-container .control-title.required::after {
            content: '*';
            color: #D92D20;
            font-weight: normal;
            margin-left: 4px;
        }

    .control-container .k-input-inner::placeholder {
        color: #A2AFB8;
    }

    .control-container .k-input-inner:hover::placeholder {
        color: #95A0A8;
    }

    .control-container .k-textbox,
    .control-container .k-input,
    .control-container .k-dropdownlist {
        border-color: #E7E7E7;
    }

        .control-container .k-textbox:hover,
        .control-container .k-input:hover {
            border-color: #D8D8D8;
        }

        /* Replace Telerik's triangle icons with caret icons per the Figma designs (svg paths taken from Font-Awesome). */
        /* Visual Studio complains that "d is not a known CSS property name", but this is a valid SVG2 property - the VS CSS validator just doesn't know about it yet. Ignore the warning. */
        .control-container .k-dropdownlist .k-input-button .k-svg-icon svg path,
        .control-container .k-numerictextbox .k-icon-button .k-svg-icon.k-svg-i-caret-alt-down svg path {
            d: path("M180.7 363.3c6.2 6.2 16.4 6.2 22.6 0l160-160c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 329.4 43.3 180.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l160 160z");
        }

    .control-container .k-numerictextbox .k-icon-button .k-svg-icon.k-svg-i-caret-alt-up svg path {
        d: path("M180.7 148.7c6.2-6.2 16.4-6.2 22.6 0l160 160c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L192 182.6 43.3 331.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l160-160z");
    }

.required-asterisk {
    color: #D92D20;
    margin-right: 0.2rem;
}

.validation-message {
    color: #D92D20;
    font-size: 0.9em;
    margin-bottom: 0;
}

    .validation-message::before {
        color: #D92D20;
        content: "\f06a";
        font: var(--fa-font-light);
        left: 0.5em;
        padding-right: .3rem;
    }


/* Large message boxes. */

/* Styles needed for all message boxes - needed for consistent margins/spacing. */
.form-info > h4,
.form-info > h5,
.form-info > p {
    margin: 0;
}

.form-info > h5 {
    margin-top: 0.1rem;
}

.form-info > p {
    margin-top: 0.3rem;
}

/* Red error message box. */
.k-form-error {
    background-color: #FFEEED;
    border-left: 0.4rem solid #D92D20;
    border-radius: 0 0.2rem 0.2rem 0;
    box-shadow: 0.01rem 0.2rem 0.2rem 0 #0000000F;
    color: black;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 2.8rem;
    position: relative;
}

    .k-form-error::before {
        color: #D92D20;
        content: "\f5ec"; /* do-not-enter (circle with dash) */
        font: normal 900 1.5em/1 "Font Awesome 7 Pro";
        left: 0.6rem;
        margin-right: 0.5rem;
        position: absolute;
        top: 0.5rem;
    }

/* Yellow warning message box. */
.k-form-warning {
    background-color: #FFF4D8;
    border-left: 0.4rem solid #EDB500;
    border-radius: 0 0.2rem 0.2rem 0;
    box-shadow: 0.01rem 0.2rem 0.2rem 0 #0000000F;
    color: black;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 2.8rem;
    position: relative;
}

    .k-form-warning::before {
        color: #EDB500;
        content: "\f06a"; /* circle-exclamation */
        font: normal 900 1.5em/1 "Font Awesome 7 Pro";
        left: 0.6rem;
        margin-right: 0.5rem;
        position: absolute;
        top: 0.8rem;
    }

/* Blue info message box. */
.form-info,
.password-reset-page-container.show-info-on-error .k-form-error {
    background-color: #CCE5FF;
    border-left: 0.4rem solid #0078D4;
    border-radius: 0 0.2rem 0.2rem 0;
    box-shadow: 0.01rem 0.2rem 0.2rem 0 #0000000F;
    color: black;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 2.8rem;
    position: relative;
}

    .form-info::before,
    .password-reset-page-container.show-info-on-error .k-form-error::before {
        color: #0078D4;
        content: "\f05a"; /* circle-info */
        font: normal 900 1.5em/1 "Font Awesome 7 Pro";
        left: 0.6rem;
        margin-right: 0.5rem;
        position: absolute;
        top: 0.8rem;
    }

/* Blue info message box customizations. */

.password-reset-page-container .password-reset-component-container.form-info {
    border-radius: 0 0.2rem 0.2rem 0;
    padding: 0.5rem 0.5rem 0.5rem 2.8rem;
    margin-bottom: 0;
    width: 30rem;
}

/* Static Page styles. */
.static-page-container {
    padding: 0 var(--gutter-right) 0 var(--gutter-left);
}

    .static-page-container .card {
        background-color: #F8F9FA;
        border: 1px #E9EDF5 solid;
        box-shadow: none;
        margin-top: 1.7rem;
    }

        .static-page-container .card.left-card {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

    .static-page-container:not(.has-breadcrumbs) .content-panel {
        margin-top: 1.7rem;
    }

    .static-page-container .content-panel {
        background-color: white;
        padding: 0 3rem 3rem 3rem;
        border-radius: 5px;
    }

        .static-page-container .content-panel .breadcrumb {
            padding: 0;
            margin-bottom: 0;
        }

        .static-page-container .content-panel h3.gasb-blue-header {
            margin-top: 0;
            margin-bottom: 1rem;
        }

        .static-page-container .content-panel .card {
            background-color: #F9FAFB;
            width: 80%;
        }


/* Miscellaneous */
a {
    text-decoration: none;
}

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

.k-menu-popup .k-menu-group .k-link.k-menu-link {
    outline: none;
}

.download-link {
    color: black;
    font-weight: bold;
    text-decoration: underline;
}

.eligibility-icon {
    color: #94989D;
    font-size: 6rem;
    max-width: 145px;
    max-height: 145px;
    text-align: center;
    line-height: 145px;
}

.resources-text {
    font-size: 1.1rem;
}

.eligibility-text {
    font-size: 1.25rem;
}

.password-suffix-icon { /* Adds left and right padding around the "eye" icon in password input boxes */
    cursor: pointer;
    padding: 0 8px;
}

.gasb-blue-header {
    color: #0078D4;
    font-weight: bold;
    margin-top: -5px;
}

.gasb-red-header {
    font-weight: bold;
    color: #DA1E28;
}

.form-question-body {
    font-size: 1rem;
}

.bottom-margin-for-blooms { /* Adds additional bottom margin so container can be scrolled out of the way of the questionnaire navigation buttons (on certain resolutions). */
    margin-bottom: 5rem;
}

.option-icons button {
    background-color: #FFF;
    border-radius: 0.2rem;
    margin-right: 0.5rem;
}

    .option-icons button:hover {
        background-color: #E7E7E7;
    }

    .option-icons button.k-disabled {
        opacity: 0.5;
    }

.keep-all {
    word-break: keep-all;
}


/* Disable browser's built-in password reveal button in Microsoft Edge */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
    pointer-events: none;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* Scrollable Terms of Service for Contract Section */
.scrollable-container {
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ddd;
    padding: 10px;
}

    .scrollable-container::-webkit-scrollbar {
        width: 8px;
    }

    .scrollable-container::-webkit-scrollbar-track {
        background: #F1F1F1;
    }

    .scrollable-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

.bg-main {
    background-color: #E7E7E7;
}

.bg-header {
    background-color: #E5F6FF;
}

table .bg-table-gray,
.table .bg-table-gray {
    background-color: #F8F9FA;
}

.connected-tables-wrapper {
    border-radius: 6px;
    overflow: hidden;
}

.table-separator {
    background-color: #6C757D;
    height: 20px;
    margin: 0 15px;
}

.connected-tables-wrapper .table,
.connected-tables-wrapper table {
    margin-bottom: 0;
}

.table-rounded {
    border: 1px solid #DEE2E6;
    border-radius: 0.375rem;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

    .table-rounded thead tr:first-child th:first-child {
        border-top-left-radius: 0.375rem;
    }

    .table-rounded thead tr:first-child th:last-child {
        border-top-right-radius: 0.375rem;
    }

    .table-rounded tbody tr:last-child td:first-child {
        border-bottom-left-radius: 0.375rem;
    }

    .table-rounded tbody tr:last-child td:last-child {
        border-bottom-right-radius: 0.375rem;
    }

    .table-rounded tbody tr:not(:first-child) > * {
        border-top: 1px solid #dee2e6;
    }

.retiree-size {
    max-width: 500px;
}

.text-danger {
    color: #D92D20 !important; /* !important needed to overwrite styles from Telerik & Bootstrap. */
    transform: translateY(1px); /* Nudge the entire div down slightly (to properly horizontally align the icon and text). */
}

    .text-danger span { /* Space between icon and text. */
        margin-right: 8px;
    }

    .text-danger > .k-icon {
        transform: translateY(-1px); /* Nudge the icon back up slightly (to properly horizontally align the icon and text). */
    }

/* Sidebar */
.side-bar {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0;
    flex: 1 1 auto;
}

    .side-bar .hide-me i {
        visibility: hidden;
    }

    .side-bar ul {
        background-color: #F8F9FA;
    }

    .side-bar span {
        font-size: 0.8rem;
        background: transparent;
        color: #94989D;
        font-weight: bold;
        white-space: nowrap;
        font-family: "IBM Plex Sans", Arial, sans-serif;
    }

    .side-bar .k-panelbar .k-link {
        padding: 0.25rem;
        background-color: #F8F9FA;
    }

    .side-bar .k-panelbar .k-panelbar-item .k-link {
        border-left: 5px solid transparent;
        height: 2.5rem;
    }

        .side-bar .k-panelbar .k-panelbar-item .k-link i {
            color: #94989D;
            margin: 0 0.6rem;
        }

        .side-bar .k-panelbar .k-panelbar-item .k-link svg {
            color: #94989D;
        }

    .side-bar .k-panelbar .k-panelbar-group .k-panelbar-item.k-level-1 .k-link span {
        font-size: .8rem;
    }

    .side-bar .k-panelbar > .k-panelbar-header > .k-link.k-focus,
    .side-bar .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link.k-focus {
        box-shadow: none;
    }

    .side-bar .k-panelbar > .k-panelbar-header > .k-link::before,
    .side-bar .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link.k-selected::before {
        background-color: transparent;
    }

    .side-bar .k-panelbar > .k-panelbar-header > .k-link:has(> .header-section.is-selected) {
        border-left: 5px solid #0078D4;
    }

    .side-bar .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link:hover span,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link:hover,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link:hover i,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link:hover svg,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link:hover span,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link:hover > .k-panelbar-toggle,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link > .header-section.is-selected i,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link > .header-section.is-selected span,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link > .header-section.is-complete i,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link > .header-section.is-complete span,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link > .header-section.is-selected + .k-panelbar-toggle,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link > .header-section.is-complete + .k-panelbar-toggle,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link > .header-section.is-complete + .k-panelbar-toggle svg {
        color: #0078D4;
        cursor: pointer;
    }

    .side-bar .k-panelbar > .k-panelbar-header > .k-link > .header-section.is-disabled i,
    .side-bar .k-panelbar > .k-panelbar-header > .k-link > .header-section.is-disabled span {
        color: #C1C6CC;
    }

@media (3300px <= width) { /* XL */
    .side-bar span {
        font-size: 1rem;
    }

    .side-bar .k-panelbar .k-panelbar-group .k-panelbar-item.k-level-1 .k-link span {
        font-size: 1rem;
    }
}

.center-rail .card-header.small-card-header {
    padding: 0.5rem 0.7rem;
}


/* Keep content from being hidden beneath the fixed actions bar when scrolled to the bottom. */
.center-rail .gasb-tool-container {
    padding-bottom: var(--actions-h);
}

/* Fix the form-actions container in place, regardless of scrolling and size it to match the center-rail. Render "blooms" to increase button visibility over scrolling content. */
.page.gasb-tool-layout .form-actions {
    position: fixed;
    left: var(--edge-center-left); /* Align to center rail left edge. */
    width: var(--center-rail); /* Match center rail width. */
    bottom: 0;
    z-index: 900;
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0;
    box-sizing: border-box;
    pointer-events: none;
    isolation: isolate;
    /*background-color: red;*/ /* Uncomment to troubleshoot the blooms. */
}

    /* Add two white elliptical gradient "blooms" that fade to transparent so buttons are always clearly visible over scrollable content. */

    /* Right bloom:  always on. */
    .page.gasb-tool-layout .form-actions::after {
        content: "";
        position: absolute;
        inset: -3rem -0.1rem 0; /* Lets the glow extend (mostly up, and slightly out left and right) outside the bar. */
        pointer-events: none;
        z-index: 0;
        /* Add the bloom gradient. */
        background: radial-gradient(ellipse 80% 130% at 75% 85%, rgba(255,255,255,.98) 10%, rgba(255,255,255,.75) 35%, rgba(255,255,255,.15) 60%, rgba(255,255,255,0) 80%) no-repeat;
        /* Constrain the bloom size. */
        background-size: 65% 150%;
        /* Anchor the bloom near its button cluster. */
        background-position: right -2rem bottom 0;
        /* Soften the top edge of the whole glow area and the content under the blooms. */
        -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
        mask-image: linear-gradient(to top, black 80%, transparent 100%);
        filter: blur(.5px);
    }

    /* Left bloom:  only when the first child is a button (i.e., Save & Exit is rendered).  Hidden when no left-side button is visible. */
    .page.gasb-tool-layout .form-actions:has(> button:first-child)::before {
        content: "";
        position: absolute;
        inset: -3rem -0.5rem 0;
        pointer-events: none;
        z-index: 0;
        /* Add the bloom gradient. */
        background: radial-gradient(ellipse 80% 130% at 25% 85%, rgba(255,255,255,.98) 10%, rgba(255,255,255,.75) 35%, rgba(255,255,255,.15) 60%, rgba(255,255,255,0) 80%) no-repeat;
        /* Constrain the bloom size. */
        background-size: 65% 150%;
        /* Anchor the bloom near its button cluster. */
        background-position: left -2rem bottom 0;
        /* Soften the top edge of the whole glow area and the content under the blooms. */
        -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
        mask-image: linear-gradient(to top, black 80%, transparent 100%);
        filter: blur(.5px);
    }

    /* Keep actual controls above the blooms. */
    .page.gasb-tool-layout .form-actions > * {
        position: relative;
        z-index: 1;
    }

    .page.gasb-tool-layout .form-actions button,
    .page.gasb-tool-layout .form-actions .btn,
    .page.gasb-tool-layout .form-actions a[href],
    .page.gasb-tool-layout .form-actions [role="button"],
    .page.gasb-tool-layout .form-actions input[type="button"],
    .page.gasb-tool-layout .form-actions input[type="submit"] {
        pointer-events: auto;
    }

/* 7 columns in a single row. */
.gasb-tool-shell {
    display: flex;
    flex: 1 1 auto; /* Take remaining vertical space. */
    min-height: 0;
    overflow: visible;
}

/* Column base. */
.col {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Required so inner scrollers can scroll. */
}

/* Let rails shrink relative to their flex-basis instead of growing because of content. */
.left-gutter,
.left-rail,
.left-rail-spacer,
.center-rail,
.right-rail-spacer,
.right-rail,
.right-gutter {
    min-width: 0; /* Prevents content from forcing column widths. */
}

/* Rails participate in normal page scroll. */
.left-rail {
    overflow: visible;
}

/* Prevents overflow due to long content. */
.center-rail,
.right-rail {
    min-width: 0;
}

    /* Content may wrap instead of widening the rail. */
    .center-rail,
    .center-rail * {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

        .center-rail table {
            width: 100%;
            max-width: 100%;
        }

.center-rail-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Needed adjustments for outlier viewport width. */
@media (3300px <= width) { /* XL */
    .center-rail .gasb-tool-container {
        font-size: 1.2rem;
    }
}


/* Assign each column's base + growth behavior (see the "Movement Model" section in app.css). */
.left-gutter {
    flex: var(--lg-grow) 0 var(--lg-base);
}

.left-rail {
    flex: var(--lr-grow) 0 var(--lr-base);
}

.left-rail-spacer {
    flex: var(--lsp-grow) 0 var(--lsp-base);
}

.center-rail {
    flex: var(--c-grow) 0 var(--c-base);
}

.right-rail-spacer {
    flex: var(--rsp-grow) 0 var(--rsp-base);
}

.right-rail {
    flex: var(--rr-grow) 0 var(--rr-base);
}

.right-gutter {
    flex: var(--rg-grow) 0 var(--rg-base);
}

.contact-information-component-container {
    background-color: #F8F9FA;
    border: 1px solid #E7E7E7;
    border-radius: 0.2rem;
    display: block;
    margin-top: 1.2rem;
    padding: 1.2rem;
    width: min(45rem, 100%);
}

    .contact-information-component-container form {
        display: block;
    }

    .contact-information-component-container .form-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
        margin-bottom: 1.25rem;
    }

        .contact-information-component-container .form-row.row-required-notice {
            display: block;
            margin-bottom: 0;
            text-align: right;
        }

        /* Half width. */
        .contact-information-component-container .form-row.row-city-state-zipcode {
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
        }

        /* Double width. */
        .contact-information-component-container .form-row.row-entityname {
            grid-template-columns: 1fr;
            row-gap: 0;
        }


/* Grid formatting. */

.k-grid .k-grid-header {
    padding-right: 0; /* Remove unnecessary right padding. */
}

    .k-grid .k-grid-header table thead tr {
        background-color: #E7E7E7;
    }

.k-grid .k-grid-container .k-grid-content {
    overflow-y: hidden; /* Hide vertical scrollbars in grids - the entire page scrolls. */
}


/* Panelbar styling. */

.k-panelbar .k-panelbar-item.k-panelbar-header .k-link.k-selected {
    background-color: #E7E7E7;
}


/* Notification styling. */

.k-notification-group {
    border-radius: 0 0.2rem 0.2rem 0;
    box-shadow: 0 0 0.3rem rgba(0,0,0,.75);
}

    .k-notification-group .k-notification-container .k-notification.k-notification-success,
    .k-notification-group .k-notification-container .k-notification.k-notification-error,
    .k-notification-group .k-notification-container .k-notification.k-notification-info,
    .k-notification-group .k-notification-container .k-notification.k-notification-warning {
        background-color: #F4F4F4;
    }

    /* Style the "X" icon's container (!important needed to override Telerik defaults). */
    .k-notification-group .k-notification-closable .k-notification-actions .k-notification-close-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2rem;
        block-size: 2rem;
        padding: 0;
        background: transparent !important;
        border: 0;
    }

        .k-notification-group .k-notification-closable .k-notification-actions .k-notification-close-action:is(:hover, :focus, :focus-visible, .k-focus) {
            background: transparent !important;
            outline: none !important;
        }

        /* Size/position the icon wrapper. */
        .k-notification-group .k-notification-closable .k-notification-actions .k-notification-close-action .k-svg-icon {
            position: relative;
            inline-size: 1.125rem;
            block-size: 1.125rem;
            color: #222B36;
        }

            /* Hide the Telerik default "X" icon so we can replace it. */
            .k-notification-group .k-notification-closable .k-notification-actions .k-notification-close-action .k-svg-icon svg {
                display: none;
            }

            /* Thin "X" (default state). */
            .k-notification-group .k-notification-closable .k-notification-actions .k-notification-close-action .k-svg-icon::before {
                content: "";
                position: absolute;
                inset: 0;
                background-color: currentColor;
                opacity: 0.8;
                -webkit-mask: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<g fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round">\<path d="M6 6 18 18"/>\<path d="M6 18 18 6"/>\</g>\</svg>') no-repeat center / contain;
                mask: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<g fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round">\<path d="M6 6 18 18"/>\<path d="M6 18 18 6"/>\</g>\</svg>') no-repeat center / contain;
                mask-size: 75% 75%;
            }

        /* Thick "X" (hover/focus state). */
        .k-notification-group .k-notification-closable .k-notification-actions .k-notification-close-action:hover .k-svg-icon::before,
        .k-notification-group .k-notification-closable .k-notification-actions .k-notification-close-action:focus-visible .k-svg-icon::before {
            opacity: 1;
            -webkit-mask-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<g fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round">\<path d="M6 6 18 18"/>\<path d="M6 18 18 6"/>\</g>\</svg>');
            mask-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<g fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round">\<path d="M6 6 18 18"/>\<path d="M6 18 18 6"/>\</g>\</svg>');
            mask-size: 75% 75%;
        }

    /* Success. */

    .k-notification-group:has(.k-notification-container .k-notification.k-notification-success) {
        border-color: #24A148;
        border: 1px solid #24A148;
        border-left-width: 0.4rem;
    }

    .k-notification-group .k-notification-container .k-notification.k-notification-success .k-notification-content::before {
        color: #24A148;
        content: "\f058"; /* circle-check */
        font: normal 900 1rem/1 "Font Awesome 7 Pro";
        margin-right: 0.5rem;
    }

    /* Error. */

    .k-notification-group:has(.k-notification-container .k-notification.k-notification-error) {
        border-color: #C02126;
        border-left: 0.4rem solid #C02126;
    }

    .k-notification-group .k-notification-container .k-notification.k-notification-error .k-notification-content::before {
        color: #C02126;
        content: "\f5ec"; /* do-not-enter (circle with dash) */
        font: normal 900 1rem/1 "Font Awesome 7 Pro";
        margin-right: 0.5rem;
    }

    /* Info. */

    .k-notification-group:has(.k-notification-container .k-notification.k-notification-info) {
        border-color: #0061AB;
        border-left: 0.4rem solid #0061AB;
    }

    .k-notification-group .k-notification-container .k-notification.k-notification-info .k-notification-content::before {
        color: #0061AB;
        content: "\f05a"; /* circle-info */
        font: normal 900 1rem/1 "Font Awesome 7 Pro";
        margin-right: 0.5rem;
    }

    /* Warning. */

    .k-notification-group:has(.k-notification-container .k-notification.k-notification-warning) {
        border-color: #F1C21B;
        border-left: 0.4rem solid #F1C21B;
    }

    .k-notification-group .k-notification-container .k-notification.k-notification-warning .k-notification-content::before {
        color: #F1C21B;
        content: "\f06a"; /* circle-exclamation */
        font: normal 900 1rem/1 "Font Awesome 7 Pro";
        margin-right: 0.5rem;
    }

.welcome-header {
    color: #0078D4;
}

.admin-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.admin-grid-container {
    margin-top: 1.25rem;
    background-color: #F8F9FA;
    height: 45rem;
}

.admin-inner-container {
    max-width: 60rem;
    margin: auto;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.admin-grid {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 1rem;
}

    .admin-grid .k-grid-header {
        background-color: #f7f7f7;
        border-bottom: 1px solid #e0e0e0;
    }

        .admin-grid .k-grid-header .k-header {
            background-color: #f5f5f5;
            border: none;
            font-weight: 600;
            color: #333;
            font-size: 0.875rem;
            padding: 0.75rem 1rem;
        }

    .admin-grid .k-grid-content {
        border: none;
    }

    .admin-grid .k-grid-table {
        border: none;
    }

    .admin-grid tbody tr {
        border-bottom: 1px solid #e0e0e0;
    }

        .admin-grid tbody tr:last-child {
            border-bottom: none;
        }

    .admin-grid tbody td {
        padding: 1rem;
        font-size: 0.875rem;
        color: #333;
        border: none;
    }