html, body
{
	margin:	5px;
	padding: 0;
	background-color: #fff;
	text-align:	center;
	/*  font-family: Verdana, Arial, 'sans-serif' !important; */
	font-family: 'Lato','Quando','Open Sans', Verdana, Arial,sans-serif;
	/* font-size: 100%; */
}

.hstyle
{
	text-align: justify;
}

div#guardado{
	background-color: #CCCCCC;
	display:none;
	position: fixed; 
	top: 40%; 
	left: 18%;	
	width: 70%;
	height: 200px;
	border: 10px solid #DDDDDD;
}

.overlay {
    opacity:0;
    filter: alpha(opacity = 0);
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    display:block;
    z-index:2;
    background:transparent;
}


div#nueva, #editar, #buscar, #actualizar, #misdatos, #pagos, #reportes, #psalir, #ingresos{
	display: inline-block;
	margin: 10px;
	padding: 30px;
	background-color: #160668;
	width: 25%;
	height: 70px;
	max-height: 50%;
	color: #EEEEEE;
	font-size: 16px;
	font-weight: 500;
	vertical-align: middle;
}

div#nueva, #actualizar, #pagos, #reportes
{
	vertical-align: middle;
	font-size:26px;
	font-weight: bold;
}


div#actualizar, #pagos, #reportes,#ingresos
{
	background-color: #0099FF;	
	font-size:24px;
}

div#nueva:hover{
	background-color: #0000FF;
	color: white;
	font-weight: bold;
}

div#editar, #buscar, #misdatos, #pagos, #reportes,  #psalir
{
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #0099FF;
	height: 20px;
}

div#editar:hover, #buscar:hover, #actualizar:hover, #pagos:hover, #reportes:hover, #misdatos:hover{
	background-color: #0000FF;
	color: white;
	font-weight: bold;
}

div#psalir:hover{
	background-color: red;
	color: white;
	font-weight: bold;
}

.txtcuenta
{
	font-size: 22px;
}

input.imglogo
{
	border-style: none;
	margin: 10px;
	padding: 18px;
	width: 50px;
	height: 50px;
	color: #EEEEEE;
	background: transparent url("logo.jpg") no-repeat center center;
	text-align: center;
}

input.botones, input.botonessalir, input.botonestxt
{
	border-style: none;
	margin: 10px;
	padding: 10px;
	background-color: #0099FF;
	width: 150px;
	height: 50px;
	color: #EEEEEE;
	font-size:14px;
	font-weight: 500;
	text-align: center;
}

input.botonestxt
{
    font-weight: bold;
	background-color: white;
	color: black;
}

input.botones:hover, input.botonessalir:hover
{
	background-color: #0000FF;
	color: white;
	font-size:14px;
	font-weight: bold;
	cursor: hand;	
}

input.botonessalir:hover
{
	background-color: red;
}


.ddlistas
{
	font-size:small;
}

div#nuevo, #guardar, #vistaprevia, #salir{
	display:inline-block;
	float: left;
	margin: 10px;
	padding: 10px;
	background-color: #0099FF;
	width: 100px;
	height: 30px;
	max-height: 30%;
	color: #EEEEEE;
	font-size:14px;
	font-weight: 500;
	text-align: center;
}

div#nuevo:hover, #guardar:hover, #vistaprevia:hover, #salir:hover{
	background-color: #0000FF;
	color: white;
	font-size:14px;
	font-weight: bold;
	cursor: hand;
}



div.singin{
	padding: 1%;
	background-color: #F6F6F6;
	width: 80%;
	border-radius: 0.50em; 
	border: 1px solid #AAAAAA;
}
div.singin_enca{
	padding: 1%;
	background-color: #F6F6F6;
	width: 100%;
	height: 90%;
	border-radius: 0.50em; 
	border: 1px solid #AAAAAA;
	font-size: small;
}

input.cuenta, textarea.mensajecorreo{
	color: #000077;
	font-size: 150%;
	font-weight:normal;
	background: #BBBBBB; 
	width: 80%; 
    padding: 15px;	
	border-radius: 0.25em;
}

textarea.mensajecorreo{
	height: 100px; 
}

input.correo {
	color: #000077;
	font-size: 17px;
	font-weight: normal;
	background: #BBBBBB;
	width: 450px;
	height: 18px;
	border-radius: 0.25em;
}

select[CssClass~="corr"] {
	width: 450px !important;
}

input.pagos_casillas{
	color: #000077;
	font-size:17px;
	font-weight: normal;
	background: #BBBBBB; 
	width: 200px; 
	height: 18px; 
	border-radius: 0.25em;
}

select.pagos_listas{
	color: #000077;
	font-size:17px;
	font-weight: normal;
	background: #BBBBBB; 
	width: 200px; 
	height: 20px; 
	border-radius: 0.25em;
}


input.idcliente{
	color: #000077;
	font-size:18px;
	font-weight:bold;
	background: #BBBBBB; 
	width:150px; 
	height: 18px; 
	border-radius: 0.25em;
}

input.correo2{
	color: #000077;
	font-size:14px;
	background: #BBBBBB; 
	width:400px; 
	height: 18px; 
	border-radius: 0.25em;
}

textarea.descripcion{
	color: #000077;
	font-size:14px;
	background: #BBBBBB; 
	width:400px; 
	height: 72px; 
	border-radius: 0.25em;
}

.entrar, .entrar2, .entrar, .entrar4{
	color:#FFFFFF;
	font-size: 150%;
	font-weight:bold;
	background:#33CC33; 
	width: 70%; 
	padding: 25px;
	border-radius: 0.5em;
	text-shadow: 0.1em 0.1em #333;
}

.entrar3
{
	width:400px; 	
	height: 18px;	
}

.entrar4
{
	font-size:14px;
	font-weight:normal;	
	width:120px; 	
	height: 18px;	
}

input.entrar2{
	width:400px; 	
}

input .entrar:hover, .entrar2:hover{
	color:#000066;
	cursor:hand;
	background:#33FF33; 
	text-shadow: 0.1em 0.1em #FFF;
	
}

p .p-justify
{
	color: #777;
	font-size: 80%;
	text-align:	left;
	padding: 0px;
	margin: 0px;
}


.logo
{
	width: 221px;
	height: 47px;
	background-color: transparent;
	//background: transparent url(logo_af_soluciones_mini.png) no-repeat center center;	
	background: transparent url(../images/logo2.png) no-repeat center center;
	margin-left:  10px;
	margin-top:  15px;
	display:inline-block;
	float: left;
	cursor:hand;
}


.content
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin-top: 30px;
	display: table;
	clear: both;
	display: visible;
}

.content-inner
{
	width: 95%;
	height: 95%;	
	background-color: transparent;
	//display: inline-block;
	//float: center;
}


.completionList 
{
	text-align: left;
	border:solid 1px Gray;
	margin:0px;
	padding:3px;
	height: 150px;
	overflow:auto;
	background-color: #FFFFFF;     
} 
.listItem
{
	color: #191919;
} 
.itemHighlighted 
{
	background-color: #ADD6FF;       
	cursor: hand;
}

.nombre
{
	font-size: 100%;
}

/* Tablet 7 */
@media only screen and (max-width : 650px) and (min-width : 481px)
{

}

/* Tablet 10 */
@media only screen and (max-width : 1050px) and (min-width : 651px)
{
    div.singin{
    	width: 100%;
    }
    
	.nombre
	{
		font-size: 80%;
	}
	.entrar
	{
		font-size: 150%;
		width: 70%; 
		padding: 15px;
		
	}
	.hstyle
	{
		font-size: 150%;
	}
	.txtcuenta
	{
		font-size: 150%;
	}
	input.cuenta
	{
		font-size: 150%;
		padding: 7px;
	}


}


/* smartPhone	*/
@media only screen and (max-width : 480px)
{
    div.singin{
    	width: 90%;
    }
    
	.nombre
	{
		font-size: 60%;
	}
	.entrar
	{
		font-size: 300%;
	}
	.hstyle
	{
		font-size: 200%;
	}
	.txtcuenta
	{
		font-size: 300%;
	}
	input.cuenta
	{
		font-size: 300%;
		padding: 15px;
	}

}


/* PC */
@media only screen  and (min-width : 1051px)
{
	.content-inner
	{
		display: inline-block;
		float: center;
	}

	.entrar
	{
		width: 40%; 
		padding: 15px;
	}
	input.cuenta
	{
		padding: 0px;
	}
}

#encabezado{
	overflow: auto;
}

b{
	position: relative;
	top: 9px;
}
hr{
	display: block;
    width: 100%;
}

.hijo1,.hijo2,.hijo3{
	float:left;
	padding:10px;
}
.hijo1{
	width:35%;
}
.hijo2{
	width:35%;
}
.hijo3{
	width:24%;
}
.form-control{
	display: block;
    width: 100%;
    height: 27px;
    /*padding: 6px 12px;*/
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	
    margin: 7px;
    color: inherit;
}

.capa1,.capa2{
	float:left;
	text-align:right;
}

.capa1{
	width:16%;
}
.capa2{
	width:70%;
}

.divicion1,.divicion2{
	width:50%;
	float:left;
}
.col12{
	width:100%;
	float:left;
	display:block;
}
.sub{
	width:70%;	
	position:relative;
}

.imgBusca{
    float: left;
    position: relative;
    top: 13px;
}
.lf1{
    float: left;
    width: 30%;
}
.lf2{
	width: 100%;
    float: left;
}
.xs{
	width:33%;
}
.rela1{
	margin-top:85px;
}

.rela2{
	margin-top: 149px;
    position: relative;
    width: 100%;
    display: flex;
	margin-top:237px;
}
div.rela2>div.capa1>b{
	position: absolute;
    left: -149px;
}

div.hijo2>div.capa1{
	width:25%;
    height: 16px;
}

div.hijo3>div.capa1{
	width:30%;
}

div.hijo3>div.rela1>div.capa1{
	width:30%;
}


div.hijo3>div.rela2>div.capa1{
	width:30%;
}

#lblRegistros{
    float: left;
    font-weight: bold;
}
#msg2{
    float: left;
    margin-left: 20px;
}
#txtSumaTotal,#txtSumaSaldo{
	float: left;
    background: white;
    border: 1px solid #808080;
    margin-left: 5px;
    font-weight: bold;
    padding: 0 4px 0 20px;
    text-align: right;

}

#dataGridView1{
	color: #333333;
    border-collapse: collapse;
    margin-bottom: 15px;
	width:100%;
}