/* ========== ESTILO ALERTA ========= */

.alert{
    background: #0B8E8D;
    padding: 20px 40px;
    font-family: 'Poppins';
    font-weight: 400;
    min-width: 250px;
    position: absolute;
    right: 0px;
    top: 10px;
    overflow: hidden;
    border-radius: 4px;
    border-left: 5px solid #0E3653;
}

.alert.show{
    animation: show_slide 1s ease forwards;
}@keyframes show_slide{
       0%{
           transform: translateX(100%);
       }
       40%{
           transform: translateX(-10%);
       }
       80%{
           transform: translateX(0%);
       }
       100%{
           transform: translateX(-10px);
       }
   }

.alert.hide{
   animation: show_hide 1s ease forwards;
}@keyframes show_hide{
   0%{
       transform: translateX(-10px);
   }
   40%{
       transform: translateX(0%);
   }
   80%{
       transform: translateX(-10%);
   }
   100%{
       transform: translateX(100%);
   }
}

.alert .icon_alert{
   position: absolute;
   left: 20px;
   top: 50%;
   transform: translateY(-50%);
   color: #FFA400;
   font-size: 30PX;
}

.alert .msg{
    padding: 0 20px;
    font-size: 18px;
    color: #ffffff;
}

.alert .btnClose{
    background: #0E3653;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px 15px;
    color: #1FC4DA;
    font-size: 22px;
    line-height: 40px;
    cursor: pointer;
}

.btnClose:hover{
   background: #1FC4DA;
   color: #0E3653;
}