body {
	font-family: Tahoma, Verdana, Arial !important;
	font-size: 11px !important;
	background-repeat: repeat-x;
	background-color: #E5E5FF !important;

}

.img{
	background-color: #E5E5FF;;
	height: 24px;
    width:  24px;

}

div#menu_negro{
	position:fixed;
	margin-top:0px;
	width:32;
	height:32;
	background-color:#E0E0F8;
	over-flow:hidden;
	padding:0px;
	overflow:hidden;
}
div#menu_negro:hover{
	width:450px;
	height:100%;
	-webkit-transition: width 0.5s;
	-moz-transition: width 0.5s;
	overflow-y: scroll;
}

fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}


.style1 {color: #FF0000}

body, td, th {
	font-family: Tahoma, Arial, Helvetica, sans-serif !important;
	font-size: 11px !important;
}
.title_page {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 24px;
}


.sajid {
        top: 0;
        left: 0;
        height: 300;
        width: 638;
        overflow: auto;
        overflow-y: scroll;
        overflow-x:no;  
		 position: relative;              
    
}
.sajid2 {
        top: 0;
        left: 0;
        height: 300;
        width: 350;
        overflow: auto;
        overflow-y: scroll;
        overflow-x:no;  
		 position: relative;              
    
}
.pagos{
        top: 0;
        left: 0;
        height: 300;
        width: 600;
        overflow: auto;
        overflow-y: scroll;
        overflow-x:no;  
		 position: relative;              
    
}
.tabActiver {
        PADDING-LEFT: 7px;
        BORDER-RIGHT:   1px solid  #5C83E9;
        FONT-FAMILY: arial, Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
        
}.tabActive {
        PADDING-LEFT: 7px;
        BORDER-LEFT:   1px solid  #5C83E9;
        FONT-FAMILY: arial, Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
        
}.tabActivered {
        PADDING-LEFT: 7px;
        BORDER-LEFT:   1px solid  #5C83E9;
        FONT-FAMILY: arial, Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
        color: red;
        
}

.tabActivee {
	BORDER-RIGHT: #5C83E9 1px solid ;
	PADDING-RIGHT: 7px;
	PADDING-LEFT: 7px;
	BORDER-LEFT: 1px solid #5C83E9;
	FONT-FAMILY: arial, Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
}
.arriba {
        BORDER-LEFT: #B4C2FE  1px solid;
        PADDING-LEFT: 7px;
        PADDING-BOTTOM: 7px;
        BORDER-BOTTOM: #B4C2FE  1px solid;
		PADDING-TOP: 7px;
        BORDER-TOP: #B4C2FE  1px solid;
		  BORDER-RIGHT: #B4C2FE  1px solid;
        PADDING-RIGHT: 7px;
}

.abajo {
		BORDER-LEFT: #B4C2FE  1px solid;
        PADDING-LEFT: 7px;

        PADDING-BOTTOM: 7px;
        BORDER-BOTTOM: #B4C2FE  1px solid;

        BORDER-RIGHT: #B4C2FE  1px solid;
        PADDING-RIGHT: 7px;
}
.bootom {
        PADDING-BOTTOM: 7px;
        BORDER-BOTTOM: #B4C2FE  1px solid;
		
}
.top {
     PADDING-TOP: 1px;
        BORDER-TOP: #B4C2FE 1px solid;
		
}
.topgris {
     PADDING-TOP: 1px;
        BORDER-TOP: #C0C0C0 1px solid;
		
}

.inicio {
        BORDER-LEFT: black 1px solid;
        PADDING-LEFT: 2px;
        PADDING-BOTTOM: 2px;
        BORDER-BOTTOM: black 1px solid;
		PADDING-TOP: 1px;
        BORDER-TOP: black 1px solid;
        border: 1px solid #B4C2FE;
        
}

.fin {
		BORDER-LEFT: black 1px solid;
        PADDING-LEFT: 7px;
        PADDING-BOTTOM: 7px;
        BORDER-BOTTOM: black  1px solid;
		PADDING-TOP: 7px;
        BORDER-TOP: black  1px solid;
        BORDER-RIGHT: black  1px solid;
        PADDING-RIGHT: 7px;
        border: 1px solid #B4C2FE;
}

.inicio_st {
        BORDER-LEFT: black 1px solid;
        PADDING-LEFT: 1px;
        PADDING-BOTTOM: 1px;
        BORDER-BOTTOM: black  1px solid;
        border: 1px solid #B4C2FE;
}

.fin_st {
		BORDER-LEFT: black  1px solid;
        PADDING-LEFT: 1px;
        PADDING-BOTTOM: 1px;
        BORDER-BOTTOM: black  1px solid;

        BORDER-RIGHT: black  1px solid;
        PADDING-RIGHT: 1px;
        border: 1px solid #B4C2FE;
}



.negritas 
{
	font-weight: bold;
	font-weight: bold;
}
.rojo {
	color: red;
	
}
.bgrojo {
	background-color: red;
	
}



A.rojo {
	color: red  !important;
	font-size: 11px !important;
	text-decoration: underline !important;
	cursor:hand !important;
	
}


.verde {
	color: green !important;
	
}

A.verde {
	color: green !important;
	font-size: 11px !important;
	text-decoration: underline !important;
	cursor:hand !important;
	
}
A:link.verde {
	color: green !important;
	font-size: 11px !important;
	text-decoration: underline !important;
	cursor:hand !important;
}


A.verde:hover {
	color: green !important;
	cursor:hand !important; 
	cursor:pointer !important;
	text-decoration: none !important;
}

A.verde:visited {
	color:green !important;
	cursor:hand !important;
	text-decoration: none !important;
}





A:link.reds {
	color: #FF0000 !important;
	font-size: 11px !important;
	text-decoration: underline !important;
	cursor:hand !important;
}

A:link.oranges {
	color: #F17D0F !important;
	font-size: 11px !important;
	text-decoration: underline !important;
	cursor:hand !important;
}


A.reds:hover {
	color: #FF0000 !important;
	cursor:hand !important; 
	cursor:pointer !important;
	text-decoration: none !important;
}

A.reds:visited {
	color: #FF0000 !important;
	cursor:hand !important;
	text-decoration: none !important;
}
A.oranges:hover {
	color: #F17D0F !important;
	cursor:hand !important; 
	cursor:pointer !important;
	text-decoration: none !important;
}

A.oranges:visited {
	color: #F17D0F !important;
	cursor:hand !important;
	text-decoration: none !important;
}



A.link_black {
	color: #000000 !important;
	font-size: 11px !important;
	text-decoration: underline !important;
	cursor:hand !important;
}






A.link_black:hover {
	color: #000000 !important;
	cursor:hand !important; 
	cursor:pointer !important;
	text-decoration: none !important;
}
A.link_black:visited {
	color: #000000 !important;
	cursor:hand !important;
	text-decoration: none !important;
}




a.link_white {
	color: #FFFFFF !important;
	text-decoration: underline !important;
	cursor:hand !important; 
	cursor:pointer !important;
}
a.link_white:hover {
	text-decoration: none;
	cursor:hand; 
	cursor:pointer;
}

.combobox {
  height:20px;
  display: block;
  width: 200px;
  padding: 0.0rem 0.75rem;
  font-size: 10px;
  color:		#000000;
  line-height: 1.5;
  font-size: 11px;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.30rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border-color:	#A9A9A9;
	
	
	
}

SELECT{
  height:20px;
  display: block;
  width: 200px;
  padding: 0.0rem 0.75rem;
  font-size: 10px;
  color:		#000000;
  line-height: 1.5;
  font-size: 11px;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.30rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border-color:	#A9A9A9;
	
}


.field {
	font-family: Tahoma, Arial, Helvetica;
	font-size: 11px;
}

.button01 {
	color: #FFFFFF;
	background-color: #000066;
	 border: 2px solid #E5E5FF;
	padding: .1em 1em .10em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .1em; 
	-moz-border-radius: .1em;
	border-radius: .5em;
	cursor: pointer;
}
.button02 {
color: #FFFFFF;
	background-color: #000066;
	 border: 2px solid #E5E5FF;
	padding: .1em 1em .10em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .1em; 
	-moz-border-radius: .1em;
	border-radius: .5em;
	cursor: pointer;	
}

table.menu	{
	position: absolute !important;
	border: 1px solid black !important;
	cursor: pointer !important;
	visibility: hidden !important;
}
#mainmenu	{
	position: static;
}
table.menu td	{
	color: Black!important;
	background-color: white !important;
	border: 0px !important;
	padding: 0px 8px 0px !important;
	font-family:    tahoma, Arial, Helvetica, sans-serif !important;
	font-size: 9pt !important;
	white-space: nowrap !important;
}
.td{
	font-family: Tahoma, Arial, Helvetica;
	font-size: 1px;
	
}
.td2{
	font-family: Tahoma, Arial, Helvetica;
	font-size: 11px;
	text-decoration: none;
	
}
.button {
	color: #FFFFFF;
	background-color: #8DA4FE;
	padding: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	border: solid 1px #000066; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: 'ThonburiBold'; 
	text-decoration: none;
	cursor: pointer;
	height: 25px;
	line-height: 25px;
	
	
	margin-left: 5px;
	font-size: 12px;
}

.select_abcs {
	color: #FFFFFF;
	background-color: #8DA4FE;
	padding: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	border: solid 1px #000066; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: 'ThonburiBold'; 
	text-decoration: none;
	cursor: pointer;
	height: 25px;
	line-height: 25px;
	
	
	margin-left: 5px;
	font-size: 12px;
}

.button1 
{
	color: #FFFFFF;
	background-color: #8DA4FE;
	padding: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	border: solid 1px #000066; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: 'ThonburiBold'; 
	text-decoration: none;
	cursor: pointer;
	height: 25px;
	line-height: 25px;
	
	
	margin-left: 5px;
	font-size: 12px;
}	


.unir{
	padding-left: 30px;
	background-image: url('iconos2/unir.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}.Guardar{
	padding-left: 25px;
	background-image: url('imagenes/guardar.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.editar{
	padding-left: 25px;
	background-image: url('iconos2/editar.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.limpiar{
	padding-left: 25px;
	background-image: url('iconos/erase.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}

.calendario{
	padding-left: 35px;
	background-image: url('iconos/calendario.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}

.eliminar{
	padding-left: 25px;
	background-image: url('iconos/delete.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}

.upload{
	padding-left: 35px;
	background-image: url('iconos/upload.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.download{
	padding-left: 25px;
	background-image: url('iconos/download.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}

.imprimir{
	padding-left: 25px;
	background-image: url('imagenes/action_print.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.correo{
	padding-left: 25px;
	background-image: url('imagenes/icon_email.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
}

.copiar{
	padding-left: 25px;
	background-image: url('imagenes/copy.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.salir{
	padding-left: 25px;
	background-image: url('iconos/exit.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.cliente{
	padding-left: 25px;
	background-image: url('imagenes/icon_user.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.edocta{
	padding-left: 25px;
	background-image: url('imagenes/table.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
}

.regresar{
	padding-left: 25px;
	background-image: url('imagenes/back.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.add, agregar{
	padding-left: 30px;
	background-image: url('iconos2/addd.ico');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.cancelar{
	padding-left: 25px;
	background-image: url('imagenes/cancel.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.rechazar{
	padding-left: 25px;
	background-image: url('imagenes/cancel.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.pagar{
	padding-left: 25px;
	background-image: url('iconos/pay.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.excel{
	padding-left: 25px;
	background-image: url('iconos/excel.jpg');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.continuar{
	padding-left: 25px;
	background-image: url('iconos/next.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}

.aprobar,aceptar{
	padding-left: 25px;
	background-image: url('iconos/accept.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.remplazar{
	padding-left: 25px;
	background-image: url('imagenes/action_refresh_blue.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.cambiar{
	padding-left: 25px;
	background-image: url('imagenes/action_refresh_blue.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.envios{
	padding-left: 25px;
	background-image: url('iconos/menu_almacen.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.direccion{
	padding-left: 25px;
	background-image: url('iconos/map.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.terminar{
	padding-left: 25px;
	background-image: url('iconos/terminar.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}

.buscar{
	padding-left: 25px;
	background-image: url('imagenes/buscar.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}

/*###########################  Empieza Taller #######################*/
.pagar{
	padding-left: 25px;
	background-image: url('iconos/pay.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.desglose{
	padding-left: 35px;
	background-image: url('iconos/lista.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.informacion{
	padding-left: 35px;
	background-image: url('iconos/info.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.servicio{
	padding-left: 25px;
	background-image: url('iconos/service.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.herramientas{
	padding-left: 25px;
	background-image: url('iconos/tool.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}
.cambiar{
	padding-left: 25px;
	background-image: url('iconos/remplazar.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
}

/*###########################  Termina Taller #######################*/





.buscar_avanzada{
	padding-left: 25px;
	background-image: url('imagenes/buscar_avanzada.png');
	background-repeat: no-repeat;
	background-position: 5px center;
}

.button:hover {
	text-decoration: none;
	  
	  border: 1px solid #000066;
    color: #000066;
}

.button:active {
	position: relative;
	top: 1px;
}

.uno {font-size: 1px;}
.siete{font-size: 7px;}
.ocho{font-size: 8px;}
.nueve {font-size: 9px;}
.unocero {font-size: 10px;}
.unouno {font-size: 11px;}
.unodos {font-size: 12px;}
.unotres {font-size: 13px;}
.unocuatro {font-size: 14px;}
.unocinco {font-size: 15px;}
.unpx {font-size: 1px;}
.unoseis {font-size: 16px;}
.unosiete {font-size: 17px;}
.unoocho {font-size: 18px;}
.unonueve {font-size: 19px;}
.dos {font-size: 20px;}
.dosuno {font-size: 21px;}
.dosdos {font-size: 22px;}
.dostres {font-size: 23px;}
.doscuatro {font-size: 24px;}
.doscinco {font-size: 25px;}
.dosseis {font-size: 26px;}
.dossiete {font-size: 27px;}
.dosocho {font-size: 28px;}
.dosnueve {font-size: 29px;}
.cuarenta {font-size: 40px;}


td.doscuatroo {font-size: 24px;}
#tbl_new {
	background-color: #D5D5FF;
}
.fondo1220 {
	background-color: #BBC7F7;
}
.fondo_tenue {
	background-color: #A6D0DD;
}
.fondos {
	background-color: #B4C2FE;
}
.boton {
	color: #FFFFFF;
	background-color: #000066;
	border: 1px solid #FFFFFF;
}
hr {
	height: 1px !important;
	width: 100% !important;
	color: #000066 !important;
}
a:link {
	color: #000066 !important;
	text-decoration: underline !important;
	cursor:hand !important; 
	cursor:pointer !important;
}
a:hover {
	color: #0066CC !important;
	text-decoration: underline !important;
	cursor:hand !important; 
	cursor:pointer !important;
}
a:active {
	color: #000066 !important;
	cursor:hand !important; 
	cursor:pointer !important;
}
a:visited {
	color: #000066 !important;
	text-decoration: underline !important;
}


A {
	color: black !important;
	
	cursor:hand !important; 
	cursor:pointer !important;
}
A:hover {
	color: #0066CC !important;
	text-decoration: underline !important;
	cursor:hand !important; 
	cursor:pointer !important;
}
A:active {
	color: #000066 !important;
	cursor:hand !important; 
	cursor:pointer !important;
}
A:visited {
	color: #000066 !important;
	text-decoration: underline !important;
}


#tbl_cmp {
	display: block;
}
.fondoblanco {
	background-color: #FFFFFF  !important;
}
.tablas
{
	border: 1px solid #8DA4FE  !important;
	border-collapse: collapse;
	border-collapse: separate!important;
}
td.tablas
{
	padding: 10px !important;
	border-collapse: separate!important;
	padding-left: 5px !important;
	padding-right: 5px !important;
}
.fondoazul240 {
	background-color: #8DA4FE;
}
#tab_tit {	font-size: 24px;
}
#tab_tit {	height: 60px;
}

.company_text {
	FONT-FAMILY: verdana;
	FONT-SIZE: 30px;
	
	COLOR: #050064;
}
.fondo10 {
	background-color: #000066;
}
.textoblanco {
	color: #FFFFFF;
}


.prox {
		top: 0;
		left: 0;
		height: 310;
		width: 100%;
		overflow: yes;
		margin:0px;
		overflow-y: scroll;
		overflow-x: auto;
		scrollbar-face-color: #978FDA;
		scrollbar-shadow-color: #DAD7E5;
		scrollbar-highlight-color: #DAD7E5;
		scrollbar-3dlight-color: #DAD7E5;
		scrollbar-darkshadow-color: #DAD7E5;
		scrollbar-track-color: #DAD7E5;
		scrollbar-arrow-color: #DAD7E5;
	}

	
	


th.Acciones{
	text-align: center;
}


/*######################################*/
table.tabla3 {
	
	font-weight: normal;
	height: 25px;
	padding-top: 1px;
	padding-bottom: 1px;
	text-align: center;
	font-size: 12px;
	padding: 4px;
	font-family:arial;
	margin:10px 0pt 15px;
	width: 100%;
	
}

.fondos3 {
	background-color: #CED8F6;
}
table.tabla3 thead tr:first-child th {
	font-weight: normal;
	height: 25px;
	padding-top: 1px;
	padding-bottom: 1px;
	text-align: center;
	font-size: 12px;
	
	padding: 4px;
}


table.tabla3 tfoot {
	background-color: #CED8F6;
}

table.tabla3 thead tr th {
	
	font-weight: normal;
	height: 25px;
	padding-top: 1px;
	padding-bottom: 1px;
	text-align: center;
	font-size: 12px;
	border-left: solid 1px #8DA4FE;
	border-right: solid 1px #8DA4FE;
	border-bottom: solid 1px #8DA4FE;
	border-top: solid 1px #8DA4FE;
	background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F3), to(#8DA4FE));
	background: -moz-linear-gradient(top,  #F2F2F3,  #8DA4FE);
	/*Add by JC*/
	background: linear-gradient(top,  #F2F2F3,  #8DA4FE);
	background: -o-linear-gradient(top,  #F2F2F3,  #8DA4FE);
	background: -ms-linear-gradient(top,  #F2F2F3,  #8DA4FE);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F3', endColorstr='#8DA4FE');
	
	padding: 4px;
}
table.tabla3 thead tr .header {

border-left: solid 1px #8DA4FE;
	border-right: solid 1px #8DA4FE;
	border-bottom: solid 1px #8DA4FE;
	border-top: solid 1px #8DA4FE;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;

	background-image: url(iconos2/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}




table.tabla3 tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #E5E5FF;
	vertical-align: top;
}


/* Estas 2 clases son para que cambien con el onmouse hover*/
.tabla3 tbody tr:hover.odd td {
	
	padding: 4px;
	background-color: #A9D0F5;
	vertical-align: top;
}

.tabla3 tbody tr:hover td {
	
	padding: 4px;
	background-color: #A9D0F5;
	vertical-align: top;
}

/* esta clase es la que cambia cada TR uno de un color y otro de otro color*/
table.tabla3 tbody tr.odd td {
	background-color:#DAE3FE;
}


/* estas clases solo slirven para poner el icono correspondiente en el TD*/
table.tabla3 thead tr .headerSortUp {
	background-image: url(iconos2/asc.gif);
}

table.tabla3 thead tr .headerSortDown {
	background-image: url(iconos2/desc.gif);
}


table.tabla3 thead tr .headerSortDown, table.tabla3 thead tr .headerSortUp {
/* este esilo se elimina ya que era el color de la columna,y no se necessitaba cambiar porque tenemos degradados */

}


table.tabla3 > tbody {
	border: solid 1px #8DA4FE;
}

table.tabla3 > tbody > tr > td:last-child{
	border-right: solid 1px #8DA4FE;
}

table.tabla3 > tbody > tr > td:first-child{
	border-left: solid 1px #8DA4FE;
}

table.tabla3 > tbody:last-child > tr:last-child > * {
	border-bottom: solid 1px #8DA4FE;
}




/*######################################*/
table.tabla4 {
	
	font-weight: normal;
	height: 25px;
	padding-top: 1px;
	padding-bottom: 1px;
	text-align: center;
	font-size: 12px;
	padding: 4px;
	font-family:arial;
	margin:10px 0pt 15px;
	width: 100%;
	
}

table > tr > td .fondos4 {
	background-color: #CED8F6;
}
table.tabla4 thead tr:first-child th {
	font-weight: normal;
	height: 25px;
	padding-top: 10px;
	padding-bottom: 1px;
	padding-right: 15px;
	
	font-size: 12px;
	border-left: solid 1px #8DA4FE;
	border-right: solid 1px #8DA4FE;
	border-bottom: solid 1px #8DA4FE;
	border-top: solid 1px #8DA4FE;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	/*Add bye JC*/
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F3), to(#A9BCF5));
	background: -moz-linear-gradient(top,  #F2F2F3,  #A9BCF5);
	/*Add by JC*/
	background: linear-gradient(top,  #F2F2F3,  #A9BCF5);
	background: -o-linear-gradient(top,  #F2F2F3,  #A9BCF5);
	background: -ms-linear-gradient(top,  #F2F2F3,  #A9BCF5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F3', endColorstr='#A9BCF5');
	padding: 4px;
}



table.tabla4 tfoot {

background-color: #CED8F6;
	padding-top: 10px;
	padding-bottom: 10px;
	
}

table.tabla4 thead tr th {
	
	font-weight: normal;
	height: 25px;
	padding-top: 10px;
	padding-bottom: 1px;
	padding-right: 15px;
	
	font-size: 12px;
	border-left: solid 1px #8DA4FE;
	border-right: solid 1px #8DA4FE;
	border-bottom: solid 1px #8DA4FE;
	border-top: solid 1px #8DA4FE;

	padding: 4px;
}
table.tabla4 thead tr .header {
padding-right: 15px;
padding-top: 9px;
padding-bottom: 9px;
	background-image: url(iconos2/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}




table.tabla4 tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #E5E5FF;
	vertical-align: top;
}


/* Estas 2 clases son para que cambien con el onmouse hover*/
.tabla4 tbody tr:hover.odd td {
	
	padding: 4px;
	background-color: #A9D0F5;
	vertical-align: top;
}

.tabla4 tbody tr:hover td {
	
	padding: 4px;
	background-color: #A9D0F5;
	vertical-align: top;
}

/* esta clase es la que cambia cada TR uno de un color y otro de otro color*/
table.tabla4 tbody tr.odd td {
	background-color:#DAE3FE;
}


/* estas clases solo slirven para poner el icono correspondiente en el TD*/
table.tabla4 thead tr .headerSortUp {
	background-image: url(iconos2/asc.gif);
}

table.tabla4 thead tr .headerSortDown {
	background-image: url(iconos2/desc.gif);
}


table.tabla4 thead tr .headerSortDown, table.tabla4 thead tr .headerSortUp {
/* este esilo se elimina ya que era el color de la columna,y no se necessitaba cambiar porque tenemos degradados */

}


table.tabla4 > tbody {
	border: solid 1px #8DA4FE;
}

table.tabla4 > tbody > tr > td:last-child{
	border-right: solid 1px #8DA4FE;
}

table.tabla4 > tfoot > tr > td:last-child{
	border-right: solid 1px #8DA4FE;
}

table.tabla4 > tbody > tr > td:first-child{
	border-left: solid 1px #8DA4FE;
}

table.tabla4 > tfoot > tr > td:first-child{
	border-left: solid 1px #8DA4FE;
}

table.tabla4 > tbody:last-child > tr:last-child > * {
	border-bottom: solid 1px #8DA4FE;
	
}



table.tabla4 > tfoot > tr > td:first-child{
	border-left: solid 1px #8DA4FE;
	padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
 border-collapse: separate;
    border-spacing: 10px 50px;

}

table.tabla4 > tfoot:last-child > tr:last-child > * {
	border-bottom: solid 1px #8DA4FE;
	padding-left: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-collapse: separate;
    border-spacing: 10px 50px;
}


table.tabla4 > tfoot:last-child > tr:last-child > * {
	border-bottom: solid 1px #8DA4FE;
	padding-left: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
 	border-collapse: separate;
    border-spacing: 10px 50px;
}

/*######################################*/
/*######################################*/




/*##################    tabla2    ####################*/
table.tabla2 > thead > tr > td
{
	padding: 6px !important;
	font-weight: normal !important;
	height: 25px !important;
	padding-top: 1px !important;
	padding-bottom: 1px !important;
	text-align: center !important;
	font-size: 12px !important;
	border-left: solid 1px #8DA4FE !important;
	border-right: solid 1px #8DA4FE !important;
	border-bottom: solid 1px #8DA4FE !important;
	border-top: solid 1px #8DA4FE !important;
	-webkit-border-top-left-radius: 5px !important;
	-webkit-border-top-right-radius: 5px !important;
	-moz-border-radius-topleft: 5px !important;
	-moz-border-radius-topright: 5px !important;
	/*Add bye JC*/
	border-top-left-radius: 5px !important;
	border-top-right-radius: 5px !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F3), to(#8DA4FE)) !important;
	background: -moz-linear-gradient(top,  #F2F2F3,  #8DA4FE) !important;
	/*Add by JC*/
	background: linear-gradient(top,  #F2F2F3,  #8DA4FE) !important;
	background: -o-linear-gradient(top,  #F2F2F3,  #8DA4FE) !important;
	background: -ms-linear-gradient(top,  #F2F2F3,  #8DA4FE) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F3', endColorstr='#8DA4FE') !important	;
}
table.tabla2 > thead > tr >th 
{
	padding: 6px !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
	cursor: default !important;
}
table.tabla2 > tbody > tr > td 
{
	padding: 2px !important;
	padding-left: 5px !important;
	padding-right: 3px !important;
	font-size: 12px !important;
}
table.tabla2 > tbody 
{
	border: solid 1px #8DA4FE !important;
}
table.tabla2 > tbody > tr > td:last-child
{
	border-right: solid 1px #8DA4FE !important;
}
table.tabla2 > tbody > tr > td:first-child
{
	border-left: solid 1px #8DA4FE !important;
}
table.tabla2 > tbody:last-child > tr:last-child > * 
{
	border-bottom: solid 1px #8DA4FE !important;
}
table.tabla2 > tbody > tr > * 
{

}
table.tabla2
{
	width: 99% !important;
}
/*##################    tabla2_titulo_fijo    ####################*/
table.tabla_fij > thead > tr > td
{
	position: sticky;
	top: 0;
	z-index: 5;
	padding: 6px !important;
	font-weight: normal !important;
	height: 25px !important;
	padding-top: 1px !important;
	padding-bottom: 1px !important;
	text-align: center !important;
	font-size: 12px !important;
	border-left: solid 1px #8DA4FE !important;
	border-right: solid 1px #8DA4FE !important;
	border-bottom: solid 1px #8DA4FE !important;
	border-top: solid 1px #8DA4FE !important;
	-webkit-border-top-left-radius: 5px !important;
	-webkit-border-top-right-radius: 5px !important;
	-moz-border-radius-topleft: 5px !important;
	-moz-border-radius-topright: 5px !important;
	/*Add bye JC*/
	border-top-left-radius: 5px !important;
	border-top-right-radius: 5px !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F3), to(#8DA4FE)) !important;
	background: -moz-linear-gradient(top,  #F2F2F3,  #8DA4FE) !important;
	/*Add by JC*/
	background: linear-gradient(top,  #F2F2F3,  #8DA4FE) !important;
	background: -o-linear-gradient(top,  #F2F2F3,  #8DA4FE) !important;
	background: -ms-linear-gradient(top,  #F2F2F3,  #8DA4FE) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F3', endColorstr='#8DA4FE') !important	;
}
table.tabla_fij > thead > tr >th 
{
	padding: 6px !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
	cursor: default !important;
}
table.tabla_fij > tbody > tr > td 
{
	padding: 2px !important;
	padding-left: 5px !important;
	padding-right: 3px !important;
	font-size: 12px !important;
}
table.tabla_fij > tbody 
{
	border: solid 1px #8DA4FE !important;
}
table.tabla_fij > tbody > tr > td:last-child
{
	border-right: solid 1px #8DA4FE !important;
}
table.tabla_fij > tbody > tr > td:first-child
{
	border-left: solid 1px #8DA4FE !important;
}
table.tabla_fij > tbody:last-child > tr:last-child > * 
{
	border-bottom: solid 1px #8DA4FE !important;
}
table.tabla_fij > tbody > tr > * 
{

}
table.tabla_fij
{
	width: 99% !important;
}
/*#############################################################*/



tr.Partida > td > input{
	-moz-border-radius: 3px;
	-webkit-border-radius:  3px;
	/*Add by JC*/
	-o-border-radius: 3px;
	border-radius: 3px;
	font-family: 'ThonburiBold'; 
	width: 100%;
	margin-right: -5px;
	border-top: solid 1px #9e9e9e;
	border-left: solid 1px #9e9e9e;
	border-bottom: solid 1px #a0a0a0;
	border-right: solid 1px #a0a0a0;
	background-image: url('iconos/SombraInput.png');
	background-repeat: repeat-x;
	background-position-y: 0px;
	background-color: white;
}

tr.Partida > td > table > tbody > tr > td > select{
	border: solid 1px #CCC;
	-moz-border-radius: 3px;
	-webkit-border-radius:  3px;
	/*Add by JC*/
	-o-border-radius: 3px;
	border-radius: 3px;
	background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#FFF));
	background: -moz-linear-gradient(top,  #EEE,  #FFF);
	/*Add by JC*/
	background: linear-gradient(top,  #EEE,  #FFF);
	background: -o-linear-gradient(top,  #EEE,  #FFF);
	background: -ms-linear-gradient(top,  #EEE,  #FFF);
	font-family: 'ThonburiBold'; 
	width: 100%;
}

tr.Partida > td > input.Deshabilitado{
	opacity: 0.6;
}

tr.Partida > td > table > tbody > tr > td > input{
	-moz-border-radius: 3px;
	-webkit-border-radius:  3px;
	/*Add by JC*/
	-o-border-radius: 3px;
	border-radius: 3px;
	font-family: 'ThonburiBold'; 
	width: 100%;
	margin-right: -5px;
	border-top: solid 1px #9e9e9e;
	border-left: solid 1px #9e9e9e;
	border-bottom: solid 1px #a0a0a0;
	border-right: solid 1px #a0a0a0;
	background-image: url('iconos/SombraInput.png');
	background-repeat: repeat-x;
	background-position-y: 0px;
	background-color: white;
}

input.inp{
	-moz-border-radius: 3px;
	-webkit-border-radius:  3px;
	/*Add by JC*/
	-o-border-radius: 3px;
	border-radius: 3px;
	font-family: 'ThonburiBold'; 
	
	margin-right: -5px;
	border-top: solid 1px #9e9e9e;
	border-left: solid 1px #9e9e9e;
	border-bottom: solid 1px #a0a0a0;
	border-right: solid 1px #a0a0a0;
	background-image: url('iconos/SombraInput.png');
	background-repeat: repeat-x;
	background-position-y: 0px;
	background-color: white;
	min-width: 50px;
}

tr.Partida > td > table > tbody > tr > td > input.Deshabilitado{
	opacity: 0.6;
}




input{
	-moz-border-radius: 3px;
	-webkit-border-radius:  3px;
	
	-o-border-radius: 3px;
	border-radius: 3px;
	font-family: 'ThonburiBold'; 
	
	margin-right: -5px;
	border-top: solid 1px #9e9e9e;
	border-left: solid 1px #9e9e9e;
	border-bottom: solid 1px #a0a0a0;
	border-right: solid 1px #a0a0a0;
	background-image: url('iconos/SombraInput.png');
	background-repeat: repeat-x;
	background-position-y: 0px;
	background-color: white;
	min-width: 50px;
}

textarea{
	-moz-border-radius: 3px;
	-webkit-border-radius:  3px;

	-o-border-radius: 3px;
	border-radius: 3px;
	font-family: 'ThonburiBold'; 
	
	margin-right: -5px;
	border-top: solid 1px #9e9e9e;
	border-left: solid 1px #9e9e9e;
	border-bottom: solid 1px #a0a0a0;
	border-right: solid 1px #a0a0a0;
	background-image: url('iconos/SombraInput.png');
	background-repeat: repeat-x;
	background-position-y: 0px;
	background-color: white;
	min-width: 50px;
}





/* DIV container around table to constrict the height for IE (IE ignores the tbody height style) */
div.FixedTableHead {
	overflow-y:auto;
	
	/* this fixes IE so container width is same as table width */
	width: expression( (this.childNodes[0].clientWidth + 24) + 'px' );
	
	/* This fixes IE so the container height is table height plus the height of the header */
	height: expression( (parseInt(this.childNodes[0].style.height) + this.childNodes[0].childNodes[1].offsetTop + 1) +'px' );
}

/* Scrollable Content */
.FixedTableHead table tbody {
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
}

.FixedTableHead table tbody tr {
	height: auto;
	white-space: nowrap;
}

/* Prevent Mozilla scrollbar from hiding right-most cell content */
.FixedTableHead table tbody tr td:last-child {
	padding-right: 20px;
}

/* Fixed Header */
/* In WinIE any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
.FixedTableHead table thead tr {
	position: relative;
	height: auto;
	/* this fixes IE header jumping bug when mousing over rows in the tbody */
	top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
}

/* Fixed Header */
.FixedTableHead table thead tr td {
	border-bottom:1px solid #000000;
	background-color:white;
}



table.cruises { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 535px;    
    }
  table.cruises th, table.cruises td { 
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999; 
    }

  
  div.scrollableContainer { 
    position: relative; 
    width: 98%; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
     
    }
  div.scrollingArea { 
    height: 240px; 
    overflow: auto; 
    }

  table.scrollable thead tr {
    left: 0; top: 0;
    position: absolute;
    }
    
    
    
    .alertify,
.alertify-log {
	font-family: sans-serif;
}
.alertify {
	background: #FFF;
	border: 10px solid #333; /* browsers that don't support rgba */
	border: 10px solid rgba(0,0,0,.7);
	border-radius: 8px;
	box-shadow: 0 3px 3px rgba(0,0,0,.3);
	-webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
	   -moz-background-clip: padding;     /* Firefox 3.6 */
	        background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
.alertify-text {
	border: 1px solid #CCC;
	padding: 10px;
	border-radius: 4px;
}
.alertify-button {
	border-radius: 4px;
	color: #FFF;
	font-weight: bold;
	padding: 6px 15px;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image:    -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image:     -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image:      -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image:         linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.alertify-button:hover,
.alertify-button:focus {
	outline: none;
	box-shadow: 0 0 15px #2B72D5;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
	background-image:    -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
	background-image:     -ms-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
	background-image:      -o-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
	background-image:         linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
}
.alertify-button:active {
	position: relative;
	top: 1px;
}
	.alertify-button-cancel {
		background-color: #FE1A00;
		border: 1px solid #D83526;
	}
	.alertify-button-ok {
		background-color: #5CB811;
		border: 1px solid #3B7808;
	}
.alertify-log {
	background: #1F1F1F;
	background: rgba(0,0,0,.9);
	padding: 15px;
	border-radius: 4px;
	color: #FFF;
	text-shadow: -1px -1px 0 rgba(0,0,0,.5);
}
	.alertify-log-error {
		background: #FE1A00;
		background: rgba(254,26,0,.9);
	}
	.alertify-log-success {
		background: #5CB811;
		background: rgba(92,184,17,.9);
	}
	
	.alertify-show,
.alertify-log {
	-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
	-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	   -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	    -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	     -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	        transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}
.alertify-hide {
	-webkit-transition: all 250ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
	-webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	   -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	    -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	     -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	        transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
}
.alertify-cover {
	position: fixed; z-index: 99999;
	top: 0; right: 0; bottom: 0; left: 0;
}
.alertify {
	position: fixed; z-index: 99999;
	top: 50px; left: 50%;
	width: 550px;
	margin-left: -275px;
}
	.alertify-hidden {
		top: -50px;
		visibility: hidden;
	}
.alertify-logs {
	position: fixed;
	z-index: 5000;
	bottom: 10px;
	right: 10px;
	width: 300px;
}
	.alertify-log {
		display: block;
		margin-top: 10px;
		position: relative;
		right: -300px;
	}
	.alertify-log-show {
		right: 0;
	}
	.alertify-dialog {
		padding: 25px;
	}
		.alertify-resetFocus {
			border: 0;
			clip: rect(0 0 0 0);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;
		}
		.alertify-inner {
			text-align: center;
		}
		.alertify-text {
			margin-bottom: 15px;
			width: 100%;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
			        box-sizing: border-box;
			font-size: 100%;
		}
		.alertify-buttons {
		}
			.alertify-button {
				/* line-height and font-size for input button */
				line-height: 1.5;
				font-size: 100%;
				display: inline-block;
				cursor: pointer;
				margin-left: 5px;
			}

@media only screen and (max-width: 680px) {
	.alertify,
	.alertify-logs {
		width: 90%;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.alertify {
		left: 5%;
		margin: 0;
	}
}

span.rednum {
  background: #cc0001;
  border-radius: 3px;
  color: #fff;
  z-index: 999999;
    font-weight: 600;
  padding: 2px 6px;
  box-shadow: 0 2px 3px rgba(0,0,0,.2), inset 0 2px 5px rgba(225,225,225,.3);
  font-size: 9px;
  margin-left: 5px;
  position: relative;
  display: inline-block;
  top: -1px;
}

@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

/* Styling an indeterminate progress bar */

progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
    /* Get rid of the default appearance */
    appearance: none;
    
    /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
    border: none;
    
    /* Add dimensions */
    width: 100%; height: 20px;
    
    /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
      background-color: whiteSmoke;
      border-radius: 3px;
      box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
    
    /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
    color: royalblue;
    
    position: relative;
    margin: 0 0 1.5em; 
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
    position: relative;
    
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    
    /* Let's animate this */
    animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
    content: '';
    position: absolute;
    
    width:5px; height:5px;
    top:7px; right:7px;
    
    background-color: white;
    border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                        transparent,
                        transparent 33%,
                        rgba(0,0,0,.1) 33%,
                        rgba(0,0,0,.1) 66%,
                        transparent 66%),
    -moz-linear-gradient( top,
                           rgba(255, 255, 255, .25),
                           rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
    
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    
    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    /* Dimensions should be similar to the parent progress element. */
    width: 100%; height:20px;
}

.progress-bar span {
    background-color: royalblue;
    border-radius: 3px;
    
    display: block;
    text-indent: -9999px;
}

p[data-value] { 
  
  position: relative; 
}



.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}


/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
    content: attr(data-value) '%';
    position: absolute; right:0;
}
.php::-webkit-progress-value 
{
    /* Gradient background with Stripes */
    background-image:
    -webkit-linear-gradient( 135deg,
         transparent,
         transparent 33%,
         rgba(0,0,0,.1) 33%,
         rgba(0,0,0,.1) 66%,
         transparent 66%),
    -webkit-linear-gradient( top,
        rgba(255, 255, 255, .25),
        rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #ff0);
}



/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

.html5::-moz-progress-bar,
.php::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                        transparent,
                        transparent 33%,
                        rgba(0,0,0,.1) 33%,
                        rgba(0,0,0,.1) 66%,
                        transparent 66%),
    -moz-linear-gradient( top,
                           rgba(255, 255, 255, .25),
                           rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
}

.css3::-moz-progress-bar,
.php::-moz-progress-bar {
{
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                        transparent,
                        transparent 33%,
                        rgba(0,0,0,.1) 33%,
                        rgba(0,0,0,.1) 66%,
                        transparent 66%),
    -moz-linear-gradient( top,
                           rgba(255, 255, 255, .25),
                           rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #ff0);
}

.jquery::-moz-progress-bar,
.node-js::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                        transparent,
                        transparent 33%,
                        rgba(0,0,0,.1) 33%,
                        rgba(0,0,0,.1) 66%,
                        transparent 66%),
    -moz-linear-gradient( top,
                           rgba(255, 255, 255, .25),
                           rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #690);
}


td.gris{
	background-color: #9B9B9B;;
	
}


.coupon {
    border: 5px dotted #bbb; /* Dotted border */
    width: 80%; 
    border-radius: 15px; /* Rounded border */
    margin: 0 auto; /* Center the coupon */
    max-width: 600px; 
}

.container {
    padding: 2px 16px;
    background-color: #f1f1f1;
}

.promo {
    background: #ccc;
    padding: 3px;
}

.expire {
    color: red;
}

 a[href]:after {
    content: ""!important;
  }
  abbr[title]:after {
    content: ""!important;
  }