@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: 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-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: 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);
    }

        .page_title h1,
        .page_title h2 {
            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);
            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-top: 1px solid rgba(0,0,0,.05);
    margin: 16px 0px 16px 0px;
}

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

.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 {
    font-family: "Roboto Condensed";
    padding: 32px 8px 0px 16px;
    color: #212121;
    float: left;
    font-size: 40px;
    font-weight: 300;
    display: block;
}

    .masterheadertextdark:hover {
        color: #212121;
    }

.masterheadertextwhite {
    font-family: "Roboto Condensed";
    padding: 30px 8px 0px 16px;
    color: #FFFFFF;
    float: left;
    font-size: 40px;
    font-weight: 300;
    display: block;
}

    .masterheadertextwhite:hover {
        color: #FFFFFF;
    }

.masterheadermenu {
    display: none;
}

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

.masterheaderlogo {
    padding: 20px 0px 0px 0px;
    margin: 0px 16px 0px 16px;
    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: 20px 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);
            background-color: var(--md-ref-palette-primary90);
        }

.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: 10px 0px 0px 0px;
        margin: 0px 0px 0px 8px;
        color: var(--md-sys-color-background);
        float: left;
        height: 36px;
        display: block;
    }

    .masterheader {
        height: 56px;
    }

    .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: 24px;
    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: 24px;
    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: 24px;
    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: 24px;
    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;
    }

    .navDrawerOrg .NavMenuLinkImage,
    .navDrawer .NavMenuLinkImage {
        height: 24px;
        width: 24px;
        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;
        }

        .navDrawerOrg .NavMenuLinkText,
        .navDrawer .NavMenuLinkText {
            width: 100%;
            font-size: 12px;
            padding: 4px 8px;
        }

        .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: 4px 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 0px 0px;
        padding: 0px 0px 0px 0px;
    }

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


.masterfooterNavBar {
    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;
}

@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-primary-light);
    min-height: 200px;
    width: 100%;
}

    .ProfileDetails h1,
    .ProfileDetails h2,
    .ProfileDetails h3,
    .ProfileDetails h4,
    .ProfileDetails h5,
    .ProfileDetails p {
        color: var(--md-sys-color-on-background-light);
    }

.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;
}

.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;
}

.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,
    .ResponsiveLeftColumn60 .Sheet,
    .ResponsiveLeftColumn50 .Sheet,
    .ResponsiveLeftColumn50Picture .Sheet,
    .ResponsiveLeftColumn45 .Sheet,
    .ResponsiveLeftColumn40 .Sheet,
    .ResponsiveLeftColumn35 .Sheet,
    .ResponsiveLeftColumn30 .Sheet,
    .ResponsiveRightColumn70 .Sheet,
    .ResponsiveRightColumn60 .Sheet,
    .ResponsiveRightColumn50 .Sheet,
    .ResponsiveRightColumn50Picture .Sheet,
    .ResponsiveRightColumn40 .Sheet,
    .ResponsiveRightColumn30 .Sheet,
    .ResponsiveRightColumn20 .Sheet,
    .ResponsiveRightColumn50RightAlign .Sheet,
    .ResponsiveColumn33 .Sheet,
    .ResponsiveColumn33Centered .Sheet,
    .ResponsiveColumn25 .Sheet,
    .ResponsiveAsymetricalLeftColumn .Sheet,
    .ResponsiveAsymetricalMiddleColumn .Sheet,
    .ResponsiveAsymetricalRightColumn .Sheet {
        margin: 0px 0px 16px 0px;
    }

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

    .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;
    }
}

.ResponsiveWrapper hr {
    border: 0;
    height: 0;
    border-top: 1px solid var(--md-sys-color-on-background-light);
    border-bottom: 0px solid var(--md-sys-color-on-background-light);
    padding: 0;
    margin: 16px 0px 16px 0px;
}

/*#endregion Responsive Wrapper*/

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

/*#region Buttons*/

/*#region Core Buttons*/
.DisabledButton,
.cta-button,
.OutlinedExtendedFAB,
.ExtendedFAB,
.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 {
    border-width: 0px;
    display: inline-block;
    font: var(--md-sys-typescale-body-medium-font-family-name);
    text-align: center;
    cursor: pointer;
}


.WhiteOutlineButton,
.OutlineButton,
.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,
.FilterExtendedFAB,
.LinkButton,
.GreenButton,
.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: calc(100% - 48px);
    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: inline-block; /* Also ensures consistent display behavior */
    text-decoration: none; /* Removes underline from anchors */
    text-align: center; /* Centers text in anchor elements */
}

.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,
.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,
    .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;
}

/*#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*/

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

    .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);
}


.Sheet_toolbox_button_container .ImageButton {
    margin: 2px 0px -2px 0px
}

.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)
}

.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;
}



.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);
    }

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

.ExtendedFABText {
    float: left;
    font-size: 14px;
    letter-spacing: -0.25px;
    font-weight: 600;
    padding: 2px 8px 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: rgba(0,0,0,.10);
    }

/*#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 0px;
        float: right;
    }

@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 .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;
    }


    .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: 16px 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: 16px 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;
}

.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: 16px 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;
    }

    .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-green,
    .chip-yellow,
    .chip-gray,
    .chip-button,
    .chip {
        position: relative;
        display: inline-block;
        padding: 6px 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: 16px;
        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-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: -5px 12px -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 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;
            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 16px auto;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        overflow: hidden;
        /*    border-radius: 16px;*/
        border-radius: 24px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

        .material-card .Sheet,
        .Sheet .Sheet,
        .Sheet .material-card {
            background-color: rgba(0,0,0,.05);
        }

    .SheetTitleOnly,
    .SheetTitle {
        margin: 0px;
        padding: 16px 8px 16px 16px;
        -webkit-border-top-left-radius: 16px;
        -moz-border-radius-topleft: 16px;
        border-top-left-radius: 16px;
        -webkit-border-top-right-radius: 16px;
        -moz-border-radius-topright: 16px;
        border-top-right-radius: 16px;
        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 16px 0px;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        border-radius: 24px;
        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 */
}

    .SheetContent {
        padding: 16px;
    }

    /*#endregion Sheet*/

    /*#region Cards */

    .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: 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;*/
        border-radius: 20px;
        overflow: hidden;
        margin: 0 2px 15px;
        cursor: pointer;
        position: relative;
    }

        .material-card:hover {
            box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
            /*background-color: var(--md-sys-color-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;
    }

    .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-variant);
    }

    .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: 4px;
        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: 24px;
        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_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% - 16px);
        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: 8px;
    }

        .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: 17px 0px 0px 16px;
        /*      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_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: 20px;
        font-weight: 500;
        width: 100%;
        letter-spacing: -0.5px;
    }

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

    /*.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-size: 16px;
    }

    .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-size: 14px;
        padding: 16px;
    }

    .material_card_content_supporting_text {
        color: var(--md-sys-color-on-surface);
        /*    background-color: var(--md-sys-color-surface);*/
        width: 100%;
        font-size: 14px;
        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;
    }

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

    .blazorRadioButtonLabel {
    }

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

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

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

    .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: 24px;
        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: 24px;
        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);
    }

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

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

    .modal-content::-webkit-scrollbar {
        width: 8px;
        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: 12px 28px 12px 18px;
        /*min-height: 36px;*/
        font-size: 12px;
        font-weight: bold;
        /*line-height: 24px;*/
        border-radius: 8px;
        color: var(--md-sys-color-on-primary-container-light);
        background-color: var(--md-sys-color-primary-container-light);
        margin: 0px 8px 0px 0px;
        cursor: pointer;
        overflow: hidden;
        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);
        }

        .chip-role .material_card_secondary_title {
            color: var(--md-ref-palette-primary40);
        }

        .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 {
    }

    /* Close button */
    .close {
        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);
        background-color: var(--md-sys-color-primary);
        cursor: pointer;
        z-index: 10;
    }

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

.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 .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 {
        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;
    }

    .page_search_criteria hr {
        background-color: var(--md-sys-color-border);
        border: 0 none;
        color: var(--md-sys-color-border);
        height: 1px;
    }

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

    @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;
        }
    }

    .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 {
        background-color: var(--md-sys-color-surface);
        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 {
            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;
        border-bottom-color: var(--md-sys-color-surface);
        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-on-surface);
    }

    .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: 24px;
        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: 16px;
        -moz-border-radius-topleft: 16px;
        border-top-left-radius: 16px;
        -webkit-border-top-right-radius: 16px;
        -moz-border-radius-topright: 16px;
        border-top-right-radius: 16px;
        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;
    }

    .MaterialTableContainer {
        width: 100%; /* Ensure the container takes the full width of its parent */
        overflow-x: auto; /* Enable horizontal scrolling */
        overflow-y: hidden; /* Disable vertical scrolling */
        /* Scrollbar styles */
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: var(--md-sys-color-primary) var(--md-sys-color-primary-container); /* Firefox */
    }

    .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);
        }

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

    .MaterialTableContainer::-webkit-scrollbar {
        width: 8px;
        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;
            }
    }



    /*#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;
    }

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

    .cv-details-section {
        text-align: Left;
        padding: 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 {
        padding: 20px 16px 8px 0px;
        float: left;
        width: calc(100% - 80px);
        color: var(--md-sys-color-background);
        border-top: 1px solid var(--md-sys-color-border);
    }

        .cv-details-section-data 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 .material_card_primary_title {
            color: var(--md-sys-color-background);
            font-size: 18px;
            letter-spacing: -0.25px;
        }

        .cv-details-section-data .material_card_primary_title a{
            color: var(--md-sys-color-background);
            font-size: 18px;
            letter-spacing: -0.25px;
        }

        .cv-details-section-data .material_card_secondary_title {
            color: var(--md-sys-color-surface-variant);
            margin-bottom: 0px;
        }

    .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: 16px;
        color: var(--md-sys-color-on-surface);
        font-size: 18px;
        font-weight: bold;
    }

    /*#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: 24px;
        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;
    }

    .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 {
            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 {
            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 {
            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 .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: 0px 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: 10vw 5vw 10vw 5vw;
        }

            .page-billboard h1,
            .homepage-billboard h1 {
                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);
            }

            .page-billboard h3,
            .homepage-billboard h3 {
                margin: 0px 0px 72px 0px;
                font-size: 20px;
                line-height: 28px;
                letter-spacing: 0px;
            }

            .page-billboard .Clear,
            .homepage-billboard .Clear {
                height: 10vw;
            }
    }


    /* 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;
    }

        .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: fixed;
        pointer-events: auto;
        width: 100%;
        max-width: 320px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 10000;
    }

        .tutorial-popup.top {
            transform: translateX(-50%);
            margin-top: -8px;
        }

        .tutorial-popup.bottom {
            transform: translateX(-50%);
            margin-top: 8px;
        }

        .tutorial-popup.left {
            transform: translateY(-50%);
            margin-left: -8px;
        }

        .tutorial-popup.right {
            transform: translateY(-50%);
            margin-left: 8px;
        }

    @media (min-width: 1199px) {
        .tutorial-popup {
            margin-left: 60px;
        }
    }

    .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: 200px;
        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 {
            width: calc(100% - 24px);
        }
    }
    /*#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: 20px;
        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: 20px;
    }

    .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;
        margin-bottom: 16px;
        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*/