<style type="text/css">
	/* Estilos de Encabezados de tablas h2 y h3 */
	prt1 {	display: block;		font-size: 35px;	font-weight: bold;	color: #EEE;		text-align:center;		
		margin-top: 0;		margin-bottom: 0;	margin-left: 0;		margin-right: 0; 	background-color: Black;}
	h2 {	font-size: 25px;	margin-top: 0;	margin-bottom: 0;	margin-left: 0;
		margin-right: 0;	font-weight: bold;	color: #000;		text-align:center;}
	h3 {	display: block;		font-size: 35px;	margin-top: 0;	margin-bottom: 0;	margin-left: 0;
		margin-right: 0;	font-weight: bold;	color: #000;		text-align:center;
		border:none;}

	/* Estilos de Reportes y tablas */

 	body {text-align:center;}
	table 				{ margin: auto;  /*width:100%; align:center; */   border-collapse: collapse;
					  font-family: "Helvetica Neue", Helvetica, sans-serif; }
	caption 			{ text-align: left; color: silver; font-weight: bold; text-transform: uppercase; padding: 5px;}

	thead 				{ background: #DF0101;  color: white;}
	th,td 				{ padding: 5px 4px; font-size: 12px;}

	tfoot 				{ background: SeaGreen;  color: white;  }


	/* Ventana de Dialogo */
	.modal-body {
		max-height: calc(100vh - 210px);
		overflow-y: auto;
	}	
	.modalDialog 	    {	position: fixed;	top: 0;			right: 0;	bottom: 0; 	left: 0;
	overflow: auto;
				z-index: 99999;		opacity:0;		font-family: Arial, Helvetica, sans-serif;	
				background: rgba(0,0,0,0.8);			pointer-events: none;		
				-webkit-transition: opacity 0ms ease-in;
				-moz-transition: opacity 0ms ease-in;		transition: opacity 0ms ease-in;	}
	.modalDialog:target {	opacity:1;		pointer-events: auto;}
	.modalDialog > div  {	position: relative;	width: 800px; 		margin: 10% auto; padding: 5px 20px 13px 20px;	
				border-radius: 10px;	background: #fff;	background: -moz-linear-gradient(#fff, #999);	
				background: -webkit-linear-gradient(#fff, #999);
				background: -o-linear-gradient(#fff, #999);}
	/* Ventana de Dialogo */

	.page_break { page-break-after: always; }
	/* Imagenes para Titulos */
	img.titimg01	    {	content:url(../images/back2.png);  }

	td.titimg01	    {  	width:220px; height:65px;	background:url(../images/logo.png); background-color:#FFFFFF	;
				border-radius: 25px; border-color:transparent;  	background-repeat:no-repeat; background-position:center;  }
	td.titimg02	    {  	width:40px; height:65px;	background:url(../images/logo.png); 	
				border-color:transparent;  	background-repeat:no-repeat; background-position:center; }
	table.tit01	    {   width:100%; background-color:none; }
	/* Imagenes para Reportes */
	td.repimg01	    {  	width:80px; height:65px;	background:url(../images/logo.png); 
				border-color:transparent;  	background-repeat:no-repeat; background-position:center; }
	td.repimg02	    {  	width:80px; height:65px;	background:url(../images/logo.png); 
				border-color:transparent;  	background-repeat:no-repeat; background-position:center; }
	/* Formatos para titulos de reprotes*/
	td.reptit01	    {  	font-size: 24;		font-weight: bold;	position: center; 	vertical-align: center;}
	/* Formatos para campos */
	img.img01	    {  	width:30px; height:30px; border:0; }
	img.img02	    {  	width:20px; height:20px; border:0; }
	td.div01	    {  	width:100%; background-color:#DF0101; }
	td.cros01	    {  	background-color:DodgerBlue; color:white;  text-align:center; vertical-align:center; font-weight: bold;
				border: 1px solid #A4A4A4; }
	td.cros02	    {  	background-color:DodgerBlue; color:white;  text-align:left; vertical-align:center; font-weight: bold; 
				border: 1px solid #A4A4A4;}
	td.cros03 {  	text-align:right; vertical-align:center; border: 1px solid #A4A4A4;}
	td.cros03l {  	text-align:left; vertical-align:center; border: 1px solid #A4A4A4;}
	td.tfoot01	    { background-color: SeaGreen;  color: white;  text-align:right; vertical-align:center; border: 1px solid #A4A4A4;}

	input.img02	    {  	width:15px; height:15px;  border:0; background-color: transparent; }
	input.url02	    {  	text-align:left; background:none; border-width:0px; color:blue; text-decoration:underline; }

	input.mob01	    { text-align:left; background:none; border:none; color:white; font-weight: bold; padding:0; display: inline-block; 
				 font-size: 50px; padding:50;  border-radius: 55px; cursor:pointer; box-shadow: 10px 20px #999  }
	input.mob01:hover   {  	 background:red;   }
	input.mob01:active  {  	 background:red; box-shadow: 3px 5px #999; transform: translate(7px, 15px);  }
	tr.mob01:nth-child(odd) { background: orangered; color:white;  text-align:left; vertical-align:center; font-weight: bold; 
				  display: inline-block; border-radius: 55px; padding:0;}
	tr.mob01:nth-child(even) { background: royalblue; color:white;  text-align:left; vertical-align:center; font-weight: bold; 
				   display: inline-block; border-radius: 55px; padding:0; border:none;}
	/* Imagen de Marca de Agua */
	div.bgimage   	    {  	width:100%;  		height:100%;		border:none;  	border-color:transparent;  
				background:url(.../images/logo.png);  	background-repeat:no-repeat;
				background-position:center;    }
	div.transparentbox  { 	width:100%;  		height:100%;  		margin:0px 0px; background-color:#ffffff;
				border-color:transparent; border:none;  opacity:0.95;  filter:alpha(opacity=95);  }
	div.transparentbox p {  margin:30px 40px;	  font-weight:bold;	color:#CD853F;  }
	/* */
	button.buttonstyle { 	background: none; border: none; padding:0; color: inherit; font: inherit; border-bottom:1px solid #444
				cursor:pointer; text-align:center; vertical-align:center; }
	button.buttonstyle:hover {  background-color:OrangeRed; width:100%; color: blue; cursor: pointer; text-decoration: underline; }

	#borderimg1 { 
    border: 20px solid transparent;
    padding: 10px;
    -webkit-border-image: url(../images/borde003.png) 14 round; /* Safari 3.1-5 */
    -o-border-image: url(../images/borde003.png) 14 round; /* Opera 11-12.1 */
    border-image: url(../images/borde003.png) 8 round;}
	
	#customers {
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		border-collapse: collapse;
		width: 50%;

	}

	#customers td, #customers th {
		border: 1px solid #ddd;
		padding: 5px;
	}

	#customers tr:nth-child(even){background-color: #f2f2f2;}

	#customers tr:hover {background-color: #ddd;}

	#customers th {
		padding-top: 5px;
		padding-bottom: 5px;
		text-align: left;
		background-color: #4CAF50;
		color: white;
	}

	.vales, .vales TD, .vales TH
	{
	font-family:sans-serif;
	font-size:6pt;
	}

/* Sorteable Tables */
.sr-only {
  position: absolute;
  top: -30em;
}

table.sortable td,
table.sortable th {
  padding: 0.125em 0.25em;
  width: 8em;
}

table.sortable th {
  font-weight: bold;
  border-bottom: thin solid #888;
  position: relative;
}

table.sortable th.no-sort {
  padding-top: 0.35em;
}

table.sortable th:nth-child(5) {
  width: 10em;
}

table.sortable th button {
  position: absolute;
  padding: 4px;
  margin: 1px;
  font-size: 100%;
  font-weight: bold;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  outline: none;
  cursor: pointer;
}

table.sortable th button span {
  position: absolute;
  right: 4px;
}

table.sortable th[aria-sort="descending"] span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.sortable th[aria-sort="ascending"] span::after {
  content: "▲";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.show-unsorted-icon th:not([aria-sort]) button span::after {
  content: "♢";
  color: currentcolor;
  font-size: 100%;
  position: relative;
  top: -3px;
  left: -4px;
}

table.sortable td.num {
  text-align: right;
}

table.sortable tbody tr:nth-child(odd) {
  background-color: #ddd;
}

/* Focus and hover styling */

table.sortable th button:focus,
table.sortable th button:hover {
  padding: 2px;
  border: 2px solid currentcolor;
  background-color: #e5f4ff;
}

table.sortable th button:focus span,
table.sortable th button:hover span {
  right: 2px;
}

table.sortable th:not([aria-sort]) button:focus span::after,
table.sortable th:not([aria-sort]) button:hover span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}
</style>
