* {box-sizing: border-box;}
:root {
	--defaultFontSize: 1rem;  /* Default: 16px */
	--defaultFontFamily: Roboto, Verdana, sans-serif;
	/* Defaults */
	--defaultBgColor: #F6F6F6;
	--defaultFontColor: #000;
	--defaultLinkColor: #0096FF;
	--defaultActiveClick: #F00;
	--defaultBgColorDark: #181818;
	--defaultFontColorDark: #BCC;
	/* Header */
	--headerBgColor: #66A8CC;
	--headerBgColorAlpha: #66A8CCF5;
	--headerTrimColor: #007BD4;
	--headerFontColor: #FFF;
	--headerHoverColor: #007BD4;
	--headerBgColorAlphaDark: #383838F5;
	--headerTrimColorDark: #000;
	--headerFontColorDark: #CCC;
	--headerHoverColorDark: #686868;
	/* Tables */
	--tableBgColor: #FFF;
	--tableThBgColor: #66A8CC;
	--tableThFontColor: #FFF;
	--tableCaptionColor: #063157;
	--tableBgColorDark: #090909;
	--tableThBgColorDark: #383838;
	--tableThFontColorDark: #CCC;
	/* Forms */
	--buttonBgColor: #2397D0;
	--buttonFontColor: #FFF;
	--buttonBgColorDark: #484848;
	--buttonFontColorDark: #DDD;
	--formBorderFocusColor: #8B008B;
}


/*     +---------------------------------+     */
/*     |          BODY DEFAULTS          |     */
/*     +---------------------------------+     */


body {
	font-size: var(--defaultFontSize);
	font-family: var(--defaultFontFamily);
	background-color: var(--defaultBgColor);
	color: var(--defaultFontColor);
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	height: 100vh;
	width: auto;
	transition: background-color 0.5s, color 0.5s;
}
body.dark {
	background-color: var(--defaultBgColorDark);
	color: var(--defaultFontColorDark);
}


a {cursor: pointer;}
a, a:visited {color: var(--defaultLinkColor);}
a:active {color: var(--defaultActiveClick);}


h1 {
	color: var(--tableCaptionColor);
	font-size: 1.25em;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0.5em;
	text-shadow: 1px 1px 1px #00000030;
}
body.dark h1 {
	color: var(--tableThFontColorDark);
	text-shadow: 1px 1px 3px #000;
}


x-code, .x-code {
	font-family: monospace;
	background-color: #EFF1F3;
	border: 1px solid #E3E8EE;
	border-radius: 3px;
	padding: 0em 0.25em;
	white-space: nowrap;
}
div.x-code {
	display: inline-block;
	white-space: nowrap;
	overflow-x: auto;
	margin: 0.5em 0;
	padding: 0.5em 1em;
	max-width: 95%
}
body.dark x-code, body.dark .x-code {
	background-color: #343941;
}


/*     +--------------------------+     */
/*     |          HEADER          |     */
/*     +--------------------------+     */


header {
	display: flex;
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1;
	transition: 0.5s;
	background-color: var(--headerBgColorAlpha);
	color: var(--headerFontColor);
	border-bottom: 1px solid var(--headerTrimColor);
	box-shadow: 0 1px 5px #999;
}
body.dark header {
	background-color: var(--headerBgColorAlphaDark);
	border-color: var(--headerTrimColorDark);
	color: var(--headerFontColorDark);
	box-shadow: 0 0 5px #000;
}


header a {
	color: var(--headerFontColor);
	text-decoration: none;
	margin: 0;
	padding: 1em 1em;
	vertical-align: middle;
	text-align: center;
	display: inline-block;
	height: 100%;
	transition: 0.5s;
}
body.dark header a {color: var(--headerFontColorDark);}
header a#darkButtonLink {width: 5em;}
header a:visited {color: var(--headerFontColor);}
header a:active {color: var(--defaultActiveClick);}
header a:hover {background-color: var(--headerHoverColor);}
body.dark header a:hover {background-color: var(--headerHoverColorDark);}
header a.headerLogoImg {
	margin: auto 1em;
	padding: 0;
	height: 4em; /* 2.25em */
}
body.dark header img {opacity: 0.8;}


header span.headerCompactMenuOpen {
	display: none;
}
header span.headerMenuLeft {
	display: inline-block;
	white-space: nowrap;
}
header span.headerMenuCenter {
	display: inline-block;
	flex: 2 2 auto;
	white-space: nowrap;
	margin: auto 1em;
	font-style: italic;
	text-align: right;
	overflow: hidden;
}
header span.headerMenuRight {
	display: inline-block;
	text-align: right;
	white-space: nowrap;
}
header span.headerDropdownGroup {
	display: inline-block;
	position: relative;
}


header span.headerDropdown {
	display: none;
	position: absolute;
	width: max-content;
	padding: 0.5em;
	max-height: calc(100vh - 6em);
	overflow-y: auto;
	overflow-x: hidden;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	background-color: var(--headerBgColorAlpha);
	color: var(--headerFontColor);
	border: 1px solid var(--headerTrimColor);
	box-shadow: 0 1px 5px #999;
}
header span.headerDropdownGroup:hover span.headerDropdown {
	display: block;
}
body.dark header span.headerDropdown {
	background-color: var(--headerBgColorAlphaDark);
	color: var(--headerFontColorDark);
	border-color: var(--headerTrimColorDark);
	box-shadow: 0 0 5px #000;
}
header span.headerDropdown a {
	display: block;
	text-align: left;
	border-radius: 1em;
}
header span.headerDropdown :is(i.fas, i.far) i {
	margin: 0 0 0 0.5em;
}


header :is(i.fas, i.far) {
	font-size: 1.5em;
}
header :is(i.fas, i.far) i {
	font-size: 0.5em;
	margin: 0.25em 0 0 0;
	text-transform: uppercase;
}
header :is(i.fas, i.far) i.collapse {
	display: block;
}


/*     +------------------------+     */
/*     |          Main          |     */
/*     +------------------------+     */


main {
	flex: 1 0 auto;
	max-width: 1200px;
	margin: 6em max(calc((100vw - 1200px) * 0.5), 2em) 2em max(calc((100vw - 1200px) * 0.5), 2em);
}


/*     +--------------------------+     */
/*     |          FOOTER          |     */
/*     +--------------------------+     */


footer {
	display: flex;
	flex-wrap: wrap;
	flex: 0 0 auto;
	padding: 0.5em 1.5em;
	font-size: 0.875em;
	background-color: var(--headerBgColor);
	color: var(--headerFontColor);
	border-top: 1px solid var(--headerTrimColor);
}
body.dark footer {
	background-color: var(--headerBgColorAlphaDark);
	color: var(--headerFontColorDark);
	border: 1px solid var(--headerTrimColorDark);
}

footer div {
	flex: 1 0 auto;
	margin: 0.5em 0;
}
footer div.right {
	text-align: right;
	white-space: nowrap;
}

footer a {
	color: var(--headerFontColor);
	text-decoration: none;
	margin: 0;
	padding: 0.25em;
}
body.dark footer a {color: var(--headerFontColorDark);}
footer a:visited {color: var(--headerFontColor);}
footer a:active {color: var(--defaultActiveClick);}


/*     +------------------------------+     */
/*     |          FONT ICONS          |     */
/*     +------------------------------+     */


:is(i.fas, i.far) {
	/*vertical-align: middle;*/
	white-space: nowrap;
}
:is(i.fas, i.far) i {
	font-family: var(--defaultFontFamily);
	font-weight: normal;
	font-style: normal;
	margin: 0 0 0 0.5em;
	vertical-align: middle;
}


/*     +--------------------------+     */
/*     |          TABLES          |     */
/*     +--------------------------+     */


table {
	border: 3px solid var(--tableThBgColor);
	background-color: var(--tableBgColor);
	border-radius: 1em;
	border-spacing: 0;
	box-shadow: 0 0 2px #000;
	margin: 2em 0;
}
body.dark table {
	border-color: var(--tableThBgColorDark);
	background-color: var(--tableBgColorDark);
}
table caption {
	color: var(--tableCaptionColor);
	font-size: 1.25em;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0.5em;
	text-shadow: 1px 1px 1px #00000030;
}
body.dark table caption {
	color: var(--tableThFontColorDark);
	text-shadow: 1px 1px 3px #000;
}
table th {
	padding: 0.25em 0.5em;
	background-color: var(--tableThBgColor);
	color: var(--tableThFontColor);
}
body.dark table th {
	background-color: var(--tableThBgColorDark);
	color: var(--tableThFontColorDark);
}
table th :is(a, a:visited) {color: var(--tableThFontColor);}
body.dark table th :is(a, a:visited) {color: var(--tableThFontColorDark);}
table thead th:first-child {border-top-left-radius: 0.75em;}
table thead th:last-child {border-top-right-radius: 0.75em;}
table tbody tr:first-child th:first-child {border-top-left-radius: 0.75em;}
table tbody tr:last-child th:last-of-type {border-bottom-left-radius: 0.75em;}
table tbody tr th {text-align: left;}
table td {padding: 0.5em;}
table.responsive tbody th {display: none;}

@media screen and (max-width: 900px) {
	table.responsive thead th {display: none;}
	table.responsive tbody :is(tr, th) {
		display: grid;
		grid-template-columns: auto auto;
		align-content: center;
	}
	table.responsive tbody tr th {
		font-size: 0.75em;
		border-bottom: 1px dotted var(--tableThFontColor);
	}
	table.responsive tbody tr {border-bottom: 3px solid var(--tableThBgColor);}
	table.responsive tbody tr:last-child {border-bottom: unset;}
	body.dark table.responsive tbody tr {border-bottom-color: var(--tableThBgColorDark);}
}


/*     +-------------------------+     */
/*     |          FORMS          |     */
/*     +-------------------------+     */


input {
	font-size: 1em;
	background-color: inherit;
	color: inherit;
	border-width: 2px;
	border-style: solid;
	border-color: inherit;
	border-radius: 0.25em;
	padding: 0.1em 0.25em;
	margin: 0;
	outline: none;
}
input:focus {
	border-color: var(--formBorderFocusColor);
	background-color: inherit;
}
body.dark input:focus {background-color: var(--tableBgColorDark);}


label > input[type=checkbox] {
	display: none;
}
label > input[type=checkbox] + i::before {
	content: "";
	display: inline-block;
	vertical-align: bottom;
	margin: 0 2px;
	width: 1em;
	height: 1em;
	border: 1px solid #555;
	border-radius: 0.3em;
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	line-height: 1em;
}
label > input[type=checkbox][disabled] + i::before {
	cursor: not-allowed;
	border-style: dotted;
}
body.dark label > input[type=checkbox] + i::before {
	background-color: var(--tableBgColor);
	border-color: unset;
}
label > input[type=checkbox] + i {font-style: unset;}
label > input[type=checkbox]:not([disabled]) + i {cursor: pointer;}
label > input[type=checkbox]:checked + i::before {content: "✓";}
label > input[type=checkbox]:not([disabled]):checked + i::before {
	background-color: var(--buttonBgColor);
	color: var(--buttonFontColor);
}
body.dark label > input[type=checkbox]:not([disabled]):checked + i::before {
	background-color: var(--buttonBgColorDark);
	color: var(--buttonFontColorDark);
}


select {
	background-color: inherit;
	color: inherit;
	font-size: 1em;
	border: 2px solid;
	border-radius: 0.25em;
	padding: 0.1em 0.25em;
	margin: 0;
	outline: none;
}
select:focus {
	background-color: var(--tableThBgColor);
	color: var(--tableThFontColor);
	border-color: var(--formBorderFocusColor);
}
body.dark select:focus {
	background-color: var(--tableThBgColorDark);
	color: var(--tableThFontColorDark);
}


button {
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	border: none;
	text-decoration: none;
	cursor: pointer;
	font-size: 0.9em;
	font-weight: bold;
	background-color: var(--buttonBgColor);
	color: var(--buttonFontColor);
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}
body.dark button {
	background-color: var(--buttonBgColorDark);
	color: var(--buttonFontColorDark);
}
button:hover {box-shadow: inset 0 0 2px #000;}
body.dark button:hover {box-shadow: inset 0 0 2px var(--buttonFontColorDark);}
button:active,
body.dark button:active {
	position: relative;
	top: 2px;
	color: var(--defaultActiveClick);
}
button[disabled]:hover,
button[disabled]:active,
body.dark button[disabled],
button[disabled] {
	position: unset;
	cursor: not-allowed;
	color: #FFFFFF88;
	box-shadow: none;
}


fieldset {
	display: block;
	border: 1px solid;
}
fieldset legend {
	font-weight: bold;
	font-style: italic;
}


/*     +---------------------------+     */
/*     |          CLASSES          |     */
/*     +---------------------------+     */


div.successMsg, div.errorMsg {
	display: block;
	margin: 0 0 1em 0;
	padding: 0.5em 1em;
	border: 1px solid;
	font-size: 1rem;
	font-weight: bold;
	font-family: "Courier New", monospace;
	color: #FFF;
}
div.successMsg {background-color: #329932; border-color: #233348;}
div.errorMsg {background-color: #FF3232; border-color: #233348;}


div.p {
	border: 2px solid var(--tableThBgColor);
	border-radius: 0.5em;
	background-color: var(--tableBgColor);
	margin-bottom: 1em;
	padding: 1em;
	box-shadow: 1px 1px 1px #999;
}
body.dark div.p {
	background-color: var(--tableBgColorDark);
	border-color: var(--tableThBgColorDark);
	box-shadow: 1px 1px 1px #000;
}


div.tilesContainer {
	display: block;
	column-width: 350px;
	column-gap: 2em;
}
div.tilesContainer div {
	display: inline-block;
	background-color: var(--tableBgColor);
	border: 3px solid var(--tableThBgColor);
	box-shadow: 1px 1px 2px #999;
	border-radius: 0.5em;
	width: 100%;
	margin-bottom: 2em;
}
div.tilesContainer span.title {
	display: block;
	background-color: var(--tableThBgColor);
	color: var(--tableThFontColor);
	text-shadow: 1px 1px 1px #000;
	padding: 0.25em 0.5em;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}
div.tilesContainer span.title i {margin: 0 0.5em 0.25em 0;}
div.tilesContainer span {
	display: block;
	padding: 1em;
}
body.dark div.tilesContainer div {
	background-color: var(--tableBgColorDark);
	border-color: var(--tableThBgColorDark);
	box-shadow: 1px 1px 2px #000;
}
body.dark div.tilesContainer span.title {
	background-color: var(--tableThBgColorDark);
	color: var(--tableThFontColorDark);
}


/*     +----------------------------------+     */
/*     |          @MEDIA QUERIES          |     */
/*     +----------------------------------+     */


@media print {
	body, body.dark {--defaultFontSize: 12px; background-color: white; color: black;}
	header {display: none;}
	main {padding: 1em; font-size: 12px;}
	footer {display: none;}
}


/* TABLET */
@media screen and (max-width: 900px) {
	header span.headerMenuCenter {
		visibility: hidden;
		margin: 0;
		padding: 0;
	}
}


/* CELL PHONE */
@media screen and (max-width: 600px) {
	main {margin-top: 8em; font-size: 0.75rem;}
	header span.headerDropdown {max-height: unset;}
	header span.headerCompactMenuOpen {display: inline-block; position: relative;}
	header span.headerMenuLeft {display: none;}
	header span.headerMenuLeft {
		position: absolute;
		padding: 0.5em;
		max-height: calc(100vh - 6em);
		overflow-y: auto;
		overflow-x: hidden;
		border-bottom-left-radius: 1em;
		border-bottom-right-radius: 1em;
		background-color: var(--headerBgColorAlpha);
		border: 1px solid var(--headerTrimColor);
		box-shadow: 0 1px 5px #999;
	}
	body.dark header span.headerMenuLeft {
		background-color: var(--headerBgColorAlphaDark);
		color: var(--headerFontColorDark);
		border-color: var(--headerTrimColorDark);
		box-shadow: 0 0 5px #000;
	}
	header span.headerMenuLeft span.headerDropdown {
		display: block;
		padding: 0;
		width: 100%;
		position: unset;
		border-radius: unset;
		background-color: unset;
		border: unset;
		box-shadow: unset;
	}
	header span.headerMenuLeft a {
		display: block;
		text-align: left;
		border-radius: 1em;
	}
	header span.headerDropdownGroup {display: block;}
	header span.headerMenuLeft a.headerDropdown {display: none;}
	header span.headerMenuLeft i.collapse {display: inline-block; margin: 0 0 0 0.5em;}
	header span:hover span.headerMenuLeft {display: block;}
}