:root {
	--border: #c9c9c9;
	--text: #fff;
	--muted: #c2c2c2;
	--focus: #2563eb;
	--bg: #000;
	--page: #000;
	--card: #ffffff;
}

body,
html {
	height: 100%;
	margin: 0;
	font-family: "Space Grotesk", "Inter", system-ui, -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12pt;
	background: var(--page);
	color: var(--text);
}

form {
	margin: auto;
}

#main-nav {
	display: grid;
	justify-items: center;
	padding: 10px 0;
	background: #0a677b;
}

.sm-simple {
	background: inherit;
	box-shadow: 0px 6px 12px 0px rgb(31, 31, 31);
	border: none;
}

.sm-simple ul {
	border: 1px solid #0089ed !important;
	box-shadow: 11px 13px 20px 8px rgb(31, 31, 31) !important;
}

.sm-simple li {
	border-left: none !important;
	border-top: none !important;
}

.sm-simple a:hover,
.sm-simple a:focus,
.sm-simple a:active {
	font-family: "Space Grotesk", "Inter", system-ui, -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: #530000 !important;
	color: white;
}

.sm-simple a,
.sm-simple a:visited {
	font-family: "Space Grotesk", "Inter", system-ui, -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: white;
	background: #0a4b59;
}

.sm-simple a .sub-arrow::before {
	content: '▼';
}

.results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 30px;
}

.results .result {
	border: 2px solid white;
	outline: 2px solid #818381;
	padding: 10px;
	border-radius: 0 20px 0 0;
	text-align: center;
}

.results .result:hover {
	background: #0a1868;
}

.results .result:nth-child(even) {
	border-radius: 0 20px 0 0;
}

.results .result:nth-child(odd) {
	border-radius: 20px 0 0 0;
}

.results .result div {
	white-space: nowrap;
}

.pagination {
	position: relative;
	text-align: center;
	margin-top: 20px;
}

.overflow {
	overflow: auto;
}

.pagination>div {
	display: inline-block;
	width: 20px;
	border: 1px solid rgb(200, 200, 200);
	text-align: center;
}

.destinations {
	border: 1px solid #2a2a2a;
	outline: 1px solid #1fc4ff;
	margin: 10px 0;
	border-radius: 10px;
	background: #0d708e;
}

.destination-widget {
	border: 2px solid white;
	padding: 10px;
	outline: 2px solid #dadada;
	border-radius: 10px;
}

.destination-widget:nth-child(even) {
	background: #0d0040;
}

.destination-widget:nth-child(odd) {
	background: #4203cc;
}

.add-destination {
	text-align: right;
}

.button-widget {
	border: 1px solid white;
	display: inline;
	padding: 5px;
	border-radius: 10px;
	background: #ff7100;
	color: white;
	outline: 2px solid #ff7100;
	font-weight: bold;
}

div#page-widget {
	margin: 10px;
	border: 2px solid #2682b2;
	padding: 10px;
	border-radius: 5px;
	background: #002a40;
	outline: 2px solid #1c00cc;
}

a {
	color: #4EA8FF;
	/* default */
	text-decoration: none;
}

a:hover {
	color: #82CFFF;
	/* lighter + brighter */
}

a:active {
	color: #2F7DD1;
	/* slightly darker */
}

a:visited {
	color: #B388FF;
	/* muted purple */
}

.bold {
	font-weight: bold;
}

form#validateToken {
	width: 30%;
	margin-top: 20px;
}

h1 {
	font-size: 1.2em;
	text-align: center;
	font-variant: small-caps;
	letter-spacing: 1.2pt;
	text-shadow: 1px 1px 1px #afb0b2;
}

dl {
	width: 90%;
	margin: auto;
	text-align: justify;
}

dd {
	margin-bottom: 10px;
}

.note {
	font-weight: bold;
	letter-spacing: 1px;
	color: #0092CC;
}

code.header {
	color: #38b3ff;
	font-weight: bold;
	letter-spacing: 1px;
}

.pairs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	font-family: monospace;
	width: fit-content;
}

.center {
	text-align: center;
}

.cursor.hand {
	cursor: hand;
	user-select: none;
}

.viewport-center {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	flex-direction: column;
}

#page-footer {
	text-align: center;
	padding: 10px;
	border: 1px solid rgb(8 152 255);
	outline: 1px solid #007eff;
	border-radius: 0px 0px 10px 10px;
	font-variant: petite-caps;
	letter-spacing: 3px;
	margin: 10px;
}

#login-card {
	width: 380px;
	padding: 30px;
	box-shadow: 0 10px 50px rgb(160 148 148/ 90%);
	background: linear-gradient(90deg, rgb(9 13 15) 0%, rgb(72, 204, 255) 50%, rgb(0, 62, 86) 100%);
	border: 5px solid #595d59;
	border-radius: 5px;
	outline: 5px solid white;
	background: linear-gradient(90deg, rgb(9 13 15) 0%, rgb(72, 204, 255) 50%, rgb(0, 62, 86) 100%)
}

#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.45);
}

.hidden {
	display: none !important;
}

.responses>.result {
	margin: 20px 0;
	padding: 10px;
	border-radius: 10px;
	border: 2px solid black;
	outline: 2px solid white;
	word-break: break-all;
}

.result.inactive {
	background: #a10c0c;
}

.result.active,
.result.successful {
	background: green;
}

.result.failed {
	background: red;
}

.result.unknown {
	background: #690a65;
}

.result .records {
	font-family: monospace;
	background: black;
	margin: 10px;
	padding: 10px;
	border-radius: 10px;
}