/* Mostar tablas de manera horizontal con la primera columna fija
 * Para usarlo se debe incluir la clase flip-scroll en el div de clase responsive Ej;
 * <div id="tabla" class="table-responsive responsive-vertical-70 flip-scroll" dir-fix-table-header>
 */

@media only screen and (max-width: 768px) {

	.flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
	.flip-scroll * html .cf { zoom: 1; }
	.flip-scroll *:first-child+html .cf { zoom: 1; }

	.flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }

	.flip-scroll th,
	.flip-scroll td { font-size: .8em; margin: 0; vertical-align: top; }
	.flip-scroll th { text-align: left; }

	.flip-scroll table { display: block; position: relative; width: 100%; }
	.flip-scroll thead { display: block; float: left; }
	.flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
	.flip-scroll thead tr { display: block; }
	.flip-scroll th { display: block; text-align: right; }
	.flip-scroll tbody tr { display: inline-block; vertical-align: top; }
	.flip-scroll td { display: block; min-height: 1.25em; text-align: left;}

	/* Remueve el borde superior a la primera celda de cada fila dentro de la etiqueta <tbody> */
	.flip-scroll tbody tr td:first-child { border-top: 0; }

	/**
	 * La siguiente linea de codigo es la declaracion de la propiedad 'content' para cada celda 'td'.
	 * El valor de 'content' es un espacio en blanco (simipar a '&nbsp;' en HTML), y tiene como proposito
	 * hacer que cuente como un caracter "no vacio" en aquellas celdas donde no haya texto,
	 * y solo se usa en los pseudo-elementos 'before' (para este caso) y 'after' de cada elemento HTML.
	 * Es la forma de poder alinear, de alguna forma, las celdas y las filas que usan la clase 'flip-scroll'
	 */
	.flip-scroll td::before { content: '\00a0';}


	/* sort out borders */

	.flip-scroll th { border-bottom: 0; border-left: 0; }
	.flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
	.flip-scroll tbody tr { border-left: 1px solid #babcbf; }
	.flip-scroll thead tr th,
	.flip-scroll tbody tr th { border-bottom-width: 1px; }
	.flip-scroll th:last-child,
	.flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }


	/**
	 * Las siguientes lineas de codigo establecen el alto para las celdas de encabezado y cuerpo,
	 * y se debe usar la misma clase en las etiquetas <td> y <th> segun sus posiciones alineadas como columna
	 */
	.flip-scroll th.flip-cell-height-4, .flip-scroll td.flip-cell-height-4 { height: 4em; line-height: 2em; }
	.flip-scroll th.flip-cell-height-5, .flip-scroll td.flip-cell-height-5 { height: 5em; line-height: 2.5em; }
	.flip-scroll th.flip-cell-height-6, .flip-scroll td.flip-cell-height-6 { height: 6em; line-height: 3em; }
	.flip-scroll th.flip-cell-height-7, .flip-scroll td.flip-cell-height-7 { height: 7em; line-height: 3.5em; }
}



@media only screen and (max-width: 768px) {
	/* Cambios a reporte de horas extras funcionarios visa telefono */
	/* No mostrar columna validados */
	.reporteHorasExtrasFuncionario td:nth-child(10),
	.reporteHorasExtrasFuncionario th:nth-child(10){
		display: none;
	}

	.reporteHorasExtrasFuncionario td {
		height: 33px;
	}

	.flip-scroll tbody tr.flip-row-centralize td {
		text-align: center;
	}
}