:root{
	/* sat 73 */
	--test0: #b3b3b3;
	--test1: #dc9d9d;
	--test2: #dcb29d;
	--test3: #dcc79d;
	--test4: #dcdc9d;
	--test5: #c7dc9d;
	--test6: #b2dc9d;
	--test7: #9ddc9d;
	--test8: #9ddcb2;
	--test9: #9ddcc7;
	--test10: #9ddcdc;
	--test11: #9dc7dc;
	--test12: #9db2dc;
	--test13: #9d9ddc;
	--test14: #b29ddc;
	--test15: #c79ddc;
	--test16: #dc9ddc;
	--test17: #dc9dc7;
	--test18: #dc9db2;
	--test99: #808080;
	--testbad: #ff8787; /* sat 120 */
	/* sat 90 */
	--bg0: #161b22;
	--bg1: #f09b9b;
	--bg2: #f0b89b;
	--bg3: #f0d49b;
	--bg4: #f0f09b;
	--bg5: #d4f09b;
	--bg6: #b8f09b;
	--bg7: #9bf09b;
	--bg8: #9bf0b8;
	--bg9: #9bf0d4;
	--bg10: #9bf0f0;
	--bg11: #9bd4f0;
	--bg12: #9bb8f0;
	--bg13: #9b9bf0;
	--bg14: #b89bf0;
	--bg15: #d49bf0;
	--bg16: #f09bf0;
	--bg17: #f09bd4;
	--bg18: #f09bb8;
	--bg99: #808080;

	--jstring: #ff7de9;
	--jboolean: #86de74;
	--jnull: #939395;
	--jkey: #75bfff;
}

#modaloverlay {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 990;
	display: none;
}
#overlay {
	position: fixed;
	top: 50%;
	left: 50%;
	right: 0;
	bottom: 0;
	transform: translate(-50%, -50%);
	display: none;
	width: 700px;
	min-width: 400px;
	height: 85%;
	overflow-y:scroll;
	border: 2px solid var(--test0);
	background-color: var(--bg0);
	z-index: 1000;
	overscroll-behavior: contain;
}
#overlaybuttons {
	position: fixed;
	right: 25px;
	z-index: 1010;
}

/* JSON */
.string {color: var(--jstring);}
.boolean, .number {color: var(--jboolean);}
.null {color: var(--jnull);}
.key {color: var(--jkey);}

body {background-color: #161b22; color: var(--test0);}
h2 {color: white; font-size: 14px; text-align: center; margin-top: inherit;}
code {
	background: rgba(142, 142, 145, 0.25) !important;
	padding: 2px 6px; /* top+bottom | left+ right */
}

a {color: black; text-decoration: none;}
a.blue {color: var(--test12); text-decoration: none;}
a.return {color: var(--test12); text-decoration: none;  font-size: 14px; line-height: 1.2em}
.no_color {color: var(--test0);}
.good {color: var(--test7);}
.bad {color: var(--testbad);}
.blue {color: var(--test12);}
.faint {color: var(--test99);}
.hidden {display: none;}
.small {font-size: 10px;}
.offscreen {
	position: absolute !important;
	top: -2000% !important;
	left: 0px !important;
}
.indent {
	display:inline-block;
	margin-left:20px;
}

.bold {font-weight: bold;}
.mono {font-family: monospace, "Courier New"; font-size: 12px;}
.strike {text-decoration: line-through;}
.spaces {white-space: pre-wrap;}
.perf {font-family: monospace, "Courier New"; font-size: 12px; white-space: pre-wrap;}

.cursive {font-family: cursive;}
.emoji {font-family: emoji;}
.fangsong {font-family: fangsong;}
.fantasy {font-family: fantasy;}
.math {font-family: math;}
.monospace {font-family: monospace;}
.none {font-family: none;}
.sans-serif {font-family: sans-serif;}
.serif {font-family: serif;}
.system-ui {font-family: system-ui;}
.ui-monospace {font-family: ui-monospace;}
.ui-rounded {font-family: ui-rounded;}
.ui-sans-serif {font-family: ui-sans-serif;}
.ui-serif {font-family: ui-serif;}

.normalized {
	font-family: none !important;
	font-size: initial !important; /* testing */
	font-style: normal !important;
	font-variant: normal !important;
	font-weight: normal !important;
	line-height: normal !important;
	text-transform: none !important;
	text-align: left !important;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: normal !important;
	word-break: normal !important;
	word-spacing: normal !important;
}

/* run/re-run, click here */
.btn {background-color: #161b22;
	display: inline-block;
	font-size: 12px;
	font-family: monospace, "Courier New";
	font-weight: bold;
	padding-left: 6px;
	padding-right: 6px;
	cursor: pointer;
}
.btnfirst {background-color: #161b22;
	display: inline-block;
	font-size: 12px;
	font-family: monospace, "Courier New";
	font-weight: bold;
	padding-left: 0px;
	padding-right: 6px;
	cursor: pointer;
}
.btnb {cursor: pointer;}
/* item metrics/counts: dotted, no padding, normal */
.btnc {
	font-weight: normal;
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}
/* section metrics/counts: underline, padded, bold */
.btns {
	font-weight: bold;
	text-decoration: underline;
	padding-left: 8px;
	padding-right: 8px;
	cursor: pointer;
}
.btn0 {border-color: var(--test0); color: var(--test0);}
.btn1, .s1 {border-color: var(--test1); color: var(--test1);}
.btn2, .s2 {border-color: var(--test2); color: var(--test2);}
.btn3, .s3 {border-color: var(--test3); color: var(--test3);}
.btn4, .s4 {border-color: var(--test4); color: var(--test4);}
.btn5, .s5 {border-color: var(--test5); color: var(--test5);}
.btn6, .s6 {border-color: var(--test6); color: var(--test6);}
.btn7, .s7 {border-color: var(--test7); color: var(--test7);}
.btn8, .s8 {border-color: var(--test8); color: var(--test8);}
.btn9, .s9 {border-color: var(--test9); color: var(--test9);}
.btn10, .s10 {border-color: var(--test10); color: var(--test10);}
.btn11, .s11 {border-color: var(--test11); color: var(--test11);}
.btn12, .s12 {border-color: var(--test12); color: var(--test12);}
.btn13, .s13 {border-color: var(--test13); color: var(--test13);}
.btn14, .s14 {border-color: var(--test14); color: var(--test14);}
.btn15, .s15 {border-color: var(--test15); color: var(--test15);}
.btn16, .s16 {border-color: var(--test16); color: var(--test16);}
.btn17, .s17 {border-color: var(--test17); color: var(--test17);}
.btn18, .s18 {border-color: var(--test18); color: var(--test18);}
.s99 {color: var(--test99);}
.btnbad, .sbad {border-color: var(--testbad); color: var(--testbad);}
.btn-left {float: left; position: relative; left: -10px; top: 0px;}
.btn-right {float: right; position: relative; right: 10px; top: 0px; text-align: right;}

/* tooltips */
.icon {font-size: 10px; font-weight: bold; color: var(--test0); cursor: default;}
.ttip {position: relative; display: inline-block; border-bottom: 1px dotted black; color: white;}
.ttip .ttxt {
	visibility: hidden; width: 150px; background-color: var(--test0); color: black; text-align: center;
	border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -12px; left: 130%;}
.ttip .ttxtb {
	visibility: hidden; width: 210px; background-color: var(--test0); color: black; text-align: center;
	border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -12px; left: 130%;}
.ttip .ttxtx {
	visibility: hidden; width: 250px; background-color: var(--test0); color: black; text-align: center;
	border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -12px; left: 130%;}
.ttip:hover .ttxt, .ttip:hover .ttxtb, .ttip:hover .ttxtx {visibility: visible;}
.ttip .ttxt::after, .ttip .ttxtb::after, .ttip .ttxtx::after {
	content: " "; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px;
	border-style: solid; border-color: transparent var(--test0) transparent transparent;}

/* table nav */
div.nav-title {position: relative;}
div.nav-down {position: absolute; right: 20px; top: 0px; width: 100px; text-align: right;}
div.nav-up {position: absolute; left: 20px; top: 0px; width: 100px; text-align: left;}

/* tables */
table {
	border-collapse: collapse;
	margin: 0 auto 10px auto;
	font-size: 12px;
}
tbody:before {content: "-"; display: block; line-height: 1em; color: transparent;}
td {padding-top: 2px; padding-bottom: 3px;}
th {color: black; font-size: 14px; padding: 3px 0;}

table td:first-child { text-align: right; vertical-align: top;}
table td.blurb {text-align: center; line-height: 1.5em;}
table td.center {text-align: center;}
table td.intro {text-align: left; line-height: 1.5em; padding-bottom: 10px;}
table td.showhide {text-align: center; padding-top: 7px; padding-bottom: 7px;}
table td.padr {padding-right: 10px;}
table td.bottom {vertical-align: bottom;}

#tb1 th {background-color: var(--bg1);}
#tb2 th {background-color: var(--bg2);}
#tb3 th {background-color: var(--bg3);}
#tb4 th {background-color: var(--bg4);}
#tb5 th {background-color: var(--bg5);}
#tb6 th {background-color: var(--bg6);}
#tb7 th {background-color: var(--bg7);}
#tb8 th {background-color: var(--bg8);}
#tb9 th {background-color: var(--bg9);}
#tb10 th {background-color: var(--bg10);}
#tb11 th {background-color: var(--bg11);}
#tb12 th {background-color: var(--bg12);}
#tb13 th {background-color: var(--bg13);}
#tb14 th {background-color: var(--bg14);}
#tb15 th {background-color: var(--bg15);}
#tb16 th {background-color: var(--bg16);}
#tb17 th {background-color: var(--bg17);}
#tb18 th {background-color: var(--bg18);}
#tb99 th {background-color: var(--bg99);}

#tb1 td:first-child {color: var(--test1);}
#tb2 td:first-child {color: var(--test2);}
#tb3 td:first-child {color: var(--test3);}
#tb4 td:first-child {color: var(--test4);}
#tb5 td:first-child {color: var(--test5);}
#tb6 td:first-child {color: var(--test6);}
#tb7 td:first-child {color: var(--test7);}
#tb8 td:first-child {color: var(--test8);}
#tb9 td:first-child {color: var(--test9);}
#tb10 td:first-child {color: var(--test10);}
#tb11 td:first-child {color: var(--test11);}
#tb12 td:first-child {color: var(--test12);}
#tb13 td:first-child {color: var(--test13);}
#tb14 td:first-child {color: var(--test14);}
#tb15 td:first-child {color: var(--test15);}
#tb16 td:first-child {color: var(--test16);}
#tb17 td:first-child {color: var(--test17);}
#tb18 td:first-child {color: var(--test18);}
#tb99 td:first-child {color: var(--test99);}

#tb1 hr {color: var(--test1);}
#tb2 hr {color: var(--test2);}
#tb3 hr {color: var(--test3);}
#tb4 hr {color: var(--test4);}
#tb5 hr {color: var(--test5);}
#tb6 hr {color: var(--test6);}
#tb7 hr {color: var(--test7);}
#tb8 hr {color: var(--test8);}
#tb9 hr {color: var(--test9);}
#tb10 hr {color: var(--test10);}
#tb11 hr {color: var(--test11);}
#tb12 hr {color: var(--test12);}
#tb13 hr {color: var(--test13);}
#tb14 hr {color: var(--test14);}
#tb15 hr {color: var(--test15);}
#tb16 hr {color: var(--test16);}
#tb17 hr {color: var(--test17);}
#tb18 hr {color: var(--test18);}

#tb4 hr {color: var(--test4);}
#tb18 hr {color: var(--test18);}

#element-fp {
	position: fixed;
	top: 0;
	left: 0;
	font-family: none;
	font-size: initial;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: normal;
	text-transform: none;
	text-align: left;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	/* domrect */
	/*transform: scale(1.1234567);*/
	transform: skew(1.787542deg,3.263901deg);
}
#element-fp .unstyled {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.skew {
	transform: skew(1.787542deg,3.263901deg);
}