* { box-sizing:border-box; margin:0;padding:0;text-decoration:none; }

html, body{
	height: 100%;
	font-size: 14px;
	background: white;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

table {font-size:1em;}

.principal { height: auto; min-height: 100%;}

u {text-decoration:underline; }

h1 {color:#457998; }
h2 {color:#457998; }
h3 {color:#457998; }
h4 {color:#000; }

.lp {font-size:12px; color:#777;}

.titulo1 {margin-bottom:5px;}

.headerG {width:100%;/* height:235px;*/ background:#000; text-align:center;}

.logo1, .logo1g  {
	background: url(../imagenes/wsport.png) no-repeat;
	background-size: 55px 55px;
	width: 55px;
	height: 55px;
	float:left;
	margin:1px 0px 1px 5px;
}
.logo1g {background-size: 200px 200px; width:200px; height:200px; }

.logo2, .logo2g { float:left; padding:12px 12px 0px 20px; color:#fff; font-size: 20px; font-weight:bold; }
.logo2g { padding:75px 0px 0px 50px; font-size:45px;  }


.divgrupo {
	width:100%;
	display:block;
	overflow:auto;
	margin-bottom:15px;
	padding-left:4px;
	padding-right:4px;
	/*border:1px solid #eaeaea;*/
}

.divlinea {
	width:100%;
	display:inline-block;
}


.divleft, .divbotones { float:left; margin-top:2px; margin-right:10px; margin-bottom:2px; }

.datoscliente {display:block; float:right; margin-top:5px; }
.titulo { color:#b1b1b1;}
.dato {color:#457998; background-color:white; padding:3px 6px; font-weight:bold;  border:1px solid #457998;}

.mr {margin-right:20px;}

.divcentrado, .divcentrado2 {
	float:none;
	clear:both;
	margin: 5px auto;
	display:block;
	overflow:hidden;
}

.divcentrado3 {margin:0 auto; display:inline-block;}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container {width: 100%;}

.panel, .panel3, .panel4 {
	display:block;
	margin-top:10px;
	background-color:#f1f1f1;
	overflow:auto;
	border:1px solid #eaeaea;
	padding:8px 10px 8px 10px;
}
.panel3 { width:auto; margin-right:10px; float:left; }
.panel4 { width:800px; margin:10px auto;}


/* --- Ventana emergente / Titulo y Boton Cerrar ---*/

.tituloEmergente{background-color:#457998; color:#fff; width:100%; text-align:left; }
.tituloEmergente h3, .tituloEmergente h2 {color:#fff; padding:10px; }
.ventanEmergente {
	display:none; position:fixed; left:50%; top:50%; padding:0px; border:1px solid #333; background-color:#f2f2f2; z-index:1005; box-shadow: 0px 8px 16px #999;	width:450px; 
	margin-left:-225px; text-align:center;
}

.ventanEmergenteAncha {width:600px; margin-left:-300px;text-align:left; height:auto; margin-top:-300px;}
.ventanEmergenteAncha2 {overflow:auto; max-height:550px; }
.ventanEmergenteAncha60 {width:60%; margin-left:-30%; margin-top:-300px;}
.ventanEmergenteAncha90 {width:90%; margin-left:-30%; margin-top:-300px;}

.ventanEmergenteDelgada {width:400px; margin-left:-200px;text-align:left; height:auto; margin-top:-300px;}

.ventanEmergenteInterno {background-color:#f2f2f2; display:block; margin:0 auto; padding:10px; /*overflow:auto;*/}
.ventanEmergente p, .ventanEmergenteInterno p {padding:10px; color:red; font-weight:bold; display:block;}
.ventanEmergenteInterno2 {overflow:auto; max-height:550px; }
.campo30 { width:250px;}
.campo40 { width:275px;}
.campo50 { width:300px;}




.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:12px; right:10px;
}
.botonEmergente:hover {opacity:1.0; filter: alpha(opacity=100);}

.campoFicha3{width:100%; overflow:hidden; margin-bottom:10px;}
.labelAncho3 {width:200px; text-align:left; padding-left:30px;}
.venEmerBot1 {display:inline-block; text-align:center; width:100%;}
.venEmerBot2 {margin:0 auto; display:inline-block; padding-top: 10px;}
.aviso {width:100%; height: 22px; overflow:auto; padding: 2px 5px; color:red; font-weight:bold; text-align:center; }
.avisoR {color:red; background-color:#efbebe;}

.capaoscura{
	display: none;
	position: fixed; /*absolute;*/
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: gray;
	z-index:1001;
	-moz-opacity: 0.5;
	opacity:.50;
	filter: alpha(opacity=50);
}

.espera{
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background: url(../imagenes/esperar3.gif) center no-repeat;
	background-color:#fff;
	z-index:1010;
	-moz-opacity: 0.4;
	opacity:.40;
	filter: alpha(opacity=40);
}



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


.txtResaltado{color:#ff9900; font-weight:bold;}


/*-- Botones --*/

.boton1 {
	display:inline-block;
	background-color:#457998; /*#335a71; /*#0172e8; #457998;*/
	color:#fff; 
	border:none; 
	/*border-radius: 4px;*/
	outline:none;
	float:left;
	padding:7px 12px 7px 12px;
	text-align:left;
	margin-right:10px;
	margin-bottom:0px;
	transition: background 0.2s linear;
}
.boton1:hover {background-color:#B45F04;/*355d75; /*457998;*/ }
.boton1:active {background-color:#284658; }
.boton1 a i {font-size:1em; }
.boton1 a {color:#fff; text-decoration:none; }
.boton1 i {margin-right: 6px;}
.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:#B45F04;}
.botonAct:hover {background-color:#457998;}
.boton2{ text-transform:uppercase; letter-spacing:2px; padding:15px 25px 15px 25px; margin-bottom:10px;}

.boton1 .numero {background-color:#333333; color:white; padding:1px 6px; border-radius:20px; font-weight:bold; margin-left:5px;}



/*---*/
.dropdown {float:left;}
.dropdown-content {  display:none; position:absolute; background-color:#f9f9f9; min-width:160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1; }
.dropdown-content a { color:black; padding:11px 16px; text-decoration:none; display:block; height:38px; }
.dropdown-content a img { float:left; }
.dropdown-content a div { float:left; padding:3px 5px; }

.dropdown-content a:hover {background-color:#dcdcdc;}
.dropdown:hover .dropdown-content { display:block; }
.dropdown:hover .boton1 { background-color:#024e36; }


/*-----------------------------
         TABLE
-----------------------------*/
.tdatos { border-collapse:collapse; width:100%; border:1px solid #ddd; background-color:#f6f6f6; }
.tdatos th, .tdatos td { text-align:left; padding:4px; border:1px solid #ddd; }

.tdatos tr:nth-child(even){ background-color: white}
.tdatos th { background-color:#457998; /*335a71;*/ color:white; font-weight:bold; }
.tdatos tr:hover {background-color:#6fc5d3;}


/* igual que tdatos pero sin hover y sin width */
.tdatos2 { border-collapse:collapse; border:1px solid #ddd; background-color:#f6f6f6; }
.tdatos2 th, .tdatos2 td { text-align:left; padding:4px; border:1px solid #ddd; }

.tdatos2 tr:nth-child(even){ background-color: white}
.tdatos2 th { background-color:#457998; /*335a71;*/ color:white; font-weight:bold; }

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

.tficha2 {border-collapse: collapse;  }
.tficha2 td {padding:2px; } 
/*-----------------------------------------*/
.subTitulo {background-color:#DDD; color:#457998; font-weight:bold; padding:5px; width:100%; overflow:hidden; margin-top:20px; margin-bottom:10px;}
.campoFicha{width:100%; overflow:hidden; margin-bottom:10px;}
.labelAncho {width:120px; text-align:left;}

/*-----------------------------------------*/
.tableDiv {display:table;}  
.rowDiv {display: table-row;  }  
.cellDiv, .cellDivT, .cellDivC, .cellDivT2, .cellDiv2 {display: table-cell; text-align:center; border:1px solid #ddd; padding:2px 5px 2px 5px;}  
.cellDivT {color:#007852; background-color:#CECECE; /*E8E8E8;*/  font-weight:bold;}
.cellDivC { background-color:#CECECE;/*FFECEC;*/}

.cellDivT2 {color:white; background-color:#007852; font-weight:bold;}
.cellDiv2 { background-color:white;}

/*-----------------------------------------*/

.tdatos_e { border-collapse:collapse; width:100%; border:1px solid #ddd; background-color:#f6f6f6; }
.tdatos_e th, .tdatos_e td { text-align:left; padding:4px; border:1px solid #ddd; }
.tdatos_e tr:nth-child(even){ background-color: white}
.tdatos_e th { background-color:#457998; /*335a71;*/ color:white; font-weight:bold; }

/*-----------------------------------------*/

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

/*---Input ---*/
label {
 	padding:2px;
	margin-top:1px;
	margin-right:5px;
	float:left;
}

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

textarea { font-size:1em; padding:3px; border:1px solid #ddd; background-color:#fafafa; float:left; }

input[type=checkbox] { margin-top:0px; margin-right:5px;}
input[type=radio] { margin-top:0px; margin-right:5px;}
	 
/*---- Grafico ---*/

.progress-bar {
  float: left;
  height: 30px;
  width: 100%;
 padding: 5px 0;
}

.progress-track {
  position: relative;
  width: 100%;
  height: 20px;
  background: #e1c8d4; /*#ebebeb;*/
}

.progress-fill {
  position: relative;
  background: #825; /*#666;*/
  height: 20px;
  width: 50%;
  color: #fff;
  text-align: center;
  font-family: "Lato","Verdana",sans-serif;
  font-size: 12px;
  line-height: 20px;
}


.estatus1, .estatus2, .estatus3, .estatus4 {background:#3232d7; color:white; padding:2px 4px 1px 4px; margin:0;border-radius:10px;}
.estatus1{background:#3232d7;} /*Esperando*/
.estatus2{background:#d73232;} /*Perdio*/
.estatus3{background:#45d732;} /*Gano*/
.estatus4{background:orange;} /*Anulado*/
	
	
/*---- Botones Presionados ---*/
.botonP {
	display:inline-block;
	color:#457998; 
	border: 2px solid #457998;
	border-radius: 0px;
	outline:none;
	float:left;
	padding:6px 12px 6px 12px;
	text-align:left;
	margin:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-top: 0px;
	transition: background 0.2s linear;
	cursor: pointer;
}
.botonP:hover { color:#fff; background-color:#ff9900; /*#457998;*/ border: 2px solid #ff9900;}

.switch {display: inline-block; margin:0px; padding: 0px;}
.switch input {display:none;}

input:checked + .botonP { color:#fff; background-color:#457998; border: 2px solid #457998;}
	
	



/* --- Version Sep 2023 ---*/

.principal_e { height: 100%; }
.container_e { height: calc(100% - 58px); margin: 0; display: flex; flex-direction: column; align-items: stretch;
padding-top: 8px; padding-right:10px; padding-left: 10px; margin-right: auto; margin-top:0px;  }

.panel_e1 { padding: 0px 10px 10px 10px;  overflow: visible;  } 
.panel_e2 { overflow: auto; height:100%; border:1px solid #ddd; }
.panel_e3 { padding: 5px 0px 2px 0px;}

.tdatos3 thead th { position: -webkit-sticky; position: sticky; top: 0px; z-index:99;}
.letra_peq { font-size: 10px;}
.divflex { display: flex; align-items: stretch; flex-direction: row; float:left; margin-right:20px;}
.divbotones { float:right; }

.mb10 {margin-bottom:10px;}
.mb5 {margin-bottom:5px;}

.resaltado1 {color:#fff; background-color:#ff9900; padding:1px 8px 1px 8px; border-radius:5px; white-space: nowrap;} /*Rojo*/
.resaltado2 {color:#fff; background-color:#4682B4; padding:1px 8px 1px 8px; border-radius:5px; white-space: nowrap;} /*Azul*/

.mostrar {display:block;}



/* Ventana Emergente 2.0 Sep-2023*/
.ve {
    display: none;
    position: fixed; /*absolute;*/
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: gray;
    z-index:1001;
    background-color:rgba(128, 128, 128, 0.50);
    xxjustify-content: center; 
    align-items: center;
    flex-direction: column;
    
}

.ve_ventana {
    border:1px solid #333; box-shadow: 0px 8px 16px #999;
    xwidth: 50%;
    max-height: 80%; 
    height: auto;
    display: flex; flex-direction: column; align-items: stretch;
    margin-top: 70px;
    border-radius: 6px;
    overflow:hidden;
}

.ve_ancho_450 { width: 450px; }
.ve_ancho_600 { width: 600px; }
.ve_ancho_60 { width: 60%; }
.ve_ancho_90 { width: 90%; }

.ve_ventana .ve_titulo { display:flex; flex-direction: row;  background-color:#457998; color:#fff; padding:10px; width:100%; justify-content: space-between; align-items: baseline; }
.ve_ventana .ve_titulo h2 { color:#fff; }
.ve_ventana .ve_titulo .ve_boton { height:16px; width:16px; 
    background:  url(../imagenes/cerrar2.png) center no-repeat;
    opacity:0.9; filter: alpha(opacity=90); transition: all 0.1s linear; 
}
.ve_ventana .ve_titulo .ve_boton:hover {opacity:1.0; filter: alpha(opacity=100);}

.ve_ventana .ve_contenido { padding:10px; overflow:auto; width:100%; height:100%; color:#333; background-color:#f2f2f2; }
.ve_ventana .ve_botones { display:flex; flex-wrap:wrap; justify-content:center; width:100%; padding: 10px 0px 10px 0px; background-color:#f2f2f2; }

.botonera2 {display:flex; flex-wrap:wrap; justify-content:center; width:100%;}
.aviso2 {width:100%; border-radius: 5px; xmin-height:23px; overflow:auto; padding: 3px 5px; color:red;  font-weight:bold; text-align:center; xmargin-bottom:10px ; }
.avisoR2 {color:red; background-color:#efbebe; }


.form-grupo2 {display:flex; justify-content: flex-start;/*space-between;*/ align-items: flex-start; flex-direction: row; flex-wrap: nowrap; padding:0px 30px; width:100%; }
.form-grupo2 .label-grupo2 {flex: 0 0 180px; }

.mb20 {margin-bottom:20px;}
.mb10 {margin-bottom:10px;}
.m10 {margin: 0;}
.mb5 {margin-bottom:5px;}
.mbe {margin-bottom: 0px;}

.campo40b { width:320px;}



/* 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) {
	.container_e { padding: 8px 3px 80px 3px; margin-top: 0px; height: auto; }
  .panel_e2 { height:autxo; }
	.divflex {float:none;}


    .ve_ventana {
        box-shadow: none;
        width: 100%;
        max-height: 100%; 
        height: 100%;
        margin-top: 0px;
        border-radius: 0px;
    }
    .ve_ventana .ve_botones { padding: 10px 0px 60px 0px; }
    .ve_ancho_450, .ve_ancho_600, .ve_ancho_60, .ve_ancho_90 { width:100%; }

	.form-grupo2 { flex-direction: column; padding:0px 0px;}
	.form-grupo2 .label-grupo2 {flex:0 1 auto;}

	.campo40b { width:100%;}
}













	
@media screen and (max-height:768px) {
	.logo1g {background-size:130px 130px; width:130px; height:130px; }
	.logo2g { padding:50px 0px 0px 25px; font-size:30px;  }


}


@media screen and (max-width:1024px) {
	/*panel3 { max-width:100%;}*/
}


@media screen and (max-width:800px) {
	.container {padding-right: 8px; padding-left: 8px; }
	
	.piepagina {height:30px; margin-top: -30px; padding-top:9px;}
	.piepagina p {font-size:0.90em;}
	
	h1 {font-size:1.2em; }
	
	h2 {font-size:18px; }
	

	.boton0 {padding:5px 25px 7px 25px; }
	
	.ventanEmergente {width:320px; margin-left: -160px; }
	.ventanEmergenteAncha {width:320px; margin-left:-160px; height:500px; margin-top:-250px;}
	.ventanEmergenteAncha2 {max-height:450px;}
	.ventanEmergenteAncha60 {width:320px; margin-left:-160px; height:500px; margin-top:-250px;}
	.ventanEmergenteAncha90 {width:320px; margin-left:-160px; height:500px; margin-top:-250px;}
	.ventanEmergenteDelgada {width:320px; margin-left:-160px; height:auto; margin-top:-250px;}

	.ventanEmergenteInterno2 {max-height:500px;}

	.campo30 { width:180px;}
	.campo40 { width:180px;}
	.campo50 { width:180px;}
	.labelAncho3 {width:100%; padding-left: 0px;}

	.divbotones {margin-top:6px; float:right; margin-right:0px; }
	
	.boton1 {margin-bottom:5px; }
	
	.panel { padding:5px 5px 5px 5px;}
	.panel3 { width:100%;}
	.panel4 { width:100%;}
	
	.logo1g {background-size:100px 100px; width:100px; height:100px; }
	.logo2g { padding:36px 0px 0px 25px; font-size:26px;  }


	.labelAncho {width:auto;}
	.datoscliente {width:100%; padding-left:10px;}


.container_e { padding: 8px 3px 80px 3px; margin-top: 0px; height: auto; }
  .panel_e2 { height:autxo; }
	.divflex {float:none;}


}

@media screen and (max-height:600px) {
	.logo1g {background-size:80px 80px; width:80px; height:80px; }
	.logo2g { padding:28px 0px 0px 20px; font-size:24px;  }
	.divcentrado3 {width:100%; text-align:center;}
	
}

@media screen and (max-width:500px) {
  	.logo1 {background-size: 55px 55px; width: 55px; height: 55px; }
	.logo2 { padding:12px 12px 0px 10px; font-size: 18px; }
	.divleft {width:100%; }
	.piepagina p { font-size:10px;}
}