#notification_container{
    position:fixed;
    right:20px;
    bottom:20px;
    width:380px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:9999;
    font-family:sans-serif;
}

.notification{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:8px;
    color:#fff;
    overflow:hidden;

    transform:translateX(120%);
    opacity:0;
    transition:.35s;
}

.notification.show{
    transform:translateX(0);
    opacity:1;
}

.notification_icon svg{
    width:22px;
    height:22px;
}

.notification_text{
    flex:1;
}

.notification_counter{
    font-size:12px;
    opacity:.8;
    min-width:28px;
}

.notification_close{
    cursor:pointer;
}

.notification_close svg{
    width:16px;
    height:16px;
}

.notification.success{background:#2ecc71;}
.notification.error{background:#e74c3c;}
.notification.info{background:#3498db;}

.notification_progress{
    position:absolute;
    left:0;
    bottom:0;
    height:3px;
    width:100%;
    background:rgba(255,255,255,.6);
    transform-origin:left;
    animation:progress linear forwards;
}

@keyframes progress{
    from{transform:scaleX(1);}
    to{transform:scaleX(0);}
}