.alert {
    position: relative;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #cce5ff; /* Світло-блакитний фон для primary alert */
    color: #004085; /* Темно-синій текст для primary alert */
    border-color: #b8daff; /* Колір межі для primary alert */
    font-family: Arial, sans-serif; /* Основний шрифт */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легка тінь для ефекту */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.alert-absolute {
    position: fixed !important; /* або absolute, але fixed краще для повідомлень */
    top: 40px; /* Відступ від верхнього краю; відрегулюйте за потреби */
    left: 50% !important; /* Центруємо по горизонталі */
    z-index: 10001;
    transform: translateX(-50%); /* Коригуємо позицію для центровання */
    width: 80%; /* Встановлюємо ширину 80% */
}

.alert.hide {
    opacity: 0;
    transform: scale(0.9);
}

.alert-primary {
    background-color: #cce5ff;
    color: #004085;
    border-color: #b8daff;
}

.alert-secondary {
    background-color: #e2e3e5; /* Світло-сірий фон для secondary alert */
    color: #383d41; /* Темно-сірий текст для secondary alert */
    border-color: #d6d8db; /* Колір межі для secondary alert */
}

.alert-success {
    background-color: #d4edda; /* Світло-зелений фон для success alert */
    color: #155724; /* Темно-зелений текст для success alert */
    border-color: #c3e6cb; /* Колір межі для success alert */
}

.alert-warning {
    background-color: #fff3cd; /* Світло-жовтий фон для warning alert */
    color: #856404; /* Темно-жовтий/коричневий текст для warning alert */
    border-color: #ffeeba; /* Колір межі для warning alert */
}

.alert-danger {
    background-color: #f8d7da; /* Світло-червоний фон для danger alert */
    color: #721c24; /* Темно-червоний текст для danger alert */
    border-color: #f5c6cb; /* Колір межі для danger alert */
}