#loading {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    background-color: #f4f5f5;
    pointer-events: none;
}
.loader-inner {
    will-change: transform;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    background-color: #3742fa;
    border-radius: 50%;
    animation: scaleout 0.6s infinite ease-in-out forwards;
    text-indent: -99999px;
    z-index: 999991;
}
@keyframes scaleout {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
@keyframes spin3D {
    from {
        transform: rotate3d(0.5, 0.5, 0.5, 360deg);
    }
    to {
        transform: rotate3d(0deg);
    }
}
#loading {
    height: 100%;
    background-color: #1d2630;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 99999999;
}
.spinner-box {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}
.leo {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.blue-orbit {
    width: 165px;
    height: 165px;
    border: 1px solid #91daffa5;
    animation: spin3D 3s linear 0.2s infinite;
}
.green-orbit {
    width: 120px;
    height: 120px;
    border: 1px solid #91ffbfa5;
    animation: spin3D 2s linear 0s infinite;
}
.red-orbit {
    width: 90px;
    height: 90px;
    border: 1px solid #ffca91a5;
    animation: spin3D 1s linear 0s infinite;
}
.white-orbit {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    animation: spin3D 10s linear 0s infinite;
}
.w1 {
    transform: rotate3D(1, 1, 1, 90deg);
}
.w2 {
    transform: rotate3D(1, 2, 0.5, 90deg);
}
.w3 {
    transform: rotate3D(0.5, 1, 2, 90deg);
}