.phasePage:not(.video) {
  padding-top: var(--header-height);
  height: calc(var(--app-height) - var(--header-height));
  min-height: auto;
}

.phasePage.video:before,
.phasePage.video:after {
  content: '';
  width: 100vw;
  height: 400px;
  position: fixed;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.phasePage.video:before {
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.phasePage.video:after {
  bottom: 0;
  left: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.phasePage.video footer {
  z-index: 2;
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .phasePage footer {
    display: none;
  }
}

/* SECTION Phase Header */

.phaseHeader {
  position: fixed;
  top: var(--header-height);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 60px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: -10px;
  z-index: var(--index-modal);
}

.phaseHeader .goBackLink svg * {
  fill: var(--blue-med);
}

.phaseHeader .goBackLink:hover svg * {
  fill: var(--blue-darker);
}

.phaseHeader .contentWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
}

.phaseHeader .contentWrapper .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.phaseHeader .ringNumber,
.phaseHeader .ringName {
  font-weight: var(--black);
  text-transform: uppercase;
}

.phaseHeader .phase {
  display: flex;
  align-items: center;
  justify-content: center;
}

.phaseHeader .phase p {
  font-size: var(--F30);
  font-weight: var(--black);
  text-transform: uppercase;
  margin-left: 10px;
}

.phaseHeader.onDark * {
  color: var(--white);
}

.phaseHeader.onDark svg * {
  fill: var(--white);
}

.phaseHeader.onDark .divider {
  background-color: var(--white);
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .phaseHeader:not(.onDark) .ringNumber {
    color: var(--blue-med);
  }
  .phaseHeader .ringNumber,
  .phaseHeader .ringName {
    font-size: var(--F14);
  }
}

@media (max-width: 1023px) {
  .phaseHeader {
    top: calc(var(--header-height) - 2px);
    width: 100vw;
    padding: 0 20px 10px 0;
    margin-left: 0;
  }

  .phaseHeader .divider {
    display: none;
  }

  .phaseHeader .contentWrapper .content {
    align-items: flex-end;
  }

  .phaseHeader:not(.onDark) .ringNumber {
    color: var(--blue-darker);
  }

  .phaseHeader .ringNumber {
    font-size: var(--F12);
  }

  .phaseHeader .ringName {
    font-size: var(--F25);
    line-height: var(--F25);
  }

  .phaseHeader .phase {
    margin-left: 30px;
  }

  .phaseHeader .phase .icon {
    width: 30px;
    height: 30px;
  }

  .phaseHeader .phase p {
    font-size: var(--F15);
    margin-left: 5px;
  }
}

/* !SECTION */

/* SECTION Phase Footer */

.phaseFooter {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--index-header);
}

/* !SECTION */

/* SECTION Phase End */

.endOfPhase {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--index-modal);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ANCHOR Content */

.endOfPhase .content {
  box-shadow: var(--shadow);
  border-radius: 30px;
  background: var(--white);
  z-index: 2;
  width: 1220px;
  height: 580px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.endOfPhase .content .confetti {
  position: absolute;
  width: calc(100% - 80px);
  height: 100%;
  z-index: -1;
}

/* ANCHOR Media Query */

@media (min-width: 1440px) {
  .endOfPhase .content {
    width: 1220px;
  }
}
@media (min-width: 1024px) {
  .endOfPhase .content {
    width: calc(100% - 40px);
    max-width: 1220px;
    height: 580px;
    padding: 40px 0;
  }
}

@media (max-width: 1023px) {
  .endOfPhase .content {
    width: calc(100% - 40px);
    max-height: 510px;
    align-items: flex-start;
    padding: 10px 0;
  }
}

@media (max-width: 320px) {
  .endOfPhase .content {
    width: calc(100% - 20px);
  }
}

/* ANCHOR Center */

.endOfPhase .content .center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 380px;
}

.endOfPhase .center .top,
.endOfPhase .center .middle,
.endOfPhase .center .bottom {
  display: flex;
  width: 100%;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .endOfPhase .content .center {
    width: 380px;
  }
}

@media (max-width: 1023px) {
  .endOfPhase .content .center {
    max-width: 380px;
    width: calc(100% - 20px);
  }
}

/* ANCHOR Top */

.endOfPhase .center .top {
  flex-direction: column;
}

.endOfPhase .center .top .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .endOfPhase .center .top {
    display: none;
  }
}

.endOfPhase .center .top .currentRing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.endOfPhase .center .top .currentRing .ring,
.endOfPhase .center .top .currentRing .name {
  font-size: var(--F13);
  font-weight: var(--black);
  text-transform: uppercase;
}

.endOfPhase .center .top .currentRing .ring {
  color: var(--blue-med);
}

.endOfPhase .center .top .phase {
  display: flex;
  justify-content: center;
  align-items: center;
}
.endOfPhase .center .top .phase p {
  font-size: var(--F25);
  font-weight: var(--black);
  text-transform: uppercase;
  margin-right: 5px;
}

/* ANCHOR Middle */

.endOfPhase .center .middle {
  flex-direction: column;
}

.endOfPhase .middle .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.endOfPhase .middle .text .completed {
  font-size: var(--F30);
  font-weight: var(--black);
  text-transform: uppercase;
  margin: 10px -15px 10px 0;
}

.endOfPhase .middle .text .congratulations {
  font-size: var(--F40);
  font-weight: var(--black);
  color: var(--blue-med);
  text-transform: uppercase;
  margin-top: 10px;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .endOfPhase .middle .text .completed {
    font-size: var(--F30);
    letter-spacing: 15px;
  }

  .endOfPhase .middle .text .congratulations {
    font-size: var(--F40);
  }
}

@media (max-width: 1023px) {
  .endOfPhase .middle .text .completed {
    font-size: var(--F24);
    letter-spacing: 10px;
    margin-right: -10px;
  }

  .endOfPhase .middle .text .congratulations {
    font-size: var(--F30);
  }
}

.endOfPhase .middle .punctuation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}

.endOfPhase .middle .punctuation .points {
  display: flex;
  justify-content: center;
  align-items: center;
}

.endOfPhase .middle .punctuation .points p {
  font-size: var(--F30);
  font-weight: var(--regular);
  text-transform: uppercase;
  margin-left: 5px;
}

.endOfPhase .middle .punctuation .points .obtainedPoints {
  font-weight: var(--black);
  margin-left: 5px;
}

.endOfPhase .middle .punctuation .currentPointsWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--grey-2);
  padding: 0 15px;
  border-radius: 30px;
}

.endOfPhase .middle .punctuation .currentPointsWrapper .title {
  font-weight: var(--black);
  text-transform: uppercase;
}

.endOfPhase .middle .punctuation .currentPointsWrapper .currentPoints {
  font-size: var(--F30);
  font-weight: var(--black);
  color: var(--blue-med);
  text-transform: uppercase;
}

.endOfPhase .middle .punctuation .currentPointsWrapper .currentPoints span {
  font-weight: var(--regular);
  color: var(--blue-darker);
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .endOfPhase .middle .punctuation .points .pts {
    font-size: var(--F15);
    margin-left: 5px;
  }

  .endOfPhase .middle .punctuation .currentPointsWrapper .title {
    font-size: var(--F08);
    width: 70px;
  }

  .endOfPhase .middle .punctuation .currentPointsWrapper .currentPoints span {
    font-size: var(--F12);
    margin-left: 5px;
  }
}

@media (max-width: 1023px) {
  .endOfPhase .middle .punctuation .points .pts {
    font-size: var(--F10);
    margin-left: 2px;
  }

  .endOfPhase .middle .punctuation .currentPointsWrapper .title {
    font-size: var(--F07);
    width: 60px;
  }

  .endOfPhase .middle .punctuation .currentPointsWrapper .currentPoints {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }

  .endOfPhase .middle .punctuation .currentPointsWrapper .currentPoints span {
    font-size: var(--F11);
    margin-top: -6px;
  }
}

/* ANCHOR Bottom */

.endOfPhase .center .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

.endOfPhase .center .bottom .roundedClick {
  width: calc(50% - 10px);
}

/* ANCHOR Images */

.endOfPhase .content .left,
.endOfPhase .content .right {
  width: 30%;
  pointer-events: none;
}

.endOfPhase .content .left img,
.endOfPhase .content .right img {
  width: 100%;
}

.endOfPhase .content .right img {
  transform: scaleX(-1);
}

.endOfPhase .content .confetti {
  pointer-events: none;
}

.endOfPhase .content .confetti img {
  width: 100%;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .endOfPhase .content .left,
  .endOfPhase .content .right {
    width: 30%;
  }

  .endOfPhase .content .confetti {
    pointer-events: none;
  }

  .endOfPhase .content .confetti img {
    height: 100%;
  }

  .endOfPhase .content .confetti .mobile {
    display: none;
  }
}

@media (max-width: 1023px) {
  .endOfPhase .content .left,
  .endOfPhase .content .right {
    width: 50%;
    position: absolute;
    bottom: 0;
    height: 30%;
  }

  .endOfPhase .content .left img {
    transform: scale(1.2) translateY(-30px);
    width: auto;
    height: 100%;
  }

  .endOfPhase .content .right img {
    transform: scale(-1.2) rotateX(180deg) translateY(-30px);
    width: auto;
    height: 100%;
  }

  .endOfPhase .content .right {
    right: 0;
  }

  .endOfPhase .content .left {
    left: 0;
  }

  .endOfPhase .content .confetti {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
  }

  .endOfPhase .content .confetti .desktop {
    display: none;
  }
}

/* ANCHOR Veil */

.endOfPhase .veil {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  z-index: -1;
  background: var(--black-50);
  display: block;
}

/* !SECTION */

/* SECTION Video */

.formation .videoInterface,
.closure .videoInterface {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
}

.formation .videoWrapper,
.closure .videoWrapper {
  width: 100vw;
  height: 100vh;
}

.formation .videoWrapper img,
.closure .videoWrapper img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.formation .infoVideo .videoWrapper,
.closure .infoVideo .videoWrapper {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--white);
  position: relative;
}

.formation .videoWrapper iframe,
.closure .videoWrapper iframe {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px;
  overflow: hidden;
}

/* !SECTION */

/* SECTION Question Item */

.questionItem {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.questionItemWrapper {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: var(--shadow);
  background-color: var(--white);
  user-select: none;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .questionItemWrapper {
    justify-content: space-between;
    width: 1050px;
    height: 430px;
  }
}

@media (max-width: 1023px) {
  .questionItem {
    height: calc(100% - 60px);
  }

  .questionItemWrapper {
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 40px);
    align-self: stretch;
  }
}

/* ANCHOR Content left */

.questionItem .content.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  height: 100%;
  padding: 20px;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .questionItem .content.left {
    width: 40%;
  }
}

@media (max-width: 1023px) {
  .questionItem .content.left {
    width: 100%;
  }
}

.questionItem .content.left .contentWrapper {
  color: var(--white);
  z-index: 1;
}

.questionItem .content.left .contentWrapper .number {
  font-size: var(--F50);
  font-weight: var(--regular);
  margin-bottom: var(--spacing-x2);
}

.questionItem .content.left .contentWrapper h2 {
  font-size: var(--F25);
  font-weight: var(--bold);
  text-align: left;
}

.questionItem .content.left .contentWrapper .points {
  font-size: var(--F40);
  font-weight: var(--medium);
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-top: var(--spacing-x2);
}

.questionItem .content.left .contentWrapper .points span {
  font-size: var(--F15);
  font-weight: var(--medium);
  text-align: left;
  text-transform: uppercase;
  margin-left: 10px;
}

.questionItem .imageWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.questionItem .imageWrapper:before {
  content: '';
  background-color: var(--black-50);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.questionItem .imageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ANCHOR Content Right */

.questionItem .content.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 60%;
  height: 100%;
}

.questionItem .instructions {
  font-size: var(--F12);
  color: var(--grey-3);
  margin-top: var(--spacing-x1);
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .questionItem .content.right {
    width: 60%;
    padding: var(--spacing-x2);
  }
}

@media (max-width: 1023px) {
  .questionItem .content.right {
    width: 100%;
    padding: var(--spacing-x1);
  }
}

/* !SECTION */

/* SECTION Trivial */

.icon.trivial .piece {
  opacity: 0.75;
}

.trivial,
.challenge {
  height: 100%;
}

.clinicCase form,
.clinicCase fieldset,
.trivial form,
.trivial fieldset,
.challenge form,
.challenge fieldset {
  width: 100vw;
}

.clinicCase form,
.trivial form,
.challenge form {
  margin-top: 70px;
  height: calc(100% - 70px);
}

.clinicCase fieldset,
.trivial fieldset,
.challenge fieldset {
  height: 100%;
}

.trivial fieldset,
.challenge fieldset {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.challenge .questionsWrapper,
.trivial .questionsWrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.challenge .questionsPosition,
.trivial .questionsPosition {
  position: relative;
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .trivial,
  .challenge {
    align-self: flex-end;
  }

  .trivial fieldset,
  .challenge fieldset {
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  .trivial .phaseHeader,
  .challenge .phaseHeader,
  .clinicCase .phaseHeader {
    background-color: var(--bg);
  }

  .challenge .questionsWrapper,
  .trivial .questionsWrapper {
    margin-top: 10px;
    height: calc(100% - 80px);
  }

  .challenge .questionsPosition,
  .trivial .questionsPosition {
    height: 100%;
  }

  .trivial fieldset,
  .challenge fieldset {
    justify-content: flex-start;
  }
}

.trivial .trivialOption {
  --option-height: 65px;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 95%;
  height: var(--option-height);
  background-color: var(--grey-2);
  border-radius: var(--option-height);
  padding-left: calc(var(--option-height) + 15px);
}

.trivial .trivialOption + .trivialOption {
  margin-top: 20px;
}

.trivial .trivialOption .letter {
  font-size: var(--F20);
  font-weight: var(--medium);
  color: var(--white);
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--option-height);
  height: var(--option-height);
  border-radius: var(--option-height);
  z-index: 1;
  background: var(--blue-med);
}

.trivial .trivialOption .text {
  font-size: var(--F16);
  text-align: left;
  color: var(--blue-darker);
}

.trivial .trivialOption:hover,
.trivial .trivialOption.selected {
  background: var(--click-gradient);
}

.trivial .trivialOption:hover .text,
.trivial .trivialOption.validated .text,
.trivial .trivialOption.selected .text {
  color: var(--white);
}

.trivial .trivialOption.validated {
  background: var(--grey-1);
}

.trivial .trivialOption.validated .letter {
  background: var(--black-100);
}

.trivial .trivialOption .validation {
  position: absolute;
  left: calc(100% + 10px);
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--grey-3);
  border-radius: 100%;
}

.trivial .trivialOption .validation svg * {
  fill: var(--white);
}

.trivial .controls,
.challenge .controls {
  display: flex;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .trivial .controls,
  .challenge .controls {
    margin-top: var(--spacing-x2);
  }
}

/* !SECTION */

/* SECTION Challenge */

.challenge .content.right {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.challenge .optionsGrid {
  width: 100%;
  display: grid;
}

.challenge .challengeOption {
  --option-height: 65px;

  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--grey-2);
  height: var(--option-height);
  width: 100%;
  border-radius: var(--option-height);
  padding: 0 20px;
}

.challenge .challengeOption .text {
  color: var(--white);
  color: var(--blue-darker);
  text-transform: uppercase;
  font-size: var(--F16);
  font-weight: var(--bold);
}

.challenge .challengeOption.selected {
  background: var(--click-gradient);
}

.challenge .challengeOption.selected .text {
  color: var(--white);
}

.challenge .challengeOption.correct {
  background: var(--grey-1);
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
}

@media (max-width: 1023px) {
  .challenge .optionsGrid {
    margin-top: 10px;
  }
}

@media (min-width: 768px) {
  .challenge .optionsGrid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
  }
}

@media (max-width: 767px) {
  .challenge .optionsGrid {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
  }
}

/* !SECTION */

/* SECTION Clinic Case */

.clinicCase .content.right > p {
  font-size: var(--F18);
}

.clinicCase .actions {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}

/* !SECTION */

/* SECTION Event */

.event .eventWrapper {
  margin-top: 70px;
  height: calc(100% - 70px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* !SECTION */