.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
/*------------------------------------------------

ONLY use MUD-PALETTE VARS to respect Darkmode 
    -------------------------------------
    Available VARs:
    1) var(--mud-palette-text-primary); --> Defaults all text to the primary theme color of dark or light mode
    2) var(--mud-palette-background); --> Defaults the background color to light or dark accordingly
    3) var(--mud-palette-surface); --> Use in any MudComponent (this is what separates from the background)
    4) var(--mud-palette-primary); --> Used for Buttons, and Fills for the primary color
    5) var(--mud-palette-seondary); --> Used for Buttons, and Fills for the secondary color
-------------------------------------------------*/

/* 
    JF: This is a CSS global change for the footer:
    custom code for the requested footer issue that was bouncing. 
This whole block is required and implemnts a semi-sticky hybrid footer that stays below a certain point
    won't bounce up and down and re-activates when it in view
*/
.sticky-footer-container {
    position: relative;
    min-height: 80px;
    max-height: 300px;
}

.main-wrapper {
    min-height: 120vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex-grow: 1;
}

/*----- end custom footer stuff */
.mud-appbar {
    position: relative;
}

.appbar-center-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    width: 100%;
    height: 64px;
}
.sticky-header > :only-child {
    height: 100%;
    vertical-align: middle;
}

.sticky-page-headers {
    position: sticky;
    top: 56px;
    z-index: 99;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-background);
    border-radius: 6px;
    margin-left: -10px;
}

.sticky-form-buttons {
    position: fixed;
    top: 63px;
    right: 0;
    z-index: 99;
    margin-left: auto;
    padding: 10px;
    float: right;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-background);
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.04);
    border-left: 1px solid #eeeeee;
}

.form-headings {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-background);
    background-image: linear-gradient(to right, var(--mud-palette-background), var(--mud-palette-surface));
    border-radius: 10px;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.stroll-to-top-fab {
    background-color: #00BCD4 !important;
    color: white !important;
}

.light-bg-gradient {
    background: linear-gradient(to right, white, #eeeeee, white);
}

.custom-wda-selectors {
    background-color: #f7f7f7;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
}

.referral-layout {
    height: 100%;
    overflow: hidden;
}

.nav-panel {
    border-right: 1px solid #e0e0e0;
    background-color: white;
    min-height: 100vh;
}

.content-panel {
    background-color: #fafafa;
    min-height: 100vh;
}

/* Referral Navigation Styles */
.referral-nav {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

    .referral-nav .mud-nav-link {
        padding-left: 2rem;
    }

    .referral-nav .mud-nav-link-active {
        background-color: var(--mud-palette-primary-lighten);
        border-left: 3px solid var(--mud-palette-primary);
    }

/* Selected Option Card */
.selected-option {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px; /* keeps the outline inside the card */
}

.cursor-pointer {
    cursor: pointer;
}

/* Form Card Hover Effect */
.mud-card:hover.cursor-pointer {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

.tile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 180px;
    padding: 16px;
    text-align: center;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    transition: border 0.2s;
}
    .tile-card:focus-visible {
        background-color: var(--mud-palette-action-default-hover);
        outline: none;
    }
    .tile-card:not(.mud-disabled) {
        cursor: pointer;
    }
    .tile-card.selected {
        border: 2px solid var(--mud-palette-primary);
    }

    .tile-card.error-border {
        border: 2px solid var(--mud-palette-error);
    }

    .tile-card .mud-typography {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
    }

.tile-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
}

.highschool-autocomplete .mud-input-label::after,
.secondaryschool-autocomplete .mud-input-label::after {
    content: "*";
    color: var(--mud-palette-error);
    margin-left: 2px;
}

.highschool-autocomplete fieldset legend::after,
.secondaryschool-autocomplete fieldset legend::after {
    content: "*";
    color: var(--mud-palette-error);
    margin-left: 2px;
}

.required-asterisk fieldset legend::after {
    content: "*";
    color: var(--mud-palette-error);
    margin-left: 2px;
}

.required-asterisk .mud-input-label::after {
    content: "*";
    color: var(--mud-palette-error);
    margin-left: 2px;
}

.error-border {
    border: 1px solid var(--mud-palette-error) !important;
    color: var(--mud-palette-error) !important;
}

/* Left navigation */
.drawer-menu {
    background-color: #F3F3F3 !important;
    height: 100%;
}

.mud-drawer .mud-drawer-content {
    background: #f3f3f3;
}

.section-header {
    color: rgba(0, 0, 0, 0.9);
    font-weight: bold !important;
    font-size: 1rem !important;
}

.step-current {
    background-color: #D5EDFF !important;
}

    .step-current .step-text {
        color: #0B108C !important;
        font-weight: bold !important;
        font-size: 1rem !important;
    }

.step-completed .step-text {
    color: rgba(0, 0, 0, 0.9) !important;
    font-weight: normal;
    font-size: 1rem !important;
}

.step-unvisited .step-text {
    color: rgba(0, 0, 0, 0.9) !important;
    font-weight: normal;
    font-size: 1rem !important;
}
/* End Left navigation */

/* Validation summary */
.mud-list-item .mud-error-text {
    color: var(--mud-palette-error) !important;
}

.mud-icon-root.mud-error-icon {
    font-size: 0.5rem !important; /* force smaller size */
    color: var(--mud-palette-error) !important; /* force red */
}

/* Start guide*/

.text-dark-blue {
    color: #0f3460;
}

.start-guide-header {
    font-weight: bold !important /* force smaller size */
}

.start-guide-bullet {
    font-size: 8px !important; /* force smaller size */
}

.border-lines-default {
    border: 1px solid var(--mud-palette-lines-default);
}

/* Progress bar */
.custom-progress {
    width: 80%;
    height: 12px !important; /* increased thickness */
    margin: 0 auto;
    background-color: #D5EDFF !important;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.custom-progress .mud-progress-linear-bar {
    background: repeating-linear-gradient(45deg, #0E4EAD, #0E4EAD 20px, #0198E7 20px, #0198E7 40px);
    animation: stripe-slide 1s linear infinite;
    border-radius: 12px 0 0 12px;
}

/* Start guide*/

.black-border {
    border: 1px solid black;
    border-radius: 4px;
}

.custom-icon-btn .mud-icon-root {
    color: black !important;
}

.search-flex-grow {
    flex-grow: 1;
}

.file-upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
}

.error-message-wrap {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-height: 60px;
    overflow-y: auto;
}
/* Specify our theme-standard colors that don't already have existing classes */
.mud-black {
    color: var(--mud-palette-black) !important;
}

/* Missing Bootstrap style to help keep inlined icons lined up with text */
img, svg {
    vertical-align: middle;
}

.vertical-divider {
    height: 1.5rem;
    align-self: center;
}

.white-text .mud-avatar-outlined {
    color: white;
    border-color: white;
}

.error-icon {
    width: 100px !important;
    height: 100px !important;
    font-size: 100px !important;
}

/* Dashboard cards */
.service-provider-cell {
    max-width: 320px; /*Ensure the calculations to fit a list of service providers into one row are safe*/
}

/* Landing Page */
.landing-white-background {
    padding-left: 32px;
    padding-right: 32px;
    border-radius: 8px;
    background-color: rgba(255,255,255,.2);
}
.landing-blue-background {
    padding-left: 32px;
    padding-right: 32px;
    border-radius: 8px;
    background-color: #d5edff;
}
.landing-column {
    margin-left: 16px;
    margin-right: 16px;
    max-width: 270px;
    flex-basis:0;
    flex-grow:1;
}
.landing-large-column {
    margin-left: 32px;
    margin-right: 32px;
    max-width: 500px;
}
.landing-circled-svg {
    align-content:center;
    text-align:center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
    .landing-circled-svg > svg {
        width: 80px;
        height: 80px;
    }
.landing-large-svg {
    color: rgba(140,230,255,.2);
    width: 100px;
    height: 100px;
}
.landing-blue-border {
    border-color: #8CE6FF;
}
.landing-purple-border {
    border-color: #DC55DC;
}
.landing-outlined-container {
    border-width: 2px;
    border-radius: 6px;
    height: 100%;
}

.wisconsin-site-header {
    background-color: #f0f0f0;
    color: #000000;
    margin-left: 0px;
    margin-right: 0px;
    max-width: none;
}
.wisconsin-site-flag {
    height: 1rem !important;
}
.wisconsin-site-icon {
    color: #107fc9;
    border-color: #107fc9;
}
.wisconsin-site-details {
    max-width: 500px;
}
@media(min-width: 1280px) {
    .wisconsin-site-header {
        padding-left: 40px;
    }
}

.button-link-appearance {
    margin: 0;
    padding: 0;
    box-shadow: none;
}
    .button-link-appearance > span {
        color: #0000FF; /* Temporary hardcoded color, this should probably use a new custom or old MudBlazor variable once our color design is updated. */
        text-decoration: underline;
    }

.youtube-iframe-container {
    width: 100%;
}
    .youtube-iframe-container > iframe {
        width: 100%;
        aspect-ratio: 16/9;
        display: block;
    }

.flex-even-children > * {
    flex-basis: 0;
    flex-grow: 1;
}

.overflow-break-word {
    overflow-wrap: break-word;
}

/* Temporary hardcoded colors, these should be deleted once our color design is updated and imported.
   When these are deleted, confirm that new color design class names are the same, or update class names in other files to match. */
.robin-red-700 {
    color: #A04503;
}
.border-robin-red-700 {
    border-color: #A04503;
}
.bg-robin-red-200 {
    background-color: #FFEED5;
}
.great-green-700 {
    color: #1A8922;
}
.border-great-green-700 {
    border-color: #1A8922;
}
.bg-great-green-200 {
    background-color: #D0F1D2;
}
.bay-blue-400 {
    color: #0070BF;
}
.bg-bay-blue-200 {
    background-color: #D5EDFF;
}
/* End of temporary hardcoded colors */

/* MudBlazor breakpoint css expansion */
@media(min-width: 0px) {
    /* Dividers that can toggle orientation based on breakpoints. Intended for use inside of a MudStack with a Breakpoint parameter. */
    .mud-divider-xs-vertical { /* Breakpoint to use Vertical dividers in a fixed-height container. Replaces Vertical (untested) */
        border-style: none solid none none;
        height: 100%;
        width: auto;
    }

    .mud-divider-xs-vertical-flex { /* Breakpoint to use Vertical dividers in an automatically sized container. Replaces Vertical and Flex */
        border-style: none solid none none;
        height: auto;
        align-self: stretch;
        width: auto;
    }

    .mud-divider-xs-horizontal { /* Breakpoint to use Horizontal dividers. Can use with DividerType */
        border-style: solid none none none;
        height: auto;
        align-self: auto;
    }
}

@media(orientation: landscape) {
    .sticky-page-headers {
        top: 48px;
    }
}

@media(min-width: 600px) {
    .sticky-page-headers {
        top: 64px;
    }

    .mud-divider-sm-vertical {
        border-style: none solid none none;
        height: 100%;
        width: auto;
    }

    .mud-divider-sm-vertical-flex {
        border-style: none solid none none;
        height: auto;
        align-self: stretch;
        width: auto;
    }

    .mud-divider-sm-horizontal {
        border-style: solid none none none;
        height: auto;
        align-self: auto;
    }
}

@media(min-width: 960px) {
    .mud-divider-md-vertical {
        border-style: none solid none none;
        height: 100%;
        width: auto;
    }

    .mud-divider-md-vertical-flex {
        border-style: none solid none none;
        height: auto;
        align-self: stretch;
        width: auto;
    }

    .mud-divider-md-horizontal {
        border-style: solid none none none;
        height: auto;
        align-self: auto;
    }
}

@media(min-width: 1280px) {
    .mud-divider-lg-vertical {
        border-style: none solid none none;
        height: 100%;
        width: auto;
    }

    .mud-divider-lg-vertical-flex {
        border-style: none solid none none;
        height: auto;
        align-self: stretch;
        width: auto;
    }

    .mud-divider-lg-horizontal {
        border-style: solid none none none;
        height: auto;
        align-self: auto;
    }
}

@media(min-width: 1920px) {
    .mud-divider-xl-vertical {
        border-style: none solid none none;
        height: 100%;
        width: auto;
    }

    .mud-divider-xl-vertical-flex {
        border-style: none solid none none;
        height: auto;
        align-self: stretch;
        width: auto;
    }

    .mud-divider-xl-horizontal {
        border-style: solid none none none;
        height: auto;
        align-self: auto;
    }
}

@media(min-width: 2560px) {
    .mud-divider-xxl-vertical {
        border-style: none solid none none;
        height: 100%;
        width: auto;
    }

    .mud-divider-xxl-vertical-flex {
        border-style: none solid none none;
        height: auto;
        align-self: stretch;
        width: auto;
    }

    .mud-divider-xxl-horizontal {
        border-style: solid none none none;
        height: auto;
        align-self: auto;
    }
}

/* Roboto font for normal/italic, 400-700 weight */
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v51-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_symbols_vietnamese-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/roboto-v51-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_symbols_vietnamese-italic.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-v51-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_symbols_vietnamese-500.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/roboto-v51-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_symbols_vietnamese-500italic.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/roboto-v51-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_symbols_vietnamese-600.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/roboto-v51-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_symbols_vietnamese-600italic.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-v51-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_symbols_vietnamese-700.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/roboto-v51-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_symbols_vietnamese-700italic.woff2') format('woff2');
}