@charset "utf-8";



/***** Loader *****/

.loader-dots {
    width: 2.4rem; margin: auto;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#FFF 90%,#0000);
    background: 
        var(--_g) 0%   50%,
        var(--_g) 50%  50%,
        var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7 0.8s infinite linear;
}
.sm .loader-dots { width: 2rem; }
.sm.tips .loader-dots { width: 5rem; }
@keyframes l7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}


.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-right: 16px solid green;
    border-bottom: 16px solid red;
    border-left: 16px solid pink;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/*Animated box*/

.box-animate {
    background: repeating-conic-gradient(from var(--a), rgba(var(--effect-color-rgb), 0.5) 0%, rgb(var(--effect-color-rgb), 0.5) 5%, transparent 5%, transparent 40%, rgb(var(--effect-color-rgb), 0.5) 50%); 
    animation: animate 4s linear infinite;
    padding: 8px;
    border-radius: 26px;
}

.box-animate::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(from var(--a), rgb(var(--effect-color2-rgb), 0.15) 0%, rgb(var(--effect-color2-rgb), 0.15) 5%, transparent 5%, transparent 40%, rgb(var(--effect-color2-rgb), 0.15) 50%); 
    animation: animate 4s linear infinite;
    animation-delay: -1s;
    border-radius: 26px;
    margin: -8px 0 0 -8px;
}
.box-animate.rounded::before { border-radius: 200px; }

.box-animate-single {
    background: repeating-conic-gradient(from var(--a), rgb(var(--sidebar-color), 0.5) 0%, rgb(var(--sidebar-color), 0.5) 5%, transparent 5%, transparent 40%, rgb(var(--sidebar-color), 0.5) 50%); 
    animation: animate 5s linear infinite;
    padding: 3px;
    border-radius: 26px;
}


@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes animate {
    0% { 
        --a: 0deg;
    }
    100% { 
        --a: 360deg;
    }
}


@keyframes AnimationName {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%;  }
}


@keyframes animation-content-outline {
    0% { outline-width: 3px; }
    50% { outline-width: 8px; }
	100% { outline-width: 3px; }
}