/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-rtfg28xkan] {
    color-scheme: light only;
    background: lightyellow;
    /* The ground here is always lightyellow, so the ink is pinned rather than themed - left to
       inherit, it followed the body colour and turned near-white on yellow in dark mode. This bar
       is the one that says the page has stopped talking to the server, so it is the last thing that
       can afford to be unreadable. */
    color: #1a1a1a;
    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-rtfg28xkan] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar styling now lives in wwwroot/css/theme.css (.sm-sidebar-* classes)
   so it can be shared with MainLayout's markup instead of being scoped per-component. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-t33ttnw9hu],
.components-reconnect-repeated-attempt-visible[b-t33ttnw9hu],
.components-reconnect-failed-visible[b-t33ttnw9hu],
.components-pause-visible[b-t33ttnw9hu],
.components-resume-failed-visible[b-t33ttnw9hu],
.components-rejoining-animation[b-t33ttnw9hu] {
    display: none;
}

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


#components-reconnect-modal[b-t33ttnw9hu] {
    /* Themed, not fixed: this is a full panel of text rather than a coloured warning strip, and
       with a hard-coded white ground its type inherited the near-white body colour in dark mode. */
    background-color: var(--sm-card-bg, white);
    color: var(--sm-text, #2b2f3a);
    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-t33ttnw9hu 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-t33ttnw9hu {
    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;
    }
}