/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Wraps the strapline header (.desktop-content/.mobile-content) and the
   sidebar+content row (.page) below it, so the header spans the full page
   width and the sidebar only starts underneath it instead of running the
   whole page height alongside it. */
.app-shell[b-0vz85ya5hd] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page[b-0vz85ya5hd] {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Fill whatever height is left under the strapline header, rather than
       assuming it owns the whole viewport (that assumption is now .app-shell's,
       and only above this header has already claimed its own space). */
    flex: 1 1 auto;
    /* Flex items default to min-width:auto, which refuses to shrink below the
       natural/preferred width of whatever is nested inside them - reaching
       all the way down through the tree regardless of any overflow-x:scroll
       set on something in between. Above 641px .page's children (.sidebar,
       main) sit side by side in a row, so main is the one this actually
       matters for; set here too for the same reason, belt-and-braces. See
       main's own min-width:0 below - same underlying issue, confirmed live
       against a page with a wide DxGrid (2026-11-09). */
    min-width: 0;
}

main[b-0vz85ya5hd] {
    flex: 1;
    /* See .page's min-width:0 above: without this, a wide-enough descendant
       (e.g. a DxGrid with many dynamic columns) forces main itself wider than
       the viewport instead of staying capped and letting that descendant's
       own overflow-x handle it - dragging the whole page into horizontal
       scroll even though the descendant's own internal scrolling was working
       correctly. .cardquotes (app.css) already has min-width:0 for this same
       flexbox reason; main never did, and nothing exposed it until now. */
    min-width: 0;
}

.sidebar[b-0vz85ya5hd] {
    /* Same light grey as the strapline header above it. No dividing edge -
       was dark grey/#343a40 with an orange, then red, border-right; removed
       so the sidebar sits flush against the content next to it. */
    background-color: #bdbec0;
}

/* app.css's global .logo_wrapper caps this at max-width:10px - a legacy
   leftover that only ever "worked" because the box was anchored from the
   left, so the "Powered By:"/logo content it couldn't fit just overflowed
   rightwards into open space. Anchored from the right instead (top-right
   corner), that same 10px box sits right up against the header's right
   edge, so the same overflow runs straight off the edge of the header and
   gets clipped. Scoped override here (never touching app.css itself) so
   the box can actually size to its content. */
.logo_wrapper[b-0vz85ya5hd] {
    max-width: none;
}

.top-row[b-0vz85ya5hd] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-0vz85ya5hd]  a, .top-row[b-0vz85ya5hd]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-0vz85ya5hd]  a:hover, .top-row[b-0vz85ya5hd]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-0vz85ya5hd]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-0vz85ya5hd] {
        justify-content: space-between;
    }

    .top-row[b-0vz85ya5hd]  a, .top-row[b-0vz85ya5hd]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-0vz85ya5hd] {
        flex-direction: row;
    }

    .sidebar[b-0vz85ya5hd] {
        width: 250px;
        /* No longer height:100vh - the strapline header above .page now claims
           some of that viewport height, so a flat 100vh here would run the
           sidebar past the bottom of the screen. Stretching (the row's default
           align-items behavior) to match .page's actual height, whatever that
           ends up being, keeps it flush with the content beside it instead. */
        position: sticky;
        top: 0;
    }

    .top-row[b-0vz85ya5hd] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-0vz85ya5hd]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-0vz85ya5hd], article[b-0vz85ya5hd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-0vz85ya5hd] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-0vz85ya5hd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-94wz021x8h] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    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-94wz021x8h] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-94wz021x8h] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-94wz021x8h] {
    font-size: 1.1rem;
}

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

.bi-house-door-fill-nav-menu[b-94wz021x8h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-94wz021x8h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-94wz021x8h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23343a40' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-94wz021x8h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-94wz021x8h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-94wz021x8h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23343a40' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-94wz021x8h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-94wz021x8h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

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

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

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

    .nav-item[b-94wz021x8h]  .nav-link {
        /* Dark text/icons for the now-light (strapline-grey) sidebar background -
           was light grey (#d7d7d7) against the old dark sidebar. */
        color: #343a40;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-94wz021x8h]  a.active {
    background-color: rgba(0,0,0,0.08);
    border-left: 3px solid #db1e29;
    color: #000;
}

.nav-item[b-94wz021x8h]  .nav-link:hover {
    background-color: rgba(0,0,0,0.06);
    color: #000;
}

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

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

@media (min-width: 641px) {
    .navbar-toggler[b-94wz021x8h] {
        display: none;
    }

    /* With the "HirePortal" brand link removed, this bar would otherwise be an
       empty strip on wide screens (the toggler above is hidden here too, and
       the nav items render permanently via .nav-scrollable below) - so hide it
       entirely at this breakpoint. It still shows on narrow/mobile screens,
       where it's the only way to reach the toggler. */
    .top-row[b-94wz021x8h] {
        display: none;
    }

    .nav-scrollable[b-94wz021x8h] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus. This used to be a flat
           calc(100vh - 3.5rem) sized for the (now-hidden, see .top-row above)
           toggler bar eating into a full-viewport-height sidebar. The sidebar
           no longer owns the full viewport height itself - the strapline
           header above .page claims some of it - so just fill whatever height
           .sidebar actually ends up with instead of a stale fixed guess. */
        height: 100%;
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-rx0wkiz9w0],
.components-reconnect-repeated-attempt-visible[b-rx0wkiz9w0],
.components-reconnect-failed-visible[b-rx0wkiz9w0],
.components-pause-visible[b-rx0wkiz9w0],
.components-resume-failed-visible[b-rx0wkiz9w0],
.components-rejoining-animation[b-rx0wkiz9w0] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-rx0wkiz9w0],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-rx0wkiz9w0],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-rx0wkiz9w0],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-rx0wkiz9w0],
#components-reconnect-modal.components-reconnect-retrying[b-rx0wkiz9w0],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-rx0wkiz9w0],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-rx0wkiz9w0],
#components-reconnect-modal.components-reconnect-failed[b-rx0wkiz9w0],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-rx0wkiz9w0] {
    display: block;
}


#components-reconnect-modal[b-rx0wkiz9w0] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-rx0wkiz9w0 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-rx0wkiz9w0 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-rx0wkiz9w0 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-rx0wkiz9w0]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-rx0wkiz9w0 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-rx0wkiz9w0 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-rx0wkiz9w0 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-rx0wkiz9w0 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-rx0wkiz9w0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-rx0wkiz9w0] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-rx0wkiz9w0] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-rx0wkiz9w0] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-rx0wkiz9w0] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-rx0wkiz9w0] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-rx0wkiz9w0] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-rx0wkiz9w0 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-rx0wkiz9w0] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-rx0wkiz9w0 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}