/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-41l0py5g4u],
.components-reconnect-repeated-attempt-visible[b-41l0py5g4u],
.components-reconnect-failed-visible[b-41l0py5g4u],
.components-pause-visible[b-41l0py5g4u],
.components-resume-failed-visible[b-41l0py5g4u],
.components-reconnect-spinner[b-41l0py5g4u] {
    display: none;
}

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

#components-reconnect-modal[b-41l0py5g4u] {
    background-color: var(--er-card, #fff);
    color: var(--er-text, #1f2d2a);
    width: min(22rem, calc(100vw - 2rem));
    margin: auto;
    padding: 2rem 1.5rem;
    border: 0;
    border-radius: 1rem;
    box-shadow: var(--er-shadow, 0 12px 40px rgba(50, 72, 66, 0.18));
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-41l0py5g4u 0.5s both;
    &[open]
{
    animation: components-reconnect-modal-slideUp-b-41l0py5g4u 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-41l0py5g4u 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-41l0py5g4u]::backdrop {
    background-color: color-mix(in srgb, var(--er-bg, #f3f6f5) 92%, transparent);
    animation: components-reconnect-modal-fadeInOpacity-b-41l0py5g4u 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

.components-reconnect-logo[b-41l0py5g4u] {
    display: block;
    width: 96px;
    height: auto;
}

.components-reconnect-title[b-41l0py5g4u] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--er-text, #1f2d2a);
    letter-spacing: 0.01em;
}

#components-reconnect-modal p[b-41l0py5g4u] {
    margin: 0;
    text-align: center;
    color: var(--er-muted, #6b7f79);
    font-size: 0.95rem;
}

#components-reconnect-modal button[b-41l0py5g4u] {
    border: 0;
    background-color: var(--er-primary, #3d8f7a);
    color: white;
    padding: 8px 28px;
    border-radius: 8px;
    font-weight: 600;
}

#components-reconnect-modal button:hover[b-41l0py5g4u] {
    background-color: var(--er-primary-dark, #2f7362);
}

#components-reconnect-modal button:active[b-41l0py5g4u] {
    background-color: var(--er-primary, #3d8f7a);
}

.components-reconnect-spinner[b-41l0py5g4u] {
    width: 36px;
    height: 36px;
    border: 3px solid color-mix(in srgb, var(--er-primary, #3d8f7a) 28%, transparent);
    border-top-color: var(--er-primary, #3d8f7a);
    border-radius: 50%;
    animation: components-reconnect-spin-b-41l0py5g4u 0.8s linear infinite;
}

@keyframes components-reconnect-spin-b-41l0py5g4u {
    to { transform: rotate(360deg); }
}