.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Increased gap for better spacing between toasts */
    z-index: 10000;
}

/* Toast Styles */
.toast {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    border-radius: 8px;
    min-width: 300px;
    max-width: 320px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    position: relative;
    opacity: 0;
    animation: toastFadeIn 0.3s forwards;
    overflow: hidden;
    border: none !important;
}

    /* Toast Types */
    .toast.success {
        background-color: #fff;
        color: #28a745;
    }

    .toast.error {
        background-color: #fff;
        color: #dc3545;
    }

    .toast.info {
        background-color: #fff;
        color: #17a2b8;
    }

    .toast.warning {
        background-color: #fff;
        color: #ffc107;
    }

    /* Icon Styling */
    .toast .icon {
        margin-right: 8px;
        font-size: 22px;
        color: inherit;
    }

    /* Close Button */
    .toast .close-btn {
        margin-left: auto;
        font-size: 15px;
        cursor: pointer;
        color: inherit;
        padding: 0 4px;
    }

    /* Progress Bar */
    .toast .progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px; /* Adjusted height for a slimmer bar */
        width: 100%;
        opacity: 0.9;
    }

    .toast.success .progress-bar {
        background-color: #28a745;
    }

    .toast.error .progress-bar {
        background-color: #dc3545;
    }

    .toast.info .progress-bar {
        background-color: #17a2b8;
    }

    .toast.warning .progress-bar {
        background-color: #ffc107;
    }

/* Fade In and Fade Out Animations */
@keyframes toastFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastfadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Progress Bar Animation */
@keyframes progressBar {
    from {
        width: 100%;
    }

    to {
        width: 0;
    }
}