.flash-messages {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100%;
    max-width: 400px; /* Максимальная ширина сообщения */
    text-align: center;
}

.flash-message {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    color: #fff;
    opacity: 0;
    transform: translateY(-100%);
    animation: slideDown 0.5s ease-out forwards, fadeOut 0.5s ease-out 5.0s forwards;
}

.flash-message.success {
    background-color: #4CAF50; /* Зеленый для успешных сообщений */
}

.flash-message.error {
    background-color: #f44336; /* Красный для ошибок */
}

.flash-message.warning {
    background-color: #ff9800; /* Оранжевый для предупреждений */
}

.flash-message.info {
    background-color: #2196F3; /* Синий для информационных сообщений */
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(20px); /* Опускаем сообщение на 20px от верхнего края */
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(20px); /* Сообщение остается на месте, но исчезает */
    }
}