#toast-container{
    position:fixed;
    top:24px;
    right:24px;
    z-index:99999;

    display:flex;
    flex-direction:column;
    gap:14px;

    pointer-events:none;
}

.toast{

    min-width:320px;
    max-width:420px;

    padding:18px 22px;

    border-radius:16px;

    color:#fff;

    display:flex;
    align-items:center;
    gap:14px;

    font-family:inherit;

    font-size:15px;

    font-weight:500;

    box-shadow:
        0 18px 40px rgba(0,0,0,.18);

    transform:translateX(120%);
    opacity:0;

    transition:
        transform .35s ease,
        opacity .35s ease;

    pointer-events:auto;
}

.toast.show{

    transform:translateX(0);
    opacity:1;

}

.toast.success{

    background:#4B008D;

    border-left:6px solid #FF5627;

}

.toast.error{

    background:#b91c1c;

    border-left:6px solid #ff5627;

}

.toast .icon{

    font-size:22px;

    flex-shrink:0;

}

.toast .content{

    flex:1;

}

.toast .title{

    font-weight:700;

    margin-bottom:2px;

}

.toast .message{

    font-size:14px;

    opacity:.95;

}

.toast .close{

    cursor:pointer;

    font-size:18px;

    opacity:.8;
}

.toast .close:hover{

    opacity:1;

}

@media(max-width:640px){

    #toast-container{

        left:16px;
        right:16px;
        top:16px;

    }

    .toast{

        min-width:100%;
        max-width:100%;

    }

}