/* ==========================================================
   MedTrix Authentication Animations
   Version: 1.0
========================================================== */

/* Popup Scale */

.popup-show{
    animation:popupShow .35s cubic-bezier(.175,.885,.32,1.1) forwards;
}

@keyframes popupShow{

    0%{
        opacity:0;
        transform:translateY(30px) scale(.90);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

.popup-hide{
    animation:popupHide .25s ease forwards;
}

@keyframes popupHide{

    from{
        opacity:1;
        transform:translateY(0) scale(1);
    }

    to{
        opacity:0;
        transform:translateY(15px) scale(.95);
    }

}

/* Spinner Rotation */

.spinner-spin{

    animation:spinnerRotate .9s linear infinite;

}

@keyframes spinnerRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* Button Loading Pulse */

.button-loading{

    pointer-events:none;

    opacity:.75;

}

.button-loading .btn-text{

    opacity:.65;

}

.button-loading .spinner{

    display:inline-flex;

    margin-left:10px;

    vertical-align:middle;

}

/* Success Bounce */

.success-bounce{

    animation:successBounce .75s ease;

}

@keyframes successBounce{

    0%{
        transform:scale(.3);
        opacity:0;
    }

    50%{
        transform:scale(1.15);
        opacity:1;
    }

    70%{
        transform:scale(.95);
    }

    100%{
        transform:scale(1);
    }

}

/* Checkmark Draw */

.checkmark-circle{

    stroke-dasharray:166;

    stroke-dashoffset:166;

    animation:drawCircle .6s ease forwards;

}

.checkmark-check{

    stroke-dasharray:48;

    stroke-dashoffset:48;

    animation:drawCheck .35s ease .55s forwards;

}

@keyframes drawCircle{

    to{

        stroke-dashoffset:0;

    }

}

@keyframes drawCheck{

    to{

        stroke-dashoffset:0;

    }

}

/* Error Shake */

.error-shake{

    animation:errorShake .45s;

}

@keyframes errorShake{

    0%{transform:translateX(0);}
    15%{transform:translateX(-8px);}
    30%{transform:translateX(8px);}
    45%{transform:translateX(-6px);}
    60%{transform:translateX(6px);}
    75%{transform:translateX(-3px);}
    90%{transform:translateX(3px);}
    100%{transform:translateX(0);}

}