/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 20, 2024 */
@font-face {
    font-family: 'allerbold';
    src: url('../fonts/aller_std-webfont.woff2') format('woff2'),
         url('../fonts/aller_std-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'alleritalic';
    src: url('../fonts/aller_std_it_2-webfont.woff2') format('woff2'),
         url('../fonts/aller_std_it_2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'allerlight';
    src: url('../fonts/aller_std_lt_2-webfont.woff2') format('woff2'),
         url('../fonts/aller_std_lt_2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'allerlight_italic';
    src: url('../fonts/aller_std_ltit_2-webfont.woff2') format('woff2'),
         url('../fonts/aller_std_ltit_2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'allerregular';
    src: url('../fonts/aller_std_rg_2-webfont.woff2') format('woff2'),
         url('../fonts/aller_std_rg_2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*Fin Fuentes*/
#formuser,#formcharlas,#formquest, #formqr, #formlead,#forminf1,#formpass,#forminfg{
    display:contents;
}
#titulovisor{
    margin-bottom: 9em;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 800px;
    margin: 0px auto;
}
 
td, th {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;   
}
 
tr:nth-child(even) {
    background-color: #eee;
}
 
td:nth-child(n + 3),
th:nth-child(n + 3) {
    text-align: center;
}
 
tbody tr:hover {
    background-color: #ffa900;
}
 
thead {
    background-color: #c5145d;
    color: white;
}

body{
    position: absolute;
    left: 45%;
    transform: translate(-50%);
    font-family: allerregular;
    background-image: url('../img/Fondo.jpg');
    background-attachment: repeat-y;    
    background-color:#bbbbbb ;
    background-position:bottom;
    background-size: 1200px;
    background-position-y: 0;
    width:90%;
    margin: 0 5% 0 5%;
    max-width: 1200px;
    border: 0px solid;
    color: black;
}
hr{
    width:20%;
    height: 0.15em;
    background-color: white;
    border:0;
}

hr.red{
    width:40%;
    height: 0.15em;
    background-color: #c5145d;
    border:0;
    margin-bottom: 15px;
}
hr.yellow{
    width:15%;
    height: 0.5em;
    background-color: #ffa900;
    border:1;
    margin-bottom: 15px;
    border-radius: 5px ;
}
spam{
    color:#c5145d;

}
textarea{
    width: 80%;
    field-sizing:content;
    border-radius: 5px;
    font-size: 1.2em;
    font-family: allerlight;
}

.titulo{
    font-size: 1.3em;
    font-family: allerbold;
    letter-spacing: 0em;
}
.titulo h1{
    font-size: 1.5em;
}
.
.titulo img{
    max-width: 90% !important;
}
/*   START HEAD   */
.head{
    display: flex; /*Convertimos al menú en flexbox*/
    justify-content: space-between; /*Con esto le indicamos que margine todos los items que se encuentra adentro hacia la derecha e izquierda*/
    align-items: center; /*con esto alineamos de manera vertical*/
    margin-top:2%;
   
}
.botoncierre{
    border-style: solid;
    border-color:white;
    background-color: #cd1f5e;
    margin-bottom: 0.3em;
    color: white;
    border-radius: 2em;
    padding:5px 15px 5px 15px;
    font-size: large;
    font-family: allerregular;
    box-shadow: 3px 3px 0px 0px #cd1f5e;
    font-size: 1em;
    cursor: pointer;
}

}
/*   FIN HEAD   */
/*   START FOOTER   */
.txtfooter{
    padding: 2em 3em;
    background-color: #c5145d;
    color:white;
}
.footer p{
    text-align: justify;
}
.prefoot{
        display: flex;
        background-color: #eeeeee77;
        justify-content:end;
        padding-right: 2em;        
}
p.pretxt{
        margin-bottom: 0px;
        color:#c5145d;
        font-size: 1.3em;        
}
.subfoota{
    padding:1em 0 1em 0 ;
    font-family: allerlight;
    background-color: #ac1151;
    color:white;
}
/*   END FOOTER   */
/*   START LOGIN   */
#flogin{
    background-image: url('../img/Pantalla_1_caja_login.png');
    background-size: 100%;
    background-repeat: no-repeat;
    aspect-ratio: 89/50;
    max-width: 45em;
    padding-top:45% ;
}
.log_container{
    margin-top: 1% !important;
    margin-bottom: 1% !important;
    //border:2px solid;
    border-color: #c5145d;
    //background-color:#c5145d ;
    color: white;
    border-radius: 1em;
    max-width:45em;
    min-width: 20em;
    margin:0 auto;
    display:flex;
    flex-direction: column;
}
.log_container a{
    color:#ffab20;
}
.row_flex{
    display:flex;
    margin: 1em 2em;

}
.row_flex label{
    flex-basis:30%;
    text-align: end;
    margin-right: 1em;
}
.row_flex input{
    flex: 1;
    border-radius: 1em;
    padding-left: 10px;
}
.log_container button{
    border-style: solid;
    border-color:white;
    background-color: #cd1f5e;
    margin-bottom: 1em;
    color: white;
    border-radius: 2em;
    padding:10px 30px 10px 30px;
    font-size: large;
    font-family: allerregular;
    box-shadow: 4px 4px 0px 0px #cd1f5e;
    font-size: 1.3em;
    cursor: pointer;
}
#icon_input{  
  position: absolute;
  user-select: none;  
  color:#5b73af;
  padding-top: 0.5em;
  padding-left: 1em;
  font-size: 1.3em;
}
input.luser{
    padding-top: 0.5em;
    padding-left: 3rem;
    padding-bottom: 0.5em;    
    border-color: grey;
    font-size: 1.3em; 
}
.rowlog{
    margin: 1em 5em !important;
}
#mailolvido{
    font-size: 1.2em;
    border-radius: 15px;
    border-style: solid;
    padding-left: 10px;
    width: 50%;
    margin-bottom: 1em;
    text-align:center;
}
#btnrecover{
    border-style: solid;
    border-color:white;
    background-color: #cd1f5e;
    margin-bottom: 1em;
    color: white;
    border-radius: 2em;
    padding:8px 20px 8px 20px;
    font-size: large;
    font-family: allerregular;
    box-shadow: 4px 4px 0px 0px #cd1f5e;
    font-size: 1.3em;
    cursor: pointer;
}
}
/*   END LOGIN   */
/* REGISTRO REPRESENTANTES*/
.hide{
    display: none !important;
}
.regrep{    
    background-color: #eeeeeebb;
    border-radius: 10px;
    border-top-style: solid;
    border-color: grey;
    width: 80%;
    margin: 0 10% 30px 10%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 0px 0px;
    justify-content: space-evenly;   
    align-items: center;
}

.regrep .casilla{
    width:45%; 
    text-align: center;
    margin-top:20px;
}

.regrep .fila{
    margin-top:20px;
    width:90%; 
    text-align: center;
    margin-bottom:20px;
}

.regrep button{
    border-style: solid;
    border-color:#de005c;
    background-color: #de005c;
    color: white;
    border-radius: 2em;
    padding:8px 25px 8px 25px;
    font-size: 1em !important;
    font-family: allerbold;
    box-shadow: 4px 4px 0px 0px #ad1d51;
    font-size: 1.2em;
    cursor: pointer;
}
.regrep label{
    color:#de005c;
    font-size: 1.2em;
    padding-right: 5px;
}
.regrep input   {
    font-size: 1.2em;
    border-radius: 15px;
    border-style: solid;
    padding-left: 10px;
    width: 70%;
}
.regrep button i{
    padding-right: 6px;    
}
.subtregrep{    
    padding-left: 15px;
    font-family: allerbold;
    font-size: 1.3em;
    width: 80%;
    margin: 0 10% 5px 10%;
    cursor: pointer;   
}
form.fuprepre{
    margin-top: 1em;
}
label.subtitulo{
    font-weight: 800;
}
.fuprepre input{
    margin-bottom: 0.5em;
}
/* FIN REGISTRO REPRESENTANTES*/
/* INICIO CREAR CHARLA-PAGINA*/
.charlas{
    background-color: #eeeeeebb;
    border-radius: 10px;
    border-top-style: solid;
    border-color: #de005c;
    width: 80%;
    margin: 0 10% 30px 10%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 0px;
    justify-content: space-evenly;   
    align-items: center;
}
.charlas label{
    color:#de005c;
    font-size: 1.2em;
    padding-right: 5px;
}
.charlas input   {
    font-size: 1.2em;
    border-radius: 15px;
    border-style: solid;
    padding-left: 10px;
    width: 60%;
}
.charlas button{
    border-style: solid;
    border-color:#de005c;
    background-color: #de005c;
    color: white;
    border-radius: 2em;
    padding:8px 25px 8px 25px;
    font-size: 1em !important;
    font-family: allerbold;
    box-shadow: 4px 4px 0px 0px #ad1d51;
    font-size: 1.2em;
    cursor: pointer;
}
.charlas button i{
    padding-right: 6px; 
    }
.charlas .fila{
    margin-top:20px;
    width:90%; 
    text-align: center;
    margin-bottom:20px;
}
/* FIN CREAR CHARLA-PAGINA*/
/* INICIO PREGUNTAS*/
.questions{
    background-color: #eeeeeebb;
    border-radius: 10px;
    border-top-style: solid;
    border-color: #000000;
    width: 80%;
    margin: 0 10% 30px 10%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 0px;
    justify-content: space-evenly;   
    align-items: center;
}
.questions .casilla{
    width:45%; 
    text-align: center;
    margin-top:20px;
}

.questions .fila{
    margin-top:20px;
    width:90%; 
    text-align: center;
    margin-bottom:20px;
}
.questions button{
    border-style: solid;
    border-color:#de005c;
    background-color: #de005c;
    color: white;
    border-radius: 2em;
    padding:8px 25px 8px 25px;
    font-size: 1em !important;
    font-family: allerbold;
    box-shadow: 4px 4px 0px 0px #ad1d51;
    font-size: 1.2em;
    cursor: pointer;
}
.questions label{
    color:#de005c;
    font-size: 1.2em;
    padding-right: 5px;
}
.questions input   {
    font-size: 1.2em;
    border-radius: 15px;
    border-style: solid;
    padding-left: 10px;
    width: 70%;
}
.questions button i{
    padding-right: 6px;    
}
.questions select{
    font-size: 1.2em;
    border-radius: 15px;
    border-style: solid;
    padding-left: 10px;
    margin-bottom: 10px;
}
/* FIN CREAR PREGUNTAS*/
/* INICIO DESCARGAS*/
.descargas{
    background-color: #eeeeeebb;
    border-radius: 10px;
    border-top-style: solid;
    border-color: #ffa900;
    width: 80%;
    margin: 0 10% 30px 10%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 0px;
    justify-content: space-evenly;   
    align-items: center;
}
.descargas label{
    color:black;
    font-size: 1.2em;
    padding-right: 5px;
}
.descargas button{
    border-style: solid;
    border-color:#de005c;
    background-color: #de005c;
    color: white;
    border-radius: 2em;
    padding:8px 25px 8px 25px;
    font-size: 1em !important;
    font-family: allerbold;
    box-shadow: 4px 4px 0px 0px #ad1d51;
    font-size: 1.2em;
    cursor: pointer;
} 
.descargas .fila{
    margin-top:10px;
    width:90%; 
    text-align: center;
    margin-bottom:10px;
}
.descargas button i{
    padding-right: 6px;    
}
.descargas select{
    font-size: 1.2em;
    border-radius: 15px;
    border-style: solid;
    padding-left: 10px;
    margin-bottom: 10px;
}

.descargas .casilla{
    width:45%; 
    text-align: center;
    margin-top:20px;    
}

/*FIN DESCARGAS*/
/*pagina gestores*/
.indicagestor{
    font-size: 1.4em;
    max-width: 70%;
}
.contqr{    
    background-color: #eeeeeebb;
    border-radius: 10px;
    border-top-style: solid;
    border-color: black ;
    width: 80%;
    margin: 0 10% 30px 10%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 0px;
    justify-content: space-evenly;   
    align-items: center;
}
.contqr label{
    color:#de005c;
    font-size: 1.2em;
    padding-right: 5px;
}
.contqr .casilla{
    width:43%; 
    text-align: center;
    margin-top:10px;
    margin-bottom:10px;
}

.contqr .fila{
    margin-top:10px;
    width:90%; 
    text-align: center;
    margin-bottom:10px;
}
.contqr input   {
    font-size: 1.2em;
    border-radius: 15px;
    border-style: solid;
    padding-left: 10px;
    width: 70%;
}
.contqr button i{
    padding-right: 6px;    
}
.contqr button{
    border-style: solid;
    border-color:#de005c;
    background-color: #de005c;
    color: white;
    border-radius: 2em;
    padding:8px 25px 8px 25px;
    font-size: 1em !important;
    font-family: allerbold;
    box-shadow: 4px 4px 0px 0px #ad1d51;
    font-size: 1.2em;
    cursor: pointer;
}
.contqr select{
    font-size: 1.2em;
    border-radius: 15px;
    border-style: solid;
    padding-left: 10px;
    margin-bottom: 10px;
}
#codasesor{
    width: auto !important;
}
#datecharla{
    width: auto !important;
}
/*fin página gestores */
/*inicio página visorqr */
#contentqr{
    text-align: center;
}
/*fin página gestores */
/*inicio pagina leads*/
.contlead{
    background-color: #1b1c49;
    border-radius: 15px;    
    width: 80%;
    margin: 0 10% 10px 10%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 0px;
    justify-content: space-evenly;   
    align-items: center;
}
.contlead .fila{
    margin-top:10px;
    width:90%; 
    text-align: center;
    margin-bottom:10px;
    color: white;
}
.contlead .fila p{
    margin-top:0px;
    width:100%; 
    text-align: center;
    margin-bottom:0px;
    color: white;
}
.contlead input   {
    font-size: 1.3em;
    border-style: solid;
    padding-left: 1.7em;
    width: 70%;
    flex: 1;
    border-radius: 1em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.btnlead i{
    padding-right: 6px;    
}
.btnlead{
    margin-top:1em;
    border-style: solid;
    border-color:#ffa900;
    background-color: #ffa900;
    color: white;
    border-radius: 2em;
    padding:8px 25px 8px 25px;
    font-size: 1.4em !important;
    font-family: allerbold;
    box-shadow: 4px 4px 0px 0px #bf7f00;    
    cursor: pointer;
}
#formlead .fila #icon_input{
    padding-top: 0.4em;
    padding-left: 0.7em;
    font-size: 1.2em;
}
#pregunta1,#pregunta2,#pregunta3,#pregunta4,#pregunta5{
    background-color: #eeeeeebb;
    border-radius: 15px;
    border-top-color:#ffa900;   
    border-top-style: solid;
    width: 80%;
    margin: 0 10% 10px 10%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 0px;
    justify-content: space-evenly;   
    align-items: center;
}
.formatq{
    width:90%;
    text-align: justify;
}
.frsta{
    width:100%;
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 8px;
    font-size:1.3em
}

/*fin pagina leads*/
/*inicio pagina createpass*/
#contentpass{    
    background-color: #eeeeeebb;
    border-radius: 10px;
    border-top-style: solid;
    border-color: #ffa900;
    width: 80%;
    margin: 0 10% 30px 10%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 0px 0px;
    justify-content: center;
    align-items: center;
}
#contentpass .casilla{
    width:50%; 
    text-align: center;
    margin-top:20px;
}

#contentpass .fila{
    margin-top:10px;
    width:90%; 
    text-align: center;
    margin-bottom:10px;
}
#formpass label{
    color:#de005c;
    font-size: 1.2em;
    padding-right: 5px;
    text-align: center;
}
#formpass input   {
    font-size: 1.2em;
    border-radius: 15px;
    border-style: solid;
    padding-left: 10px;
    max-width: 70%;
    text-align: center;
}
#btncreap{
    border-style: solid;
    border-color:white;
    background-color: #de005c;
    color: white;
    border-radius: 2em;
    padding:8px 25px 8px 25px !important;
    font-size: 1em !important;
    font-family: allerbold;
    box-shadow: 4px 4px 0px 0px #ad1d51;
    font-size: 1.2em;
    cursor: pointer;
    margin-top:15px;
}
/*fin pagina createpass*/

@media (max-width: 767px) {
    .head{
        display: flex;
        justify-content:start;
        flex-wrap: wrap;
        align-items:center;
       
    }
    .rowlog{
    margin: 1em 12% 1em 18% !important;
    }
    input.luser{
        max-width: 70%;
    }
    #flogin{    
    background-image: url('../img/Pantalla_1_caja_login_mov.png');
    aspect-ratio: 89/75;
    padding-top: 45% !important; 
    background-size: contain;  
    }
    .regrep ,.descargas ,.charlas, .contqr,.contlead,#pregunta1,#pregunta2,#pregunta3,#pregunta4,#pregunta5,#contentpass{
        width: 90%;
        margin: 0 5% 30px 5%;    
    }
    #pregunta1,#pregunta2,#pregunta3,#pregunta4,#pregunta5{
        width: 98%;
        margin: 0 1% 30px 1%;    
    }
    .subtregrep{
        width: 90%;
        margin: 0 5% 5px 5%;
    }
    
    .regrep input, .charlas input , .contqr input, .contlead input{    
        width: 88%;
    }
    .descargas .casilla,.charlas .casilla,.regrep .casilla, .contqr .casilla{
        width:90%;         
    }
    #contentpass .casilla{
        width:90%;
        margin-left: 5%;
    }
    .indicagestor{
    font-size: 1.3em;
    max-width: 90%;
    }
    
}
@media (min-width: 767px) and (max-width:1024px) {
    .regrep ,.descargas ,.charlas, .contlead,,#pregunta1,#pregunta2,#pregunta3,#pregunta4,#pregunta5,#contentpass{
        width: 90%;
        margin: 0 5% 30px 5%;    
    }
}