:root {
	/* Pure color scales, not changed in dark mode */
	--grey1: #f9f9f9;
	--grey2: #f5f5f5;
	--grey3: #f0f0f0;
	--grey4: #e8e8e8;
	--grey5: #cfcfcf;
	--grey6: #b0b0b0;
	--grey7: #8a8a8a;
	--grey8: #787878;
	--grey9: #595959;
	--grey10: #424242;
	--grey11: #333333;
	--grey12: #222222;
	--grey: var(--grey9);

	--blue1: #f7f9fd;
	--blue2: #f1f7fc;
	--blue3: #e9f2fa;
	--blue4: #ddebf7;
	--blue5: #b7d4ef;
	--blue6: #8fbce6;
	--blue7: #579ad9;
	--blue8: #3d8bd4;
	--blue9: #1070ca;
	--blue10: #084b8a;
	--blue11: #043562;
	--blue12: #032240;
	--blue: var(--blue9);
	--blue-outline: rgba(16, 112, 202, 0.3);

	--red1: #fef7f7;
	--red2: #fef4f4;
	--red3: #fdeded;
	--red4: #fce4e3;
	--red5: #f9c4c2;
	--red6: #f5a19f;
	--red7: #ef6c68;
	--red8: #ec504b;
	--red9: #c6403c;
	--red10: #862b28;
	--red11: #5f1e1c;
	--red12: #3d1412;
	--red: var(--red9);

	--green1: #f4fbf7;
	--green2: #eef9f4;
	--green3: #e4f5ed;
	--green4: #d6efe3;
	--green5: #a6dcc2;
	--green6: #72c89e;
	--green7: #41a775;
	--green8: #3a976a;
	--green9: #307d58;
	--green10: #20543b;
	--green11: #173b29;
	--green12: #0f261a;
	--green: var(--green9);

	/* Primary global variables */
	--bg-color: #fff;
	--modal-bg-color: rgba(255, 255, 255, 0.8);
	--font-stack: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

	/* Depths
	 * Used to display different shades on top of the background color, useful for border
	 * colors, hover styles, etc.
	 */
	--depth1: var(--grey2);
	--depth2: var(--grey3);
	--depth3: var(--grey4);
	--depth4: #dbdbdb;
	--depth5: var(--grey5);
	--depth6: #c0c0c0;

	/* Surfaces
	 * For things that behave like cards – by default use white background + box shadow,
	 * but in dark mode we use different shades of dark grey to show elevation.
	 */
	--surface-1-bg: var(--bg-color);
	--surface-2-bg: var(--bg-color);
	--surface-3-bg: var(--bg-color);
	--surface-4-bg: var(--bg-color);
	--surface-5-bg: var(--bg-color);
	--surface-6-bg: var(--bg-color);

	/* Text */
	--text: var(--grey12);
	--text-sub: var(--grey9);
	--text-muted: var(--grey7);
}

.darkmode {
	--bg-color: #121212;
	--modal-bg-color: rgba(0, 0, 0, 0.7);

	--depth1: #191919;
	--depth2: #202020;
	--depth3: #272727;
	--depth4: #333333;
	--depth5: #414141;
	--depth6: #4f4f4f;

	/* Surfaces
	 * In dark mode, surfaces use --depth backgrounds to show elevation
	 */
	--surface-1-bg: var(--depth1);
	--surface-2-bg: var(--depth2);
	--surface-3-bg: var(--depth3);
	--surface-4-bg: var(--depth4);
	--surface-5-bg: var(--depth5);
	--surface-6-bg: var(--depth6);

	--text: white;
	--text-sub: var(--grey5);
	--text-muted: var(--grey7);
}

body {
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--text);
	font-size: 15px;
	font-family: var(--font-stack);
	background: var(--bg-color);
}

* {
	box-sizing: border-box;
}

/*** Containers (borrowed from bootstrap)
     https://getbootstrap.com/docs/4.5/layout/overview/#containers ***/
.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px) {
	.container, .container-sm {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container, .container-sm, .container-md {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container, .container-sm, .container-md, .container-lg {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container, .container-sm, .container-md, .container-lg, .container-xl {
		max-width: 1140px;
	}
}

/*** Surfaces ***/

.surface-1 {
	background: var(--surface-1-bg);
	box-shadow: var(--btn-outline) 0 0 0 2px;
}
.surface-2 {
	background: var(--surface-2-bg);
	box-shadow: var(--btn-outline) 0 0 0 3px;
}
.surface-3 {
	background: var(--surface-3-bg);
	box-shadow: var(--btn-outline) 0 0 0 5px;
}
.surface-4 {
	background: var(--surface-4-bg);
	box-shadow: var(--btn-outline) 0 0 0 8px;
}
.surface-5 {
	background: var(--surface-5-bg);
	box-shadow: var(--btn-outline) 0 0 0 10px;
}
.surface-6 {
	background: var(--surface-6-bg);
	box-shadow: var(--btn-outline) 0 0 0 10px;
}

/*** Text ***/
.text-muted {
	color: var(--text-muted);
}
.text-sub {
	color: var(--text-sub);
}

/*** Button ***/

.btn {
	--btn-color: var(--depth4);
	--btn-color-hover: var(--depth5);
	--btn-color-active: var(--depth6);
	--btn-text: var(--grey10);
	--btn-outline: var(--depth2);

	vertical-align: top;
	display: inline-flex;
	justify-content: center;
	text-align: center;
	position: relative;
	font-size: 15px;
	font-weight: 500;
	font-family: var(--font-stack);
	text-decoration: none;
	border: none;
	cursor: pointer;
	line-height: 1.4;
	min-height: 2.3em;
	border-radius: 3px;
	padding: 0.4em 0.8em;
	margin: 0;
	background: var(--btn-color);
	color: var(--btn-text);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	/*
	Add transitions back once this chrome bug is fixed (or us empty <script> workaround)
	https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load
	https://bugs.chromium.org/p/chromium/issues/detail?id=332189
	transition: background 0.2s, color 0.2s;
	 */
}
.darkmode .btn {
	--btn-text: white;
}
.btn:hover {
	text-decoration: none;
	background: var(--btn-color-hover);
}
.btn:active {
	background: var(--btn-color-active);
}
.btn:focus {
	z-index: 2; /* so overlapping buttons/inputs are on top */
	outline: none;
	box-shadow: var(--btn-outline) 0 0 0 3px;
}

.btn-sm {
	font-size: 12px;
	padding: 0.33em 0.66em;
}
.btn-lg {
	font-size: 18px;
}
.btn-primary {
	--btn-color: var(--blue9);
	--btn-color-hover: var(--blue10);
	--btn-color-active: var(--blue11);
	--btn-text: white;
	--btn-outline: var(--blue-outline);
}
.btn-positive {
	--btn-color: var(--green9);
	--btn-color-hover: var(--green10);
	--btn-color-active: var(--blue11);
	--btn-text: white;
	--btn-outline: rgba(0, 154, 80, 0.349);
}
.btn-negative {
	--btn-color: var(--red9);
	--btn-color-hover: var(--red10);
	--btn-color-active: var(--red11);
	--btn-text: white;
	--btn-outline: rgba(229, 8, 0, 0.239);
}
.btn-text {
	--btn-color: transparent;
}

.btn[disabled],
.btn-disabled {
	opacity: 0.5;
	pointer-events: none;
}

.btn-full {
	display: flex;
	width: 100%;
}

.menu-btn {
	width: 40px;
	height: 40px;
	position: relative;
	background: transparent;
}
.menu-btn:hover {
	background: transparent;
}
.menu-btn .bar1,
.menu-btn .bar2,
.menu-btn .bar3 {
	position: absolute;
	background: var(--depth6);
	width: 70%;
	height: 5px;
	top: 8px;
	left: 15%;
	border-radius: 3px;
}
.menu-btn:hover .bar1,
.menu-btn:hover .bar2,
.menu-btn:hover .bar3 {
	background: var(--text-muted);
}
.menu-btn .bar2 {
	top: 18px;
}
.menu-btn .bar3 {
	top: 28px;
}

/*** Select Dropdowns ***/

.select {
	display: inline-flex;
	position: relative;
	min-width: 44px; /* make sure at least 10px of text is displayed always, since padding accounts for 34px */
}
.select:after {
	position: absolute;
	content: ' ';
	width: 0;
	height: 0;
	top: 50%;
	margin-top: -2px; /* 1 pixel below vertically centered because it looks cleaner */
	right: 9px;
	border: solid transparent;
	border-width: 6px 5px;
	border-top-color: var(--grey10);
	pointer-events: none;
	z-index: 2; /* >= .select.btn z-index during focus */
}
.darkmode .select:after {
	border-top-color: white;
}
.select select {
	padding-right: 24px;
	text-align: left;
	-moz-appearance: none;
	-webkit-appearance: none;
}
/* arbitrarily increased specificty to override hidden firefox focus color behavior */
.select select.btn:focus {
	color: var(--btn-text);
}
/* Disable ugly ass outline on firefox */
.select select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}
/* Disable default arrow on IE 11+ */
.select select::-ms-expand {
	display: none;
}

/*** Text Input ***/

.text-input {
	display: inline-block;
	vertical-align: top;
	padding: calc(0.4em - 1px) 0.6em;
	margin: 0;
	width: 200px;
	font-size: 15px;
	font-family: var(--font-stack);
	font-weight: 400;
	line-height: 1.4;
	min-height: 2.3em;
	color: var(--text);
	background-color: var(--bg-color);
	background-clip: padding-box;
	border: 1px solid var(--depth4); /* same as btn-color so they're consistent when side-by-side */
	border-radius: 4px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.text-input:focus {
	z-index: 2; /* so overlapping buttons/inputs are on top */
	border-color: var(--blue9);
	outline: 0;
	box-shadow: 0 0 0 0.2rem var(--blue-outline);
}
.text-input-sm {
	font-size: 12px;
}
.text-input-lg {
	font-size: 18px;
}
.text-input[disabled],
.text-input.disabled {
	background-color: var(--depth4);
	color: var(--text-muted);
}

.text-input-full {
	display: block;
	width: 100%;
}

/*** Checkbox ***/

.check-wrap {
	display: inline-block;
	padding: 3px 0 3px 23px;
	line-height: 26px;
	cursor: pointer;
	white-space: nowrap; /* otherwise safari bug adds extra newline inside inline blocks. overridden in .check-text */
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}
.check-wrap:focus {
	border: none;
	outline: none;
	box-shadow: none;
}
.check-wrap-sm {
	padding: 3px 0 3px 21px;
	font-size: 12px;
	line-height: 18px;
}
.check-wrap-lg {
	padding: 4px 0 4px 27px;
	font-size: 16px;
	line-height: 32px;
}
.check-wrap.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.check-wrap svg {
	position: absolute;
	top: 8px;
	left: 0;
	width: 16px;
	height: 16px;
	border: 1px solid var(--depth6);
	background: var(--bg-color);
	border-radius: 3px;
}
.check-wrap:focus svg {
	border-color: var(--blue9);
	outline: 0;
	box-shadow: 0 0 0 0.2rem var(--blue-outline);
}
.check-wrap-sm svg {
	top: 5px;
	left: 0;
	width: 14px;
	height: 14px;
}
.check-wrap-lg svg {
	top: 10px;
	left: 0;
	width: 20px;
	height: 20px;
}
.check-wrap path {
	stroke: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}
.check-wrap.checked path {
	stroke: var(--text-muted);
}
.check-text {
	display: inline-block;
	white-space: normal;
	color: var(--text);
}
.check-text-desc {
	white-space: normal;
	font-size: 12px;
	line-height: 16px;
	color: var(--text-muted);
}

/*** Quick Message Display (fixed position, top of page) ***/

#quick-msg {
	position: fixed;
	z-index: 11000;
	max-width: 90%;
	top: 10px;
	left: 50%;
	opacity: 1;
	transition: opacity 300ms;
}
#quick-msg.hide {
	opacity: 0;
	pointer-events: none;
}
.msg {
	padding: 15px 20px;
	border-radius: 50px;
	font-weight: bold;
	text-align: center;
	color: #000;
}
.msg-white {
	background: #f5f5f5;
	box-shadow: 0 0 6px #999;
}
.msg-green {
	background: #dfd;
	box-shadow: 0 0 6px #4b4;
}
.darkmode .msg-green {
	background: #4b4;
}
.msg-orange {
	background: #fff7f0;
	box-shadow: 0 0 6px #f70;
}
.darkmode .msg-orange {
	background: #f70;
}
.msg-red {
	background: #fdd;
	box-shadow: 0 0 6px #e33;
}
.darkmode .msg-red {
	background: #e33;
}

/*** Modal ***/

.modal-container {
	position: fixed;
	background: var(--modal-bg-color);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	overflow: auto;

	display: none;
	transition: opacity 0.3s;
	opacity: 0;
	pointer-events: none;
}
.modal-no-animation {
	transition: none;
}
.modal-container.displayed {
	display: block;
}
.modal-container.opaque {
	opacity: 1;
	pointer-events: all;
}
.modal-container.fullscreen .modal-scroll {
	padding: 0;
}
.modal-container.fullscreen .modal-body {
	margin: 0;
}
.modal-close-btn {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 2;
}
@media (max-width: 575px) {
	.modal-close-btn {
		width: 30px;
		height: 30px;
		top: 5px;
		right: 5px;
	}
}
.modal-close-btn path {
	fill: none;
	stroke: var(--depth6);
	stroke-width: 1px;
	stroke-linejoin: round;
}
.modal-close-btn:hover path {
	stroke: var(--text-muted);
}
.modal-scroll {
	padding: 20px;
	position: absolute;
	width: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 575px) {
	/* less padding on mobile */
	.modal-scroll {
		padding: 10px;
	}
}
.modal-body {
	background: var(--surface-1-bg);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.47) 0px 4px 10px -4px;
	border-radius: 8px;
	width: 500px;
	max-width: 100%;
	margin: 30px 0;
}
.body-modal-open {
	overflow: hidden;
}

/*** Share ***/

.share {
	font-size: 14px;
	line-height: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.share-input {
	margin: 0 8px;
}
.share-btn {
	min-height: unset;
	line-height: 1;
	padding: 4px;
	display: none;
}

/*** Tag Element ***/

.tag {
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 1;
	text-transform: uppercase;
	background: var(--blue);
	color: white;
	border-radius: 3px;
	padding: 4px 4px 3px 6px;
}
.tag-inline {
	vertical-align: middle;
}

/*** Feedback Widget ***/

.feedback {
	cursor: pointer;
}
.feedback-fixed {
	position: fixed;
	left: 0;
	top: 100px;
	transform: rotate(90deg);
	transform-origin: bottom left;
	border: 1px solid var(--depth5);
	border-bottom: none;
	font-size: 13px;
	padding: 4px 8px;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}
.feedback-inline {
	text-decoration: underline;
}

/* Utility Classes */
.display-none {
	display: none !important;
}

/* Game Options */
.option-wrap + .option-wrap {
	margin-top: 10px;
}
.option-label {
	color: var(--text-sub);
}
.option-desc {
	font-size: 12px;
	color: var(--text-muted);
}
.option-control {
	margin-top: 4px;
	display: flex;
	align-items: center;
}
/* Slider Option */
.option-slider-control {
	display: flex;
	align-items: center;
}
.option-slider-label {
	margin-left: 6px;
	font-size: 13px;
	color: var(--text-sub);
}

/* Tooltip */
.tooltip {
	position: relative;
	cursor: pointer;
	display: inline-block;
}

.tooltip .tooltip-text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	max-width: 300px;
	background-color: var(--grey11);
	color: var(--grey2);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.47) 0px 4px 10px -4px;
	text-align: center;
	padding: 5px 10px;
	border-radius: 4px;
	visibility: hidden;
}

.tooltip:hover .tooltip-text {
	visibility: visible;
}

.link {
	color: var(--blue);
}
.link:visited {
	color: var(--blue);
}