/* full page ui loader */
.loading-container {
    height: 0;
    position: fixed;
    visibility: hidden;
    width: 0;
}

.loading-container > .loading-overlay,
.loading-container > .loading-loader {
    height: 100%;
    position: absolute;
    width: 100%;
}

.loading-container > .loading-loader {
    background: url('/include/images/ajax-loader.gif') no-repeat;
    z-index: 2;
}

.loading-ui > .loading-container {
    height: 15%;
    left: 0;
    top: 0;
    width: 15%;
    visibility: visible;
    z-index: 99999999;
}


/* full page ui loader on center of page */
.loading-container-center {
    height: 0;
    position: fixed;
    visibility: hidden;
    width: 0;
}

.loading-container-center > .loading-overlay-center,
.loading-container-center > .loading-loader-center {
    height: 100%;
    position: absolute;
    width: 100%;
}

.loading-container-center > .loading-loader-center {
    background: url('/include/images/ajax-loader.gif') no-repeat; /* put here good image*/
    z-index: 2;
}

.loader-dark .loading-container-center > .loading-loader-center {
    /*background: url('/include/images/ajax-loader-dark.gif') no-repeat;*/
}

.loading-container > .loading-loader:has(.loader-simple) {
    background-image: unset;
}


.loading-ui-center > .loading-container-center {
    height: 15%;
    left: 0;
    top: 0;
    width: 15%;
    visibility: visible;
    z-index: 999;
}



html {
    --loader-simple-color: 0, 0, 0;
    --loader-simple-size: 5px;
    --loader-simple-speed: 1.5s;
}


.loading-ui .loader-simple {
    font-size: var(--loader-simple-size);
    width: 1em;
    height: 1em;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    left: 15px;
    top: 8px;
    text-indent: -9999em;
    animation: mulShdSpin var(--loader-simple-speed) infinite ease;
    transform: translateZ(0);
}


.loading-ui .loader-dark .loader-simple {
    --loader-simple-color: 255, 255, 255;
}


@keyframes mulShdSpin {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--loader-simple-color), 1), 1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2), 2.5em 0em 0 0em rgba(var(--loader-simple-color), 0.2), 1.75em 1.75em 0 0em rgba(var(--loader-simple-color), 0.2), 0em 2.5em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em 1.8em 0 0em rgba(var(--loader-simple-color), 0.2), -2.6em 0em 0 0em rgba(var(--loader-simple-color), 0.5), -1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--loader-simple-color), 0.7), 1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 1), 2.5em 0em 0 0em rgba(var(--loader-simple-color), 0.2), 1.75em 1.75em 0 0em rgba(var(--loader-simple-color), 0.2), 0em 2.5em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em 1.8em 0 0em rgba(var(--loader-simple-color), 0.2), -2.6em 0em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--loader-simple-color), 0.5), 1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.7), 2.5em 0em 0 0em rgba(var(--loader-simple-color), 1), 1.75em 1.75em 0 0em rgba(var(--loader-simple-color), 0.2), 0em 2.5em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em 1.8em 0 0em rgba(var(--loader-simple-color), 0.2), -2.6em 0em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--loader-simple-color), 0.2), 1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.5), 2.5em 0em 0 0em rgba(var(--loader-simple-color), 0.7), 1.75em 1.75em 0 0em rgba(var(--loader-simple-color), 1), 0em 2.5em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em 1.8em 0 0em rgba(var(--loader-simple-color), 0.2), -2.6em 0em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--loader-simple-color), 0.2), 1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2), 2.5em 0em 0 0em rgba(var(--loader-simple-color), 0.5), 1.75em 1.75em 0 0em rgba(var(--loader-simple-color), 0.7), 0em 2.5em 0 0em rgba(var(--loader-simple-color), 1), -1.8em 1.8em 0 0em rgba(var(--loader-simple-color), 0.2), -2.6em 0em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--loader-simple-color), 0.2), 1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2), 2.5em 0em 0 0em rgba(var(--loader-simple-color), 0.2), 1.75em 1.75em 0 0em rgba(var(--loader-simple-color), 0.5), 0em 2.5em 0 0em rgba(var(--loader-simple-color), 0.7), -1.8em 1.8em 0 0em rgba(var(--loader-simple-color), 1), -2.6em 0em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--loader-simple-color), 0.2), 1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2), 2.5em 0em 0 0em rgba(var(--loader-simple-color), 0.2), 1.75em 1.75em 0 0em rgba(var(--loader-simple-color), 0.2), 0em 2.5em 0 0em rgba(var(--loader-simple-color), 0.5), -1.8em 1.8em 0 0em rgba(var(--loader-simple-color), 0.7), -2.6em 0em 0 0em rgba(var(--loader-simple-color), 1), -1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(var(--loader-simple-color), 0.2), 1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 0.2), 2.5em 0em 0 0em rgba(var(--loader-simple-color), 0.2), 1.75em 1.75em 0 0em rgba(var(--loader-simple-color), 0.2), 0em 2.5em 0 0em rgba(var(--loader-simple-color), 0.2), -1.8em 1.8em 0 0em rgba(var(--loader-simple-color), 0.5), -2.6em 0em 0 0em rgba(var(--loader-simple-color), 0.7), -1.8em -1.8em 0 0em rgba(var(--loader-simple-color), 1);
    }
}