/*
* @paquete VISOF
* @subpaquete Presentacion: Login
* @item template azul
* @Compañia ViSof - www.visof.co
* @Author Dick Villarreal
* @modified: 20190525: Se sprimer datos no necesarios
* @modified: 20231106: Se actualiza presentación
*/
/* posiciones genericas */
body {
	margin: 0px 0px 0px 0px;
	color : #000;
	background-color: #FFF;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#break {
	height: 5px;
}
a {
	color: #003333;
	text-decoration: none;
}
a:hover {
	color : #C64934;
	text-decoration : underline;
}
a:active {
	color : #333333;
	text-decoration : underline;
}

form {
	margin: 0px 0px 0px 0px;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  padding-top:6px;
  text-align:justify;
}
.form_data {
	width: 90%;
	padding-top: 3px;
	background-color: #B5E0F4;
/*	background: linear-gradient(#B5E0F4, white);*/
/*	background-color:#d6eef9; */
	border-radius:5px;
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Safari y Chrome */ 	
  margin-right: auto;
  margin-left: auto;
	text-align:justify;
	padding-bottom: 8px;
}
.form_datab {
	width: 90%;
	padding-top: 3px;
	background: white;
/*	background-color:#d6eef9; */
	border-radius:5px;
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Safari y Chrome */ 	
  margin-right: auto;
  margin-left: auto;
	text-align:justify;
	padding-bottom: 8px;
}

.limpiar{
	height:10px;
  content: "";
  display: table;
  clear: both;
}

.barra_azul_oscuro {
	text-align:center;
	color:#FFFFFF;
	background-color:#003366;
}
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
/*	border-bottom-size:1px;
	border-bottom-style:solid;
	border-bottom-color:#d6eef9; */
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.row_logo {
	margin-top:0px;
	float:right;
	margin-bottom:1px;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-2m {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-2l {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.form_texto {
	width:100%;
	text-align:left;
	padding-left: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color:#BCE6FC;	
/*order-bottom : solid 2px #ffffff; */
	border-radius:5px;
	overflow:hidden;
}
.form_textoc {
	width:100%;
	text-align:left;
	padding-left: 3px;
	background-color:#BCE6FC;
	padding-top: 4px;
	padding-bottom: 4px;
	height:26px;
}
/* fondo transparente */
.form_textot {
	width:100%;
	text-align:left;
	padding-left: 3px;
	padding-top: 4px;
	padding-bottom: 4px;
	height:26px;
}
/* fondo transparente titulo */
.form_textott {
	width:100%;
	text-align:left;
	padding-left: 3px;
	padding-top: 4px;
	padding-bottom: 4px;
	height:26px;
	font-size:1.5em;
	font-weight:600;
}

.form_campo {
	width:100%;
	text-align:left;
	padding-left: 3px;
	background-color:#fcfcfb;
	padding-top: 4px;
	padding-bottom: 4px;
	height:22px;
}
.form_campoa {
	width:100%;
	text-align:left;
	padding-left: 3px;
	background-color:#fcfcfb;
	padding-top: 4px;
	padding-bottom: 4px;
	overflow:hidden;

}

.form_inputr {
    z-index: -3;
	height:18px; 
    font-size: 11px;
	background-color:#FFFFFF;
	border-top: solid 1px #FFFFFF;
	border-right : solid 1px #33cccc;
	border-bottom : solid 1px #33cccc;
	border-left: solid 1px #33cccc;
	min-width: 80%;	
	max-width: 80%;	
}
.form_inputr:focus, .form_inputr:active {
    z-index: -3;
	height:18px; 
    font-size: 11px;
	background-color:#F4F4F4;
	border-top: none;
	border-right : solid 1px blue;
	border-bottom : solid 1px blue;
	border-left: none;
	min-width: 80%;	
	max-width: 80%;	
	outline:none;
}

.form_inputr1 {
    z-index: -3;
	height:18px; 
    font-size: 11px;
	background-color:#FFFFFF;
	border-top: solid 1px #FFFFFF;
	border-right : solid 1px #33cccc;
	border-bottom : solid 1px #33cccc;
	border-left: solid 1px #33cccc;
	min-width: 80%;	
	max-width: 80%;	
}
.form_inputr1:focus, .form_inputr1:active {
    z-index: -3;
	height:18px; 
    font-size: 11px;
	background-color:#F4F4F4;
	border-top: none;
	border-right : solid 1px blue;
	border-bottom : solid 1px blue;
	border-left: none;
	min-width: 80%;	
	max-width: 80%;	
	outline:none;
}

.imagen_pass {
	float:right;
    margin-left: auto;
    margin-right: auto;
    display: block;
	padding-right:4px;		
}

.buttonblanco {
	background-repeat:no-repeat;
	background-color:#ffffff;
	border:double;
/*	border-color:#CEFFFF; */
	border-color:#B5E0F4;	
}


.buttonlogin {
	background-repeat:no-repeat;
	background-color:#f4f4f4;
	color:#31318d;
	font-weight:400;
	font-size:11px;	
	border-top: solid 1px #FFFFFF;
	border-right : solid 1px #15157D;
	border-bottom : solid 2px #15157D;
	border-left: solid 1px #FFFFFF;
 	padding-left:4px; 
	padding-right:4px;		
	height:30px;
	border-radius: 2px;	
	cursor:pointer;
	width:200px;
}
.buttonlogin:hover, .buttonlogin:focus {
	background-repeat:no-repeat;
	background-color:#006699;
	color:#fff;
	font-weight:400;
	font-size:11px;	
	border-top: solid 1px #FFFFFF;
	border-right : solid 1px #33cccc;
	border-bottom : solid 2px #33cccc;
	border-left: solid 1px #FFFFFF;
	padding-left:4px;
	padding-right:4px;		
	height:30px;
	border-radius: 2px;	
	cursor:pointer;
	width:200px;
}

.buttonforget {
	background-repeat:no-repeat;
	background-color:#999999;
	color:#fff;
	font-size:1em;	
 	padding-left:4px; 
	padding-right:4px;		
	height:30px;
	border:hidden;
	cursor:pointer;
	padding-top:3px;
	padding-bottom:3px;
	margin-left: auto;
	margin-right: auto;
	margin-top:5px;
	width:200px;
	outline:none;
}
.buttonforget:hover, .buttonforget:focus {
	background-repeat:no-repeat;
	background-color:#666666;
	color:#fff;
	font-size:1em;	
	padding-left:4px;
	padding-right:4px;		
	border:hidden;
	height:30px;
	cursor:pointer;
	padding-top:3px;
	padding-bottom:3px;
	margin-left: auto;
	margin-right: auto;
	margin-top:5px;
	width:200px;
	outline:none;
}


/* 20220222 se adicionan par acaptcha */
.novisible {
	display:none;
}
.sivisible {
	display:visible;
}

/* mosmsg en rojo */
.form_mensaje_rojo {
	font-weight:600;
	font-size:14px;	
	width:80%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding-left: 4px;
	padding-top: 8px;
	padding-bottom: 8px;
	background-color:#e2e2e2;	
	border-radius:5px;
	color:red;
	box-shadow: 5px 5px;	
}
/* mosmsg en verde */
.form_mensaje_verde {
	font-weight:600;
	font-size:14px;	
	width:80%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding-left: 4px;
	padding-top: 8px;
	padding-bottom: 8px;
	background-color:#e2e2e2;	
	border-radius:5px;
	color:green;
	box-shadow: 5px 5px;	
}
.ctr {
	text-align: center;
}
.error {
	color : #ff0000;
	font-size : 15px;
	font-weight : bold;
}
.bigtitulo {
	font-weight:500;
	font-size:20px;
}
.form_img100 {
max-width: 100%;
max-height: 100%;
}

/* escarlata */
.verquery {
background-color:#990000; 
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
/* ****************************************************************************************************************************************************************************  576 */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
  
	.col-3 {
  width: 100%;
		
	}
	.col-9 {
    width: 100%;
		
	}
	/* azul oscuro */
	.verquery {background-color:#000099;  }

}

/* ceular smasung normal evalua si esta es la minima resolucion */
/* ****************************************************************************************************************************************************************************  768 Este */
@media (max-width: 768px) {
body {
	margin: 0px 0px 0px 0px;
	color : #000;
	background-color: #FFF;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 1em;
}
.container {
    max-width: 720px;
}

.form_data {
	width: 100%;
	padding-top: 3px;
	background: linear-gradient(#B5E0F4, white);
/*	background-color:#d6eef9; */
	border-radius:5px;
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Safari y Chrome */ 	
  margin-right: auto;
  margin-left: auto;
	text-align:justify;
	padding-bottom: 8px;
}
.form_datab {
	width: 100%;
	padding-top: 3px;
	background: white;
/*	background-color:#d6eef9; */
	border-radius:5px;
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Safari y Chrome */ 	
  margin-right: auto;
  margin-left: auto;
	text-align:justify;
	padding-bottom: 8px;
}  
.row_logo {
	float:none;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.logo_login {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.col-2 {
    width: 50%;
	min-width: 50%;
    max-width: 50%;
    margin-top: 0;
}
.col-2m {
    width: 100%;
	min-width: 100%;
	color : #345;
	background-color: #000;
    max-width: 100%;
    margin-top: 0;
}
.col-2l {
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

.col-4 {
    width: 100%;
	min-width: 100%;
    max-width: 100%;
}
  
.form_campo {
	width:100%;
	text-align:left;
	padding-left: 3px;
	background-color:#fcfcfb;
	padding-top: 4px;
	padding-bottom: 4px;
	height:24px;
}

.form_texto {
	width:100%;
	text-align:left;
	padding-left: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color:#BCE6FC;	
/*order-bottom : solid 2px #ffffff; */
	border-radius:5px;
	overflow:hidden;
	
}

/* fondo transparente */
.form_textot {
	width:100%;
	text-align:left;
	padding-left: 3px;
	padding-top: 4px;
	padding-bottom: 4px;
	height:24px;
}
/* fondo transparente titulo */
.form_textott {
	width:100%;
	text-align:left;
	padding-left: 3px;
	padding-top: 4px;
	padding-bottom: 4px;
	height:30px;
	font-size:1em;
	font-weight:600;
}

.form_inputr {
    z-index: -3;
	height:22px; 
    font-size: 1em;
	background-color:#FFFFFF;
	border-top: solid 1px #FFFFFF;
	border-right : solid 1px #33cccc;
	border-bottom : solid 1px #33cccc;
	border-left: solid 1px #33cccc;
	min-width: 90%;	
	max-width: 90%;	
}
.form_inputr:focus, .form_inputr:active {
    z-index: -3;
	height:22px; 
    font-size: 1em;
	background-color:#f4f4f4;
	border-left: none;
	border-top: none;
	border-right : solid 1px blue;
	border-bottom : solid 1px blue;
	min-width: 90%;	
	max-width: 90%;	
	outline:none;
}

.form_inputr1 {
    z-index: -3;
	height:22px; 
    font-size: 1em;
	background-color:#FFFFFF;
	border-top: solid 1px #FFFFFF;
	border-right : solid 1px #33cccc;
	border-bottom : solid 1px #33cccc;
	border-left: solid 1px #33cccc;
	min-width: 80%;	
	max-width: 80%;	
}
.form_inputr1:focus, .form_inputr1:active {
    z-index: -3;
	height:22px; 
    font-size: 1em;
	background-color:#F4F4F4;
	border-top: none;
	border-right : solid 1px blue;
	border-bottom : solid 1px blue;
	border-left: none;
	min-width: 80%;	
	max-width: 80%;	
	outline:none;
}
.imagen_pass {
	float:right;
    display: block;
	padding-right:6px;		
}

/* responsive */
.buttonlogin {
	display: block;
	background-repeat:no-repeat;
	background-color:#f4f4f4;
	color:#666666;
	font-size: 14px;
	margin-left: auto;
	margin-right: auto;
	border-top: solid 1px #FFFFFF;
	border-right : solid 1px #15157D;
	border-bottom : solid 1px #15157D;
	border-left: solid 1px #FFFFFF;
	border-radius: 2px;
	height:30px;
	cursor:pointer;
	width:200px;
}
.buttonforget {
	display: block;
	background-repeat:no-repeat;
	background-color:#999999;
	color:#fff;
	font-size: 14px;
	margin-left: auto;
	margin-right: auto;
	border-top: solid 1px #FFFFFF;
	border-right : solid 1px #15157D;
	border-bottom : solid 1px #15157D;
	border-left: solid 1px #FFFFFF;
	border-radius: 2px;
	height:30px;
	width:200px;
	cursor:pointer;
}
/* mosmsg en rojo */
.form_mensaje_rojo {
	font-weight:600;
	font-size:14px;	
	width:100%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding-left: 4px;
	padding-top: 8px;
	padding-bottom: 8px;
	background-color:#e2e2e2;	
	border-radius:5px;
	color:red;
	box-shadow: 5px 5px;	
}
/* mosmsg en verde */
.form_mensaje_verde {
	font-weight:600;
	font-size:14px;	
	width:100%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding-left: 4px;
	padding-top: 8px;
	padding-bottom: 8px;
	background-color:#e2e2e2;	
	border-radius:5px;
	color:green;
	box-shadow: 5px 5px;	
}

  /* verde */
  .verquery {background-color:#009900;  }
  
}
/* fin 768 */

/* mi samsung */
/* ****************************************************************************************************************************************************************************  992 */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
	.col-3 {
		width:25%;
	}
	.col-9 {
		width:75%;
	}
	/*  amarillo quemado */
	.verquery {background-color:#FFCC00; }
  
}
/* fin 992 */

/* evalua si esta es la misma resolucion, por lo que apica para desktop */
/* ****************************************************************************************************************************************************************************  1200 */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }

	.col-3 {
  float: left;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  margin-top: 6px;
	}
	.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
	border:thick;
	border-color:#FFFFFF;
	
  float: left;
  margin-top: 6px;
	}
	/* morado */
	.verquery {background-color:#9933FF; }
  
}
/* fin 1200 */