@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.notification {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 1000;
    /* max-width: 500px; */
    font-size: 0.9rem;
}

.notification.success { background-color: #dcf2e5; color: #1d7a46; border-left: 4px solid #1d7a46; }
.notification.error { background-color: #f8d7da; color: #842029; border-left: 4px solid #842029; }
.notification.warning { background-color: #fff3cd; color: #664d03; border-left: 4px solid #664d03; }
.notification.info { background-color: #cfe2ff; color: #0a58ca; border-left: 4px solid #0a58ca; }
.notification.notice { background-color: #cfe2ff; color: #0a58ca; border-left: 4px solid #0a58ca; }
.notification.alert { background-color: #f8d7da; color: #842029; border-left: 4px solid #842029; }


[data-theme="dark"] .notification.success { background-color: #133929; color: #8ce7b2; border-left: 4px solid #2a9d5d; }
[data-theme="dark"] .notification.error { background-color: #350f13; color: #f5c2c7; border-left: 4px solid #842029; }
[data-theme="dark"] .notification.warning { background-color: #332701; color: #ffe69c; border-left: 4px solid #997404; }
[data-theme="dark"] .notification.info { background-color: #031633; color: #9ec5fe; border-left: 4px solid #0d6efd; }
[data-theme="dark"] .notification.notice { background-color: #031633; color: #9ec5fe; border-left: 4px solid #0d6efd; }
[data-theme="dark"] .notification.alert { background-color: #350f13; color: #f5c2c7; border-left: 4px solid #842029; }