@charset "utf-8";
/* Project Bella Simulation
	Greg Mote 2021-11-10 */

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

/* colors */
:root {
	--caption: rgba(180,180,180,1);
	--fieldback: rgba(255,255,255,0.3);
	--available: rgba(180,180,180,1);
	--none: rgba(100,100,100,1);
	--running: rgba(42,167,223,1);
	--completed: rgba(140,197,64,1);
	--prompt-text: rgba(255,255,255,1);
	--prompt-back: rgba(255,255,255,1);
	--background: rgba(0,0,0,1);
	--background-bottom: rgba(255,255,255,1);
	--block-tint: rgba(0,0,0,0.2);
	--button: rgba(255,255,255,1);
	--button-hover: rgba(255,255,255,0.3);
	--button-tint: rgba(0,0,0,0.2);
	--button-tint-hover: rgba(0,0,0,0.4);
	--field-label-text: rgba(0,0,0,0.3);
	--touchy: rgba(100, 0, 100, 1);
	--touchy-dark: rgba(10, 0, 10, 1);
	--touchy-light: rgba(200, 100, 200, 1);
	--red-alert: rgba(237,32,39,1);
	--safety-yellow: rgba(253,194,20,1);
	--go-green: rgba(64,128,64,1);
}
#status, .status {
	--baselighter: rgba(194,227,242,1);
	--baselight: rgba(149,211,239,1);
	--base: rgba(42,167,223,1);
	--basedark: rgba(24,119,161,1);
	--basedarker: rgba(45,94,115,1);
	--detail-text: var(--baselight);
	--remaining-text: rgba(255,255,255,1);
	--prompt-text: rgba(255,255,255,1);
	--prompt-text-dim: rgba(255,255,255,0.3);
	--background-top: rgba(0,70,116,1);
	--background-bottom: rgba(0,70,116,0);
	--button: rgba(194,227,242,1);
	--button-hover: rgba(194,227,242,0.3);
	--button-tint: rgba(45,94,115,0.2);
	--button-tint-hover: rgba(45,94,115,0.4);
}
#home, .home, #admin, .admin, #info, .info, #call, .call {
	--baselight: rgba(198,198,198,1);
	--baselight: rgba(140,140,140,1);
	--base: rgba(170,170,170,1);
	--basedark: rgba(115,115,115,1);
	--basedarker: rgba(90,90,90,1);
	--prompt-text: var(--basedarker);
	--background-top: var(--basedark);
	--button: var(--baselighter);
	--button-hover: var(--baselighter);
	--button-tint: rgba(90,90,90,0.2);
	--button-tint-hover: rgba(90,90,90,0.4);
}
#newtest, .newtest, #runningtest, .runningtest {
	--baselighter: rgba(248,253,244,1);
	--baselight: rgba(194,227,242,1);
	--base: rgba(42,167,223,1);
	--basedark: rgba(24,119,161,1);
	--basedarker: rgba(45,94,115,1);
	--detail-text: var(--basedarker);
	--prompt-text: var(--basedarker);
	--background-top: var(--basedark);
	--button: var(--baselighter);
	--button-hover: var(--baselighter);
	--button-tint: rgba(45,94,115,0.2);
	--button-tint-hover: rgba(45,94,115,0.4);
}
#results, .results, #result, .result, footer .completed, .module.completed {
	--baselighter: rgba(240,250,232,1);
	--baselight: rgba(225,239,209,1);
	--base: rgba(140,197,64,1);
	--basedark: rgba(99,154,65,1);
	--basedarker: rgba(73,106,49,1);
	--result-border: rgba(73,106,49,0.3);
	--result-back: rgba(255,255,255,0.9);
	--detail-text: var(--basedarker);
	--prompt-text: var(--basedarker);
	--background-top: var(--basedark);
	--button: var(--baselighter);
	--button-hover: var(--baselighter);
	--button-tint: rgba(73,106,49,0.2);
	--button-tint-hover: rgba(73,106,49,0.4);
	--postive: rgba(180,0,0,1);
	--negative: rgba(0,180,0,1);
}
#result.haserrors, #status .haserrors {
	--baselighter: rgba(255,247,197,1);
	--baselight: rgba(254,239,138,1);
	--base: rgba(253,225,20,1);
	--basedark: rgba(167,150,13,1);
	--basedarker: rgba(111,100,9,1);
	--detail-text: var(--basedarker);
	--background-top: var(--basedark);
	--button: var(--baselighter);
	--button-hover: var(--baselighter);
	--button-tint: rgba(111,100,9,0.2);
	--button-tint-hover: rgba(111,100,9,0.4);
}
#qc, .qc {
	--baselighter: rgba(255,242,226,1);
	--baselight: rgba(255,228,196,1);
	--base: rgba(247,148,32,1);
	--basedark: rgba(203,112,40,1);
	--basedarker: rgba(148,89,35,1);
	--prompt-text: var(--basedarker);
	--background-top: var(--basedark);
	--button: var(--baselighter);
	--button-hover: var(--baselighter);
	--button-tint: rgba(148,89,35,0.2);
	--button-tint-hover: rgba(148,89,35,0.4);
}
#moduleinfo, .moduleinfo {
	--baselighter: rgba(255,242,226,1);
	--baselight: rgba(255,228,196,1);
	--base: rgba(247,148,32,1);
	--basedark: rgba(203,112,40,1);
	--basedarker: rgba(148,89,35,1);
	--prompt-text: var(--basedarker);
	--background-top: var(--basedark);
	--button: var(--baselighter);
	--button-hover: var(--baselighter);
	--button-tint: rgba(148,89,35,0.2);
	--button-tint-hover: rgba(148,89,35,0.4);
}

/* global */
html { background-color: var(--background); }
body {
	font-family: Helvetica, sans-serif;
	font-size: min(1vh, 1.4vw);
	-webkit-text-size-adjust: none; text-size-adjust: none;
	overflow: hidden;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
[href], [onclick] { cursor: pointer; }
form { display: inline; }
input, select, textarea, button {
	font-family: inherit; font-size: inherit; font-weight: inherit;
	background: none;
	border-radius: 0;
}
input, textarea, button { border: none; padding: 0; width: 100%; }
input, textarea, select { background-color: var(--fieldback); }
select {
	padding-left: 1em;
	border: none; border-radius: 0;
	background-color: var(--fieldback);
	color: currentColor;
	-moz-appearance: none; -webkit-appearance: none; appearance: none;
}
input[type="submit"], button { color: var(--button); background: none; }
input[type="submit"]:disabled, button:disabled { opacity: 0.25; }
input[type="submit"]:hover, button:hover { color: var(--basedark); }
/* input[type="checkbox"] { width: auto; } */
input[type="checkbox"] {
	position: relative;
	width: 1em;
	height: 1em;
	-webkit-appearance: initial; appearance: initial;
	border-radius: 1em;
	outline: none;
	cursor: pointer;
	background: none;
}
input[type="checkbox"]:after {
	position: absolute;
	top: 0;
	display: block;
	width: 1.1em;
	height: 1.1em;
	border-radius: 0.3em;
	text-align: center;
	line-height: 1.1em;
	color: white;
	box-sizing: border-box;
	margin: -0.1em;
}
input[type="checkbox"]:after {
	content: "✔︎";
	color: rgba(255, 255, 255, 0.2);
	font-size: 110%;
	border: inset 0.125em white;
	border-style: solid;
	background: none;
}
input[type="checkbox"]:checked:after {
	content: "✔︎";
	color: white;
	background: var(--base);
	border: inset 0.125em rgba(0,0,0,0);
}
input[type="search"] { -webkit-appearance: textfield; appearance: textfield; }
.field:not(.filled) input.keyboard:not(:focus), .field:not(.filled) textarea.keyboard:not(:focus) {
	background-image: url("keyboard.svg");
	background-position: right 0.5em center;
	background-repeat: no-repeat;
	background-size: 1em;
}
label { pointer-events: auto; }
svg { width: 1.5em; height: 1.5em; fill: currentColor; }
#hidden { display: none; }
sup { position: relative; top: -0.9em; vertical-align: baseline; font-size: 50%; }
em { font-weight: bold; }
i { font-style: italic; }
.sep { opacity: 0.5; font-weight: normal; }
.ampm { font-size: 50%; opacity: 0.5; text-transform: uppercase; font-weight: normal; }
footer .ampm, header .ampm { position: absolute; padding-top: 0.55em; padding-left: 0.1em; }

/* placeholder */
::placeholder { color: var(--basedarker); opacity: 0.5; }
select:invalid { color: var(--caption); }
[placeholder]:focus::-webkit-input-placeholder { color: var(--baselight); }

/* table */
table { width: 100%; text-align: left; }
thead { height: 2em; }
tbody { }
tbody tr:nth-child(2n) { background: var(--baselighter); }
tbody tr:hover, tbody tr:nth-child(2n):hover { background: var(--baselight); }
th { height: 1.5em !important; vertical-align: bottom; color: var(--basedark); font-weight: bold; }
th.selected { color: var(--baselighter); background-color: var(--basedark); }
thead { z-index: 1; position: sticky; top: 0; background: var(--baselighter); }
thead th:hover { background: var(--base); color: white; }
th, td { padding: 0.3em; vertical-align: middle; }
th:first-child, td:first-child { padding-left: 1em; min-width: 1em; }
td { max-width: 15em; white-space: normal; }
tr td:nth-child(7) { min-width: 10em; }
th:last-child, td:last-child { overflow-x: hidden; }

/* instrument */
#instrument {
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	width: 69.12em; height: 93.12em;
	margin: auto;
	box-sizing: border-box;
	border-radius: 3.4em; border: inset 2.47em rgb(160,160,160); border-style: solid;
	border-top-color: rgba(220,220,220,1); border-bottom-color: rgba(120,120,120,1);
	background: black;
}
#instrument:after {
	content: '';
	position: absolute; top: -0.47em; bottom: -0.47em; left: -0.47em; right: -0.47em;
	border: inset 0.47em rgb(200,200,200); border-radius: 1.4em; border-style: solid;
	pointer-events: none;
}
#instrument > .panel, #instrument > .module > .door {
	position: absolute; left: 0; right: 0;
	margin: 0.67em;
	border-radius: 0.25em;
	background: rgba(30,30,30,1);
}
#instrument .reader { position: absolute; width: 1.4em; height: 4.65em; background: rgba(20,20,20,1); border-radius: 0.5em; }
#instrument .reader.illuminated::after {
	content: "";
	position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 1em; height: 1em;
	margin: 0 auto;
	border-radius: 1em;
	background-color: white;
	box-shadow: 0 0 1.5em 0.5em white;
}
#instrument .reader .buttons { opacity: 0; }
#instrument .reader.illuminated .buttons {
	opacity: 1;
	position: absolute; top: -1.5em; bottom: -10em; left: 1.2em; right: -12em;
	text-align: center;
}
#instrument .reader.illuminated .buttons .button {
	display: inline-block;
	width: 5em;
	padding: 0.2em;
	margin-bottom: 0.2em;
	color: var(--touchy-light);
	font-size: 1.8em;
	border-radius: 0.5em; border: 0.2em solid var(--touchy);
	background-color: var(--touchy-dark);
	text-align: center;
}
#instrument .reader.illuminated .buttons .button.scanned {
	background: var(--touchy);
	color: var(--touchy-dark);
	border: 0.2em solid var(--touchy);
}
#instrument .buttons .button:hover {
	background: var(--touchy) !important;
	color: white !important;
	border: 0.2em solid var(--touchy-light) !important;
}
#instrument > .panel#display { right: 0; height: 41.4888em; }
#instrument > .panel#display > .display {
	z-index: 2;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	width: 58.19em; height: 36.37em;
	margin: auto;
	background: rgba(0,0,0,1);
	overflow: hidden;
}
#instrument > .module { position: absolute; bottom: 14.16em; height: 31.19em; }
#instrument > #module1 { left: 0; }
#instrument > #module2 { left: 15.82em; }
#instrument > #module3 { left: 31.64em; }
#instrument > #module4 { left: 47.46em; }
#instrument > .module > .indicator {
	position: absolute; top: 0.38em; left: 1.24em; right: 1.24em;
	width: 14.23em; height: 1.17em;
	border-radius: 1em;
	background: rgba(0,0,0,1);
}
#instrument > .module > .indicator.active, #instrument > .module > .indicator.load {
	background: var(--running); box-shadow: 0 0 1em var(--running);
}
#instrument > .module > .indicator.load { animation: blinker 1s ease-in-out infinite alternate; }
#instrument > .module > .door { width: 15.37em; height: 27.94em; bottom: 0; }
#instrument > .module > .door.opened { height: 10em; background: rgba(25,25,25,1); box-shadow: 0 -0.5em 0 rgba(60,60,60,1); }
#instrument > .module > .door.locked { background: linear-gradient(var(--running) -40%, rgba(35,35,35,1) 10%); }
#instrument .door .buttons { position: absolute; top: 1em; left: 0; right: 0; text-align: center; }
#instrument .door .buttons .button {
	display: inline-block;
	width: 5em;
	padding: 0.2em;
	margin-bottom: 0.2em;
	border-radius: 0.5em;
	border: 0.2em solid var(--touchy);
	font-size: 1.8em;
	text-align: center;
	color: var(--touchy-light);
	background-color: var(--touchy-dark);
}
#instrument .door.opened .buttons .button.open_door { display: none; }
#instrument .door:not(.opened) .buttons .button.close_door { display: none; }
#instrument .door.locked .buttons .button { display: none; }
#instrument > .module > .reader { left: 1em; top: 5em; }
#instrument > .module > .cartridge {
	position: absolute; top: 3em; bottom: 8em; left: 0.67em; width: 15.37em;
	background-image: url("cart.png"); background-repeat: no-repeat; background-size: cover; background-position: bottom center;
	pointer-events: none;
}
#instrument > .module.none > .cartridge { background-image: url("dummy.svg") !important; bottom: 11em; opacity: 0.4; }
#instrument > .module > .cartridge:not(.loaded) { background-image: none; }
#instrument > .module > .cartridge .button { display: none; }
#instrument > .module > .cartridge .buttons { display: none; }
#instrument > .module > .cartridge.loadable .buttons, #instrument > .module > .cartridge.loaded .buttons { display: block; }
#instrument > .module > .cartridge.loadable .button.load_cart { display: inline-block; }
#instrument > .module > .cartridge.loaded { }
#instrument > .module > .cartridge.loaded .button.unload_cart { display: inline-block; }
#instrument .cartridge .testname { position: absolute; top: 4.1em; left: 2.6em; right: 2.6em; font-size: 1.4em; }
#instrument .cartridge .buttons { position: absolute; bottom: 3.5em; left: 0; right: 0; text-align: center; }
#instrument .cartridge .buttons .button {
	display: none;
	width: 5em;
	padding: 0.2em;
	margin-bottom: 0.2em;
	border-radius: 0.5em; border: 0.2em solid var(--touchy);
	color: var(--touchy-light);
	font-size: 1.8em;
	background-color: var(--touchy-dark);
	text-align: center;
	pointer-events: auto;
}
#instrument > .panel#lower { bottom: 0; height: 13.47em; }
#instrument > .panel#lower > .display {
	z-index: 1;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 8em; width: 8em;
	margin: auto;
	border-radius: 0.5em;
	background: rgba(20,20,20,1);
	overflow: hidden;
	background-image: url("standby.svg"); background-repeat: no-repeat; background-size: cover; background-position: bottom center;
}
#instrument.awake > .panel#lower > .display { background-image: url("logo.svg"); }
#instrument > .panel#lower > .reader { left: 39.55em; bottom: 4.2em; }
#instrument .panel .buttons { z-index: 1 !important; }
#instrument.hidebuttons .buttons { opacity: 0 !important; }

/* blow it up */
.display.fullview {
	position: fixed !important;
	height: 100% !important; width: 100% !important;
	margin: 0 !important;
	font-size: 2.6vh;
}
.display.fullview footer .completed, .display.fullview footer .running { padding-top: 20.6em; }

/* header */
header {
	z-index: 5;
	position: absolute; top: 0; left: 0; right: 0; height: 2.5em;
	vertical-align: middle;
	color: var(--button);
	background: var(--block-tint);
	font-size: 1.5em;
	pointer-events: none;
}
header svg { height: 1.5em; overflow: visible; }
#home-button, .callinfo, #header-date, #header-time {
	position: absolute; top: 0; height: 2.5em;
	vertical-align: middle;
	display: flex; align-items: center; justify-content: center;
	pointer-events: auto;
}
#header-date, #header-time { width: 5em; display: flex; flex-direction: column; }
#header-date { left: 2.5em; }
#header-time { right: 5em; }
#header-date span, #header-time span { height: 1em; opacity: 0.6; }
#header-date svg, #header-time svg { height: 2em; margin-top: -0.5em; margin-bottom: -0.5em; opacity: 1; }
#home-button, .callinfo {
	width: 2.1em; height: 2.1em;
	margin: 0.2em;
	border-radius: 0.3em;
	background: var(--button-tint);
}
#home-button:hover, .callinfo:hover { background: var(--button-tint-hover); }
#home-button { left: 0; }
.callinfo { }
#info-button { right: 0; }
#call-button { right: 2.3em; }

section { position: absolute; top: 0; left: 0; right: 0; bottom: 0; white-space: nowrap; }

/* background (status) */
section#background {}
#background article {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	background-image: url("swoosh.svg"), linear-gradient(var(--background-top), var(--background-bottom));
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
}

/* panels */
section#panels { pointer-events: none; z-index: 5; }
#panels article {
	opacity: 0;
	z-index: 2;
	position: absolute; top: -110vh; left: 0.2em;
	width: calc(100% - 0.4em); height: calc(100% - 7.5em);
	vertical-align: top;
	border-radius: 1.8em;
	transition: top 0.2s ease-in-out, opacity 0.5s ease-in-out;
}
#panels article.active { top: 4em; opacity: 1; }

/* top center prompt */
.prompt {
	z-index: 5;
	position: relative; top: 0;
	display: flex; align-items: center; justify-content: center;
	text-align: center;
	margin-left: 7.5em; margin-right: 9.5em;
	padding: 0.4em; padding-top: 0.5em;
	border-radius: 1.2em; border-top-left-radius: 0; border-top-right-radius: 0;
	color: var(--prompt-text); background-color: var(--button-tint);
	font-size: 1.5em; font-weight: bold; white-space: normal; line-height: 150%;
	transition: top 0.2s ease-in-out, border-radius 0.1s ease-in-out, margin 0.1s ease-in-out, font-size 0.1s ease-in-out;
}
.prompt[info] {
	pointer-events: auto; cursor: pointer;
}
.prompt[info]:before {
	content: '';
	position: absolute; left: 0.6em; width: 1em; height: 1em;
	display: inline-block;
	margin: 0 0.2em; padding: 0 0.2em;
	background-color: currentColor;
	mask-type: alpha;
	-webkit-mask-image: url("info.svg"); mask-image: url("info.svg");
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	box-sizing: border-box;
	overflow: visible;
}
.wide1 .prompt[info]:before { left: 0em; }
.prompt.welcome {
	top: 30%; flex-direction: column; margin-left: 3em; margin-right: 3em; padding: 1em; border-radius: 1.2em;
	font-size: 200%; background-color: rgba(0,0,0,0.3);
}
.prompt.welcome img { width: calc(100% - 2em); padding: 1em; }
.prompt.welcome .welcome_hello { font-family: 'Lobster', cursive; color: var(--running); font-size: 250%; line-height: 140%; }
.prompt.redalert { background-color: var(--red-alert) !important; color: var(--prompt-text) !important; }
.prompt.welcome .tighten1 { letter-spacing: -0.1em; }
.prompt.welcome .tighten2 { letter-spacing: -0.05em; }
#status.module0 .prompt,
#status.module1 .prompt,
#status.module2 .prompt,
#status.module3 .prompt,
#status.module4 .prompt { color: var(--prompt-text-dim); background: none; opacity: 0.6; }
#panels .prompt {
	background-color: var(--prompt-back);
	margin: 0.2em; margin-left: 4em; margin-right: 4em;
	border-top-left-radius: 1.2em; border-top-right-radius: 1.2em;
	padding-top: 0.3em;
}

/* pane */
.pane {
	display: flex; flex-direction: row; align-items: center;
	position: absolute; top: 1.5em; bottom: 2.5em; left: 0; right: 0;
	overflow: hidden;
}
.pane .name { flex-grow: 1; }
#panels .pane { font-size: 1.4em; }

/* fields */
.field { position: relative; }
.focus {}
.focus svg { fill: var(--basedark); }
.focus label { color: var(--basedark) !important; }
.field label {
	display: none;
	position: absolute; top: 0; left: 0; right: 0;
	color: var(--detail-text);
	text-align: center;
	opacity: 0.5;
}
.field input, .field textarea {
	width: 12em;
	border-radius: 0.5em; padding: 0.2em;
	box-shadow: 0 0 0.5em var(--baselight) inset;
	text-align: left;
}
.field select { width: 100%; text-align: left; }
.field svg { flex-shrink: 0; }
.field .overlay { position: absolute; height: 1em; width: 1em; pointer-events: none; }
.wide-button { padding: 0 !important; height: 3em; }
.wide-button input, .wide-button textarea { text-align: center; padding: 1em; }

/* top and bottom buttons */
.top-buttons, .bottom-buttons, .more-top-buttons {
	z-index: 1;
	position: absolute; left: 0; right: 0; height: 2.5em;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	pointer-events: none;
	font-size: 1.5em;
}
.top-buttons, .bottom-buttons, .more-top-buttons { color: var(--button); }
.more-top-buttons { justify-content: center; height: 2em; }
.more-top-buttons a { padding: 0.1em 0.6em 0.1em 0.3em; margin: 0 0.3em; border-radius: 1em; background: var(--button-tint); }
.more-top-buttons a:hover { background: var(--button-tint-hover); }
.more-top-buttons a svg { padding-left: 0.2em; padding-right: 0.4em; }
.top-buttons input, .bottom-buttons input, .more-top-buttons input { pointer-events: auto; vertical-align: middle; }
.top-buttons label, .more-top-buttons label { padding-left: 0.5em; }
.top-buttons a, .bottom-buttons a, .more-top-buttons a { pointer-events: auto; position: relative; }
.bottom-buttons a { margin-right: 0.3em; }
.top-buttons { top: 0;  color: var(--button); }
.bottom-buttons { color: var(--basedarker); bottom: 0; flex-direction: row-reverse; }
.top-buttons svg, .top-buttons span,
	.bottom-buttons svg, .bottom-buttons span,
	.more-top-buttons svg, .more-top-buttons span {
	vertical-align: middle;
}
.top-buttons a span, .more-top-buttons a span, .bottom-buttons a span { opacity: 0.6; font-size: 55%; }
.top-buttons a span {
	position: absolute; top: 3.9em; left: 0; right: 0;
	margin: auto;
	text-align: center; white-space: normal;
}
.bottom-buttons a span {
	position: absolute; bottom: 3.5em; left: -1em; right: -1em;
	margin: auto;
	text-align: center; white-space: normal;
}
.more-top-buttons a span { opacity: 0.6; }
.top-buttons button, .bottom-buttons button, .more-top-buttons button { width: auto; }
.top-buttons.focus button, .bottom-buttons.focus button, .more-top-buttons.focus button { color: var(--basedark); }
.top-buttons svg { margin: 0 0.3em; padding: 0.2em; border-radius: 1em; background: var(--button-tint); }
.top-buttons svg:hover { background: var(--button-tint-hover); }
.bottom-buttons a:hover { background: var(--button-tint-hover); border-radius: 1em; }
.bottom-buttons * { margin-right: 0.25em; padding: 0.1em; }
.more-top-buttons .field label { padding: 0; font-size: 50%; top: 0.1em; }

/* split screen modules */
#panels article.wide1 { width: calc(25% - 0.4em); background: linear-gradient(var(--background-top) 15%, var(--background-bottom) 45%); }
#panels article.wide2 { width: calc(50% - 0.4em); background: linear-gradient(var(--background-top) 15%, var(--background-bottom) 45%); }
#panels article.wide3 { width: calc(75% - 0.4em); }
#panels article.wide1 form { }
#panels article.wide2 form { }
#panels article.wide3 form { }
#panels article.wide4 form { } /* default single */
#panels article.start1 { } /* default single */
#panels article.start2 { left: calc(25% + 0.2em); }
#panels article.start3 { left: calc(50% + 0.2em); }
#panels article.start4 { left: calc(75% + 0.2em); }
#panels article.wide1 .prompt,
	#panels article.wide2 .prompt { margin: 0.2em; border-radius: 1.2em; font-size: 1.3em; padding-left: 2em; }
#panels article.wide3 .prompt { margin: 0.2em; border-radius: 0.8em; }
#panels article.wide1 .top-buttons,
	#panels article.wide2 .top-buttons,
	#panels article.wide3 .top-buttons { top: unset; }
#panels article.wide1 .pane,
	#panels article.wide2 .pane { flex-direction: column; align-items: flex-end; top: 7em; }
#panels article.wide3 .pane { }
#panels article.wide1 .field { width: 100%; height: initial; }
#panels article.wide2 .field {
	flex-direction: row; justify-content: flex-end; flex-wrap: wrap; flex-grow: 1; margin: initial; height: initial;
}
#panels article.wide1 .field:nth-child(2) span:first-child,
	#panels article.wide2 .field:nth-child(2) span:first-child { top: 0.5em; }
#panels article.wide1 .field:nth-child(2) span:nth-child(2),
	#panels article.wide2 .field:nth-child(2) span:nth-child(2) { top: 1.5em; }
#panels article.wide3 .field { }
#panels article.wide1 .field input, #panels article.wide1 .field textarea { width: 20%; }
#panels article.wide2 .field input, #panels article.wide2 .field textarea { width: 12em; margin-right: 1em; }
#panels article.wide2 .field label { margin-right: 1em; }
#panels article.wide3 .field input, #panels article.wide3 .field textarea { width: 20%; }
#panels article.wide1 .field svg { width: 2.5em; height: 2.5em; }
#panels article.wide2 .field svg { width: 3em; height: 1.5em; padding-right: 2em; }
#panels article.wide2 .field.currentstep svg { width: 3em; height: 3em; }
#panels article.wide3 .field svg { width: 5em; height: 5em; }
#panels article.wide1 .field svg.check,
	#panels article.wide2 .field svg.check { width: 1.5em; height: 1.5em; top: 0; right: -1em; }
#panels article.wide3 .field svg.check { }

/* connected module arrow */
#panels article {
	background: linear-gradient(var(--background-top) 5%, var(--background-bottom) 30%);
	box-shadow: 0em 0em 0em 0.2em rgba(0,0,0,0.3);
	pointer-events: auto;
	overflow: hidden;
}
#panels article.module1 { border-bottom-left-radius: 0; }
#panels article.module2.wide2 { border-bottom-right-radius: 0; }
#panels article.module3.start3 { border-bottom-left-radius: 0; }
#panels article.module4 { border-bottom-right-radius: 0; }
.tail { color: var(--basedarker) !important; }
.tail svg { transform: scale(1.5, 0.6) translate(0, -0.6em); }
.tail .loadmessage { display: none; }
.load .tail .loadmessage {
	display: inline;
	position: absolute; top: -1.2em; left: 0; right: 0;
	font-size: 0.5em;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
}
/* .load .tail svg { animation: blinker 1s ease-in-out infinite alternate; } */
#panels article.module1 .tail,
	#panels article.module2 .tail,
	#panels article.module3 .tail,
	#panels article.module4 .tail {
	position: absolute; bottom: -4em; height: 4em; width: 25%;
	background: var(--background-bottom);
	color: var(--basedark);
	font-size: 2.5em;
	text-align: center;
	pointer-events: none;
}
#panels article.wide2 .tail { width: 50%; }
#panels article.start1.module2 .tail { left: 50% !important; }
#panels article.start1.module1 .tail, #panels article.module1 .tail { left: 0; }
	#panels article.start1.module2 .tail, #panels article.module2 .tail { left: 25%; }
	#panels article.start1.module3 .tail, #panels article.module3 .tail { left: 50%; }
	#panels article.start1.module4 .tail, #panels article.module4 .tail { left: 75%; }
#panels article.start2.module1 .tail { } /* invalid */
	#panels article.start2.module2 .tail { left: 0; }
	#panels article.start2.module3 .tail { left: 25%; }
	#panels article.start2.module4 .tail { left: 50%; }
#panels article.start3.module1 .tail { } /* invalid */
	#panels article.start3.module2 .tail { } /* invalid */
	#panels article.start3.module3 .tail { left: 0; }
	#panels article.start3.module4 .tail { left: 50%; }
#panels article.start4.module1 .tail { } /* invalid */
	#panels article.start4.module2 .tail { } /* invalid */
	#panels article.start4.module3 .tail { } /* invalid */
	#panels article.start4.module4 .tail { left: 0; }
.module0 .tail { opacity: 0; }

/* off - startupvideo */
article#off {
	z-index: 100;
	top: 0 !important; bottom: 0; left: 0; right: 0; height: 100%; width: 100%;
	background-color: rgba(0, 0, 0, 1);
	pointer-events: none;
	border-radius: 0;
}
#off video { display: none; width: 100%; height: 100%; object-fit: cover; }
#off.active { pointer-events: auto; }
#off div {
	position: absolute; bottom: 1em; left: 0; right: 0;
	border-radius: 0;
	color: rgba(255,255,255,0.1);
	font-weight: bold;
	text-align: center;
}

/* status */
#status .pane .module { width: 25%; display: flex; flex-direction: column; justify-content: flex-end; }
div.module div { text-align: center; }
#status .pane { align-items: flex-end; }
.status-test { position: relative; font-size: 1.5em; }
.status-test .qc { opacity: 0.2; position: absolute; top: 1em; left: 0; right: 0; font-size: 3em; font-weight: 900; }
.status-test .testcart { position: relative; font-size: 0.7em; }
.status-test .qrcode { display: inline-block; margin-bottom: -0.5em; }
.qrcode-caption {
	position: absolute; left: 0; right: 0; top: -2em;
	text-align: center;
	font-size: 40%;
	opacity: 50%;
	text-transform: uppercase;
	color: var(--detail-text);
	white-space: normal;
}
.status-test .testname { position: absolute; top: 4.2em; right: 4.2em; left: 4.2em; font-size: 0.7em; white-space: normal; }
.status-test img { width: 100%; }
#status .pane .none .status-detail { opacity: 0; }
#status .pane .none .status-remaining { height: 2em; }
#status .pane .module.none dl.status-remaining { font-size: 1.2em; text-transform: uppercase; white-space: normal; }
#status .pane .module.none dl.status-remaining dt { display: none; }
#status .pane .module.none dl.status-remaining dd { color: var(--none); }
dl.status-detail, dl.result-detail { display: flex; flex-wrap: wrap; line-height: 100%; align-content: center; }
#status dl.status-detail dt, #status dl.result-detail dt { opacity: 0.6; }
#status dl.status-detail dd, #status dl.result-detail dd { }
dl.status-detail dt, dl.result-detail dt {
	opacity: 0.6;
	width: 30%;
	padding-right: 1em; padding-top: 0.4em;
	font-size: 50%; text-transform: uppercase; text-align: right; white-space: normal;
	color: var(--detail-text);
}
dl.status-detail dt { padding-top: 0.3em; }
dl.status-detail dd, dl.result-detail dd {
	width: 65%;
	padding-bottom: 0.1em;
	white-space: normal;
	color: var(--detail-text);
}
#status .status-detail dd.test, #status .status-detail dt.test,
	#status .status-detail dd.error, #status .status-detail dt.error { display: none; }
#status .haserrors .status-detail dd.test, #status .haserrors .status-detail dt.test,
	#status .haserrors .status-detail dd.error, #status .haserrors .status-detail dt.error  { display: initial; }
dl.status-detail input { color: var(--basedarker); }
dl.status-detail textarea { resize: vertical; }
dl.status-remaining { font-size: 3em; margin-top: 0.5em; text-align: center; height: 1em; }
dl.status-remaining dt {
	opacity: 0.6;
	display: block;
	font-size: 25%;
	text-transform: uppercase;
	color: var(--remaining-text);
}
dl.status-remaining dd { display: block; color: var(--remaining-text); font-weight: bold; }
.remove-message, .remove-time {
	opacity: 0; display: inline; height: initial; padding-top: 0.5em;
	color: var(--base); text-align: center; text-transform: uppercase; white-space: normal;
}
.module-number { opacity: 0.3; font-size: 4em; text-align: center; font-weight: bolder; color: var(--detail-text); }
.running .remove-message{ display: none; }
.completed .module-number, .none .module-number { display: none; }
.remove-message { font-size: 160%; font-weight: bold; }
.remove-time { padding-bottom: 1em; font-size: 80%; }
.completed .remove-message { animation: 15s 15s infinite twinkle; }
.completed .remove-time { opacity: 0.6; transition: opacity 5s ease-in 15s; }
@keyframes twinkle { 0%, 4%, 8%, 100% { opacity: 0; } 1%, 5%, 9%, 97% { opacity: 1; } }
footer { z-index: 5; position: absolute; top: 3em; bottom: 0; left: 0; right: 0; display: flex; font-size: 125%; pointer-events: none; }
footer dl {
	width: 25%;
	margin: 0.1em 0.1em 0 0.1em;
	padding-top: 0.2em;
	border-top-left-radius: 0.2em; border-top-right-radius: 0.2em;
	background: var(--button-tint);
	text-align: center;
	font-size: 1.25em;
	pointer-events: auto;
}
footer .available { color: var(--available); }
footer .available dt { font-weight: bolder; font-size: 1em; }
footer .running { color: var(--running); }
footer .completed { color: var(--completed); }
footer .haserrors { color: var(--base); }
footer .completed, footer .running { padding-top: 19.25em; margin-top: 0.25em; }
footer .available, footer .load, footer .none { margin-top: auto; }
footer .none { color: var(--none); background: none; }
footer .load { color: var(--running); }
footer .load dt { opacity: 0; }
footer .load dd { animation: blinker 1s ease-in-out infinite alternate; }
@keyframes blinker { to { opacity: 0; } }
footer dt { opacity: 0.6; display: block; font-size: 40%; text-transform: uppercase; }
footer dd { display: block; text-transform: uppercase; font-weight: bold; }
#status .pane .available, #status .pane .load { opacity: 0; }
#status .pane .module.completed dl.status-remaining { display: none; }
#status .pane .module .status-completed { display: none; }
#status .pane .module.completed:not(.haserrors) .status-completed { display: block; }
#status .pane .status-completed svg { width: 5em; height: 5em; margin-top: -0.3em; color: var(--completed); }
#status .pane .status-completed { height: 4.25em; margin-top: 0.2em; overflow-y: visible; }
.completed:not(.haserrors) .status-test { filter: brightness(0.3); }
.haserrors .status-test .testname { display: none; }

/* home */
article#home { background: linear-gradient(var(--background-top) 5%, var(--background-bottom) 50%); }
#home .pane { justify-content: space-around; }
#home .pane a {
	display: flex; align-items: center; justify-content: center; flex-direction: column;
	height: min-intrinsic;
	margin: auto 0;
	font-weight: bold;
	color: var(--base);
	padding: 1em;
}
#home .pane a svg { fill: var(--basedark); width: 8em; height: 8em; }
#home .pane a:hover { color: var(--basedark); background-color: var(--button-tint-hover); border-radius: 1em; }
#home .pane a:hover svg { fill: var(--basedarker); }
#home .newtest.disabled { pointer-events: none; opacity: 0.3; }
#home #test-selector a.active { font-weight: bold; border-radius: 1em; }
#home #test-selector { padding-left: 1em; opacity: 0.2; }
.off.disabled { opacity: 0.1; pointer-events: none; }

/* newtest */
.newtest .pane { align-items: flex-start; overflow-y: auto; bottom: 1em; }

#panels article.newtest.module1, #panels article.newtest.module2, #panels article.newtest.module3, #panels article.newtest.module4 {
	overflow: visible;
}
.newtest .field, #authenticate .field {
	position: relative;
	margin: auto;
	height: 14em;
	display: flex; align-items: center; justify-content: start; flex-direction: column; flex-shrink: 0;
	color: var(--basedarker, var(--button));
}
.newtest .field span, #authenticate .field span { position: relative; }
.newtest .field label, #authenticate .field label { font-size: 50%; text-transform: uppercase; }
.newtest .field svg { width: 4em; height: 8em; opacity: 0.1; }
.newtest .field.currentstep svg { width: 8em; }
#authenticate .field svg { width: 8em; height: 8em; opacity: 0.6; right: -3.5em !important; }
.newtest .field.filled svg, #authenticate .field.filled svg { opacity: 0.6; }
.newtest .field svg.check, #authenticate .field svg.check {
	opacity: 0;
	position: absolute; top: 1em; right: -2.5em; width: 3em; height: 3em;
	color: var(--completed);
}
.newtest .field.filled svg.check, #authenticate .field.filled svg.check { opacity: 1; }
.newtest .field input, .newtest .field textarea, #authenticate .field input, #authenticate .field textarea {
	margin-top: 0.6em; margin-bottom: 0.5em; text-align: center; color: var(--basedarker); }
.newtest .field textarea, #authenticate .field textarea { resize: none; }
.newtest a.clear.disabled { pointer-events: none; opacity: 0.3; }
.newtest .field .number { opacity: 0.3; font-size: 2.5em; font-weight: bold; }

.field.currentstep svg { opacity: 1; }
.field.currentstep .number { opacity: 1; }

.sms.sent { opacity: 0.2; pointer-events: none; }
.sms.disabled { opacity: 0.1; pointer-events: none; }

/* runningtest */
#runningtest .pane { top: 4em; bottom: 0; }
#runningtest.module1, #runningtest.module2, #runningtest.module3, #runningtest.module4 { overflow: visible; }
#runningtest .status-test { width: 25%; margin-top: auto; margin-bottom: -0.5em; text-align: center; }
#runningtest.module2 .status-test { margin-left: 25%; }
#runningtest.module3 .status-test { margin-right: 25%; }
#runningtest.module3 .pane, #runningtest.module4 .pane { flex-direction: row-reverse; }
#runningtest dl.status-detail { width: 50%; line-height: 120%; font-size: 1.3em; }
#runningtest.module1 dl.status-detail, #runningtest.module4 dl.status-detail { width: 75%; }
#runningtest dd { font-weight: normal; white-space: normal; overflow: unset; }
#runningtest dd.remaining, #runningtest dd.eta { font-weight: bold; }
.les, .disclaimer { font-size: 50%; padding-top: 0.4em; }
.disclaimer { white-space: nowrap; }
.box {
	position: relative; top: -0.3em;
	padding: 0 0.2em; margin: 0 0.2em;
	border: var(--basedarker) 0.2em solid; border-radius: 0.3em;
	vertical-align: baseline;
	font-size: 50%; font-weight: bold; text-transform: uppercase;
}
#runningtest .qrcode img { width: 3em; padding: 0.3em; padding-bottom: 0; background-color: #fff; font-size: 1em; }
#runningtest .bottom-buttons { justify-content: flex-start; opacity: 0.1; }
#runningtest.module4 .bottom-buttons { justify-content: flex-end; }
#runningtest .bottom-buttons * { margin-right: 0; }

/* results */
#results .pane { top: 7em; bottom: 0; align-items: flex-start; overflow: scroll; font-size: 1em; }
#results tr.checked td { background: var(--baselight); }

/* result */
#result .pane { top: 4.5em; bottom: 0; }
#result.module1, #result.module2, #result.module3, #result.module4 { overflow: visible; }
#result dl.status-detail, #result div.result-block { width: 50%; }
#result dd { font-weight: normal; white-space: normal; }
#result dd.test { padding-bottom: 0; margin-bottom: -0.3em; }
#result dd.completed, #result dd.runtime { font-weight: bold; }
.result-detail { font-size: 0.75em; margin-bottom: 0.2em; }
#result .result-detail dt { opacity: 1; width: 45%; padding-top: initial; font-size: inherit; font-weight: bold; }
.result-header { padding-bottom: 0.5em; }
#result .result-detail dd { width: 50%; margin-top: -0.1em; }
#result .result-detail .result-header, #result .result-detail .control {
	opacity: 0.6;
	font-size: 50%; text-transform: uppercase; line-height: 100%;
	margin-top: 0;
}
#result .result-detail dt.detected,
	#result .result-detail dd.detected,
	#result .result-detail dt.fail,
	#result .result-detail dd.fail { color: #f00; }
#result .result-detail dt.result-label { text-transform: none; }
#result .qrcode img { width: 4em; padding: 0.3em; background-color: #fff; }
#result dl.qrcode { width: 100% !important; line-height: 75%;}
#result dt.qrcode { width: 60% !important; }
#result dd.qrcode { width: 30% !important; }
#result .resultgraph {
	position: relative; width: 9em;
	margin: auto;
	touch-action: manipulation;
	overflow: hidden;
}
#result .resultgraph img { border-radius: 0.25em; border: 0.2em var(--result-border) solid; background: var(--result-back); }
#result .resultgraph.zoomed {
	z-index: 1;
	position: absolute; top: 0.25em; bottom: 0.25em; left: 0.25em; right: 0.25em; width: initial; height: initial;
	text-align: center;
}
.resultgraph.zoomed img { height: 95%; width: auto; margin: auto; text-align: center; }
#result .tail { opacity: 0; }
#result.module1 .tail, #result.module2 .tail, #result.module3 .tail, #result.module4 .tail { opacity: 1; }
#result .result { font-weight: bold; }
#result dt.result.result-header { padding-top: 0.6em !important; }
#result .result.negative { color: var(--negative); }
#result .result.positive { color: var(--postive); }
.color-key {
	display: inline-block;
	position: relative;
	top: 0.2em; width: 0.6em; height: 0.6em;
	margin-right: 0.2em;
	border-radius: 0.2em;
	border: 0.1em solid black;
	color: transparent;
}
.result-detail dd:nth-child(10n+2) .color-key { background: rgb(245,130,32); }
.result-detail dd:nth-child(10n+4) .color-key { background: rgb(253,194,20); }
.result-detail dd:nth-child(10n+6) .color-key { background: rgb(114,191,68); }
.result-detail dd:nth-child(10n+8) .color-key { background: rgb(42,167,223); }
.result-detail dd:nth-child(10n+10) .color-key { background: rgb(185,82,159); }

#result .result-detail dt.error-label { width: 30%; font-size: 0.75em; }
#result .result-detail dd.error-text { width: 65%; font-size: 0.9em; }

/* qc */
#qc .pane {  top: 5em !important; bottom: 0; color: var(--basedark); font-size: 1em !important; }
#qc .pane svg { width: 7em !important; height: 7em !important; padding-bottom: 0.5em; }
#qc .field { flex-grow: 1; line-height: 120%; text-align: center; }
#qc dl.module-detail { display: flex; flex-wrap: wrap; padding-bottom: 0.5em; }
#qc .module-detail dt {
	opacity: 1;
	width: 45%;
	padding-top: initial; padding-right: 0.5em;
	font-size: 0.6em; text-transform: uppercase;
	text-align: right;
}
#qc .module-detail dd { width: 50%; text-align: left; font-weight: bold; }
#qc .field li { margin: 0.5em; }
#qc .field a { margin: 1em; font-weight: bold; padding: 0.1em 0.3em; background-color: var(--baselighter); border-radius: 1em; }
#qc .field a:hover { background-color: var(--baselight); }

/* moduleinfo */
.moduleinfo .pane { top: 8em !important; bottom: 0; color: var(--basedark); font-size: 1em !important; }
.moduleinfo .pane svg { width: 7em !important; height: 7em !important; padding-bottom: 0.5em; }
.moduleinfo .field { flex-grow: 1; line-height: 120%; text-align: center; }
.moduleinfo dl.module-detail { display: flex; flex-wrap: wrap; padding-bottom: 0.5em; }
.moduleinfo .module-detail dt {
	opacity: 1;
	width: 45%;
	padding-top: initial; padding-right: 0.5em;
	font-size: 0.6em; text-transform: uppercase;
	text-align: right;
}
.moduleinfo .module-detail dd { width: 50%; text-align: left; font-weight: bold; }
.moduleinfo .field li { margin: 0.5em; }
.moduleinfo .field a {
	margin: 1em; padding: 0.1em 0.3em; border-radius: 1em;
	font-weight: bold; background-color: var(--baselighter);
}
.moduleinfo .field a:hover { background-color: var(--baselight); }

/* info */
#info .pane { color: var(--basedarker); top: 3em; bottom: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; overflow: hidden;}
#info .index a { display: block; padding: 0.2em 0.3em; }
#info .index a { clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%); }
#info .index a.selected { font-weight: bold; color: white; background: var(--basedark); }
#info .index a:hover { background: var(--block-tint); }
#info .index {
	position: absolute; top: 0; bottom: 0; left: 0; width: 25%;
	padding: 0.3em 0;
	font-size: 1em;
	white-space: normal;
	overflow: hidden auto;
}
#info .index input { width: 9.5em; }
#info .index label { font-size: 75%; }
#info .viewer { position: absolute; top: 0; bottom: 0; right: 0; width: 75%; }
#info .viewer > div {
	display: none; width: 100%; height: 100%;
	padding: 0.5em;
	white-space: normal; box-sizing: border-box; overflow-y: auto;
}
#info .viewer > div.selected { display: block; }
#info video {
	max-width: 81%; max-height: 81%;
	margin-top: 0.5em;
	border: solid 0.2em rgba(0,0,0,0.3); border-radius: 0.5em;
	background: rgba(0,0,0,0.3);
}
#info .viewer a { font-weight: bold; font-style: italic; }
#info .viewer h1 { font-weight: bold; margin: 0.4em 0; }
#info .viewer h2 { font-weight: bold; margin: 0.2em 0; }
#info .viewer img { height: 13em; display: block; }
#info .viewer dd { float: left; margin-right: 0.5em; width: 5em; }
#info .viewer dt { float: left; margin-right: 0.5em; }
#info .viewer dl { display: grid; grid-template-columns: max-content auto; }
#info .viewer dd { grid-column-start: 1; margin-right: 0.5em; margin-bottom: 0.5em; font-style: italic; }
#info .viewer dt { grid-column-start: 2; margin-bottom: 0.5em; }
#info .viewer .heading { font-weight: bold; text-transform: uppercase; font-size: 75%; margin-top: 0.5em; }
#info .viewer ul { margin-bottom: 0.4em; }
#info .viewer li { list-style-type: disclosure-closed; list-style-position: inside; }

/* call */
#call .pane { top: 5em; bottom: 0; flex-direction: column; flex-wrap: wrap; align-items: flex-start; overflow-y: auto; font-size: 1.4em; }
#call .pane .field { padding: 0.5em 1em; }
#call .pane h2 { font-weight: bold; margin: 0.2em 0; }
#call .pane p { margin: 0.2em 0; }
#call .pane input { width: 25em; }
#call .pane a { font-weight: bold; font-style: italic; color: white; border-radius: 0.5em; padding: 0.2em 0.5em; background: var(--basedarker); }
#call .pane a:hover { background: var(--go-green); }
#call .pane select { -webkit-appearance: revert; appearance: revert; width: auto; }
#call .pane .phone { font-weight: bold; padding-left: 1em; }

/* admin */
#admin .pane { top: 5em; bottom: 0; flex-direction: column; flex-wrap: wrap; align-items: flex-start; overflow-y: auto; font-size: 1.4em; }
#admin .pane h1 { font-weight: bold; }
#admin .pane ul { padding-bottom: 0.75em; color: var(--basedark); }
#admin .pane li { }
#admin .pane li > * { display: inline-block; padding-left: 0.5em; padding-top: 0.5em; }
#admin .pane .field { padding: 0 1em; }
#admin .charge { color: var(--go-green); font-weight: bold; }
#admin .charge svg { position: relative; top: 0.4em; height: 1.5em; margin-top: -1.5em; }
#admin .charge.lowbatt, svg.lowbatt { color: var(--red-alert); }
#admin-sms { width: 9em; }

/* authentication */
#authenticate_overlay { display: none; z-index: 6; pointer-events: none; background: rgba(0,0,0,0.6); }
#authenticate { display: none; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: rgba(0,0,0,0.6); }
#authenticate .prompt { z-index: 6; top: 2.9em; background-color: var(--prompt-back); }
#authenticate .field { width: 15%; color: var(--basedarker); flex-grow: unset; font-size: 1.4em; }
#authenticate .invalid input { color: rgba(127,0,0,1); background: rgba(255,0,0,0.5); }
#authenticate .pane {
	top: 4em; bottom: 2.5em; left: 0.25em; right: 0.25em;
	align-items: center; justify-content: center;
	border-radius: 1em; border: 0.25em var(--basedarker) solid;
	background: var(--baselight);
	pointer-events: auto;
}
#authenticate .top-buttons { top: 2.8em; color: var(---basedarker); left: 0.2em; }

/* prompt more */
#promptmore_overlay { display: none; z-index: 5; pointer-events: none; background: rgba(0,0,0,0.6); }
#promptmore { display: none; position: absolute; top: 1em; bottom: 4em; left: 6em; right: 6em; }
#promptmore .pane {
	top: 0em; bottom: 0em; left: 0em; right: 0em;
	padding: 1em; padding-top: 5em;
	align-items: flex-start; justify-content: flex-start; flex-direction: column;
	border-radius: 1.75em; border: 0.25em rgba(64,64,64,1) solid;
	pointer-events: auto;
	text-align: left;
	background: linear-gradient(rgba(150,150,150,1) 5%, var(--background-bottom) 30%);
	overflow-y: scroll;
	white-space: normal;
}
#promptmore .prompt { margin-left: 2.5em; margin-right: 2.5em; color: white; background-color: rgba(0,0,0,0.3); }
#promptmore .status { color: black; }
#promptmore .top-buttons { color: white; }
#promptmore .top-buttons svg { color: white; }
#promptmore video {
	max-width: 99%;
	max-height: 81%;
	margin-top: 0.5em;
	border: solid 0.2em rgba(64,64,64,1);
	border-radius: 0.5em;
	background: rgba(0,0,0,0.3);
}
#promptmore h1 { margin: 0.4em 0; font-weight: bold; }
#promptmore h2 { margin: 0.2em 0; font-weight: bold; }
#promptmore dt { float: left; margin-right: 0.5em; }
#promptmore dl { display: grid; grid-template-columns: max-content auto; }
#promptmore dd { grid-column-start: 1; margin-right: 0.5em; margin-bottom: 0.5em; font-style: italic; }
#promptmore dt { grid-column-start: 2; margin-bottom: 0.5em; }
#promptmore ul { margin-bottom: 0.4em; }
#promptmore li { list-style-type: disclosure-closed; list-style-position: inside; }