@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url(tokens.css);

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--md-sys-color-surface-variant);
    background-image: linear-gradient(to bottom, var(--md-sys-color-outline) 0%, var(--md-sys-color-surface-variant) 200px);
    background-repeat: no-repeat;
    font-family: 'Roboto', Roboto, sans-serif !important;
    font-weight: var(--md-sys-typescale-body-large-font-weight);
    font-size: var(--md-sys-typescale-body-large-font-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
    color: var(--md-sys-color-on-surface);
    position: relative;
}

form {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', Roboto, sans-serif !important;
    font-weight: var(--md-sys-typescale-body-large-font-weight);
    font-size: var(--md-sys-typescale-body-large-font-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
    position: relative;
}

/*#region Page and Page Title */

.page_container {
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, var(--md-sys-color-dark-blue) 0%, var(--md-sys-color-dark-blue) 200px, var(--md-sys-color-surface-variant) 500px, var(--md-sys-color-surface-variant) 100%);
    overflow-y: auto;
    overflow-x: hidden;
}

.org_page_container {
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, var(--md-sys-color-outline) 0%, var(--md-sys-color-surface-variant) 200px, var(--md-sys-color-surface-variant) 100%);
    overflow-y: auto;
    overflow-x: hidden;
}
    .daily-schedule-scroll-container::-webkit-scrollbar,
    .three-day-schedule-scroll-container::-webkit-scrollbar,
    .weekly-schedule-scroll-container::-webkit-scrollbar{
        width: 16px;
        background-color: var(--md-sys-color-surface-variant);
    }

    .daily-schedule-scroll-container::-webkit-scrollbar-track,
    .three-day-schedule-scroll-container::-webkit-scrollbar-track,
    .weekly-schedule-scroll-container::-webkit-scrollbar-track {
        background-color: var(--md-sys-color-surface-variant);
    }

    .org_page_container::-webkit-scrollbar,
    .page_container::-webkit-scrollbar {
        width: 16px;
        background-color: var(--md-sys-color-surface);
    }

    .org_page_container::-webkit-scrollbar-track,
    .page_container::-webkit-scrollbar-track {
        background-color: var(--md-sys-color-surface);
    }

    .daily-schedule-scroll-container::-webkit-scrollbar-thumb,
    .three-day-schedule-scroll-container::-webkit-scrollbar-thumb,
    .weekly-schedule-scroll-container::-webkit-scrollbar-thumb,
    .org_page_container::-webkit-scrollbar-thumb,
    .page_container::-webkit-scrollbar-thumb {
        background-color: var(--md-sys-color-outline);
    }


.page_title {
    font-family: 'Roboto', Roboto, sans-serif !important;
    /*font-weight: var(--md-sys-typescale-display-small-font-weight);*/
    font-weight: 800;
    /*font-size: var(--md-sys-typescale-display-small-font-size);*/
    font-size: 36px;
    line-height: var(--md-sys-typescale-display-small-line-height);
    /*letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);*/
    letter-spacing: -0.5px;
    margin: 0px 0px 0px 0px;
    color: var(--md-sys-color-on-surface);
    padding: 16px 32px 0px 32px;
    text-align: Left;
    height: auto;
}

    .page_title h1,
    .page_title h2 {
        margin: 0px;
        padding: 0px;
        float: left;
        font-family: 'Roboto', Roboto, sans-serif !important;
        font-weight: 800;
        font-size: var(--md-sys-typescale-display-small-font-size);
        line-height: var(--md-sys-typescale-display-small-line-height);
        letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
        color: var(--md-sys-color-on-surface);
    }

.page_container .page_title {
    background-color: transparent;
    color: var(--md-sys-color-surface);
}

    .page_container .page_title h1,
    .page_container .page_title h2 {
        color: var(--md-sys-color-surface)
    }

@media only screen and (max-width: 1200px) {
    .page_title {
        font-weight: 800;
        font-size: var(--md-sys-typescale-headline-large-font-size);
        line-height: var(--md-sys-typescale-headline-large-line-height);
        letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
    }

        .page_title h1,
        .page_title h2 {
            font-weight: 800;
            font-size: var(--md-sys-typescale-headline-large-font-size);
            line-height: var(--md-sys-typescale-headline-large-line-height);
            letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
            padding-top: 5px;
        }
}

.htmlContentsWhiteBG,
.htmlContentsWhiteBG p,
.htmlContentsWhiteBG div,
.htmlContentsWhiteBG span,
.htmlContentsWhiteBG h1,
.htmlContentsWhiteBG h2,
.htmlContentsWhiteBG h3,
.htmlContentsWhiteBG h4,
.htmlContentsWhiteBG h5,
.htmlContentsWhiteBG h6,
.htmlContentsWhiteBG ul,
.htmlContentsWhiteBG ol
{
    background-color: transparent !important;
    background: transparent !important;
    font-family: 'Roboto', Roboto, sans-serif !important;
    font-weight: var(--md-sys-typescale-body-large-font-weight) !important;
    font-size: var(--md-sys-typescale-body-large-font-size) !important;
    line-height: var(--md-sys-typescale-body-large-line-height) !important;
    letter-spacing: var(--md-sys-typescale-body-large-letter-spacing) !important;
}

/*#endregion fonts*/

/*#region fonts*/
h1 {
    font-family: 'Roboto', Roboto, sans-serif !important;
    font-weight: var(--md-sys-typescale-headline-large-font-weight);
    font-size: var(--md-sys-typescale-headline-large-font-size);
    line-height: var(--md-sys-typescale-headline-large-line-height);
    letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
    color: var(--md-sys-color-on-background);
    padding: 0px;
    margin: 16px 0px 8px 0px;
}

h2 {
    font-family: 'Roboto', Roboto, sans-serif !important;
    font-weight: var(--md-sys-typescale-headline-medium-font-weight);
    font-size: var(--md-sys-typescale-headline-medium-font-size);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
    color: var(--md-sys-color-on-background);
    padding: 0px;
    margin: 16px 0px 8px 0px;
}

h3 {
    font-family: 'Roboto', Roboto, sans-serif !important;
    font-weight: var(--md-sys-typescale-headline-small-font-weight);
    font-size: var(--md-sys-typescale-headline-small-font-size);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
    color: var(--md-sys-color-on-background);
    padding: 0px;
    margin: 16px 0px 8px 0px;
}

h4 {
    font-family: 'Roboto', Roboto, sans-serif !important;
    font-weight: var(--md-sys-typescale-title-large-font-weight);
    font-size: var(--md-sys-typescale-title-large-font-size);
    line-height: var(--md-sys-typescale-title-large-line-height);
    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
    color: var(--md-sys-color-on-background);
    padding: 0px;
    margin: 16px 0px 8px 0px;
}

h5 {
    font-family: 'Roboto', Roboto, sans-serif !important;
    font-weight: var(--md-sys-typescale-title-medium-font-weight);
    font-size: var(--md-sys-typescale-title-medium-font-size);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
    color: var(--md-sys-color-on-background);
    padding: 0px;
    margin: 16px 0px 8px 0px;
}

h6 {
    font-family: 'Roboto', Roboto, sans-serif !important;
    font-weight: var(--md-sys-typescale-title-small-font-weight);
    font-size: var(--md-sys-typescale-title-small-font-size);
    line-height: var(--md-sys-typescale-title-small-line-height);
    letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
    color: var(--md-sys-color-on-background);
    padding: 0px;
    margin: 16px 0px 8px 0px;
}

p {
    margin: 0px;
    padding: 8px 0px 8px 0px;
    font-weight: normal;
}

ol,
ul {
    margin: 0px;
    padding: 0px 16px 0px 16px;
}

img, a img {
    border: 0;
}

a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

blockquote {
    /* Basic styling */
    margin: 16px 0;
    padding: 16px 16px;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-left: 5px solid var(--md-sys-color-on-primary-container);
    /* Typography */
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.6;
    /* Other decorative elements */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 0 12px 12px 0;
}

/* Style for citations or attribution within blockquotes */
blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.9em;
    font-style: normal;
    font-weight: bold;
}

/*#endregion fonts*/

/*#region Clear / HR */

hr {
    float: none;
    clear: both;
    border: none;
    height: 1px;
    background-color: var(--md-sys-color-outline-variant);
    margin: 4px 0;
}

.Clear {
    float: none;
    clear: both;
    width: 100%;
    height: 1px;
    border: none;
}

.Clear3 {
    float: none;
    clear: both;
    width: 100%;
    height: 3px;
}

.Clear4 {
    float: none;
    clear: both;
    width: 100%;
    height: 4px;
}

.Clear8 {
    float: none;
    clear: both;
    width: 100%;
    height: 8px;
}

.Clear16 {
    float: none;
    clear: both;
    width: 100%;
    height: 16px;
}

.Clear32 {
    float: none;
    clear: both;
    width: 100%;
    height: 32px;
}

.Clear64 {
    float: none;
    clear: both;
    width: 95%;
    height: 64px;
}

/*#endregion Clear / HR*/

/*#region Master Header*/

.masterheader {
    height: 90px;
    background-color: #ffffff;
    background-color: var(--md-sys-color-background);
    width: 100%;
    position: fixed;
    padding: 0px;
    margin: 0px;
    top: 0;
    left: 0;
    z-index: 100000;
    border-bottom: 0px solid #000000;
    box-shadow: 0px 1px 5px var(--md-sys-color-on-background);
    overflow: hidden;
}

.masterheadertextdark {
    padding: 32px 8px 0px 16px;
    color: #212121;
    float: left;
    font-size: 40px;
    font-weight: 800;
    display: block;
    letter-spacing: -0.5px;
}

    .masterheadertextdark:hover {
        color: #212121;
    }

.masterheadertextwhite {
    padding: 30px 8px 0px 16px;
    color: #FFFFFF;
    float: left;
    font-size: 40px;
    font-weight: 800;
    display: block;
    letter-spacing: -0.5px;
}

    .masterheadertextwhite:hover {
        color: #FFFFFF;
    }

.masterheadermenu {
    display: none;
}

    .masterheadermenu:hover {
        background: rgba(0,0,0,0.25);
    }

.masterheaderlogo {
    padding: 0px 0px 0px 0px;
    margin: 18px 16px 0px 12px;
    color: var(--md-sys-color-background);
    float: left;
    height: 48px;
    display: block;
}

.masterheaderrightmenucontainer {
    float: right;
    padding: 16px 8px 0px 0px;
}

    .masterheaderrightmenucontainer .FlagImageButton {
        margin: 0px 3px -13px 0px;
        border-radius: 16px;
    }

        .masterheaderrightmenucontainer .FlagImageButton:hover {
            box-shadow: 0px 1px 3px #000000;
        }

    .masterheaderrightmenucontainer .SmallWhiteButton,
    .masterheaderrightmenucontainer .SmallBlueButton {
        margin-top: 10px;
    }

.masterheaderclear {
    float: none;
    clear: both;
    width: 100%;
    height: 1px;
}

.masterheaderNavBar {
    height: 48px;
    white-space: nowrap;
    display: table;
    table-layout: fixed;
    width: 600px;
    margin: 14px auto 0px auto;
}

    .masterheaderNavBar .NavBar-button,
    .masterheaderNavBar .NavBar-button-active {
        font-size: 12px;
        color: var(--md-sys-color-primary);
        font-weight: var(--md-sys-typescale-label-small-font-weight);
        font-size: var(--md-sys-typescale-label-small-font-size);
        line-height: 12px;
        letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
    }

    .masterheaderNavBar .NavBar-button-active {
        color: var(--md-sys-color-on-primary-container);
    }

        .masterheaderNavBar .NavBar-button:hover,
        .masterheaderNavBar .NavBar-button-active:hover {
            color: var(--md-sys-color-on-primary-container);
        }

.WhiteHeaderImageButtonActive,
.DarkHeaderImageButtonActive,
.WhiteHeaderImageButton,
.DarkHeaderImageButton {
    font-weight: var(--md-sys-typescale-label-small-font-weight);
    display: table-cell;
    text-align: center;
    margin: 0px;
    border-radius: 12px;
    height: 44px;
    padding: 4px 0px 0px 0px;
    cursor: pointer;
    overflow: hidden;
    color: var(--md-sys-color-surface);
    font-weight: var(--md-sys-typescale-label-small-font-weight);
    font-size: 11px;
    line-height: 12px;
    letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
}

    .WhiteHeaderImageButton .NavBar-button-image,
    .DarkHeaderImageButton .NavBar-button-image,
    .WhiteHeaderImageButtonActive .NavBar-button-image,
    .DarkHeaderImageButtonActive .NavBar-button-image {
        height: 24px;
        width: 24px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }

    .DarkHeaderImageButton,
    .DarkHeaderImageButtonActive {
        color: var(--md-sys-color-on-surface);
    }

    .WhiteHeaderImageButton:hover,
    .DarkHeaderImageButton:hover,
    .WhiteHeaderImageButtonActive:hover,
    .DarkHeaderImageButtonActive:hover {
        background-color: rgba(0,0,0,.05);
    }

@media only screen and (max-width: 1199px) {
    .masterheaderNavBar {
        display: none;
    }

    .masterheadermenu {
        padding: 16px;
        color: var(--md-sys-color-on-background);
        float: left;
        height: 24px;
        width: 24px;
        display: block;
        border-radius: 36px;
    }

    .masterheaderrightmenucontainer {
        float: right;
        padding: 4px 0px 0px 0px;
        margin: 0px;
    }

        .masterheaderrightmenucontainer .SmallWhiteButton,
        .masterheaderrightmenucontainer .SmallBlueButton {
            margin-top: 8px;
        }

    .masterheaderlogo {
        padding: 0px 0px 0px 0px;
        margin: 10px 0px 0px 0px;
        color: var(--md-sys-color-background);
        float: left;
        height: 36px;
        display: block;
    }

    .masterheader {
        height: 56px;
        margin-top: 0px;
        top: 0;
    }

    .HeaderNavLinkDark,
    .HeaderNavLink {
        padding: 11px 16px 11px 16px;
        margin: 0px;
        display: inline-block;
        width: calc(100% - 32px);
        text-align: left;
    }

    .masterheadertextwhite,
    .masterheadertextdark {
        padding: 16px 8px 0px 0px;
        font-size: 24px;
    }
}

/*#endregion header*/

/*#region Footer */

.masterfooter {
    text-align: left;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    min-height: 185px;
    font-size: 10pt;
}

    .masterfooter p {
        margin: 16px 50px 0px 50px;
        color: var(--md-sys-color-on-surface-variant);
    }

    .masterfooter a {
        text-align: center;
        color: var(--md-sys-color-on-surface-variant);
    }

        .masterfooter a:hover {
            color: var(--md-sys-color-on-surface-variant);
        }

    .masterfooter .materal-field-label {
        color: var(--md-sys-color-on-surface-variant);
    }

.footer_da_container {
    text-align: center;
}

.footer_powered_by {

}

.footer_da_link {
/*    background-color: #072849;*/
    padding: 12px 12px 12px 12px;
    max-width: 252px;
    display: block;
    margin: auto;
    border-radius: 24px;
}

.footer_da_link img {
    width: 252px;
}

/*#endregion Footer*/

/*#region Middle / Main */
#middle {
    margin: 0px;
    padding: 89px 0px 0px 0px;
    color: var(--md-sys-color-on-surface);
}

.navDrawerMargin #middle {
    margin: 0px 0px 0px 68px;
}

#main {
    padding: 0px;
    margin: 0px 0px 0px 0px;
}

@media only screen and (max-width: 1199px) {
    #middle {
        margin: 0px 0px 0px 0px;
        padding: 55px 0px 0px 0px;
    }

    .navDrawerMargin #middle {
        margin: 0px 0px 0px 0px;
    }

    #main {
        margin: 0px 0px 48px 0px;
    }
}

#blazor-error-ui {
    display: none;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        padding: 12px;
        margin: 0px;
        display: inline-block;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        border-bottom-right-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        border-bottom-left-radius: 4px;
        height: 24px;
        width: 24px;
    }

        #blazor-error-ui .dismiss:hover {
            text-decoration: none;
            background-color: rgba(0,0,0,.15);
        }

.validation-errors {
    color: var(--md-sys-color-on-error);
    background-color: var(--md-sys-color-error);
    padding: 16px;
     border-radius: 16px;
    margin: 4px 0px 16px 0px;
    width: calc(100% - 32px);
}

    .validation-errors .validation-message {
        font-weight: bold;
        color: var(--md-sys-color-on-error);
        margin: 16px;
    }

.validation-message {
    font-weight: bold;
    color: var(--md-sys-color-error);
}

/*.error-message {
    color: var(--md-sys-color-on-error);
    background-color: var(--md-sys-color-error);
    padding: 16px;
     border-radius: 16px;
    margin: 4px 0px 16px 0px;
    width: calc(100% - 32px);
    text-align: center;
}

.warning-message {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-yellow);
    padding: 16px;
     border-radius: 16px;
    margin: 0px 0px 16px 0px;
    width: calc(100% - 32px);
    text-align: center;
}*/


/*#endregion Middle / Main */

/*#region NavMenu*/

.MasterHeaderNavMenu {
    height: 48px;
    white-space: nowrap;
    display: table;
    table-layout: fixed;
    margin: 0px 0px 0px auto;
}

.NavMenuLink,
.NavMenuLinkActive,
.NavMenuLinkDark,
.NavMenuLinkActiveDark {
    padding: 11px 8px 11px 8px;
    margin: 24px 4px 26px 4px;
    display: inline-block;
    border-radius: 24px;
    color: var(--md-sys-color-surface);
    text-transform: uppercase;
    font: Roboto;
    font-size: var(--md-sys-typescale-body-small-font-size);
    font-weight: 600;
    line-height: var(--md-sys-typescale-body-small-line-height);
    letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
    text-align: center;
    float: left;
}

    .NavMenuLink,
    .NavMenuLinkActive,
    .NavMenuLink a,
    .NavMenuLinkActive a,
    .NavMenuLink a:hover,
    .NavMenuLinkActive a:hover,
    .NavMenuLink:hover a,
    .NavMenuLinkActive:hover a {
        color: var(--md-sys-color-surface);
    }

    .NavMenuLinkDark,
    .NavMenuLinkActiveDark,
    .NavMenuLinkDark a,
    .NavMenuLinkActiveDark a,
    .NavMenuLinkDark a:hover,
    .NavMenuLinkActiveDark a:hover,
    .NavMenuLinkDark:hover a,
    .NavMenuLinkActiveDark:hover a {
        color: var(--md-sys-color-on-surface);
    }

        .NavMenuLinkDark:hover,
        .NavMenuLinkActive:hover {
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0.08);
        }

.masterheader .NavMenuLinkImage {
    display: none;
}

.navDrawerOrg,
.navDrawer {
    background-color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    width: 68px;
    position: fixed;
    margin: 0px;
    top: 90px;
    bottom: 0px;
    left: 0px;
    z-index: 100000;
    /*display: flex;*/
    display: none;
    flex-direction: column;
}

.navDrawerOrg {
    display: flex;
}

/*.page_container .navDrawer {
    display: inherit;
}*/

.navDrawerOrg::-webkit-scrollbar,
.navDrawer::-webkit-scrollbar {
    width: 4px;
    background-color: var(--md-sys-color-surface);
}

    .navDrawerOrg::-webkit-scrollbar-track,
    .navDrawer::-webkit-scrollbar-track {
        background-color: var(--md-sys-color-surface);
    }

    .navDrawerOrg::-webkit-scrollbar-thumb,
    .navDrawer::-webkit-scrollbar-thumb {
        background-color: var(--md-sys-color-primary);
    }

    .navDrawerOrg .NavMenuLink,
    .navDrawerOrg .NavMenuLinkActive,
    .navDrawerOrg .NavMenuLinkDark,
    .navDrawerOrg .NavMenuLinkActiveDark,
    .navDrawerOrg .NavMenuLink:hover,
    .navDrawerOrg .NavMenuLinkActive:hover,
    .navDrawerOrg .NavMenuLinkDark:hover,
    .navDrawerOrg .NavMenuLinkActiveDark:hover,
    .navDrawer .NavMenuLink,
    .navDrawer .NavMenuLinkActive,
    .navDrawer .NavMenuLinkDark,
    .navDrawer .NavMenuLinkActiveDark,
    .navDrawer .NavMenuLink:hover,
    .navDrawer .NavMenuLinkActive:hover,
    .navDrawer .NavMenuLinkDark:hover,
    .navDrawer .NavMenuLinkActiveDark:hover {
        width: calc(100% - 8px);
        text-align: center;
        color: var(--md-sys-color-surface-variant);
        margin: 4px;
        padding: 0;
        text-transform: none;
        border-radius: 12px;
        display: flex;
        flex-direction: column; /* Stack the image and text vertically */
        align-items: center; /* Center the content */
    }

        .navDrawerOrg .NavMenuLinkDark:hover,
        .navDrawerOrg .NavMenuLinkActiveDark:hover,
        .navDrawerOrg .NavMenuLink:hover,
        .navDrawerOrg .NavMenuLinkActive:hover,
        .navDrawer .NavMenuLinkDark:hover,
        .navDrawer .NavMenuLinkActiveDark:hover,
        .navDrawer .NavMenuLink:hover,
        .navDrawer .NavMenuLinkActive:hover {
            background-color: var(--md-ref-palette-neutral-variant80);
            color: var(--md-sys-color-on-surface);
        }

    .navDrawerOrg .NavMenuLinkText,
    .navDrawer .NavMenuLinkText {
        width: 100%;
        font-size: 9px;
        padding: 0;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navDrawerOrg .NavMenuLinkImage,
    .navDrawer .NavMenuLinkImage {
        height: 24px;
        width: 24px;
        min-height: 24px;
        min-width: 24px;
        flex-shrink: 0;
        margin-bottom: 4px; /* Add some space below the image */
        padding: 0;
    }

    .navDrawerOrg .NavMenuLinkActive,
    .navDrawerOrg .NavMenuLinkActiveDark,
    .navDrawer .NavMenuLinkActive,
    .navDrawer .NavMenuLinkActiveDark {
        background-color: var(--md-sys-color-surface);
    }

        .navDrawerOrg .NavMenuLinkActiveDark .NavMenuLinkText,
        .navDrawerOrg .NavMenuLinkActive .NavMenuLinkText,
        .navDrawer .NavMenuLinkActiveDark .NavMenuLinkText,
        .navDrawer .NavMenuLinkActive .NavMenuLinkText {
            color: var(--md-sys-color-on-surface);
            font-weight: bold;
        }

        .navDrawerOrg .NavMenuLinkActive .NavMenuLinkImage,
        .navDrawerOrg .NavMenuLinkActiveDark .NavMenuLinkImage,
        .navDrawer .NavMenuLinkActive .NavMenuLinkImage,
        .navDrawer .NavMenuLinkActiveDark .NavMenuLinkImage {
            color: var(--md-sys-color-on-surface);
        }

.NavMenuLink .messageCount,
.NavMenuLinkDark .messageCount,
.NavMenuLinkActive .messageCount,
.NavMenuLinkActiveDark .messageCount {
    color: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-tertiary);
    padding: 4px;
    border-radius: 8px;
    font-size: 10px;
    margin: -22px 12px 0 auto;
    z-index: 1;
}

@media only screen and (max-width: 1199px) {

    .masterheader .NavMenuLink,
    .masterheader .NavMenuLinkActive,
    .masterheader .NavMenuLinkDark,
    .masterheader .NavMenuLinkActiveDark {
        display: none;
    }

    .navDrawerOrg,
    .navDrawer {
        top: 0;
        box-shadow: 1px 0 4px var(--md-sys-color-on-background);
        width: 215px;
        display: none;
    }

        .navDrawerOrg .NavMenuLinkDark,
        .navDrawerOrg .NavMenuLinkActiveDark,
        .navDrawerOrg .NavMenuLinkDark:hover,
        .navDrawerOrg .NavMenuLinkActiveDark:hover,
        .navDrawerOrg .NavMenuLink,
        .navDrawerOrg .NavMenuLinkActive,
        .navDrawerOrg .NavMenuLink:hover,
        .navDrawerOrg .NavMenuLinkActive:hover,
        .navDrawer .NavMenuLinkDark,
        .navDrawer .NavMenuLinkActiveDark,
        .navDrawer .NavMenuLinkDark:hover,
        .navDrawer .NavMenuLinkActiveDark:hover,
        .navDrawer .NavMenuLink,
        .navDrawer .NavMenuLinkActive,
        .navDrawer .NavMenuLink:hover,
        .navDrawer .NavMenuLinkActive:hover {
            width: calc(100% - 32px);
            text-align: left;
            color: var(--md-sys-color-surface);
            display: flex;
            flex-direction: row; /* Align items horizontally */
            margin: 8px auto 0;
            padding: 8px;
            border-radius: 24px;
            font-weight: 400;
        }

            .navDrawerOrg .NavMenuLinkDark:hover,
            .navDrawerOrg .NavMenuLinkActiveDark:hover,
            .navDrawerOrg .NavMenuLink:hover,
            .navDrawerOrg .NavMenuLinkActive:hover,
            .navDrawer .NavMenuLinkDark:hover,
            .navDrawer .NavMenuLinkActiveDark:hover,
            .navDrawer .NavMenuLink:hover,
            .navDrawer .NavMenuLinkActive:hover {
                background-color: var(--md-ref-palette-neutral-variant80);
                color: var(--md-sys-color-on-surface);
            }

        .navDrawerOrg .NavMenuLinkActive,
        .navDrawerOrg .NavMenuLinkActiveDark,
        .navDrawer .NavMenuLinkActive,
        .navDrawer .NavMenuLinkActiveDark {
            background-color: var(--md-sys-color-surface);
        }

            .navDrawerOrg .NavMenuLinkActiveDark .NavMenuLinkText,
            .navDrawerOrg .NavMenuLinkActive .NavMenuLinkText,
            .navDrawer .NavMenuLinkActiveDark .NavMenuLinkText,
            .navDrawer .NavMenuLinkActive .NavMenuLinkText {
                color: var(--md-sys-color-on-surface);
            }

            .navDrawerOrg .NavMenuLinkActive .NavMenuLinkImage,
            .navDrawerOrg .NavMenuLinkActiveDark .NavMenuLinkImage,
            .navDrawer .NavMenuLinkActive .NavMenuLinkImage,
            .navDrawer .NavMenuLinkActiveDark .NavMenuLinkImage {
                color: var(--md-sys-color-on-surface);
            }

        .navDrawerOrg .NavMenuLinkImage,
        .navDrawer .NavMenuLinkImage {
            padding: 0;
            margin: 0;
            min-height: 24px;
            min-width: 24px;
            flex-shrink: 0;
        }

        .navDrawerOrg .NavMenuLinkText,
        .navDrawer .NavMenuLinkText {
            width: 100%;
            font-size: 12px;
            padding: 4px 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .navDrawerOrg .NavMenuLink .messageCount,
        .navDrawerOrg .NavMenuLinkActive .messageCount,
        .navDrawerOrg .NavMenuLinkDark .messageCount,
        .navDrawerOrg .NavMenuLinkActiveDark .messageCount,
        .navDrawer .NavMenuLink .messageCount,
        .navDrawer .NavMenuLinkActive .messageCount,
        .navDrawer .NavMenuLinkDark .messageCount,
        .navDrawer .NavMenuLinkActiveDark .messageCount {
            margin: 0 -2px 0 -8px;
        }
}

/*#endregion NavDrawer*/

/*#region NavBar */

.NavBar-button,
.NavBar-button-active {
    display: table-cell;
    text-align: center;
    margin: 0px;
    border-radius: 24px;
    height: 44px;
    padding: 6px 0px 0px 0px;
    cursor: pointer;
    overflow: hidden;
    color: var(--md-sys-color-primary);
    font-weight: var(--md-sys-typescale-label-small-font-weight);
    font-size: 11px;
    line-height: 12px;
    letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
}

.NavBar-button-active {
    color: var(--md-sys-color-on-primary-container);
}

    .NavBar-button .messageCount,
    .NavBar-button-active .messageCount {
        color: var(--md-sys-color-on-primary);
        background-color: var(--md-sys-color-tertiary);
        padding: 4px;
        border-radius: 8px;
        font-size: 10px;
        margin: 0px 0px 0px -10px;
        z-index: 1;
    }

    .NavBar-button .NavBar-button-image,
    .NavBar-button-active .NavBar-button-image {
        height: 24px;
        width: 24px;
        margin: 0px 0px 4px 0px;
        padding: 4px 16px 4px 16px;
        border-radius: 16px;
    }

    .NavBar-button-active .NavBar-button-image {
        background-color: var(--md-sys-color-primary-container);
    }

    .NavBar-button-active:hover .NavBar-button-image,
    .NavBar-button:hover .NavBar-button-image {
        text-decoration: none;
        background-color: var(--md-sys-color-transparent-shading10);
        color: var(--md-sys-color-on-primary-container);
    }


.masterfooterNavBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background-color: var(--md-sys-color-surface);
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    display: table;
    table-layout: fixed;
}

@media only screen and (max-width: 1201px) {

    .masterheader .NavBar-button,
    .masterheader .NavBar-button-active {
        display: none;
    }
}

@media only screen and (min-width: 1200px) {
    .masterfooterNavBar {
        display: none;
    }
}


/*#endregion NavBar*/
 /*#region ChatBubble*/

.assitant_image {
    width: 100%;
}

.talk-bubble {
    margin: 16px 16px 16px 16px;
    display: inline-block;
    position: relative;
    max-width: calc(100% - 80px);
    height: auto;
    background-color: var(--md-sys-color-primary-container);
    border-radius: 16px;
}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -40px;
    right: auto;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: var(--md-sys-color-primary-container) transparent transparent transparent;
}

.tri-right.left-top:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 0px;
    bottom: auto;
    border: 22px solid;
    border-color: var(--md-sys-color-primary-container) transparent transparent transparent;
}

/* talk bubble contents */
.talktext {
    padding: 16px;
}

.talktext_oneline {
    padding: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 48px);
    min-width: 100px;
}

.talktext p,
.talktext h1,
.talktext h2 {
    font-weight: normal;
    padding: 0px 0px 16px 0px;
    margin: 0px;
    font-size: 16px;
    letter-spacing: 0px;
    color: var(--md-sys-color-on-primary-container);
}

.talktext ul {
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0px;
    color: var(--md-sys-color-on-primary-container);
    margin-bottom: 16px;
}


/*#endregion ChatBubble*/

/*#region responsive wrapper*/

.ProfileDetails {
    background-color: var(--md-sys-color-on-primary-container);
    color: var(--md-sys-color-primary-container);
    width: 100%;
     border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 0px 0px 16px 0px;
}

    .ProfileDetails h1,
    .ProfileDetails h2,
    .ProfileDetails h3,
    .ProfileDetails h4,
    .ProfileDetails h5,
    .ProfileDetails p {
        color: #FFFFFF;
        margin: 0px 0px 16px 0px;
    }

.ForceWhiteText {
    color: var(--md-sys-color-background-light) !important;
}

.profile_FAB_button_container {
    float: right;
    width: 160px;
    text-align: right;
}

.EditFormSection {
    padding-bottom: 16px;
}

.ResponsiveWrapper {
    margin: auto;
    padding: 16px;
    position: relative;
    /* max-width: 1584px;*/
}

    .ResponsiveWrapper .ResponsiveWrapper {
        padding: 0px;
    }


.ResponsiveColumn100 {
    width: 100%;
    padding: 0px;
    vertical-align: middle;
}

.ResponsiveLeftColumn80 {
    width: 80%;
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn75 {
    width: calc(75%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn70 {
    width: calc(70%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn618 {
    width: calc(61.80%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn60 {
    width: calc(60%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn50 {
    width: calc(50%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn50Picture {
    width: calc(50%);
    padding: 0px;
    float: left;
    vertical-align: middle;
    background-color: var(--md-sys-color-background-light);
}

.ResponsiveLeftColumn45 {
    width: calc(45%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn40 {
    width: calc(40%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn35 {
    width: calc(35%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn30 {
    width: calc(30%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.ResponsiveLeftColumn25 {
    width: calc(25% - 16px);
    padding: 0px 16px 0px 0px;
    float: left;
    vertical-align: middle;
}

.LeftColumn30 {
    width: calc(30%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.LeftColumn20 {
    width: calc(20%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.LeftColumn10 {
    width: calc(10%);
    padding: 0px;
    float: left;
    vertical-align: middle;
}

.RightColumn90 {
    width: calc(90% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.RightColumn80 {
    width: calc(80% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveRightColumn75 {
    width: calc(75%);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveRightColumn70 {
    width: calc(70% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.RightColumn70 {
    width: calc(70% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveRightColumn60 {
    width: calc(60% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveRightColumn50 {
    width: calc(50% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveRightColumn50Picture {
    width: calc(50% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
    background-color: var(--md-sys-color-background-light);
}

.ResponsiveRightColumn50RightAlign {
    width: 49%;
    float: right;
    vertical-align: middle;
    text-align: right;
}

.ResponsiveRightColumn40 {
    width: calc(40% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveRightColumn381 {
    width: calc(38.19% - 8px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveRightColumn30 {
    width: calc(30% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveRightColumn25 {
    width: calc(25% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveRightColumn20 {
    width: calc(20% - 16px);
    padding: 0px;
    float: right;
    vertical-align: middle;
}

.ResponsiveColumn66 {
    /*    width: 66.666%;*/
    width: calc(((100% - 48px) / 3) * 2);
    padding: 0px;
    float: left;
    vertical-align: middle;
    margin: 0px auto;
}

.ResponsiveColumn33 {
    /*    width: 33.33%;*/
    width: calc((100%) / 3);
    padding: 0px;
    float: left;
    vertical-align: middle;
    margin: 0px auto;
}

.ResponsiveColumn50 {
    /*    width: 50%%;*/
    width: calc((100%) / 2);
    padding: 0px;
    float: left;
    vertical-align: middle;
    margin: 0px auto;
}

.Column33 {
    /*    width: 33.33%;*/
    width: calc((100% - 48px) / 3);
    padding: 0px;
    float: left;
    vertical-align: middle;
    margin: 0px auto;
}

.ResponsiveColumn33Centered {
    width: 228px;
    height: 190px;
    padding: 0px;
    margin: 8px;
    display: inline-block;
}

.ResponsiveColumn33Borders {
    width: 33%;
    float: left;
    vertical-align: middle;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: var(--md-sys-color-border-light);
    border-left-color: var(--md-sys-color-border-light);
    border-right-width: 1px;
    border-left-width: 1px;
}

.ResponsiveColumn25 {
    width: calc(25% - 16px);
    float: left;
    padding: 0px 8px 0px 8px;
    /*width: calc((100% - 32px) / 3);*/
}

.ResponsiveAsymetricalLeftColumn {
    width: 30%;
    float: Left;
    vertical-align: middle;
    margin-right: 16px;
    margin-left: 16px;
}

.ResponsiveAsymetricalMiddleColumn {
    width: calc(50% - 48px);
    float: Left;
    vertical-align: middle;
    margin-right: 16px;
}

.ResponsiveAsymetricalRightColumn {
    width: 20%;
    float: right;
    vertical-align: middle;
}

    .ResponsiveLeftColumn80 .Sheet,
    .ResponsiveLeftColumn70 .Sheet,
    .ResponsiveLeftColumn618 .Sheet,
    .ResponsiveLeftColumn60 .Sheet,
    .ResponsiveLeftColumn50 .Sheet,
    .ResponsiveLeftColumn50Picture .Sheet,
    .ResponsiveLeftColumn45 .Sheet,
    .ResponsiveLeftColumn40 .Sheet,
    .ResponsiveLeftColumn35 .Sheet,
    .ResponsiveLeftColumn30 .Sheet,
    .ResponsiveRightColumn70 .Sheet,
    .ResponsiveRightColumn60 .Sheet,
    .ResponsiveRightColumn50 .Sheet,
    .ResponsiveRightColumn50Picture .Sheet,
    .ResponsiveRightColumn40 .Sheet,
    .ResponsiveRightColumn381 .Sheet,
    .ResponsiveRightColumn30 .Sheet,
    .ResponsiveRightColumn20 .Sheet,
    .ResponsiveRightColumn50RightAlign .Sheet,
    .ResponsiveColumn33 .Sheet,
    .ResponsiveColumn33Centered .Sheet,
    .ResponsiveColumn25 .Sheet,
    .ResponsiveAsymetricalLeftColumn .Sheet,
    .ResponsiveAsymetricalMiddleColumn .Sheet,
    .ResponsiveAsymetricalRightColumn .Sheet {
        margin: 0px 0px 8px 0px;
    }

@media screen and (max-width: 800px) {
    .ResponsiveLeftColumn80,
    .ResponsiveLeftColumn75,
    .ResponsiveLeftColumn70,
    .ResponsiveLeftColumn618,
    .ResponsiveLeftColumn60,
    .ResponsiveLeftColumn50,
    .ResponsiveLeftColumn50Picture,
    .ResponsiveLeftColumn45,
    .ResponsiveLeftColumn40,
    .ResponsiveLeftColumn35,
    .ResponsiveLeftColumn30,
    .ResponsiveLeftColumn25,
    .ResponsiveRightColumn75,
    .ResponsiveRightColumn70,
    .ResponsiveRightColumn60,
    .ResponsiveRightColumn50,
    .ResponsiveRightColumn50Picture,
    .ResponsiveRightColumn40,
    .ResponsiveRightColumn381,
    .ResponsiveRightColumn30,
    .ResponsiveRightColumn25,
    .ResponsiveRightColumn20,
    .ResponsiveRightColumn50RightAlign,
    .ResponsiveColumn33,
    .ResponsiveColumn33Centered,
    .ResponsiveColumn25,
    .ResponsiveColumn50,
    .ResponsiveAsymetricalLeftColumn,
    .ResponsiveAsymetricalMiddleColumn,
    .ResponsiveAsymetricalRightColumn {
        width: 100%;
        float: none;
        clear: both;
        text-align: left;
        margin: 0px;
        padding: 0px;
    }

    /* ON A CARD, the 50/50 columns stay side by side. A card is narrow on every screen (280px on
       the Pipeline board on desktop, wider than that on a phone), and its columns hold short
       label/value pairs, so stacking them only makes every card taller. Pages and forms still
       stack at this width - this reaches only columns inside a material-card. */
    .material-card .ResponsiveLeftColumn50 {
        width: 50%;
        float: left;
        clear: none;
    }

    .material-card .ResponsiveRightColumn50 {
        width: calc(50% - 16px);
        float: right;
        clear: none;
    }

    .ResponsiveColumn33Borders {
        width: 100%;
        float: none;
        clear: both;
        padding: 0px;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-color: var(--md-sys-color-background-light);
        border-bottom-color: var(--md-sys-color-background-light);
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: var(--md-sys-color-background-light);
        border-left-color: var(--md-sys-color-background-light);
        border-right-width: 0px;
        border-left-width: 0px;
    }

    .container .ResponsiveColumn25 {
        text-align: center;
    }
}

/*#endregion Responsive Wrapper*/

.dropShadow {
    box-shadow: 0px 1px 5px var(--md-sys-color-outline);
}

/*#region Buttons*/

/*#region Core Buttons*/
.DisabledButton,
.cta-button,
.OutlinedExtendedFAB,
.ExtendedFAB,
.GreenExtendedFAB,
.RedExtendedFAB,
.BigLinkButton,
.BigGreenButton,
.BigWhiteButton,
.BigRedButton,
.BigYellowButton,
.BigLightBlueButton,
.BigDarkBlueButton,
.BigBlueButton,
.BlueButton100,
.WhiteButton100,
.WhiteOutlineButton,
.OutlineButton,
.OutlineButton100,
.BlackOutlineButton100,
.LinkButton,
.GreenButton,
.WhiteButton,
.RedButton,
.YellowButton,
.LightBlueButton,
.DarkBlueButton,
.BlueButton,
.SmallLinkButton,
.SmallGreenButton,
.SmallWhiteButton,
.SmallRedButton,
.SmallYellowButton,
.SmallLightBlueButton,
.SmallDarkBlueButton,
.SmallBlueButton,
.FilterExtendedFAB,
.LogoButton {
    border-width: 0px;
    display: inline-block;
    font: var(--md-sys-typescale-body-medium-font-family-name);
    text-align: center;
    cursor: pointer;
}


.WhiteOutlineButton,
.BigLinkButton,
.BigGreenButton,
.BigWhiteButton,
.BigRedButton,
.BigYellowButton,
.BigLightBlueButton,
.BigDarkBlueButton,
.BigBlueButton {
    padding: 16px 24px 16px 24px;
    margin: 12px 0px 12px 0px;
    border-radius: 48px;
    min-width: 48px;
    font-size: var(--md-sys-typescale-body-large-font-size);
    font-weight: var(--md-sys-typescale-body-large-font-weight);
    letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
    line-height: var(--md-sys-typescale-body-large-line-height);
}

.DisabledButton,
.OutlinedExtendedFAB,
.ExtendedFAB,
.GreenExtendedFAB,
.RedExtendedFAB,
.FilterExtendedFAB,
.LinkButton,
.GreenButton,
.OutlineButton,
.WhiteButton,
.RedButton,
.cta-button,
.YellowButton,
.LightBlueButton,
.DarkBlueButton,
.BlueButton {
    padding: 10px 16px 11px 16px;
    margin: 6px 4px 6px 4px;
    border-radius: 24px;
    min-width: 48px;
    font-size: var(--md-sys-typescale-body-medium-font-size);
    font-weight: var(--md-sys-typescale-body-medium-font-weight);
    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    line-height: var(--md-sys-typescale-body-medium-line-height);
}

    .DisabledButton .iconify,
    .LinkButton .iconify,
    .GreenButton .iconify,
    .WhiteButton .iconify,
    .RedButton .iconify,
    .cta-button .iconify,
    .YellowButton .iconify,
    .LightBlueButton .iconify,
    .DarkBlueButton .iconify,
    .BlueButton .iconify {
        padding: 0px 0px 0px 0px;
        margin: 4px 0px 0px 0px;
    }

.SmallLinkButton,
.SmallGreenButton,
.SmallWhiteButton,
.SmallRedButton,
.SmallYellowButton,
.SmallLightBlueButton,
.SmallDarkBlueButton,
.SmallBlueButton {
    padding: 8px 11px 8px 11px;
    margin: 6px 4px 6px 4px;
    border-radius: 24px;
    min-width: 48px;
    font-size: var(--md-sys-typescale-body-small-font-size);
    font-weight: var(--md-sys-typescale-body-small-font-weight);
    letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
    line-height: var(--md-sys-typescale-body-small-line-height);
}

.FlagImageButton {
    padding: 0px;
    margin: 0px;
    display: inline-block;
    border-radius: 16px;
    height: 32px;
    cursor: pointer;
    box-shadow: 0px 1px 3px #878787;
    border: 0px Solid #878787;
}

.WhiteButton100,
.BlueButton100,
.BlackOutlineButton100,
.OutlineButton100 {
    padding: 16px 24px 16px 24px;
    margin: 0px auto 12px auto;
    border-radius: 48px;
    width: 100%;
    border-width: 0px;
    font-size: var(--md-sys-typescale-headline-small-font-size);
    font-weight: var(--md-sys-typescale-headline-small-font-weight);
    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    cursor: pointer;
    /* Add this to ensure consistent sizing */
    box-sizing: border-box;
    display: block; /* block (not inline-block) so <button> and <a> compute width: 100% identically */
    text-decoration: none; /* Removes underline from anchors */
    text-align: center; /* Centers text in anchor elements */
}

.LogoButton {
    padding: 16px 24px 16px 24px;
    margin: 8px auto 8px auto;
    border-radius: 48px;
    width: 100%;
    border-width: 3px;
    font-size: var(--md-sys-typescale-headline-small-font-size);
    font-weight: var(--md-sys-typescale-headline-small-font-weight);
    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    cursor: pointer;
    /* Add this to ensure consistent sizing */
    box-sizing: border-box;
    display: inline-block; /* Also ensures consistent display behavior */
    text-decoration: none; /* Removes underline from anchors */
    text-align: center; /* Centers text in anchor elements */
    background-color: none;
}

.LogoButtonText {
    color: var(--md-sys-color-primary);
    font-weight: 900;
}

.LogoButton img {
}

.OutlineButton100Icon {
    margin: -6px 0px -12px 0px;
}

.OutlineButton100IconImage {
    float: left;
    margin: -2px 0px 0px -8px;
}

.pricing-card button:disabled,
.DisabledButton {
    box-shadow: 0 1px 3px rgba(0,0,0,0.0), 0 1px 2px rgba(0,0,0,0.0);
    background-color: rgba(0,0,0,0.1);
    color: var(--md-sys-color-outline);
    border: 1px solid rgba(0,0,0,0.2);
}

    .pricing-card button:disabled:hover,
    .DisabledButton:hover {
        background-color: rgba(0,0,0,0.1);
        color: var(--md-sys-color-outline);
    }

/* Apply disabled styling to all buttons when disabled */
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
.BlueImageButton:disabled,
.SmallBlueButton:disabled,
.BlueButton:disabled,
.BigBlueButton:disabled,
.BlueButton100:disabled,
.SmallDarkBlueButton:disabled,
.DarkBlueButton:disabled,
.BigDarkBlueButton:disabled,
.SmallLightBlueButton:disabled,
.LightBlueButton:disabled,
.BigLightBlueButton:disabled,
.SmallLinkButton:disabled,
.LinkButton:disabled,
.BigLinkButton:disabled,
.InlineLinkButton:disabled,
.SmallGreenButton:disabled,
.GreenButton:disabled,
.BigGreenButton:disabled,
.SmallRedButton:disabled,
.RedButton:disabled,
.BigRedButton:disabled,
.SmallWhiteButton:disabled,
.WhiteButton:disabled,
.BigWhiteButton:disabled,
.SmallYellowButton:disabled,
.YellowButton:disabled,
.BigYellowButton:disabled,
.OutlineButton:disabled,
.OutlineButton100:disabled,
.BlackOutlineButton100:disabled,
.WhiteOutlineButton:disabled,
.FloatingActionButton:disabled,
.ExtendedFAB:disabled,
.GreenExtendedFAB:disabled,
.RedExtendedFAB:disabled,
.OutlinedExtendedFAB:disabled,
.FilterExtendedFAB:disabled {
    box-shadow: 0 1px 3px rgba(0,0,0,0.0), 0 1px 2px rgba(0,0,0,0.0) !important;
    background-color: rgba(0,0,0,0.1) !important;
    color: var(--md-sys-color-outline) !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    cursor: default !important;
}

    /* Ensure hover effects are also disabled */
    button:disabled:hover,
    input[type="button"]:disabled:hover,
    input[type="submit"]:disabled:hover,
    .BlueImageButton:disabled:hover,
    .SmallBlueButton:disabled:hover,
    .BlueButton:disabled:hover,
    .BigBlueButton:disabled:hover,
    .BlueButton100:disabled:hover,
    .SmallDarkBlueButton:disabled:hover,
    .DarkBlueButton:disabled:hover,
    .BigDarkBlueButton:disabled:hover,
    .SmallLightBlueButton:disabled:hover,
    .LightBlueButton:disabled:hover,
    .BigLightBlueButton:disabled:hover,
    .SmallLinkButton:disabled:hover,
    .LinkButton:disabled:hover,
    .BigLinkButton:disabled:hover,
    .InlineLinkButton:disabled:hover,
    .SmallGreenButton:disabled:hover,
    .GreenButton:disabled:hover,
    .BigGreenButton:disabled:hover,
    .SmallRedButton:disabled:hover,
    .RedButton:disabled:hover,
    .BigRedButton:disabled:hover,
    .SmallWhiteButton:disabled:hover,
    .WhiteButton:disabled:hover,
    .BigWhiteButton:disabled:hover,
    .SmallYellowButton:disabled:hover,
    .YellowButton:disabled:hover,
    .BigYellowButton:disabled:hover,
    .OutlineButton:disabled:hover,
    .OutlineButton100:disabled:hover,
    .BlackOutlineButton100:disabled:hover,
    .WhiteOutlineButton:disabled:hover,
    .FloatingActionButton:disabled:hover,
    .ExtendedFAB:disabled:hover,
    .GreenExtendedFAB:disabled:hover,
    .RedExtendedFAB:disabled:hover,
    .OutlinedExtendedFAB:disabled:hover,
    .FilterExtendedFAB:disabled:hover {
        background-color: rgba(0,0,0,0.1) !important;
        color: var(--md-sys-color-outline) !important;
    }

/*#endregion Core Buttons*/

/*#region Blue Buttons*/
.pricing-card button,
.BlueImageButton,
.SmallBlueButton,
.BlueButton,
.BigBlueButton,
.BlueButton100 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

    .pricing-card button:hover,
    .BlueImageButton:hover,
    .SmallBlueButton:hover,
    .BlueButton:hover,
    .BigBlueButton:hover,
    .BlueButton100:hover {
        text-decoration: none;
        background-color: var(--md-ref-palette-primary30);
        color: var(--md-sys-color-on-primary);
    }

.material_link_button_container .BlueButton,
.material_link_button_container .DisabledButton,
.material_link_button_container .ExtendedImageButton {
    float: right;
}

.material_link_button_container .ExtendedFAB {
    float: left;
}

.material_link_button_container .header-vote-controls {
    float: left;
    margin: 5px 0px 0px 0px;
}

/*#endregion Blue Buttons*/

/*#region Dark Blue Buttons*/

.SmallDarkBlueButton,
.DarkBlueButton,
.BigDarkBlueButton {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: var(--md-sys-color-dark-blue);
    color: var(--md-sys-color-surface);
}

    .SmallDarkBlueButton:hover,
    .DarkBlueButton:hover,
    .BigDarkBlueButton:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-dark-blue-hover);
        color: var(--md-sys-color-surface);
    }

/*#endregion Dark Blue Buttons*/

/*#region Light Blue Buttons*/

.SmallLightBlueButton,
.LightBlueButton,
.BigLightBlueButton {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: var(--md-sys-color-light-blue);
    color: var(--md-sys-color-on-surface);
}

    .SmallLightBlueButton:hover,
    .BlueLightButton:hover,
    .BigLightBlueButton:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-light-blue-hover);
        color: var(--md-sys-color-on-surface);
    }

/*#endregion Light Blue Buttons*/

/*#region Link Buttons*/

.InlineLinkButton {
    display: inline-block;
    color: var(--md-sys-color-primary);
    border: 0px solid transparent;
    border-radius: 4px;
    background-color: transparent;
}

    .SmallLinkButton,
    .LinkButton,
    .BigLinkButton {
        background-color: rgba(0,0,0,0.0);
        color: var(--md-sys-color-primary);
    }

    .SmallLinkButton:hover,
    .LinkButton:hover,
    .BigLinkButton:hover,
    .InlineLinkButton:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-transparent-shading10);
        color: var(--md-sys-color-primary);
    }

/*#endregion Link Buttons*/

/*#region Green Buttons*/

.SmallGreenButton,
.GreenButton,
.BigGreenButton {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: var(--md-sys-color-green);
    color: var(--md-sys-color-surface);
}

    .SmallGreenButton:hover,
    .GreenButton:hover,
    .BigGreenButton:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-green);
        color: var(--md-sys-color-surface);
    }

/*#endregion Green Buttons*/

/*#region Red Buttons*/

.SmallRedButton,
.RedButton,
.BigRedButton {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: var(--md-sys-color-red);
    color: var(--md-sys-color-surface);
}

    .SmallRedButton:hover,
    .RedButton:hover,
    .BigRedButton:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-red-hover);
        color: var(--md-sys-color-surface);
    }

/*#endregion Red Buttons*/

/*#region White Buttons*/

.WhiteButton100,
.SmallWhiteButton,
.WhiteButton,
.BigWhiteButton {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: var(--md-sys-color-white);
    color: var(--md-sys-color-on-surface);
}

    .WhiteButton100:hover,
    .SmallWhiteButton:hover,
    .WhiteButton:hover,
    .BigWhiteButton:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-white-hover);
        color: var(--md-sys-color-on-surface);
    }

/*#endregion White Buttons*/

/*#region Yellow Buttons*/

.SmallYellowButton,
.YellowButton,
.BigYellowButton {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: var(--md-sys-color-yellow);
    color: var(--md-sys-color-on-surface);
}

    .SmallYellowButton:hover,
    .YellowButton:hover,
    .BigYellowButton:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-yellow-hover);
        color: var(--md-sys-color-on-surface);
    }

/*#endregion Yellow Buttons*/

/*#region Outline Buttons*/

.LogoButton,
.OutlineButton,
.OutlineButton100 {
    background-color: none;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-primary);
}

    .LogoButton:hover {
        text-decoration: none;
        background-color: rgba(0,0,0,.1);
        color: var(--md-sys-color-surface);
    }

    .OutlineButton:hover,
    .OutlineButton100:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-surface);
    }

.BlackOutlineButton100 {
    background-color: none;
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-on-surface);
}

    .BlackOutlineButton100:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-on-surface);
        color: var(--md-sys-color-surface);
    }

.WhiteOutlineButton {
    background-color: none;
    color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-surface);
}

    .WhiteOutlineButton:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
    }

/*#endregion Yellow Buttons*/

/*#region Image Buttons*/

/*.BlueImageButton {
    padding: 12px;
    margin: 0px;
    display: inline-block;
    -webkit-border-top-left-radius: 24px;
    -moz-border-radius-topleft: 24px;
    border-top-left-radius: 24px;
    -webkit-border-top-right-radius: 24px;
    -moz-border-radius-topright: 24px;
    border-top-right-radius: 24px;
    -webkit-border-bottom-right-radius: 24px;
    -moz-border-radius-bottomright: 24px;
    border-bottom-right-radius: 24px;
    -webkit-border-bottom-left-radius: 24px;
    -moz-border-radius-bottomleft: 24px;
    border-bottom-left-radius: 24px;
    height: 24px;
    width: 24px;
    background-color: var(--md-sys-color-primary-light);
    color: #ffffff;
    box-shadow: 0px 2px 5px #878787;
}

.BlueImageButtonImage {
    height: 24px;
    width: 24px;
    margin: auto;
    padding: 0px;
}*/

.BlueImageButton,
.WhiteImageButton,
.DarkImageButton,
.ImageButtonActive,
.ImageButton {
    padding: 10px;
    margin: 0px;
    display: inline-block;
    border-radius: 36px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    border-color: transparent;
}

.ImageButtonActive {
    color: var(--md-sys-color-on-primary-container);
}

.DarkImageButton {
    color: var(--md-sys-color-on-surface);
}

.WhiteImageButton {
    color: var(--md-sys-color-surface);
}

.ExtendedImageButton {
    padding: 8px 0px 8px 0px;
    margin: 0px;
    display: inline-block;
    border-radius: 24px;
    background-color: none;
    color: var(--md-sys-color-primary);
    font: Roboto;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.masterfooter .ExtendedImageButton {
    border-width: 0px;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant)
}

/* Plan-locked variant of the div-based buttons.

   .DisabledButton alone cannot do this job: it sets its colours at line 1833, while
   .ExtendedImageButton sets colour here at 2267 and .ExtendedFAB sets its background at 2414 —
   both later in the file at the same specificity, so the plain class loses. Two-class specificity
   (0,2,0) wins regardless of file order.

   The control stays clickable on purpose. Clicking a locked button fires a ToastrWarning that
   explains what it would do and how to get it — a greyed control that simply does nothing tells
   the user nothing. */
.ExtendedImageButton.DisabledButton,
.ExtendedFAB.DisabledButton,
.OutlinedExtendedFAB.DisabledButton,
.BlueButton.DisabledButton {
    box-shadow: 0 1px 3px rgba(0,0,0,0.0), 0 1px 2px rgba(0,0,0,0.0);
    background-color: rgba(0,0,0,0.1);
    color: var(--md-sys-color-outline);
    border: 1px solid rgba(0,0,0,0.2);
}

    /* The icon inherits currentColor, but the hover states on the base classes would otherwise
       restore the live colours on mouseover and make a locked control look enabled. */
    .ExtendedImageButton.DisabledButton:hover,
    .ExtendedFAB.DisabledButton:hover,
    .OutlinedExtendedFAB.DisabledButton:hover,
    .BlueButton.DisabledButton:hover {
        background-color: rgba(0,0,0,0.1);
        color: var(--md-sys-color-outline);
    }

.ExtendedImageButtonImage {
    height: 24px;
    width: 24px;
    margin: auto;
    padding: 0px;
    line-height: 24px;
}

.ExtendedImageButtonText {
    float: left;
    font-size: 8px;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    padding: 0px;
    line-height: 8px;
}

.HiddenImageButton {
    display: none;
}

.Sheet:hover .HiddenImageButton {
    padding: 12px;
    margin: 0px;
    display: inline-block;
    border-radius: 24px;
    height: 24px;
    width: 24px;
    float: right;
}

.BigImageButton {
    padding: 6px;
    margin: 0px;
    display: inline-block;
    border-radius: 24px;
    height: 36px;
    width: 36px;
}

.GridImageButton {
    padding: 4px;
    margin: -12px;
    display: inline-block;
    border-radius: 24px;
    height: 24px;
    width: 24px;
}

    .ImageButtonActive:hover,
    .ExtendedImageButton:hover,
    .HiddenImageButton:hover,
    .BigImageButton:hover,
    .GridImageButton:hover,
    .WhiteImageButton:hover,
    .DarkImageButton:hover,
    .ImageButton:hover {
        text-decoration: none;
        background-color: rgba(0,0,0,.10);
    }

.CalendarImageButton {
    padding: 0px;
    margin: 0px;
    border-radius: 24px;
    height: 40px;
    width: 40px;
}

    .CalendarImageButton:hover {
        text-decoration: none;
        background-color: rgba(0,0,0,.25);
    }

.masterheader .ImageButton {
    color: var(--md-sys-color-primary)
}

.masterheader .ImageButtonActive {
    color: var(--md-sys-color-dark-blue)
}

/*#endregion Image Buttons*/

/*#region Floating Action Buttons */

.FloatingActionButton {
    padding: 8px;
    margin: 0px;
    display: inline-block;
    border-radius: 50%;
    text-transform: uppercase;
    width: 24px;
    height: 24px;
    font: Roboto;
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

    .FloatingActionButton:hover {
        background-color: var(--md-ref-palette-primary30);
        color: var(--md-sys-color-on-primary);
    }

.MaterialTable td .FloatingActionButton {
    float: right;
}

.PageTitleButtonContainer .FloatingActionButton {
    margin: 4px 0px 0px 0px;
    float: right;
}

.page_section_title_button_container .FloatingActionButton {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    margin: -42px 0px 0px 0px;
    box-shadow: none;
}

.page_section_title_button_container .FloatingActionButton:hover {
    background-color: var(--md-sys-color-surface-variant);
}

    .GreenExtendedFAB {
        background-color: var(--md-sys-color-green);
        color: var(--md-sys-color-on-primary);
    }

    .RedExtendedFAB {
        background-color: var(--md-sys-color-red);
        color: var(--md-sys-color-on-primary);
    }

    .ExtendedFAB {
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
    }

        .ExtendedFAB:hover {
            background-color: var(--md-ref-palette-primary30);
            color: var(--md-sys-color-on-primary);
        }

    .GreenExtendedFAB:hover {
        background-color: var(--md-sys-color-green-hover);
        color: var(--md-sys-color-on-primary);
    }

    .RedExtendedFAB:hover {
        background-color: var(--md-sys-color-red-hover);
        color: var(--md-sys-color-on-primary);
    }

    .ExtendedFABImage {
        height: 24px;
        width: 24px;
        float: left;
        padding: 0px;
        margin: 0px 4px 0px -1px;
    }

    .ExtendedFABText {
        float: left;
        font-size: 14px;
        letter-spacing: -0.25px;
        font-weight: 600;
        padding: 0px;
        margin: 3px 4px 0px 0px;
    }



    .OutlinedExtendedFAB {
        background-color: transparent;
        color: var(--md-sys-color-primary);
        border: 1px solid var(--md-sys-color-primary);
    }

        .OutlinedExtendedFAB:hover {
            background-color: var(--md-sys-color-primary);
            color: var(--md-sys-color-on-primary);
        }

    .hidden-filter-button-container {
        float: right;
    }

    .FilterExtendedFAB {
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
    }

        .FilterExtendedFAB:hover {
            background-color: var(--md-sys-color-surface-variant);
        }
    /*#endregion Region*/
    /*#region ButtonGroup */
    .ButtonGroup {
        margin: 0px;
        padding: 0px;
        text-align: center;
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid var(--md-sys-color-secondary);
    }

        .ButtonGroup .ButtonGroupActiveButton,
        .ButtonGroup .ButtonGroupButton {
            background-color: var(--md-sys-color-secondary-container);
            border-top: none;
            border-bottom: none;
            border-right: none;
            border-left: 1px solid var(--md-sys-color-secondary);
            color: var(--md-sys-color-on-secondary-container);
            padding: 10px 24px; /* Some padding */
            cursor: pointer; /* Pointer/hand icon */
            float: left; /* Float the buttons side by side */
            font-size: var(--md-sys-typescale-body-medium-font-size);
            font-weight: var(--md-sys-typescale-body-medium-font-weight);
            letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
            line-height: var(--md-sys-typescale-body-medium-line-height);
        }

        .ButtonGroup .ButtonGroupActiveButton {
            background-color: var(--md-sys-color-secondary);
            color: var(--md-sys-color-on-secondary);
        }

        .ButtonGroup button:first-child {
            border-left: none; /* Prevent double borders */
        }
        /* Clear floats (clearfix hack) */
        .ButtonGroup:after {
            content: "";
            clear: both;
            display: table;
        }
        /* Add a background color on hover */
        .ButtonGroup button:hover {
            background-color: var(--md-ref-palette-secondary80);
        }

        .ButtonGroup .ButtonGroupActiveButton:hover {
            background-color: var(--md-ref-palette-secondary30);
            color: var(--md-sys-color-on-secondary);
        }
    /*#region SmallButtonGroup */

    .SmallButtonGroup {
        padding: 0px;
        text-align: center;
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid var(--md-sys-color-secondary);
    }

        .SmallButtonGroup .ButtonGroupActiveButton,
        .SmallButtonGroup .ButtonGroupButton {
            background-color: var(--md-sys-color-secondary-container);
            border-top: none;
            border-bottom: none;
            border-right: none;
            border-left: 1px solid var(--md-sys-color-secondary);
            color: var(--md-sys-color-on-secondary-container);
            padding: 11px 16px; /* Some padding */
            cursor: pointer; /* Pointer/hand icon */
            float: left; /* Float the buttons side by side */
            font-size: var(--md-sys-typescale-body-medium-font-size);
            font-weight: var(--md-sys-typescale-body-medium-font-weight);
            letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
            line-height: var(--md-sys-typescale-body-medium-line-height);
        }

        .SmallButtonGroup .ButtonGroupActiveButton {
            background-color: var(--md-sys-color-secondary);
            color: var(--md-sys-color-on-secondary);
        }

        .SmallButtonGroup button:first-child {
            border-left: none; /* Prevent double borders */
        }
        /* Clear floats (clearfix hack) */
        .SmallButtonGroup:after {
            content: "";
            clear: both;
            display: table;
        }
        /* Add a background color on hover */
        .SmallButtonGroup button:hover {
            background-color: var(--md-ref-palette-secondary80);
        }

        .SmallButtonGroup .ButtonGroupActiveButton:hover {
            background-color: var(--md-ref-palette-secondary30);
            color: var(--md-sys-color-on-secondary);
        }
    /*#endregion SmallButtonGroup */
    /*#region ButtonGroupWithIcons */

    .ButtonGroupWithIcons {
        display: flex;
        width: 100%;
        gap: 0px; /* Small gap between buttons */
        border: 1px solid var(--md-sys-color-secondary);
        border-radius: 24px;
        overflow: hidden; /* Ensures child buttons respect container's border radius */
        margin: 0px;
        padding: 0px;
        text-align: center;
    }

        .ButtonGroupWithIcons button {
            flex: 1; /* Makes all buttons take equal space */
            padding: 8px 0px 8px 0px;
            border-top: none;
            border-bottom: none;
            border-right: none;
            border-left: 1px solid var(--md-sys-color-secondary);
            background-color: var(--md-sys-color-secondary-container);
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 0; /* Allows buttons to shrink if needed */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* Handles long text gracefully */
            color: var(--md-sys-color-on-secondary-container);
            font-size: var(--md-sys-typescale-body-medium-font-size);
            font-weight: var(--md-sys-typescale-body-medium-font-weight);
            letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
            line-height: var(--md-sys-typescale-body-medium-line-height);
            text-align: center;
        }

            .ButtonGroupWithIcons button:first-child {
                border-left: none; /* Prevent double borders */
            }

    .ButtonGroupButtonWithIconsText {
        font-size: var(--md-sys-typescale-body-medium-font-size);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        padding: 0px 0px 0px 0px;
    }

    .ButtonGroupButtonWithIconsImage {
        height: 24px;
        width: 24px;
        padding: 0px 0px 0px 0px;
    }

    .ButtonGroupButtonWithIcons:hover {
        background-color: var(--md-ref-palette-secondary80);
    }

    .ButtonGroupActiveButtonWithIcons {
        background-color: var(--md-sys-color-secondary) !important; /* Primary blue color */
        color: var(--md-sys-color-on-secondary) !important;
    }
    /* Optional: Add focus styles for accessibility */
    /*.ButtonGroupWithIcons button:focus {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    z-index: 1;*/ /* Ensures focus outline is visible */
    /*}*/
    /*#endregion ButtonGroupWithIcons */
    /*#endregion ButtonGroup*/
    /*#region Button Containers*/

    .RightButtonContainer {
        padding: 24px 0px 0px 0px;
        margin: 0px;
        text-align: right;
    }

    .CenterButtonContainer {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px -4px;
        text-align: center;
    }

    .LeftButtonContainer {
        padding: 24px 0px 0px 0px;
        margin: 0px;
        text-align: left;
    }

    .WizardButtonContainer {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        text-align: center;
        position: fixed;
        bottom: 50px;
        left: 0;
        right: 0;
        height: 48px;
        background-color: var(--md-sys-color-surface);
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        display: table;
        table-layout: fixed;
        z-index: 1000000;
        box-shadow: 16px 16px 16px #212121;
    }

    .PageTitleButtonContainer {
        float: right;
        padding: 8px 0px 0px 0px;
        margin: -4px 0px -16px 0px;
    }

    .LeftPageTitleButtonContainer {
        float: left;
        padding: 0px 0px 0px 0px;
        margin: -9px 16px -16px -16px;
    }

        .LeftPageTitleButtonContainer .ImageButton {
            color: var(--md-sys-color-surface);
        }

            .LeftPageTitleButtonContainer .ImageButton:hover {
                color: var(--md-sys-color-primary);
                background-color: rgba(0,0,0,0.1);
            }

    .SearchButtonContainer {
        padding: 0px;
        margin: 0px;
    }

    .SmallButtonGroupContainer {
        padding: 6px 8px 0px 0px;
        margin: 0px 0px 0px 0px;
        float: left
    }

        .SmallButtonGroupContainer .SmallButtonGroup,
        .SearchButtonContainer .SmallButtonGroup {
            padding: 0px;
            margin: 0px 0px 8px 0px;
            float: left;
        }

    .SearchButtonContainer .FilterExtendedFAB {
        margin: 0px 0px 8px 8px;
        float: right;
    }
    /* Base rules for wide-table horizontal scrolling — applies at all viewport widths.
   Previously these lived only inside the @media (max-width: 1200px) block below,
   which meant wide tables overflowed the page on desktop. */
    .MaterialTableContainer {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        /* CSS containment — tells the browser to compute this element's intrinsic
       width from its parent, NOT from its contents. Without this, an unconstrained
       parent (e.g., a Sheet whose width is auto) inherits the table's content
       width upward through the layout tree, causing the whole sheet to bleed
       past the viewport edge. Containment short-circuits that chain. */
        contain: inline-size;
       /* border-radius: 20px;*/
        scrollbar-width: thin; /* Firefox */
        background-color: var(--md-sys-color-surface);
        scrollbar-color: var(--md-sys-color-primary) var(--md-sys-color-primary-container); /* Firefox */
    }

        .MaterialTableContainer .MaterialTable {
            /* width: auto lets the table size to its content. Combined with
       MaterialTableContainer's overflow-x: auto + max-width: 100%, this
       gives the horizontal scrollbar when the table is wider than the page,
       and fits within the container when not. */
            width: auto;
            min-width: 100%;
            border-collapse: collapse;
        }

.workRequirementText {
}

    .workRequirementText .primary-text {
        font-weight: 600;
        font-size: var(--md-sys-typescale-label-large-font-size);
        line-height: var(--md-sys-typescale-label-large-line-height);
        letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
    }

    .workRequirementText .secondary-text {
        font-size: var(--md-sys-typescale-label-medium-font-size);
        line-height: var(--md-sys-typescale-label-medium-line-height);
        letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
    }

@media only screen and (max-width: 1200px) {
    .PageTitleButtonContainer {
        margin: -8px 0px -16px 0px;
    }

    .LeftPageTitleButtonContainer {
        margin: -4px 16px -16px -16px;
    }
}

    .SheetTitleButtonContainer {
        float: right;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px -8px 0px;
    }
        /*@media only screen and (max-width: 500px) {
    .SheetTitleButtonContainer {
        width: 100%;
        margin: 0px;
    }
    
}*/

        .SheetTitleButtonContainer .ImageButton {
            float: right;
            margin: -8px 0px 0px 8px;
        }

        .SheetTitleButtonContainer .BlueButton,
        .SheetTitleButtonContainer .WhiteButton {
            float: right;
            margin: -4px 0px 0px 8px;
        }

        .SheetTitleButtonContainer .OutlinedExtendedFAB,
        .SheetTitleButtonContainer .ExtendedFAB {
            float: right;
            margin: -6px 0px 0px 8px;
        }

        .SheetTitleButtonContainer .FloatingActionButton {
            margin: -4px 0px 0px 8px;
            float: right;
        }

        .SheetTitleButtonContainer .FilterExtendedFAB {
            margin: -6px 4px 0px 0px;
            float: right;
        }

/* PHONES (Brad, 2026-10-07) — ExpandingSheet title buttons get their own full-width row under the
   title and wrap evenly from the right. Targets only the container holding buttons, so the chevron's
   SheetTitleButtonContainer is untouched. Nothing above 840px changes. */
@media only screen and (max-width: 840px) {
    .SheetTitleButtonContainer:has(.ExtendedFAB, .OutlinedExtendedFAB, .FilterExtendedFAB) {
        float: none;
        width: 100%;
        margin: 8px 0px 0px 0px;
        display: flex;
        flex-wrap: wrap;
        /* row-reverse: markup is written for float: right (first = rightmost), so reversing
           keeps the desktop order - Filter | Outlined | Blue - on phones too. With row-reverse,
           flex-start is the right edge. */
        flex-direction: row-reverse;
        justify-content: flex-start;
        gap: 8px;
    }

        .SheetTitleButtonContainer:has(.ExtendedFAB, .OutlinedExtendedFAB, .FilterExtendedFAB) .ExtendedFAB,
        .SheetTitleButtonContainer:has(.ExtendedFAB, .OutlinedExtendedFAB, .FilterExtendedFAB) .OutlinedExtendedFAB,
        .SheetTitleButtonContainer:has(.ExtendedFAB, .OutlinedExtendedFAB, .FilterExtendedFAB) .FilterExtendedFAB {
            float: none;
            margin: 0px;
        }
}


    .BottomLeftFloatingActionButtonContainer {
        bottom: 0;
        position: absolute;
        margin: 1em;
        right: 0px;
    }

    .TopRightCornerFloatingActionButtonContainer {
        float: right;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    /*#endregion Button Containers*/
    /*#region Tooltip*/

    .tooltip-container {
        position: relative;
        display: inline-block;
        cursor: pointer;
        vertical-align: middle; /* Ensure the container aligns with the text */
    }


    .tooltip-text {
        visibility: hidden;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 10001; /* High z-index to ensure it appears above everything else */
        top: 125%; /* Position the tooltip below the icon */
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s, visibility 0s 0.3s; /* Delayed visibility transition to align with opacity */
        width: max-content;
        max-width: 300px; /* Sets the maximum width of the tooltip */
        white-space: normal; /* Allows text to wrap within the tooltip */
        word-wrap: break-word; /* Ensures long words break properly within the tooltip */
        border-radius: 12px;
        background-color: var(--md-sys-color-secondary);
        color: var(--md-sys-color-on-secondary);
        font-weight: var(--md-sys-typescale-body-small-font-weight);
        font-size: var(--md-sys-typescale-body-small-font-size);
        line-height: var(--md-sys-typescale-body-small-line-height);
        letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
    }
    /* Tooltip arrow pointing up */
    .tooltip-container .tooltip-text::before {
        content: '';
        position: absolute;
        bottom: 100%; /* Position the arrow at the top of the tooltip */
        left: 50%;
        transform: translateX(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent var(--md-sys-color-secondary) transparent; /* Arrow pointing up */
    }

    .tooltip-container:hover .tooltip-text,
    .tooltip-container:active .tooltip-text {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s; /* Ensures the tooltip is immediately visible when activated */
    }

    .tooltip-container .iconify {
        vertical-align: baseline; /* Aligns the icon with the baseline of the text */
        margin-left: 8px; /* Adds 8 pixels of space before the icon */
    }
    /* Material Design Tip Component */
    .material-tip {
        display: flex;
        align-items: flex-start;
        background-color: var(--md-sys-color-primary-container); /* Light indigo, you can change to match your palette */
        border-radius: 16px;
        padding: 16px;
        margin: 8px 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        border-left: 4px solid var(--md-sys-color-primary); /* Indigo, primary color accent */
    }

    .material-tip-icon {
        color: var(--md-sys-color-on-primary-container); /* Matching the border */
        margin-right: 16px;
        flex-shrink: 0;
    }

    .material-tip-content {
        flex: 1;
    }

    .material-tip-title {
        font-weight: 500;
        margin-bottom: 8px;
        color: var(--md-sys-color-on-primary-container);
    }

    .material-tip-text {
        color: var(--md-sys-color-on-primary-container);
        font-size: 14px;
        line-height: 1.5;
    }

    .error-message {
        display: flex;
        align-items: flex-start;
        color: var(--md-sys-color-on-error-red);
        background-color: var(--md-sys-color-error-red);
        border-radius: 16px;
        padding: 16px;
        margin: 8px 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        border-left: 4px solid var(--md-sys-color-on-error-red); /* Indigo, primary color accent */
    }

    .error-message-icon {
        color: var(--md-sys-color-on-error-red); /* Matching the border */
        margin-right: 16px;
        flex-shrink: 0;
    }

    .error-message-content {
        flex: 1;
    }

    .error-message-title {
        font-weight: 500;
        margin-bottom: 8px;
        color: var(--md-sys-color-on-error-red);
    }

    .error-message-text {
        color: var(--md-sys-color-on-error-red);
        font-size: 14px;
        line-height: 1.5;
    }

    /* Links inside an error (e.g. SignUp's "forgot password") took the default dark link colour,
       unreadable on red (Brad, 2026-10-07). Same colour as the text; the underline marks it. */
    .error-message-text a {
        color: var(--md-sys-color-on-error-red);
        text-decoration: underline;
        font-weight: 500;
    }

    .warning-message {
        display: flex;
        align-items: flex-start;
        background-color: var(--md-sys-color-warning-yellow);
        color: var(--md-sys-color-on-surface);
        border-radius: 16px;
        padding: 16px;
        margin: 8px 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        border-left: 4px solid var(--md-sys-color-primary); /* Indigo, primary color accent */
    }

    .warning-message-icon {
        color: var(--md-sys-color-on-surface); /* Matching the border */
        margin-right: 16px;
        flex-shrink: 0;
    }

    .warning-message-content {
        flex: 1;
    }

    .warning-message-title {
        font-weight: 500;
        margin-bottom: 8px;
        color: var(--md-sys-color-on-surface);
    }

    .warning-message-text {
        color: var(--md-sys-color-on-surface);
        font-size: 14px;
        line-height: 1.5;
    }
    /*#endregion Tooltip*/

    @keyframes glowing {
        0% {
            box-shadow: 0 0 0px var(--md-ref-palette-neutral-variant100);
        }

        50% {
            box-shadow: 0 0 20px var(--md-ref-palette-neutral-variant50);
        }

        100% {
            box-shadow: 0 0 0px var(--md-ref-palette-neutral-variant0);
        }
    }

    .GlowingButton {
        animation: glowing 1300ms infinite;
    }
    /*#endregion Buttons*/
    /*#region Chips*/

    .chip-container {
        padding: 0px;
        margin: 0px;
    }

        .chip-container .ImageButton {
            margin: -10px 0px -6px 0px;
            position: relative;
            display: inline-block;
        }

    .filter-chip-container {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        text-align: left;
    }

    .chip-search-criteria,
    .chip-white,
    .chip-blue,
    .chip-red,
    .chip-light-blue,
    .chip-green,
    .chip-yellow,
    .chip-gray,
    .chip-button,
    .chip {
        position: relative;
        display: inline-block;
        padding: 8px 12px 6px 12px;
        /*    font-size: 12px;
    font-weight: bold;*/
        font-weight: var(--md-sys-typescale-label-large-font-weight);
        font-size: var(--md-sys-typescale-label-large-font-size);
        line-height: var(--md-sys-typescale-label-large-line-height );
        letter-spacing: var(--md-sys-typescale-label-large-letter-spacing );
        border-radius: 8px;
        color: var(--md-sys-color-on-background);
        background-color: var(--md-sys-color-surface-variant);
        margin: 0px 8px 0px 0px;
        cursor: pointer;
        text-align: center;
        overflow: hidden;
    }

    .chip-button {
        color: var(--md-sys-color-on-secondary);
        background-color: var(--md-sys-color-secondary);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }

        .chip-button:hover {
            background-color: var(--md-ref-palette-secondary30);
        }

    .chip-white {
        color: var(--md-sys-color-on-background);
        background-color: var(--md-sys-color-background);
        border: 1px solid var(--md-sys-color-border);
    }

    .chip-red {
        color: var(--md-sys-color-background);
        background-color: var(--md-sys-color-error);
        position: relative;
    }

    .chip-green {
        color: var(--md-sys-color-background);
        background-color: green;
        position: relative;
    }

    .chip-yellow {
        color: var(--md-sys-color-on-background);
        background-color: var(--md-sys-color-tertiary-container);
        position: relative;
    }

    .chip-blue {
        color: var(--md-sys-color-on-secondary);
        background-color: var(--md-sys-color-secondary);
    }


    .chip-light-blue {
        color: var(--md-sys-color-on-primary-container);
        background-color: var(--md-sys-color-primary-container);
    }

    .chip-gray {
        color: var(--md-sys-color-on-surface-dim);
        background-color: var(--md-sys-color-surface-dim);
    }

    .chip-text {
        /*        color: var(--md-sys-color-background);
        background-color: var(--md-sys-color-on-background);*/
    }

    .chip-thumbnail {
        float: Left;
        margin: 4px 10px 0 -12px;
        padding: 0px;
        height: 28px;
        width: 28px;
        border-radius: 50%;
        background-color: var(--md-sys-color-background)
    }

    .chip-search-criteria {
        padding: 6px 30px 6px 12px;
        margin: 8px 8px -8px 0px;
        background-color: var(--md-ref-palette-neutral-variant80)
    }

        .chip-search-criteria:hover {
            background-color: var(--md-ref-palette-neutral-variant70)
        }

    .status-container {
        padding: 12px 0px 0px 12px;
        float: right;
    }

    .filter-chip-container .LinkButton {
        position: absolute;
        padding: 6px 12px 6px 12px;
        font-weight: 500;
        margin: 8px 0px 0px 0px;
    }

    .chip-icon {
        float: Left;
        margin: -3px 4px -6px -6px;
        padding: 0px;
        height: 24px;
        width: 24px;
        border-radius: 50%;
    }

    .chip-action-button {
        position: absolute;
        height: 20px;
        width: 20px;
        right: 8px;
        top: 6px;
        margin: 0px 0px 0px 8px;
        padding: 0px 0px 0px 8px;
    }
    /*#region Metric Chips */

    .card-metrics-container {
        margin: 12px 0;
        padding: 0 4px;
    }

    .metrics-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
    }
    /* Override the existing metric-chip class to align with your chip styling */
    .metric-chip {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 4px 10px 4px 8px;
        font-weight: var(--md-sys-typescale-label-medium-font-weight);
        font-size: var(--md-sys-typescale-label-medium-font-size);
        line-height: var(--md-sys-typescale-label-medium-line-height);
        letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
        border-radius: 16px;
        margin: 0px 4px 4px 0px;
        cursor: default;
        overflow: hidden;
    }
        /* Remove these background/color definitions if using with chip-white, chip-blue, etc. classes */
        .metric-chip:not(.chip-white):not(.chip-blue):not(.chip-green):not(.chip-yellow):not(.chip-gray):not(.chip-red) {
            color: var(--md-sys-color-on-surface-variant);
            background-color: var(--md-sys-color-surface-variant);
        }
    /* Smaller font size and more compact for the metrics */
    .metric-chip {
        font-size: calc(var(--md-sys-typescale-label-small-font-size) * 0.95);
        padding: 3px 8px 3px 6px;
    }
        /* Add appropriate spacing for icons in metric chips */
        .metric-chip .chip-icon {
            float: left;
            margin: -3px 4px -3px -3px;
            padding: 0px;
            height: 18px;
            width: 18px;
        }
        /* Optional hover effect for interactive metrics */
        .metric-chip:hover {
            opacity: 0.9;
        }
        /* Custom text color overrides for better contrast */
        .metric-chip.chip-blue {
            color: var(--md-sys-color-on-secondary);
        }

        .metric-chip.chip-green {
            color: var(--md-sys-color-background);
        }

        .metric-chip.chip-yellow {
            color: var(--md-sys-color-on-tertiary-container);
        }
    /*#endregion Metric Chips*/
    /*#endregion Metric Chips*/
    /*#region snackbar*/

    .snackbar-container {
        position: fixed;
        top: 98px;
        left: 50%;
        transform: translateX(-50%);
        min-width: 344px;
        max-width: 672px;
        min-height: 48px;
        padding: 14px 16px 14px 16px;
        border-radius: 4px;
        box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
        z-index: 100001;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0.25px;
        color: var(--md-sys-color-inverse-on-surface);
        background-color: var(--md-sys-color-inverse-surface);
    }

    .snackbar-text {
        flex: 1;
        display: flex;
        align-items: center;
        word-break: break-word;
    }

    .snackbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .snackbar-action-button {
        background: transparent;
        border: none;
        padding: 8px 12px;
        margin: 0;
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0.1px;
        cursor: pointer;
        border-radius: 4px;
        white-space: nowrap;
        color: var(--md-sys-color-inverse-primary);
    }

        .snackbar-action-button:hover {
            background-color: rgba(255, 255, 255, 0.08);
        }

        .snackbar-action-button:active {
            background-color: rgba(255, 255, 255, 0.16);
        }

    .snackbar-close-button {
        background: transparent;
        border: none;
        padding: 4px;
        margin: 0;
        cursor: pointer;
        opacity: 0.7;
        flex-shrink: 0;
        color: var(--md-sys-color-inverse-on-surface);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .snackbar-close-button:hover {
            opacity: 1;
        }

    .snackbar-error {
        background-color: var(--md-sys-color-error-container);
        color: var(--md-sys-color-on-error-container);
    }

        .snackbar-error .snackbar-action-button {
            color: var(--md-sys-color-error);
        }

        .snackbar-error .snackbar-close {
            color: var(--md-sys-color-on-error-container);
        }

    .snackbar-success {
        background-color: var(--md-sys-color-tertiary-container);
        color: var(--md-sys-color-on-tertiary-container);
    }

        .snackbar-success .snackbar-action-button {
            color: var(--md-sys-color-tertiary);
        }

        .snackbar-success .snackbar-close {
            color: var(--md-sys-color-on-tertiary-container);
        }

    @media (max-width: 600px) {
        .snackbar-container {
            left: 8px;
            right: 8px;
            transform: none;
            width: auto;
            min-width: auto;
            max-width: none;
        }
    }
    /*#endregion snackbar*/
    /*#region Legal*/

    .legalTerms {
        padding: 16px;
    }

        .legalTerms h2 {
            font-weight: var(--md-sys-typescale-headline-small-font-weight);
            font-size: var(--md-sys-typescale-headline-small-font-size);
            line-height: var(--md-sys-typescale-headline-small-line-height);
            letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
            margin: 16px 0px 0px 0px;
        }

        .legalTerms h3 {
            font-weight: var(--md-sys-typescale-headline-small-font-weight);
            font-size: var(--md-sys-typescale-headline-small-font-size);
            line-height: var(--md-sys-typescale-headline-small-line-height);
            letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
            margin: 16px 0px 0px 0px;
        }

        .legalTerms p,
        .legalTerms ol,
        .legalTerms ul {
            margin: 0px;
            font-weight: var(--md-sys-typescale-body-medium-font-weight);
            font-size: var(--md-sys-typescale-body-medium-font-size);
            line-height: var(--md-sys-typescale-body-medium-line-height);
            letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
        }

    .indent {
        padding-left: 24px;
    }
    /*#endregion Legal*/
    /*#region Wizard*/

    .wizard .modal-content {
        background-color: var(--md-sys-color-surface);
        margin: 1% auto;
        padding: 20px;
        border-radius: 16px;
        overflow-x: auto;
        border: 1px solid var(--md-sys-color-border);
        width: calc(98% - 40px); /* Could be more or less, depending on screen size */
        max-height: calc(98% - 80px); /* Could be more or less, depending on screen size */
        position: relative;
    }

        .wizard .modal-content::-webkit-scrollbar {
            width: 8px;
            /* Horizontal - 8px so it can be grabbed. */
            height: 8px;
            background-color: var(--md-sys-color-primary-container);
        }

        .wizard .modal-content::-webkit-scrollbar-track {
            background-color: var(--md-sys-color-primary-container);
        }

        .wizard .modal-content::-webkit-scrollbar-thumb {
            background-color: var(--md-sys-color-primary);
        }

    .wizard h3 {
        text-align: left;
        font-size: 20px;
        font-weight: bold;
        margin: 0px;
    }

    .wizard-image {
        margin: auto;
        width: 100%;
        max-width: 400px;
        box-shadow: 0px 1px 5px var(--md-sys-color-on-background);
    }

    .wizard h6 {
        padding: 0px;
        margin: 0px;
    }

    .wizard .wizardButtonListItem {
    }

    .wizard .ImageButton {
        float: left;
        cursor: pointer;
    }

    .wizard .wizardButtonListItemTextContainter {
        float: left;
        width: calc(100% - 50px);
        padding: 4px 0px 0px 0px;
    }

    .wizard .primary-text {
        font-weight: bold;
        font-size: 14px;
        padding: 4px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    .wizard .secondary-text {
        font-size: 12px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    .wizard .CenterButtonContainer {
        margin: 0px;
        padding: 0px;
    }

    .wizardStepContainer {
        height: 48px;
        background-color: var(--md-sys-color-surface);
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        display: table;
        table-layout: fixed;
        text-align: center;
    }

    .wizardNavBar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 48px;
        background-color: var(--md-sys-color-surface);
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        display: table;
        table-layout: fixed;
        text-align: center;
        z-index: 1000000;
    }
    /*#endregion Wizard*/
    /*#region Sheet*/

.Sheet {
    margin: 0px auto 8px auto;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
    /*    border-radius: 16px;*/
    border: 1px solid var(--md-sys-color-outline-subtle);
    border-radius: 20px;
    box-shadow: var(--md-sys-elevation-level0);
}

    .material-card .Sheet,
    .material-card .Sheet .material-card {
        margin-left: 8px;
        margin-right: 8px;
    }

    .Sheet .Sheet {
        background-color: var(--md-sys-color-surface-container-low);
        /* The top-level sheet keeps its shadow (it floats above the page).
           Nested sheets drop it - the tonal color ladder carries the depth,
           per M3 (no stacking two elevation signals on every level). */
       /* box-shadow: none;*/
        border-radius: 12px;
    }

        .Sheet .Sheet .Sheet {
            background-color: var(--md-sys-color-surface-container);
        }

            .Sheet .Sheet .Sheet .Sheet {
                background-color: var(--md-sys-color-surface-container-high);
            }
                /* L5 hits the darkest opaque surface token. */
                .Sheet .Sheet .Sheet .Sheet .Sheet {
                    background-color: var(--md-sys-color-surface-container-highest);
                }
                    /* Past L5 there is nothing darker, so bounce back down the ladder
       (highest -> high -> container -> low) to keep each level distinct
       from its parent without resetting to white. */
                    .Sheet .Sheet .Sheet .Sheet .Sheet .Sheet {
                        background-color: var(--md-sys-color-surface-container-high);
                    }

                        .Sheet .Sheet .Sheet .Sheet .Sheet .Sheet .Sheet {
                            background-color: var(--md-sys-color-surface-container);
                        }

                            .Sheet .Sheet .Sheet .Sheet .Sheet .Sheet .Sheet .Sheet {
                                background-color: var(--md-sys-color-surface-container-low);
                            }

.SheetTitleOnly,
.SheetTitle {
    margin: 0px;
    padding: 16px 8px 16px 16px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    border-top-right-radius: 20px;
    font-size: var(--md-sys-typescale-headline-small-font-size);
    font-weight: 500;
    line-height: var(--md-sys-typescale-headline-small-line-height);
    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
    border-bottom: 1px solid var(--md-sys-color-border);
    border-bottom: 1px solid rgba(0,0,0,.10);
}

    .SheetTitleOnly {
        margin: 0px 0px 8px 0px;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        border-radius: 16px;
        overflow: hidden;
    }

        .SheetTitleOnly h1,
        .SheetTitle h1,
        .SheetTitleOnly h2,
        .SheetTitle h2,
        .SheetTitle h3,
        .SheetTitle h4,
        .SheetTitle h5,
        .SheetTitle h6,
        .SheetTitleOnly h2 a,
        .SheetTitle h2 a,
        .SheetTitleOnly h2 a:hover,
        .SheetTitle h2 a:hover {
            margin: 0px;
            padding: 0px;
            font-size: var(--md-sys-typescale-headline-small-font-size);
            font-weight: 500;
            line-height: var(--md-sys-typescale-headline-small-line-height);
            letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
            text-decoration: none;
        }

    .SheetTitleIcon {
        float: left;
        margin: 2px 12px 0px 0px;
        padding: 0px 0px 0px 0px;
        height: 24px;
        width: 24px;
    }


    .page_section_title h2 {
        padding: 16px 16px 0px 16px;
        margin: 4px 0px 0px 0px;
        font-size: var(--md-sys-typescale-display-small-font-size);
        font-size: 42px;
        line-height: var(--md-sys-typescale-display-small-line-height);
        letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
        font-weight: 800; /* Increased from 700 for more prominence */
        color: var(--md-sys-color-on-surface);
        text-align: center;
        letter-spacing: -0.4px; /* Tighter letter spacing for modern look */
    }

    /* =========================================================================================
   PAGE SECTION TITLE BAR - PageSectionTitleControl.razor.

   Lives here in app.css, not in the component's scoped .razor.css, so a change to it is a
   Ctrl+F5 rather than a rebuild. Every rule is under .PageSectionTitleBar, a class only that
   component puts on its root, so none of it reaches anything else.

   The plain .page_section_title rules above are NOT this bar. ApolloPeopleSearch and
   TemplateSearchForm build their own bars from those class names and still depend on them
   (the 42px centred heading, the ⋮ button's -42px pull). The rules below are written specific
   enough to beat those without depending on their order in this file.

   LAYOUT: one row - title at the start, actions at the end, Material's toolbar layout. Same
   bar in the same place, same buttons in the same order as the old stacked, centred layout,
   at roughly half the height.
   ========================================================================================= */
    .page_section_title.PageSectionTitleBar {
        margin: 0px 0px 16px 0px;
        background-color: var(--md-sys-color-surface);
        padding: 0px;
        color: var(--md-sys-color-on-surface);
        border-radius: 16px;
        font-weight: 500;
        font-size: 24px;
        line-height: 24px;
        letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
        min-height: 60px;
        text-align: left;
    }

        /* Title and buttons are built to the SAME height, so the title sits in the vertical
       middle of the buttons and the gaps above and below the row are equal.

           Buttons: 46px tall + 6px margin above and below = 58px, plus the container's 8px
                    top and bottom padding.
           Title:   a 58px line box - text is centred in its line - plus the same 8px padding.

       Change the button size and this line-height must change with it. */
        .page_section_title.PageSectionTitleBar > h2 {
            float: left;
            text-align: left;
            margin: 0px;
            padding: 8px 16px;
            font-size: var(--md-sys-typescale-headline-small-font-size);
            line-height: 58px;
            font-weight: 800;
            color: var(--md-sys-color-on-surface);
            letter-spacing: -0.5px;
        }

        /* A FLEX ROW, centring every button vertically. The buttons are different kinds -
       ExtendedFAB, OutlinedExtendedFAB, FilterExtendedFAB, the Sort dropdown, the round ⋮ -
       and left to inline layout they line up by text baseline, each by its own
       vertical-align. The ⋮ then dropped below the others and stretched the row taller than
       the title. Flex centres them all on one line regardless. */
        .PageSectionTitleBar .page_section_title_button_container {
            float: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 8px 8px 8px 0px;
        }

            /* The ⋮ menu button. The rule for the older bars pulls it up 42px beside a stacked
           title; here the flex row centres it, so it only needs horizontal spacing. */
            .PageSectionTitleBar .page_section_title_button_container .FloatingActionButton {
                margin: 0px 4px;
            }

        /* THE FILTER PANEL'S open/close row. It reuses the More-row animation
       (TaskCardMoreRow), which was built for a row of buttons - the filter needs three
       differences:

       - text-align left: the More row right-aligns its buttons, which would push the filter's
         fields across to the right.
       - once FULLY open, overflow visible: the row clips its contents so it can grow from
         nothing, but left clipped, the filter's own dropdown lists would be cut off at the
         panel's edge. It unclips at the END of the open - see below.
       - once OPEN, transform none: the More row rests at translateY(0), and ANY transform on
         an ancestor traps position:fixed popups inside it - the filter's dropdowns would open
         in the wrong place. It still slides in: the transition runs from translateY(8px) to
         none. */
        .PageSectionTitleBar .page_section_filter_row > div {
            text-align: left;
            padding: 0px;
        }

        .PageSectionTitleBar .page_section_filter_row.TaskCardMoreRowOpen {
            transform: none;
        }

            /* Unclipped only AFTER the 0.25s open has finished. While the contents are
           unclipped the grid row cannot shrink them below their full height, so unclipping
           immediately snapped the panel open with nothing to animate. A zero-length animation
           delayed by the open's duration flips it at the end. Closing removes the class, which
           clips again instantly, and that is what lets the close animate. */
            .PageSectionTitleBar .page_section_filter_row.TaskCardMoreRowOpen > div {
                animation: pageSectionFilterUnclip 0s linear 0.25s forwards;
            }

    @keyframes pageSectionFilterUnclip {
        to {
            overflow: visible;
        }
    }

    /* A phone cannot fit the title and its buttons on one row, so the title sits on top and
   the buttons beneath it, wrapping if they need to. */
    /* 840px, not 600px (Brad, 2026-10-07): the page layout squeezes the bar well before the window
       reaches phone width. flex-shrink 0 keeps each button whole - one that does not fit wraps to
       the next line instead of being crushed until its label drops under its icon. */
    /* Up to 840px: icon-only round buttons, title and buttons still floated on ONE row. Titles
       differ per page, and the floats handle that by themselves - when a long title leaves no
       room, the button group drops below it, still on the right. */
    @media only screen and (max-width: 840px) {
            .PageSectionTitleBar .page_section_title_button_container > * {
                flex-shrink: 0;
            }

        /* Icon-only buttons on small screens (Brad, 2026-10-07) - the label is hidden and the
           button becomes a circle around its icon. */
        .PageSectionTitleBar .page_section_title_button_container .ExtendedFABText {
            display: none;
        }

        .PageSectionTitleBar .page_section_title_button_container .ExtendedFABImage {
            margin: 0px;
        }

        .PageSectionTitleBar .page_section_title_button_container .ExtendedFAB,
        .PageSectionTitleBar .page_section_title_button_container .OutlinedExtendedFAB,
        .PageSectionTitleBar .page_section_title_button_container .FilterExtendedFAB {
            width: 48px;
            height: 48px;
            min-width: 48px;
            padding: 0px;
            border-radius: 50%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    /* Phones (600px): the title on top, the buttons beneath it on the right, wrapping if they
       need to. */
    @media only screen and (max-width: 600px) {
        .page_section_title.PageSectionTitleBar > h2,
        .PageSectionTitleBar .page_section_title_button_container {
            float: none;
        }

        .PageSectionTitleBar .page_section_title_button_container {
            justify-content: flex-end;
            flex-wrap: wrap;
            padding: 0px 8px 8px 8px;
        }
    }

    .SheetContent {
        padding: 8px;
    }
    /*#endregion Sheet*/
    /*#region Cards */

    .SheetFilterContainer {
        padding: 8px;
        border-left: 1px solid rgba(0,0,0,.10);
        border-right: 1px solid rgba(0,0,0,.10);
    }

    .material-card-container,
    .material-job-card-container {
        margin: 0px 0px 8px 0px;
        display: flex;
        flex-wrap: wrap;
        /*    justify-content: space-between;*/
        gap: 16px;
    }

    .content-material-card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        align-items: flex-start; /* Add this */
    }

    .bottom_border {
        border-bottom: 1px solid rgba(0,0,0,.10);
    }

    .material-card {
        color: var(--md-sys-color-on-surface);
        background-color: var(--md-sys-color-surface);
        padding: 0px 0px 56px 0px;
        box-shadow: var(--md-sys-elevation-level1);
        flex: 0 1 calc(33.333% - 12px);
        /*    flex: 0 1 344;*/
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        border-radius: 16px;
        overflow: hidden;
        margin: 0 0 15px;
        cursor: pointer;
        position: relative;
    }

    .material-card-no-hover .material-card {
        box-shadow: var(--md-sys-elevation-level1);
        cursor: default;
        /*background-color: rgba(0,0,0,.04);*/
        /*border: 1px solid rgba(0,0,0,.10);*/
    }

    .material-card:hover {
        box-shadow: var(--md-sys-elevation-level2);
        /*background-color: var(--md-sys-color-surface-variant);*/
    }

    .material-card-no-hover .material-card:hover {
        box-shadow: var(--md-sys-elevation-level1);
        /*background-color: rgba(0,0,0,.04);*/
        /*border: 1px solid rgba(0,0,0,.10);*/
    }

    /* =========================================================================================
       MATERIAL CARD SHELL - MaterialCard.razor and its rows (Brad, 2026-10-10).
       Rules: Business/Documentation/MaterialCardPattern.txt and the header of MaterialCard.razor.
       ========================================================================================= */

    /* A MaterialCard with no OnClick. The base .material-card rule gives EVERY card a pointer and
       a hover lift (unmigrated cards still rely on that); a card that does nothing when clicked
       must not look clickable. */
    .material-card.material-card-static {
        cursor: default;
    }

        .material-card.material-card-static:hover {
            box-shadow: var(--md-sys-elevation-level1);
        }

    /* A MaterialCard with no buttons. The base rule reserves 56px at the bottom for the button
       row (material_link_button_container is position:absolute at bottom:0); with no row that is
       just an empty band. */
    .material-card.material-card-no-buttons {
        padding-bottom: 0px;
    }

    /* SETTINGS ROWS - MaterialCardSetting and the typed rows built on it. Phone-settings style:
       label on the left, current value under it, control (switch) on the right. */
    .material_card_setting_row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 16px;
        border-top: 1px solid var(--md-sys-color-outline-subtle);
    }

    /* Only rows the user can edit look clickable. Read-only rows get no hover and no pointer. */
    .material_card_setting_row_editable {
        cursor: pointer;
    }

        .material_card_setting_row_editable:hover {
            background-color: var(--md-sys-color-surface-container-low);
        }

        /* The pencil on an editable row shows only while the row is hovered (Brad, 2026-10-10) -
           not on every row at once. The row itself is the click target. */
        .material_card_setting_row_editable .material_card_setting_control {
            visibility: hidden;
        }

        .material_card_setting_row_editable:hover .material_card_setting_control {
            visibility: visible;
        }

    .material_card_setting_text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Bold, like the phone's settings list: the setting's name is the first thing to read. */
    .material_card_setting_label {
        color: var(--md-sys-color-on-surface);
        font-size: var(--md-sys-typescale-body-large-font-size);
        font-weight: 600;
        line-height: var(--md-sys-typescale-body-large-line-height);
        letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
    }

    .material_card_setting_value,
    .material_card_setting_description {
        color: var(--md-sys-color-on-surface-variant);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
        overflow-wrap: anywhere;
    }

    .material_card_setting_control {
        flex: 0 0 auto;
        color: var(--md-sys-color-on-surface-variant);
    }

    /* ITEM TILE (Brad, 2026-10-10) - see "SETTINGS vs ITEMS" in MaterialCard.razor. A row for an ITEM
       in a list (a task, an assignee, a document type - things you open, add or remove) is a tile, so
       it never looks like a SETTING (a field you change in place). Put it ON the row, together with
       material_card_setting_row: inset from the card's sides, rounded, bordered on all four sides.
       Vertical margins collapse between tiles, so the gap between two tiles is 4px. */
    .material_card_item_tile {
        margin: 4px 8px;
        border: 1px solid var(--md-sys-color-outline-subtle);
        border-radius: var(--md-sys-shape-corner-medium);
    }

    /* A row in edit mode: the field, saving on change. */
    .material_card_setting_edit {
        padding: 12px 16px;
        border-top: 1px solid var(--md-sys-color-outline-subtle);
        background-color: var(--md-sys-color-surface-container-low);
    }

    /* A switch row IS Switch.razor, with its own label (left) and toggle (right) - already a
       phone-settings row. Switch's scoped style draws a bordered field box around it; inside a
       settings row the row is the box, so only that box is removed. Width stays full (block,
       auto) because Switch pins its thumb from the label's right edge. Three classes deep so it
       outranks the scoped rule regardless of stylesheet order. */
    .material_card_setting_row.material_card_setting_switch .pure-material-switch-container {
        display: block;
        flex: 1 1 auto;
        width: auto;
        padding: 0px;
        border: none;
        background-color: transparent;
        min-height: 0px;
    }

    /* Switch's label text is its own colour/weight; in a settings row it matches the other rows'
       labels. */
    .material_card_setting_row.material_card_setting_switch .pure-material-switch > span {
        color: var(--md-sys-color-on-surface);
        font-size: var(--md-sys-typescale-body-large-font-size);
        font-weight: 600; /* bold label, as .material_card_setting_label */
        line-height: var(--md-sys-typescale-body-large-line-height);
    }

    /* A GROUP heading over settings rows in a card's body, like the phone's settings list
       ("Privacy", "General"): small, in the primary colour, above the group's rows. */
    .material_card_settings_heading {
        padding: 20px 16px 8px 16px;
        color: var(--md-sys-color-primary);
        font-size: var(--md-sys-typescale-title-small-font-size);
        font-weight: var(--md-sys-typescale-title-small-font-weight);
        line-height: var(--md-sys-typescale-title-small-line-height);
        letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
    }

    /* A card header with a BACK arrow (MaterialCard OnBack): the arrow, then the title block. The
       arrow is centred on the WHOLE title block (title + subtitle), and the title starts 16px after
       the arrow's glyph, as in an M3 top app bar. */
    .material_card_header_with_back {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .material_card_header_text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The back arrow: a 40px M3 icon button - no fill, a light state layer on hover. The -8px left
       margin puts the 24px glyph (8px inside the button) on the header's 16px text edge, lined up
       with the text of the rows below. on-surface, like an M3 top app bar's nav icon. */
    .material_card_back_button {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0px 0px 0px -8px;
        border-radius: 50%;
        color: var(--md-sys-color-on-surface);
        cursor: pointer;
    }

        .material_card_back_button .iconify,
        .material_card_back_button svg {
            display: block;
        }

        .material_card_back_button:hover {
            background-color: var(--md-sys-color-surface-container-low);
        }

    /* The FIRST section header on a MaterialCard gets a top border too, separating the sections
       from the card's body above. Every section header already has its bottom border. The Settings
       section counts as first only when the card has no other Sections. */
    .material_card_sections > .material-card-white-banner:first-child,
    .material_card_settings_section > .material-card-white-banner:first-child {
        border-top: 1px solid var(--md-sys-color-outline-subtle);
    }

    .material_card_sections + .material_card_settings_section > .material-card-white-banner:first-child {
        border-top: none;
    }

    /* The LAST section, while COLLAPSED (its header is the wrapper's last child), sits right on the
       button bar, which draws its own top border - so the header drops its bottom border there
       instead of doubling it. Expanded, the header keeps it to separate it from its content. */
    .material_card_sections:has(+ .material_card_buttons) > .material-card-white-banner:last-child,
    .material_card_settings_section:has(+ .material_card_buttons) > .material-card-white-banner:last-child {
        border-bottom: none;
    }

    /* A section header's buttons (MaterialCardSection HeaderButtons): the ExtendedFAB floats right,
       next to the chevron, with negative vertical margins so the header bar keeps its height. */
    .material-card-white-banner .ExtendedFAB {
        float: right;
        margin: -9px 8px -9px 0px;
    }

    /* =========================================================================================
       WORKFLOW EDITOR (Brad, 2026-10-10) - WorkflowStagesSearch: one column of stage cards.
       Clicking a task row slides THAT stage card over to the task, in place (see the slide below);
       the task's back arrow slides it back.
       ========================================================================================= */
    .workflow_editor {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

        /* Stage and task cards are full-width blocks here, not 1/3-width flex items. */
        .workflow_editor .material-card {
            flex: none;
            width: auto;
        }

    /* The M3 "shared axis X" transition between a stage and one of its tasks: the outgoing content
       slides 30px and fades out, the incoming slides 30px in and fades in. Forward (into a task)
       moves left; back moves right. WorkflowAuthoringStageCard swaps these classes. */
    @keyframes workflow_slide_out_left {
        to { transform: translateX(-30px); opacity: 0; }
    }

    @keyframes workflow_slide_in_right {
        from { transform: translateX(30px); opacity: 0; }
        to { transform: none; opacity: 1; }
    }

    @keyframes workflow_slide_out_right {
        to { transform: translateX(30px); opacity: 0; }
    }

    @keyframes workflow_slide_in_left {
        from { transform: translateX(-30px); opacity: 0; }
        to { transform: none; opacity: 1; }
    }

    .workflow_slide_out_left {
        animation: workflow_slide_out_left 90ms cubic-bezier(0.3, 0, 1, 1) forwards;
    }

    .workflow_slide_in_right {
        animation: workflow_slide_in_right 210ms cubic-bezier(0, 0, 0, 1) both;
    }

    .workflow_slide_out_right {
        animation: workflow_slide_out_right 90ms cubic-bezier(0.3, 0, 1, 1) forwards;
    }

    .workflow_slide_in_left {
        animation: workflow_slide_in_left 210ms cubic-bezier(0, 0, 0, 1) both;
    }

    @media (prefers-reduced-motion: reduce) {
        .workflow_slide_out_left,
        .workflow_slide_in_right,
        .workflow_slide_out_right,
        .workflow_slide_in_left {
            animation: none;
        }
    }

    /* A task row in its stage's Tasks section uses the SETTINGS ROW classes (material_card_setting_*):
       task name, then "automation / Required" on one line, then this chevron. */

    /* A task row's ↑ / ↓ (just left of the ›): 40px M3 icon buttons in the primary colour (Brad,
       2026-10-10), no fill, a state layer on hover. The spacer takes the place of a missing arrow (no
       ↑ on the first row, no ↓ on the last) so the arrows line up down the list. */
    .workflow_task_row_move {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: var(--md-sys-color-primary);
        cursor: pointer;
    }

        .workflow_task_row_move:hover {
            background-color: var(--md-sys-color-surface-container);
        }

    .workflow_task_row_move_spacer {
        flex: none;
        width: 40px;
        height: 40px;
    }

    /* The trailing › that tells the user the row opens the task (always shown - no hover on touch). */
    .workflow_task_row_chevron {
        flex: none;
        margin-right: -8px;
        color: var(--md-sys-color-on-surface-variant);
    }

    .material-card-blue-banner,
    .material-card-green-banner,
    .material-card-red-banner,
    .material-card-white-banner,
    .material-card-gray-banner,
    .material-card-yellow-banner {
        position: relative;
        padding: 12px;
        /*min-height: 36px;*/
        font-size: 16px;
        font-weight: bold;
        /*line-height: 24px;*/
        margin: 0px;
        overflow: hidden;
        width: calc(100% - 24px);
        float: none;
        z-index: 1000;
    }

        .material-card-blue-banner .icon,
        .material-card-green-banner .icon,
        .material-card-red-banner .icon,
        .material-card-white-banner .icon,
        .material-card-gray-banner .icon,
        .material-card-yellow-banner .icon {
            margin: 0px 8px 0px 0px;
            float: left;
        }

        .material-card-blue-banner .ImageButton,
        .material-card-green-banner .ImageButton,
        .material-card-red-banner .ImageButton,
        .material-card-white-banner .ImageButton,
        .material-card-gray-banner .ImageButton,
        .material-card-yellow-banner .ImageButton {
            margin: -10px -8px -10px -8px;
            float: right;
        }

        .material-card-blue-banner .thumbnail,
        .material-card-green-banner .thumbnail,
        .material-card-red-banner .thumbnail,
        .material-card-white-banner .thumbnail,
        .material-card-gray-banner .thumbnail,
        .material-card-yellow-banner .thumbnail {
            float: Left;
            margin: -6px 6px 0px -8px;
            padding: 0px;
            border-radius: 50%;
            background-color: var(--md-sys-color-background)
        }

        .material-card-blue-banner .ExtendedImageButton,
        .material-card-green-banner .ExtendedImageButton,
        .material-card-red-banner .ExtendedImageButton,
        .material-card-white-banner .ExtendedImageButton,
        .material-card-gray-banner .ExtendedImageButton,
        .material-card-yellow-banner .ExtendedImageButton {
            float: right;
            margin: -8px -12px 0px 0px;
            padding: 0px 0px 0px 0px;
        }

    .material-card-banner-text {
        padding: 2px 0px 0px 0px;
        float: left;
    }

    /* Same divider colour as every other line on a card (header, settings rows, button bar). */
    .material-card-white-banner {
        color: var(--md-sys-color-on-background);
        background-color: var(--md-sys-color-background);
        border-bottom: 1px solid var(--md-sys-color-outline-subtle);
    }

    .material-card-red-banner {
        color: var(--md-sys-color-background);
        background-color: var(--md-sys-color-error);
        border-bottom: 1px solid var(--md-sys-color-border-light);
    }

    .material-card-green-banner {
        color: var(--md-sys-color-background);
        background-color: green;
        border-bottom: 1px solid var(--md-sys-color-border-light);
    }

    .material-card-yellow-banner {
        color: var(--md-sys-color-on-background);
        background-color: var(--md-sys-color-tertiary-container);
        border-bottom: 1px solid var(--md-sys-color-border-light);
    }

    .material-card-gray-banner {
        color: var(--md-ref-palette-neutral-variant0);
        background-color: var(--md-ref-palette-neutral-variant95);
        border-bottom: 1px solid var(--md-sys-color-border-light);
    }

    .material-card-blue-banner {
        background-color: #3AC3FF;
        color: #212121;
    }

    .material-card-no-hover {
        background-color: var(--md-sys-color-background);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        border-radius: 16px;
        display: inline-block;
        margin: 0px 0px 8px 0px;
        width: 100%;
        vertical-align: middle;
    }

    .material_link_card {
        background-color: var(--md-sys-color-background);
        padding: 0px 0px 56px 0px;
        /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
        flex: 0 1 calc(33.333% - 1em);
        /*    flex: 0 1 344;*/
        /*    border: 1px solid var(--md-sys-color-surface-variant);*/
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        border-radius: 16px;
        overflow: hidden;
        margin: 0 2px 15px;
        cursor: pointer;
        position: relative;
    }

    .material-card .materal-field-container {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 12px 0px;
        float: left;
        width: 49.5%;
    }

    .material-card .materal-field-label {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    .material-card .materal-field-value {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    .material-card-book-now-info {
        padding: 8px;
    }

    .material_card_logo_container {
        background-color: var(--md-sys-color-surface-variant);
        text-align: center;
        padding: 32px;
    }

        .material_card_logo_container img {
            margin: auto;
            width: 100%;
            max-width: 300px;
            max-height: 188px;
        }

    .material_card_logo_container_text {
        font-weight: 800;
        font-size: var(--md-sys-typescale-headline-medium-font-size);
        line-height: var(--md-sys-typescale-headline-medium-line-height );
        letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
        color: var(--md-sys-color-on-surface-variant);
        margin: auto;
    }

    .material_card_image_container_text {
        color: var(--md-sys-color-on-secondary);
        background-color: var(--md-sys-color-secondary);
        padding: 2vw 1vw 2vw 1vw;
        /*    padding: 0px;*/
        /*    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;*/
        /*    height: calc(100% - 5vw);
    width: calc(100% - 2vw);*/
        /*height: 100%;
    width: 100%;*/
        text-align: center;
        /*    object-fit: cover;*/
        /*vertical-align: middle;*/
        font-size: 1.5vw;
        font-weight: bold;
    }

    .location-card {
        color: var(--md-sys-color-on-surface);
        background-color: var(--md-sys-color-surface);
        padding: 0px 0px 0px 0px;
        /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
        flex: 0 1 calc(33.333% - 1em);
        /*    flex: 0 1 344;*/
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        border-radius: 16px;
        overflow: hidden;
        margin: 0 2px 15px;
        cursor: pointer;
        position: relative;
    }

        .location-card:hover {
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }

    .location-card-content {
        width: calc(100% - 32px);
        text-align: center;
        display: block; /* Add this */
        padding: 16px; /* Add padding so text isn't touching edges */
        text-decoration: none; /* Remove underline from link */
    }

    .location-name {
        width: 100%;
        text-align: center;
        color: var(--md-sys-color-on-surface);
        font-weight: 600;
        font-size: var(--md-sys-typescale-body-large-font-size);
        line-height: var(--md-sys-typescale-body-large-line-height);
        letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
    }

    .location-sub-header {
        color: var(--md-sys-color-on-surface);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    }

    .location-address {
        color: var(--md-sys-color-outline);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    }

    .recruiter-card {
        color: var(--md-sys-color-on-surface);
        background-color: var(--md-sys-color-surface);
        padding: 0px 0px 0px 0px;
        /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
        flex: 0 1 calc(33.333% - 1em);
        /*    flex: 0 1 344;*/
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        border-radius: 16px;
        overflow: hidden;
        margin: 0 2px 15px;
        cursor: pointer;
        position: relative;
    }

        .recruiter-card:hover {
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }

    .job-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 180px; /* Adjust as needed */
        color: var(--md-sys-color-on-surface);
        background-color: var(--md-sys-color-surface);
        flex: 0 1 calc(33.333% - 1em);
        /*    flex: 0 1 344;*/
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        border-radius: 16px;
        overflow: hidden;
        margin: 0 2px 15px;
        cursor: pointer;
        position: relative;
    }

        .job-card:hover {
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        /* Make profession stick to the bottom */
        .job-card .job_card_profession {
            margin-top: auto;
            margin-bottom: 4px; /* Small gap between profession and specialty */
        }

        .job-card .job_card_specialty {
            margin-top: 0;
            margin-bottom: 8px;
        }

    .job_card_city_state,
    .job_card_job_title,
    .job_card_profession,
    .job_card_specialty {
        display: inline-block;
        width: 100%;
    }

    .job_card_city_state {
        margin: 4px 0px 8px 0px;
        text-transform: uppercase;
        color: var(--md-sys-color-outline);
        font-weight: 600;
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    }

    .job_card_job_title {
        margin: 8px 0px 0px 0px;
        color: var(--md-sys-color-on-surface);
        font-weight: 500;
        font-size: var(--md-sys-typescale-body-large-font-size);
        line-height: var(--md-sys-typescale-body-large-line-height);
        letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
        display: block;
    }

    .job_card_profession {
        color: var(--md-sys-color-outline);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    }

    .job_card_specialty {
        color: var(--md-sys-color-outline);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    }

    @media only screen and (max-width: 1200px) {
        .job-card,
        .location-card,
        .recruiter-card,
        .material-card {
            /*width: 100%;*/
            flex: 0 1 100%;
        }

        .material_card_image_container_text {
            font-size: 3.5vw;
        }
    }

    .material_card_header {
        /*    min-height: 60px;*/
        width: calc(100% - 32px);
        overflow: hidden;
        /*    background-color: var(--md-sys-color-surface);*/
        color: var(--md-sys-color-on-surface);
        border-bottom: 1px solid rgba(0,0,0,.10);
        padding: 16px;
    }

    .material_card_profession {
        color: var(--md-sys-color-primary);
        font-weight: 500;
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .material_card_role {
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 0.4px
    }

    .material-card-header-logo {
        border-bottom: 1px solid rgba(0,0,0,.10);
        text-align: center;
        width: calc(100% - 16px);
        padding: 8px 8px 4px 8px;
    }

        .material-card-header-logo img {
            max-height: 48px;
            max-width: 100%;
            height: auto;
            width: auto;
        }

    .material_card_header img {
        float: left;
        margin: 12px 4px 12px 12px;
    }

    .material_card_header_text {
        float: left;
        margin: 6px 0px 0px 8px;
    }

    .material_card_header_icon {
        float: left;
        padding: 8px 0px 0px 0px;
        /*      color: var(--md-sys-color-on-secondary);*/
    }

    .material-card-header-text-container {
        float: left;
        padding: 16px 16px 16px 16px;
        width: calc(100% - 96px);
        overflow: hidden;
    }

    .material_card_header_icon_right {
        float: right;
        padding: 17px 0px 0px 0px;
    }

    .material-card-header-text-container-with-icons {
        float: left;
        padding: 8px 8px 8px 8px;
        width: calc(100% - 144px);
        overflow: hidden;
    }

    .material_card_image_container {
        position: relative;
        width: 100%;
        height: 0;
        /* Force 16:9 aspect ratio (widescreen format) */
        padding-bottom: 56.25%; /* 9/16 * 100% = 56.25% for 16:9 ratio */
        overflow: hidden;
        background: linear-gradient(to bottom, var(--md-ref-palette-neutral-variant20) 0%, var(--md-ref-palette-neutral-variant40) 25%, var(--md-ref-palette-neutral-variant50) 50%, var(--md-ref-palette-neutral-variant60) 75%, var(--md-ref-palette-neutral-variant70) 100%);
        margin: 0px 0;
    }

        .material_card_image_container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* This will crop the image to fill the container while maintaining aspect ratio */
            /* Alternative: use object-fit: contain; if you prefer to show the full image with potential letterboxing */
        }

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .custom-video-container {
        position: relative;
        width: 100%;
        background-color: #000;
        overflow: hidden;
        border-radius: 4px;
        aspect-ratio: 16/9;
    }

    .html5-video-player {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: opacity 0.3s ease;
    }

    .playing .video-overlay,
    .playing .video-duration {
        opacity: 0;
        pointer-events: none;
    }

    .map-placeholder,
    .map-placeholder p,
    .map-placeholder .iconify {
        text-align: center;
        color: var(--md-sys-color-surface);
    }

    .play-button-circle {
        width: 68px;
        height: 68px;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .video-overlay:hover .play-button-circle {
        transform: scale(1.1);
        background-color: rgba(0, 0, 0, 0.8);
    }

    .play-button-triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 14px 0 14px 25px;
        border-color: transparent transparent transparent #ffffff;
        margin-left: 5px;
    }

    .video-duration {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 3px 6px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        pointer-events: none;
    }
    /* Only show video controls when playing */
    .html5-video-player:not([controls]) {
        pointer-events: none;
    }
    /* Add a subtle video icon in the corner for better identification */
    .custom-video-container::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 4px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%23ffffff'%3E%3Cpath d='M4 8h16v8H4z'/%3E%3Cpath d='M2 6v12h20V6H2zm18 10H4V8h16v8z'/%3E%3Cpath d='M10 15l5-3-5-3z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        z-index: 1;
        opacity: 0.8;
    }
    /* Tall images get special treatment */
    .material_card_image_container.tall-image {
        position: relative;
    }

        .material_card_image_container.tall-image::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
            pointer-events: none;
        }
    /* Click to expand button for tall images */
    .material_card_image_container .expand-button {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
        z-index: 2;
    }


    .person_image_container {
        /*16:9 aspect ratio*/
        /*padding-bottom: 56.2%;*/
        position: relative;
        padding-bottom: 120%;
        width: 100%;
    }

        .person_image_container div.RadMediaPlayer,
        .person_image_container img {
            position: absolute;
            height: 100%;
            width: 100%;
            text-align: center;
            object-fit: cover;
        }

    .material-card .location_link {
        background-color: transparent;
        cursor: pointer;
    }

        .material-card .location_link:hover {
            background-color: transparent;
        }

        .material-card .location_link .ImageButton:hover {
            background-color: transparent;
        }

    .material-card .location_link_label {
        font-size: 12px;
        padding: 0px 0px 0px 0px;
        cursor: pointer;
    }

    .material_card_line_item {
        border-top: 1px solid var(--md-sys-color-surface-variant);
        margin: 0px;
        padding: 8px;
        display: block;
        height: 48px;
        overflow: hidden;
    }

    .material_card_content {
        margin: 0px;
        padding: 12px;
        display: block;
        height: 112px;
        overflow: hidden;
    }

    .material_card_primary_title {
        color: var(--md-sys-color-on-background);
        font-size: var(--md-sys-typescale-headline-small-font-size);
        font-weight: var(--md-sys-typescale-headline-small-font-weight);
        line-height: var(--md-sys-typescale-headline-small-line-height);
        width: 100%;
        letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
    }

        .material_card_primary_title h1 {
            color: var(--md-sys-color-on-background);
            font-size: var(--md-sys-typescale-headline-small-font-size);
            font-weight: var(--md-sys-typescale-headline-small-font-weight);
            width: 100%;
            line-height: var(--md-sys-typescale-headline-small-line-height);
            letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
            margin: 0px;
            padding: 0px;
        }

        .material_card_primary_title img {
            height: 28px;
            margin: 0px;
            padding: 0px;
        }

    .material_card_chip_container {
        text-align: center;
        width: 100%;
    }
    /*.material-card .material_card_primary_title {
    color: var(--md-sys-color-primary-container);
}*/
    .material-card .material_card_secondary_title {
        color: var(--md-sys-color-on-background);
    }

    .material_card_primary_title_white_background {
        color: var(--md-sys-color-primary-container);
    }

    .action_primary_title {
        width: calc(100% - 16px);
        height: 24px;
        margin: 0px;
        padding: 8px 8px 0px 8px;
        font-weight: 500;
        font-size: 18px;
        line-height: 24px;
        overflow: hidden;
        letter-spacing: 0.25px;
        color: var(--md-sys-color-on-surface)
    }

    .action_secondary_title {
        width: calc(100% - 16px);
        margin: 0px;
        padding: 0px 8px 8px 8px;
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
        color: var(--md-sys-color-outline);
        overflow: hidden;
    }

    .material_card_primary_title h2 {
        color: var(--md-sys-color-on-background);
        font-size: 20px;
        font-weight: 500;
        width: 100%;
        letter-spacing: -0.5px;
        padding: 0px;
        margin: 0px;
    }

    .material-card-header-text-container .material_card_primary_title {
        /* max-width: 270px;*/
        /*overflow: hidden;*/
    }

    .material_card_secondary_title {
        color: var(--md-sys-color-primary);
        margin-top: 3px;
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    }

    .material_card_status {
        color: var(--md-sys-color-primary);
        margin: 3px 0px 3px 0px;
        font-size: var(--md-sys-typescale-label-small-font-size);
        font-weight: 600;
        line-height: var(--md-sys-typescale-label-small-line-height);
        letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
    }

        .material_card_status a:hover {
            text-decoration: underline;
        }



    .material_card_subtitle {
        color: var(--md-sys-color-on-surface-variant);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .material_card_supporting_text {
        color: var(--md-sys-color-on-surface);
        width: calc(100% - 32px);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
        padding: 16px;
    }

    .material_card_content_supporting_text {
        color: var(--md-sys-color-on-surface);
        /*    background-color: var(--md-sys-color-surface);*/
        width: 100%;
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
        padding: 16px;
        box-sizing: border-box;
        position: relative;
        border-bottom: 1px solid var(--md-sys-color-surface-variant);
    }
        /* Card view specific styles */
        .material_card_content_supporting_text.card-view {
            max-height: none;
            overflow: visible;
            position: relative;
            padding-bottom: 16px;
        }
        /* Detail view specific styles */
        .material_card_content_supporting_text.detail-view {
            max-height: none;
            overflow: visible;
        }
    /* Preview content container */
    .preview-content {
        width: 100%;
        overflow: hidden;
        word-break: break-word;
    }
    /* Read more container */
    .read-more-container {
        width: calc(100% + 32px);
        height: 3rem;
        margin: -1rem -16px -16px -16px;
        background: linear-gradient(transparent, rgba(0,0,0,.10) 60%);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        cursor: pointer;
    }
        /* For better touch feedback */
        .read-more-container:hover .read-more-text {
            text-decoration: underline;
        }

    .material_link_button_container {
        border-top: 1px solid rgba(0,0,0,.10);
        /*    text-align: right;*/
        padding: 0px 2px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
    }

        .material_link_button_container .chip-white,
        .material_link_button_container .chip-red,
        .material_link_button_container .chip-green {
            margin: 0px 0px 0px 0px;
            float: left;
        }

    .details_button_container {
        /*border-top: 1px solid var(--md-sys-color-outline-variant);*/
        /*    text-align: right;*/
        padding: 0px 2px;
        height: 56px;
    }

    .location_link {
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: var(--md-sys-color-surface-variant);
        display: inline-block;
        width: 100%;
        height: 50px;
        overflow: hidden;
    }

    .small_location_link {
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: var(--md-sys-color-surface-variant);
        display: block;
        width: 100%;
        min-height: 48px;
    }

    .location_link_text {
        display: block;
        color: var(--md-sys-color-outline);
        font-weight: bold;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-left: 50px;
        width: calc(100%-60px);
    }

    .material-card .location_link_text {
        font-size: 16px;
        padding: 16px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        color: var(--md-sys-color-on-background);
        font-weight: 400;
    }

    .material-card .location_link_label {
        font-size: 12px;
        padding: 0px 0px 0px 0px;
    }

    .location_link .ImageButton {
        float: left;
        margin: 6px 0px 0px 0px;
    }

        .location_link .ImageButton:hover,
        .location_link:hover .ImageButton {
            text-decoration: none;
            background-color: rgba(0,0,0,.25);
        }

    .prof_spec_name {
        font-size: var(--md-sys-typescale-headline-medium-font-size);
        font-weight: 500;
        line-height: var(--md-sys-typescale-headline-medium-line-height);
        letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
    }
    /*#endregion Cards*/
    /*#region Forms*/
    input[type=checkbox] {
        /* Double-sized Checkboxes */
        -ms-transform: scale(2); /* IE */
        -moz-transform: scale(2); /* FF */
        -webkit-transform: scale(2); /* Safari and Chrome */
        -o-transform: scale(2); /* Opera */
        transform: scale(2);
        margin-right: 12px;
        padding: 10px;
    }

    .blazorRadioButton,
    input[type=radio] {
        /* Double-sized Checkboxes */
        -ms-transform: scale(2); /* IE */
        -moz-transform: scale(2); /* FF */
        -webkit-transform: scale(2); /* Safari and Chrome */
        -o-transform: scale(2); /* Opera */
        transform: scale(2);
        padding: 10px;
    }

    input[type="file"]::file-selector-button {
        padding: 10px 16px 11px 16px;
        margin: 0px 8px 0px 4px;
        border-radius: 24px;
        min-width: 48px;
        font-size: var(--md-sys-typescale-body-medium-font-size);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        border: none;
        font-family: var(--md-sys-typescale-body-medium-font-family-name);
        text-align: center;
        cursor: pointer;
    }

        input[type="file"]::file-selector-button:hover {
            background-color: var(--md-ref-palette-primary30);
            color: var(--md-sys-color-on-primary);
        }

    .blazorRadioButtonLabelContainer {
        margin: 0px 0px 8px 0px;
    }

    .blazorRadioButtonLabel {
    }

    .materal-field-label {
        width: 100%;
        vertical-align: middle;
        font-weight: 500;
        padding-top: 16px;
        text-transform: uppercase;
        letter-spacing: .4px;
        font-size: 10px;
        margin-bottom: 0px;
        color: var(--md-sys-color-primary);
    }

    .materal-field-value {
        width: 100%;
        margin: 0px;
        padding: 8px 0px 8px 0px;
        font-weight: 500;
        color: var(--md-sys-color-on-background);
    }

        /* RECORD LINKS ON CARDS (Brad, 2026-10-08) — a card field whose value opens a record
           (Candidate, Job on TaskCard). Darker than the global link blue, and underlined on hover
           and keyboard focus so colour is never the only cue. Dark mode keeps the theme's own
           primary, which is the light blue that reads on a dark card. */
        .material-card .materal-field-value a {
            color: var(--md-ref-palette-primary30);
        }

            .material-card .materal-field-value a:hover,
            .material-card .materal-field-value a:focus-visible {
                color: var(--md-ref-palette-primary20);
                text-decoration: underline;
            }

        .dark .material-card .materal-field-value a,
        .dark .material-card .materal-field-value a:hover,
        .dark .material-card .materal-field-value a:focus-visible {
            color: var(--md-sys-color-primary);
        }

    .materal-field-container {
        margin-bottom: 16px;
    }

        .materal-field-container p {
            font-weight: 600;
            line-height: var(--md-sys-typescale-body-large-line-height);
            font-size: var(--md-sys-typescale-body-large-font-size);
            letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
            margin-bottom: 8px;
        }

    .SwitchContainer {
        float: right;
    }

    .SwitchText {
        float: Left;
    }

    .material-textbox {
        background-color: var(--md-sys-color-surface-variant);
        font-size: 18px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        border-top-right-radius: 4px;
        border: 0px solid var(--md-sys-color-on-surface-variant);
        border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
        padding: 8px;
        height: 20px;
        width: calc(100% - 16px);
        margin: 0px;
        display: inline-block;
        overflow: hidden;
        text-align: left;
        letter-spacing: -0.25px;
    }

    .material-multiline-textbox {
        background-color: var(--md-sys-color-surface-variant);
        font-size: 18px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        border-top-right-radius: 4px;
        border: 0px solid #ECECEC;
        border-bottom: 1px solid var(--md-sys-color-outline);
        padding: 8px;
        height: 210px;
        width: 100%;
        margin: 0px;
        display: inline-block;
        overflow: hidden;
        text-align: left;
        letter-spacing: -0.25px;
    }

    .material-textbox-w-image {
        background-color: var(--md-sys-color-surface-variant);
        font-size: 18px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        border-top-right-radius: 4px;
        border-bottom: 1px solid var(--md-sys-color-outline);
        padding: 8px;
        height: 20px;
        width: calc(100% - 66px);
        margin: 0px;
        display: inline-block;
        overflow: hidden;
        text-align: left;
        float: left;
    }

    .material-select:hover,
    .material-textbox:hover {
        background-color: var(--md-sys-color-surface);
        border-bottom: 1px solid var(--md-sys-color-outline);
        color: var(--md-sys-color-on-background);
    }

    .material-textbox-image-container {
        margin-top: -5px;
    }

    .material-select {
        background-color: var(--md-sys-color-surface-variant);
        font-size: 18px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        border-top-right-radius: 4px;
        border: 0px solid var(--md-sys-color-outline);
        border-bottom: 1px solid var(--md-sys-color-outline);
        padding: 8px 0px 8px 8px;
        height: 37px;
        width: calc(100%);
        margin: 0px;
        display: inline-block;
        overflow: hidden;
        text-align: left;
        letter-spacing: -0.25px;
    }

    .helper-text {
        width: 100%;
        vertical-align: middle;
        margin-top: 0px;
        margin-left: 8px;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        margin-bottom: 4px;
        color: var(--md-sys-color-on-background);
    }

    .helper-text-error {
        vertical-align: middle;
        margin: 0px auto 0px auto;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        margin-bottom: 4px;
        color: white;
        background-color: red;
        border-radius: 16px;
        padding: 4px 8px 4px 8px;
        font-weight: bold;
    }

    .helper-tip {
        padding: 16px;
        margin: 16px 16px 0px 16px;
        background-color: var(--md-sys-color-tertiary-container);
        vertical-align: middle;
        font-weight: normal;
        color: var(--md-sys-color-on-background);
        border-radius: 16px;
        font-size: 12px;
    }

    .closer-text {
        width: 100%;
        vertical-align: middle;
        text-align: center;
        margin-top: 0px;
        margin-left: 8px;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.4px;
        margin-bottom: 4px;
        color: var(--md-sys-color-on-background);
    }

    .sheet_search_criteria {
        background-color: var(--md-sys-color-surface-variant);
    }

    .location-picker-item {
        display: inline-block;
        padding: 8px;
        font-size: 16px;
        line-height: 36px;
        color: var(--md-sys-color-on-background);
        background-color: var(--md-sys-color-background);
        margin: 0px;
        width: calc(100% - 16px);
        cursor: pointer;
        overflow: hidden;
        text-align: left;
    }

        .location-picker-item:hover {
            background-color: var(--md-sys-color-surface-variant);
        }

    .FormTextBox {
        font-size: large !Important;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        border-bottom-right-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        border-bottom-left-radius: 4px;
    }

    .FormResult {
        padding: 11px 8px 11px 8px;
        margin: 6px 4px 6px 4px;
        display: inline-block;
        min-width: 48px;
        color: RED;
        font: Roboto;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }

    .FloatingProfileMenu {
        background: var(--md-sys-color-background);
        text-align: right;
        bottom: 0px;
        right: 0px;
        left: 0px;
        z-index: 100;
        position: fixed;
        width: 100%;
        padding: 0px;
        margin: 0px 0px 0px 0px;
        box-shadow: 0px 1px 5px var(--md-sys-color-outline);
    }

    .modal {
        display: block;
        position: fixed; /* Stay in place */
        z-index: 100002; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /*Enable scroll if needed*/
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    /* Modal Content/Box */
    .modal-content {
        background-color: var(--md-sys-color-surface);
        margin: 1% auto; /* 1% from the top and centered */
        padding: 0px;
        border-radius: 16px;
        border: 1px solid var(--md-sys-color-border);
        overflow-x: hidden;
        width: calc(98% - 40px); /* Could be more or less, depending on screen size */
        position: relative;
        max-height: calc(98% - 50px);
    }
    /* Radzen dropdown / popup support inside modals. The .modal sits at z-index
       100002; without these overrides, Radzen's popup (default ~1000) renders
       BEHIND the modal overlay and appears as an empty/invisible dropdown. */
    .rz-popup,
    .rz-overlaypanel,
    .rz-dialog,
    .rz-tooltip,
    .rz-datepicker-popup {
        z-index: 100010 !important;
    }

    @keyframes modalFadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .modal-content::-webkit-scrollbar {
        width: 8px;
        /* Horizontal - 8px so it can be grabbed. */
        height: 8px;
        background-color: var(--md-sys-color-primary-container);
    }

    .modal-content::-webkit-scrollbar-track {
        background-color: var(--md-sys-color-primary-container);
    }

    .modal-content::-webkit-scrollbar-thumb {
        background-color: var(--md-sys-color-primary);
    }

    .modal-content .FloatingActionButton {
        float: right;
        margin: 12px 16px 0px -48px;
        z-index: 10000;
    }

    .dashboard h2 {
        font-size: 24px;
        margin: 0px;
        padding: 0px;
        font-weight: bold;
    }

    .dashboard .section_title {
        font-size: 16px;
        margin: 0px 0px 16px 0px;
        font-weight: bold;
    }

    .bigDataLabel {
        font-size: 36px;
        height: 36px;
        padding: 6px 0px 12px 0px;
        font-weight: bold;
    }

    .ratingContainer {
        justify-content: center;
        margin: 0px auto 0px auto;
        padding: 0px;
        font-weight: normal;
        text-align: center;
    }

    .ratingTextContainer {
        display: inline-block;
        margin: 1px auto 0px auto;
        padding: 0px;
        vertical-align: top;
        font-weight: normal;
    }

    .ratingStarContainer {
        float: left;
    }

    .ratingScore {
        color: var(--md-sys-color-on-background);
        font-size: 20px;
        margin: 0px 0px 0px 4px;
        font-weight: normal;
        float: left;
    }

    .ratingCount {
        color: var(--md-sys-color-on-background);
        font-size: 20px;
        margin: 0px 0px 0px 0px;
        font-weight: normal;
        float: left;
    }

    .ratingHelpIcon {
        color: var(--md-sys-color-primary);
        font-size: 20px;
        margin: 1px 0px 0px 6px;
        float: left;
    }

    .chip-role {
        position: relative;
        display: inline-block;
        padding: 6px 12px 6px 12px;
        /*min-height: 36px;*/
        font-size: 12px;
        font-weight: bold;
        /*line-height: 24px;*/
        border-radius: 8px;
        color: var(--md-sys-color-on-primary-container);
        background-color: var(--md-sys-color-primary-container);
        margin: 0px 8px 0px 0px;
        cursor: pointer;
        overflow: hidden;
        text-align: center;
        border: 1px solid var(--md-ref-palette-primary80)
    }

        .chip-role .ratingStarContainer {
            float: none;
        }

        .chip-role .ratingScore,
        .chip-role .ratingCount {
            font-size: 16px;
            color: var(--md-sys-color-on-primary-container);
            float: none;
        }

        .chip-role .material_card_primary_title {
            color: var(--md-sys-color-on-primary-container-light);
            font-weight: var(--md-sys-typescale-label-large-font-weight);
            font-size: var(--md-sys-typescale-label-large-font-size);
            line-height: var(--md-sys-typescale-label-large-line-height);
            letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
        }

        .chip-role .material_card_secondary_title {
            color: var(--md-ref-palette-primary40);
            font-weight: var(--md-sys-typescale-label-small-font-weight);
            font-size: var(--md-sys-typescale-label-small-font-size);
            line-height: var(--md-sys-typescale-label-small-line-height);
            letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
        }

        /* A role chip carrying the qualified badge: room on the right so the badge never overlaps the text
           (12px inset + 24px badge + 8px gap, the Material 3 label-to-icon spacing), and start-aligned
           text as Material 3 chip labels are, so both lines share one edge. */
        .chip-role.chip-role-status {
            padding-right: 44px;
            text-align: left;
        }

        /* The qualified badge: on the right edge, centred across both lines of the chip. */
        .chip-role .chip-status-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            height: 24px;
            width: 24px;
        }

    .material-card .chip-role {
        margin: 8px 8px 0px 8px;
    }


    .material_card_header .ratingContainer {
        justify-content: left;
        margin: 0px;
        padding: 0px;
        font-weight: normal;
        text-align: left;
        width: 100%;
    }

        .material_card_header .ratingContainer .iconRightFloat {
            height: 20px;
            width: 20px;
            float: right;
            margin: 0px;
            padding: 0px;
        }

    .material_card_header .ratingScore,
    .material_card_header .ratingCount {
    }

    .material_card_header .ImageButton {
        padding: 12px 12px 12px 12px;
    }
    /* Close button */
    .close {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 28px;
        font-weight: bold;
        padding: 8px 16px 8px 16px;
        border-radius: 50%;
        display: block;
        color: var(--md-sys-color-on-primary);
        background-color: var(--md-sys-color-primary);
        cursor: pointer;
        z-index: 10;
    }

        .close:hover {
            background-color: rgba(0,0,0,0.1) !important;
            color: var(--md-sys-color-outline) !important;
        }

    .vica-expand-button {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 28px;
        font-weight: bold;
        padding: 12px 16px 12px 16px;
        border-radius: 24px;
        display: block;
        color: var(--md-sys-color-on-primary-container);
        background-color: var(--md-sys-color-primary-container);
        cursor: pointer;
        z-index: 10;
    }

        .vica-expand-button:hover {
            background-color: var(--md-sys-color-on-primary);
            color: var(--md-sys-color-primary);
        }

    .material-card .settings {
        border-top: 1px solid rgba(0,0,0,.10);
        font-weight: bold;
    }

    .settings ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .settings ul li {
            margin: 0;
            padding: 8px 8px 8px 8px;
            min-height: 24px;
            line-height: 24px;
            vertical-align: middle;
            border-top: 1px solid rgba(0,0,0,.10);
        }

            .settings ul li:first-of-type {
                border-top: 0px;
            }

            .settings ul li .settingLeftIcon {
                float: left;
                margin: 0px 8px 0px 0px;
                padding: 0px 0px 0px 0px;
                height: 24px;
                width: 24px;
            }

            .settings ul li .settingText {
                float: left;
                color: var(--md-sys-color-on-background);
                font-weight: var(--md-sys-typescale-title-medium-font-weight);
                font-size: var(--md-sys-typescale-title-medium-font-size);
                line-height: var(--md-sys-typescale-title-medium-line-height);
                letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
            }

            .settings ul li .settingBigText {
                float: left;
                color: var(--md-sys-color-on-background);
                font-weight: 600;
                font-size: var(--md-sys-typescale-title-large-font-size);
                line-height: var(--md-sys-typescale-title-large-line-height);
                letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
            }

            .settings ul li .settingLabel {
                vertical-align: middle;
                font-weight: normal;
                margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                font-size: 10px;
                color: var(--md-sys-color-on-background);
                float: left;
            }

            .settings ul li .BlueButton {
                margin: -18px 0px 0px 0px;
                float: right;
            }

            .settings ul li .SmallBlueButton {
                margin: -4px 0px 0px 16px;
                float: left;
            }

            .settings ul li .FlagImageButton {
                float: left;
                margin: 0px 8px 0px 0px;
                padding: 0px 0px 0px 0px;
                height: 24px;
            }

    @media only screen and (max-width: 800px) {
        .settings ul li .BlueButton {
            margin: 0px 0px 0px 0px;
        }
    }

    .settings ul li .settingRightIcon {
        float: right;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        height: 24px;
        width: 24px;
    }

    .settings ul li .settingRightButton {
        float: right;
        margin: -4px -4px -4px -4px;
        padding: 4px 4px 4px 4px;
        border-radius: 24px;
        height: 24px;
        width: 24px;
        color: var(--md-sys-color-on-primary);
        background-color: var(--md-sys-color-primary);
    }

    .settings {
        min-width: 220px;
        padding: 0;
    }

    .float-right {
        float: right;
        text-align: right;
        margin-left: 80px;
    }

    .recruiter_image_card {
        width: 100%;
        margin: 0px 0px -8px 0px;
        padding: 0px;
    }

    .search-criteria-container {
        /* Wrapping flex row. The children (.custom-multiselect / .OneHundredPercentOnMobile)
           are float: left with different heights — a short text field is one line, a
           multiselect has a label row above it. Floated items of unequal height snag: a
           wrapped item slides left only until it hits the bottom edge of a taller float
           already on the line, so it lands mid-row instead of at the left margin.

           float is ignored on flex items, so this neutralises the snag without touching the
           child rules — their margin-right and max-width still apply. align-items keeps the
           short fields from stretching to the height of the tall ones. */
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        text-align: left;
        float: left;
        width: 100%;
        font-size: var(--md-sys-typescale-body-medium-font-size);
        font-size: var(--md-sys-typescale-body-medium-line-height: 20px);
        font-size: var(--md-sys-typescale-body-medium-letter-spacing: 0.25px);
    }

    .mobile_page_search_criteria {
        margin: 0px;
        background-color: rgba(0, 0, 0, 0.75);
    }

        .mobile_page_search_criteria h2 {
            display: none;
        }

        .mobile_page_search_criteria .materal-field-label,
        .homepage_searchbox .materal-field-label {
            text-transform: none;
            font-weight: 600;
            font-size: 16px;
            letter-spacing: 0px;
            color: var(--md-sys-color-background);
        }

    @media only screen and (max-width: 839px) {
        .page_search_criteria {
            display: none;
        }
    }

    .page_search_criteria .materal-field-label {
        text-transform: none;
        font-weight: 900;
        font-size: 16px;
        letter-spacing: -1px;
    }

    .custom-multiselect,
    .OneHundredPercentOnMobile {
        float: left;
        margin-right: 8px;
        max-width: 180px;
    }

    @media only screen and (max-width: 840px) {

        .business-type-child-selector,
        .business-type-main-selector {
            width: 100%;
        }

        .custom-multiselect,
        .OneHundredPercentOnMobile {
            width: 100%;
            float: none;
            margin-right: 0px;
            margin-left: 0px;
            margin-top: 8px;
            max-width: 100%;
            /* The container is a wrapping flex row, so width: 100% alone is not enough —
               flex-shrink defaults to 1 and squeezes anything whose padding or border
               overflows the line, which is why the multiselects came out narrower than the
               plain text fields. Pin the basis and forbid shrinking so every field on mobile
               is exactly one full-width row. */
            flex: 0 0 100%;
        }
    }

    .city-selector {
        max-width: 125px;
        float: left;
        margin: -7px 0px 0px 8px;
    }

    @media only screen and (min-width: 840px) {
        .mobile_page_search_criteria {
            display: none;
        }

        .page_search_criteria {
            float: left;
            max-width: 220px;
            /* background-color: rgba(0, 0, 0, 0.04);*/
        }

            .page_search_criteria h2 {
                display: inherit;
                color: var(--md-sys-color-background);
                font-weight: bold;
                margin-bottom: 16px;
                font-size: 20pt;
            }

            .page_search_criteria .ResponsiveLeftColumn50,
            .page_search_criteria .ResponsiveRightColumn50 {
                width: 100%;
            }
    }
    /* Comment form styles */
    .comment-input-container {
        cursor: text;
        transition: all 0.2s ease;
        border-radius: 8px;
    }

        .comment-input-container:hover {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

    .rich-editor-container {
        border: 1px solid var(--md-sys-color-border, #e0e0e0);
        border-radius: 8px;
        padding: 8px;
        background-color: var(--md-sys-color-surface, #fff);
        transition: all 0.2s ease;
    }

        .rich-editor-container:focus-within {
            border-color: var(--md-sys-color-primary, #3498db);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
    /* Parent comment in reply modal */
    .parent-comment {
        background-color: var(--md-sys-color-surface-variant, #f7f7f7);
        border-left: 3px solid var(--md-sys-color-primary, #3498db);
        margin-bottom: 15px;
        padding: 10px 15px;
        border-radius: 4px;
    }
    /* Comment thread styles */
    .comment-body {
        word-break: break-word;
        overflow-wrap: break-word;
    }

        .comment-body a {
            color: var(--md-sys-color-primary, #3498db);
        }

        .comment-body strong, .comment-body b {
            font-weight: 600;
        }

    .appointment-form-layout {
        width: 100%;
        border-collapse: collapse;
    }

    .appointment-form-row {
        border-top: 1px solid rgba(0,0,0,.2);
    }

    .appointment-form-icon {
        width: 24px;
        vertical-align: top;
        padding: 16px 16px 12px 16px;
    }

    .appointment-form-field {
        padding: 8px 8px;
    }
    /*#endregion Forms*/
    /*#region BreadCrumb*/

    ul.breadcrumb {
        padding: 16px;
        list-style: none;
        margin: 16px 16px 8px 16px;
        border-radius: 16px;
        background-color: var(--md-sys-color-background);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        width: calc(100% - 64px);
    }

    .breadcrumb_container {
        background-color: var(--md-sys-color-surface);
    }

        .breadcrumb_container ul.breadcrumb {
            width: calc(100% - 64px);
            max-width: 1000px;
            margin: auto;
        }
    /*Display list items side by side */
    ul.breadcrumb li {
        display: inline;
        font-size: 16px;
    }
        /*Add a slash symbol (/) before/behind each list item */
        ul.breadcrumb li + li:before {
            padding: 8px;
            color: var(--md-sys-color-on-background);
            content: ">\00a0";
        }
        /*Add a color to all links inside the list */
        ul.breadcrumb li a {
            text-decoration: none;
        }
            /*Add a color on mouse-over */
            ul.breadcrumb li a:hover {
                text-decoration: underline;
            }
    /*#endregion BreadCrumb*/
    /*#region Material Tabs*/

    .md-tab-button-container {
        background-color: var(--md-sys-color-surface);
        /*    box-shadow: 0 4px 2px -2px var(--md-sys-color-primary);*/
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border-radius: 36px;
        margin: 0px 0px 16px 0px;
        height: 56px;
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .Sheet .md-tab-button-container {
        background-color: rgba(0,0,0,.10);
    }

    @media screen and (max-width: 800px) {

        .md-tab-button-container {
            margin: 0px 0px 16px 0px;
            width: 100%;
        }
    }

    .md-top-tab-container {
        /* Transparent so the strip always inherits its container's tone,
           while the box-shadow below stays (always shadowed, any depth). */
        background-color: transparent;
        box-shadow: 0px 1px 5px -2px var(--md-sys-color-outline);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border-top: solid;
        border-top-color: var(--md-sys-color-surface-variant);
        border-top-width: 1px;
        display: table;
        width: 100%;
        table-layout: fixed;
        margin: 0px 0px 0px 0px;
        /*  
    
    
    height: 56px;
    display: table;
    width: 100%;
    table-layout: fixed;*/
    }

        .md-tab-button-container ::-webkit-scrollbar,
        .md-top-tab-container ::-webkit-scrollbar {
            display: none;
        }

        .md-tab-button-container::-webkit-scrollbar,
        .md-top-tab-container::-webkit-scrollbar {
            /* Horizontal - 8px so it can be grabbed. */
            height: 8px;
            background-color: var(--md-sys-color-primary-container);
        }

        .md-tab-button-container::-webkit-scrollbar-track,
        .md-top-tab-container::-webkit-scrollbar-track {
            background-color: var(--md-sys-color-primary-container);
        }

        .md-tab-button-container::-webkit-scrollbar-thumb,
        .md-top-tab-container::-webkit-scrollbar-thumb {
            background-color: var(--md-sys-color-primary);
        }


    .nav-item {
        padding: 11px 8px 8px 8px;
        margin: 0px 4px 0px 4px;
        display: inline-block;
        text-transform: uppercase;
        min-width: 48px;
        color: var(--md-sys-color-primary);
        font: Roboto;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
        border-bottom: solid;
        border-bottom-color: var(--md-sys-color-background);
        border-bottom-width: 3px;
    }

    .nav-item-active {
        padding: 11px 8px 8px 8px;
        margin: 0px 4px 0px 4px;
        display: inline-block;
        text-transform: uppercase;
        min-width: 48px;
        color: var(--md-sys-color-on-background);
        font: Roboto;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
        border-bottom: solid;
        border-bottom-color: var(--md-sys-color-on-background);
        border-bottom-width: 3px;
    }

        .nav-item-active:hover,
        .nav-item:hover {
            text-decoration: none;
            border-bottom-color: var(--md-sys-color-on-background);
            color: var(--md-sys-color-on-background);
        }

    .md-top-tab-link-active,
    .md-top-tab-link {
        padding: 8px 8px 8px 8px;
        margin: 0px 4px 0px 4px;
        display: table-cell;
        min-width: 48px;
        color: var(--md-sys-color-outline);
        font-size: var(--md-sys-typescale-label-small-font-size);
        font-weight: var(--md-sys-typescale-label-small-font-weight);
        line-height: var(--md-sys-typescale-label-small-line-height);
        letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
        text-align: center;
        border-bottom: solid;
        /* Transparent so the inactive tabs' baseline underline shows the
           container tone; the active tab overrides this to primary below. */
        border-bottom-color: transparent;
        border-bottom-width: 3px;
        cursor: pointer;
        overflow: hidden;
    }

    .md-top-tab-link-active {
        color: var(--md-sys-color-primary);
        border-bottom-color: var(--md-sys-color-primary);
    }

        .md-top-tab-link-active:hover {
            background-color: rgba(0,0,0,.05);
        }

    .md-top-tab-link:hover {
        color: var(--md-sys-color-on-surface);
        background-color: rgba(0,0,0,.05);
        border-bottom-color: rgba(0,0,0,.05);
        border-bottom-width: 0px;
    }

    .md-tab-button,
    .md-tab-button-active {
        display: table-cell;
        text-align: center;
        margin: 0px;
        border-radius: 36px;
        height: 38px;
        padding: 6px 0px 0px 0px;
        font-size: var(--md-sys-typescale-body-small-font-size);
        font-weight: var(--md-sys-typescale-body-small-font-weight);
        line-height: var(--md-sys-typescale-body-small-line-height);
        letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
        cursor: pointer;
        overflow: hidden;
        background-color: rgba(0,0,0,.0);
        color: var(--md-sys-color-outline);
    }

    .md-tab-button-active {
        background-color: var(--md-ref-palette-primary80);
        color: var(--md-ref-palette-primary10);
    }

        .md-tab-button img,
        .md-tab-button-active img {
            height: 24px;
            width: 24px;
            margin: 0px 0px 0px 0px;
        }

    .md-tab-button:hover {
        background-color: var(--md-sys-color-transparent-shading10);
        color: var(--md-sys-color-on-surface)
    }

    .md-tab-button-active:hover {
        background-color: var(--md-ref-palette-primary70);
        color: var(--md-ref-palette-primary10)
    }
    /*#endregion Material Tabs*/
    /*#region business_card*/

    .business-card-details {
        float: left;
        width: 100%;
        background-color: var(--md-ref-palette-primary40);
        color: var(--md-sys-color-primary-container-light);
        border-radius: 16px;
        margin-bottom: 16px;
    }

    .business-card-details-header {
        text-align: center;
    }

    .business-card-details-section {
        text-align: Left;
        padding: 0px 0px 0px 0px;
        border-top: 1px solid var(--md-sys-color-border-light);
    }

    .business-card-details-section-header {
        text-transform: uppercase;
        color: var(--md-sys-color-background-light);
        font-size: 24px;
        font-weight: normal;
        letter-spacing: -0.25px;
        margin: -16px 0px 0px 0px;
        padding: 0px 0px 16px 0px;
    }

    .business-card-details-section-icon {
        float: left;
        width: 48px;
        margin: 0px 8px 0px 8px;
    }

    .business-card-details-section-icon-image {
        padding: 24px 12px 24px 12px;
        height: 36px;
        width: 36px
    }

    .business-card-details-section-data {
        padding: 20px 16px 8px 8px;
        float: left;
        width: calc(100% - 88px);
        color: var(--md-sys-color-background-light);
    }

        .business-card-details-section-data h2 {
            padding: 0px 0px 0px 0px;
            margin: -4px 0px 16px 0px;
            color: var(--md-sys-color-background-light);
            height: 24px;
            text-transform: uppercase;
        }

        .business-card-details-section-data .material_card_primary_title a,
        .business-card-details-section-data .material_card_primary_title {
            color: var(--md-sys-color-on-surface-light) !important;
            font-size: 18px;
            letter-spacing: -0.25px;
        }

        .business-card-details-section-data .material_card_secondary_title a,
        .business-card-details-section-data .material_card_secondary_title {
            color: #666666 !important;
            margin-bottom: 0px;
        }

    .business-card-image-qrcode {
        width: 80%;
        max-width: 450px;
    }

    .business_card_logo_container {
        padding: 90px 24px 90px 24px;
        text-align: center;
        /*    font-weight: 500;
    font-size: var(--md-sys-typescale-display-small-font-size);
    line-height: var(--md-sys-typescale-display-small-line-height);
    letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);*/
        border-top-right-radius: 16px;
        border-top-left-radius: 16px;
    }

    .business-card-logo-text {
        font-weight: 500;
        font-size: var(--md-sys-typescale-display-small-font-size);
        line-height: var(--md-sys-typescale-display-small-line-height);
        letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
    }

    .business-card-logo {
        width: 100%;
    }

    .business_card_data_point {
        border-top: 1px solid var(--md-sys-color-border);
        display: inline-block;
        width: 100%;
        height: 48px;
        padding: 16px;
        margin: 0px 0px -7px 0px;
    }

        .business_card_data_point:hover {
            background-color: var(--md-sys-color-transparent-shading10);
        }

    .business_card_data_point_icon {
        float: left;
        height: 36px;
        width: 36px;
        padding: 6px 0px 6px 0px;
    }

    .business_card_data_point_text {
        float: left;
        height: 48px;
        width: calc(100% - 72px);
        overflow: hidden;
        margin: 0px 0px 0px 16px;
    }

    .business_card_data_point_text_primary {
        width: 100%;
        height: 24px;
        margin: 0px;
        padding: 0px;
        font-weight: 500;
        font-size: 18px;
        line-height: 24px;
        overflow: hidden;
        letter-spacing: 0.25px;
        color: var(--md-sys-color-on-surface)
    }

    .business_card_data_point_text_secondary {
        width: 100%;
        margin: 0px;
        padding: 0px;
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
        color: var(--md-sys-color-outline);
        overflow: hidden;
    }

    .business-card-image-container {
        padding: 48px 20% 48px 20%;
    }

    .business-card-image,
    .business-card-image-right,
    .business-card-image-left {
        border-radius: 50%;
        height: 120px;
        width: 120px;
        margin: auto;
        background-color: var(--md-sys-color-surface);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        z-index: 10;
    }

    .business-card-image {
        margin: -80px auto -40px auto;
    }

    .business-card-image-hide {
        display: none;
    }

    .business-card-image-left {
        float: left;
        margin: -80px 0px -40px 16px;
    }

    .business-card-image-right {
        float: right;
        margin: -80px 16px -40px 0px;
    }

    .business-card-profession {
        color: var(--md-sys-color-background-light);
        font-size: 24px;
        font-weight: normal;
        letter-spacing: 0px;
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

    .business-card-specialty {
        color: var(--md-sys-color-surface-variant-light);
        font-size: 24px;
        font-weight: normal;
        letter-spacing: 0px;
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

    .business-card-section-header {
        margin: 0px;
        padding: 16px;
        color: var(--md-sys-color-on-surface-light);
        font-size: 18px;
        font-weight: bold;
    }

    .uploaded-image-container {
        text-align: center;
        margin-bottom: 16px;
    }

    .uploaded-image {
        width: 100%;
        max-width: 500px;
        margin: auto;
    }

    .experienceJobTitle {
        color: var(--md-sys-color-primary-light);
        font-size: 20px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 8px 0px;
    }

    .experienceBusinessNameAndDateContatiner {
        color: var(--md-sys-color-outline-light);
        margin: -8px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }

        .experienceBusinessNameAndDateContatiner img {
            height: 16px;
            width: 16px;
            margin: 16px 0px 0px 0px;
        }

    .experienceBusinessName {
        margin: 0px 24px 0px 4px;
        padding: 0px 0px 0px 0px;
    }

    .experienceDate {
        margin: 0px 0px 0px 4px;
        padding: 0px 0px 0px 0px;
    }
    /*#endregion business-card*/
    /*#region Tables */

.MaterialTableHeader {
    margin: 0px 0px 0px 0px;
    padding: 16px 16px 8px 16px;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-size: var(--md-sys-typescale-headline-small-font-size);
    font-weight: 500;
    line-height: var(--md-sys-typescale-headline-small-line-height);
    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid rgba(0,0,0,.10);
    border-left: 1px solid rgba(0,0,0,.10);
    border-right: 1px solid rgba(0,0,0,.10);
    border-bottom: 1px solid rgba(0,0,0,.10);
    min-height: 36px;
    /*    margin: 0px;
    padding: 16px 8px 16px 16px;
    border-bottom: 1px solid var(--md-sys-color-border);
    border-bottom: 1px solid rgba(0,0,0,.10);*/
}

        .MaterialTableHeader h2 {
            float: left;
            margin: 0px;
            padding: 0px 0px 8px 0px;
            font-size: var(--md-sys-typescale-headline-small-font-size);
            font-weight: 500;
            line-height: var(--md-sys-typescale-headline-small-line-height);
            letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
            text-decoration: none;
        }

    .MaterialTableHeaderButtonContainer {
        float: right;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

        .MaterialTableHeaderButtonContainer .ImageButton {
            float: right;
            margin: -8px 0px 0px 8px;
        }

        .MaterialTableHeaderButtonContainer .BlueButton {
            float: right;
            margin: -4px 0px 0px 8px;
        }

        .MaterialTableHeaderButtonContainer .ExtendedFAB {
            float: right;
            margin: -6px 0px 0px 8px;
        }

    .MaterialTableHeaderActionButtonContainer {
        float: right;
        margin: -14px 0px -14px -16px;
    }

    .StickyFirstColumnTable .MaterialTableContainer {
        position: relative;
    }

    .MaterialTable {
        font-size: 11pt;
        border-collapse: collapse;
        min-width: 500px; /* Set a minimum width to avoid squishing the table */
        width: 100%;
        color: var(--md-sys-color-on-background);
        border-bottom: 1px solid var(--md-sys-color-border);
        border-left: 1px solid var(--md-sys-color-border);
        border-right: 1px solid var(--md-sys-color-border);
        /*border: 1px solid var(--md-sys-color-border);*/
        background-color: var(--md-sys-color-background);
        border-bottom-right-radius: 24px;
        border-bottom-left-radius: 24px;
    }

        .MaterialTable td,
        .MaterialTable th {
            padding: 16px 8px;
            text-align: left;
        }

        .MaterialTable th {
            font-size: 9pt;
            border-bottom: 1px solid var(--md-sys-color-border);
            color: var(--md-sys-color-on-background);
            background-color: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-on-primary-container);
            position: sticky; /* Make the table header sticky */
            top: 0px; /* Adjust this value to the height of your fixed header above */
            z-index: 1; /* Ensure it appears above other table rows */
        }

        .MaterialTable h4 {
            font-weight: var(--md-sys-typescale-title-small-font-weight);
            font-size: var(--md-sys-typescale-title-small-font-size);
            line-height: var(--md-sys-typescale-title-small-line-height);
            letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
        }

        .MaterialTable tr:nth-child(even) {
            background-color: var(--md-ref-palette-neutral-variant95);
        }
    /* Inside a sheet the table inherits the parent's tone instead of
           painting itself white, and the zebra stripe becomes a single
           depth-independent translucent step (one layer, never compounds)
           in the neutral family rather than the off-hue lavender above. */
    .Sheet .MaterialTable {
        background-color: transparent;
    }

        .Sheet .MaterialTable tr:nth-child(even) {
            background-color: rgba(0, 0, 0, 0.035);
        }

    .MaterialTable table tr:nth-child(even) {
        background-color: transparent;
    }

    .MaterialTableContainer::-webkit-scrollbar {
        width: 8px;
        /* Horizontal bars are 8px platform-wide - they have to be grabbed, so they need to be
       hittable. */
        height: 8px;
        background-color: var(--md-sys-color-primary-container);
    }

    .MaterialTableContainer::-webkit-scrollbar-track {
        background-color: var(--md-sys-color-primary-container);
    }

    .MaterialTableContainer::-webkit-scrollbar-thumb {
        background-color: var(--md-sys-color-primary);
    }

    @media only screen and (max-width: 500px) {
        .MaterialTable td,
        .MaterialTable th {
            padding: 12px 8px; /* Adjust padding for smaller screens */
        }
    }

    .MaterialTableCellRed {
        color: white;
        background-color: Red;
    }

    .MaterialTableCellYellow {
        color: var(--md-sys-color-on-background);
        background-color: yellow;
    }

    .MaterialTableCellGreen {
        color: white;
        background-color: green;
    }
    /* Sticky first column styles */
    .StickyFirstColumnTable td:first-child,
    .StickyFirstColumnTable th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        font-size: 9pt;
        border-bottom: 1px solid var(--md-sys-color-border);
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
    }

    .StickyFirstColumnTable th:first-child {
        z-index: 3; /* Ensure the first header cell is above everything */
    }
        /* Add a subtle shadow to indicate scrolling */
        .StickyFirstColumnTable td:first-child::after,
        .StickyFirstColumnTable th:first-child::after {
            content: '';
            position: absolute;
            top: 0;
            right: -5px;
            bottom: 0;
            width: 5px;
            background: linear-gradient(to right, rgba(0,0,0,0.05), transparent);
        }

    .MaterialTableContainerSimple {
        width: 100%;
    }

    @media only screen and (max-width: 600px) {
        .MaterialTableContainerSimple .MaterialTable {
            min-width: unset;
            table-layout: fixed;
        }

            .MaterialTableContainerSimple .MaterialTable td:first-child {
                width: calc(100% - 60px);
            }

            .MaterialTableContainerSimple .MaterialTable td:last-child {
                width: 70px;
            }
    }
    /* TASK COLUMNS - the Dashboard → Tasks board.
   Deliberately NOT the status-board look. A status board is a MaterialTable: a bordered,
   white-backed data table whose cells happen to hold cards. A task board is a set of free
   standing columns on the page, sized so you can see that more of them exist off to the right.
   Both styles are wanted; they are different things, so they are different classes. */
    /* The frame around the board. It exists to hold the ‹ › arrows, which are positioned against
   it so they sit over the board rather than inside the part that animates.

   NO negative right margin. The board used to be pulled 16px past the page padding so its
   columns ran to the screen edge - invisible while the board had no background, but once it
   became a bordered panel its right edge stuck out past the tab bar and sheets above it while
   the left edge lined up. It now aligns with them on both sides. */
    .TaskBoardFrame {
        position: relative;
    }

    .TaskBoardContainer {
        display: block;
        width: 100%;
        max-width: 100%;
        /* Clips the table while it slides in from one side after a turn. The board does not
       scroll - it turns - so there is nothing to scroll to. */
        overflow: hidden;
        /* Same containment note as MaterialTableContainer: without it the table's content width
       propagates up and the whole sheet bleeds past the viewport. */
        contain: inline-size;
        /* The board's own surface. surface-dim, not surface-variant: the page below ~500px IS
       surface-variant, so a board that colour would have no edge. surface-dim sits a step
       darker than the page and gives the white cards the most lift of any surface token.
       Radius and border match .Sheet so it reads as one of the platform's panels. */
        background-color: var(--md-sys-color-surface-dim);
        border: 1px solid rgba(0,0,0,.1);
        border-radius: 20px;
        padding: 8px 0px;
        /* No scroll bar and no rotateX(180deg) flip. The flip only existed to put a scroll bar on
       top, and it had trapped anything position:fixed (a modal opened from a card) inside the
       board. The board turns now instead of scrolling, so neither is needed. */
    }

    /* The ‹ › buttons. FloatingActionButton supplies the round shape; these place them on the
   board's edges, over the first and last column headers. top: 12px = the board's 8px padding
   + (48px header - 40px button) / 2, so each arrow is centred on the header row. The board
   wraps, so both are always shown - there is no end to reach. */
    .TaskBoardArrow {
        position: absolute;
        top: 12px;
        z-index: 2;
        /* White, not primary. Primary and the header's secondary teal have almost identical
       brightness, so primary buttons disappeared into the header. White on the teal is about
       6.4:1, and the primary chevron on white about 6.5:1. */
        background-color: var(--md-sys-color-surface-container-lowest);
        color: var(--md-sys-color-primary);
    }

        /* Needed because FloatingActionButton's own hover would turn them dark again. Same
       specificity, later in the file, so this wins. */
        .TaskBoardArrow:hover {
            background-color: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-primary);
        }

    /* 9px is where the header itself begins - the board's 1px border plus the table's 8px
   border-spacing - so the arrow is anchored to the header's end, and its 6px margin is the
   gap between them. */
    .TaskBoardArrowLeft {
        left: 9px;
        margin-left: 6px;
    }

    .TaskBoardArrowRight {
        right: 9px;
        margin-right: 6px;
    }

    /* THREE EQUAL THIRDS. The board only ever renders three columns - it turns rather than
   scrolls - so fixed layout at 100% width splits it exactly into thirds, whatever the
   screen. (Fixed layout was wrong when every column was rendered at once: it squeezed all
   seven into the page instead of letting them overflow. With three, it is exactly right.) */
    .TaskBoardTable {
        border-collapse: separate;
        border-spacing: 8px 0px;
        table-layout: fixed;
        width: 100%;
        background-color: transparent;
        border: none;
    }

        .TaskBoardTable th,
        .TaskBoardTable td {
            width: 33.333%;
            vertical-align: top;
            padding: 8px;
        }

        /* 48px tall, padding INCLUDED (border-box). Without border-box a table cell's height
       excludes its padding, so the header rendered taller than set and the 40px arrows sat at
       its top instead of its middle. 48 leaves 4px above and below each arrow. */
        .TaskBoardTable th {
            height: 48px;
            box-sizing: border-box;
            vertical-align: middle;
            /* title-small, not 9pt. The column title is the label for everything under it and sat
           as the smallest text on the board's most prominent element. font-weight is a literal
           500 because the typescale weight tokens are declared as "500px", which is not a valid
           font-weight and is discarded by the browser. */
            font-size: var(--md-sys-typescale-title-small-font-size);
            line-height: var(--md-sys-typescale-title-small-line-height);
            letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
            font-weight: 500;
            color: var(--md-sys-color-on-secondary);
            background-color: var(--md-sys-color-secondary);
            border-radius: 12px;
            text-align: left;
        }

            /* Room for the arrows, which sit over the outer ends of the first and last header. */
            .TaskBoardTable th:first-child {
                padding-left: 56px;
            }

            .TaskBoardTable th:last-child {
                padding-right: 56px;
            }

        /* No panel behind the column. The board's own surface shows through, so the cards read as
       raised objects rather than as rows inside a white box.

       No side padding, so the cards are exactly as wide as the header above them. With 8px each
       side the header overhung the cards and the column's edges did not line up. Columns are
       still kept apart by the table's 8px border-spacing. */
        .TaskBoardTable td {
            background-color: transparent;
            padding: 8px 0px;
        }

    /* THE TURN. After each turn the table is replaced (keyed on the turn count) and slides in
   one column's width from the side the new column came from - a third of the table, which
   is exactly one column. The transform only exists during the animation, so it does not
   leave a lasting containing block that would trap a position:fixed modal. */
    @keyframes taskBoardFromRight {
        from {
            transform: translateX(33.333%);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes taskBoardFromLeft {
        from {
            transform: translateX(-33.333%);
        }

        to {
            transform: translateX(0);
        }
    }

    .TaskBoardSlideFromRight {
        animation: taskBoardFromRight 0.35s cubic-bezier(.25,.8,.25,1);
    }

    .TaskBoardSlideFromLeft {
        animation: taskBoardFromLeft 0.35s cubic-bezier(.25,.8,.25,1);
    }

    /* TABLET (portrait): two columns. A third of 768-834px is about 250px, which wraps card
   titles to four lines; half is about 400px, roughly a phone's width, which reads well.
   900px rather than 800px so the 11" iPads (820-834px) are included. The board opens on
   To-Do and In Progress, the first two slots. */
    @media only screen and (min-width: 601px) and (max-width: 900px) {
        .TaskBoardTable th:nth-child(3),
        .TaskBoardTable td:nth-child(3) {
            display: none;
        }

        .TaskBoardTable th,
        .TaskBoardTable td {
            width: 50%;
        }

        /* The second header is now the last one on screen, so it makes room for the right arrow. */
        .TaskBoardTable th:nth-child(2) {
            padding-right: 56px;
        }

        /* One column is half the board here, so the slide travels half its width. */
        .TaskBoardSlideFromRight {
            animation-name: taskBoardFromRightTablet;
        }

        .TaskBoardSlideFromLeft {
            animation-name: taskBoardFromLeftTablet;
        }
    }

    @keyframes taskBoardFromRightTablet {
        from {
            transform: translateX(50%);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes taskBoardFromLeftTablet {
        from {
            transform: translateX(-50%);
        }

        to {
            transform: translateX(0);
        }
    }

    /* PHONE: one column at a time. The markup still has three slots; the second and third are
   hidden, so the first fills the board and each turn brings the next column into it. A third
   of a phone - about 120px - is too narrow to read a card. */
    @media only screen and (max-width: 600px) {
        .TaskBoardTable th:nth-child(n+2),
        .TaskBoardTable td:nth-child(n+2) {
            display: none;
        }

        .TaskBoardTable th,
        .TaskBoardTable td {
            width: 100%;
        }

        /* The only header on screen now carries BOTH arrows, so it needs room at each end. */
        .TaskBoardTable th:first-child {
            padding-right: 56px;
        }

        /* One column is the whole board here, not a third of it, so the slide travels the full
       width. */
        .TaskBoardSlideFromRight {
            animation-name: taskBoardFromRightPhone;
        }

        .TaskBoardSlideFromLeft {
            animation-name: taskBoardFromLeftPhone;
        }
    }

    @keyframes taskBoardFromRightPhone {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes taskBoardFromLeftPhone {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(0);
        }
    }

    /* THE SCROLLING BOARD - CandidateStatusBoard (Pipeline). Same look as the Tasks board: same
   surface, same teal column headers, same raised cards. Two differences only:
     - EVERY switched-on column is drawn, not three, each 280px wide.
     - It SCROLLS sideways instead of turning, so no arrows, and no header room saved for them.
   Put TaskBoardScroll on the TaskBoardContainer. The .TaskBoardContainer.TaskBoardScroll prefix
   out-ranks the tablet/phone rules above that hide columns 2+, so nothing is hidden here. The
   scroll bar is MaterialTableContainer's. */
    .TaskBoardContainer.TaskBoardScroll {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: var(--md-sys-color-primary) var(--md-sys-color-primary-container); /* Firefox */
    }

        .TaskBoardContainer.TaskBoardScroll .TaskBoardTable {
            table-layout: auto;
            width: auto;
            min-width: 100%;
        }

            .TaskBoardContainer.TaskBoardScroll .TaskBoardTable th,
            .TaskBoardContainer.TaskBoardScroll .TaskBoardTable td {
                display: table-cell;
                width: 280px;
                min-width: 280px;
            }

            .TaskBoardContainer.TaskBoardScroll .TaskBoardTable th,
            .TaskBoardContainer.TaskBoardScroll .TaskBoardTable th:first-child,
            .TaskBoardContainer.TaskBoardScroll .TaskBoardTable th:last-child,
            .TaskBoardContainer.TaskBoardScroll .TaskBoardTable th:nth-child(2) {
                padding-left: 8px;
                padding-right: 8px;
            }

    /* THE UPDATES BOARD - exactly three columns (Coming Soon | Being Built | Live). On desktop all
   three fit, so there is nothing to turn: no arrows, and the first and last headers do not keep
   the 56px of room the arrows need. On a tablet (two columns) and a phone (one) the Tasks board's
   rules above hide the rest, and the arrows appear to turn the board. */
    .TaskBoardArrowNarrowOnly {
        display: none;
    }

    @media only screen and (max-width: 900px) {
        .TaskBoardArrowNarrowOnly {
            display: inline-block;
        }
    }

    @media only screen and (min-width: 901px) {
        .TaskBoardTable.TaskBoardNarrowArrows th:first-child,
        .TaskBoardTable.TaskBoardNarrowArrows th:last-child {
            padding-left: 8px;
            padding-right: 8px;
        }
    }

    /* Last, so it overrides the phone animation as well as the desktop one. */
    @media (prefers-reduced-motion: reduce) {
        .TaskBoardSlideFromRight,
        .TaskBoardSlideFromLeft {
            animation: none;
        }
    }

    /* The extra button row on a task card, opening up out of the row below it.
   Always in the page so it animates BOTH ways. Collapsed, it takes no height and its
   buttons can be neither clicked nor tabbed to - visibility waits for the fade to finish,
   the same delayed-visibility pattern the platform already uses elsewhere. */
    .TaskCardMoreRow {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transform: translateY(8px);
        visibility: hidden;
        transition: grid-template-rows 0.2s cubic-bezier(.25,.8,.25,1),
                    opacity 0.2s cubic-bezier(.25,.8,.25,1),
                    transform 0.2s cubic-bezier(.25,.8,.25,1),
                    visibility 0s 0.2s;
    }

        /* text-align: right lines the buttons up under the main row's, which float right. */
        .TaskCardMoreRow > div {
            overflow: hidden;
            text-align: right;
            padding: 0px 2px;
        }

    .TaskCardMoreRowOpen {
        grid-template-rows: 1fr;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        transition: grid-template-rows 0.25s cubic-bezier(.25,.8,.25,1),
                    opacity 0.25s cubic-bezier(.25,.8,.25,1),
                    transform 0.25s cubic-bezier(.25,.8,.25,1),
                    visibility 0s 0s;
    }

    @media (prefers-reduced-motion: reduce) {
        .TaskCardMoreRow,
        .TaskCardMoreRowOpen {
            transition: none;
        }
    }

    /* Task cards group their sections with spacing, not rules - the only divider kept is the one
   above the button row. material_card_header draws a bottom border on every card on the
   platform, so it is removed here for task cards alone rather than in that shared rule. */
    .TaskCard .material_card_header {
        border-bottom: none;
    }

    /* With no dividers, each gap was the section above's 16px bottom padding PLUS this section's
   16px top padding - 32px, sized for when a line sat in the middle of it. Dropping the top
   padding leaves one 16px gap between every section. Header and supporting text are always
   preceded by the header on a task card, so nothing ends up against the card's top edge. */
    .TaskCard .material_card_supporting_text {
        padding-top: 0px;
    }

    /* A post card's title block (ContentHeader) floats with an 8px left margin, which set the title
       8px further in than the chips and text below it. On a TaskCard-look card it lines up with
       everything else, as TaskCard's own title does. */
    .TaskCard .material_card_header_text {
        float: none;
        margin: 0px;
    }

    /* CardButtonBar's left slot: what the record SHOWS you - votes, counts - as opposed to
   what you DO to it, which stays on the right beside More. */
    .CardButtonBarLeft {
        float: left;
    }

    /* CardButtonBar OUTSIDE a material-card - the post page (PostDetail), so its buttons match the
       card's. CardButtonBar's row is position:absolute at bottom:0 and relies on the card being
       position:relative with 56px of bottom padding; this gives it the same box. The More row
       opens in the flow above it, as on a card. */
    .card_button_bar_standalone {
        position: relative;
        padding-bottom: 56px;
    }

        /* The card footer floats its buttons right; buttons in the left slot go left instead. */
        .CardButtonBarLeft .ExtendedImageButton {
            float: left;
        }
    /*#endregion Tables*/
    /*#region profile */

    .cv-details {
        float: left;
        width: 100%;
        background-color: var(--md-ref-palette-primary40);
        color: var(--md-sys-color-primary-container);
        border-radius: 12px;
        margin-bottom: 16px;
        /* Same elevation as .Sheet so the profile panel sits level with the sheets beside it. */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    }

    .cv-details-header {
        text-align: center;
    }

    .cv-details-section {
        text-align: Left;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    .cv-details-section-header {
        text-transform: uppercase;
        color: var(--md-sys-color-background);
        font-size: 24px;
        font-weight: normal;
        letter-spacing: -0.25px;
        margin: -16px 0px 0px 0px;
        padding: 0px 0px 16px 0px;
    }

    .cv-details-section-icon {
        float: left;
        width: 48px;
        margin: 0px 8px 0px 8px;
    }

    .cv-details-section-icon-image {
        padding: 24px 12px 24px 12px;
        height: 24px;
        width: 24px
    }

    .cv-details-section-data,
    .cv-details-section-data-with-icon {
        padding: 8px 16px 8px 0px;
        float: left;
        width: calc(100% - 80px);
        color: var(--md-sys-color-background);
        margin: 0px 0px 0px 64px;
    }

    .ResumeBody .cv-details-section-data,
    .ResumeBody .cv-details-section-data-with-icon {
        padding: 8px 16px 8px 0px;
        float: none;
        /* auto, not 100%: with 100% the 16px side margins and right padding pushed the box
           48px past the Sheet, and the Sheet's overflow: hidden cut the text off. */
        width: auto;
        color: var(--md-sys-color-background);
        margin: 0px 16px 0px 16px;
    }

    .cv-details-section-data-with-icon {
        padding: 20px 0px 0px 0px;
        width: calc(100% - 64px);
        margin: 0px 0px 0px 0px;
        border-top: 1px solid var(--md-sys-color-background);
    }

        .cv-details-section-data h2,
        .cv-details-section-data-with-icon h2 {
            padding: 0px 0px 0px 0px;
            margin: -4px 0px 16px 0px;
            color: var(--md-sys-color-background);
            height: 24px;
            text-transform: uppercase;
        }

        .cv-details-section-data-with-icon .material_card_primary_title,
        .cv-details-section-data .material_card_primary_title {
            color: var(--md-sys-color-background);
            font-size: var(--md-sys-typescale-body-large-font-size);
            font-weight: var(--md-sys-typescale-body-large-font-weight);
            line-height: var(--md-sys-typescale-body-large-line-height);
            letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
        }

            .cv-details-section-data-with-icon .material_card_primary_title a,
            .cv-details-section-data .material_card_primary_title a {
                color: var(--md-sys-color-background);
            }

        .cv-details-section-data-with-icon .material_card_secondary_title,
        .cv-details-section-data .material_card_secondary_title {
            color: var(--md-sys-color-surface-variant);
            margin-bottom: 0px;
            font-size: var(--md-sys-typescale-label-medium-font-size);
            font-weight: var(--md-sys-typescale-label-medium-font-weight);
            line-height: var(--md-sys-typescale-label-medium-line-height);
            letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
        }

        /* Resume entry pieces in the blue profile panel (outside .ResumeBody, e.g. ClearCandidateAction)
           keep the panel's original secondary-title look. The .ResumeBody rules below restyle them. */
        .cv-details-section-data .resume_entry_organization,
        .cv-details-section-data .resume_entry_meta,
        .cv-details-section-data .resume_entry_description {
            color: var(--md-sys-color-surface-variant);
            font-size: var(--md-sys-typescale-label-medium-font-size);
            font-weight: var(--md-sys-typescale-label-medium-font-weight);
            line-height: var(--md-sys-typescale-label-medium-line-height);
            letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
        }

        .cv-details-section-data .resume_entry_organization {
            margin-top: 3px;
        }

    .ResumeBody .cv-details-section-data-with-icon .material_card_primary_title,
    .ResumeBody .cv-details-section-data .material_card_primary_title {
        color: var(--md-sys-color-on-surface);
        font-size: var(--md-sys-typescale-title-medium-font-size);
        font-weight: var(--md-sys-typescale-title-medium-font-weight);
        line-height: var(--md-sys-typescale-title-medium-line-height);
        letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
    }

        .ResumeBody .cv-details-section-data-with-icon .material_card_primary_title a,
        .ResumeBody .cv-details-section-data .material_card_primary_title a {
            color: var(--md-sys-color-on-surface);
        }

    .ResumeBody .cv-details-section-data-with-icon .material_card_secondary_title,
    .ResumeBody .cv-details-section-data .material_card_secondary_title {
        color: var(--md-sys-color-on-surface);
        margin-bottom: 0px;
        font-size: var(--md-sys-typescale-label-medium-font-size);
        font-weight: var(--md-sys-typescale-label-medium-font-weight);
        line-height: var(--md-sys-typescale-label-medium-line-height);
        letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
    }

    /* Resume entry (Work Experience / Education): M3 hierarchy under the title-medium title -
       organization (body-medium), dates | location (body-small, muted), description (body-medium). */
    .ResumeBody .resume_entry_organization {
        color: var(--md-sys-color-on-surface);
        margin-top: 2px;
        font-size: var(--md-sys-typescale-body-medium-font-size);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    }

    .ResumeBody .resume_entry_meta {
        color: var(--md-sys-color-on-surface-variant);
        font-size: var(--md-sys-typescale-body-small-font-size);
        font-weight: var(--md-sys-typescale-body-small-font-weight);
        line-height: var(--md-sys-typescale-body-small-line-height);
        letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
    }

    .ResumeBody .resume_entry_description {
        color: var(--md-sys-color-on-surface);
        margin-top: 8px;
        font-size: var(--md-sys-typescale-body-medium-font-size);
        font-weight: var(--md-sys-typescale-body-medium-font-weight);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    }

    .cv-image-container {
        padding: 24px 20% 24px 20%;
        max-width: 300px;
        margin: auto;
    }

    .cv-image {
        border-radius: 50%;
        width: 100%;
    }

    .cv-name {
        text-transform: uppercase;
        color: var(--md-sys-color-background);
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.25px;
        margin: -16px 0px 0px 0px;
        padding: 0px 0px 16px 0px;
    }

    .cv-profession {
        color: var(--md-sys-color-background);
        font-size: 24px;
        font-weight: normal;
        letter-spacing: 0px;
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

    .cv-specialty {
        color: var(--md-sys-color-surface-variant);
        font-size: 24px;
        font-weight: normal;
        letter-spacing: 0px;
        margin: 0px;
        padding: 0px 0px 0px 0px;
    }

    .cv-section-header {
        margin: 0px;
        padding: 0px;
        color: var(--md-sys-color-on-surface);
        font-size: 18px;
        font-weight: bold;
        /*   border-top: 1px solid white;*/
    }

    .cv-section-header-icon {
        padding: 12px 20px 12px 20px;
        height: 24px;
        width: 24px;
        color: var(--md-sys-color-primary-container)
    }

    .cv-section-header-title-container {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        width: calc(100% - 60px);
        border-top: 1px solid white;
        display: flex;
    }

    .cv-section-header-title {
        padding: 16px 0px 16px 0px;
        color: white;
    }

    .cv-section-header-button-container {
        margin-left: auto;
        display: flex;
        align-items: center;
    }
    /*#endregion profile*/
    /*#region Pricing Card */

    .pricing-plans {
        margin: 0px auto 16px auto;
        /*    background-color: var(--md-sys-color-surface);*/
        /*color: var(--md-sys-color-on-surface);*/
        color: var(--md-sys-color-surface);
        overflow: hidden;
        border-radius: 16px;
        text-align: center;
        padding: 16px;
    }

        .pricing-plans h2 {
            text-align: center;
            font-size: var(--md-sys-typescale-display-medium-font-size);
            font-weight: var(--md-sys-typescale-display-medium-font-weight);
            line-height: var(--md-sys-typescale-display-medium-line-height);
            letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
            color: var(--md-sys-color-surface);
        }



        .pricing-plans p {
            text-align: center;
            font-size: var(--md-sys-typescale-headline-small-font-size);
            font-weight: var(--md-sys-typescale-headline-small-font-weight);
            line-height: var(--md-sys-typescale-headline-small-line-height);
            letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
        }

    .org_page_container .pricing-plans h2,
    .org_page_container .pricing-plans p {
        color: var(--md-sys-color-on-surface);
    }
    /* Pricing section */
    .pricing-section {
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
        margin: 50px 20px;
    }
    /* Individual pricing cards */
    .pricing-card {
        background-color: white;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 16px;
        margin: 10px;
        flex: 1;
        max-width: 350px;
        text-align: left;
        display: flex;
        flex-direction: column;
    }
        /* Flex-grow ensures the cards grow equally and align items at the top */
        .pricing-card h3 {
            font-size: 1.8em;
            margin-bottom: 0px;
            text-align: center;
            color: #333;
            flex-grow: 0; /* Header doesn't grow */
        }

    .pricing-card-description {
        text-align: center;
        color: var(--md-sys-color-outline);
        font-size: var(--md-sys-typescale-body-small-font-size);
        font-weight: var(--md-sys-typescale-body-small-font-weight);
        line-height: var(--md-sys-typescale-body-small-line-height);
        letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
        width: 100%;
        margin: 0px 0px 16px 0px;
    }

    .price {
        font-size: var(--md-sys-typescale-display-small-font-size);
        font-weight: var(--md-sys-typescale-display-small-font-weight);
        line-height: var(--md-sys-typescale-display-small-line-height);
        letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
        color: var(--md-sys-color-primary);
        text-align: center;
        width: 100%;
        margin: 15px 0px 8px 0px;
        flex-grow: 0; /* Price doesn't grow */
    }

    .price_label {
        text-align: center;
        width: 100%;
        color: var(--md-sys-color-on-surface);
    }




    .pricing-card p {
        margin: 12px 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--md-sys-color-on-surface);
        position: relative;
    }

    .pricing-card ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        font-weight: bold;
        flex-grow: 1; /* List will take up available space */
    }

        .pricing-card ul li {
            margin: 12px 0;
            color: #555;
            font-size: var(--md-sys-typescale-body-large-font-size);
            line-height: var(--md-sys-typescale-body-large-line-height);
            font-weight: var(--md-sys-typescale-body-large-font-weight);
            letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
            position: relative;
            padding-left: 25px; /* Create space for the checkmark */
        }
            /* Add blue checkmark before each list item */
            .pricing-card ul li::before {
                content: '✔'; /* Unicode for checkmark */
                position: absolute;
                left: 0;
                color: var(--md-sys-color-primary); /* Blue color for checkmark */
                font-size: var(--md-sys-typescale-body-large-font-size);
                line-height: var(--md-sys-typescale-body-large-line-height);
                font-weight: var(--md-sys-typescale-body-large-font-weight);
                letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
            }

    .pricing-card button {
        padding: 12px 25px;
        color: white;
        border: none;
        border-radius: 16px;
        font-size: 24px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 20px;
        flex-grow: 0; /* Button doesn't grow */
    }
    /* Responsive layout */
    @media (max-width: 768px) {
        .pricing-section {
            flex-direction: column;
            align-items: center;
        }

        .pricing-card {
            width: 95%;
            max-width: none;
            margin: 10px 0;
        }
        /*    h2 {
        font-size: 2.2em;
    }*/
    }

    @media (max-width: 480px) {
        .pricing-card {
            width: 95%;
        }
        /*    h2 {
        font-size: 2vw;
    }

    .price {
        font-size: 2vw;
    }*/
        /*    .pricing-card ul li {
        font-size: 1vw;
    }

    .pricing-card button {
        font-size: 1vw;
    }*/
    }
    /*#endregion Pricing Card */
    /*#region Landing Pages */
    /*#endregion Landing Pages*/

    .LandingPage {
        margin: 0px auto 16px auto;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        overflow: hidden;
        border-radius: 16px;
    }

        .LandingPage .Sheet {
            background-color: rgba(0,0,0,.05);
        }

        .LandingPage .header_container {
            text-align: center;
            margin: 0px 0px 24px 0px;
        }

        .LandingPage h1 {
            font-family: 'Roboto', Roboto, sans-serif !important;
            font-weight: var(--md-sys-typescale-display-large-font-weight);
            font-size: var(--md-sys-typescale-display-large-font-size);
            line-height: var(--md-sys-typescale-display-large-line-height);
            letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
            color: var(--md-sys-color-on-background);
            padding: 0px;
            margin: 16px 0px 8px 0px;
        }

        .LandingPage h2 {
            font-family: 'Roboto', Roboto, sans-serif !important;
            font-weight: var(--md-sys-typescale-display-small-font-weight);
            font-size: var(--md-sys-typescale-display-small-font-size);
            line-height: var(--md-sys-typescale-display-small-line-height);
            letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
            color: var(--md-sys-color-on-background);
            padding: 0px;
            margin: 16px 0px 8px 0px;
        }

        .LandingPage h3 {
            font-family: 'Roboto', Roboto, sans-serif !important;
            font-weight: var(--md-sys-typescale-headline-large-font-weight);
            font-size: var(--md-sys-typescale-headline-large-font-size);
            line-height: var(--md-sys-typescale-headline-large-line-height);
            letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
            color: var(--md-sys-color-on-background);
            padding: 0px;
            margin: 16px 0px 8px 0px;
        }

        .LandingPage .Sheet h3 {
            margin: 0px 0px 8px 0px;
        }

        .LandingPage .section_title {
            text-transform: uppercase;
            font-weight: bold;
        }

        .LandingPage .section_description {
        }

        .LandingPage .client_testimonial_container {
            background-color: rgba(0,0,0,.05);
            border-radius: 16px;
            padding: 16px;
            margin: 0px 8px 0px 8px
        }

        .LandingPage .client_testimonial {
            font-style: italic;
            font-weight: bold;
        }

        .LandingPage .client_testimonial_person {
        }

        .LandingPage .logo {
            text-align: center;
            max-width: 400px;
            margin: auto;
        }

        .LandingPage .trust_image_container {
            text-align: center;
        }

        .LandingPage .trust_image {
            max-height: 200px;
            margin: 16px auto 0px auto;
        }
    /*#region Progress Nodes */

    .progress-node-container {
        display: flex;
        justify-content: center; /* Center the group of nodes horizontally */
        align-items: center; /* Center children vertically if necessary */
        flex-direction: row; /* Align them in a row */
        margin: 0 auto; /* Optional: Centers the container if it has a fixed width */
    }


    .progress-node-wrapper {
        margin: 10px 4px; /* Add some spacing between nodes */
    }

    .progress-node-complete, .progress-node-incomplete {
        background-color: var(--md-sys-color-surface-variant);
        height: 5px;
        width: 50px;
        cursor: pointer; /* Make them look like clickable elements */
    }

    .progress-node-complete {
        background-color: var(--md-sys-color-primary);
    }
    /*#endregion Progress Nodes*/
    /*#region Blog */

    .blog-post {
        max-width: 800px;
        margin: 0 auto;
        padding: 16px;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        font-family: var(--md-sys-typescale-body-large-font-family-name);
        font-size: var(--md-sys-typescale-body-large-font-size);
        line-height: var(--md-sys-typescale-body-large-line-height);
        letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .blog-post .page_title {
            background-color: transparent;
            margin: 0px 0px 0px 0px;
            color: var(--md-sys-color-on-surface);
            padding: 0px 0px 0px 0px;
            text-align: Left;
            height: auto;
        }

            .blog-post .page_title h1,
            .blog-post .page_title h2 {
                font-size: 40px;
                font-weight: 900;
                line-height: 50px;
                letter-spacing: -0.5px;
                margin: 4px 0px 4px 0px;
            }

    .post-header {
        width: 100%;
    }

        .post-header h1 {
            font-size: 40px;
            font-weight: 900;
            line-height: 50px;
            letter-spacing: -0.5px;
            margin: 4px 0px 4px 0px;
        }

        .post-header p {
            font-weight: var(--md-sys-typescale-headline-large-font-weight);
        }

        .post-header .publish_date {
            color: var(--md-sys-color-outline);
            margin: 0px;
            padding: 0px;
        }

    .blog-post h2 {
        font-weight: 800;
        margin: 16px 0px 0px 0px;
        /*    font-family: var(--md-sys-typescale-headline-medium-font-family-name);
    font-size: var(--md-sys-typescale-headline-medium-font-size);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);*/
    }

    .blog-post h3 {
        font-weight: 600;
        margin: 12px 0px 0px 0px;
        /*    font-family: var(--md-sys-typescale-headline-medium-font-family-name);
    font-size: var(--md-sys-typescale-headline-medium-font-size);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);*/
    }

    .blog-post p {
        font-family: var(--md-sys-typescale-body-large-font-family-name);
        font-size: var(--md-sys-typescale-body-large-font-size);
        line-height: var(--md-sys-typescale-body-large-line-height);
        letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
    }

    small {
        font-family: var(--md-sys-typescale-body-medium-font-family-name);
        font-size: var(--md-sys-typescale-body-medium-font-size);
        line-height: var(--md-sys-typescale-body-medium-line-height);
        letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
    }

    .post-image {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        border-radius: 8px;
    }

    .post-content {
        font-size: 1.1em;
        line-height: 1.8;
        color: #333;
    }

    .post-tags {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
    }

    .tag-chip {
        background-color: #e0e0e0;
        padding: 6px 12px;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 50px;
        font-size: 0.9em;
        display: inline-block;
    }

    .share-buttons {
        margin-top: 0px;
        display: flex;
        gap: 15px;
        float: right;
    }

    .meta-info {
        margin-top: 0px;
        float: left;
        font-weight: var(--md-sys-typescale-label-medium-font-weight);
        font-size: var(--md-sys-typescale-label-medium-font-size);
        line-height: var(--md-sys-typescale-label-medium-line-height);
        letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
        text-transform: uppercase;
    }

    .author-info {
        font-weight: bold;
        width: 100%;
    }

    .post-footer {
        margin-top: 30px;
        font-size: 0.9em;
        color: #757575;
    }

    @media (max-width: 768px) {
        .blog-post {
            padding: 16px;
        }

        .post-header h1 {
            font-size: 36px;
            line-height: 40px;
            letter-spacing: -0.2px;
        }

        .blog-post h2 {
            font-size: 32px;
            line-height: 36px;
        }

        .blog-post h3 {
        }
    }
    /*#endregion Blog*/
    /*#region Homepage */

    .homepage-container {
        background-color: var(--md-sys-color-dark-blue);
        background: url("../../../../images/artwork/background.jpg") no-repeat center center fixed;
        text-align: center;
        z-index: 1;
    }

    .homepage-large-icon {
        color: var(--md-sys-color-dark-blue);
    }

    .ResponsiveColumn33 {
        text-align: center;
    }


.video-billboard {
    position: relative;
    overflow: hidden;
    /* Size the hero to the video's 16:9 shape instead of the text's height — without
       this the billboard is a short wide strip and object-fit:cover shows only a
       horizontal sliver of the footage. Height is COMPUTED from the width (56.25vw =
       16:9) rather than aspect-ratio + max-height, because that pair keeps the ratio
       by SHRINKING THE WIDTH when the height cap kicks in, leaving dead space beside
       the hero. Width stays 100%; the 85vh cap only crops footage on ultrawides. */
    height: min(56.25vw, 85vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .video-billboard .billboard-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video-billboard .billboard-video-scrim {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 24, 46, 0.45);
    }

    .video-billboard .billboard-video-content {
        position: relative;
    }

        .video-billboard .billboard-video-content h1 {
            font-weight: 800;
            color: #ffffff;
        }

        /* The base billboard darkens its <p> because the gradient fades to a light
           surface at the bottom — over video footage the whole hero stays dark, so
           every line of copy is white. */
        .video-billboard .billboard-video-content p {
            color: #ffffff;
        }


    .homepage-billboard,
    .page-billboard {
        text-align: center;
        background: linear-gradient(to bottom, #294364 0%, #3A608F 50%, #6180A5 65%, var(--md-sys-color-surface) 90%, var(--md-sys-color-surface) 100%);
        background: linear-gradient(to bottom, #002447 0%, #003C77 33%, #B3D6FA 80%, var(--md-sys-color-surface) 100%);
        margin: -16px 0px 0px 0px;
        padding: 48px 48px 48px 48px;
        border-bottom: 8px solid var(--md-sys-color-surface);
    }

        .homepage-billboard h1,
        .page-billboard h1 {
            color: #ffffff;
            font-weight: 500;
            font-size: var(--md-sys-typescale-display-medium-font-size);
            line-height: var(--md-sys-typescale-display-medium-line-height);
            letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
        }

        .homepage-billboard h2,
        .page-billboard h2 {
            color: #ffffff;
        }

        .homepage-billboard h3,
        .page-billboard h3,
        .homepage-billboard .billboard-subtitle,
        .page-billboard .billboard-subtitle {
            color: #ffffff;
            margin: 0px 0px 72px 0px;
            font-weight: var(--md-sys-typescale-headline-medium-font-weight);
            font-size: var(--md-sys-typescale-headline-medium-font-size);
            line-height: var(--md-sys-typescale-headline-medium-line-height);
            letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
        }

        .homepage-billboard h3,
        .page-billboard h3,
        .homepage-billboard .billboard-subtitle,
        .page-billboard .billboard-subtitle {
            color: #ffffff;
            margin: 0px 0px 72px 0px;
            font-weight: var(--md-sys-typescale-headline-medium-font-weight);
            font-size: var(--md-sys-typescale-headline-medium-font-size);
            line-height: var(--md-sys-typescale-headline-medium-line-height);
            letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
        }

        .homepage-billboard p,
        .page-billboard p {
            /* color: #ffffff;*/
            color: var(--md-sys-color-dark-blue);
        }

        .homepage-billboard .container p,
        .page-billboard .container p {
            color: #000000;
        }

        .homepage-billboard .container h3,
        .page-billboard .container h3,
        .homepage-billboard .container .billboard-subtitle,
        .page-billboard .container .billboard-subtitle {
            color: #000000;
        }

        .homepage-billboard .Clear,
        .page-billboard .Clear {
            height: 3vw;
        }

    .gradient-text {
        background: linear-gradient(180deg, var(--md-sys-color-light-blue), var(--md-sys-color-dark-blue));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .transparent-section {
        text-align: center;
        background-color: transparent;
        padding: 24px;
        margin: 0px;
    }

        .transparent-section h2 {
            background: linear-gradient(270deg, var(--md-sys-color-blue-button), var(--md-sys-color-dark-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            font-weight: 600;
            font-size: var(--md-sys-typescale-headline-large-font-size);
            line-height: var(--md-sys-typescale-headline-large-line-height);
            letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
        }

        .transparent-section h3 {
            color: var(--md-sys-color-primary);
            font-weight: 600;
            font-size: var(--md-sys-typescale-headline-medium-font-size);
            line-height: var(--md-sys-typescale-headline-medium-line-height);
            letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 16px 0px;
        }

        .transparent-section h4 {
            color: var(--md-sys-color-dark-blue);
            font-weight: 600;
            font-size: var(--md-sys-typescale-title-large-font-size);
            line-height: var(--md-sys-typescale-title-large-line-height);
            letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 16px 0px;
        }


        .transparent-section p {
            margin: 0px 16px 1vw 16px;
            font-weight: var(--md-sys-typescale-body-large-font-weight);
            font-size: var(--md-sys-typescale-body-large-font-size);
            line-height: var(--md-sys-typescale-body-large-line-height);
            letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 16px 0px;
        }

    .surface-section {
        text-align: center;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        padding: 24px;
        margin: 0px;
    }

        .surface-section h2 {
            background: linear-gradient(270deg, var(--md-sys-color-blue-button), var(--md-sys-color-dark-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            font-weight: 600;
            font-size: var(--md-sys-typescale-headline-large-font-size);
            line-height: var(--md-sys-typescale-headline-large-line-height);
            letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
        }

        .surface-section h3 {
            color: var(--md-sys-color-primary);
            font-weight: 600;
            font-size: var(--md-sys-typescale-headline-small-font-size);
            line-height: var(--md-sys-typescale-headline-small-line-height);
            letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 16px 0px;
        }

        .surface-section h4 {
            color: var(--md-sys-color-dark-blue);
            font-weight: 600;
            font-size: var(--md-sys-typescale-title-large-font-size);
            line-height: var(--md-sys-typescale-title-large-line-height);
            letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 16px 0px;
        }

        .surface-section p {
            margin: 0px 16px 1vw 16px;
            font-weight: var(--md-sys-typescale-body-large-font-weight);
            font-size: var(--md-sys-typescale-body-large-font-size);
            line-height: var(--md-sys-typescale-body-large-line-height);
            letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 16px 0px;
        }

        .surface-section .ResponsiveColumn25 h3 {
            min-height: 60px;
        }

        .surface-section .md-tab-button-container {
            background-color: var(--md-sys-color-surface-container)
        }

    .surface-variant-section {
        text-align: center;
        background-color: var(--md-sys-color-surface-variant);
        color: var(--md-sys-color-on-surface-variant);
        padding: 24px;
        margin: 0px;
    }

        .surface-variant-section h2 {
            background: linear-gradient(270deg, var(--md-sys-color-blue-button), var(--md-sys-color-dark-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            font-weight: 600;
            font-size: var(--md-sys-typescale-headline-large-font-size);
            line-height: var(--md-sys-typescale-headline-large-line-height);
            letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
        }

        .surface-variant-section h3 {
            color: var(--md-sys-color-primary);
            font-weight: 600;
            font-size: var(--md-sys-typescale-headline-medium-font-size);
            line-height: var(--md-sys-typescale-headline-medium-line-height);
            letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
            padding: 0px 0px 0px 0px;
            margin: 8px 0px 16px 0px;
        }

        .surface-variant-section h4 {
            color: var(--md-sys-color-dark-blue);
            font-weight: 600;
            font-size: var(--md-sys-typescale-title-large-font-size);
            line-height: var(--md-sys-typescale-title-large-line-height);
            letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 16px 0px;
        }

        .surface-variant-section p {
            margin: 0px 16px 1vw 16px;
            font-weight: var(--md-sys-typescale-body-large-font-weight);
            font-size: var(--md-sys-typescale-body-large-font-size);
            line-height: var(--md-sys-typescale-body-large-line-height);
            letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 16px 0px;
        }

    .container {
        max-width: 1000px;
        margin: auto;
        padding: 36px 48px 36px 48px;
    }

    .homepage-subsection {
        margin: 24px 0px 24px 0px;
    }

    @media only screen and (max-width: 600px) {
        .page-billboard, .homepage-billboard {
            padding: 16vw 5vw 16vw 5vw;
        }

            .page-billboard h1,
            .homepage-billboard h1 {
                font-weight: 600;
                font-size: var(--md-sys-typescale-headline-small-font-size);
                line-height: var(--md-sys-typescale-headline-small-line-height);
                letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
            }

            .page-billboard h3,
            .homepage-billboard h3,
            .page-billboard .billboard-subtitle,
            .homepage-billboard .billboard-subtitle {
                margin: 0px 0px 72px 0px;
                letter-spacing: 0px;
                font-weight: var(--md-sys-typescale-title-medium-font-weight);
                font-size: var(--md-sys-typescale-title-medium-font-size);
                line-height: var(--md-sys-typescale-title-medium-line-height);
                letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
            }

            .page-billboard .Clear,
            .homepage-billboard .Clear {
                height: 10vw;
            }

            /* The billboard height is COMPUTED FROM THE WIDTH (56.25vw, see .video-billboard),
               so on a phone the box shrinks at exactly the moment the copy wraps taller. At
               375px the box was 211px while the text block was 432px, and overflow:hidden
               clipped ~220px evenly off both ends — the <h1> did not render at all. Let the
               hero grow to its content here and keep 16:9 only as a FLOOR. */
            .video-billboard {
                height: auto;
                min-height: min(56.25vw, 85vh);
            }

            /* 72px under the subtitle is desktop spacing; on a phone it reads as a dead gap
               in the middle of the hero. Scoped to the subtitle so h3 keeps its own margin. */
            .page-billboard .billboard-subtitle,
            .homepage-billboard .billboard-subtitle {
                margin: 0px 0px 28px 0px;
            }
    }
    /* Tab Content Layout */
    .audience-image {
        max-width: 400px;
        width: 100%;
        margin: auto;
        background-color: var(--md-sys-color-primary-container);
        border-radius: 24px;
    }

        .audience-image img {
            width: 100%;
            border-radius: 24px;
        }
    /* Feature List Styling */
    .feature-list {
        margin: 24px 0;
        padding-left: 24px;
        text-align: left;
    }

        .feature-list li {
            margin-bottom: 12px;
            position: relative;
            padding-left: 8px;
        }

            .feature-list li::before {
                content: "•";
                color: var(--md-sys-color-primary, #0078e7);
                font-weight: bold;
                position: absolute;
                left: -16px;
            }
    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .audience-content {
            flex-direction: column;
        }

        .audience-image {
            width: 100%;
            margin-top: 24px;
        }
    }
    /*#endregion Homepage*/
    /*#region Tutorial */

    .tutorial-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        pointer-events: none;
    }

    @media only screen and (min-width: 1200px) {
        .navDrawerMargin .tutorial-container {
            left: 68px;
            width: calc(100% - 68px);
        }
    }

    .tutorial-container.hidden {
        display: none;
    }

    .tutorial-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        pointer-events: auto;
    }

    .tutorial-popup {
        position: absolute;
        pointer-events: auto;
        width: calc(100% - 24px);
        max-width: 320px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 10000;
    }

    .close-button {
        position: absolute;
        top: 8px;
        right: 8px;
        background: none;
        border: none;
        font-size: 20px;
        color: #666;
        cursor: pointer;
        padding: 4px;
        line-height: 1;
    }

    .tutorial-content {
        padding: 20px;
    }

        .tutorial-content .RightButtonContainer {
            padding: 0px;
        }

    .step-counter {
        color: #666;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .tutorial-title {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 500;
        color: #333;
    }

    .tutorial-message {
        margin: 0px 0px 4px 0px;
        font-size: 14px;
        color: #666;
        line-height: 1.5;
    }

        .tutorial-message p {
            margin: 0 0 0 0;
        }

    .got-it-button {
        background: #ff4081;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 8px 24px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }

        .got-it-button:hover {
            background: #f50057;
        }
    /*#endregion Tutorial*/
    /*#region Multiselect */
    .custom-multiselect {
        position: relative;
        min-width: 180px;
        outline: none;
    }

    .multiselect-label {
        position: absolute;
        top: -8px; /* Fine-tuned position */
        left: 10px; /* Slightly adjusted */
        font-size: 12px;
        color: #666;
        background-color: white;
        padding: 0 4px;
        font-weight: 400;
        z-index: 1;
    }

    .multiselect-summary,
    .multiselect-summary-selected {
        padding: 8px 12px; /* Back to original padding */
        cursor: pointer;
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: white;
        min-height: 20px; /* Back to original min-height */
        margin-top: 8px;
    }

    .multiselect-summary-selected {
        border-radius: 4px 4px 0 0;
        border-bottom: none;
    }

        .multiselect-summary .fieldIcon,
        .multiselect-summary-selected .fieldIcon {
            float: right;
            margin-top: -2px;
        }

    .multiselect-dropdown {
        position: absolute;
        width: 100%;
        max-width: 215px;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 4px 4px;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: white;
        z-index: 1000;
    }

    .multiselect-search {
        width: 100%;
        padding: 8px;
        border: none;
        border-bottom: 1px solid #ccc;
    }

    .checkbox-list {
        padding: 8px;
    }

    .checkbox-item {
        margin-bottom: 4px;
    }

        .checkbox-item label {
            font-weight: var(--md-sys-typescale-body-small-font-weight);
            font-size: var(--md-sys-typescale-body-small-font-size);
            line-height: var(--md-sys-typescale-body-small-line-height);
            letter-spacing: var(--md-sys-typescale-body-small-letter-spacing );
        }

    @media (max-width: 840px) {
        .custom-multiselect {
            width: 100%;
        }

        .multiselect-summary,
        .multiselect-summary-selected {
            /* Full width, matching the Radzen text fields beside them in the search panel.
               This was calc(100% - 24px), which left the multiselects visibly short of the
               right edge while every other field reached it. */
            width: 100%;
        }
    }
    /*#endregion Multiselect*/
    /*#region Setting Container */
    .setting-container {
        display: inline-block;
        margin: 0;
        padding: 14px 16px 8px 16px;
        min-height: 24px;
        vertical-align: middle;
        line-height: var(--md-sys-typescale-body-large-line-height);
        font-weight: 500;
        font-size: var(--md-sys-typescale-body-large-font-size:);
        letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
        background-color: var(--md-sys-color-surface);
        border: 1px solid var(--md-sys-color-border);
        width: calc(100% - 32px);
    }

    .setting-container-control {
        z-index: 0;
        position: relative;
        display: inline-block;
        width: 100%;
    }
        /* Input */
        .setting-container-control > input {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            z-index: -1;
            position: absolute;
            right: 6px;
            top: -8px;
            display: block;
            margin: 0;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            background-color: var(--md-sys-color-outline-light);
            outline: none;
            opacity: 0;
            transform: scale(1);
            pointer-events: none;
            transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
            float: right;
        }
        /* Span */
        .setting-container-control > span {
            display: inline-block;
            width: 100%;
            cursor: pointer;
            float: left;
            color: var(--md-sys-color-on-surface-light);
        }
    /*#endregion Setting Container*/
    /*#region Content */
    /*#region Vote Button */
    /* Vote Button Styles - Matching your outline buttons exactly */

    .header-vote-controls {
        vertical-align: top;
        display: inline-flex;
        align-items: center;
        background-color: transparent;
        border: 1px solid var(--md-sys-color-primary);
        border-radius: 24px;
        padding: 2px 16px;
        margin: 8px 8px 0px 8px;
        min-height: 40px;
        gap: 8px;
        font-family: var(--md-sys-typescale-label-large-font-family-name);
        font-size: var(--md-sys-typescale-label-large-font-size);
        font-weight: var(--md-sys-typescale-label-large-font-weight);
        letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
        line-height: var(--md-sys-typescale-label-large-line-height);
        color: var(--md-sys-color-primary);
        cursor: pointer;
        transition: all 0.2s ease;
        /* Remove any shadows to match your outline buttons */
        box-shadow: none;
    }

        .header-vote-controls.upvoted {
            background-color: var(--md-sys-color-dark-blue);
            background-color: var(--md-sys-color-dark-blue);
            color: var(--md-sys-color-surface);
        }

        .header-vote-controls.downvoted {
            background-color: var(--md-sys-color-red);
            background-color: var(--md-sys-color-red);
            color: var(--md-sys-color-surface);
        }

        .header-vote-controls.disabled {
            opacity: 0.38;
            cursor: not-allowed;
            background-color: rgba(0,0,0,0.1);
            color: var(--md-sys-color-outline);
            border: 1px solid rgba(0,0,0,0.2);
        }

        .header-vote-controls.loading {
            opacity: 0.7;
        }

    .header-vote-button {
        background: none;
        border: none;
        padding: 4px;
        margin: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        transition: background-color 0.2s ease;
        color: inherit;
        min-width: 24px;
        min-height: 24px;
    }

        .header-vote-button:hover {
            background-color: rgba(0, 0, 0, 0.08);
        }

        .header-vote-button:active {
            background-color: rgba(0, 0, 0, 0.12);
        }

        .header-vote-button:disabled {
            cursor: not-allowed;
            opacity: 0.38;
        }

    .header-vote-count {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        color: inherit;
        min-width: 20px;
        text-align: center;
        user-select: none;
        margin: 0 4px;
    }

    .header-vote-button .iconify {
        display: block;
        width: 20px;
        height: 20px;
    }

    .header-vote-button:focus-visible {
        outline: 2px solid var(--md-sys-color-primary);
        outline-offset: 2px;
    }

    .header-vote-controls * {
        box-sizing: border-box;
    }
    /*#endregion Vote Button*/

    .vote-container {
        margin: 0px 4px 0px 8px;
        float: left;
        padding-top: 10px;
    }

    .comment-button-container {
        margin: 0px 4px 0px 4px;
        float: left;
        padding-top: 10px;
    }

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

    .vote-controls {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 4px 8px;
        border-radius: 20px;
        margin: 0px 0px 12px 0px;
        background-color: var(--md-sys-color-surface-variant);
        color: var(--md-sys-color-on-surface-variant);
        transition: all 0.2s ease;
    }
        /* Upvoted state - red background like Image 1 */
        .vote-controls.upvoted,
        .vote-controls.upvoted .vote-button,
        .vote-controls.upvoted .vote-count {
            background-color: var(--md-sys-color-red); /* Reddit upvote orange/red */
            color: var(--md-sys-color-surface);
        }
        /* Downvoted state - blue background like Image 2 */
        .vote-controls.downvoted,
        .vote-controls.downvoted .vote-button,
        .vote-controls.downvoted .vote-count {
            background-color: var(--md-sys-color-dark-blue); /* Blue-purple like in image 2 */
            color: var(--md-sys-color-surface);
        }

    .vote-button {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--md-sys-color-on-surface-variant);
        padding: 2px;
        transition: all 0.2s ease;
    }

        .vote-button:hover {
            opacity: 0.8;
        }

    .vote-count {
        font-weight: bold;
        margin: 0 6px;
        font-size: 14px;
        color: var(--md-sys-color-on-surface-variant);
    }

    .comment-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 6px 10px 6px 10px;
        border-radius: 20px;
        margin-right: 0px 0px 12px 0px;
        background-color: var(--md-sys-color-surface-variant);
        color: var(--md-sys-color-on-surface-variant);
        transition: all 0.2s ease;
        /*    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;*/
        cursor: pointer;
        /*    transition: background-color 0.2s ease;*/
    }

        .comment-button:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

    .comment-icon {
        color: #878A8C;
        font-size: 1rem;
    }

    .comment-count {
        color: var(--md-sys-color-on-surface-variant);
        font-size: 0.875rem;
        font-weight: 500;
    }
    /* Optional: Add a press effect */
    .comment-button:active {
        transform: scale(0.98);
    }
    /* Comments styling */
    .comment-thread {
        margin-bottom: 16px;
    }

    .comment-thread-root {
        margin-bottom: 1.5rem;
    }

    .comment-thread-nested {
        margin-top: 0.5rem;
    }

    .comment-replies {
        border-left: 2px solid #e5e5e5;
        margin-left: 1.5rem;
        padding-left: 0.5rem;
    }

    .vote-count {
        font-size: 0.875rem;
        font-weight: 500;
        min-width: 30px;
        text-align: center;
    }

    .comment-body {
        white-space: pre-line;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    /* Comment button styling */

    .comment-button .iconify {
        margin-right: 6px;
    }
    /*#region Content Calendar */
    .content-calendar-container {
        width: 100%;
        margin: 0 auto;
    }

    .calendar-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .calendar-title {
        display: flex;
        align-items: center;
        gap: 15px;
    }

        .calendar-title h2 {
            margin: 0;
        }
    /* Grid container to ensure alignment */
    .calendar-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    /* Fixed layout for weekdays and days */
    .weekdays, .days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        width: 100%;
    }

    .weekdays {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .weekday {
        text-align: center;
        font-weight: bold;
    }

    .days {
        gap: 2px;
    }

    .day {
        border: 1px solid #e0e0e0;
        min-height: 100px;
        padding: 5px;
        position: relative;
        /* Prevent content from overflowing */
        overflow: hidden;
    }

        .day.empty {
            background-color: var(--md-sys-color-surface);
        }

        .day.today {
            background-color: var(--md-sys-color-surface-variant);
        }

    .day-number {
        position: absolute;
        top: 5px;
        right: 5px;
        font-weight: bold;
    }

    .content-items {
        margin-top: 25px;
        /* Keep content items contained within the day cell */
        width: 100%;
    }

    .content-item {
        padding: 5px;
        border-radius: 4px;
        margin-bottom: 5px;
        font-size: 12px;
        cursor: pointer;
        /* Ensure content stays within the cell boundaries */
        width: calc(100% - 10px);
        box-sizing: border-box;
    }

        .content-item.published {
            background-color: var(--md-sys-color-primary-container);
            border-left: 3px solid var(--md-sys-color-on-primary-container);
            color: var(--md-sys-color-on-primary-container);
        }

        .content-item.unpublished {
            background-color: var(--md-sys-color-tertiary-container);
            border-left: 3px solid var(--md-sys-color-on-tertiary-container);
            color: var(--md-sys-color-on-tertiary-container);
        }

        .content-item .title {
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .content-item .time {
            font-size: 10px;
            color: #757575;
        }
    /* Calendar Legend Styles */
    .calendar-legend {
        margin-top: 20px;
        border-top: 1px solid #e0e0e0;
        padding-top: 15px;
    }

        .calendar-legend h3 {
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 500;
        }

    .legend-items {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        margin-right: 15px;
    }

    .legend-color {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        margin-right: 8px;
    }

        .legend-color.published {
            background-color: #4caf50; /* Green for published content - adjust to match your actual color */
        }

        .legend-color.unpublished {
            background-color: #ff9800; /* Orange for unpublished content - adjust to match your actual color */
        }

        .legend-color.today-indicator {
            background-color: #e3f2fd; /* Light blue for today - adjust to match your actual "today" highlight */
            border: 1px solid #2196f3;
        }

    .legend-label {
        font-size: 14px;
    }
    /* Make sure the calendar legend is responsive */
    @media (max-width: 768px) {
        .legend-items {
            flex-direction: column;
            gap: 10px;
        }

        .legend-item {
            margin-right: 0;
        }
    }
    /*#endregion Content Calendar*/
    /*#endregion Content*/
    /*#region Vica Chat */
    /* Chat bubbles inside modal */
    .conversation-container {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding-right: 20px;
    }

    .avatar_image_container {
        float: left;
        width: 20%;
        text-align: right;
        padding-right: 15px;
        padding-bottom: 15px;
    }

    .avatar_image {
        width: 100%;
        max-width: 180px;
        border-radius: 50%;
    }

    .avatar_chat_bubble_container {
        float: right;
        width: 75%;
        text-align: left;
        padding-top: 20px;
    }

    .avatar_chat_bubble {
        position: relative;
        background: var(--md-sys-color-surface-variant, #f0f8ff);
        border-radius: 15px;
        padding: 15px 20px;
        margin-bottom: 20px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        line-height: 1.5;
        color: var(--md-sys-color-on-surface-variant, #333);
    }
        /* Chat bubble triangle pointer */
        .avatar_chat_bubble:before {
            content: "";
            position: absolute;
            left: -15px;
            top: 15px;
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-right: 15px solid var(--md-sys-color-surface-variant, #f0f8ff);
        }
    /* Resulting content styling */
    .resulting_content_container {
        margin: 15px auto 25px auto;
        background-color: var(--md-sys-color-surface-variant);
        color: var(--md-sys-color-on-surface-variant);
        overflow: hidden;
        border-radius: 16px;
        padding: 20px;
        border-left: 4px solid var(--md-sys-color-primary);
        font-size: 15px;
        line-height: 1.5;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    /*.avatar_image_container {
    float: left;
    width: 20%;
    text-align: right;
    padding-right: 15px;
    padding-bottom: 15px;
}

.avatar_image {
    width: 100%;
    max-width: 180px;
    border-radius: 50%;
}

.avatar_chat_bubble_container {
    float: right;
    width: 75%;
    text-align: left;
    padding-top: 20px;
}

.avatar_chat_bubble {
    position: relative;
    background: var(--md-sys-color-surface-variant);
    border-radius: 15px;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    line-height: 1.5;
    color: var(--md-sys-color-on-surface-variant);
}*/
    /* Chat bubble triangle pointer */
    /*.avatar_chat_bubble:before {
        content: "";
        position: absolute;
        left: -15px;
        top: 15px;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-right: 15px solid var(--md-sys-color-surface-variant);
    }*/
    /*#endregion Vica Chat*/
    /*#region Public Profile */
    /*#endregion Public Profile*/

    .accountPublicProfileLogoContainer {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* Increased shadow for more depth */
        background-color: var(--md-sys-color-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin: 16px auto 16px auto;
        border: 4px solid rgba(255, 255, 255, 0.8); /* Add white border for floating effect */
    }

    .accountPublicProfileLogoImage {
        width: calc(100% - 16px);
        height: auto; /* Maintains aspect ratio */
        max-width: 150px; /* 180px - 16px to match your calc */
        max-height: 150px; /* Prevents vertical overflow */
        object-fit: contain; /* Ensures the entire logo is visible */
    }

    .accountPublicProfileHeaderContainer {
        width: 100%;
        background: linear-gradient(to bottom, var(--md-ref-palette-neutral80) 0%, var(--md-ref-palette-neutral-variant90) 25%, var(--md-ref-palette-neutral95) 50%, var(--md-sys-color-surface) 75%, var(--md-sys-color-surface) 100%);
        margin: 0px auto 16px auto;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        overflow: hidden;
        border-radius: 16px;
    }

    .accountPublicProfileHeaderContainerCard {
        width: 100%;
        /*    background: linear-gradient(to bottom, var(--md-ref-palette-neutral80) 0%, var(--md-ref-palette-neutral-variant90) 25%, var(--md-ref-palette-neutral95) 50%, var(--md-ref-palette-neutral-variant98) 75%, var(--md-sys-color-surface) 100%);
*/ margin: 0px;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        overflow: hidden;
        padding: 32px 8px 24px 8px;
        /*    border-radius: 16px;*/
        border-bottom: 1px solid var(--md-sys-color-surface-variant);
    }

    .accountPublicProfileLogoSection {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 16px;
    }

    .accountPublicProfileOrgName {
        font-size: 36px; /* Increased from 32px */
        font-weight: 800; /* Increased from 700 for more prominence */
        color: var(--md-sys-color-on-surface);
        text-align: center;
        letter-spacing: -0.5px; /* Tighter letter spacing for modern look */
    }

    .accountPublicProfileOrgNameCard {
        font-size: 26px; /* Increased from 32px */
        font-weight: 800; /* Increased from 700 for more prominence */
        color: var(--md-sys-color-on-surface);
        text-align: center;
        margin-bottom: 8px;
        letter-spacing: -0.4px; /* Tighter letter spacing for modern look */
    }

    @media (max-width: 768px) {

        .accountPublicProfileOrgName {
            font-size: 30px; /* Increased from 28px */
            margin-bottom: 8px;
        }
    }
    /*#region Region */
    /*#endregion Region*/



/*#region Leaflet Map */
/* Leaflet renders the basemap as adjacent 256px tile images. At browser zooms and device
   pixel ratios that are not whole numbers, those images round to slightly different sizes and
   a hairline gap opens between them - which reads as a faint grid over the whole map.
   Oversizing each tile by half a pixel makes them overlap instead of butt together, closing
   the seams. Scoped to .leaflet-container so it can only ever affect a Leaflet basemap. */
.leaflet-container .leaflet-tile {
    width: 256.5px !important;
    height: 256.5px !important;
}
/*#endregion Leaflet Map*/