@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&family=Fira+Sans+Condensed:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Nanum+Gothic+Coding:wght@400;700');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;600');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
:root {
	--glass: rgba(255,255,255,0);
}
b {
font-weight: bold;
text-shadow: 1px 1px pink;
font-style: italic;
	transition: all 8s;
}
b:hover {
	filter: hue-rotate(270deg);
}
body {
	font-family: "Fira Sans Condensed";
	font-weight: 300;
	padding: 0;
	margin: 0;
	padding: 0;
	margin: 0;
}
.hide {
	display: none;
}
#submenus form {
	position: absolute;
	z-index: 2;
	flex-direction: column;
	display: flex;
	border: 1px solid lightgrey;
	visibility: hidden;
	opacity: 0;
	transition: all 0.2s ease;
}
#submenus form[data-show] {
	visibility: visible;
	transition: all 0.2s ease-out;
	opacity: 1;
}
#submenus form button:focus {
	border-left: 2px solid green;
}
#submenus form button:hover {
	outline:none;
	background: pink;
	letter-spacing: 1px;
	transition: letter-spacing 0s;
	;
}
#submenus form button:disabled {
	color: lightgrey;
}
#submenus form button.bottom {
	border-bottom: 1px solid lightgrey;
}
#submenus form button {
	text-transform: uppercase;
	color: black;
	background: whitesmoke;
	text-align: left;
	border: none;
	border-left: 2px solid RGBA(0,0,0,0);
	padding: 2px 20px 2px 2px;
	margin: 0;
	font: 400 10pt "Fira Sans";
	box-sizing: border-box;
	transition: letter-spacing 1s ease;
}
.nav-form > button.disabled {
	color: pink;
	background: lightpink;
}
.nav-form > button:hover {
	background: #eee;
}
.nav-form > button {
	text-transform: capitalize;
	border: none;
	background: whitesmoke;
	text-align: center;
	border-right: 1px solid lightgrey;
	border-bottom: 3px solid var(--glass);
	padding: 0 5px;
	margin: 0;
	font: 400 10pt "Fira Sans Condensed";
	box-sizing: border-box;
}
.nav-form > span > * {
	text-align: right;
	margin: 0px 4px;
	margin-bottom: 2px;
	padding-right: 1px;
	background: white;
	vertical-align: baseline;
	border: 1px solid lightgrey;
}
.nav-form > span::before {
	vertical-align: baseline;
	margin-left: 5px;
	margin-right: 1px;
	content: attr(class);
	color: blue;
	font-size: 11px;
}

button:disabled {
	color: lightgrey;
}
header.infoBar {
	margin: 0;
	border: none;
	background: linear-gradient(45deg, white,whitesmoke);
	border-bottom: 1px solid lightgrey;
	padding: 1px 9px;
	color: black;
	text-align: left;
	font-style: italic;
}
nav.menuBar {
	height: 15pt;
	background: whitesmoke;
	margin: 0;
	padding: 3px;
	padding-left: 9px;
	border: none;
	border-bottom: 1px solid lightgrey;
}
#preview nav {
	display: flex;
	flex-wrap: wrap;
	background: linear-gradient(45deg, white,whitesmoke);
	border-bottom: 1px solid lightgrey;
	z-index: 0;
}
#preview nav button:hover {
	background: #eee;
}
#preview nav button {
	flex: 1 1 auto;
	font: 400 10pt "Fira Sans Condensed";
	font-style: italic;
	color: grey;
	outline: none;
	border: 1px solid lightgrey;
	border-bottom: none;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	vertical-align: sub;
	background: whitesmoke;
	text-align: center;
	padding: 2px 5px;
	margin: 0;
	margin-top: 1px;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	z-index: 0;
}
#preview nav button[data-top] {
	z-index: 1;
	top: 1px;
	background: white;
	color: black;
	border-bottom: none;
}
#preview nav button:focus {
	border-top: 2px solid green;
	margin-top: 0px;
}
#preview > figure > div[data-top] {
	display: block;
}
#preview > figure > div {
	display: none;
	margin: 0;
	padding: 0;
}
nav.menuBar form {
	padding:0;
	margin:0;
}
footer.copyright {
	bottom: 0px;
	width: 100vw;
	background:  whitesmoke;
	border-top: 1px solid lightgrey;
	position: fixed;
	text-align:center;
	font-size:10pt;
	padding: 2px;
}
button:focus {
	outline:none;
	border-bottom: 3px solid green;
}
select:focus {
	outline:none;
	border-bottom: 3px solid green;
	margin-bottom: 0;
}
h1,h2,h3 {
	margin: 1mm;
}
#sections {
	display: flex;
	flex-direction: row;
}
#preview {
	width: auto;
	border-right: 1px solid lightgray;
	border-left: 1px solid lightgray;
	margin: 0;
	padding: 0;
	flex: 0;
}
section.metainfo {
	display: block;
}
.metainfo > header {
	padding-left: 1em;
	border-bottom: 1px solid lightgrey;
	border-top: 1px solid lightgrey;
	background: whitesmoke;
	font-size: small;
	font-style: italic;
}
.metainfo > div {
	font-weight: 400;
	font-size: x-small;
	padding-top: 3pt;
	padding-bottom: 3pt;
	font-family: "Roboto Mono";
}

form.colorPicker {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
form.colorPicker > div {
	display: flex;
	flex-direction: column;
}
form.colorPicker input {
	width: 256px;
}
output.colorPreview {
	border: 1px solid black;
	margin: 0;
	padding: 0;
	position: relative;
	display: inline-block;
	width: 3em;
	height: 3em;
}

.metainfo div.colorbox { 
	position: relative;
	width: 10px;
	height: 10px;
	display: inline-block;
	padding: 1px;
	margin: 1px;
	border: 1px solid black;
}
.metainfo div.colorbox:hover {
	outline: 3px solid pink;
}

.metainfo > div.colorMeta {
	padding-left:1.5em;
}
.metainfo .fontName {
	padding-left: 1.5em;
}
.missing::after { color: red; content: "missing!"; position: relative; left: 20px; }

.metainfo .fontName:hover {
	background: pink;
}

.metainfo {
	display: none;
}
.metainfo[data-top] {
	display: block;
}


figure > div > * + img {
	width: 40vw;
}
svg {
	width: -webkit-fill-available;
	width: -moz-available;
	height: auto;
}
figure {
	cursor: grab;
	display: block;
	margin: 0;
	z-index: 0;
	width: 100%;
}
figcaption {
	height: 15pt;
	background: whitesmoke;
	margin: 0;
	padding-top: 5px;
	border: none;
	border-bottom: 1px solid lightgrey;
	display: block;
	font-family: Arial;
	font-size: 10pt;
	text-align: center;
	text-transform: uppercase;
}
#data {
	background: white;
	flex: 1;
}
#data > form {
	display: flex;
	flex-direction:column;
	margin-bottom: 0.25in;
}
#data > form label > var {
	font-size:10pt;
	display: inline-block;
	margin: 0;
	padding: 0;
	margin-right: 1ch;
	width: 25ch;
	vertical-align: middle;
	text-align: right;
}
#data > form > label > var > span {
	display: inline-block;
	left-padding: 2px;
}

#data > form label {
	display: block;
	text-align: left;
	border-bottom: 1px solid lightgrey;
	padding: 0;
	margin: 0;
}

#data > form label > input {
	border: none;
	font-family: monospace;
	height: 24px;

	border-right:1px solid lightgrey;
	border-left: 3px double lightgrey;

}

#data > form label > input[readonly] {
	color: grey;
	cursor: not-allowed;
}

#data > form label > input[readonly][type=url] {
	display: none;
}

#data > form label[data-filled] > input[type=url] ~ span.what::before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  color: green;
  content: "check_box";
  vertical-align: middle;
}
#data > form label > input[type=url] ~ span.what::before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
	color: red;
  content: "check_box_outline_blank";
  vertical-align: middle;
}

#data > form label > input ~ span.args {
	margin-left: 1ch;
	font-size: 10pt;
	font-style: italic;
	color: grey;
}

#data > form label > input[readOnly] ~ span.args {
	color: blue;
}

span.icon {
	padding: 0px 2px;
	margin: 0;
	vertical-align: middle;
	color: black;
}
span.icon.grey {
	color: lightgrey;
}


#data > form label:first-of-type { border-top: 1px solid lightgrey; }
#data > form label { background: whitesmoke; }
#data > form label[data-top] { background: lightyellow; }
#data > form label[data-filled] { color: green; }
#data > form label[data-invalid] { color: red; }

#data > form fieldset {
	padding: 0;
	margin: 0;
	border:none;
}

#data > form legend {
	font-style: italic;
	padding-left: 2ch;
	text-transform:  uppercase;
}

#data > form legend button {
	margin: 0px 2px;
	padding: 0px 5px;
	vertical-align: middle;
	font-size: 11px;
}

div.backdrop {
	background: rgba(0,0,0,0.5);
	position: fixed;
	text-align: center;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2;
	display: block;
}
div.backdrop.hide {
	display: none;
}
div.dialog {
	display: inline-block;
	position: relative;
	top: 10vh;
	text-align: center;
	border: none;
	background: none;
}
div.dialog > div > div:last-child {
	text-align: right;
	display: block;
	border: none;
}
div.dialog p, div.dialog img {
	margin: 10px;
}
div.dialog div.popup {
	background:white;
	padding: 10px;
	margin: 10px;
	border: 1px solid black;
	border-radius: 5px;
	position: relative;
	display: block;
}
div.dialog div.popup svg {
	width: 75vw;
	height: 33vh;
}
div.dialog div.popup table {
	font-family: "Fira Sans";
	font-stretch: condensed;
	border-collapse: collapse;
	border-bottom: 1px solid lightgrey;
}
div.dialog div.popup tr {
}
div.dialog div.popup tr:hover {
	background: limegreen;
}
div.dialog div.popup td {
	padding: 1px 10px 1px 10px;
}
div.dialog div.popup th {
	font-size: 10pt;
	border-bottom: 1px solid lightgrey;
}
div.dialog div.popup caption {
	font-size: 14pt;
}
div.dialog button:focus {
	outline: initial;
	border-bottom: initial;
}
div.dialog button:active {
	position: relative;
	top: 1px;
	left: 1px;
	transition: all 1s ease;
}
div.dialog button {
	margin: 2px;
	border-radius: 2px;
	border: none;
	box-shadow: 1px 2px 2px lightgrey;
	padding: 4px;
}
header.infoBar a {
    text-align: center;
    border-right: 1px solid lightgrey;
    padding: 0 4px;
    margin: 0;
	text-decoration: none;
    font: 300 11pt "Fira Sans Condensed";
	font-style: italic;
}
header.infoBar a:last-of-type {
	border-right: none;
}
.uc { text-transform: uppercase; }
.lc { text-transform: lowercase; }
.cap { text-transform: capitalize; }
.l  { text-align: left; }
.r  { text-align: right; }
.c  { text-align: center; }
.j  { text-align: justify; }
.b  { font-weight: bold; }
.i  { font-style: italic; }
.ib { display: inline-block; }
.bl { display: block; }
.red {  color: red }
.black { color: black; }
.grey { color: lightgrey; }
.white { color: white; }
.green { color: green; }
.blue { color: blue; }
.fit { width: -webkit-fill-available; }
.product a {
	text-decoration: none;
	color: #66c;
	font-style: italic;
}
#preview div.ascii-preview {
	text-align: left;
	font-family: monospace;
	font-size:  12px;
	margin: 1cm;
}

span.tag {
	text-transform: uppercase;
	font-size: 12px;
	color: black;
	vertical-align: baseline;
	background: lightblue;
	padding: 0px 3px 0px 3px;
	font-weight: normal;
	font-style: initial;
}

.support {
	display: flex;
	background: lightgrey;
	flex-direction: column;
	flex-wrap: nowrap;
}

.support > header {
	font-weight: 400;
	font-style: italic;
	text-transform: uppercase;
	color: grey;
	border-bottom: 1px solid lightgrey;
	padding: 1px 4px;
	margin: 0;
	display: inline-block;
}
.support > header time {
	font-weight: 200;
	font-size: 0.8em;
	text-transform: lowercase;
	color: grey;
}
.support > header time.available {
	color: green;
}
.support .usernames {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background: white;
}
.support .chats {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

.support .usernames .username {
	margin: 1px;
	padding: 1px 4px;
	background: grey;
	color: white;
	order: 1;
}
.support .usernames .username.open {
	background: white;
	font-weight: 500;
	color: black;
}

.support .messages {
	display: none;
	background: whitesmoke;
}

.support .messages.open {
	display: block;
}
.support .messages .message {
	padding: 1px 4px;
	margin: 0;
	text-align: left;
}
.support .messages .message.reply {
	text-align: right;
}
.support .messages .message.unread .text {
}
.support .messages .message.read .text {
	color: grey;
}

.support .messages .message time {
	float: left;
	margin-right: 2mm;
	padding: 2px;
	display: inline-block;
	font-size: 0.8em;
	font-style: italic;
	color: darkcyan;
}
.support .messages .message.reply time {
	float: right;
	margin-left: 2mm;
	color: darkred;
}

.support footer {
	display: block;
	padding: 0;
	margin: 0;
	width: 100vw;
}
.support footer form {
	padding: 0;
	margin: 0;
}
.support footer input {
	width: -webkit-fill-available;
	margin: 0;
	padding: 0;
}
.support footer input:active {
}
.support footer input:hover {
}

#ad {
	position: fixed;
	display: block;
	margin: 0;
	cursor: help;
	padding: 1mm;
	z-index: 9;
	bottom: 12mm;
	right: 1cm;
	text-align: center;
	background: yellow;
	padding: 1mm 4mm;
	border-radius: 1mm;
	box-shadow: 1px 2px 6px RGBA(0,0,0,0.2);
	opacity:66%;
}
#ad:hover {
	opacity:100%;
}
#ad:before {
	content: "";
    position: absolute;
    bottom: -15px;
    left: 20px;
    border-width: 0 20px 15px 0px;
    border-style: solid;
    border-color: transparent yellow;
	z-index:-9;
    display: block;
    width: 0;
}


#ad > div:first-child {
	font-size: 1.5rem;
	font-weight: 400;
	text-transform: uppercase;
	color: black;
}
#ad > div.live:first-child {
	color: red;
}
#ad > div:last-child {
	font-size: 1rem;
	font-weight: 200;
	font-style: italic;
	color: green;
}
#ad > div.offline:last-child {
	color: grey;
}
#ad > div.new:last-child {
	font-weight: 600;
}

#tooltip {
	position: absolute;
	width: 400px;
	display: inline-block;
	opacity:100%;
	transition:opacity 0.2s ease;
	margin: 0;
	z-index: 5;
}
#tooltip > div {
	display: inline-block;
	position: relative;
	margin: 0;
	background: RGBA(0,0,0,0.8);
	padding: 3mm;
	border-radius: 2mm;
	font-size: 9pt;
	color: white;
	font-weight: 400;
	font-style: italic;
	box-shadow: 1px 2px 6px RGBA(0,0,0,0.2);
}

#tooltip.hide {
	transition:all 0.2s ease;
	opacity:0%;
}

dl {
	margin-left: 15pt;
	font-family: "Fira Sans Condensed", sans-serif;
	font-size: x-small;
	display: grid;
	justify-content: start;
}


dt {
	font-weight: 500;
	grid-column-start: 1;
}

dd {
	font-style: italic;
	grid-column-start: 2;
}