html {
    opacity: 0;
}

.loading_io_spinner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    overflow: hidden;
    background: #ffffff;
    top: 0;
    position: absolute;
}

.loading_io_spinner .loading_io {
    width: 200px;
    height: 200px;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    display: flex;
    justify-content: center;
}

.loading_io_spinner .loading_io div {
    position: absolute;
    border-width: 4px;
    border-style: solid;
    opacity: 1;
    border-radius: 50%;
    animation: loading_io 5.2631578947368425s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    box-sizing: content-box;
    border-color: #666;
}

.loading_io_spinner .loading_io div:nth-child(2) {
    animation-delay: -2.6315789473684212s;
}

@keyframes loading_io {
    0% {
        top: 96px;
        left: 96px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 18px;
        left: 18px;
        width: 156px;
        height: 156px;
        opacity: 0;
    }
}


/* GENERIC LOADER TO USE IN EVERY PLACE EXCEPT GENERAL LOADER */
/* Its measurements are percentual and height and width are defined by parente element */
/* Its Html structure is:
    <div class="generic_loader">
        <div class="generic_loader_io">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
*/
.generic_loader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    overflow: hidden;
    top: 0;
    position: absolute;
}

.generic_loader .generic_loader_io {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    display: flex;
    justify-content: center;
}

.generic_loader .generic_loader_io div {
    position: absolute;
    border-width: 0.2em;
    border-style: solid;
    opacity: 1;
    border-radius: 50%;
    animation: generic_loader_io 6.0s cubic-bezier(0, .2, .8, 1) infinite;
    box-sizing: content-box;
    border-color: #666;
}

.generic_loader .generic_loader_io div:nth-child(2) {
    animation-delay: -2.0s
}

.generic_loader .generic_loader_io div:nth-child(3) {
    animation-delay: -4.0s
}

@keyframes generic_loader_io {
    0% {
        height: 0;
        width: 0;
        top: calc(50% - 0.1em);
        left: calc(50% - 0.1em);
        opacity: 1;
    }

    100% {
        height: calc(80% - 0.2em);
        width: calc(80% - 0.2em);
        top: 10%;
        left: 10%;
        opacity: 0;
    }
}