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

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        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;
    }

    #components-reconnect-modal .reconnecting,
    #components-reconnect-modal .failed,
    #components-reconnect-modal .rejected {
        display: none;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        gap: 1em;
    }

    #components-reconnect-modal.components-reconnect-show > .reconnecting {
        display: flex;
    }

    #components-reconnect-modal.components-reconnect-failed > .failed {
        display: flex;
    }

    #components-reconnect-modal.components-reconnect-rejected > .rejected {
        display: flex;
    }

    #components-reconnect-modal small {
        font-size: 1rem;
    }

    #components-reconnect-modal span {
        font-weight: bolder;
    }

    #components-reconnect-modal .reconnecting span {
        animation: reconnect-pulse 1.5s ease-in-out infinite;
    }

    @keyframes reconnect-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }