/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

   
    .notifications{
        position: fixed;
        top: 100px;
        right: 20px;
    }
    .toast{
        position: relative;
        padding: 10px;
        color: #fff;
        margin-bottom: 10px;
        width: 400px;
        display: grid;
        grid-template-columns: 70px 1fr 70px;
        border-radius: 5px;
        --color: #0abf30;
        background-image: 
            linear-gradient(
                to right, #0abf3055, #22242f 30%
            ); 
        animation: show 0.3s ease 1 forwards  
    }
    .toast i{
        color: var(--color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: x-large;
    }
    .toast .title{
        font-size: x-large;
        font-weight: bold;
    }
    .toast span, .toast i:nth-child(3){
        color: #fff;
        opacity: 0.6;
    }
    @keyframes show{
        0%{
            transform: translateX(100%);
        }
        40%{
            transform: translateX(-5%);
        }
        80%{
            transform: translateX(0%);
        }
        100%{
            transform: translateX(-10%);
        }
    }
    .toast::before{
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: var(--color);
        width: 100%;
        height: 3px;
        content: '';
        box-shadow: 0 0 10px var(--color);
        animation: timeOut 5s linear 1 forwards
    }
    @keyframes timeOut{
        to{
            width: 0;
        }
    }
    .toast.error{
        --color: #f24d4c;
        background-image: 
            linear-gradient(
                to right, #f24d4c55,  30%
            );
    }
    .toast.warning{
        --color: #e9bd0c;
        background-image: 
            linear-gradient(
                to right, #e9bd0c55, #22242F 30%
            );
    }
    .toast.info{
        --color: #3498db;
        background-image: 
            linear-gradient(
                to right, #3498db55, #22242F 30%
            );
    } */


    /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

    .notifications {
        position: fixed;
        top: 70px;
        right: 20px;
        z-index: 9999; 
    }
    
    .toast {
        position: relative;
        padding: 10px;
        color: white;
        margin-bottom: 10px;
        width: 370px;
        display: grid;
        grid-template-columns: 70px 1fr 70px;
        border-radius: 6px;
        --color: #f8fffbcc;
        background-color: #7FAF51;
        background-image: linear-gradient(
            to right, #7FAF51, #7FAF51 100%
        );
        animation: show 0.3s ease 1 forwards;
    }
    
    .toast i {
        color: var(--color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: x-large;
    }
    
    .toast .title {
        font-size: x-large;
        font-weight: bold;
    }
    
    .toast span,
    .toast i:nth-child(3) {
        color: #ffffff;
        opacity: 1;
    }
   
    @keyframes show {
        0% {
            transform: translateX(100%);
        }
        40% {
            transform: translateX(-5%);
        }
        80% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-10%);
        }
    }
    
    .toast::before {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: var(--color);
        width: 100%;
        height: 3px;
        content: '';
        box-shadow: 0 0 10px var(--color);
        animation: timeOut 5s linear 1 forwards;
    }
    
    @keyframes timeOut {
        to {
            width: 0;
        }
    }
    
    .toast.error {
        --color: #e0e0e0;
        background-color: #dc3545;
        background-image: linear-gradient(
            to right, #dc3545,  #dc3545 100%
        );
    }
    
    .toast.warning {
        --color: #ffc107;
        background-color: #ffc107;
        background-image: linear-gradient(
            to right, #ffc107, #ffc107 30%
        );
    }
    
    .toast.info {
        --color: #0dcaf0;
        background-color: #0dcaf0;
        background-image: linear-gradient(
            to right, #0dcaf0, #0dcaf0 30%
        );
    } */



    /* CSS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

.notifications {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999; /* Set a high z-index value */
}

.toast {
    position: relative;
    padding: 10px;
    color: white;
    margin-bottom: 10px;
    width: 320px; /* Increased width to accommodate image and text */
    display: flex; /* Changed display to flex */
    border-radius: 6px;
    --color: #f8fffbcc;
    background-color: #7FAF51;
    background-image: linear-gradient(
        to right, #7FAF51, #7FAF51 100%
    );
    animation: show 0.3s ease 1 forwards;
}

.toast img.toast-image {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.toast i {
    color: var(--color);
    font-size: x-large;
    margin-right: 10px; /* Added margin for spacing between icon and text */
}

.toast .content {
    flex-grow: 1; /* Added to make content area flexible */
}

.toast .title {
    font-size: x-large;
    font-weight: bold;
}

.toast span {
    color: #ffffff;
    opacity: 1;
}

@keyframes show {
    0% {
        transform: translateX(100%);
    }
    40% {
        transform: translateX(-5%);
    }
    80% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-10%);
    }
}

.toast::before {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--color);
    width: 100%;
    height: 3px;
    content: '';
    box-shadow: 0 0 10px var(--color);
    animation: timeOut 5s linear 1 forwards;
}

@keyframes timeOut {
    to {
        width: 0;
    }
}

.toast.error {
    --color: #e0e0e0;
    background-color: #dc3545;
    background-image: linear-gradient(
        to right, #dc3545,  #dc3545 100%
    );
}

.toast.warning {
    --color: #e0e0e0;
    background-color: #ffc107;
    background-image: linear-gradient(
        to right, #ffc107, #ffc107 100%
    );
}

.toast.info {
    --color: #e0e0e0;
    background-color: #0dcaf0;
    background-image: linear-gradient(
        to right, #0dcaf0, #0dcaf0 100%
    );
}