﻿
.my-reconnect-modal > div {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden;
    background-color: #fff;
    opacity: 0.8;
    font-weight: bold;
    width: 100%;
    height: 100%;
    font-size: 25px;
}

    .my-reconnect-modal > div > div {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 999;
        top: 50%;
        color: black;
        text-align: center;
        width: 100%;
    }




.components-reconnect-hide > div {
    display: none;
}

.components-reconnect-show > div {
    display: none;
}

.components-reconnect-show > .show {
    display: block;
}

.components-reconnect-failed > div {
    display: none;
}

.components-reconnect-failed > .failed {
    display: block;
}

.components-reconnect-rejected > div {
    display: none;
}

.components-reconnect-rejected > .rejected {
    display: block;
}



/* Config */
:root {
    --sk-size: 40px;
    --sk-color: #333;
}


/* Utility class for centering */
.sk-center {
    margin: auto;
}

/*  Wave

      <div class="sk-wave">
        <div class="sk-wave-rect"></div>
        <div class="sk-wave-rect"></div>
        <div class="sk-wave-rect"></div>
        <div class="sk-wave-rect"></div>
        <div class="sk-wave-rect"></div>
      </div>
 */
.sk-wave {
    width: var(--sk-size);
    height: var(--sk-size);
    display: flex;
    justify-content: space-between;
}

.sk-wave-rect {
    background-color: var(--sk-color);
    height: 100%;
    width: 15%;
    animation: sk-wave 1.2s infinite ease-in-out;
}

    .sk-wave-rect:nth-child(1) {
        animation-delay: -1.2s;
    }

    .sk-wave-rect:nth-child(2) {
        animation-delay: -1.1s;
    }

    .sk-wave-rect:nth-child(3) {
        animation-delay: -1.0s;
    }

    .sk-wave-rect:nth-child(4) {
        animation-delay: -0.9s;
    }

    .sk-wave-rect:nth-child(5) {
        animation-delay: -0.8s;
    }

@keyframes sk-wave {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1);
    }
}
