/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-kc71n20eyr] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-kc71n20eyr] {
    flex: 1;
}

.sidebar[b-kc71n20eyr] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

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

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

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

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

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

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

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

    .sidebar[b-kc71n20eyr] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

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

#blazor-error-ui[b-kc71n20eyr] {
    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-kc71n20eyr] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-mb8767v76i] {
    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-mb8767v76i] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

.bi[b-mb8767v76i] {
    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-mb8767v76i] {
    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-mb8767v76i] {
    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-mb8767v76i] {
    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 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");
}

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

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

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

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

.nav-item[b-mb8767v76i]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-mb8767v76i]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

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

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

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

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

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-pbez7fil93],
.components-reconnect-repeated-attempt-visible[b-pbez7fil93],
.components-reconnect-failed-visible[b-pbez7fil93],
.components-reconnect-rejected-visible[b-pbez7fil93],
.components-pause-visible[b-pbez7fil93],
.components-resume-failed-visible[b-pbez7fil93],
.components-rejoining-animation[b-pbez7fil93] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-pbez7fil93],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-pbez7fil93],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-pbez7fil93],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-pbez7fil93],
#components-reconnect-modal.components-reconnect-retrying[b-pbez7fil93],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-pbez7fil93],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-pbez7fil93],
#components-reconnect-modal.components-reconnect-failed[b-pbez7fil93],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-pbez7fil93],
/* The state that used to reload the page without saying anything (S-000760). Listed alongside the
   others rather than styled separately: it is one more thing this dialog can be, and the whole
   design of this file is that the state class decides which paragraph is visible. */
#components-reconnect-modal.components-reconnect-rejected[b-pbez7fil93],
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected-visible[b-pbez7fil93] {
    display: block;
}


#components-reconnect-modal[b-pbez7fil93] {
    background-color: var(--surface);
    width: var(--size-dialog);
    margin: 20vh auto;
    padding: var(--space-200);
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    opacity: 0;
    transition: display var(--motion-slow) allow-discrete, overlay var(--motion-slow) allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-pbez7fil93 var(--motion-slow) both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-pbez7fil93 var(--motion-slow) cubic-bezier(.05, .89, .25, 1.02) var(--motion-base), components-reconnect-modal-fadeInOpacity-b-pbez7fil93 var(--motion-slow) ease-in-out var(--motion-base);
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-pbez7fil93]::backdrop {
    background-color: var(--scrim);
    animation: components-reconnect-modal-fadeInOpacity-b-pbez7fil93 var(--motion-slow) ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-pbez7fil93 {
    0% {
        transform: translateY(var(--space-050)) scale(0.95);
    }

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-pbez7fil93] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-100);
}

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

#components-reconnect-modal button[b-pbez7fil93] {
    border: 0;
    background-color: var(--interactive);
    color: var(--text-inverse);
    padding: var(--space-025) var(--space-150);
    border-radius: var(--radius-sm);
}

    #components-reconnect-modal button:hover[b-pbez7fil93] {
        background-color: var(--interactive-hover);
    }

    #components-reconnect-modal button:active[b-pbez7fil93] {
        background-color: var(--interactive);
    }

.components-rejoining-animation[b-pbez7fil93] {
    position: relative;
    width: var(--size-spinner);
    height: var(--size-spinner);
}

    /* THESE TWO DURATIONS STAY LITERAL ON PURPOSE, and the next person to tidy this file should
       leave them alone. The motion tokens describe how long a UI transition takes - the slowest is
       320ms - and this is the cycle length of a continuous spinner, which is a different quantity
       that happens to share a unit. Tokenising it would run the ring nearly five times faster for
       everybody, a visual change nobody asked for, made while tidying. The delay below is half that
       cycle, so it is tied to the 1.5s and moves with it or not at all.
       Reduced motion is answered by stopping this animation outright, in the block below. */
    .components-rejoining-animation div[b-pbez7fil93] {
        position: absolute;
        border: var(--border-3) solid var(--interactive);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-pbez7fil93 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

/* AND THIS DIALOG HONOURS reduced motion TOO, WHICH UNTIL v1.364.0 IT DID NOT (item 11 and S-000948).
 *
 * app.css answers `prefers-reduced-motion` by REDEFINING the motion duration tokens, and its comment
 * argues that overriding the token rather than each rule is what makes the answer hold for
 * animations nobody has written yet. That reasoning is right and it has one requirement: the
 * animation has to USE the tokens.
 *
 * Every duration in this file is a literal - 0.5s, 1.5s, 0.3s, -0.5s - so the override reached none
 * of them. Two reasonable changes leaving a hole between them: whoever tokenised this file
 * tokenised the colours, sizes, radii and shadows and left the durations, and the reduced-motion
 * block later keyed off exactly the thing they had left.
 *
 * WHO PAYS. This dialog is shown to somebody whose connection has just dropped. They got a 1.5s
 * slide-up and an INFINITE expanding ring, having asked their operating system for less motion,
 * usually because motion makes them ill - at the moment they are least able to leave the page.
 *
 * The entry animations are tokenised above so the global override now carries them. The ring is
 * handled here instead, because "infinite at 0.01ms" is not less motion: it is the same motion,
 * faster. It stops, and it stays VISIBLE as a static ring - a spinner that vanishes takes the
 * "something is still happening" signal with it, which is the one thing this dialog exists to say.
 *
 * `opacity: 1` is not decoration. The dialog's resting opacity is 0 and the fade-in is what reveals
 * it, so switching the animation off without this would leave a reduced-motion reader with a
 * dialog that never appears at all - a worse defect than the one being fixed. */
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-pbez7fil93],
    #components-reconnect-modal[open][b-pbez7fil93],
    #components-reconnect-modal[b-pbez7fil93]::backdrop {
        animation: none;
        opacity: 1;
    }

    .components-rejoining-animation div[b-pbez7fil93] {
        animation: none;
        inset: 0;
        opacity: 1;
    }

    /* One ring, not two stacked on the same box: the second exists only to trail the first by half
       a cycle, and with nothing moving it is an identical circle drawn twice. */
    .components-rejoining-animation div:nth-child(2)[b-pbez7fil93] {
        display: none;
    }
}

@keyframes components-rejoining-animation-b-pbez7fil93 {
    0% {
        top: calc(var(--size-spinner) / 2);
        left: calc(var(--size-spinner) / 2);
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: calc(var(--size-spinner) / 2);
        left: calc(var(--size-spinner) / 2);
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: calc(var(--size-spinner) / 2);
        left: calc(var(--size-spinner) / 2);
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: var(--size-spinner);
        height: var(--size-spinner);
        opacity: 0;
    }
}