:root {
	color-scheme: dark;
	font-family: monospace;
	font-size: 16px;
}

body {
	margin: auto; 
	max-width: 768px;
}

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

tr {
	position: relative;
	cursor: pointer;
}

tr > td:first-child::before {
	content: '';
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #00000044;
}

tr::after {
	content: '';
	display: none;
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	width: 20px;
	height: 20px;
	background: url(/img/loader.png);
	background-size: contain;
	filter: invert(100%);
	animation: spin 1s linear infinite;
}

tr.loading > td:first-child::before,
tr.loading::after {
	display: inline;
}

td {
	padding: 5px 10px;
}

.none {
	display: none;
}

.main-row td {
	border-top: 2px solid #000;
}

#loader {
	text-align: center;
}

#loader span {
	animation: 1500ms infinite loader;
	animation-delay: calc(var(--i) * 500ms);
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes loader {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@media (prefers-color-scheme: light) {
	tr::after {
		filter: invert(0%);
	}
}