:root {
    /* Header colors */
    --header-bg: #000000; /* black */
    --header-text: #ffffff; /* white */
    --header-border-bottom: #d9ab58; /* metallic gold */
    /* Sidebar colors */
    --sidebar-bg: #ffffff; /* white */
    --sidebar-border-right: #eeeeee; /* very light gray */
    --sidebar-link: #333333; /* dark gray */
    --sidebar-link-hover: #333333; /* dark gray */
    --sidebar-link-hover-bg: #dddddd; /* light gray */
    --sidebar-link-active: #6b4c0f; /* brownish-gold */
    --sidebar-link-active-bg: #e6e6e6; /* very light gray */
    --sidebar-link-active-hover: #8c6415; /* dark goldenrod */
    --sidebar-link-active-hover-bg: #e0e0e0; /* light gray */
    /* Download app section */
    --download-app-bg: #000000; /* black */
    --download-app-border-top: #d9ab58; /* metallic gold */
    --download-app-text: #ffffff; /* white */
    /* Links */
    --link-color: #185abc; /* royal blue */
    /* Buttons */
    --btn-warning-bg: #8c6415; /* dark goldenrod */
    /* Misc */
    --nav-item-text: #757575; /* gray */
    --nav-item-hover: #8c6415; /* dark goldenrod */
}

.translated-ltr {
    overflow: hidden;
}

#h4DistrictName {
    color: var(--link-color);
}

.rootWrapper {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

#page-container {
    position: relative;
    min-height: unset;
}

.header {
    background-color: var(--header-bg);
    color: var(--header-text);
    border-bottom: 10px solid var(--header-border-bottom);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
    height: auto;
}

.headerLeftSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    -webkit-text-decoration: none;
    text-decoration: none;
    flex-wrap: wrap;
    line-height: normal;
}

    .headerLeftSection:hover, .headerLeftSection:focus {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

    .headerLeftSection span:last-child {
        color: var(--header-border-bottom);
        font-size: 21px;
    }

    .headerLeftSection span:first-child {
        margin-right: 10px;
        font-size: 30px;
        font-weight: 600;
        word-break: keep-all;
    }

.hamburger_icon {
    display: none;
    max-width: 30px;
    aspect-ratio: 1;
}

.hamburger_icon_none {
    display: none;
}

.headerRightSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: max-content;
}

.headerRightSection_none {
    display: none;
}

.headerRightSection img {
    width: 53px;
    aspect-ratio: 1;
}

.headerRightSection a {
    color: var(--header-text);
    -webkit-text-decoration: none;
    text-decoration: none;
    /*padding: 20px;*/
    font-size: 18px;
}

.pageBody {
    height: 100vh;
}

    .pageBody:has(.content-with-sidebar) {
        margin-top: 0;
        overflow: hidden;
    }

.dropdown-toggle {
    cursor: pointer;
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    bottom: 0;
    z-index: 1001;
    height: max-content
}

.nav-item {
    padding: 10px 20px;
}

    .nav-item a {
        font-size: 16px;
        font-weight: 600;
        color: var(--nav-item-text);
    }

        .nav-item a:hover {
            color: var(--nav-item-hover);
        }

.sidebar {
    width: 300px;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border-right);
    overflow-y: auto;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 999;
    overflow-y: auto;
    height: 100%;
}


.healthcare-logo {
    width: 100%;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-text-decoration: none;
    text-decoration: none;
}

.profile-pic {
    width: 100%;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-text-decoration: none;
    text-decoration: none;
}

    .profile-pic:hover, .profile-pic:focus {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

    .profile-pic h4 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

    .profile-pic p {
        font-size: 14px;
        margin: 0;
    }

.sidebar .nav {
    width: 100%;
}

.sidebar .nav_with_mob_options {
    display: none;
    width: 100%;
}

/* Non-active links */
.sidebar .nav-item a {
    font-weight: 600;
    color: var(--sidebar-link);
    background-color: transparent;
    text-decoration: none;
}

    /* Icons inherit text color */
    .sidebar .nav-item a i {
        color: inherit;
    }

/* Active link */
.sidebar .nav-item.active a {
    color: var(--sidebar-link-active);
    background-color: var(--sidebar-link-active-bg);
}

    /* Active icon */
    .sidebar .nav-item.active a i {
        color: inherit;
    }

/* Hover/focus for non-active links */
.sidebar .nav-item a:hover,
.sidebar .nav-item a:focus {
    color: var(--sidebar-link-hover);
    background-color: var(--sidebar-link-hover-bg);
    text-decoration: none;
}

/* Hover/focus for active links */
.sidebar .nav-item.active a:hover,
.sidebar .nav-item.active a:focus {
    color: var(--sidebar-link-active-hover);
    background-color: var(--sidebar-link-active-hover-bg);
}

/* Remove focus outline on sidebar links */
.sidebar .nav > li > a:focus {
    background-color: transparent;
}

.sidebar .nav-item a i {
    font-size: 20px;
    margin-right: 10px;
}

.content-with-sidebar {
    width: calc(100% - 300px);
    margin-left: 300px;
    height: 100%;
    overflow: auto;
}

.content-without-sidebar {
    width: 100%;
    overflow-y: auto;
    height: 100vh;
}

.download-app {
    border-top: 10px solid var(--download-app-border-top);
    background-color: var(--download-app-bg);
    padding: 10px;
    margin-top: 20px;
    text-align: center;
    color: var(--download-app-text);
    height: 400px;
}

    .download-app .yourlogo {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .download-app img {
        width: 50%;
        aspect-ratio: 1;
    }

.content:has(.content-instruction) {
    margin-left: 200px;
}

@media screen and (max-width: 900px) {
    .headerRightSection > * {
        display: none !important;
    }

    .headerLeftSection span:last-child {
        font-size: 20px !important;
    }

    .headerLeftSection span:first-child {
        font-size: 26px !important;
    }

    .hamburger_icon {
        display: block;
        min-width: 40px;
        aspect-ratio: 1;
        background-color: transparent;
        border: none;
        outline: none;
        padding: 0;
    }

        .hamburger_icon > img {
            width: 100%;
            height: 100%;
        }

    .sidebar {
        position: fixed;
        display: none;
    }

        .sidebar .nav_with_mob_options {
            display: block;
        }

            .sidebar .nav_with_mob_options #mobileHeaderForTranslate .bootstrap-select.fit-width {
                width: 100% !important;
            }

    .content-with-sidebar {
        width: 100%;
        margin-left: 0;
    }

    .content-without-sidebar {
        width: 100%;
        margin-left: 0;
    }

    .header {
        padding: 5px;
    }

    .headerLeftSection span:last-child {
        font-size: 18px !important;
    }

    .headerLeftSection span:first-child {
        font-size: 24px !important;
    }
}

@media screen and (max-width: 400px) {
    .headerLeftSection span:last-child {
        font-size: 14px !important;
    }

    .headerLeftSection span:first-child {
        font-size: 20px !important;
    }
}

@media (min-width: 900px) and (max-width: 1130px) {
    .headerLeftSection span:first-child {
        font-size: 20px !important;
    }
}

.headerRightSection {
    margin-left: auto;
    white-space: nowrap;
}

bootstrap-select > select.languageSelects {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
    color: var(--header-bg) !important;
    background-color: var(--header-text) !important;
}

.languageSelects .btn-default {
    color: var(--sidebar-link) !important;
}

.bootstrap-select > select.languageSelects {
    display: none !important;
}

.sp-dd {
    font-size: 16px !important;
}

#goog-gt-votingHiddenPane {
    display: none !important;
}

.text-link {
    color: var(--link-color) !important;
}

#Spn_Messenger_Count.badge {
    color: var(--header-bg);
}

.btn-warning {
    background-color: var(--btn-warning-bg) !important;
}