/* *,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
} */
/*  */
ul li{
    list-style: none;
}
.toast_cont{
    position: fixed;
    top: 60px;
    right: 36px;
}

.toast_container{
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 20px 35px 20px 25px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
   
    z-index: 9999;
    margin-bottom: 17px;
    overflow: hidden;
    transform:  translateX(120px);
    animation: showtoast 0.5s ease forwards;
}
@keyframes showtoast {
    0%{
        transform: translateX(100%);
    }
    40%{
        transform: translateX(-5%);
    }
    80%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-10px);
    }
    
}
.hideToast{
    animation: hideToasts 0.3s linear forwards;
}
@keyframes hideToasts {
    0%{
        transform: translateX(-10px);
    }
    40%{
        transform: translateX(0%);
    }
    80%{
        transform: translateX(-10px);
    }
    100%{
        transform: translateX(calc(100% + 40px));
    }
}
.toast_container.error{
    border-left: 6px solid red;
}
.toast_container.success{
    border-left: 6px solid #2f00ff;
}
.toast_container.info{
    border-left: 6px solid #ff9100;
}

.toast_container .toast_content{
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}
.toast_container .message h4{
    font-size: 15px;

}
.toast_container .message p{
    font-size: 15px;

}
.toast_container .toast_checked{
    border-radius: 50%;
    font-size: 20px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    margin-right: 20px;

}
.toast_container.error .toast_checked{
    background-color: red;
}
.toast_container.success .toast_checked{
    background-color: #2f00ff;
}
.toast_container.info .toast_checked{
    background-color: #ff9100;
}




.toast_content .toast_cancel{
    position: absolute;
    top: -5px;
    right: -7px;
    cursor: pointer;
}
.toast_container .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    /* background-color: red; */
}

.toast_container .progress::before{
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #2f00ff;
}
.toast_container.error .progress::before{
    background-color: red;
}
.toast_container.success .progress::before{
    background-color: #2f00ff;;
}
.toast_container.info .progress::before{
    background-color: #ff9100;;
}

.progress.active::before{
    animation:  progress 5s linear forwards;  
}
@keyframes progress {
    100%{
        right: 100%;
    }
}
/* toast end */