.cws-toast-container {
    position: fixed;
    z-index: 99999;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2%;
    opacity: 0;
    min-width: 25rem;
    overflow: hidden;
    border-radius: .4rem;
}

.cws-toast {
    background: white;
    border: 1px solid transparent;
    border-radius: .4rem;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .5rem;
    padding: .8rem;
    align-items: center;
}

.cws-toast-show{
   animation: slideUp .3s ease forwards; 
}

.cws-toast-hidden {
    animation: slideDown .3s ease forwards;
}

.cws-toast-icon::before {
    font-size: 1.1rem;
    vertical-align: middle !important;
}

button.cws-toast-close::before {
    font-size: 1.5rem;
}

.cws-toast.cws-success {
    background: #dbffec;
    border-color: #86e0b6;
    color: #1a8854;
    font-size: 1rem;
}

.cws-toast.cws-error {
    background: #FBEBEE;
    border-color: #ef9faf;
    color: #B0314B;
    font-size: 1rem;
}

.cws-toast.cws-info{
    background: #E5F1FD;
    border-color: #b3c9e4;
    color: #1662BC;
    font-size: 1rem;
}

.cws-toast-progress {
    position: absolute;
    border-width: 2px;
    border-style: solid;
    bottom: 0;
}

.cws-toast.cws-error .cws-toast-progress{
    border-color: #dd6262;
}

.cws-toast.cws-success .cws-toast-progress{
    border-color: #86e0b6;
}

.cws-toast.cws-info .cws-toast-progress{
    border-color: #2b6cb8;
}



@keyframes slideUp {
    from {
        bottom: 2%;
        opacity: 0;
    }
    to {
        bottom: 8%;
        opacity: 1;
    }
}

@keyframes slideDown {
    from{
        bottom: 8%;
        opacity: 1;
    } 
    to{
        bottom: 2%;
        opacity: 0; 
    }
}