:root {
	--fg: #000;
	--bg: #fff;

	--fg-blue: #0050ff;
	--bg-blue: #ccdcff;

	--data-border: #bbb;
	--data-tr-odd: #f4f4f4;
	--data-th-bg: #e0e0e0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: #f0f0f0;
		--bg: #282828;

		--fg-blue: #61aeff;
		--bg-blue: #284768;

		--data-border: #707070;
		--data-tr-odd: #2f2f2f;
		--data-th-bg: #434343;

		--fg-disable: #484848;
		--bg-disable: #484848;
	}
}

body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: arial,sans-serif;
	margin: 1rem;
}

a, a:hover, a:visited {
	color: var(--fg-blue);
	cursor: pointer;
	text-decoration: none;
}
a:hover {
	background-color: var(--bg-blue);
}

/*********************************************************/

table.data {
	border-collapse: collapse;
}
table.data tr:nth-child(odd) {
	background-color: var(--data-tr-odd);
}
table.data th {
	background-color: var(--data-th-bg);
	font-weight: normal;
	vertical-align: bottom;
}
table.data th,
table.data td {
	border-color: var(--data-border);
	border-style: solid;
	border-width: 1px;
	padding: .2em .6em;
}

table.prop td:nth-child(1) {
	text-align: right;
}

/*********************************************************/

button,
select {
	font-family: inherit;
	font-size: 1rem;
	font-weight: normal;
}

button,
label.button,
label.tab,
select {
	border: 1px solid var(--fg-blue);
	color: var(--fg-blue);
	cursor: pointer;
	padding: .25rem .5rem;
}
label.tab {
	border-radius: 1rem 1rem 0 0;
	padding: .4rem 1rem;
}

button,
label.button,
select {
	background-color: transparent;
	border-radius: .4rem;
}

button:hover,
label.button:hover,
label.tab:hover,
select:hover {
	background-color: var(--bg-blue);
}

button:disabled {
	background-color: transparent;
	border-color: var(--fg-disable);
	color: var(--fg-disable);
	cursor: default;
}

input[type=radio].tab {
	display: none;
}
input[type=radio].tab:checked + label.tab {
	background-color: transparent;
	border-color: var(--fg);
	color: var(--fg);
}

.tab-bodies>div {
	display: none;
}