.notification-container {
    position: fixed;
    right: 20px;
    width: 300px;
    z-index: 9999;
}

.notification-container.top {
    top: 20px;
    bottom: auto;
}

.notification-container.bottom {
    bottom: 20px;
    top: auto;
}

.notification {
    position: relative;
    margin: 10px 0;
    padding: 1rem 2rem;
    border-radius: 8px;
    color: white !important;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
    background: rgba(0, 0, 0, 0.8) !important; /* Default background */
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.success {
    background: rgba(76, 175, 80, 0.95) !important;
    background-color: rgba(76, 175, 80, 0.95) !important;
}

.notification.error {
    background: rgba(244, 67, 54, 0.95) !important;
    background-color: rgba(244, 67, 54, 0.95) !important;
}

.notification.warning {
    background: rgba(255, 152, 0, 0.95) !important;
    background-color: rgba(255, 152, 0, 0.95) !important;
}

.notification.info {
    background: rgba(33, 150, 243, 0.95) !important;
    background-color: rgba(33, 150, 243, 0.95) !important;
}