@charset "utf-8";

/***************************************************/
/* GENERAL */
/***************************************************/
input { font-size: 90%; border: 1px solid #dfdfdf; padding: 15px 8px; width: calc(100% - 18px); background-color: #fff; border-radius: 5px;}
input:focus { outline: 0; }
textarea { font-size: 90%; border: 1px solid #dfdfdf; padding: 8px; width: calc(100% - 18px); background-color: #fff; height: 200px; resize: none; }
textarea:focus { outline: 0; }
select { font-size: 84%; border: 1px solid #dfdfdf; padding: 8px; width: 100%; background-color: #fff; }
select:focus { outline: 0; }

a { color: #1d2939; text-decoration: none; outline: 0; line-height: 0; font-weight: 400;}
a:hover { color: #6ec6f5; text-decoration: none; }
a:visited { color: #2c3136; text-decoration: none; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

.label { font-weight: 700; font-size: 90%; margin: 10px 0; font-family: 'Roboto', sans-serif; position: relative; }
.container {position: relative;}
.emailbox {position: relative;}
.passbox {position: relative;}

.container b { font-size: 80%; background-color: #fff; padding: 5px; position: absolute; top: 3px; left: 14px; color: #b3b3b3; font-weight: 400;}

.oculta {display: none;}

.conth { position: relative;  }

p {color: #fff; font-size: 90%;}
.txtleft {text-align: left; width: 100%;}

.centered {vertical-align: middle;}

.contenidocentrado { width: calc(100% - 40px); max-width: 1700px; margin: 0 auto; }

.required {color: #FF0000!important; }
input.required {border: 1px solid #FF0000;}


/***************************************************/
/* CUERPO */
/***************************************************/
html, body { width: 100%; height: 100%; font-family: 'Roboto', sans-serif;}
body { font-size: 1em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1d2939+0,145169+69,00b2de+99 */
background: #1d2939; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #1d2939 0%, #145169 69%, #00b2de 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #1d2939 0%,#145169 69%,#00b2de 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #1d2939 0%,#145169 69%,#00b2de 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2939', endColorstr='#00b2de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


/***************************************************/
/* CABECERA */
/***************************************************/
header {margin-bottom: 60px;}
.contlogo { position: relative; margin-top: 20px;}
.logocabecera { width: 110px; line-height: 0;}
.logocabecera img { width: 100%; }
.power {padding-right: 20px;}


/***************************************************/
/* MAIN */
/***************************************************/
.cnt-info {background-color: #fff; height: 70vh; width: 70vw; margin: 0 auto; box-shadow: 0px 0px 40px 3px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; min-height: 400px;}
#bglogin {height: 100%; width: 45%;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1d2939+0,135a73+38,00b2de+84,00b2de+84 */
background: #1d2939; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #1d2939 0%, #135a73 38%, #00b2de 84%, #00b2de 84%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #1d2939 0%,#135a73 38%,#00b2de 84%,#00b2de 84%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #1d2939 0%,#135a73 38%,#00b2de 84%,#00b2de 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2939', endColorstr='#00b2de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ position: absolute; top: 0; left: 0; box-shadow: 5px 0px 20px 11px rgba(0, 0, 0, 0.2);}
#formulario {width: 55%; height: 100%; padding: 3% 8%;}
table {height: 100%; width: 100%; }
#bglogin table {margin-left: 15%; width: calc(100% - 15%);}
.lineh1 {height: 7px; width: 70px; background-color: #fff; margin-top: 5px;}
table .login {font-weight: 900; font-size: 250%; color: #fff; font-family: 'Roboto', sans-serif;}

.imgcontainer { width: 80%; margin: 0 auto; margin-bottom: 1.5vw; min-width: 170px; }
.imgcontainer img {width: 100%;}

.bt input { cursor: pointer; background-color: #00b2de; color: #fff; border: none; padding: 12px 40px; font-size: 1.4em; margin-top: 2.5vw; font-family: 'Roboto Slab', serif; transition: 0.35s;}
.bt input:hover {background-color: #1d2939; transition: 0.35s;}

.forgotpas {margin-top: 1vw; font-weight: 400; color: #b3b3b3;}

.check { text-align: left; margin-top: 10px; color: #b3b3b3; font-weight: 400; font-size: 90%;}


/***************************************************/
/* ALERTA ERROR */
/***************************************************/
#alertaerror { font-size: 90%; padding: 15px 8px; width: calc(100%); background-color: rgba(255, 0, 0, 0.37); border-radius: 5px;  text-align: center;}
.txterror {color: #fff; font-weight: 400; font-size: 100%;}


/***************************************************/
/* MEDIAQ */
/***************************************************/
@media screen and (max-width: 720px) {
	#bglogin {width: 100%; height: 15vh; min-height: 60px; position: relative;}
	#formulario {width: 100%; height: 55vh; position: relative; padding: 0 3%; min-height: 300px;}
	.forgotpas { margin-top: 2vh; }
	.bt input { margin-top: 2.5vh; }
	.imgcontainer {margin-bottom: 1.5vh;}
}

.hidden {
	display: none;
}
.container b {
	z-index: 11;
}
input[type="text"], input[type="password"] {
	z-index: 10;
}