@import '_content/AvantaStore.Components/AvantaStore.Components.difio8acf9.bundle.scp.css';

/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
#blazor-error-ui[b-m84yj7bteh] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-m84yj7bteh] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* /Components/Layout/LeftNavMenu.razor.rz.scp.css */
/* 22px, down from 27.5: the rail's text column is the 20vw sidebar width less the gutter and this
   file's padding, and at the old size "Request Appointment" and "My Appointments" broke onto a
   second line. */
.nav-item[b-loxub9pgbc] {
    font-size: 22px;
    margin-bottom: 0;
    padding-bottom: .5vh;
    padding-top: .5vh;
}

.nav-item[b-loxub9pgbc]  .nav-link {
    color: black;
    background: none;
}

.nav-item[b-loxub9pgbc]  a.active {
    color: #093c58;
}

    .nav-item[b-loxub9pgbc]  .nav-link:hover {
        color: #9e1c21;
    }

/* Store's sub-items, kept a step below .nav-item as before. */
.nav-item .sub-nav-link[b-loxub9pgbc] {
    font-size: 18px;
}

.nav-link[b-loxub9pgbc] {
    margin-bottom: 0;
    padding-bottom: 0.5vh;
    padding-top: 0.5vh;
}

.nav-link:hover[b-loxub9pgbc] {
    color: #9e1c21 !important;
    cursor: pointer;
}

/* Small legal text links, pinned to the foot of the rail.

   nav-fill takes its height from the fixed container in MainLayout and provides
   the positioning context. The menu items themselves stay in ordinary block
   flow: making this a flex column changed their vertical rhythm, so the links
   are taken out of flow instead and the items are left exactly as they were. */

/* The tint and the panel's shape belong to .left-nav-shell in MainLayout.razor.css, which can
   reach the window edge; this only insets the content within it. No left padding - the shell's
   page inset already places the text. The legal links are positioned against this box, so they
   pick up its padding rather than needing their own. */
.nav-fill[b-loxub9pgbc] {
    position: relative;
    height: 100%;
    text-align: left;
    box-sizing: border-box;
    padding: 16px 12px 0 0;
}

/* State the alignment on the items too. Inheriting text-align from .nav-fill
   covers the plain markup, but NavLink is a component: its <a> does not carry
   this file's scope attribute, so it needs ::deep to be reached at all. */
.nav-item[b-loxub9pgbc],
.nav-item p[b-loxub9pgbc],
.nav-item[b-loxub9pgbc]  .nav-link {
    text-align: left;
}

.legal-links[b-loxub9pgbc] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding-top: 1vh;
    /* Darker than the old hairline, which all but disappeared once the rail took its tint. */
    border-top: 1px solid #bfd0dc;
}

.legal-links-sep[b-loxub9pgbc] {
    color: #9aa7b2;
    font-size: 12px;
    line-height: 1.6;
}

.legal-links button[b-loxub9pgbc] {
    padding: 0;
    border: 0;
    background: none;
    color: #5b6b7a;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.legal-links button:hover[b-loxub9pgbc],
.legal-links button:focus-visible[b-loxub9pgbc] {
    color: #9e1c21;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-header[b-ehn6iehv3u] {
    background-color: white;
    box-shadow: 1px 0px 15px rgba(0, 0, 0, 0.3);
    /* Above the rail. Both carry .fixed-top, so on Bootstrap's shared z-index of 1030 the rail
       won on document order and painted over the header. */
    z-index: 1040;
}

.app-header-inner[b-ehn6iehv3u] {
    margin-left: var(--page-inset);
    margin-right: var(--page-inset);
}

.page[b-ehn6iehv3u] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: var(--header-height);
}

main[b-ehn6iehv3u] {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.sidebar[b-ehn6iehv3u] {
}

@media (min-width: 841px) {
    .page[b-ehn6iehv3u] {
        flex-direction: row;
        margin-left: var(--page-inset);
        margin-right: var(--page-inset);
    }

    .sidebar[b-ehn6iehv3u] {
        width: var(--nav-rail-width);
    }

    /* The rail's tinted fill. Painted here rather than on .nav-fill inside so it can start at the
       window edge: the page inset moves to padding, which keeps the nav text under the logo while
       no empty margin shows beside the tint. Width stops a gutter short of where .sidebar hands
       over to the content column.

       Full height, and no radius: every edge but the right one is flush against the window or
       hidden behind the header, so the fill reads as one even column rather than a panel with
       corners. It also lets LeftNavMenu push its legal links to the foot of the viewport.

       Desktop only, all of it: below 841px the menu inside is display:none, and a tall fixed box
       would sit over the left of the screen swallowing taps - tinted, it would also be visible. */
    .left-nav-shell[b-ehn6iehv3u] {
        width: calc(var(--page-inset) + var(--nav-rail-width) - var(--nav-rail-gutter));
        height: 100vh;
        box-sizing: border-box;
        padding-top: var(--header-height);
        padding-left: var(--page-inset);
        background: var(--avanta-navy-wash);
    }
}

/* Gutter comes from the token in app.css, which .page-hero also reads to cancel it. */
@media (max-width: 840px) {
    .page[b-ehn6iehv3u] {
        margin-left: var(--page-gutter-narrow);
        margin-right: var(--page-gutter-narrow);
    }

    /* The hamburger appears at this width and is positioned against the header, not laid out in
       this row - so the row has to stand back from it. Reserving the toggler's width plus its own
       offset puts the row's right edge exactly at the toggler's left edge. Without this the email
       and Logout button go display:none here and the notification bell, left alone at the end of
       the row, ends up directly underneath the hamburger. */
    .app-header-inner[b-ehn6iehv3u] {
        margin-right: calc(var(--nav-toggler-width) + var(--nav-toggler-right));
    }
}

#blazor-error-ui[b-ehn6iehv3u] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ehn6iehv3u] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/TopHeader.razor.rz.scp.css */
@media (min-width: 841px) {
    .navbar-toggler[b-awaa4cii00] {
        display: none;
    }

    .nav-scrollable[b-awaa4cii00] {
        display: none !important;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-awaa4cii00] {
        display: none !important;
    }
}

.navbar-toggler[b-awaa4cii00] {
    appearance: none;
    cursor: pointer;
    width: var(--nav-toggler-width);
    height: 2.5rem;
    color: black;
    position: absolute;
    top: 1.2rem;
    right: var(--nav-toggler-right);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-awaa4cii00] {
    background-color: rgba(255, 255, 255, 0.5);
}

.bi[b-awaa4cii00] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.nav-item[b-awaa4cii00] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-awaa4cii00] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-awaa4cii00] {
        padding-bottom: 1rem;
    }

    .nav-item[b-awaa4cii00]  .nav-link {
        color: black;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-awaa4cii00]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: #093c58;
}

    .nav-item[b-awaa4cii00]  .nav-link:hover {
        background-color: rgba(255,255,255,0.1);
        color: #9e1c21;
    }

.nav-scrollable[b-awaa4cii00] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-awaa4cii00] {
    display: block;
}

.fixedElement[b-awaa4cii00] {
    display:block;
    width:100%;
    position:fixed;
    margin-left:5vw;
    margin-right:5vw;
    top:0;
    z-index: 100;
}

.navbar-toggler-container[b-awaa4cii00] {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally if needed */
    height: 50px; /* Set a height to the container */
}


/* ---------- Notification bell + unread badge ---------- */
/* Sits beside the email in the top bar. Transparent chrome so it reads as an icon action rather
   than competing with the Logout button next to it. */
.notif-bell-btn[b-awaa4cii00] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #093c58;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.notif-bell-btn:hover[b-awaa4cii00],
.notif-bell-btn:focus-visible[b-awaa4cii00] {
    background: rgba(9, 60, 88, 0.08);
}

/* The red dot. Absolutely positioned against the button, so the count sits on the bell rather
   than shifting it. min-width plus a pill radius keeps "9+" legible without distorting a single
   digit into an oval. */
.notif-bell-badge[b-awaa4cii00] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #EB222A;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 9px;
    /* Separates the dot from the bell glyph underneath it on a white header. */
    border: 2px solid #ffffff;
}