#toast-div{
    display: none;
    position: fixed;
    right:10px;
    top:140px;
    background-color:white;
    z-index: 2;
    padding:1rem;
    padding-right: 0;
    border-radius: 0.4rem;
    font-size: 1.2rem;
    font-family: Inter;
    border:none;
    box-shadow: 2px 2px 8px 3px lightgray;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}
#span-1{
    margin-right: 1rem;
}
#span-2{
    margin-right: 1rem;
    color: rgb(82, 82, 82);
}
#button-3{
    margin-right: 1rem;
}
#progress-bar{
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: red;
    left:0;
    bottom: 0;
    margin:0;
    border-radius: 0.5rem;
}
.add-toast{
    animation: bouncestart 0.5s ease-in-out;
}
@keyframes bouncestart {
    0% {
        transform: translateX(150%);
    }100% {
        transform: translateX();
    }
}
.remove-toast{
    animation: bounceend 1s ease-out;
}
@keyframes bounceend {
    100%{
        transform: translateX(150%);
    }
}