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

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

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

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

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

.BlueButton100 {
    padding: 16px 24px 16px 24px;
    margin: 0px auto 12px auto;
    border-radius: 48px;
    width: 100%;
    border-width: 0px;
    font-size: var(--md-sys-typescale-headline-small-font-size);
    font-weight: var(--md-sys-typescale-headline-small-font-weight);
    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    cursor: pointer;
}

.BlackOutlineButton100,
.OutlineButton100 {
    padding: 16px 24px 16px 24px;
    margin: 0px auto 12px auto;
    border-radius: 48px;
    width: calc(100% - 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);
}

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

.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-blue-button);
    color: var(--md-sys-color-surface);
}

    .pricing-card button:hover,
    .BlueImageButton:hover,
    .SmallBlueButton:hover,
    .BlueButton:hover,
    .BigBlueButton:hover,
    .BlueButton100:hover {
        text-decoration: none;
        background-color: var(--md-sys-color-blue-button-hover);
        color: var(--md-sys-color-surface);
    }

.material_link_button_container .BlueButton,
.material_link_button_container .DisabledButton
{
    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*/

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

    .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-blue-button);
    color: var(--md-sys-color-on-primary);
}

    .FloatingActionButton:hover {
        background-color: var(--md-sys-color-blue-button-hover);
        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 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);
    }

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

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

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

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

    .SheetTitleButtonContainer .FloatingActionButton {
        margin: -4px 0px 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: 4px;
    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;
}

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

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

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

    .material-card .Sheet,
    .Sheet .Sheet {
        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;
    }

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

.SheetContent {
    padding: 16px;
}

/*#endregion Sheet*/

/*#region Cards */

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

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

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

.material-card-red-banner {
    color: var(--md-sys-color-background);
    background-color: var(--md-sys-color-error);
}

.material-card-green-banner {
    color: var(--md-sys-color-background);
    background-color: green;
}

.material-card-yellow-banner {
    color: var(--md-sys-color-on-background);
    background-color: var(--md-sys-color-tertiary-container);
}

.material-card-gray-banner {
    color: var(--md-ref-palette-neutral-variant0);
    background-color: var(--md-ref-palette-neutral-variant95);
}

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

@media only screen and (max-width: 1200px) {
    .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 var(--md-sys-color-surface-variant);
    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;
    max-height: 512px; /* Reddit caps height while preserving aspect ratio */
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: var(--md-ref-palette-neutral-variant80);*/ /* Light background for images */
    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 {
        max-width: 100%;
        max-height: 512px;
        object-fit: contain; /* Preserves aspect ratio without cropping */
        margin: 0 auto;
        display: block;
    }

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

.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);
    background-color: var(--md-sys-color-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, var(--md-sys-color-surface-variant) 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 var(--md-sys-color-surface-variant);
    /*    text-align: right;*/
    padding: 0px 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
}

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

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



/*#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 .ratingStarContainer {
    float: none;
}

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

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

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

.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) {
    .custom-multiselect,
    .OneHundredPercentOnMobile {
        width: 100%;
        float: none;
        margin-right: 0px;
    }
}

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

/*#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 16px 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-image-container {
    text-align: center;
}

.cv-image {
    border-radius: 50%;
    height: 240px;
    width: 240px;
    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;
}

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

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

    .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; /* For WebKit-based browsers like Chrome and Safari */
    -webkit-text-fill-color: transparent; /* Required for WebKit-based browsers */
    background-clip: text; /* This may not be fully supported, but it's future-proof */
    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;
        background-clip: text;
        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;
        background-clip: text;
        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;
        background-clip: text;
        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 */

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

    /* 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-neutral70) 0%, var(--md-ref-palette-neutral-variant80) 25%, var(--md-ref-palette-neutral90) 50%, var(--md-ref-palette-neutral95) 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;
}

.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: 8px;
    letter-spacing: -0.5px; /* Tighter letter spacing for modern look */
}

@media (max-width: 768px) {

    .accountPublicProfileOrgName {
        font-size: 30px; /* Increased from 28px */
        margin-bottom: 8px;
    }
}

/*#region Region */

/*#endregion Region*/