html { font-size: 12px; }
@media (min-width: 360px) and (max-width: 699px) { html { font-size: 14px; } }
@media (min-width: 700px) and (max-width: 999px) { html { font-size: 16px; } }
@media (min-width: 1000px) and (max-width: 1499px) { html { font-size: 18px; } }
@media (min-width: 1500px) and (max-width: 1999px) { html { font-size: 20px; } }
@media (min-width: 2000px) and (max-width: 2149px) { html { font-size: 22px; } }
@media (min-width: 2150px) and (max-width: 2299px) { html { font-size: 24px; } }
@media (min-width: 2300px) and (max-width: 2449px) { html { font-size: 26px; } }
@media (min-width: 2450px) and (max-width: 2599px) { html { font-size: 28px; } }
@media (min-width: 2600px) { html { font-size: 30px; } }

body {
  color: #fff;
}

button {
  display: inline-block;
  background: transparent;
  width: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button:disabled,
input:disabled {
  opacity: 0.5;
  pointer-events: none;
}

td {
  padding: 0;
}

svg {
  display: inline-block;
  width: 100%;
  height: 100%;
}

button > svg {
  vertical-align: middle;
}

::selection {
  /* background-color: #184b63; */
  background-color: #1c5672;
  color: #fff;
}

.null {
  display: none;
}

.hidden {
  visibility: hidden;
}

.btn {
  background-color: #50c364;
  padding: 0.625rem 1.5rem;
  border: 2px solid #caedd0;
  color: #071920;
  font-size: 1.35rem;
  font-weight: normal;
  transition: transform 100ms;
}

.btn:hover {
  background-color: #58d76e;
  transform: scale(1.025);
}

.btnLarge {
  padding: 0.625rem 2.5rem;
}

.btnXLarge {
  padding: 0.625rem 3.75rem;
}

.text > :first-child {
  margin-top: 0;
}

.text > :last-child {
  margin-bottom: 0;
}


.fade-scale-200-enter,
.fade-scale-200-appear,
.fade-scale-200-exit-done {
  opacity: 0;
}

.fade-scale-200-enter-active,
.fade-scale-200-appear-active {
  opacity: 1;
  transition: opacity 200ms;
}

.fade-scale-200-enter-done,
.fade-scale-200-exit {
  opacity: 1;
}

.fade-scale-200-exit-active {
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}


.fade-scale-200-enter > .frame,
.fade-scale-200-appear > .frame,
.fade-scale-200-exit-done > .frame {
  transform: scale(0.5);
}

.fade-scale-200-enter-active > .frame,
.fade-scale-200-appear-active > .frame {
  transform: scale(1);
  transition: transform 200ms;
}

.fade-scale-200-enter-done > .frame,
.fade-scale-200-exit > .frame {
  transform: scale(1);
}

.fade-scale-200-exit-active > .frame {
  transform: scale(0.5);
  transition: transform 200ms;
}


@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader {
  width: 4rem;
  height: 4rem;
  stroke: #fff;
  stroke-width: 12;
}

.loaderIcon {
  display: inline-block;
  width: 100%;
  height: 100%;
  animation: spin 1s infinite linear;
}


.authContainer {
  display: flex;
  flex-direction: column;
  background-image: url(shared/bd73cdd15c46772393ea.jpg);
  background-position: center 90%;
  background-size: cover;
  background-attachment: fixed;
  padding: 2rem 0;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: -1px;
  /* ^ this was enough to prevent the main navigation bar from collapsing */
}

.authFrame {
  display: flex;
  flex-direction: column;
  width: 33%;
  min-width: 22.5rem;
  max-width: 95%;
  margin: auto;
}

.authHeader {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(7, 25, 32, 0.95);
  padding: 3rem 0.5rem 2.5rem;
}

.authBrandLogo {
  height: 2rem;
  margin: 0 0.75rem;
  user-select: none;
}

.authTitle {
  margin: 1.5rem 0 0;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 300;
  text-align: center;
  line-height: 1.25;
}

.authTitle strong {
  font-weight: 500;
}

.authBody {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 23rem;
  background-color: rgba(20, 85, 105, 0.95);
  padding: 2rem 1rem;
}

.authLoaderText {
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.3;
}

.authLoader {
  width: 3.5rem;
  height: 3.5rem;
  margin: 4rem 2rem 2rem;
}

.authPortal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-bottom: 1rem;
}

.authSection {
  text-align: center;
}

.authSectionText {
  margin: 0 0 0.75rem;
  font-size: 1.3rem;
  line-height: 1.4;
}

.authSectionBtn {
  font-size: 1.3rem;
  min-width: 13rem;
}

.authFooter {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 7rem;
  background-color: #071920;
  padding: 1rem 2rem;
}

.authFooter.hidden {
  flex: 0 1 auto;
  /* ^ attempt at disabling the scrollbar
       when footer is hidden. */
}

.authMessage {
  margin: 0;
  color: #ff8080;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.3;
}


.burgerIcon {
  --spacing: 0.55rem;
  width: 1.5rem;
  height: 0.1rem;
  margin: 0 auto;
  position: relative;
  will-change: transform;
}

.burgerIconBar {
  display: block;
  background-color: #fff;
  width: inherit;
  height: inherit;
  position: absolute;
  transition-duration: 200ms;
  transition-property: opacity, transform;
}

.burgerIconBarTop {
  transform: translate(0, calc(var(--spacing) * -1));
}

.burgerIconBarMiddle {
  transform: translate(0, 0);
  transition-delay: 30ms;
}

.burgerIconBarBottom {
  transform: translate(0, var(--spacing));
  transition-delay: 60ms;
}

.active > .burgerIconBar {
  background-color: #071920;
}

.active > .burgerIconBarTop {
  transform: translate(0, 0) rotate(45deg);
}

.active > .burgerIconBarMiddle {
  opacity: 0;
  transform: translate(0, 0) rotate(45deg);
}

.active > .burgerIconBarBottom {
  transform: translate(0, 0) rotate(-45deg);
}


.logoutConfirmContent {
  padding: 2rem;
}

.navFrame {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: #fff;
  min-width: 20rem;
  max-width: 100vw;
  padding: 1.25rem;
  transform-origin: top right;
}

.navInfo {
  margin: 0;
  color: #071920;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.4;
}

.navInfoNameTag {
  word-break: break-all;
}

.navBtn {
  padding: 0.5rem 1rem;
  font-size: 1.3rem;
}


.headerContainer {
  height: 6rem;
}

.headerOverlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition: 200ms opacity;
}

.headerOverlay.active {
  opacity: 1;
  pointer-events: all;
}

.headerFrame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  background-color: #071920;
  width: 100%;
  height: 6rem;
  position: fixed;
}

.headerBrandWrapper {
  flex: 0 0 auto;
}

.headerBrandLogo {
  height: 1.75rem;
  margin: 0 1rem;
  user-select: none;
}

.headerTitleWrapper {
  flex: 0 0 auto;
}

.headerTitle {
  min-height: 1.5rem;
  margin: 0;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 300;
  white-space: nowrap;
}

.headerNavWrapper {
  position: absolute;
  top: 0;
  right: 0;
}

.headerNav {
  position: absolute;
  top: 3rem;
  right: 0;
}

.headerNavBtn {
  background-color: #145569;
  width: 3rem;
  height: 3rem;
  color: #fff;
}

.headerNavBtn.active {
  background-color: #c7edf3;
}

.headerNavBurgerIcon {
  --spacing: 0.35rem;
  width: 1rem;
}

@media (min-width: 600px) {
  .headerContainer {
    height: 4rem;
  }

  .headerFrame {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0;
    height: 4rem;
  }

  .headerBrandWrapper {
    flex: 1 0 0;
    display: flex;
    justify-content: flex-start;
  }

  .headerBrandLogo {
    margin: 0.5rem 1rem;
  }

  .headerTitleWrapper {
    flex: 0 1 auto;
  }

  .headerTitle {
    font-size: 1.7rem;
    white-space: normal;
  }

  .headerNavWrapper {
    flex: 1 0 0;
    align-self: flex-start;
    display: flex;
    justify-content: flex-end;
    position: static;
    top: initial;
    right: initial;
  }

  .headerNav {
    position: absolute;
    top: 4rem;
    right: 0;
  }

  .headerNavBtn {
    width: 4rem;
    height: 4rem;
    margin-left: 1rem;
  }

  .headerNavBurgerIcon {
    --spacing: 0.55rem;
    width: 1.5rem;
  }
}


.connectContainer {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background-image: url(shared/bd73cdd15c46772393ea.jpg);
  background-position: center 90%;
  background-size: cover;
  background-attachment: fixed;
  padding: 2rem 0;
}

.connectFrame {
  display: flex;
  flex-direction: column;
  width: 33%;
  min-width: 22.5rem;
  max-width: 95%;
  margin: auto;
}

.connectHeader {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(7, 25, 32, 0.95);
  padding: 3rem 0.5rem 2.5rem;
}

.connectTitle {
  margin: 0;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 300;
  text-align: center;
  line-height: 1.25;
}

.connectTitle strong {
  font-weight: 500;
}

.connectBody {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(20, 85, 105, 0.95);
  padding: 2rem 1rem;
}

.connectCta {
  width: 18.5rem;
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.3;
}

.connectInput {
  background-color: #fff;
  width: 16rem;
  height: 4rem;
  border: 0;
  border-radius: 2.5rem;
  margin: 1.5rem 0;
  color: #071920;
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.25rem;
}

.connectInput.username {
  width: 18rem;
  font-size: 1.7rem;
  text-transform: none;
  letter-spacing: normal;
}

.connectInput::placeholder {
  position: relative;
  top: -0.25rem;
  color: rgba(7, 25, 32, 0.6);
  font-size: 1.25rem;
  text-transform: none;
  letter-spacing: normal;
}

.connectSubmit {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3.5rem;
  margin: 0.5rem 0;
}

.connectBtn {
  width: 13rem;
  cursor: pointer;
}

.connectLoader {
  width: 2.5rem;
  height: 2.5rem;
}

.connectFooter {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 7rem;
  background-color: #071920;
  padding: 1rem 2rem;
}

.connectFooter.hidden {
  flex: 0 1 auto;
  /* ^ attempt at disabling the scrollbar
       when footer is hidden. */
}

.connectMessage {
  margin: 0;
  color: #ff8080;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.3;
}


.holdingContainer {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(shared/bd73cdd15c46772393ea.jpg);
  background-position: center 90%;
  background-size: cover;
  background-attachment: fixed;
  padding: 2rem 0;
}

.holdingFrame {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 33%;
  min-width: 22.5rem;
  max-width: 95%;
  min-height: 100%;
  margin: auto;
}

/* .holdingHeader {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background-color: rgba(7, 25, 32, 0.95);
  padding: 2rem 1rem;
} */

/* .holdingBrandLogo {
  height: 2rem;
  margin: 0 0.75rem;
  user-select: none;
} */

/* .holdingTitle {
  margin: 1.5rem 0 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
} */

.holdingText {
  max-width: 20rem;
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 300;
  text-align: center;
  line-height: 1.4;
}

.holdingBody {
  flex: 0 0 auto;
}

.holdingWelcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 10rem;
  background-color: rgba(20, 85, 105, 0.95);
  padding: 2rem 1rem;
}

.holdingSubtitle {
  max-width: 20rem;
  margin: 0.25rem 0 0;
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
}

.holdingCompletion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(20, 85, 105, 0.95);
  padding: 2rem 1rem;
}

.holdingContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #28272a;
  padding: 2.5rem 1.5rem;
}

/* .holdingStart .holdingContent,
.holdingNext .holdingContent {
  padding: 1rem 1.5rem 2rem;
} */

.holdingStart .holdingContent {
  padding: 1rem 1.5rem 2rem;
}

.holdingGraphic {
  max-width: 20rem;
  margin-bottom: 0.5rem;
  user-select: none;
}

.holdingBanner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  padding: 0.5rem 1rem;
}

.holdingBannerIcon {
  width: 4rem;
  height: 4rem;
  fill: #fdf901;
}

.holdingBannerTitle {
  margin: 0;
  margin-left: 1.25rem;
  color: #fdf901;
  font-weight: normal;
  font-size: 1.9rem;
  line-height: 1.25;
}

.holdingFooter {
  flex: 0 1 auto;
  /* ^ this is convenient as footer
       is just a filler and doesn't
       need a scrollbar. */
  height: 5rem;
}


.textContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

.textMarkdown {
  max-width: 50rem;
  flex: 1 1 auto;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
}


.submitContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 5.5rem;
  margin: 0.5rem 0;
}

.submitLoader {
  width: 2.5rem;
  height: 2.5rem;
}

.submitMessage {
  width: 100%;
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
}

.submitMessage strong {
  font-weight: bold;
}

.submitBtn {
  cursor: pointer;
}


.mcqOptionList {
  display: flex;
  flex-direction: column;
}

.mcqOption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border: 0.25rem solid transparent;
  margin: 0.5rem 0;
  color: #071920;
  fill: currentcolor;
}

.mcqOption:disabled {
  opacity: 1;
  pointer-events: all;
  user-select: text;
  cursor: auto;
}

.mcqOption.active {
  background-color: #556b71;
  color: #fff;
}

.mcqOption.correct {
  border-color: #46c3d7;
}

.mcqOptionIcon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0.125rem;
}

.mcqOptionLabel {
  flex: 1 1 auto;
  margin: 0.5rem 0.75rem 0.5rem 0.25rem;
  font-size: 1.25rem;
  text-align: left;
  line-height: 1.4;
}

.mcqOptionContainer {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin: 0.25rem;
}

.mcqOptionTick {
  background-color: #071920;
  border-radius: 1.25rem;
  fill: #fff;
}


.dropdownContainer {
  min-width: 6rem;
  height: 3rem;
  position: relative;
  color: #071920;
}

.dropdownContainer.active {
  color: #fff;
}

.dropdownSelect {
  background-color: #e8e9eb;
  width: 100%;
  height: 100%;
  padding: 0 3rem 0 0.875rem;
  border: none;
  color: currentcolor;
  font-size: 1.25rem;
  line-height: 1.25;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.dropdownSelect:invalid {
  color: #556b71;
}

.active > .dropdownSelect {
  background-color: #556b71;
}

.dropdownIcon {
  width: 2.25rem;
  height: 100%;
  position: absolute;
  right: 0.25rem;
  stroke: currentcolor;
  stroke-width: 8;
  pointer-events: none;
}


.matchingItemList {
  display: flex;
  flex-direction: column;
}

.matchingItem {
  display: flex;
  flex-direction: column;
  margin: 0.5rem 0;
}

.matchingItemDesc {
  flex: 0 0 auto;
  background-color: #071920;
  padding: 0.625rem 0.875rem;
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.4;
}


.matchingResultItem {
  margin: 1.5rem 0;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.4;
}

.matchingResultItem p {
  margin: 0;
}

.matchingResultItemLabel {
  font-weight: 500;
}

.matchingResultItemAnswer {
  font-weight: 300;
}

.matchingResultItemIcon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  fill: #72cf80;
}

.matchingResultItemResult {
  font-weight: 300;
}


.orderingItem {
  display: flex;
  background-color: #071920;
  margin: 0.5rem 0;
}

.orderingItemLabelContainer {
  flex: 1 1 auto;
  align-self: center;
  padding: 0.625rem 0.875rem;
}

.orderingItemLabel {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
}

.orderingItemBtnContainer {
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  padding: 0.375rem;
}

.orderingItemBtn {
  background-color: #fff;
  padding: 0.25rem;
  margin-left: 0.375rem;
  fill: #071920;
}

.orderingItemBtn:first-child {
  margin-left: 0;
}

.orderingItemBtn:disabled {
  visibility: hidden;
}

.orderingItemBtnIcon {
  width: 2.25rem;
  height: 2.25rem;
}

.orderingItemBtnIcon.rotated {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .orderingItemBtn:hover {
    background-color: #556b71;
    fill: #fff;
  }
}


.orderingResultSection {
  margin: 1.5rem 0;
}

.orderingResultSectionName {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

.orderingResultFlex {
  display: flex;
  margin: 1rem 0;
}

.orderingResultBar {
  /* background-color: #50c364; */
  background-color: rgba(80, 195, 100, 0.7);
  width: 1.5rem;
  position: relative;
}

.orderingResultBar.transparent {
  background-color: transparent;
}

.orderingResultBarWrong {
  /* background-color: #d30c4d; */
  background-image: repeating-linear-gradient(-45deg, #d30c4d, #d30c4d 5px, #fff 5px, #fff 7px);
  border: 2px solid #fff;
  width: 100%;
  position: absolute;
}

.orderingResultList {
  padding-left: 2rem;
  margin: 0;
}

.orderingResultList li {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
}

.orderingResultItemIcon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  fill: #72cf80;
}


.numericEntry {
  margin: 1.5rem 0;
}

.numericEntryQuestion {
  margin: 0 0 0.5rem;
  color: #fff;
  font-size: 1.25em;
  line-height: 1.4;
}

.numericEntryQuestion.noMargin {
  margin: 0;
}

.numericEntryValues {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.4;
}

.numericEntryValues span {
  margin: 0 0.5rem;
}

.numericEntryInput {
  background-color: #fff;
  width: 5.5rem;
  padding: 0.5rem;
  border: none;
  color: #000;
  font-size: 1.5rem;
  text-align: right;
  line-height: 1.4;
}

/* Chrome, Safari, Edge, Opera */
.numericEntryInput::-webkit-outer-spin-button,
.numericEntryInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.numericEntryInput {
  -moz-appearance: textfield;
}

.numericEntryTable {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
}

.numericEntryTable strong {
  font-weight: bold;
}

.numericEntryTable td:first-child {
  text-align: right;
}

.numericEntryTable td:nth-child(2) {
  padding-left: 1rem;
}

.numericResultEntryIcon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  fill: #72cf80;
}


.delegatesContainer {
  padding-top: 3rem;
}

.delegatesFrame {
  display: flex;
  height: 4rem;
}

.delegatesValue {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #071920;
  width: 4rem;
  position: relative;
}

.delegatesValueLabel {
  display: flex;
  justify-content: center;
  width: inherit;
  margin: 0;
  position: absolute;
  top: -0.35rem;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.25;
  transform: translateY(-100%);
}

.delegatesValueCount {
  margin: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1.25;
}

.delegatesProgress {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(7, 25, 32, 0.7);
  padding: 0 1rem;
  position: relative;
}

.delegatesProgressBar {
  background-color: #3b555d;
  height: 0.25rem;
  overflow: hidden;
}

.delegatesProgressBarActive {
  background-color: #fff;
  width: inherit;
  height: inherit;
  transition: transform 250ms;
}

.delegatesProgressIconGutter {
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  bottom: 0;
  transition: transform 250ms;
}

.delegatesProgressIcon {
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(50%);
  fill: #50c364;
}


.activityContainer {
  /* start bottom element fix */
  display: flex;
  /* flex-direction: column; */
  /* end bottom element fix */
}

.activityFrame {
  /* start bottom element fix */
  display: flex;
  flex-direction: column;
  /* end bottom element fix */
  width: 36rem;
  padding: 2rem 1.5rem;
  margin: 0 auto;
}

.activityTitle {
  margin: 0 0 0.25rem;
  color: #46c3d7;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.25;
}

.activitySubtitle {
  margin: 0 0 1.25rem;
  color: #46c3d7;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.25;
}

.activityMarkdown {
  margin-bottom: 1rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
}

.activityMarkdown > p {
  margin: 0.75rem 0;
}

.activityCta {
  margin: 1rem 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.4;
}

.activitySubmit {
  margin: 1.5rem 0;
}

.activityDelegates {
  margin-top: auto;
}


.scoreContainer {
  display: flex;
  flex-direction: column;
  background-color: #797d80;
  min-height: 100%;
  padding-top: 1.25rem;
}

.scoreTitle {
  flex: 0 0 auto;
  background-color: #000;
  border-radius: 0.5rem;
  padding: 0.5rem 2rem;
  margin: 0 auto 1.25rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.25;
}

.scoreFrame {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.scoreAltimeter {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-image: url(shared/568208d46ef091ee7368.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18rem;
  height: 18rem;
  margin-bottom: 1.25rem;
  position: relative;
}

.scoreAltimeterDisplay {
  background-color: #000;
  padding: 0.125rem 0.25rem 0.125rem 0.375rem;
  border-radius: 0.25rem;
  margin-right: 2.25rem;
  overflow: hidden;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.25;
  letter-spacing: 0.125rem;
}

.scoreAltimeterHand {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: inherit;
  height: inherit;
  position: absolute;
  pointer-events: none;
  transition: transform 1s;
}

.scoreAltimeterHand0 {
  background-image: url(shared/8040eec44c7771994f6d.png);
}

.scoreAltimeterHand1 {
  background-image: url(shared/6e920e456e85717ec0b1.png);
}

.scoreMcdu {
  flex: 1 0 auto;
  background-image: url(shared/57fa5a5c22d08a32afbd.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  width: 22.5rem;
  max-height: 35rem;
  padding: 2.75rem 3.25rem 5rem;
}

.scoreMcduDisplay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* background-image: linear-gradient(#222, #000); */
  /* background-color: #000; */
  width: 16rem;
  height: 11.75rem;
  /* border-radius: 0.35rem; */
  overflow: hidden;
  position: relative;
}

.scoreMcduProgress {
  display: flex;
  align-items: center;
  height: 3rem;
  padding: 0 1rem;
  position: relative;
}

.scoreMcduProgressPoint {
  background-color: #50c364;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.scoreMcduProgressPoint.darker {
  background-color: #286232;
}

.scoreMcduProgressBar {
  flex: 1 1 auto;
  background-color: #3b555d;
  height: 0.125rem;
  position: relative;
  overflow: hidden;
}

.scoreMcduProgressBarActive {
  background-color: #fff;
  width: inherit;
  height: inherit;
  transition: transform 1s;
}

.scoreMcduProgressIconGutter {
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  transition: transform 1s;
}

.scoreMcduProgressIcon {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(50%);
  fill: #50c364;
}

.scoreMcduStats {
  margin: 0.5rem 0;
  border-spacing: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.4;
  text-transform: uppercase;
}

.scoreMcduStats tr:nth-child(1) {
  color: #fff;
}

.scoreMcduStats tr:nth-child(2) {
  color: #46c3d7;
}

.scoreMcduStats tr:nth-child(3) {
  color: #50c364;
}

.scoreMcduStats tr:nth-child(4) {
  color: #50c364;
}

.scoreMcduStats td {
  vertical-align: bottom;
}

.scoreMcduStats td:first-child {
  text-align: right;
}

.scoreMcduStats td:last-child {
  min-width: 5rem;
  padding-left: 0.75rem;
}

@media (min-width: 900px) {
  .scoreContainer {
    padding: 2rem 2rem 0;
  }

  .scoreTitle {
    margin-bottom: 2rem;
  }

  .scoreFrame {
    flex-direction: row;
    align-items: stretch;
  }

  .scoreAltimeter {
    margin-right: 6rem;
    margin-bottom: 2rem;
  }

  .scoreMcdu {
    flex: 0 0 auto;
    width: 26.5rem;
    max-height: 41.25rem;
    padding: 3.25rem 3.75rem 5.5rem;
  }

  .scoreMcduDisplay {
    width: 19rem;
    height: 13.75rem;
  }

  .scoreMcduProgressPoint {
    width: 0.65rem;
    height: 0.65rem;
  }

  .scoreMcduStats {
    border-spacing: 0.25rem;
    font-size: 1rem;
  }

  .scoreMcduStats td:last-child {
    padding-left: 1rem;
  }
}


.scenarioContainer {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.scenarioContainer.extraPadding {
  padding-bottom: 3.5rem;
}

.scenarioContent {
  flex: 1 0 auto; /* bottom element fix */
  overflow-x: auto;
}

.scenarioTab {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100% - 8rem);
  position: fixed;
  bottom: 0;
  transform: translateY(calc(100% - 3.5rem));
  transition: transform 500ms;
  cursor: pointer;
}

.scenarioTab.active {
  transform: none;
}

.scenarioTabBanner {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  height: 2.5rem;
  border-bottom: 0.5rem solid #46c3d7;
  position: relative;
}

.scenarioTabBannerBg {
  position: absolute;
  top: 1px; /* fix pixel gap */
  left: 0;
  right: 0;
  /* bottom: 0; */
  fill: #46c3d7;
}

.scenarioTabBannerBox {
  display: flex;
  align-items: flex-end;
  position: relative;
  left: 0.25rem;
}

.scenarioTabBannerTitle {
  margin: 0;
  color: #071920;
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.25;
}

.scenarioTabBannerIcon {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.5rem;
  stroke: #071920;
  stroke-width: 10;
}

.scenarioTab.active .scenarioTabBannerIcon {
  transform: rotate(180deg);
}

.scenarioTabContent {
  flex: 0 0 auto;
  overflow-y: auto;
}


.popupContainer {
  display: flex;
  flex-direction: column;
  padding: 3rem 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  will-change: opacity;
}

.popupOverlay {
  background-color: rgba(7, 25, 32, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.popupFrame {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  max-width: 40rem;
  margin: auto;
  color: #252627;
  font-size: 1.3rem;
  font-weight: 300;
  text-align: center;
  line-height: 1.4;
  will-change: transform;
}

.popupTitle {
  margin: 0 1rem 1.5rem;
  color: #071920;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}

.popupBtnGroup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.popupBtn {
  min-width: 14rem;
}

@media (min-width: 600px) {
  .popupBtnGroup {
    flex-direction: row;
    gap: 2rem;
    margin-top: 3rem;
  }

  .popupBtn {
    min-width: 12rem;
  }
}


.appContainer {
  width: 100%;
  height: 100%;
}

.appPage {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.appHeader {
  flex: 0 0 auto;
  z-index: 10;
}

.appBuildVersion {
  background-color: #000;
  padding: 0.25rem 0.5rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  position: fixed;
  right: 16px;
  bottom: 0;
  z-index: 999;
  color: #fff;
  font-family: monospace;
  pointer-events: none;
  user-select: none;
}