/*

LINK JQUERY:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

CÓDIGO HTML: 

<div class="exito" style="display: none;"> <img src="https://www.magno.edu.ar/img/exito.png" alt="">Excelente! Registro guardado exitosamente.</div>
<div class="error" style="display: none;"> <img src="https://www.magno.edu.ar/img/error.png" alt="">Ups! Ocurrió un error. Intente nuevamente.</div>
<div class="atencion" id="atencion-checkbox"style="display: none;"> <img src="https://www.magno.edu.ar/img/atencion.png" alt="">Atención! Debe tildar el recuadro de la confirmación de lectura.</div>

*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

:root {
    --verde-alert: #35B791;
    --rojo-alert: #F35752;
}

.exito,
.error,
.atencion{
    position: fixed;
    width: 90%;
    height: 45px;
    left: 5%;
    top: 40px;
    font-size: 15px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    z-index: 9999;
}

.exito{
    background-color: var(--verde-alert);
    color: #fff;
}
.error,
.atencion{
    background-color: var(--rojo-alert);
    color: #fff;
}

.exito img,
.error img,
.atencion img{
    width: 25px;
    height: auto;
    margin-right: 15px;
    margin-left: 20px;
}

@media (min-width: 300px) and (max-width: 600px){
    .exito,
    .error,
    .atencion{
        font-size: 13px;
    }
}

/*CAMPOS REMARCADOS*/
.content .contact-wrapper .contact-form form .campoerror{
    border: 2px solid var(--rojo-alert);
}