:host {
  display: block;
  font-family: var(--vst-font-family);
  box-sizing: border-box;
  line-height: 1.5;
  color: var(--vst-color-dark-dark-grey);
}

:host([hidden]),
*[hidden] {
  display: none !important;
}

:host([capture-target]),
:host([capture-target='full']) *,
[capture-target],
[capture-target='full'] * {
  transform: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  min-height: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

input,
input:before,
input:after {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}

a {
  color: var(--vst-color-teal);
}
a:hover {
  color: var(--vst-color-dark-teal);
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 1.125rem;
  height: 1.125rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--vst-color-grey);
  border-radius: 2rem;
  border: 0.3rem solid transparent;
  background-clip: padding-box;
  min-height: 2.5rem;
  min-width: 2.5rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--vst-color-dark-grey);
  border-width: 0.225rem;
}

html {
  --vst-color-primary-500: hsl(182, 100%, 7%);
  --vst-color-primary-400: hsl(182, 100%, 16%);
  --vst-color-primary-300: hsl(182, 100%, 23%);
  --vst-color-primary-200: hsl(182, 70%, 35%);
  --vst-color-primary-100: hsl(182, 60%, 80%);
  --vst-color-success-500: hsl(81, 100%, 20%);
  --vst-color-success-400: hsl(81, 80%, 30%);
  --vst-color-success-300: hsl(81, 70%, 50%);
  --vst-color-success-200: hsl(81, 60%, 70%);
  --vst-color-success-100: hsl(81, 50%, 90%);
  --vst-color-warning-500: hsl(32, 100%, 20%);
  --vst-color-warning-400: hsl(32, 80%, 30%);
  --vst-color-warning-300: hsl(32, 70%, 50%);
  --vst-color-warning-200: hsl(33, 60%, 70%);
  --vst-color-warning-100: hsl(32, 50%, 90%);
  --vst-color-info-500: hsl(210, 100%, 20%);
  --vst-color-info-400: hsl(210, 80%, 30%);
  --vst-color-info-300: hsl(210, 70%, 50%);
  --vst-color-info-200: hsl(210, 60%, 70%);
  --vst-color-info-100: hsl(210, 50%, 90%);
  --vst-color-danger-500: hsl(354, 100%, 20%);
  --vst-color-danger-400: hsl(354, 80%, 30%);
  --vst-color-danger-300: hsl(354, 70%, 50%);
  --vst-color-danger-200: hsl(354, 60%, 70%);
  --vst-color-danger-100: hsl(354, 50%, 90%);
  --vst-color-grey-500: hsl(210, 1%, 7%);
  --vst-color-grey-400: hsl(210, 1%, 20%);
  --vst-color-grey-300: hsl(210, 1%, 40%);
  --vst-color-grey-200: hsl(210, 1%, 58%);
  --vst-color-grey-100: hsl(210, 1%, 90%);
  --vst-color-grey-0: hsl(210, 1%, 100%);
  --vst-color-graph-red: hsl(356, 70%, 49%);
  --vst-color-graph-baby-blue: hsl(206, 58%, 51%);
  --vst-color-graph-vomit: hsl(56, 72%, 42%);
  --vst-color-graph-blue: hsl(230, 54%, 43%);
  --vst-color-graph-pink: hsl(335, 69%, 63%);
  --vst-color-graph-purple: hsl(291, 38%, 28%);
  --vst-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', sans-serif;
  --vst-font-family-mono: Consolas, Monaco, monospace;
  --vst-font-size-xxs: 0.5rem;
  --vst-font-size-xs: 0.75rem;
  --vst-font-size-sm: 0.875rem;
  --vst-font-size: 1rem;
  --vst-font-size-lg: 1.5rem;
  --vst-font-size-xl: 2.25rem;
  --vst-font-size-xxl: 4rem;
  --vst-line-height: 1.5;
  --vst-space-xxs: 0.25rem;
  --vst-space-xs: 0.5rem;
  --vst-space-sm: 0.75rem;
  --vst-space: 1rem;
  --vst-space-lg: 1.5rem;
  --vst-space-xl: 2rem;
  --vst-space-xxl: 3rem;
  --vst-space-xxxl: 4rem;
  --vst-toolbar-height: 3.125rem;
  --vst-radius: 0.25rem;
  --vst-radius-circle: 50%;
  --vst-shadow-xs: 0px 1px 1px rgba(0, 0, 0, 0.1);
  --vst-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --vst-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --vst-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  --vst-shadow-xl: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  --vst-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --vst-transition-speed-fast: 0.1s;
  --vst-transition-speed: 0.3s;
  --vst-transition-speed-slow: 0.5s;
  --vst-transition-fast: all var(--vst-transition-speed-fast) var(--vst-transition-easing);
  --vst-transition: all var(--vst-transition-speed) var(--vst-transition-easing);
  --vst-transition-slow: all var(--vst-transition-speed-slow) var(--vst-transition-easing);
  --vst-z-graph-tools-btn: 75;
  --vst-z-toolbar: 100;
  --vst-z-selection: 125;
  --vst-z-annotation: 150;
  --vst-z-infobox: 175;
  --vst-z-graph-legend: 180;
  --vst-z-minigraph: 185;
  --vst-z-popover: 200;
  --vst-z-dialog: 300;
  --vst-z-soft-alert: 400;
  --vst-screen-size: xs;
  --vst-color-dark-teal: hsl(180, 100%, 16%);
  --vst-color-teal: hsl(182, 100%, 23%);
  --vst-color-dark-green: hsl(81, 50%, 45%);
  --vst-color-green: hsl(66, 55%, 55%);
  --vst-color-light-green: hsl(65, 69%, 88%);
  --vst-color-dark-orange: hsl(32, 92%, 57%);
  --vst-color-orange: hsl(33, 100%, 71%);
  --vst-color-light-orange: hsl(32, 94%, 92%);
  --vst-color-light-yellow: hsl(57, 100%, 86%);
  --vst-color-blue: hsl(211, 99%, 57%);
  --vst-color-light-blue: hsl(210, 100%, 91%);
  --vst-color-purple: hsl(266, 52%, 48%);
  --vst-color-light-purple: hsl(265, 49%, 89%);
  --vst-color-dark-red: hsl(346, 100%, 29%);
  --vst-color-red: hsl(356, 70%, 48%);
  --vst-color-light-red: hsl(355, 65%, 92%);
  --vst-color-dark-dark-grey: hsl(200, 2%, 21%);
  --vst-color-dark-grey: hsl(209, 1%, 47%);
  --vst-color-grey: hsl(210, 1%, 74%);
  --vst-color-light-grey: hsl(209, 3%, 89%);
  --vst-color-light-light-grey: hsl(180, 3%, 94%);
  --vst-color-body-text: var(--vst-color-dark-dark-grey);
  --vst-color-link: var(--vst-color-teal);
  --vst-color-link-hover: var(--vst-color-dark-teal);
  --vst-graph-color-red: hsl(356, 70%, 49%);
  --vst-graph-color-baby-blue: hsl(206, 58%, 51%);
  --vst-graph-color-vomit: hsl(56, 72%, 42%);
  --vst-graph-color-blue: hsl(230, 54%, 43%);
  --vst-graph-color-pink: hsl(335, 69%, 63%);
  --vst-graph-color-purple: hsl(291, 38%, 28%);
  --vst-font-size-xsmall: 0.5rem;
  --vst-font-size-small: 0.75rem;
  --vst-font-size-large: 1.5rem;
  --vst-font-size-xlarge: 2rem;
  --vst-font-size-xxlarge: 4rem;
  --vst-border-radius: 0.25rem;
  --vst-gutter: 1.5rem;
  --vst-gutter-small: 0.5rem;
  --base-font-size: 1em;
  font-size: var(--base-font-size);
  height: 100%;
}
@media (min-width: 30em) {
  html {
    --vst-screen-size: sm;
  }
}
@media (min-width: 42em) {
  html {
    --vst-screen-size: md;
  }
}
@media (min-width: 60em) {
  html {
    --vst-screen-size: lg;
  }
}
@media (min-width: 85em) {
  html {
    --vst-screen-size: xl;
  }
}
@media (min-width: 30em) {
  html {
    --vst-gutter: 2rem;
  }
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: var(--vst-color-grey-100);
  color: #000;
  margin: 0;
  font-family: var(--vst-font-family);
  height: 100%;
  min-height: 600px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  max-width: 500px;
  min-width: 300px;
  height: 100%;
}

.main-content {
  padding: var(--vst-gutter-small);
}

.wrapper__inner {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: var(--vst-border-radius);
}

.auth {
  margin: 0 auto;
  border-radius: var(--vst-border-radius);
  text-align: center;
  overflow: hidden;
}
.auth__form {
  margin-bottom: var(--vst-gutter-small);
}
.auth__form[disabled] {
  opacity: 0.3;
}
.auth__input-wrapper {
  display: grid;
  grid-gap: var(--vst-gutter-small);
  grid-template-columns: 1fr auto;
  grid-auto-flow: column;
}
.auth__label {
  font-size: var(--vst-font-size, 1rem);
  font-weight: bold;
  margin: 0;
  display: block;
  margin-bottom: 1.5rem;
}
.auth__input {
  font-family: var(--vst-font-family);
  font-size: 1rem;
  line-height: 1.5;
  height: 2.625rem;
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--vst-gutter-small);
  border: 1px solid var(--vst-color-grey);
  border-radius: 1px;
}
.auth__submit-btn {
  appearance: none;
  font-family: var(--vst-font-family);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.5 !important;
  color: var(--vst-color-dark-dark-grey);
  padding: 0.125rem 0.375rem;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  overflow: visible;
  border: 1px solid #00696d;
  font-weight: bold;
  border-radius: var(--vst-border-radius);
  padding: var(--vst-gutter-small) 1rem;
  font-size: calc(var(--vst-font-size) * 0.875);
  background-color: var(--vst-color-teal);
  color: #fff;
}
.auth__submit-btn::-moz-focus-inner,
.auth__submit-btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.auth__submit-btn * {
  pointer-events: none;
}
.auth__submit-btn button,
.auth__submit-btn a {
  pointer-events: auto;
}
.auth__submit-btn:active {
  outline: 0;
}
.auth__submit-btn[disabled] {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.auth__submit-btn:hover {
  background-color: var(--vst-color-dark-teal);
}
.auth__submit-btn:active {
  background-color: #0d5a5c;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.5);
}
.auth__message {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.auth__message--error {
  color: var(--vst-color-red);
}
.auth__message--success {
  color: var(--vst-color-green);
}

.eula {
  display: block;
  margin: 1.5rem auto 1.5rem auto;
}

.support {
  text-align: center;
}

.vernier-logo {
  display: block;
  width: 100%;
  max-width: 9.125rem;
  margin-bottom: 1rem;
}

.ga-logo {
  display: block;
  width: 100%;
  margin: 0 auto 1.5rem auto;
}

.terms {
  display: flex;
  flex-direction: column;
  place-items: center;
}

.terms__link {
  color: var(--vst-color-teal);
}
.terms__link:hover {
  color: var(--vst-color-dark-orange);
}