/* CSS dedicato a Datatable */

/* nascondiamo il campo di ricerca nativo per usare il nostro */
.dataTables_filter {
    display: none;
}

/* nascondiamo la select del numero di righe da mostrare */
.dataTables_length {
	display: none;
}

/* stilizzo pulsanti di esportazioni e paginazione */
.datatable_export,
.paginate_button {
	font-size: 1rem;
	color: var(--dark) !important;
	background: var(--grey) !important;
	padding: .5rem 1rem;
	margin: 0 .3rem;
	border: none !important;
	border-radius: .5rem !important;
	box-shadow: 0 0 0 .1rem #666;
	text-transform: uppercase;
	cursor: pointer;
}
.datatable_export:hover,
.paginate_button:hover,
.paginate_button.current {
	background: var(--blu) !important;
	color: #FFF !important;
}
.paginate_button.disabled:hover {
	background: var(--grey) !important;
}

/* zone della tabella da mostrare su schermi piccoli */
@media only screen and ( max-width: 650px) {
	/* nascondiamo titoli colonne */
	.datatable thead,
	.datatable tfoot {
		display: none;
	}
	
	/* stilizzo celle */
	.datatable td {
		display: grid;
		grid-template-columns: 30% 70%;
		gap: .5rem;
		padding: .5rem 1rem;
		text-align: right;
	}
	.datatable td:first-child {
		margin-top: .5rem;
	}
	.datatable td:last-child {
		margin-bottom: .5rem;
		border-bottom: .1rem solid var(--dark);
	}
	
	/* stilizzo titoli dentro le celle ottenuti dall'attributo data-title di ogni td */
	.datatable td::before {
		content: attr(data-title) ": ";
		font-weight: 600;
		text-transform: capitalize;
		text-align: left;
	}
}