:root {
    --animationSlideDistance: 20px;
    --animationDuration: 450ms;
    --animationFunction: ease
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }
    20%,
    80% {
        transform: translate3d(2px, 0, 0)
    }
    30%,
    60% {
        transform: translate3d(-3px, 0, 0)
    }
    45% {
        transform: translate3d(3px, 0, 0)
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(calc(-1 * var(--animationSlideDistance)))
    }
    to {
        transform: translateY(0)
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(var(--animationSlideDistance))
    }
    to {
        transform: translateX(0)
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(var(--animationSlideDistance))
    }
    to {
        transform: translateY(0)
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(calc(-1 * var(--animationSlideDistance)))
    }
    to {
        transform: translateX(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(.8);
        opacity: 0
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(1);
        opacity: 1
    }
    to {
        transform: scale(1.15);
        opacity: 0
    }
}

@keyframes scaleBackground {
    0% {
        transform: scale(1.02)
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes sSpin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes circular-loader {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35
    }
    to {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124
    }
}

@keyframes checkAppearance {
    0% {
        clip-path: inset(0 100% 0 0)
    }
    to {
        clip-path: inset(0 0 0 0)
    }
}

.m_modal.animation-forwards .component-bg,
.m_modal.animation-forwards .modal-content {
    animation: fadeIn var(--animationDuration) var(--animationFunction) both
}

.m_modal.animation-forwards .component-bg .image-holder {
    animation: scaleBackground var(--animationDuration) var(--animationFunction) both
}

.m_modal.animation-backwards .component-bg,
.m_modal.animation-backwards .modal-content {
    animation: fadeOut var(--animationDuration) var(--animationFunction) both
}

.m_modal.animation-backwards .component-bg .image-holder {
    animation: scaleBackground var(--animationDuration) var(--animationFunction) both reverse
}