.cmp-table table {
	border-collapse: collapse;
	width: 100%;
}

.cmp-table table th, .cmp-table table td {
	border: 1px solid #ddd;
	padding: 8px 16px;
	text-align: left;
}

.cmp-table table tr:first-child td,
.cmp-table table tr:first-child th {
	background-color: #f2f2f2;
	color: black;
	font-weight: bold;
}

.cmp-table table tr:hover td {
	background-color: #f5f5f5;
}

.cmp-table table tr:nth-child(even) {
	background-color: #f9f9f9;
}

.cmp-table .table-annotation {
	margin-top: 8px;
	margin-bottom: 12px;
	font-size: 0.9em;
	color: grey;
	text-align: right;
	padding-right: 16px;
	position: sticky;
	left: 0;
}

.cmp-table .scrollable-table-container {
	overflow-x: auto;
}

@media (max-width: 668px) {
	.cmp-table table tr:first-of-type {
		display: none;
	}

	.cmp-table table tr {
		display: block;
		margin-bottom: 0;
	}

	.cmp-table table td {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		margin-bottom: 0;
		padding: 8px 12px;
	}

	.cmp-table table td::before {
		content: attr(data-header);
		font-weight: bold;
		text-transform: uppercase;
		font-size: 0.8em;
	}

	.cmp-table table td:first-child {
		margin-top: 8px;
		grid-template-columns: 1fr;
		background-color: #f9f9f9;
		font-weight: bold;
	}

	.cmp-table table td:first-child::before {
		display: none;
	}

	.cmp-table table tr:nth-child(even) {
		background-color: transparent;
	}
}

@supports (container-type: inline-size) {
	.cmp-table {
		container-type: inline-size;
		container-name: tableContainer;
	}
}

@container tableContainer (max-width: 668px) {
	.cmp-table table tr:first-of-type {
		display: none;
	}

	.cmp-table table tr {
		display: block;
		margin-bottom: 0;
	}

	.cmp-table table td {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		margin-bottom: 0;
		padding: 8px 12px;
	}

	.cmp-table table td::before {
		content: attr(data-header);
		font-weight: bold;
		text-transform: uppercase;
		font-size: 0.8em;
	}

	.cmp-table table td:first-child {
		margin-top: 8px;
		grid-template-columns: 1fr;
		background-color: #f9f9f9;
		font-weight: bold;
	}

	.cmp-table table td:first-child::before {
		display: none;
	}

	.cmp-table table tr:nth-child(even) {
		background-color: transparent;
	}

}