:root {
	color-scheme: dark;
	--page-width: 1216px;
	--body-color: #16181c;
	--container-color: #26292f;
	--theme-color: #1E7EAE;
	--blue: #1cb2fd;
	--input-border-color: #696f75;
	--button-color: hsl(221, 12%, 32%);
	--button-hover-color: hsl(221, 12%, 28%);
	--button-active-color: hsl(221, 12%, 25%);
}

html {
	font-size: 16px;
	margin-right: calc(100% - 100vw);
	overflow-x: hidden;
}

body {
	background-color: var(--body-color);
	color: #e6e6e6;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	margin: 0;
}

input:not([type="range"]),
textarea,
select,
select>option {
	font-size: 1em;
	background-color: var(--container-color);
	color: white;
	border: 1px solid var(--input-border-color);
	border-radius: 3px;
}

textarea,
input:not([type]) {
	padding: 4px;
}

#logo:focus,
textarea:focus,
input:not([type="range"]):focus {
	outline: 1px solid white;
}

input[type="range"]:focus {
	outline: none;
}

button,
input[type="button"] {
	border: none;
	border-radius: 4px;
	padding: 4px 8px;
	background-color: var(--button-color);
	color: inherit;
}

button:hover,
input[type="button"]:hover {
	background-color: var(--button-hover-color);
}

button:active,
input[type="button"]:active {
	background-color: var(--button-active-color);
}

input[type="file"],
input[type="file"]::file-selector-button,
input[type="checkbox"],
input[type="button"],
button {
	cursor: pointer;
}

input[type="checkbox"] {
	transform: scale(1.5);
	vertical-align: middle;
}

input[type="button"]:active {
	outline: none;
}

h1 {
	font-size: 1.75em;
}

h5 {
	font-size: 0.85em;
    margin-block-end: 0.8em;
}

p,
h1,
h2,
h3,
h4,
h5,
hr,
ul {
	margin-block-start: 0;
}

p,
form {
	margin-block-end: 0.9em;
}

p:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
hr:last-child,
ul:last-child {
	margin-block-end: 0;
}

summary {
	margin-block-end: 0.6em;
}

.no-select {
	user-select: none;
}

a.no-link {
	cursor: pointer;
}

a:link,
a:visited,
a.no-link {
	color: var(--blue);
	text-decoration: none;
}

a:link:hover,
a.no-link:hover {
	text-decoration: underline;
}

a.no-style:link,
a.no-style:visited {
	color: inherit;
	text-decoration: none;
}

details {
	display: inline-block;
}

details summary {
	cursor: pointer;
}

.smaller {
	font-size: smaller;
}

ul {
	padding-inline-start: 2em;
}

ul>li,
ol>li {
	margin-bottom: 0.25em;
}

.zoomist-image>img {
	display: block;
}

hr {
	border-color: var(--input-border-color);
	border-style: solid;
	opacity: 0.3;
	margin-block-end: 1em;
	width: 100%;
}

/**/
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#main-container {
	position: relative;
	max-width: var(--page-width);
	margin: 0 auto;
	animation: fadeIn 100ms ease-in;
}

.grid {
	--gap: 0.9em;
	display: grid;
	gap: var(--gap);
	grid-template-columns: 100%;
}

.two-columns {
	display: flex;
	flex-flow: row wrap;
	gap: var(--gap);
}

@media (min-width: 768px) {
	.two-columns>* {
		box-sizing: border-box;
		width: var(--column-w);
	}

	.two-columns>*:not(:last-child) {
		width: calc(var(--column-w) - var(--gap));
	}
}

@media (max-width: 768px) {
	.two-columns {
		flex-direction: column;
	}

	.two-columns.reverse-rows {
		flex-direction: column-reverse;
	}

	.two-columns>* {
		box-sizing: border-box;
		width: 100%;
	}
}

footer {
	text-align: end;
	padding: 1.8rem 0.5rem 0.75rem 0.5rem;
	color: gray;
}

footer > * {
	text-align: left;
}

.grid>footer {
	padding-top: max(1.8rem - var(--gap));
}

.custom-file-input.box {
	padding: 15px 70px 15px 15px;
	outline: 1px dashed lightgray;
	background-size: 61px 61px;
	background-repeat: no-repeat;
	background-position-x: right;
	width: 350px;
}

.line-up-right {
	border-left: 2px solid #6d6d6d;
	border-bottom: 2px solid #6d6d6d;
	border-bottom-left-radius: 6px;
	bottom: 0;
	box-sizing: border-box;
	content: "";
	display: inline-block;
	height: 10px;
	width: 25px;
	left: -36px;
	margin: 0 4px 2px 5px;
}

.card {
	background-color: var(--container-color);
	border-radius: 5px;
	padding: 0.75rem 1.25rem;
}

/* Header */
header {
	width: 100%;
	background-color: var(--theme-color);
	margin-bottom: 0.75rem;
}

#header-content {
	max-width: var(--page-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	animation: fadeIn 100ms ease-in;
}

#logo {
	display: flex;
	align-items: center;
	user-select: none;
}

#logo>img {
	width: 3em;
	height: 3em;
}

#logo>span {
	font-size: 1.4em;
	user-select: none;
	padding-left: 0.7em;
}

@media (max-width: 400px) {
	#logo>span {
		display: none;
	}
}

#header-content {
	padding-left: 1.25rem;
}

#header-content nav {
	display: inline-block;
	margin-left: 3vw;
}

#header-content nav .dropdown .content {
	font-size: 1.2em;
}

#header-content nav .dropdown .text {
	font-size: 1.2em;
	font-weight: initial;
	display: inline-block;
	margin-block-start: 0.7em;
	margin-block-end: 0.7em;
}

#header-content nav .dropdown .content>a {
	background-color: var(--button-color);
}

#header-content nav .dropdown .content>a.active {
	background-color: var(--theme-color);
}

#header-content nav .dropdown .content>a:not(.active):hover,
#header-content nav .dropdown .content>a:not(.active):focus {
	background-color: var(--button-hover-color);
}

/* Help Circles */
.help-circle {
	display: inline-block;
	line-height: 0px;
	border-radius: 50%;
	border: 2px solid;
	color: darkgray;
	vertical-align: middle;
	font-size: 0.94em;
	cursor: help;
}

.help-circle>.text {
	display: inline-block;
	padding-top: 50%;
	padding-bottom: 50%;
	margin-left: 3px;
	margin-right: 3px;
	user-select: none;
}

@media (pointer: coarse) {
	.help-circle {
		font-size: unset;
		margin: 10px 0;
		border-radius: 30%;
	}

	.help-circle>.text {
		padding-top: 30%;
		padding-bottom: 30%;
		margin-left: 10px;
		margin-right: 10px;
	}
}

/* Tooltips */
.tooltip-ref {
	position: relative;
}

.tooltip-ref {
	pointer-events: none;
}

.tooltip-ref * {
	pointer-events: initial;
}

/* acts as bridge to content for hovering over it */
.tooltip-ref>.tooltip-space {
	display: none;
	position: absolute;
	left: 0;
	top: 40%;
	width: 96px;
	height: 35px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	border-top-left-radius: 100%;
	border-top-right-radius: 100%;
}

.tooltip-ref[data-show-above]>.tooltip-space {
	top: -100%;
	height: 35px;
	transform: translateX(-50%);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 100%;
	border-bottom-right-radius: 100%;
}

.tooltip-content {
	display: none;
	position: fixed;
	padding: 8px;
	max-width: min(360px, calc(100vw - 25px));
	background-color: var(--body-color);
	border-radius: 3px;
	outline: 1px dashed rgba(128, 128, 128, 0.35);
	box-shadow: 6px 6px 15px -8px rgba(0, 0, 0, 0.75);
	z-index: 10001;
}

/* Dropdowns */
.dropdown {
	cursor: pointer;
	user-select: none;
	position: relative;
}

.dropdown .content {
	display: none;
	position: absolute;
	top: 100%;
	left: -4px;
	z-index: 1;
	width: calc(100% + 8px);
	min-width: max-content;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
	clip-path: inset(0 -50px -50px -50px);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.dropdown.open .content {
	display: unset;
	overflow: hidden;
}

.dropdown.open .content>a {
	display: block;
	padding: 8px 4px;
	overflow: hidden;
}

.dropdown>.text {
	pointer-events: none;
}

.dropdown>.arrow {
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23ffffff%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20330%20330%22%20style%3D%22enable-background%3Anew%200%200%20330%20330%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20id%3D%22XMLID_225_%22%20d%3D%22M325.607%2C79.393c-5.857-5.857-15.355-5.858-21.213%2C0.001l-139.39%2C139.393L25.607%2C79.393%20c-5.857-5.857-15.355-5.858-21.213%2C0.001c-5.858%2C5.858-5.858%2C15.355%2C0%2C21.213l150.004%2C150c2.813%2C2.813%2C6.628%2C4.393%2C10.606%2C4.393%20s7.794-1.581%2C10.606-4.394l149.996-150C331.465%2C94.749%2C331.465%2C85.251%2C325.607%2C79.393z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-size: 76%;
	background-position: center;
	display: inline-block;
	vertical-align: middle;
	border-radius: 4px;
	pointer-events: none;
	margin-left: 4px;
}

.dropdown.open>.arrow {
	transform: scaleY(-1);
}

.dropdown:hover>.arrow,
.dropdown.open>.arrow {
	background-color: rgba(255, 255, 255, 0.3);
}

/* Chips */
.radio-chips>label {
	background-color: var(--button-color);
	border-radius: 4px;
	padding: 5px;
	cursor: pointer;
	display: inline-block;
	user-select: none;
}

.radio-chips>label:hover {
	background-color: var(--button-hover-color);
}

.radio-chips>label:active {
	background-color: var(--button-active-color);
}

.radio-chips>label>input[type="radio"] {
	appearance: none;
	width: 0;
	margin: 0;
	border: none;
	outline: none;
}

.radio-chips>label:has(input[type="radio"]:checked) {
	outline: 2px solid #919191;
}

.radio-chips>label:has(input[type="radio"]:focus-visible) {
	outline-color: white;
	outline-offset: 2px;
}

@supports (-moz-appearance:none) {
	.radio-chips>label[data-chk] {
		outline: 2px solid var(--blue);
	}

	.radio-chips>label[data-fcs] {
		outline-color: white !important;
		outline-offset: 2px;
	}
}

/* Range Inputs */
input[type="range"] {
	appearance: none;
	height: 4px;
	width: 200px;
	background-color: var(--input-border-color);
}

input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	height: 16px;
	width: 16px;
	background-color: white;
	border-radius: 0;
	cursor: ew-resize;
	border: none;
	border-radius: 3px;
}

input[type="range"]::-moz-range-thumb {
	appearance: none;
	height: 16px;
	width: 16px;
	background-color: white;
	border-radius: 0;
	cursor: ew-resize;
	border: none;
	border-radius: 3px;
}

input[type="range"]::-ms-thumb {
	appearance: none;
	height: 16px;
	width: 16px;
	background-color: white;
	border-radius: 0;
	cursor: ew-resize;
	border: none;
	border-radius: 3px;
}

input[type="range"]:focus::-webkit-slider-thumb {
	outline: 1px solid white;
	outline-offset: 2px;
}

input[type="range"]:focus::-ms-slider-thumb {
	outline: 1px solid white;
	outline-offset: 2px;
}

input[type="range"]:focus::-moz-range-thumb {
	outline: 1px solid white;
	outline-offset: 2px;
}

/* Checkboxes */
input[type="checkbox"] {
	appearance: none;
	margin: 3px 3px 3px 4px;
	font: inherit;
	color: white;
	width: 0.9em;
	height: 0.9em;
	border: 0.1em solid var(--input-border-color);
	border-radius: 0.15em;
	display: inline-block;
	position: relative;
}


input[type="checkbox"]::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: "";
	display: inline-block;
	background-color: white;
	clip-path: polygon(15% 35%, 38% 56%, 84% 8%, 100% 24%, 38% 88%, 0 51%);
}

input[type="checkbox"]:checked::before {
	width: 0.55em;
	height: 0.55em;
}

input[type="checkbox"]:disabled {
	color: #959495;
	cursor: not-allowed;
}

/* IcoMoon */
@font-face {
	font-family: "icomoon";
	src: url("assets/icomoon.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

i.i {
	font-family: "icomoon" !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 0 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

i.i.arrow-u:before {
	content: "\e908";
}

i.i.arrow-d:before {
	content: "\e909";
}

i.i.arrow-l:before {
	content: "\e90a";
}

i.i.arrow-r:before {
	content: "\e90b";
}

i.i.arrow-long-u:before {
	content: "\e907";
}

i.i.arrows-u-d:before {
	content: "\e900";
}

i.i.rotate-l:before {
	content: "\e901";
}

i.i.rotate-l-2:before {
	content: "\e902";
}

i.i.rotate-l-3:before {
	content: "\e903";
}

i.i.rotate-r:before {
	content: "\e904";
}

i.i.x:before {
	content: "\e905";
}

i.i.arrows-l-r:before {
	content: "\e906";
}