/* dark theme handler */
@media (prefers-color-scheme: dark) {
	html {
		color-scheme: dark;
	}
}

.logline {
	margin: 0px;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

[data-loglevel="-1"] {
	color: grey;
}

[data-loglevel="0"] {
	color: lightskyblue;
}

[data-loglevel="1"] {
	color: skyblue;
}

[data-loglevel="2"] {
	color: green;
}

[data-loglevel="3"] {
	color: orange;
}

[data-loglevel="4"] {
	color: red;
}

.outdated {
	color: red;
}

#loglevel-values {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	writing-mode: vertical-lr;
	width: 300px;
}

#loglevel-values option {
	padding: 0;
}

#loglevel-slider {
	width: 300px;
	margin: 0;
}

.invisible {
	display: none;
}

.details {
	border: 1px solid #aaa;
	border-radius: 4px;
	padding: 0.5em 0.5em 0;
	margin-block: 1em;
}

.details summary {
	margin: -0.5em -0.5em 0;
	padding: 0.5em;
	cursor: pointer;
}

.details summary span {
	font-weight: bold;
}

.details > div {
	max-height: 60vh;
	overflow-y: auto;
}

.details[open] {
	padding: 0.5em;
}

.details[open] summary {
	border-bottom: 1px solid #aaa;
	margin-bottom: 0.5em;
}

#mod-table td {
	outline: solid thin #aaa;
	padding-inline: 0.25em;
}

.button {
	font-weight: bold;
	border: 1px solid #aaa;
	display: inline-block;
	padding: 6px 12px;
	cursor: pointer;
	border-radius: 4px;
}