#components-reconnect-modal {
    display: none;
}

    /*  Hide normal reconnect state. EXCEPT when security lock is active */
    #components-reconnect-modal.components-reconnect-show:not(.security-lock) {
        display: none;
    }

    /* Security lock */
    #components-reconnect-modal.security-lock {
        align-content: center;
        align-items: center;
        background-color: lightgrey;
        background-image: url('/Images/Dulle_Strepen.png');
        background-size: cover;
        border: solid white 1px;
        border-radius: 5px;
        bottom: 0;
        display: flex;
        font-size: 2rem;
        height: 100vh;
        justify-content: center;
        left: 0;
        opacity: 0.9;
        overflow: hidden;
        position: fixed;
        right: 0;
        text-align: center;
        top: 0;
        width: 100%;
        z-index: 100001;
    }

    /*  Hide all content by default */
    #components-reconnect-modal .reconnect-content {
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1em;
    }

    /*  security lock message
        This works even while Blazor is still retrying.
        Not shown once Blazor has moved to the rejected state, since that has its own (final) message/button below.*/
    #components-reconnect-modal.security-lock:not(.components-reconnect-rejected) .reconnect-failed {
        display: flex;
    }

    /*  Blazor eventually reaches failed. */
    #components-reconnect-modal.components-reconnect-failed
    .reconnect-failed {
        display: flex;
    }

    /*  Blazor eventually reaches rejected */
    #components-reconnect-modal.components-reconnect-rejected
    .reconnect-rejected {
        display: flex;
    }