.hidden {
    display: none;
}

.loading-spinner-background {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.10);
    z-index: 9999999;
    height: 100%; /* fallback for older browsers */
    width: 100%;
    height: 100vh; /* override */
    width: 100vw;
    transform: translate3d(0,0,0);
}

    .loading-spinner-background .loading-spinner {
        /*margin: 50% auto;
    transform: translateY(-100%);*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 3px 8px;
        background: #ffffffe4;
        border-radius: 50%;
    }

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(160deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(160deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


.loading-spinner-background .loading-spinner .loading {
    background-color: transparent;
    border-radius: 50%;
    margin: 5px auto;
    animation: loading 3s infinite linear;
}

.loading-spinner-background .loading-spinner .spin-1 {
    border: 5px solid var(--primary);
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    width: 120px;
    height: 120px;
}

.loading-spinner-background .loading-spinner .spin-2 {
    border: 5px solid var(--accent-1);
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    width: 100px;
    height: 100px;
    animation-delay: 0s;
}

.loading-spinner-background .loading-spinner .spin-3 {
    border: 5px solid var(--primary);
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.loading-spinner-background .loading-spinner .spin-4 {
    border: 5px solid var(--orange);
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
}

.loading-spinner-background .loading-spinner .spin-5 {
    border: 5px solid var(--green);
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    width: 40px;
    height: 40px;
    animation-delay: 0s;
}

.loading-spinner-background .loading-spinner .spin-6 {
    border: 5px solid var(--yellow);
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}