.alert-error-anim {
    animation: shakeX 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shakeX {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
  
.alert-success-anim {
    animation: shakeY 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shakeY {
    10%, 90% {
        transform: translate3d(0, -1px, 0);
    }

    20%, 80% {
        transform: translate3d(0, 2px, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(0, -4px, 0);
    }

    40%, 60% {
        transform: translate3d(0, 4px, 0);
    }
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #00000062;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

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