.notification-wrapper{
    position:fixed;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    z-index:999999;
    width:100%;
    max-width:430px;
    padding:0 15px;
    pointer-events:none;
}

.notification{
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
    background:#fff;
    border-radius:18px;
    padding:18px 20px;
    margin-bottom:15px;

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

    animation:notificationShow .45s ease;

    pointer-events:auto;

    overflow:hidden;
}

.notification::before{
    content:"";
    position:absolute;
    right:0;
    top:0;
    width:6px;
    height:100%;
}

.notification-success::before{
    background:#28a745;
}

.notification-error::before{
    background:#dc3545;
}

.notification-warning::before{
    background:#ffc107;
}

.notification-info::before{
    background:#17a2b8;
}

.notification-icon{

    width:48px;
    height:48px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;
    flex-shrink:0;
}

.notification-success .notification-icon{
    background:#e8f8ed;
    color:#28a745;
}

.notification-error .notification-icon{
    background:#fdecec;
    color:#dc3545;
}

.notification-warning .notification-icon{
    background:#fff8e6;
    color:#d39e00;
}

.notification-info .notification-icon{
    background:#e9f8fc;
    color:#17a2b8;
}

.notification-content{
    flex:1;
}

.notification-title{

    font-weight:700;

    margin-bottom:6px;

    color:#222;
}

.notification-message{

    font-size:14px;

    color:#666;

    line-height:1.8;
}

.notification-close{

    border:none;
    background:none;

    font-size:20px;

    cursor:pointer;

    color:#999;

    transition:.3s;
}

.notification-close:hover{
    color:#000;
}

.notification-progress{

    position:absolute;
    bottom:0;
    right:0;

    height:4px;

    background:#28a745;

    animation:progress 5s linear forwards;
}

.notification-error .notification-progress{
    background:#dc3545;
}

.notification-warning .notification-progress{
    background:#ffc107;
}

.notification-info .notification-progress{
    background:#17a2b8;
}

@keyframes notificationShow{

    from{

        opacity:0;

        transform:translateY(-30px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }

}

@keyframes notificationHide{

    to{

        opacity:0;

        transform:translateY(-30px);
    }

}

@keyframes progress{

    from{
        width:100%;
    }

    to{
        width:0;
    }

}

@media(max-width:576px){

.notification{

padding:15px;

}

.notification-title{

font-size:15px;

}

.notification-message{

font-size:13px;

}

}