:root {
	--white: #ffffff;
	--black: #000000;
	--rosewater: #f5e0dc;
	--flamingo: #f2cdcd;
	--pink: #f5c2e7;
	--mauve: #cba6f7;
	--red: #f38ba8;
	--maroon: #eba0ac;
	--peach: #fab387;
	--yellow: #f9e2af;
	--light-green: #b5e8b0;
	--green: #3a8f46;
	--teal: #94e2d5;
	--sky: #89dceb;
	--sapphire: #74c7ec;
	--blue: #89b4fa;
	--lavender: #b4befe;
	--text: #cdd6f4;
	--subtext1: #bac2de;
	--subtext0: #a6adc8;
	--overlay2: #9399b2;
	--overlay1: #7f849c;
	--overlay0: #6c7086;
	--surface2: #585b70;
	--surface1: #45475a;
	--surface0: #313244;
	--base: #1e1e2e;
	--mantle: #181825;
	--crust: #11111b;
	--modal-backdrop: rgba(49, 50, 68, 0.45); /* For Mocha theme */

	/* Bright theme (Latte) colors */
	--bright-white: #000000;
	--bright-black: #ffffff;
	--bright-rosewater: #dc8a78;
	--bright-flamingo: #dd7878;
	--bright-pink: #ea76cb;
	--bright-mauve: #8839ef;
	--bright-red: #d20f39;
	--bright-maroon: #e64553;
	--bright-peach: #fe640b;
	--bright-yellow: #df8e1d;
	--bright-light-green: #52b05d;
	--bright-green: #1b9200;
	--bright-teal: #179299;
	--bright-sky: #04a5e5;
	--bright-sapphire: #209fb5;
	--bright-blue: #1e66f5;
	--bright-lavender: #7287fd;
	--bright-text: #4c4f69;
	--bright-subtext1: #5c5f77;
	--bright-subtext0: #6c6f85;
	--bright-overlay2: #7c7f93;
	--bright-overlay1: #8c8fa1;
	--bright-overlay0: #9ca0b0;
	--bright-surface2: #acb0be;
	--bright-surface1: #bcc0cc;
	--bright-surface0: #ccd0da;
	--bright-base: #eff1f5;
	--bright-mantle: #e6e9ef;
	--bright-crust: #dce0e8;
	--bright-modal-backdrop: rgba(220, 224, 232, 0.45);
}

[data-theme='bright'] {
	--white: var(--bright-white);
	--black: var(--bright-black);
	--rosewater: var(--bright-rosewater);
	--flamingo: var(--bright-flamingo);
	--pink: var(--bright-pink);
	--mauve: var(--bright-mauve);
	--red: var(--bright-red);
	--maroon: var(--bright-maroon);
	--peach: var(--bright-peach);
	--yellow: var(--bright-yellow);
	--light-green: var(--bright-light-green);
	--green: var(--bright-green);
	--teal: var(--bright-teal);
	--sky: var(--bright-sky);
	--sapphire: var(--bright-sapphire);
	--blue: var(--bright-blue);
	--lavender: var(--bright-lavender);
	--text: var(--bright-text);
	--subtext1: var(--bright-subtext1);
	--subtext0: var(--bright-subtext0);
	--overlay2: var(--bright-overlay2);
	--overlay1: var(--bright-overlay1);
	--overlay0: var(--bright-overlay0);
	--surface2: var(--bright-surface2);
	--surface1: var(--bright-surface1);
	--surface0: var(--bright-surface0);
	--base: var(--bright-base);
	--mantle: var(--bright-mantle);
	--crust: var(--bright-crust);
	--modal-backdrop: var(--bright-modal-backdrop);
}

@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_gPq_ROW9.ttf)
		format('truetype');
}
@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW9.ttf)
		format('truetype');
}

html {
	padding: 0 30px;
	background-color: var(--base);
	color: var(--text);
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	font-weight: normal;
}
body {
	max-width: 1200px;
	margin: 5em auto 0 auto;
}
pre,
code {
	display: inline;
	font-family: 'Roboto Mono', monospace;
	font-size: 16px;
}

input {
	font-family: 'Roboto Mono', monospace;
	color: var(--text);
	border-style: none;
	height: 21px;
	font-size: 16px;
}
button {
	font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: normal;
}
h2 {
	margin: 0 0 45px 0;
	color: var(--lavender);
	font-size: 36px;
}
h3 {
	margin: 0 0 2rem 0;
	color: var(--lavender);
	font-size: 32px;
}
p {
	margin: 0 0 45px;
	line-height: 1.8;
}
ul {
	margin: 0 0 32px;
}
a {
	transition: border 0.2s ease-in-out;
	border-bottom: 1px solid transparent;
	text-decoration: none;
	color: var(--blue);
}
a:hover {
	border-bottom-color: var(--blue);
}
li {
	line-height: 1.8;
}
li strong {
	color: var(--text);
}
.image {
	width: 100%;
	margin: 0 0 32px;
	padding: 0;
}
.image img {
	width: 100%;
}
.optanon-alert-box-wrapper {
	left: 0;
}
.hidden {
	display: none !important;
}
.hide-mobile {
	display: none;
}
@media (min-width: 680px) {
	body {
		margin: 8em auto 0 auto;
	}
	.hide-mobile {
		display: initial;
	}
}

.button-dark {
	transition:
		border-color 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	color: var(--white);
	text-transform: uppercase;
	font-weight: 500;
	padding: 18px 28px;
	letter-spacing: 1px;
	cursor: pointer;
	background-color: transparent;
	border: 1px solid var(--surface1);
	margin: 2px;
}
.button-dark:hover {
	border-color: var(--text);
}
.button-colorful {
	transition:
		border-color 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	color: var(--white);
	text-transform: uppercase;
	font-weight: 500;
	padding: 18px 28px;
	letter-spacing: 1px;
	cursor: pointer;
	background-color: var(--mauve);
	border: 1px solid var(--mauve);
}
.button-colorful:hover {
	background-color: var(--bright-mauve);
	border-color: var(--bright-mauve);
}
.button-orange {
	transition:
		border-color 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	color: var(--white);
	text-transform: uppercase;
	font-weight: 500;
	padding: 18px 28px;
	letter-spacing: 1px;
	cursor: pointer;
	background-color: var(--peach);
	border: 1px solid var(--peach);
}
.button-orange:hover {
	background-color: var(--bright-peach);
	border-color: var(--bright-peach);
}
.button-colorful:disabled {
	transition:
		border-color 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	color: var(--white);
	text-transform: uppercase;
	font-weight: 500;
	padding: 18px 28px;
	letter-spacing: 1px;
	cursor: pointer;
	background-color: var(--overlay0);
	border: 1px solid var(--overlay0);
}
.hero-container {
	max-width: 795px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto 70px auto;
}
.hero-container .hero-logo {
	margin-top: 88px;
	margin-bottom: 32px;
}
.hero-container .hero-subtitle {
	font-size: 20px;
	text-align: center;
	line-height: 32px;
	margin: 0 0 45px 0;
}
.hero-container .hero-buttons-container {
	display: flex;
}
.hero-container .hero-buttons-container button {
	margin: 0 8px;
}
@media (min-width: 680px) {
	.hero-container {
		margin: 0 auto 140px auto;
	}
}

.container {
	transition: opacity 0.2s ease-in-out;
	color: var(--white);
	letter-spacing: 0;
	opacity: 1;
}

.container .content {
	width: 100%;
	flex-grow: 1;
}
.container .content .step-title {
	color: var(--white);
	font-size: 20px;
	font-weight: 500;
	line-height: 86px;
	opacity: 1;
}
.container .content .step-subtitle {
	position: relative;
	top: -5px;
	font-size: 16px;
	font-weight: 300;
}

@media (max-width: 680px) {
	.container .content {
		margin-top: 120px;
	}
}

@media (min-width: 680px) {
	.container {
		position: relative;
		left: 100px;
		display: flex;
		width: calc(100% - 100px);
		padding: 0;
	}
	.container .content {
		max-width: 795px;
	}
	.container .content .step-title {
		font-size: 36px;
	}
}
.input-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	background-color: var(--surface0);
	border-radius: 3px;
	font-family: 'Roboto Mono', monospace;
	font-size: 13px;
}
.input-box .label {
	margin: 0 1ch 0 0;
	font-size: 16px;
}
.input-box .input {
	background-color: var(--surface1);
	border: 3px solid var(--surface1);
	border-radius: 6px;
	outline: none;
	width: 100%;
	max-width: 444px;
	font-size: 13px;
}
@media (min-width: 680px) {
	.input-box {
		padding: 10px;
	}
}
.btn-container {
	display: flex;
	justify-content: space-between;
	align-items: first baseline;
}
@media (max-width: 680px) {
	.btn-container {
		align-items: flex-start;
	}
	.btn-container p {
		margin-left: 1rem;
	}
}
.button-group {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

.btn {
	font-family: 'Roboto Mono', monospace;
	letter-spacing: 1px;
	padding: 18px 28px;
	border: 1px solid;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition:
		border-color 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	border-radius: 5px;
}

.btn.primary {
	background-color: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

.btn.primary:hover {
	background-color: var(--sapphire);
	border-color: var(--sapphire);
}

.btn.danger {
	background-color: var(--red);
	border-color: var(--red);
	color: var(--white);
}

.btn.danger:hover {
	background-color: var(--maroon);
	border-color: var(--maroon);
}
.warning {
	margin: 20px 0;
	padding: 1rem;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--surface0);
	border: 1px solid var(--red);
	color: var(--red);
	border-radius: 6px;
	font-size: 16px;
}
.warning a {
	color: var(--red);
	text-decoration: underline;
}
.warning.hidden {
	display: none;
}

.error {
	margin-top: 10rem;
	padding: 30px 40px;
	background: var(--surface0);
	color: var(--text);
}
.error p {
	margin: 0 0 1rem;
}
.error p.intro {
	font-size: 1.3rem;
}
.error .button-colorful {
	display: inline-block;
}
@media (min-width: 680px) {
	.error {
		padding: 65px 80px;
	}
}

.footer-branding-container {
	color: var(--white);
	font-weight: 300;
	margin-bottom: 73px;
}

.footer-branding-container .footer-branding {
	display: flex;
	width: 400px;
}
.footer-branding-container .footer-branding {
	flex-direction: column;
	text-align: center;
	margin: 30px 0 0;
}
.footer-branding-container .footer-branding .footer-crafted-by-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	color: var(--white);
}
.footer-branding-container .footer-branding .footer-crafted-by-container span {
	display: inline-block;
	margin: 3px 1ch 0 0;
}
.footer-branding-container
	.footer-branding
	.footer-crafted-by-container
	.footer-branded-crafted-img {
	height: 28px;
}

.footer-branding-container .footer-branding .footer-copyright {
	color: var(--overlay0);
	letter-spacing: 0.5px;
}
.footer-container {
	width: 100%;
	color: var(--white);
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (min-width: 680px) {
	.footer-container {
		padding: 0;
	}
}

.simple-loader {
	--b: 20px; /* border thickness */
	--n: 15; /* number of dashes*/
	--g: 7deg; /* gap  between dashes*/
	--c: var(--mauve); /* Changed loader color to match theme */

	width: 40px; /* size */
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 1px; /* get rid of bad outlines */
	background: conic-gradient(#0000, var(--c)) content-box;
	--_m: /* we use +/-1deg between colors to avoid jagged edges */ repeating-conic-gradient(
			#0000 0deg,
			#000 1deg calc(360deg / var(--n) - var(--g) - 1deg),
			#0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n))
		),
		radial-gradient(farthest-side, #0000 calc(98% - var(--b)), var(--black) calc(100% - var(--b)));
	-webkit-mask: var(--_m);
	mask: var(--_m);
	-webkit-mask-composite: destination-in;
	mask-composite: intersect;
	animation: load 1s infinite steps(var(--n));
}
@keyframes load {
	to {
		transform: rotate(1turn);
	}
}