/* 

Fichero de estilos únicamente para tablas

Añadir al tag <table> la clase my-table: 
	<div class="my-table-container">
		<table class="my-table">
			<tr>
				<th class="left">Firstname</th>
				<th class="left">Lastname</th>
				<th class="right">Price</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin lorem ipsum</td>
				<td class="right">5.0</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
				<td class="right">15.0</td>
			</tr>
		</table>
	</div>

*/

.my-table-container {
	width: 100%;
	overflow: auto;
}
.my-table {
	min-width: 100%;
	margin: px 0;
	border-collapse: collapse;
}

.my-table, .my-table th, .my-table td {
	padding: 5px 10px;
	border: 1px solid var(--grey);
}
/* CABECERA */
.my-table th {
	background: var(--grey);
	color: #fff;
	font-size: 14px;
}

/* FILAS */
.my-table tr {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s; 
}

/* Todas las filas exepto cabecera */
.my-table tr:not(:first-of-type):hover {
	background: rgba(var(--primary-rgb), 0.5) !important;
	color: #fff;
}

/* Filas impares exepto la cabecera */
.my-table tr:nth-of-type(odd):not(:first-of-type) {
	background: rgba(var(--primary-rgb), 0);
}

/* Filas pares */
.my-table tr:nth-of-type(even) {
	background: rgba(var(--primary-rgb), 0.2);
}

.my-table2-container {
	width: 100%;
	overflow: auto;
}

.my-table2 {
	/*min-width: 100%;*/
	margin: px 0;
	border-collapse: collapse;
}

.my-table2, .my-table2 th, .my-table2 td {
	padding: 5px 10px;
	border: 1px solid var(--grey);
}
/* CABECERA */
.my-table2 th {
	background: var(--grey);
	color: #fff;
	font-size: 14px;
}

/* FILAS */
.my-table2 tr {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s; 
}

/* Todas las filas exepto cabecera */
.my-table2 tr:not(:first-of-type):hover {
	background: rgba(var(--primary-rgb), 0.5) !important;
	color: #fff;
}

/* Filas impares exepto la cabecera */
.my-table2 tr:nth-of-type(odd):not(:first-of-type) {
	background: rgba(var(--primary-rgb), 0);
}

/* Filas pares */
.my-table2 tr:nth-of-type(even) {
	background: rgba(var(--primary-rgb), 0.2);
}