/* Reconnect overlay for Blazor Server (see js/reconnect.js). Hidden unless blazor.server.js adds a state class. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, .35);
    align-items: center;
    justify-content: center;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-retrying,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-paused,
    #components-reconnect-modal.components-reconnect-rejected,
    #components-reconnect-modal.components-reconnect-resume-failed {
        display: flex;
    }

    #components-reconnect-modal .reconnect-dialog {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
        padding: 1.5rem 2rem;
        max-width: 22rem;
        text-align: center;
    }

    #components-reconnect-modal p {
        margin: .75rem 0;
    }

    #components-reconnect-modal .reconnect-spinner {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto;
        border: 4px solid #d6d5d5;
        border-top-color: #1b6ec2;
        border-radius: 50%;
        animation: reconnect-spin 900ms linear infinite;
    }

    #components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
    #components-reconnect-modal.components-reconnect-paused .reconnect-spinner {
        animation-duration: 2.5s;
        border-top-color: #6c757d;
    }

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