/* ================= ALERT ================= */

.alert-container{

    position:fixed;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    z-index:99999;

    display:flex;

    flex-direction:column;

    gap:12px;

    width:95%;

    max-width:450px;

}

.alert{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 18px;

    border-radius:12px;

    color:#fff;

    font-weight:600;

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

    animation:slideDown .35s ease;

}

.alert-success{

    background:#16a34a;

}

.alert-danger{

    background:#dc2626;

}

.close-alert{

    background:none;

    border:none;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    margin-left:15px;

    line-height:1;

}

.close-alert:hover{

    opacity:.7;

}

.fade-out{

    animation:fadeOut .35s forwards;

}

@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeOut{

    to{

        opacity:0;

        transform:translateY(-20px);

    }

}

@media(max-width:600px){

    .alert{

        font-size:14px;

        padding:14px;

    }

}