div.event-prices h4 {
	width: auto;
	margin: 0 5%;
	text-align: left;
}

div.event-prices table {
	margin: 0 auto 2em auto;
}

div.event-prices th, div.event-prices td {
	padding: 0.5em;
}

div.event-prices thead th, div.event-prices tfoot th, div.event-prices td {
	font-style: italic;
	border: none;
}

div.event-prices tbody th, div.event-prices td {
	text-align: right;
}

div.event-prices tbody tr:first-child th:first-child {
	font-weight: bold;
	background-color: rgba(187, 187, 187, 0.5);
}

div.event-prices tbody th {
	font-weight: bold;
	background-color: rgba(255, 255, 255, 0.5);
}

div.event-prices tr:first-child td:nth-child(2n+2),
div.event-prices tr td:nth-child(2n+1) {
	background-color: rgba(220, 220, 220, 0.5);
}

div.event-prices tr:first-child td:nth-child(2n+1),
div.event-prices tr td:nth-child(2n+2) {
	background-color: rgba(187, 187, 187, 0.5);
}

div.event-prices td.note {
	text-align: left;
	/* background-color: transparent; */
	color: #555;
}

div.event-prices td.total {
	/* background-color: rgba(187, 187, 187, 0.5); */
	font-weight: bold;
}

div.event-prices td.full-total {
	/* background-color: rgba(187, 187, 187, 0.5); */
	font-weight: bold;
	font-style: normal;
}

div.event-prices td:empty {
	background-color: transparent;
}

div.event-prices table > tbody:nth-child(2) > tr:first-child > th.option-group {
	background-color: rgba(20, 20, 20, 0.5);
}

div.event-prices table > tbody:nth-child(3) > tr:first-child > th.option-group {
	background-color: rgba(140, 140, 140, 0.5);
}

div.event-prices table > tbody:nth-child(4) > tr:first-child > th.option-group {
	background-color: rgba(80, 80, 80, 0.5);
}

th.option-group > span {
	display:flex;
	justify-content:center;
	align-items:center;
	writing-mode: vertical-lr;
	font-size: larger;
}

div#evt-report {
	display: none;
	position: fixed;
	background-color: #a5c2e1;
	box-shadow: 3px 3px 5px #333;
	right: 50%;
	top: 50%;
	transform: translate(50%, -50%);
	z-index: 6;
	max-width: 96%;
	max-height: 90vh;
	padding: 0;
	overflow-x: auto;
	border-radius: 15px;
}

div#evt-report thead {
	/* L'entête reste fixe lors d'un scroll vertical dans la popup. */
	position: sticky;
	top: 0.2em;
}

div#evt-report tfoot {
	/* Le pied reste fixe lors d'un scroll vertical dans la popup. */
	position: sticky;
	bottom: 3.7em;
	z-index: 7;
}

div#evt-report thead  tr th {
	padding: 0.25em;
}

div#evt-report tfoot > tr > th {
	text-align: right;
	padding: 0 1em;
}

div#evt-report thead > tr:first-child > th:first-child,
div#evt-report tfoot > tr > th {
	background-color: #a5c2e1;
}

div#evt-report thead > tr > th {
	background-color: var(--table-head-bg);
}

div#evt-report > div > table > tbody:nth-child(2) > tr:first-child > th.option-group {
	background-color: rgb(100, 100, 100);
}

div#evt-report > div > table > tbody:nth-child(3) > tr:first-child > th.option-group {
	background-color: rgb(150, 150, 150);
}

div#evt-report > div > table > tbody:nth-child(4) > tr:first-child > th.option-group {
	background-color: rgb(125, 125, 125);
}

div#evt-report tbody > tr > th {
	/* L'entête reste fixe lors d'un scroll horizontal dans la popup. */	
	position: sticky;
	left: 3.2em;
	z-index: 7;
}
div#evt-report tbody > tr > th,
div#evt-report tfoot > tr > td {
	background-color: rgb(225, 225, 225);
}

div#evt-report tbody > tr:first-child > th:first-child {
	/* L'entête reste fixe lors d'un scroll horizontal dans la popup. */	
	position: sticky;
	left: 0.2em;
}

div#evt-report > div.action-set {
	position: sticky;
	bottom: 0;
	z-index: 8;
	margin: 0;
	padding: 0.5em 0;
	background-color: #a5c2e1;
}

div#evt-report > div > button {
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	border: none;
}

@media (pointer:coarse), (max-width:700px) {
	div.event-prices li ul {
		padding: 0;
	}

	div.event-prices li li {
		list-style: none;
	}

	div.event-prices li li table {
		margin: 0 10% 2em 0;
		width: 90%;
	}

	div.event-prices li li table tr th {
		width: 60%;
	}

	div.event-prices li li table {
		margin: 0 10% 2em 0;
		width: 90%;
	}

	input.display-toggle {
		display: none;
	}

	input.display-toggle + label {
		display: block;
		padding: 10px;
		margin: 0 0.5em 0.5em 0;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 5px;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
		cursor: pointer; /* Au cas où on utilise ça pour le style par défaut. */
	}

	input.display-toggle + label::after {
		font-family: 'Material Icons';
		content: 'expand_more';
	}

	input.display-toggle:checked + label::after {
		font-family: 'Material Icons';
		content: 'expand_less';
	}

	input.display-toggle + label + div {
		display: none;
	}

	input.display-toggle:checked + label + div {
		display: block;
	}

	div#evt-report {
		max-width: 100%;
		max-height: 100vh;
	}
	
	div#evt-report .optional {
		display: none;
	}

	div#evt-report tbody > tr > th {
		left: 0.2em;
	}
}