/* ======================================== */
/* spinner.css - Loading spinner styles    */
/* ======================================== */

/* ##################################### */
/*               Spinner                 */
/* ##################################### */

.spinner {
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid #3498db !important;
    border-radius: 50% !important;
    width: 22px;
    height: 22px;
    animation: spin 0.5s linear infinite, spinnerFadeIn 0.1s ease-out 0.2s forwards;
    opacity: 0;
    display: inline-block !important;
    align-self: center !important;
}

    .spinner.small {
        width: 10px;
        height: 10px;
        margin: 0 10px;
    }

@keyframes spinnerFadeIn {
    to { opacity: 1; }
}

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

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