@import url("./normalize.78ef07c38785.css");
@import url("newComponents/draggable.bd3802038f7e.css");
@import url("newComponents/dropdown.8e631be63ce5.css");
@import url("newComponents/link.a8fd5d519df6.css");
@import url("newComponents/minbutton.c64201d9d611.css");
@import url("newComponents/snackbar.0dbc128ea9ad.css");
@import url("newComponents/swiper.1ac540d6ef2c.css");
@import url("newComponents/header.30b5e2bdc471.css");

/*
 * ─── FONTS ──────────────────────────────────────────────────────────────────────
 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=fallback');

/* browser selects the first format. WOFF2 named first for best performance/compatibility */
@font-face {
  font-family: 'Anybody';
  src: url("./fonts/Anybody-CondensedBold.d299dfe0a47b.woff2") format('woff2'),
    url("./fonts/Anybody-CondensedBold.de18362faaaa.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Metropolis';
  src: url("./fonts/Metropolis-Medium.f4bca87fd0d1.otf") format('otf');
  font-weight: normal;
  font-style: normal;
}

:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* prevents unintentional selection on mobile */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* prevent double-tap zoom on mobile */
  touch-action: manipulation;

  /*
 * ─── COLORS ─────────────────────────────────────────────────────────────────────
 */
  /* PRIMARY COLORS */
  --primaryBlue: #093efa;
  --primaryWhite: #e7ebf2;
  --primaryBlack: #0c0514;
  /* SECONDARY COLORS  */
  /* for coloring different chart values and player 'chips' */
  --secondaryBlue: #4f75fc;
  --secondaryLightBlue: #10e4f8; /* PHY */
  --secondaryOrange: #fa9a09; /* COG */
  --secondaryGreen: #6afd90; /* EXE */
  --secondaryPink: #ee167e; /* COM */
  --secondaryRed: #e92828; /* DEC */
  /* UTILITY COLORS */
  /* gray lightest to darkest ascending order */
  --utilityGray1: #b1b8c5;
  --utilityGray2: #8790a0;
  --utilityGray3: #616773;
  --utilityGray4: #4b494f;
  --utilityGray5: #37353d;
  --utilityGray6: #18131e;
  /* colors used for alerts, form feedback */
  --utilityRed: #f04040;
  --utilityOrange: #f09f1b;
  --utilityGreen: #2fea9a;
  /* not a named color, but used on hovered/active blue elements */
  --darkBlue: #0a2ca6;
  /* For minimal buttons, links, and inline text links.  */
  --linkBlue: #4e74fd;
  --white: #ffffff;
  /*
  * ─── TEXT ───────────────────────────────────────────────────────────────────────
  */
  /* Header font */
  --anybody: 'Anybody', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --metropolis: 'Metropolis', sans-serif;
  --ratio: 1.25;
  /* ascending in size */
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
}

html {
  position: relative;
  height: -webkit-fill-available;
  min-height: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: hidden;
  /* line-height: 1.3; */
}

body {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  background: var(--primaryBlack);
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100vh;
  height: -webkit-fill-available;
  height: fill-available;
  height: stretch;
  padding: 0;
  margin: 0;
}

/* Fallback text style */
* {
  box-sizing: border-box;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  color: var(--primaryWhite);
}

*::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--utilityGray4);
  opacity: 1; /* Firefox */
}
*:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--utilityGray4);
}
*::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--utilityGray4);
}

ul {
  list-style: none;
  margin: 0;
  margin-block-start: 0;
  /* margin-block-end: 0; */
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

b {
  transition: 0.3s;
}
b:hover {
  transform: font-size(1.25em);
}

p {
  font-size: var(--s0);
}
h5 {
  font-size: var(--s-1);
}
h4 {
  font-size: var(--s1);
}
h3 {
  font-size: var(--s2);
}
h2 {
  font-size: var(--s3);
}
h1 {
  font-size: var(--s4);
}

h1,
h2,
h3 {
  position: relative;
  top: 0.15rem;
  margin: 0;
  font-family: var(--anybody);
  font-weight: unset;
  text-transform: uppercase;
  line-height: var(--s2);
}

h4,
h5,
p {
  font-weight: 400;
  margin: 0;
}

h6 {
  margin: 0;
  font-weight: normal;
}

i {
  color: var(--primaryWhite);
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────────────────────────────── */

.backdrop {
  position: fixed;
  top: 0;
  right: 0;
  min-width: 50em;
  z-index: 0;
  /* bottom: -1%; */
  /* zoom: 2.25; */
  /* filter: blur(.25em) brightness(0.35); */
}
.backdrop path {
  fill: rgba(60, 60, 60, 0.2) !important;
}

.overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  box-sizing: border-box;
}
.overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.overlay > section {
  display: none;
  /* margin: 5%; */
  width: 100%;
  max-width: 30em;
  max-height: 100%;
  border: 2px solid var(--utilityGray4);
  border-radius: 2px;
  background: var(--utilityGray6);
  transition: opacity 0.3s;
}
.overlay.active section.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* margin: 2.5%; */
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  z-index: 10;
  transition: opacity 0.4s;
  opacity: 0;
}
.content.show {
  opacity: 1;
}
.content-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  place-items: center;
  width: 100%;
}
.content-header label {
  padding: 0.75em;
  color: var(--primaryWhite);
  font-size: 2em;
  font-family: var(--anybody);
  text-transform: uppercase;
  text-align: center;
}
.content-header i {
  fill: var(--primaryWhite);
}

/* swipe card for login role */
.content-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.content-body > * {
  padding-left: var(--s-3);
  padding-right: var(--s-3);
}
/* swiper's next card goes all the way to edge of screen */
.content-body > .swiper {
  padding: 0;
}
.content-footer {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  padding: var(--s-3);
}

.textbox {
  width: 100%;
  padding: var(--s-2) var(--s0);
  background: var(--utilityGray6);
  color: var(--primaryWhite);
  border: 2px solid var(--utilityGray4);
  border-radius: 2px;
  outline: none;
  font-size: 1.1em;
  text-align: left;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: 0.15s;
}
.textbox:focus {
  border-color: var(--primaryWhite);
}
.textbox:hover {
  background: rgba(255, 255, 255, 0.02);
}
select.textbox:hover option {
  background: var(--utilityGray6);
}
.textbox.disabled {
  border-color: var(--utilityGray6);
}
.textbox::selection {
  background: var(--utilityGray1);
}

/* Removes some default browser styling from active input elements */
.textbox:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--utilityGray6) inset !important;
  -webkit-text-fill-color: var(--primaryWhite) !important;
}
.textbox.green {
  border-color: var(--secondaryGreen);
}
.textbox.orange {
  border-color: var(--secondaryOrange);
}
.textbox.red {
  border-color: var(--secondaryRed);
}

.error {
  border: 2px solid var(--utilityRed);
}
.success {
  border: 2px solid var(--utilityGreen);
  color: var(--utilityGreen);
}
.textbox-button {
  display: flex;
  margin: auto;
  width: 100%;
  border: 2px solid var(--primaryWhite);
  border-radius: 2px;
}
.textbox-button .textbox {
  flex: 1;
  border: none;
  border-radius: 0;
}
.textbox-button button {
  flex: 0;
}

.btn {
  display: flex;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
  align-items: center;
}
.btn:hover {
  transform: scale(1.2);
}
.btn.back {
  margin-right: auto;
  fill: var(--primaryWhite);
}
.btn.disabled {
  pointer-events: none;
}
.btn.disabled svg {
  fill: var(--utilityGray5);
}

button {
  text-align: center;
  justify-content: center;
  align-content: center;
  vertical-align: middle;
  border: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
}

button.defaultBtn {
  padding: 0.85rem;
  width: 100%;
  max-height: min-content;
  text-transform: uppercase;
  font-family: var(--anybody);
  font-size: 1.25rem;
  transition: background-color 0.2s;
}

button.defaultBtn * {
  font-size: inherit;
  font-family: inherit;
  vertical-align: middle;
}

[class^='ph-'],
[class*=' ph-'] {
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  vertical-align: middle;
  height: var(--s3);
  width: var(--s3);
}
/* ──────────────────────────────────────────────────────────────────────────────── */
.defaultBtn.lightBtn {
  background-color: var(--primaryWhite);
  color: var(--primaryBlack);
}
.defaultBtn.lightBtn:hover,
.defaultBtn.lightBtn:active {
  background-color: var(--utilityGray1);
}
/* ──────────────────────────────────────────────────────────────────────────────── */
.defaultBtn.darkBtn {
  background-color: var(--primaryBlack);
  color: var(--primaryWhite);
  border: 1px solid var(--primaryWhite);
}
.defaultBtn.darkBtn:hover,
.defaultBtn.darkBtn:active {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--primaryWhite);
}
/* ──────────────────────────────────────────────────────────────────────────────── */
.defaultBtn.blueBtn {
  background-color: var(--primaryBlue);
}
.defaultBtn.blueBtn:hover,
.defaultBtn.blueBtn:active {
  background-color: var(--darkBlue);
}
.defaultBtn:disabled {
  background-color: var(--utilityGray5) !important;
  pointer-events: none;
  opacity: 0.7;
}

.btn.socialLink {
  gap: var(--s-3);
  cursor: pointer;
}

.btn.socialLink:hover {
  transform: scale(1);
  background-color: var(--primaryBlue);
}

/* prevents hover color from staying on button, for devices that don't support hover */
@media (hover: none), (hover: on-demand) {
  .defaultBtn.blueBtn:hover {
    background-color: var(--primaryBlue);
  }
  .defaultBtn.blueBtn:active {
    background-color: var(--darkBlue);
  }
  .defaultBtn.darkBtn:hover {
    background-color: var(--primaryBlack);
  }
  .defaultBtn.darkBtn:active {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .defaultBtn.lightBtn:hover {
    background-color: var(--primaryWhite);
  }
  .defaultBtn.lightBtn:active {
    background-color: var(--utilityGray1);
  }
  .btn.socialLink:hover {
    background-color: var(--primaryBlack);
  }
  .btn.socialLink:active {
    background-color: var(--primaryBlue);
  }
}
/* prevents button scaling on mobile devices */
@media (hover: none), (hover: on-demand) {
  .btn:hover {
    transform: scale(1);
  }
}

.defaultBtn.secondary {
  background: transparent;
  border: 2px solid var(--primaryWhite);
  color: var(--primaryWhite);
}

.defaultBtn.unstyled {
  background: transparent;
  border: none;
  color: var(--primaryWhite);
}

.btn.deleteBtn {
  right: 0;
  left: auto;
}
section.social-header {
  display: flex;
  place-items: center;
  padding: var(--s3) 0;
  gap: var(--s0);
  flex-flow: column nowrap;
}

.social-header svg {
  width: 6rem;
  height: 6rem;
}

.data-add-selection {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.data-add-roster {
  display: flex;
  gap: var(--s-3);
  padding: 0 var(--s0);
}

.data-add-datasets {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--s2);
  transition: filter 0.15s;
}
.data-add-datasets.disabled {
  pointer-events: none;
  filter: brightness(0.25);
}
.data-add-datasets:last-child {
  padding-bottom: var(--s4);
}
.data-add-dataset {
  display: flex;
  flex-flow: column;
  gap: var(--s-1);
}
.outcome-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  background: transparent;

  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: var(--s0);
}
.outcome-content > div {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}
.outcome-content .undo {
  width: var(--s0);
  height: var(--s0);
}
.outcome-content .undo svg {
  fill: var(--primaryWhite);
}
.outcome-content .undo.disabled {
  pointer-events: none;
}
.outcome-content .undo.disabled svg {
  fill: var(--utilityGray4);
}
.outcome {
  padding: var(--s-1) var(--s0);
  width: 100%;
  border: 2px solid;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}
.outcome:hover {
  background: rgba(255, 255, 255, 0.1);
}
.outcome i {
  width: var(--s0);
  height: var(--s0);
}
.outcome.red {
  border-color: var(--secondaryRed);
}
.outcome.red * {
  fill: var(--secondaryRed);
}
.outcome.green {
  border-color: var(--secondaryGreen);
}
.outcome.green * {
  fill: var(--secondaryGreen);
}
#myChart {
  width: 100% !important;
}
.outcomeBtn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  background: transparent;
  border-radius: 2px;
}
.outcome-radio,
.outcome-radio-plusminus {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  border: 2px solid var(--primaryWhite);
  border-radius: 2px;
  text-align: center;
  transition: all 0.15s;
  cursor: pointer;
}
.outcome-radio-plusminus {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
}
.outcome-radio-plusminus i {
  display: flex;
  justify-content: center;
  align-items: center;
}
.outcome-radio h3,
.outcome-radio-plusminus svg {
  color: var(--primaryWhite);
  fill: var(--primaryWhite);
  width: var(--s0);
  stroke-width: 2px;
}
.outcome-radio.disabled,
.outcome-radio-plusminus.disabled {
  border-color: var(--utilityGray3);
}
.outcome-radio.disabled h3,
.outcome-radio-plusminus.disabled svg {
  color: var(--utilityGray3);
  fill: var(--utilityGray3);
  stroke: var(--utilityGray3);
}
.outcome-radio.active,
.outcome-radio-plusminus.active {
  border: none;
  background: var(--primaryBlue);
  color: var(--primaryWhite);
}
.outcome-radio.active h3,
.outcome-radio-plusminus.active svg {
  color: var(--primaryWhite);
  fill: var(--primaryWhite);
}
.outcome-radio input[type='radio'],
.outcome-radio-plusminus input[type='radio'] {
  display: none !important;
}
.textbox.dec-tag {
  border-color: var(--secondaryRed);
}
.textbox.com-tag {
  border-color: var(--secondaryPink);
}
.textbox.exe-tag {
  border-color: var(--secondaryGreen);
}
.textbox.cog-tag {
  border-color: var(--secondaryOrange);
}
.textbox.phy-tag {
  border-color: var(--secondaryLightBlue);
}

.outcomeBtn-header {
  text-transform: uppercase;
  padding-bottom: var(--s-2);
}

input {
  caret-color: var(--primaryWhite);
}
/* changes color of calendar and clock icons in date and time input fields. Styling <input> is limited so these settings match 'utilityGray4' color, same as element border */
input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator {
  filter: invert(28%) sepia(1%) saturate(2709%) hue-rotate(218deg) brightness(91%) contrast(85%);
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s0);
  padding: 3em 0;
  margin: auto;
  max-width: 6em;
}
.logo img {
  width: 6rem;
  pointer-events: none;
}
.logo div {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.logo-header {
  font-family: var(--metropolis);
  font-size: 3rem;
  color: var(--secondaryBlue);
  letter-spacing: 0.1rem;
  text-align: center;
  white-space: nowrap;
}
.logo-subheader {
  margin-left: 0.3rem;
  font-family: var(--metropolis);
  font-size: 0.75rem;
  color: var(--utilityGray1);
  text-transform: uppercase;
  letter-spacing: 0.35rem;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}

.card {
  flex: 1;
  background: transparent;
  border-radius: 3em;
  z-index: 10;
}

.row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}
.row.compressed {
  max-width: 20rem;
}
.row.compressed.btngap {
  gap: var(--s0);
}

.photo-upload i {
  position: absolute;
  fill: var(--primaryWhite);
}

.expand svg {
  height: var(--s2);
  width: var(--s2);
  fill: var(--utilityGray2);
  /* margin-left: -.5rem; */
}

.photo-upload i .ph-plus {
  height: var(--s3);
  width: var(--s3);
  color: var(--primaryWhite);
}

.stretch {
  width: 100% !important;
  max-width: 100% !important;
}
.center {
  text-align: center;
}
.left-align {
  align-items: flex-start;
}
.right-align {
  align-items: flex-end;
}

.horizontal {
  flex-flow: row !important;
}
.vertical {
  flex-flow: column !important;
}

.signup-role {
  display: flex;
  align-items: center;
  padding: 2em;
  max-width: 30rem;
  background: var(--utilityGray6);
  border: 2px solid var(--primaryWhite);
  border-radius: 2px;
  cursor: pointer;
  transition: 0.3s;
  height: 100%;
}
.signup-role:hover {
  transform: scale(1.03);
}
.signup-role-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--primaryWhite);
  font-family: var(--anybody);
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
}
.signup-role-header i {
  margin: 0.25em auto 0;
}
.signup-role-header i .ph-users-three {
  height: 2em;
  width: 2em;
}

.signup-role-header i .signup-role-body {
  color: var(--utilityGray1);
  text-align: center;
}
.signup-role-body {
  padding-left: var(--s0);
}

/* svg path {
  fill: var(--primaryBlue);
} */
.secondary svg path {
  fill: var(--primaryWhite);
}

.icon {
  margin: auto;
}
.icon.primary {
  color: var(--primaryBlue);
}
.icon.secondary {
  color: var(--primaryWhite);
}
.icon.large {
  font-size: 5em;
}
.qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s0);
  position: relative;
}
.qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.qrcode-content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  position: absolute;
  padding: var(--s-3);
  max-width: 75%;
  background: var(--primaryBlack);
  text-align: center;
  pointer-events: none;
}
.qrcode-desc {
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  gap: var(--s-3);
}

.loading {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px !important;
  height: 30px !important;
  margin-top: -15px !important;
  margin-left: -15px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: var(--primaryWhite);
  border-right-color: var(--primaryWhite);
  animation: spinner 0.7s linear infinite;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  height: 6px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  background-clip: padding-box;
  background-color: rgba(0, 0, 0, 0, 0.4);
  -webkit-border-radius: 7px;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-corner {
  background-color: transparent;
}

.notification {
  /* circle shape, size and position */
  position: absolute;
  right: -0.7em;
  top: -0.7em;
  min-width: var(--s1);
  height: var(--s1);
  border-radius: 0.8em;
  border: none;
  background-color: var(--utilityRed);
  /* number size and position */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--s0);
  color: var(--primaryWhite);
  font-style: normal;
}

.no-notif {
  display: none;
}