@charset "utf-8";
@font-face {
    font-family: 'quicksand';
    src: url('../fuentes/quicksand/quicksand-medium.woff2');
	src: url('../fuentes/quicksand/quicksand-medium.woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* CSS Document */
*{box-sizing:border-box !important;}
html{margin:0; padding:0; height:100%}
body{margin:0; font-family: 'quicksand', sans-serif; background: #EEE; display:flex; flex-direction:column;justify-content:center; align-items: center; height:100%;}
#frm_login{position:relative; z-index:999;}
#frm_iniciar{position:relative; z-index:999;}
.login_container{position:relative; z-index:999; box-shadow:0 0 15px; width:300px; display:flex; flex-direction:column;align-items: center; padding:15px;background:#FAFAFA; border-radius:15px;}
.iniciar_container{position:relative; z-index:999; box-shadow:0 0 15px; width:600px; display:flex; flex-direction:column;align-items: center; padding:15px;background:#FAFAFA; border-radius:15px;}
.logo_only{margin:0 auto 15px auto;}
.logo_only img{height:100px;}
.app_name{margin-bottom:5px; font-size:26px; font-family: 'quicksand', sans-serif; font-weight:bold;}
.full_app_name{text-align:center; font-size:10px; color:#AAA;}
.frm_title{margin:15px auto; color:#666; text-align:center; }
.frm_main{display:flex; flex-direction:column; justify-content:center; width:100%; }
.t-white{color:white;}
.t-green{color: #B7DA26; }
.t-blue{color: #20409A}
.t-bold{font-weight:bold;}

.input_login{border:none; border-bottom: 1px solid #999; width:100%; padding:10px; padding-left:40px; margin:10px auto;color:#111; font-family: 'quicksand';}
.input_login:focus {outline:0;}
.columns{display:flex; flex-direction:row; justify-content:center; width:100%;}
.span-full{width:100%;}
.span-2{width:48%;}
.span-3{width:32%;}
.i-user{background: url('../icons/icon-usuario.png') no-repeat 10px center;background-size:24px 24px; background-color: transparent;}
.i-pass{background: url('../icons/icon-password.png') no-repeat 10px center;background-size:24px 24px; background-color: transparent;}
.i-nombre{background: url('../icons/icon-nombre.png') no-repeat 10px center;background-size:24px 24px; background-color: transparent;}
.i-correo{background: url('../icons/icon-correo.png') no-repeat 10px center;background-size:24px 24px; background-color: transparent;}
.input_login::placeholder{color:#999;}
.icono-key{background: url('../icons/icon-key.svg') no-repeat center center}
.icono-iniciar{background: url('../icons/icon-key.svg') no-repeat center center}
.boton_login{margin-top:10px; border:none; background-color: #20409A; width:100%; height:35px; color:white; transition: background-color 0.8s,background-position 0.5s; transition-timing-function:ease}
.inv-texto{font-family: 'quicksand'; opacity:0; transition: opacity ease 0.5s;}
.boton_login:hover{background-color:#2a55cc; background-position:50px ; box-shadow:0 0 5px rgba(0,0,0,.5); transition: background-color 0.8s,background-position 0.5s; transition-timing-function:ease}
.boton_login:hover .inv-texto{opacity:1;transition: opacity ease 0.5s;}
.ro{background:transparent; border:none;}

.error_tab{background:#990000; box-shadow:0 0 10px #000; border-radius: 0 0 15px 15px; padding:15px; bottom:10px; color:white; position:absolute; z-index:0; width: 90%;left: 5%; text-align: center;}

.creado{text-align:right; position:absolute; right:0; bottom: 20px; border-radius: 15px 0 0 15px; padding:10px 15px; background:rgba(255,255,255,0.6); box-shadow:0 0 10px; color:#666; font-size:10px; text-decoration:none;}
.creado a{text-decoration:none;}

@media only screen and (max-width: 1020px) {
	#frm_iniciar{ width:90%}
	.iniciar_container{width:100%}
	.frm_title{font-size:1.9vh;}
	.columns{display:flex; flex-direction:column; justify-content:center; width:100%;}
	.span-2{width:100%;}
	.span-3{width:100%;}
}