:root {
	--font-size: 18pt;

	--color-gray-1: #000;
	--color-gray-2: #202020;
	--color-gray-3: #404040;
	--color-gray-4: #606060;
	--color-gray-5: #808080;
	--color-gray-6: #a0a0a0;
	--color-gray-7: #c0c0c0;
	--color-gray-8: #e0e0e0;
	--color-gray-9: #fff;

	--color-red: #ee1d25;
	--color-orange: #f7941d;
	--color-yellow: #ffea01;
	--color-green: #03b169;
	--color-cyan: #00b9f2;
	--color-blue: #3e5dab;
	--color-purple: #bd198e;

	--color-l-red: #f79679;
	--color-l-orange: #fdc589;
	--color-l-yellow: #fff7c0;
	--color-l-green: #99d2ad;
	--color-l-cyan: #8bd7f8;
	--color-l-blue: #959dce;
	--color-l-purple: #d893c0;

	--color-d-red: #8b0507;
	--color-d-orange: #905504;
	--color-d-yellow: #ad8d03;
	--color-d-green: #00652e;
	--color-d-cyan: #006f92;
	--color-d-blue: #073780;
	--color-d-purple: #710053;

	--color-background: var(--color-gray-9);
	--color-background-2: var(--color-gray-8);
	--color-background-3: var(--color-gray-6);
	--color-text: var(--color-gray-1);
	--color-text-2: var(--color-gray-3);
	--color-text-3: var(--color-gray-5);
	--color-rule: var(--color-text);
	--color-rule-2: var(--color-text-2);
	--color-rule-3: var(--color-text-3);
	--color-link: var(--color-d-blue);
	--color-vlink: var(--color-d-purple);

	--filter-mono-svg: none;
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-background: var(--color-gray-1);
		--color-background-2: var(--color-gray-2);
		--color-background-3: var(--color-gray-4);
		--color-text: var(--color-gray-9);
		--color-text-2: var(--color-gray-7);
		--color-text-3: var(--color-gray-5);
		--color-link: var(--color-l-blue);
		--color-vlink: var(--color-l-purple);
		--filter-mono-svg: invert(100%);
	}
	.textColoredSVG {
		filter: invert(100%);
	}
}

:root {
	font-family: sans-serif;
	font-size: var(--font-size);
	background-color: var(--color-background);
	color: var(--color-text);
}

a { color: var(--color-link); }
a:visited { color: var(--color-vlink); }

input:not([type]),
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="result"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea
{
	background-color: var(--color-background);
	color: var(--color-text);
	border: 1px solid var(--color-rule-2);
	font-size: var(--font-size);
	padding: 0.25em 0.5em;
}
input::placeholder,
textarea::placeholder {
	color: var(--color-text-3);
}
input[type="number"] {
	text-align: right;
}
input[type="button"],
input[type="reset"],
input[type="submit"],
button,
select {
	font-size: var(--font-size);
}

h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }
h5 { font-size: 1em; font-style: italic; }

.small {
	font-weight: 0.8em;
}

.noscript {
	position: fixed;
	left: 0; top: 0;
	width: 100vw; height: 100vh;
	box-sizing: border-box;
	padding: 4em 1.5em;
	background-color: var(--color-l-yellow);
	color: var(--color-d-red);
	text-align: center;
	z-index: 10;
}

tr.sticky th,
tr.sticky td {
	position: sticky;
	top: 0;
}

td.col-left { text-align: left; }
td.col-center { text-align: center; }
td.col-right { text-align: right; }

.tabbar { background-color: var(--color-background-3); }
.tab {
	background-color: var(--color-background-2);
	border-width: 1px 1px 0 1px;
	border-style: solid solid none solid;
	border-color: var(--color-rule-2);
	padding: 0.15em 0.5em;
	box-sizing: border-box;
	display: inline-block;
}
.tab input[type="radio"] {
	position: relative;
	width: 0; height: 0;
	padding: 0; margin: 0;
	opacity: 0;
}
.tab.selected {
	background-color: var(--color-background);
	font-weight: bold;
}
.tabbody:not(.selected) { display: none !important; }

.trunc {
	text-overflow: ellipsis;
}

.toastcontainer {
	position: fixed;
	left: 0; bottom: 0;
	width: 300px;
}
.toast {
	background-color: var(--color-background);
	color: var(--color-text);
	border-width: 1px 1px 0 0;
	border-style: solid;
	border-color: var(--color-rule-2);
	padding: 1em;
}
.toast:last-child {
	border-top-right-radius: 0.5em;
}

button.copy_button {
	background-color: transparent;
	border: none;
}
.copy_button img {
	width: 1em; height: 1em;
}