.slide-in-right {
    animation: slideInRight 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide-out-left {
    animation: slideOutLeft 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide-in-left {
    animation: slideInLeft 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide-out-right {
    animation: slideOutRight 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideInRight {
    0% {
        transform: translateX(40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-40px);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(40px);
        opacity: 0;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-12px);
    }
    60% {
        transform: translateY(-6px);
    }
}

.answer-button.bounce {
    animation: bounce 1s;
}

.modal-fullscreen .modal-dialog {
    max-width: 100%;
    margin: 0;
}

.modal-fullscreen .modal-content {
    min-height: 100vh;
    border-radius: 0;
}

.question input:focus {
    outline: none;
    border-color: #359FA0;
    box-shadow: 0 0 0 4px rgba(53, 159, 160, 0.2);
}

input.is-invalid {
    border-color: #D64545;
    box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.14);
}

input.is-valid {
    border-color: #2F9E6B;
    box-shadow: 0 0 0 4px rgba(47, 158, 107, 0.14);
}