@keyframes slideIn {
    from { transform: translateX(120%); }
    to { transform: translateX(0); }
}

@keyframes slideOut {
    from { transform: translateX(0); }
    to { transform: translateX(120%); }
}

@keyframes progress {
    from { width: 100%; }
    to { width: 0%; }
}

.alert-enter {
    animation: slideIn 0.5s ease forwards;
}

.alert-exit {
    animation: slideOut 0.5s ease forwards;
}

.progress-animation {
    animation: progress 5s linear forwards;
}

/* Custom width for different screen sizes */
@media (max-width: 640px) {
    .alert-custom-width {
        width: calc(100vw - 2rem) !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .alert-custom-width {
        width: 400px !important;
    }
}

@media (min-width: 1025px) {
    .alert-custom-width {
        width: 450px !important;
    }
}