/* Graphik */
@font-face {
  font-family: 'Graphik';
  src: url('https://cdn.lvlex.link/fonts/Graphik-Regular-Trial.otf') format('opentype'), url('/fonts/Graphik-Regular-Trial.otf') format('opentype');
}

/* Rogan */
@font-face {
  font-family: 'Rogan';
  font-style: bold;
  src: url('https://cdn.snke.link/fonts/rogan-bold.woff2') format('woff2'), url('/fonts/rogan-bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Rogan';
  font-weight: normal;
  src: url('https://cdn.snke.link/fonts/rogan.woff2') format('woff2'), url('/fonts/rogan.woff2') format('woff2');
}

/* Apis */
@font-face {
  font-family: 'Apis';
  font-weight: normal;
  src: url('https://cdn.lvlex.link/fonts/Apis-Regular.ttf') format('truetype'), url('/fonts/Apis-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Apis';
  font-weight: bold;
  src: url('https://cdn.lvlex.link/fonts/Apis-Bold.ttf') format('truetype'), url('/fonts/Apis-Bold.ttf') format('truetype');
}

/* Open Sans */
@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  src: url('https://cdn.snke.link/fonts/open-sans-v29-latin-regular.woff2') format('woff2'), url('/fonts/open-sans-v29-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: normal;
  src: url('https://cdn.snke.link/fonts/open-sans-v29-latin-600.woff2') format('woff2'), url('/fonts/open-sans-v29-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: bold;
  src: url('https://cdn.snke.link/fonts/open-sans-v29-latin-700.woff2') format('woff2'), url('/fonts/open-sans-v29-latin-700.woff2') format('woff2');
}

/* Rift */
@font-face {
  font-family: 'Rift';
  font-weight: normal;
  src: url('https://cdn.lvlex.link/fonts/rift-soft.otf') format('opentype'), url('/fonts/rift-soft.otf') format('opentype');
}

@font-face {
  font-family: 'Rift';
  font-weight: bold;
  src: url('https://cdn.lvlex.link/fonts/rift-bold.otf') format('opentype'), url('/fonts/rift-bold.otf') format('opentype');
}

/* Roboto */
@font-face {
  font-family: 'Roboto';
  font-weight: normal;
  src: url('https://cdn.snke.link/fonts/roboto-v30-latin-regular.woff2') format('woff2'), url('/fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-weight: bold;
  src: url('https://cdn.snke.link/fonts/roboto-v30-latin-500.woff2') format('woff2'), url('/fonts/roboto-v30-latin-500.woff2') format('woff2');
}

:root {
  --primary-color: #1D1F26;
  --secondary-color: #575757;
  --tertiary-color: #6C6C6C;
  --default-font: 'Open Sans';
  --font-color: #E1E3E0;
  --disabled-button: rgba(225, 227, 224, .12);
  --input-fields: rgba(225, 227, 224, .08);
  --error-text: #FFB4AB;
  --valid-text: #B8F86D;
  --optional: #9EA6A2;
  --checkbox: #fff;
  --isi-header-font-color: #000;
  --isi-header-background-color: #E3E5E9;
  --isi-background: #D8DFE4;
  --isi-body-text-color: #444;
  --isi-body-title-color: var(--isi-body-text-color);
  --isi-link-color: blue;
  --isi-font: 'Open Sans';
  --isi-enabled-button: var(--isi-header-background-color);
  --isi-disabled-button: rgba(225, 227, 224, .12);
  --isi-disabled-button-font-color: #191C1B;
  --isi-enabled-button-font-color: var(--isi-body-text-color);
  --scrollbar: #808080;
  --scrollbar-track: var(--isi-background);
}


.registration-window,
.isi-window,
.intro-window {
  width: 100%;
  height: 100vh; /* fallback for anyone with an ancient browser... causes scrolling on modern flagship devices (which should support dvh below)*/
  height: 100dvh;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  font-size: 16px;
  font-family: var(--default-font), 'Open Sans', Helvetica, Arial, serif;
  color: white;
  background-image: url('data:image/svg+xml;utf8,<svg width="1715" height="1302" viewBox="0 0 1715 1302" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="1715" height="1302" fill="url(%23paint0_linear_7131_15522)"/><defs><linearGradient id="paint0_linear_7131_15522" x1="460" y1="-5.62126e-06" x2="800" y2="1302" gradientUnits="userSpaceOnUse"><stop stop-color="%234B5D71"/><stop offset="1" stop-color="%232C3642"/></linearGradient></defs></svg>');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  scroll-padding-top: 0 !important;
  /* helps fix iOS Safari auto scroll */
  user-select: none;
  justify-content: center;
  align-content: center;
  display: grid;
  overflow-y: hidden;
}

.registration-window .container,
.registration-window .decoration-container {
  /* center the containers */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 642px;
  width: 360px;
  user-select: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.9);
  border-radius: 6px;
  margin: auto;
}

.registration-window .container {
  background: var(--primary-color);
}

.registration-window .decoration-container {
  pointer-events: none; /* lets the decorations be above the fields without blocking functionality */
  overflow: hidden;
}

.registration-window .header-logo {
  display: flex;
  height: 80px;
  margin: 0 auto;
  align-items: center;
}

.registration-window .header-logo img {
  max-height: 100px;
  max-width: 250px;
}

.registration-window .header-logo.left {
  margin-left: 24px;
}

.registration-window .header-logo.full {
  margin: 0 auto;
}

.registration-window .header-logo.full img {
  position: relative;
  top: -5px;
  max-width: 100%;
  max-height: none;
}

.registration-window .header-logo.oversized {
  height: 140px;
}

.registration-window .header-logo.oversized img {
  max-width: 360px;
  max-height: 205px;
  position: relative;
  top: 22px;
  border-radius: 6px;
}

.header {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  top: 10px;
  justify-content: center;
  align-content: center;
}

.header h2 {
  font-size: 20px;
  color: var(--font-color);
  text-align: center;
  margin: 12px auto;
  font-weight: 400;
  min-height: 27px;
}

.header h2.left {
  margin-left: 24px;
}

.header-toprow {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  width: 360px;
  align-items: center;
}

.header-toprow.full {
  grid-template-columns:auto;
}

.header .back-btn {
  position: relative;
  left: 12px;
}

.header .header-divider {
  width: 100%;
  border-bottom: 1px solid var(--divider);
}

.registration-window form {
  padding-top: 8px;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* all buttons get a wiggle */
.registration-window button:hover,
.header .back-btn:hover,
.isi-window button:hover,
.intro-window button:hover {
  transform: translate(-1px, -1px);
}

.registration-window button:active,
.header .back-btn:active,
.isi-window button:active,
.intro-window button:active {
  transform: translate(1px, 1px);
}

.registration-window input:focus {
  background-color: var(--input-fields);
  color: var(--font-color);
}

.registration-window .registration-fields {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  height: inherit;
}

.registration-window .form-group {
  display: grid;
  margin: 8px auto;
  height: 52px;
  width: 312px;
}

.registration-window .form-group.long-label {
  position: relative;
  height: 120px;
}

.registration-window .form-group.numberbox {
  height: 80px;
}

.registration-window input {
  width: 298px;
  height: 44px;
  background-color: var(--input-fields);
  color: var(--font-color);
  outline: none;
  border-radius: 4px 4px 0 0;
  border-style: none;
  font-size: 16px;
  padding: 8px 6px 0px 8px;
}

.form-group label {
  position: relative;
  left: 10px;
  top: -38px;
  transition: 0.2s ease all;
  color: var(--font-color);
}

.form-group label.number-box {
  top: -60px;
  left: 0px;
}

.form-group label.long-label {
  position: relative;
  top: -74px;
  font-size: 14px;
}

label {
  pointer-events: none;
}

/* TODO: Empty optional fields need to behave the same as required fields*/
.registration-window .form-group input:focus:not([type="checkbox"])~label,
.registration-window .form-group input:required:valid:not([type="checkbox"])~label,
.registration-window .form-group select:focus~label,
.registration-window .form-group select:required:valid~label,
.registration-window .form-group input:optional:not(:placeholder-shown):not([type="checkbox"])~label,
.registration-window .form-group select~label.valid-label {
  position: relative;
  left: 10px;
  top: -51px;
  font-size: 11px;
}

/* long labels sit outside the input box, so we dont need to shrink them when clicked. */
.registration-window .form-group input:focus:not([type="checkbox"])~label.long-label,
.registration-window .form-group input:required:valid:not([type="checkbox"])~label.long-label,
.registration-window .form-group select:focus~label.long-label,
.registration-window .form-group select:required:valid~label.long-label,
.registration-window .form-group input:optional:not(:placeholder-shown):not([type="checkbox"])~label.long-label,
.registration-window .form-group select~label.valid-label.long-label {
  position: relative;
  left: 10px;
  top: -74px;
  font-size: 14px;
}

.form-group select {
  height: 52px;
  width: 312px;
  background-color: var(--input-fields);
  color: var(--font-color);
  outline: none;
  border-radius: 4px 4px 0 0;
  border-style: none;
  padding: 8px 6px 0px 6px;
  font-size: 16px;
}

.registration-window input.long-label,
.form-group select.long-label {
  position: relative;
  top: 50px;
}

.form-group select option {
  background-color: var(--dropdown-menu);
  color: var(--font-color);
  font-size: 16px;
}

.registration-window .form-group input[type=checkbox] {
  appearance: none;
  border-radius: 5px;
  border: 1px solid var(--checkbox);
  background-color: var(--input-fields);
  height: 19px;
  width: 19px;
  vertical-align: middle;
  position: relative;
}

.registration-window .form-group input[type=checkbox]:checked:after {
  content: '\2714';
  font-size: 16px;
  position: relative;
  top: -11px;
  left: -6px;
  color: var(--font-color);
}

.registration-window input[type=checkbox]~label {
  left: 32px;
  top: -28px;
}

.form-group .optional {
  color: var(--optional);
  font-size: 10px;
  margin-top: -16px;
}

.form-group label.valid {
  color: var(--valid-text);
}

.form-group label.error {
  color: var(--error-text);
}

.form-group input.valid,
.form-group select.valid {
  border-bottom: 1px solid var(--valid-text);
}

.form-group input.number-box-input.valid,
.form-group input.number-box-input.error {
  border-bottom: none;
}

.form-group input.error,
.form-group select.error {
  border-bottom: 1px solid var(--error-text);
}

input[type=checkbox].error {
  border: 1px solid var(--error-text);
}

input[type=checkbox].valid {
  border: 1px solid var(--valid-text);
}

.toggle-label-checkbox-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  width: 312px;
}

.toggle-label-checkbox-container label {
  top: 3px;
  flex: 3;
}

/* checkbox that is actually a toggle */
/* Hide default HTML checkbox */
.toggle-container {
  position: relative;
  display: flex;
  top: 0px;
  padding-left: 8px;
}

.registration-window .form-group .toggle-container input[type=checkbox] {
  appearance: none;
  height: 30px;
  width: 50px;
  left: 0px;
  border: none;
}

.registration-window .form-group .toggle-container input[type=checkbox]:checked:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
}

.toggle-container input.checkbox-toggle {
  position: absolute;
}

/* Number Boxes */
.registration-window .number-boxes-container {
  position: relative;
  width: 300px;
  height: 52px;
  top: 10px;
}

.registration-window .number-boxes-squares {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 15px 0 auto;
  padding-bottom: 15px;
  height: 100%;
  width: 100%;
}

.registration-window .number-boxes-container .number-input {
  height: 100%;
  margin: 15px 0 auto;
  position: absolute;
  top: 0px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.registration-window .number-boxes-squares .num-container {
  /* designing the boxes */
  flex: 1;
  aspect-ratio: 1/1;
  border-width: 4px;
  max-width: 50px;
  border-color: #43434D;
  background: var(--input-fields);
  box-shadow: inset 0px -1px 0px rgba(0,0,0, .2), inset 0px 4px 16px rgba(0,0,0,.2);
  border-radius: 8px;
  margin: 0 3px;
}

.registration-window .number-input-container input {
  position: absolute;
  background: unset;
}

.registration-window .number-box-input {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 40px;
  letter-spacing: 30px;
  border-width: 0;
  box-sizing: border-box;
  line-height: 44px;
  height: 44px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: relative;
  left: 24px;
}

.registration-window input.number-box-input:focus {
  background: transparent;
}

/* The slider */
.toggle-container .knobs {
  position: relative;
  top: 4px;
  left: -54px;
  z-index: -1;
}

.toggle-container .knobs:before {
  content: "No";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 10px;
  color: var(--disabled-button-font-color);
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: var(--disabled-button);
  border-radius: 2px;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

.toggle-container .checkbox-toggle:active+.knobs:before {
  width: 46px;
}

.toggle-container .checkbox-toggle:checked:active+.knobs:before {
  margin-left: -26px;
}

.toggle-container .checkbox-toggle:checked+.knobs:before {
  content: "Yes";
  color: var(--enabled-button-font-color);
  left: 22px;
  background-color: var(--enabled-button);
}

.form-group .toggle-container+label {
  position: relative;
  top: -50px;
}

/* Autofill Styling Overrides */

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group textarea:-webkit-autofill,
.form-group textarea:-webkit-autofill:hover,
.form-group textarea:-webkit-autofill:focus,
.form-group select:-webkit-autofill,
.form-group select:-webkit-autofill:hover,
.form-group select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--font-color);
  transition: background-color 50000s ease-in-out 0s !important;
  font-weight: 500;
  font-size: 16px;
}

.text-short-err,
.text-long-err,
.email-err {
  font-size: 10px;
  color: var(--error-text);
  margin-top: -16px;
}

.registration-window .optIn-group,
.registration-window .termsOfUse {
  height: 60px;
  width: 312px;
  font-size: 12px;
  display: grid;
}

.registration-window .termsOfUse {
  height: 100px;
  padding-top: 10px;
}

.registration-window .termsOfUse.standalone {
  position: absolute;
  top: 140px;
  height: 100px;
  width: 312px;
  font-size: 12px;
}

.registration-window .optIn-group input,
.registration-window .termsOfUse input {
  appearance: none;
  border-radius: 5px;
  border: 1px solid var(--checkbox);
  background-color: var(--input-fields);
  height: 19px;
  width: 19px;
  vertical-align: middle;
}

.registration-window .optIn-group input:checked:after,
.registration-window .termsOfUse input:checked:after {
  content: '\2714';
  font-size: 16px;
  position: relative;
  top: -11px;
  left: -6px;
  color: var(--font-color);
}

.registration-window .optIn-group label,
.registration-window .termsOfUse label {
  margin-left: 6px;
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  color: var(--font-color);
}

.registration-window .optIn-group label .text,
.registration-window .termsOfUse label {
  pointer-events: all; /* users can click the hyperlinks */
}

.registration-window .disclaimer {
  position: absolute;
  bottom: 80px;
  margin: auto 24px;
  height: 70px;
  color: var(--font-color);
}

.registration-window .disclaimer .text {
  display: flex;
  align-items: flex-end; /* disclaimer text will hug continue button regardless of length*/
  font-size: 11px; /* Anything larger than 11pm will overlap because of the absolute bottom used above */
  pointer-events: all; /* users can click the hyperlinks */
}

.registration-window .transparent-text,
.registration-window .transparent-text {
  visibility: hidden /* invisible but size is still calculable by the DOM */
}

.registration-window .button-group {
  position: absolute;
  bottom: 22px;
  width: 312px;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.button-group button.disabled {
  background: var(--disabled-button);
  color: var(--disabled-button-font-color)
}

.button-group button {
  width: inherit;
  height: inherit;
  color: var(--enabled-button-font-color);
  background: var(--enabled-button);
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-shadows);
  border-style: none;
  transition: 0.2s ease all;
  font-family: var(--button-font);
  font-size: var(--button-font-size);
}

/* if the button is borderless when queueing, we need to move it up a bit */
.button-group.prepareQueue button#countDownPreparing.borderless {
  position: relative;
  /* just in case any text transformations were done in the frame */
  text-shadow: none;
  font-weight: normal;
  font-style: normal;
}

/* Those Decorative SVGs*/
.decorations {
  position: absolute;
}

/* Decoration: Haze */
.blob svg {
  overflow: visible;
}

.blob.secondary svg path {
  fill: var(--decoration-secondary);
  fill-opacity: var(--decoration-opacity);
}

.blob.tertiary svg path {
  fill: var(--decoration-tertiary);
  fill-opacity: var(--decoration-opacity);
}

.blob.top.secondary {
  top: 0px;
  left: 0px;
  animation: blobRotate 75s linear infinite;
}

.blob.top.tertiary {
  top: 0px;
  right: 0px;
  animation: blobRotate 110s linear infinite;
}

.blob.bottom.secondary {
  bottom: 0px;
  right: 0px;
  animation: blobRotate 110s linear infinite;
}

.blob.bottom.tertiary {
  bottom: -10px;
  left: 0px;
  animation: blobRotate 75s linear infinite;
}

@keyframes blobRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    /* Rotates 360 degrees over 8 seconds */
  }
}

/* Decoration: Border */
.hexagon {
  position: fixed;
  top: 0px;
  right: 0px;
}

.hexagon.tertiary svg path {
  fill-opacity: var(--decoration-opacity);
}

/* Scrollbar */
/* width */
::-webkit-scrollbar {
  width: 12px;
  background: none;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar);
}

/* Utility Classes */
/* removes element from dom */
.hidden {
  display: none !important
}

/* makes visibility zero, but still exists in dom */
.hidden-invisible {
  opacity: 0;
  pointer-events: none;
}

.uppercase {
  text-transform: uppercase !important;
}

.bold {
  font-weight: 700 !important;
}

.no-animate {
  animation: none !important;
}

/* ISI Styling */
/* This covers the basics of the backgrounds, containers, and applies basic themes */
.isi-window .container {
  width: 360px;
  height: 642px;
  background-color: var(--isi-background);
  font-weight: 600;
  overflow: hidden;
  user-select: none;
  position: relative;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.9);
  border-radius: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.isi-window .content {
  display: flex;
  flex-direction: column;
  align-content: center;
}

.isi-window .heading {
  background-color: var(--isi-header-background-color);
  color: var(--isi-header-font-color);
  width: 360px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.isi-window .heading span {
  font-family: var(--isi-font);
  font-size: 18px;
  text-align: center;
  font-weight: 400;
}

.isi-window .heading span.left {
  width: 60%;
  text-align: left;
  margin-left: -100px;
}

.isi-window .isi-copy {
  overflow-y: scroll;
  margin-top: 8px;
  margin-left: 22px;
  padding-right: 8px;
  max-height: 468px;
  /* 640 - 80px header - 60px button -24px spacer -8px top margin*/
  color: var(--isi-body-text-color);
  font-family: var(--isi-font);
  font-weight: 400;
}

.isi-window .isi-copy h1,
h2,
h3,
span.title {
  color: var(--isi-body-title-color);
}

.isi-copy a {
  color: var(--isi-link-color);
}

.isi-copy h1 {
  font-size: 20px;
  font-weight: 700;
}

.isi-copy h2 {
  font-size: 18px;
  font-weight: 600;
}

.isi-copy h3 {
  font-size: 18px;
  font-weight: 500;
}

.isi-window .scroll-shadows {
  background: linear-gradient(var(--isi-background) 30%, var(--isi-background) 0%) center top, linear-gradient(var(--isi-background) 0%, var(--isi-background) 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 30px, 100% 30px, 100% 30px, 100% 30px;
  background-attachment: local, local, scroll, scroll;
  background-color: var(--isi-background);
}

.isi-window .button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.isi-window button {
  color: var(--isi-enabled-button-font-color);
  background: var(--isi-enabled-button);
  height: 60px;
  width: 312px;
  text-align: center;
  border-radius: var(--isi-button-border-radius);
  box-shadow: var(--isi-button-shadows);
  font-family: var(--isi-button-font);
  font-size: var(--isi-button-font-size);
}

.isi-window button.disabled {
  background: var(--isi-disabled-button);
  color: var(--isi-disabled-button-font-color);
}

/* Intro Page */
/* These are almost identical to the ISI styles but are separate for maximum configurability. If an intro page style isn't provided, it will fallback to ISI styles. */
.intro-window .container {
  width: 360px;
  height: 642px;
  background-color: var(--intro-background, var(--isi-background));
  font-weight: 600;
  overflow: hidden;
  user-select: none;
  position: relative;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.9);
  border-radius: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.intro-window .content {
  display: flex;
  flex-direction: column;
  align-content: center;
}

.intro-window .content.borderless {
  margin: 0px;
  padding: 0px;
}

.intro-window .heading {
  background-color: var(--intro-header-background-color, var(--isi-header-background-color));
  color: var(--intro-header-font-color, var(--isi-header-font-color));
  width: 360px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-window .heading span {
  font-family: var(--intro-font, var(--isi-font));
  font-size: 18px;
  text-align: center;
  font-weight: 400;
}

.intro-window .heading span.left {
  width: 60%;
  text-align: left;
  margin-left: -100px;
}

.intro-window .heading.borderless {
  background-color: unset
}

.intro-window .heading.no-title {
  height: 0px;
  opacity: 0;
}

.intro-window .intro-copy {
  overflow-y: scroll;
  margin-top: 8px;
  margin-left: 22px;
  padding-right: 8px;
  max-height: 468px;
  /* 640 - 80px header - 60px button -24px spacer -8px top margin*/
  color: var(--intro-body-text-color, var(--isi-body-text-color));
  font-family: var(--intro-font, var(--isi-font));
  font-weight: 400;
}

.intro-window .intro-copy.borderless,
.intro-window .heading.no-title + .intro-copy.borderless {
  height: 642px !important;
  max-height: 642px !important;
  padding: 0;
  margin: 0;
}

.intro-window .intro-copy h1,
h2,
h3,
span.title {
  color: var(--intro-body-title-color, var(--isi-body-title-color));
}

.intro-copy a {
  color: var(--intro-link-color, var(--isi-link-color));
}

.intro-copy h1 {
  font-size: 20px;
  font-weight: 700;
}

.intro-copy h2 {
  font-size: 18px;
  font-weight: 600;
}

.intro-copy h3 {
  font-size: 18px;
  font-weight: 500;
}

.intro-window .scroll-shadows {
  background: linear-gradient(var(--intro-background, var(--isi-background)) 30%, var(--intro-background, var(--isi-background)) 0%) center top, linear-gradient(var(--intro-background, var(--isi-background)) 0%, var(--intro-background, var(--isi-background)) 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 30px, 100% 30px, 100% 30px, 100% 30px;
  background-attachment: local, local, scroll, scroll;
  background-color: var(--intro-background, var(--isi-background));
}

.intro-window .button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  z-index: 1;
}

.intro-window button {
  color: var(--intro-enabled-button-font-color, var(--isi-enabled-button-font-color));
  background: var(--intro-enabled-button, var(--isi-enabled-button));
  height: 60px;
  width: 312px;
  text-align: center;
  border-radius: var(--intro-button-border-radius);
  box-shadow: var(--intro-button-shadows);
  font-family: var(--intro-button-font);
  font-size: var(--intro-button-font-size);
}

.intro-window .button-group.no-scroll {
  position: absolute;
  bottom: 22px;
  width: 312px;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  left: 50%;
  transform: translateX(-50%);
}

.intro-window .heading.no-title + .button-group {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.intro-window .heading.no-title + .intro-copy {
  max-height: 540px;
}

.intro-window button.disabled {
  background: var(--intro-disabled-button, var(--isi-disabled-button));
  color: var(--intro-disabled-button-font-color, var(--isi-disabled-button-font-color));
}

.intro-window .heading.no-title + .intro-copy.no-scroll,
.intro-window .intro-copy.no-scroll {
  overflow-y: hidden;
  max-height: 468px;
}

.intro-window .intro-copy img,
.isi-window .isi-copy img {
  max-width: 100%;
  height: auto;
  display: block; /* Remove any extra spacing below the image */
  margin: auto; /* Center the image horizontally within its parent */
}

.intro-window #termsOfUse {
  font-size: 12px;
  height: 100px;
  display: grid;
  width: 312px;
}

.intro-window #termsOfUse.no-scroll {
  position: absolute;
  bottom: 68px;
  z-index: 2; /* make sure its on top of whatever else exists in the copy */
}

/* Error Page */
.Err {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  height: 60%;
}

.Err .Oops {
  font-size: 22px;
}

/* Media Queries */
@media screen and (min-height: 642px) {

  .registration-window .container,
  .registration-window .decoration-container,
  .isi-window .container,
  .intro-window .container {
    margin: auto;
  }
}

/* Google Pixel viewports are super tall, 923px. This seems smaller than any common tablet. */
@media screen and (max-height: 925px) and (max-width: 500px) {

  .registration-window .container,
  .registration-window .decoration-container,
  .isi-window .container,
  .intro-window .container {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
}

/* Between 650 and 925px, show registration centered */
@media screen and (max-height: 925px) and (max-width: 500px) {

  .registration-window .container,
  .registration-window .decoration-container,
  .isi-window .container,
  .intro-window .container {
    box-shadow: initial;
    border-radius: initial;
  }
}

/* Below 650px, show registration pinned to the top */
@media screen and (max-height: 650px) and (max-width: 500px) {

  .registration-window .container,
  .registration-window .decoration-container,
  .isi-window .container,
  .intro-window .container {
    width: 100%;
    box-shadow: initial;
    border-radius: initial;
  }

  .intro-window .container.borderless {
    height: 640px !important;
  }
}

/* If under 640px tall, remove any transformations and pin it to the top */
@media screen and (max-height: 640px) {

  .intro-window {
    align-content: unset !important; /* stops vertical centering blocking top of card */
  }

  .intro-window .container.borderless {
    flex-wrap: unset;
    transform: unset !important;
  }

  .intro-window .content.borderless {
    height: 640px !important;
  }
}

@media screen and (min-height: 640px) and (max-height: 750px) {
  .registration-window .container,
  .registration-window .decoration-container,
  .isi-window .container,
  .intro-window .container {
    height: 100%;
  }
}

@media screen and (max-height: 705px) {

  .registration-window .container,
  .registration-window .decoration-container,
  .isi-window .container,
  .intro-window .container {
    top: 0;
    transform: translateY(0%);
    height: 100%;
  }
}

/* Fill the screen when width or height <750 */
@media screen and (max-width: 750px), (max-height: 750px) {

  .registration-window,
  .isi-window,
  .intro-window {
    border-radius: 0;
  }

  .registration-window .container,
  .registration-window .decoration-container {
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
    width: 100%;
    height: 100%;
    min-height: 640px;
    border-radius: 0;
    box-shadow: none;
  }

  .registration-window .container {
    background-color: var(--primary-color);
  }

  .decorations {
    width: 100%;
  }

  .registration-window .content {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
  }

  .isi-window .container {
    left: 0;
    top: 0;
    transform: translate(0%, 0%);
    width: 100%;
    height: 100%;
    background-color: var(--isi-background);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .intro-window .container {
    left: 0;
    top: 0;
    transform: translate(0%, 0%);
    width: 100%;
    height: 100%;
    background-color: var(--intro-background, var(--isi-background));
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .isi-window .isi-copy,
  .intro-window .intro-copy {
    max-height: 75%;
  }

  .intro-window .intro-copy.no-scroll {
    max-height: 100%;
    overflow-y: hidden;
  }

  .registration-window .content {
    width: 360px;
    height: 640px;
    flex: 1;
    overflow-y: auto;
  }

  .isi-window .content,
  .intro-window .content {
    width: 360px;
    height: 100%;
  }

  .intro-window .content.borderless {
    height: 100vh; /* fallback where dvh is not supported*/
    height: 100dvh;
  }

  .intro-window .intro-copy.borderless {
    height: 100vh !important; /* fallback just in case */
    height: 100dvh !important;
  }

  .intro-window .container.borderless {
    height: 642px !important;
  }

  .registration-window .header-logo.full {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .registration-window .header-logo.full img {
    max-width: 87.5%;
    max-height: none;
  }

  .header-toprow.full {
    grid-template-columns:auto;
  }
}

/* Increase size if resolution is large */
@media screen and (min-height: 1440px) and (min-width: 750px) {

  .registration-window .container,
  .registration-window .decoration-container {
    transform: scale(2) translate(-25%, -25%);
  }

  .isi-window .container,
  .intro-window .container {
    transform: scale(2) translateY(-25%);
  }

  .isi-window, .intro-window,
  .registration-window form {
    overflow-y: hidden;
  }
}

@media screen and (min-height: 1440px) and (max-height: 2159px) and (min-width: 750px) {

  .registration-window .container,
  .registration-window .decoration-container {
    transform: scale(2) translate(-25%, 25%);
  }

  .isi-window .container,
  .intro-window .container {
    transform: scale(2) translateY(25%);
  }

  .registration-window,
  .isi-window,
  .intro-window {
    border-radius: 0;
  }

  .registration-window .container,
  .registration-window .decoration-container {
    left: 50%;
    top: 0;
    width: 50%;
    height: 50%;
    border-radius: 0;
  }

  .registration-window .container {
    background-color: var(--primary-color);
  }

  .decorations {
    width: 50%;
  }

  .registration-window .content {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
  }

  .isi-window, .intro-window {
    overflow-y: hidden;
  }

  .isi-window .container {
    left: 0;
    top: -25%;
    width: 100%;
    height: 50%;
    background-color: var(--isi-background);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .intro-window .container {
    left: 0;
    top: -25%;
    width: 100%;
    height: 50%;
    background-color: var(--intro-background, var(--isi-background));
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .intro-window .container.borderless,
  .isi-window .container-borderless {
    top: -50%;
    height: 642px;
  }

  .isi-window .isi-copy,
  .intro-window .intro-copy {
    max-height: 75%;
  }

  .registration-window .content {
    width: 360px;
    height: 640px;
    flex: 1;
    overflow-y: auto;
  }

  .isi-window .content,
  .intro-window .content {
    width: 360px;
    height: 100%;
  }

  .registration-window .header-logo.full {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .registration-window .header-logo.full img {
    max-width: 87.5%;
    max-height: none;
  }

  .header-toprow.full {
    grid-template-columns:auto;
  }
}

@media screen and (min-height: 2160px) {

  .registration-window .container,
  .registration-window .decoration-container {
    transform: scale(3) translate(-16.66%, 16.66%);
    top: 20%;
  }

  .isi-window .container,
  .intro-window .container {
    transform: scale(3) translateY(16.66%);
    top: -50%;
  }
}

@media screen and (min-height: 2160px) and (max-width: 1500px) {
  .registration-window .container,
  .registration-window .decoration-container {
    transform: scale(3) translate(-16.66%, 16.66%);
    top: 20%;
  }

  .isi-window .container,
  .intro-window .container {
    transform: scale(3) translateY(16.66%);
  }

  .registration-window,
  .isi-window,
  .intro-window {
    border-radius: 0;
  }

  .registration-window .container,
  .registration-window .decoration-container {
    left: 50%;
    top: 16%;
    width: 100%;
    height: 33.6%;
    border-radius: 0;
  }

  .registration-window .container {
    background-color: var(--primary-color);
  }

  .decorations {
    width: 50%;
  }

  .registration-window .content {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
  }

  .isi-window .container {
    left: 0;
    top: -50%;
    background-color: var(--isi-background);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .intro-window .container {
    left: 0;
    top: -50%;
    background-color: var(--intro-background, var(--isi-background));
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .isi-window .isi-copy,
  .intro-window .intro-copy {
    max-height: 75%;
  }

  .registration-window .content {
    width: 360px;
    height: 640px;
    flex: 1;
    overflow-y: auto;
  }

  .isi-window .content,
  .intro-window .content {
    width: 360px;
    height: 100%;
  }

  .registration-window .header-logo.full {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .registration-window .header-logo.full img {
    max-width: 87.5%;
    max-height: none;
  }

  .header-toprow.full {
    grid-template-columns:auto;
  }
}

/* Aaaaand the light mode stuff */
@media (prefers-color-scheme: light) {
  .registration-window .container {
    background: var(--primary-color-light, var(--primary-color));
  }

  .header h2,
  .registration-window input:focus,
  .registration-window-input,
  .form-group label,
  .form-group select,
  .form-group select option,
  .registration-window .form-group input[type=checkbox]:checked:after,
  .registration-window .optIn-group input:checked:after,
  .registration-window .optIn-group label,
  .registration-window .termsOfUse input:checked:after,
  .registration-window .termsOfUse label
  .registration-window .disclaimer .text {
    color: var(--font-color-light, var(--font-color));
  }

  .registration-window input:focus,
  .registration-window input,
  .form-group select,
  .registration-window .form-group input[type=checkbox],
  .registration-window .optIn-group input,
  .registration-window .termsOfUse input {
    background-color: var(--input-fields-light, var(--input-fields));
  }

  .toggle-container .knobs:before,
  .button-group button.disabled {
    background: var(--disabled-button-light, var(--disabled-button));
    color: var(--disabled-button-font-color-light, var(--disabled-button-font-color));
  }

  .toggle-container .checkbox-toggle:checked+.knobs:before,
  .button-group button {
    background: var(--enabled-button-light, var(--enabled-button));
    color: var(--enabled-button-font-color-light, var(--enabled-button-font-color));
  }

  .isi-window .button-group button.disabled {
    background: var(--isi-disabled-button-light, var(--isi-disabled-button));
    color: var(--isi-disabled-button-font-color-light, var(--isi-disabled-button-font-color));
  }

  .isi-window .button-group button {
    background: var(--isi-enabled-button-light, var(--isi-enabled-button));
    color: var(--isi-enabled-button-font-color-light, var(--isi-enabled-button-font-color));
  }

  .intro-window .button-group button.disabled {
    background: var(--intro-disabled-button-light, var(--intro-disabled-button));
    color: var(--intro-disabled-button-font-color-light, var(--intro-disabled-button-font-color));
  }

  .intro-window .button-group button {
    background: var(--intro-enabled-button-light, var(--intro-enabled-button));
    color: var(--intro-enabled-button-font-color-light, var(--intro-enabled-button-font-color));
  }

  .form-group label.error {
    color: var(--error-text-light, var(--error-text)) !important;
  }

  .form-group input.error,
  .form-group select.error {
    border-bottom: 1px solid var(--error-text-light, var(--error-text)) !important;
  }

  input[type=checkbox].error {
    border: 1px solid var(--error-text-light, var(--error-text)) !important;
  }

  .form-group label.valid {
    color: var(--valid-text-light, var(--valid-text)) !important;
  }

  .form-group input.valid,
  .form-group select.valid {
    border-bottom: 1px solid var(--valid-text-light, var(--valid-text)) !important;
  }

  input[type=checkbox].valid {
    border: 1px solid var(--valid-text-light, var(--valid-text)) !important;
  }

  .form-group select option {
    background-color: var(--dropdown-menu-light, var(--dropdown-menu));
  }

  .registration-window .form-group input[type=checkbox],
  .registration-window .optIn-group input,
  .registration-window .termsOfUse input {
    border: 1px solid var(--checkbox-light, var(--checkbox));
  }

  .header .header-divider {
    border-bottom: 1px solid var(--divider-light, var(--divider));
  }

  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-light, var(--scrollbar));
  }

  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track-light, var(--scrollbar-track));
  }

  .blob.secondary svg path,
  .blob.tertiary svg path,
  .hexagon.tertiary svg path {
    fill-opacity: var(--decoration-opacity-light, var(--decoration-opacity));
  }

  .blob.secondary svg path {
    fill: var(--decoration-secondary-light, var(--decoration-secondary));
  }

  .blob.tertiary svg path {
    fill: var(--decoration-tertiary, var(--decoration-tertiary));
  }
}