/*------------------------------------------
    #MARK: DOTS
------------------------------------------*/
/* #region */

.dots {
    width: 13.4px;
    height: 13.4px;
    background: var(--color2);
    color: var(--color2);
    border-radius: 50%;
    box-shadow: 22.4px 0,-22.4px 0;
    animation: dots-u8fzftmd 1s infinite linear alternate;
    margin: 20px auto 0;
}

@keyframes dots-u8fzftmd {
    0% {
       box-shadow: 22.4px 0,-22.4px 0;
       background: rgba(71,75,255,0.13);
    }
 
    33% {
       box-shadow: 22.4px 0,-22.4px 0 rgba(71,75,255,0.13);
       background: rgba(71,75,255,0.13);
    }
 
    66% {
       box-shadow: 22.4px 0 rgba(71,75,255,0.13),-22.4px 0;
       background: rgba(71,75,255,0.13);
    }
 }

.iloader {
    margin: 20px 0;
    text-align: center;
    height: 13.4px;
    width: 100%;
    flex: 0 0 100%;
}

.iloader .dots {
    display: none;
}

/* #endregion */

/*------------------------------------------
    #MARK: SPINNER
------------------------------------------*/
/* #region */

.element .spinner {
    width: 40px;
    height: 40px;
    border: 5px solid #ccc;
    border-top-color: #000;
    border-radius: 50%;
    animation: sspin 0.8s linear infinite;
    display: inline-block;
}

@keyframes sspin {
    to {
        transform: rotate(360deg);
    }
}

/* #endregion */