* { box-sizing:border-box; margin:0; padding:0;font-family:sans-serif; }

html, body{height: 100%; /*89.6%;*/ background-color:#f8f8f8; margin: 0;padding: 0;}

h1, h2, h3, h4 {color:#3262a4;}

label {	padding:2px;
	margin-top:2px;
	margin-right:5px;
	float:left;
    color:#000;
}

input, select {
	font-size:1em;
	padding:3px 5px;
	border:1px solid #777;
    color:#111;
	background-color:#f7f7f7; 
    height:25px; line-height:25px;
	float:left;
}

input[type=checkbox] { background-color: #fff; color:red;}

textarea { 	background-color:#f7f7f7; font-size:1em; padding:3px 5px; border:1px solid #777;     color:#111;}

.barraMenu {
    height: 40px;
	background: #3262a4;
	color: #fff;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#btn-menu {	display: none;}

.icon-menu {
	/*font-size: 20px;*/
	cursor: pointer;
	display: none;
	border: 1px solid #333;
	padding: 5px 5px;
	margin-right: 5px;
	background-color: red;
	width: 40px;
    float: right;
}


.menu ul {
	background: #3262a4;
	display: flex;
	list-style: none;
}

.menu ul ul {
	display: none;
}

.menu a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	text-decoration:none;
}

.menu a:hover {
	background: rgba(0,0,0,0.3);
}

.menu a:hover span {
    color:red;
}

.menu a span {
	margin-left: 10px;
}

.menu ul li:hover ul {
	display:block;
	position: absolute;
}

/*.menu a.active:hover {background: blue;}*/


.menuBoton {display:none; cursor:pointer; background:#e7ba26; padding:3px 6px; border: 1px solid #000; float:right;margin-top: 5px;margin-right: 7px; }
.bar1, .bar2, .bar3 {width:35px; height:3px; background-color:#222; margin: 6px 0; transition: 0.4s;}
.change .bar1 {transform: rotate(-45deg) translate(-7px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 {transform: rotate(45deg) translate(-7px, -6px);}


/* ---Fin Menu --*/

.barraTop {position:fixed; width:100%; z-index:1; top:0; background-color:#333;}

.fila {padding:5px 16px; overflow: auto;}
.fila_g {padding:10px 5px; overflow: auto;}

.logo {float:left; margin:0px 0 0px 0; 
  background: url(../imagenes/hakol.png) no-repeat;
  background-size: 165px 60px;
  width: 165px;  height: 60px;
  cursor:pointer;
}

.logo_g { margin:0px auto; 
  background: url(../imagenes/hakol_g.png) no-repeat;
  background-size: 433px 157px;
  width: 433px;  height: 157px;
  cursor:pointer;
}


.infoUsuario, .infoUsuario2 {display:inline-block; padding: 8px 10px; float:right; margin-top: 3px;}
.infoUsuario2 {display: none; background-color:#fff; width: 100%; margin-bottom: 10px; margin-top: 0px;}
.avatar {float: left; width:40px; border-radius:50%; border: 1px solid #333;}
.usuario, .usuarioB {float: left; color:#f3f3f3; padding:11px 12px; }
.usuarioB {color:#333;}


/* Boton */

.boton1 {
	display:inline-block;
	background-color:#e7ba26; /*#d2a50e;*/ 
	color:#000; 
	border:none; 
	border-radius: 0px;
	outline:none;
	float:left;
	padding:7px 12px 7px 12px;
	text-align:left;
	margin-right:10px;
	margin-bottom:0px;
	box-shadow: 0 2px #999;
	transition: background 0.2s linear;
	cursor: pointer;
}
.boton1:hover {background-color:#b2901f; }
.boton1:active {box-shadow: 0 0px #666; transform: translateY(2px); }
.boton1 a i {font-size:1em; }
.boton1 a {color:#fff; text-decoration:none; }
.boton1:hover a:hover { color:#000; }
.boton1 img{float:left; margin:0px 5px 0px 0px; }
.boton1 p {float:left; margin:0; padding:0; }
.boton1 div{float:left; margin:0px 5px 0px 0px; width:16px; height:16px; }
.botonAct {background-color:#66af22;}
.botonAct:hover {background-color:#64310d;}
.boton1G{ text-transform:uppercase; letter-spacing:2px; padding:15px 25px 15px 25px;}



.boton2 {color:#cc9900; text-decoration: underline; cursor: pointer; }
.boton2:visited {color:#cc9900;}
.boton2:hover {color:#996600; }
.boton2:active {color:#663300; }


/* Paneles */

.principal { height: auto; min-height: 100%;}
.container, .container2 { padding-top: 120px; padding-right:10px; padding-left: 10px; margin-right: auto;margin-top:0px;  height: auto; }
.panel, .panelF {display:block;margin-bottom: 15px; margin-top:0px; background-color:#dedede; overflow:auto; border:1px solid #c1c1c1; padding:0px; padding:8px 10px;
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

.container2 { padding-top: 200px; }


.panelF {padding:0px; }
.panelI {padding:8px 10px;overflow: auto;}
.tituloPanel{ color:#222; background-color: #e7ba26; padding: 5px 10px; margin-bottom: 10px; }

.subTitulo {background-color:#ccc; color:#66af22; font-weight:bold; padding:8px 5px; width:100%; overflow:hidden; margin-top:30px; margin-bottom:10px;}
.campoFicha{width:100%; overflow:hidden; margin-bottom:10px;}
.labelAncho {width:230px; text-align:left;}
.labelAncho2 {width:350px;}
.margenAbajo{margin-bottom: 10px;}

.campoFicha3{width:100%; overflow:hidden; margin-bottom:10px;}
.labelAncho3 {width:200px; text-align:left; padding-left: 30px;}

.divleft { float:left; margin-right:20px; margin-bottom:5px;}

.divbotones {float:right; }

.pie { height:30px; clear:both; overflow: auto;}
.piepagina{ text-align:center; padding:8px; background:#333; height:30px; margin-top:-30px; float:left; width:100%; }
.piepagina p { color: #f5f5f5; font-weight:500; font-size:12px; /*letter-spacing: 1px;*/ }

.txtResaltado{color:red; font-weight:bold;}

/* Tablas */
.tdatos { border-collapse:collapse; width:100%; border:1px solid #ccc; background-color:#f7f7f7; color:333;}
.tdatos th { text-align:left; padding:4px; border:1px solid #ccc; background-color:#d9af24; color:#333; font-weight:bold; }
.tdatos td { text-align:left; padding:4px; border:1px solid #ccc; }
.tdatos tr:nth-child(even){ background-color: #eee6c0; /*eee6c0;*/}
.tdatos tr:hover {background-color:#3262a4; color:white;}

.tficha{ border-collapse: collapse; width: 100%;}
.tficha td {padding-top: 5px; padding-bottom: 5px;} 


.campo10 { width:120px;}
.campo30 { width:290px;}
.campo30b { width:290px;}
.campo40 { width:275px;}
.campo50 { width:450px;}

.avisos {display:none; background-color:#efbebe; padding: 5px 5px; color:#ff0000; font-weight:bold; margin: 10px 0px; }


/* Capas */
.espera{
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	/*background:transparent url(../imagenes/circular.gif) center no-repeat;*/
	background: url(../imagenes/esperar5.gif) center no-repeat;
	background-size: 150px 150px;
	background-color:rgba(255, 255, 255, 0.4);
	
	z-index:1010;
}

.capaoscura{
	display: none;
	position: fixed; 
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color:rgba(255, 255, 255, 0.4);
	z-index:1001;
}


.ventanEmergente {
	display:none; position:fixed; left:50%; top:50%; padding:0px; border:1px solid #333;  z-index:1005; /*box-shadow: 0px 8px 16px #999;*/ width:450px; 
	margin-left:-225px; text-align:center; background-color:#dedede; border:1px solid #c1c1c1; 
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}


.panel3 {
	display:block; padding:0px; border:1px solid #333; margin: 0 auto;  margin-bottom: 10px;
	text-align:center; background-color:#dedede; border:1px solid #c1c1c1; 
	width:600px; text-align:left; overflow: auto;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.panel3interno{padding: 10px; margin:0 auto; overflow:auto; background-color:#dedede; text-align: center;}


.tituloEmergente{background: #3262a4; color:#fff; width:100%; text-align:left; }
.tituloEmergente h3, .tituloEmergente h2 {color:#fff; padding:10px; }

.ventanEmergenteAncha {width:600px; margin-left:-300px;text-align:left; height:auto; margin-top:-300px;}
.ventanEmergenteAncha2 {overflow:auto; max-height:550px; }

.ventanEmergenteInterno {background-color:#dedede; display:block; margin:0 auto; padding:10px;}
.ventanEmergente p, .ventanEmergenteInterno p, .panel3 p {padding: 2px 5px; color:red; font-weight:bold; display:block; background-color:#efbebe; margin: 5px 0px; display:none;}

.botonEmergente {
	background:  url(../imagenes/cerrar2.png) center no-repeat;
	height:16px; width:16px; position:absolute; opacity:0.9; filter: alpha(opacity=90); transition: all 0.1s linear; top:16px; right:10px;
}
.botonEmergente:hover {opacity:1.0; filter: alpha(opacity=100);}


.estatus0, .estatus1, .estatus2, .estatus3, .estatus4 {background:#3232d7; color:white; padding:2px 6px 1px 6px; margin:0;border-radius:10px; }
.estatus1{background:#3232d7;} /*Azul*/
.estatus2{background:#d73232;} /*Rojo*/
.estatus3{background:#45d732;} /*Verde*/
.estatus4{background:orange;} /*Anulado*/

/* Animacion Emergente */
.animate {
    -webkit-animation: animatezoom 0.5s;
    animation: animatezoom 0.5s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}


@media (max-width: 768px) {
	/*header label {*/
	/*.icon-menu { display:block;	}*/
    
    .barraMenu {height: 5px; }
        
	.menu {
		position: absolute;
		top:65px;
		left:0;
		width: 100%;
		transform: translateX(-100%);
        /*display:none;*/
		transition: all 0.3s;
	}

	.menu ul {
		/*flex-direction: column;*/
		display: block;
		background: #555;
	}

	.menu ul li:hover ul {
		display: none;
		position: static;
	}

	.menu a span {
		position: absolute;
		right: 5px;
	}

        
	#btn-menu:checked ~ .menu {
		transform: translateX(0%);
	}

	.menu ul ul {
		background: rgba(0,0,0,0.4);
	}

	.menu ul ul a {
		padding: 15px 40px;
	}
    
    .logo {
        background-size: 137px 50px;
        width: 137px;  height: 50px;

    }


	.fila_g {padding:10px 5px;}
	.logo_g { background-size: 165px 60px; width: 165px;  height: 60px;}

    .menuBoton {display:inline-block;}
    
	.infoUsuario {display: none;}
	.infoUsuario2 {display:block;}    
    
	.container, .container2 { padding-top: 75px; padding-right: 10px; padding-left: 10px; margin-right: auto;margin-top: 0px; }
	.container2 { padding-top: 100px; }
	.divleft {width:100%; margin-bottom:5px;  }

	.labelAncho {width:300px;}
	.labelAncho2 {width:auto;}
	.labelAncho3 {width:100%; padding-left: 0px;}

	.campo10 { width:150px;}
	.campo30 { width:280px;}
	.campo30b { width:220px;} 
	.campo40 { width:280px;}
	.campo50 { width:280px;}


	.ventanEmergente {width:320px; margin-left: -160px; }
	.ventanEmergenteAncha {width:320px; margin-left:-160px; /*height:500px;*/ margin-top:-250px;}
	.ventanEmergenteAncha2 {max-height:450px;}

	.panel3 {width:320px;}
}