:root {
    --animation-time: 0.6s;
    --base: 8;  /* default = 8 */
    --base-font: calc( var(--base) * 1px );
    --base-size: calc( var(--base) * 10px );
    --base-calc: calc( ( var(--base) * 10 ) / 2 + ( calc( 8 * 5 ) ) );
    --multiplier: calc( var(--base) / ( var(--base-calc) / 10 ) );
}
.loader-inactive {
    display: none;
}
.loader-active,
.loader-active div {
    margin: auto;
    box-sizing: border-box;
    top: calc( 28px - var(--base-font) * 2 );
    color: var(--text-tertiary-color);
}
.loader-active {
    position: relative;
    width: calc( var(--base-size) * var(--multiplier) );
    height: calc( var(--base-size) + var(--base-font) * 2 );
}
.loader-active div {
    position: absolute;
    border-radius: 50%;
    background: var(--background-main-color);
}
.loader-active div:nth-child(1) {
    top: calc( var(--base-size) - calc( 6px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 9px * var(--multiplier) ) );
    animation: loader-active1 var(--animation-time) infinite;
}
.loader-active div:nth-child(2) {
    top: calc( var(--base-size) - calc( 9px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 12px * var(--multiplier) ) );
    width: var(--base-font);
    height: var(--base-font);
    animation: loader-active2 var(--animation-time) infinite;
}
.loader-active div:nth-child(3) {
    top: calc( var(--base-size) - calc( 19px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 13px * var(--multiplier) ) );
    width: calc( var(--base-font) + 1px );
    height: calc( var(--base-font) + 1px );
    animation: loader-active3 var(--animation-time) infinite;
}
.loader-active div:nth-child(4) {
    top: calc( var(--base-size) - calc( 33px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 14px * var(--multiplier) ) );
    width: calc( var(--base-font) + 4px );
    height: calc( var(--base-font) + 4px );
    animation: loader-active4 var(--animation-time) infinite;
}
.loader-active div:nth-child(5) {
    top: calc( var(--base-size) - calc( 51px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 16px * var(--multiplier) ) );
    width: calc( var(--base-font) + 6px );
    height: calc( var(--base-font) + 6px );
    animation: loader-active5 var(--animation-time) infinite;
}
.loader-active div:nth-child(6) {
    top: calc( var(--base-size) - calc( 65px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 18px * var(--multiplier) ) );
    width: calc( var(--base-font) + 4px );
    height: calc( var(--base-font) + 4px );
    animation: loader-active6 var(--animation-time) infinite;
}
.loader-active div:nth-child(7) {
    top: calc( var(--base-size) - calc( 73px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 25px * var(--multiplier) ) );
    width: calc( var(--base-font) + 2px );
    height: calc( var(--base-font) + 2px );
    animation: loader-active7 var(--animation-time) infinite;
}
.loader-active div:nth-child(8) {
    top: calc( var(--base-size) - calc( 78px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 34px * var(--multiplier) ) );
    width: calc( var(--base-font) + 1px );
    height: calc( var(--base-font) + 1px );
    animation: loader-active8 var(--animation-time) infinite;
}
.loader-active div:nth-child(9) {
    top: calc( var(--base-size) - calc( 80px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 44px * var(--multiplier) ) );
    width: calc( var(--base-font) );
    height: calc( var(--base-font) );
    animation: loader-active9 var(--animation-time) infinite;
}
.loader-active div:nth-child(10) {
    top: calc( var(--base-size) - calc( 79px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 55px * var(--multiplier) ) );
    width: calc( var(--base-font) + 2px );
    height: calc( var(--base-font) + 2px );
    animation: loader-active10 var(--animation-time) infinite;
}
.loader-active div:nth-child(11) {
    top: calc( var(--base-size) - calc( 74px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 66px * var(--multiplier) ) );
    width: calc( var(--base-font) + 3px );
    height: calc( var(--base-font) + 3px );
    animation: loader-active11 var(--animation-time) infinite;
}
.loader-active div:nth-child(12) {
    top: calc( var(--base-size) - calc( 65px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 75px * var(--multiplier) ) );
    width: calc( var(--base-font) + 5px );
    height: calc( var(--base-font) + 5px );
    animation: loader-active12 var(--animation-time) infinite;
}
.loader-active div:nth-child(13) {
    top: calc( var(--base-size) - calc( 51px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 80px * var(--multiplier) ) );
    width: calc( var(--base-font) + 8px );
    height: calc( var(--base-font) + 8px );
    animation: loader-active13 var(--animation-time) infinite;
}
.loader-active div:nth-child(14) {
    top: calc( var(--base-size) - calc( 35px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 74px * var(--multiplier) ) );
    width: calc( var(--base-font) + 5px );
    height: calc( var(--base-font) + 5px );
    animation: loader-active14 var(--animation-time) infinite;
}
.loader-active div:nth-child(15) {
    top: calc( var(--base-size) - calc( 23px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 66px * var(--multiplier) ) );
    width: calc( var(--base-font) + 3px );
    height: calc( var(--base-font) + 3px );
    animation: loader-active15 var(--animation-time) infinite;
}
.loader-active div:nth-child(16) {
    top: calc( var(--base-size) - calc( 17px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 55px * var(--multiplier) ) );
    width: calc( var(--base-font) + 1px );
    height: calc( var(--base-font) + 1px );
    animation: loader-active16 var(--animation-time) infinite;
}
.loader-active div:nth-child(17) {
    top: calc( var(--base-size) - calc( 16px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 45px * var(--multiplier) ) );
    width: calc( var(--base-font) + 1px );
    height: calc( var(--base-font) + 1px );
    animation: loader-active17 var(--animation-time) infinite;
}
.loader-active div:nth-child(18) {
    top: calc( var(--base-size) - calc( 18px * var(--multiplier) ) );
    left: calc( var(--base-size) - calc( 35px * var(--multiplier) ) );
    width: calc( var(--base-font) + 1px );
    height: calc( var(--base-font) + 1px );
    animation: loader-active18 var(--animation-time) infinite;
}
@keyframes loader-active1 {
    0% {
        width: 0px;
        height: 0px;
    }
    100% {
        top: calc( var(--base-size) - calc( 9px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 12px * var(--multiplier) ) );
        width: var(--base-font);
        height: var(--base-font);
    }
}
@keyframes loader-active2 {
    0% {
        top: calc( var(--base-size) - calc( 9px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 12px * var(--multiplier) ) );
        width: var(--base-font);
        height: var(--base-font);
    }
    100% {
        top: calc( var(--base-size) - calc( 19px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 13px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
}
@keyframes loader-active3 {
    0% {
        top: calc( var(--base-size) - calc( 19px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 13px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
    100% {
        top: calc( var(--base-size) - calc( 33px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 14px * var(--multiplier) ) );
        width: calc( var(--base-font) + 4px );
        height: calc( var(--base-font) + 4px );
    }
}
@keyframes loader-active4 {
    0% {
        top: calc( var(--base-size) - calc( 33px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 14px * var(--multiplier) ) );
        width: calc( var(--base-font) + 4px );
        height: calc( var(--base-font) + 4px );
    }
    100% {
        top: calc( var(--base-size) - calc( 51px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 16px * var(--multiplier) ) );
        width: calc( var(--base-font) + 6px );
        height: calc( var(--base-font) + 6px );
    }
}
@keyframes loader-active5 {
    0% {
        top: calc( var(--base-size) - calc( 51px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 16px * var(--multiplier) ) );
        width: calc( var(--base-font) + 6px );
        height: calc( var(--base-font) + 6px );
    }
    100% {
        top: calc( var(--base-size) - calc( 65px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 18px * var(--multiplier) ) );
        width: calc( var(--base-font) + 4px );
        height: calc( var(--base-font) + 4px );
    }
}
@keyframes loader-active6 {
    0% {
        top: calc( var(--base-size) - calc( 65px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 18px * var(--multiplier) ) );
        width: calc( var(--base-font) + 4px );
        height: calc( var(--base-font) + 4px );
    }
    100% {
        top: calc( var(--base-size) - calc( 73px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 25px * var(--multiplier) ) );
        width: calc( var(--base-font) + 2px );
        height: calc( var(--base-font) + 2px );
    }
}
@keyframes loader-active7 {
    0% {
        top: calc( var(--base-size) - calc( 73px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 25px * var(--multiplier) ) );
        width: calc( var(--base-font) + 2px );
        height: calc( var(--base-font) + 2px );
    }
    100% {
        top: calc( var(--base-size) - calc( 78px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 34px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
}
@keyframes loader-active8 {
    0% {
        top: calc( var(--base-size) - calc( 78px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 34px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
    100% {
        top: calc( var(--base-size) - calc( 80px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 44px * var(--multiplier) ) );
        width: calc( var(--base-font) );
        height: calc( var(--base-font) );
    }
}
@keyframes loader-active9 {
    0% {
        top: calc( var(--base-size) - calc( 80px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 44px * var(--multiplier) ) );
        width: calc( var(--base-font) );
        height: calc( var(--base-font) );
    }
    100% {
        top: calc( var(--base-size) - calc( 79px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 55px * var(--multiplier) ) );
        width: calc( var(--base-font) + 2px );
        height: calc( var(--base-font) + 2px );
    }
}
@keyframes loader-active10 {
    0% {
        top: calc( var(--base-size) - calc( 79px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 55px * var(--multiplier) ) );
        width: calc( var(--base-font) + 2px );
        height: calc( var(--base-font) + 2px );
    }
    100% {
        top: calc( var(--base-size) - calc( 74px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 66px * var(--multiplier) ) );
        width: calc( var(--base-font) + 3px );
        height: calc( var(--base-font) + 3px );
    }
}
@keyframes loader-active11 {
    0% {
        top: calc( var(--base-size) - calc( 74px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 66px * var(--multiplier) ) );
        width: calc( var(--base-font) + 3px );
        height: calc( var(--base-font) + 3px );
    }
    100% {
        top: calc( var(--base-size) - calc( 65px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 75px * var(--multiplier) ) );
        width: calc( var(--base-font) + 5px );
        height: calc( var(--base-font) + 5px );
    }
}
@keyframes loader-active12 {
    0% {
        top: calc( var(--base-size) - calc( 65px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 75px * var(--multiplier) ) );
        width: calc( var(--base-font) + 5px );
        height: calc( var(--base-font) + 5px );
    }
    100% {
        top: calc( var(--base-size) - calc( 51px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 80px * var(--multiplier) ) );
        width: calc( var(--base-font) + 8px );
        height: calc( var(--base-font) + 8px );
    }
}
@keyframes loader-active13 {
    0% {
        top: calc( var(--base-size) - calc( 51px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 80px * var(--multiplier) ) );
        width: calc( var(--base-font) + 8px );
        height: calc( var(--base-font) + 8px );
    }
    100% {
        top: calc( var(--base-size) - calc( 35px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 74px * var(--multiplier) ) );
        width: calc( var(--base-font) + 5px );
        height: calc( var(--base-font) + 5px );
    }
}
@keyframes loader-active14 {
    0% {
        top: calc( var(--base-size) - calc( 35px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 74px * var(--multiplier) ) );
        width: calc( var(--base-font) + 5px );
        height: calc( var(--base-font) + 5px );
    }
    100% {
        top: calc( var(--base-size) - calc( 23px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 66px * var(--multiplier) ) );
        width: calc( var(--base-font) + 3px );
        height: calc( var(--base-font) + 3px );
    }
}
@keyframes loader-active15 {
    0% {
        top: calc( var(--base-size) - calc( 23px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 66px * var(--multiplier) ) );
        width: calc( var(--base-font) + 3px );
        height: calc( var(--base-font) + 3px );
    }
    100% {
        top: calc( var(--base-size) - calc( 17px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 55px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
}
@keyframes loader-active16 {
    0% {
        top: calc( var(--base-size) - calc( 17px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 55px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
    100% {
        top: calc( var(--base-size) - calc( 16px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 45px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
}
@keyframes loader-active17 {
    0% {
        top: calc( var(--base-size) - calc( 16px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 45px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
    100% {
        top: calc( var(--base-size) - calc( 18px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 35px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
}
@keyframes loader-active18 {
    0% {
        top: calc( var(--base-size) - calc( 18px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 35px * var(--multiplier) ) );
        width: calc( var(--base-font) + 1px );
        height: calc( var(--base-font) + 1px );
    }
    100% {
        top: calc( var(--base-size) - calc( 13px * var(--multiplier) ) );
        left: calc( var(--base-size) - calc( 31px * var(--multiplier) ) );
        width: 0px;
        height: 0px;
    }
}