/* Base & Reset Styles */
:root {
  --text-pageTitle-casing-large: none;
  --text-pageTitle-letter-spacing-large: 0;
  --text-pageTitle-line-height-large: 44px;
  --text-pageTitle-size-large: 40px;
  --text-pageTitle-weight-large: 700;
  --text-pageTitle-casing-small: none;
  --text-pageTitle-letter-spacing-small: 0;
  --text-pageTitle-line-height-small: 36px;
  --text-pageTitle-size-small: 32px;
  --text-pageTitle-weight-small: 700;
  --text-heading-casing-large: none;
  --text-heading-letter-spacing-large: 0;
  --text-heading-line-height-large: 32px;
  --text-heading-size-large: 28px;
  --text-heading-weight-large: 700;
  --text-heading-casing-medium: none;
  --text-heading-letter-spacing-medium: 0;
  --text-heading-line-height-medium: 32px;
  --text-heading-size-medium: 24px;
  --text-heading-weight-medium: 700;
  --text-heading-casing-small: none;
  --text-heading-letter-spacing-small: 0;
  --text-heading-line-height-small: 24px;
  --text-heading-size-small: 20px;
  --text-heading-weight-small: 700;
  --text-heading-casing-xsmall: none;
  --text-heading-letter-spacing-xsmall: 0;
  --text-heading-line-height-xsmall: 20px;
  --text-heading-size-xsmall: 16px;
  --text-heading-weight-xsmall: 700;
  --text-heading-line-height-xxsmall: 16px;
  --text-heading-size-xxsmall: 14px;
  --text-heading-weight-xxsmall: 700;
  --text-body-casing: none;
  --text-body-letter-spacing: 0;
  --text-body-line-height: 28px;
  --text-body-size: 20px;
  --text-body-weight: 500;
  --text-body-weight-bold: 700;
  --text-body-casing-spacious: none;
  --text-body-letter-spacing-spacious: 0;
  --text-body-line-height-spacious: 32px;
  --text-body-size-spacious: 20px;
  --text-body-weight-spacious: 500;
  --text-body-weight-spacious-bold: 700;
  --text-caption-casing: none;
  --text-caption-letter-spacing: 0;
  --text-caption-line-height: 24px;
  --text-caption-size: 16px;
  --text-caption-weight: 500;
  --text-caption-weight-bold: 700;
  --text-label-casing-large: uppercase;
  --text-label-letter-spacing-large: 0.04em;
  --text-label-line-height-large: 24px;
  --text-label-size-large: 24px;
  --text-label-weight-large: 700;
  --text-label-casing-medium: uppercase;
  --text-label-letter-spacing-medium: 0.04em;
  --text-label-line-height-medium: 16px;
  --text-label-size-medium: 16px;
  --text-label-weight-medium: 700;
  --text-label-casing-small: uppercase;
  --text-label-letter-spacing-small: 0.04em;
  --text-label-line-height-small: 16px;
  --text-label-size-small: 13px;
  --text-label-weight-small: 700;
}

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

* {
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: auto;
}

body {
  margin: 0;
  padding: 0;
  color: #4c4c4c;
  font: 500 16px/1.25 din-round, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
}

a {
  background-color: transparent;
  color: #777;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:active,
a:hover,
a:focus {
  outline: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

img {
  border-style: none;
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

button {
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

template {
  display: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

h1 {
  margin-top: -2px;
}

h2 {
  margin-top: -4px;
}

/* Typography & Text Styles */
.eMSb- {
  font-size: var(--text-pageTitle-size-large);
  font-weight: var(--text-pageTitle-weight-large);
  color: #4b4b4b;
}
.U9vjW {
  font-size: var(--text-heading-size-medium);
  font-weight: var(--text-heading-weight-medium);
  line-height: var(--text-heading-line-height-medium);
  color: #4b4b4b;
}
._2PQ62 {
  font-size: var(--text-heading-size-small);
  font-weight: var(--text-heading-weight-small);
  line-height: var(--text-heading-line-height-small);
  color: #4b4b4b;
}
.CeEDn {
  font-weight: var(--text-heading-weight-xsmall);
  line-height: var(--text-heading-line-height-xsmall);
}
.MXncZ {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-line-height);
  color: #777;
}
._3G5Pn {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
._2-rJ0 {
  text-wrap: balance;
}

._3eTiI {
  color: #afafaf;
  font-weight: 700;
  line-height: 16px;
  padding: 8px 16px;
}

/* Font Faces */
@font-face {
  font-family: din-round;
  font-style: normal;
  font-weight: 500;
  src: url(./fonts/font1.woff2) format('woff2');
}
@font-face {
  font-family: din-round;
  font-style: normal;
  font-weight: 700;
  src: url(./fonts/font2.woff2) format('woff2');
}

/* General Layout & Components */
#app {
  margin: 0 auto;
}
.TxR4u {
  min-height: calc(100vh - 74px);
}
._1H68_ {
  padding: 20px;
  width: 100%;
  border-radius: 0;
}
._1NdRh {
  background-color: #f7f7f7;
}
.GSMJc {
  border-radius: 12px 12px 0 0;
}
.CHYUr {
  border-radius: 0 0 12px 12px;
}
._2184m,
._290Ib,
.DGbsH {
  display: flex;
  justify-content: center;
  align-items: center;
}
._2HG-o {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Buttons & Interactive Elements */
.no-style-link {
  color: inherit;
  text-decoration: none;
}
._1ULQw {
  color: #777;
  padding: 0;
  border: 0;
  font-size: 16px;
  height: 16px;
  line-height: 16px;
}
._2yuIA {
  top: 40px;
  position: absolute;
  transform: translateX(-50%);
}
._1gM03 {
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  cursor: pointer;
  flex-direction: column;
  min-width: 212px;
  z-index: 1300;
}
._1uZI4 {
  position: relative;
  top: 6.7px;
  z-index: 1301;
}
.web-ui__LegacyButtonBase-module--variant-link-juicy-macaw {
  --__internal__color: var(--web-ui_button-color, rgb(var(--color-macaw)));
  --__internal__color-active: var(
    --web-ui_button-color-active,
    rgb(var(--color-whale))
  );
}
.web-ui__LegacyButtonBase-module--variant-link-juicy {
  --__internal__color-disabled: var(
    --web-ui_button-color-disabled,
    rgb(var(--color-hare))
  );
  --__internal__filter-hover: var(
    --web-ui_button-filter-hover,
    brightness(1.1)
  );
  --__internal__letter-spacing: var(--web-ui_button-letter-spacing, 0.04em);
  --__internal__line-height: var(
    --web-ui_button-line-height,
    calc(var(--__internal__height) - 4px)
  );
  background: none;
  border-color: transparent;
  border-width: 1px 1px 5px;
  transition: filter 0.2s;
}
.web-ui__LegacyButtonBase-module--variant-link-juicy.web-ui__LegacyButtonBase-module--fake-active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ),
.web-ui__LegacyButtonBase-module--variant-link-juicy:active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ) {
  color: var(--__internal__color-active);
}
.web-ui__LegacyButtonBase-module--variant-link-juicy.web-ui__LegacyButtonBase-module--small {
  --__internal__border-radius: var(--web-ui_button-border-radius, 8px);
  --__internal__font-size: var(--web-ui_button-font-size, 14px);
  --__internal__height: var(--web-ui_button-height, 32px);
  --__internal__padding: var(--web-ui_button-padding, 0 7px);
}
.web-ui__LegacyButtonBase-module--_base-juicy {
  letter-spacing: var(--__internal__letter-spacing);
  font: 700 var(--__internal__font-size) / var(--__internal__line-height)
      din-round,
    sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}
.web-ui__LegacyButtonBase-module--_base {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  cursor: pointer;
  display: inline-flex;
  position: relative;
  touch-action: manipulation;
  transform: translateZ(0);
}
.web-ui__LegacyButtonBase-module--_base:not(
    .web-ui__LegacyButtonBase-module--focus-outline-system
  ) {
  outline: none;
}
.web-ui__LegacyButtonBase-module--small {
  --__internal__border-radius: var(--web-ui_button-border-radius, 8px);
  --__internal__font-size: var(--web-ui_button-font-size, 14px);
  --__internal__height: var(--web-ui_button-height, 32px);
  --__internal__padding: var(--web-ui_button-padding, 0 7px);
}
.always-white-btn,
.always-white-btn:focus,
.always-white-btn:active,
.always-white-btn:focus-visible {
  background-color: white !important;
  outline: none !important;
  box-shadow: none !important;
}
._3iBSc,
._3oUfi:not(:disabled) {
  cursor: pointer;
}
._3oUfi:not(:disabled):hover,
._3F6wx:hover {
  filter: brightness(1.05);
}
._3oUfi:not(:disabled):active,
._3oUfi:not(:disabled):focus-within,
.chxL4:active,
.chxL4:focus-within {
  filter: brightness(0.9);
}
._30Pnx {
  border: none;
  background: none;
  padding: 0;
}
._30Pnx:disabled {
  color: #afafaf;
}
._2oSyN {
  color: #fa811b;
}
._1xE_S {
  font-weight: 700;
}
._1xE_S:not(._1m7W9) ._3Q1J4 {
  color: #2285d0;
}
._36OXH {
  background-color: transparent;
  border-radius: 10px;
  border: none;
  border-bottom: 2px solid #e5e5e5;
}

/* Facebook Specific Styles */
.fb_reset {
  background: none;
  border: 0px;
  border-spacing: 0;
  color: #000;
  cursor: auto;
  direction: ltr;
  font-family: lucida grande, tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  margin: 0;
  overflow: visible;
  padding: 0;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-spacing: normal;
}
.fb_reset > div {
  overflow: hidden;
}

/* --- Positioning & Hover Logic --- */
.g3gWc {
  position: relative;
}
.g3gWc ._2yuIA {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  top: 17.5px;
  left: 60px;
}
.g3gWc:hover > ._2yuIA {
  visibility: visible;
  opacity: 1;
}

/* Misc & Specific Component Styles */
._2NBfH {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
}
._2lOwd {
  height: 32px;
  width: 214px;
}
div:has(> ._1ZdAj) {
  padding: 10px 12px;
}
.web-ui__GradingButton-module--correct {
  --web-ui_button-background-color: rgb(var(--color-owl));
  --web-ui_button-border-color: rgb(var(--color-tree-frog));
}
._2ieYE {
  flex-wrap: wrap;
  gap: 16px;
}
._3bcpd {
  justify-content: space-between;
}
._1QeE0 {
  height: 16px;
  width: 16px;
}
._2ua3h {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
._2uA6- {
  align-items: center;
  background-color: #58cc02;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 16px;
  width: 100%;
}
._4wWMC {
  max-width: 1068px;
  width: 90vw;
}
.DbNWq {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
._3ziXj {
  width: 100%;
}
.oRbx- {
  display: grid;
  -moz-column-gap: 24px;
  column-gap: 24px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  row-gap: 26px;
}
.xc_Af {
  margin-bottom: 54px;
}
._2ltHO {
  color: #fff;
  font-size: 16px;
  margin: 8px 32px 16px 0;
}
._3yp8Y {
  display: flex;
  flex-direction: column;
}
._38F5V {
  color: #fff;
  font-size: 15px;
  margin-bottom: 10px;
  text-decoration: none;
}
._1Acy8 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._1-Pn1 {
  margin: 54px 0 32px !important;
  opacity: 0.5;
  width: 100%;
}
._3dSAx {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  row-gap: 24px;
  width: 100%;
}
._27hB- {
  align-items: center;
  display: flex;
  flex-direction: row;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
._1oDUa {
  height: 20px;
  margin-right: 8px;
  width: 20px;
}
._1MHhr {
  color: #fff;
  font-size: 16px;
  margin-right: 32px;
}
._1vFME {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  min-width: 150px;
}
._1muD_ {
  margin: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.v6tRX {
  max-width: 1280px;
  padding: 0 16px;
  width: 100%;
}
._1L8UI {
  background-color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  flex: 1;
}
._1gl7w {
  position: sticky;
  top: 0;
  z-index: 1000;
}
._2YxGL,
._921H- {
  align-items: center;
  display: flex;
  gap: 8px;
}
.DGbsH,
._1IiK6 {
  display: flex;
  align-items: center;
}
._1IiK6 {
  max-width: 1136px;
  justify-content: space-between;
  flex: 1 0 0;
}
._2S6_E {
  padding: 12px 0;
  flex: 1 0 0;
  border-bottom: 2px solid #e5e5e5;
  background: #fff;
}
._1c6in {
  cursor: pointer;
  height: 38px;
  margin-right: 24px;
}
._2Ik8i,
.g3gWc {
  display: flex;
  align-items: center;
  gap: 32px;
}
._921H- {
  cursor: pointer;
}
.bR9Hw {
  font-weight: var(--text-caption-weight-bold);
}
._3UJnX {
  display: flex;
  flex-direction: column;
  margin: 48px 0;
  padding: 0;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  font-size: 18px;
}
._3RA5c {
  width: 360px;
}
._2Qpr9 {
  display: flex;
  justify-content: space-between;
  padding: 24px 36px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
._1Ycii {
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
  color: #777;
}
._3Rs-V,
._3mZxb {
  display: flex;
}
._3Rs-V {
  align-items: center;
}
._1svC_ {
  padding-right: 8px;
}
.lidYP {
  margin-left: 24px;
}
._2EDV0 {
  color: #1cb0f6 !important;
}
._37I5l {
  background-color: #1cb0f6;
}
._35GV4 {
  border-radius: 20px;
  height: -moz-fit-content;
  height: fit-content;
  padding: 48px;
  text-align: start;
  width: 900px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
._1xr-i {
  width: 246px;
  padding: 12px;
  height: 100%;
  border-right: 2px solid #e5e5e5;
}
._1uXeI {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 2px solid #e5e5e5;
}
._1eXky {
  width: 260px;
}
._2_6HY {
  font-weight: 700;
  color: #777;
}
._1i92O,
._6dLAc,
._3bqL3,
._1j5J7,
._38S_D {
  font-size: 16px;
}
._2O4N_ {
  padding-bottom: 32px;
  border-bottom: 2px solid #e5e5e5;
  display: flex;
  gap: 16px;
}
.cb5cZ {
  width: 128px;
  height: 128px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 20px;
}
._6dLAc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
._1WnY9 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  color: #777;
}
._1y4hU {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 24px;
  min-width: 310px;
}
._3bqL3 {
  font-weight: 700;
  padding-right: 4px;
}
._1j5J7 {
  color: #1cb0f6 !important;
}
.E7aZw {
  margin-bottom: 16px;
}
._2D1vZ {
  border: 2px solid #e5e5e5;
  border-radius: 16px;
}
._2Nq1a {
  display: flex;
  height: 240px;
  align-items: center;
  gap: 20px;
}
._1tD0Y {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
}
._2r08x {
  display: flex;
  align-items: start;
  gap: 8px;
  width: 520px;
}
._3JK3z {
  display: flex;
  height: 136px;
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  gap: 20px;
  padding-left: 20px;
}
._1F2d1 {
  display: flex;
  flex-direction: column;
  width: 176px;
  justify-content: center;
  align-items: center;
}
._1D2Ma {
  color: #777;
  font-weight: 700;
}
._1zT_K {
  line-height: 48px;
}
._38S_D {
  display: flex;
  gap: 4px;
  color: #777;
  justify-content: center;
}
.U8a6N {
  color: #777;
  font-size: 14px;
  line-height: 20px;
}

/* Animations & Keyframes */
@keyframes MenuAnimOut5 {
  to {
    transform: translateY(40%);
    opacity: 0;
  }
}
@keyframes MenuAnimIn5 {
  0% {
    transform: translateY(40%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes SubMenuAnimIn5 {
  0% {
    transform: translateZ(-200px);
    opacity: 0;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes SubMenuAnimOut5 {
  0% {
    transform: translateZ(0);
    opacity: 1;
  }
  to {
    transform: translateZ(-200px);
    opacity: 0;
  }
}
@keyframes fb_transform {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes rotateSpinner {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes web-ui__LoadingDots-module--opacity-small-0 {
  0% {
    opacity: 1;
  }
  33.3333333333% {
    opacity: 0.25;
  }
  66.6666666667% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@keyframes web-ui__LoadingDots-module--size-small-0 {
  0% {
    transform: scale(1);
  }
  33.3333333333% {
    transform: scale(0.8);
  }
  66.6666666667% {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}
@keyframes web-ui__LoadingDots-module--opacity-small-2 {
  0% {
    opacity: 0.5;
  }
  33.3333333333% {
    opacity: 1;
  }
  66.6666666667% {
    opacity: 0.25;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes web-ui__LoadingDots-module--size-small-2 {
  0% {
    transform: scale(0.8);
  }
  33.3333333333% {
    transform: scale(1);
  }
  66.6666666667% {
    transform: scale(0.8);
  }
  to {
    transform: scale(0.8);
  }
}
@keyframes web-ui__LoadingDots-module--opacity-small-1 {
  0% {
    opacity: 0.25;
  }
  33.3333333333% {
    opacity: 0.5;
  }
  66.6666666667% {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}
@keyframes web-ui__LoadingDots-module--size-small-1 {
  0% {
    transform: scale(0.8);
  }
  33.3333333333% {
    transform: scale(0.8);
  }
  66.6666666667% {
    transform: scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
@keyframes _1H_oC {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _2M0q0 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes _1GYm3 {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}
@keyframes _2e7T9 {
  0%,
  to {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(5deg);
  }
  30% {
    transform: rotate(-5deg);
  }
  40% {
    transform: rotate(0deg);
  }
}
@keyframes _1sH60 {
  0% {
    transform: scale(1);
  }
  to {
    transform: scale(1.07);
  }
}
@keyframes _1cDKD {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-5%);
    opacity: 0;
  }
}
@keyframes _2hyny {
  0% {
    transform: translateX(5%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes _1Gq5f {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _3ce_N {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes HxfiK {
  0% {
    margin-top: 20px;
  }
  to {
    margin-top: 0;
  }
}
@keyframes _3uOBX {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _2dkGl {
  to {
    visibility: visible;
  }
}
@keyframes _1shVH {
  0% {
    margin-top: 20px;
    opacity: 0;
  }
  to {
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes fa432 {
  0% {
    transform: translateY(145%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes _3yk0N {
  0% {
    opacity: 1;
  }
  to {
    display: none;
  }
}
@keyframes _1Hs2k {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _2URwn {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes _20U_m {
  0% {
    transform: translateX(-50%) scale(0.2);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}
@keyframes _2ygvm {
  0%,
  14.8% {
    transform: translateX(-50%) translateY(-100%);
  }
  40.7%,
  62.9% {
    transform: translateX(-50%) translateY(calc(-100% + 16px));
  }
  to {
    transform: translateX(-50%) translateY(-100%);
  }
}
@keyframes JTudF {
  0%,
  15.4% {
    transform: translateY(0);
  }
  53.8% {
    transform: translateY(-98px);
  }
  to {
    transform: translateY(-98px);
  }
}
@keyframes _1aZxZ {
  0%,
  14.8% {
    transform: translateY(0);
  }
  40.7% {
    transform: translateY(-30px);
  }
  63% {
    transform: translateY(-30px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes _25hNq {
  0%,
  14.8% {
    transform: translateX(0);
  }
  40.7% {
    transform: translateX(30px);
  }
  63% {
    transform: translateX(30px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes web-ui__ProgressBarCheckpoint-module--checkpoint-pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes QWcJd {
  0% {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes _1FbkO {
  0% {
    opacity: 0;
  }
  to {
    opacity: 0.6;
  }
}
@keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0);
  }
  to {
    transform-origin: 50% 100%;
    transform: scale(1);
  }
}
@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0);
  }
}
@keyframes _3gTfp {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _1OEEf {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes VASFU {
  0% {
    transform: translateX(-50%) translateY(100px);
  }
  to {
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes _2qjMP {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
@keyframes -PkIp {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
@keyframes _1j-Cr {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}

/* Print Specific Styles */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    box-sizing: border-box !important;
  }
  body * {
    visibility: hidden !important;
  }
  ._35GV4,
  ._35GV4 * {
    visibility: visible !important;
  }
  ._35GV4 {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 34px 32px 32px !important;
    box-sizing: border-box !important;
    background: white !important;
    z-index: 9999 !important;
    page-break-before: avoid !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    overflow: hidden !important;
    max-height: 100vh !important;
  }
  .d-print-none,
  .your-print-button-class {
    display: none !important;
  }
  /* FONT SIZES */
  ._2_6HY,
  ._1i92O,
  ._6dLAc,
  ._3bqL3,
  ._38S_D,
  .MXncZ,
  ._1D2Ma,
  ._1j5J7 {
    font-size: 14.5px !important;
  }
  .U9vjW,
  #overallHeading,
  #individualHeading {
    font-size: 21.5px !important;
  }
  .E7aZw,
  ._2PQ62 {
    font-size: 18px !important;
  }
  .eMSb- {
    font-size: 36px !important; /* Score numbers */
  }
  ._2PQ62 {
    margin-bottom: -2px !important;
  }
  ._1j5J7 {
    font-weight: bold;
  }
  ._2O4N_ {
    margin: -3px !important;
    padding-bottom: -125px !important;
  }
  ._1tD0Y {
    margin-left: -20px !important;
  }
  ._2Nq1a {
    height: 217px !important;
  }
  #resultRemarks {
    padding-left: 16px !important;
    padding-top: 20px !important;
    margin-top: -5px !important;
  }
  #miniremark {
    font-size: 12.5px !important;
    width: 150px;
    margin-left: 16px !important;
    margin-top: -3px !important;
  }
  #Remarks {
    padding-bottom: -35px !important;
  }
  #tickImages {
    width: 21px;
    height: 21px;
  }
  #achievedMarks {
    margin-top: -7px !important;
  }
  #lastsection {
    height: 35px;
    width: 750px;
  }
  ._2r08x {
    width: 465px !important;
    margin-bottom: -5px;
  }
  ._6dLAc {
    margin-top: -2px !important;
    margin-left: -3px !important;
  }
  #dataBox {
    margin-bottom: -7px !important;
  }
  #resultOverallBox {
    margin-left: -4px !important;
    margin-right: -4px !important;
    padding: -15px !important;
  }
  #overallHeading {
    margin-bottom: 12px !important;
  }
  #individualHeading {
    margin-left: -3px !important;
    margin-top: -10px !important;
  }
  #secondTexts {
    margin: 0 !important;
  }
  ._1y4hU {
    margin-top: -4px !important;
    padding-top: 2px;
    margin-right: -23px !important;
  }
  /* IMAGE SIZES */
  .cb5cZ {
    width: 116px !important;
    height: 116px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
  }
  ._1uXeI {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 0 29px 0 !important;
    margin: 0 !important;
  }
  ._1eXky {
    margin-left: -8px !important;
    padding-left: 0 !important;
    width: 243px !important;
    height: 36px !important;
    display: inline-block !important;
    position: static !important;
  }
  ._1xr-i svg {
    width: 195px !important;
    height: 195px !important;
  }
  ._1xr-i {
    padding: 5px !important;
    padding-left: 10px !important;
    width: 223px !important;
    margin-bottom: -10px !important;
  }
  ._3JK3z {
    height: 120px !important;
    border-radius: 12px !important;
    padding-left: 36.5px !important;
    gap: 57px !important;
    margin-left: -4px !important;
    margin-right: -4px !important;
  }
  #integscorebox{
    margin-bottom: -20px !important;    
  }
  ._1F2d1 {
    width: 120px !important;
  }
  @page {
    size: portrait;
    margin: 0;
  }
}

/* Mobile-only print fixes (do NOT affect desktop/PC print).
   iOS Safari print is picky about media queries; use an iOS-only @supports gate. */
@media print {
  @supports (-webkit-touch-callout: none) {
    /* Remove large non-certificate layout blocks so they cannot create extra pages */
    ._1gl7w,
    footer,
    ._290Ib,
    #notFoundPopup,
    #mobileMenu,
    .mobile-auth-buttons,
    .modal-overlay {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    /* Disable the mobile on-screen scaling rules during printing (major cause of gaps/blank pages) */
    #certificateContainer {
      width: 100% !important;
      transform: none !important;
      transform-origin: initial !important;
      margin: 0 !important;
    }
    #certificateParent {
      overflow: visible !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
    }

    /* Avoid iOS/Safari pagination issues triggered by vh + absolute + max-height */
    html,
    body {
      height: auto !important;
      overflow: visible !important;
    }

    .TxR4u,
    ._2HG-o,
    #certificateContainer {
      min-height: 0 !important;
      height: auto !important;
    }

    ._35GV4 {
      position: static !important;
      max-height: none !important;
      overflow: visible !important;
      /* Normalize vertical rhythm on mobile prints */
      gap: 18px !important;
      page-break-before: auto !important;
      page-break-after: auto !important;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }

    /* Normalize heading/section spacing (Overall/Integrated) */
    /* .E7aZw {
      margin-top: 0 !important;
      margin-bottom: 10px !important;
    } */

    ._2O4N_,
    .E7aZw {
      padding-top: 17px !important;
    }

    /* Fix the big gap before the verify line */
    #lastsection {
      width: 100% !important;
      height: auto !important;
      /* padding-top: -10px !important; */
      /* margin-top: -30px !important; */
    }

  }
}

/* Media Queries */
@media (max-width: 767px) {
  /* Hide print button row on mobile */
  ._2Qpr9 {
    display: none !important;
  }
  
  /* Make certificate outer border more prominent on mobile */
  ._3UJnX {
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 55px !important;
  }
  .v6tRX{
    margin-top: -30px !important;
  }
  /* Reduce top padding on certificate to move it up when print row is hidden */
  /* ._35GV4 {
    padding-top: -60px !important;
  } */
}

@media (min-width: 480px) {
  ._36OXH {
    width: 100%;
  }
  ._2uA6- {
    padding: 40px 24px 64px;
  }
  ._3yp8Y {
    min-width: 140px;
  }
  .v6tRX {
    padding: 0 24px;
  }
}
@media (min-width: 624px) {
}
@media (min-width: 667px) {
  ._4wWMC {
    width: 80vw;
  }
  .DbNWq {
    flex-direction: row;
  }
  ._3ziXj {
    margin-right: 40px;
    max-width: 240px;
  }
}
@media (min-width: 768px) {
  body {
    background: #f0f0f0;
  }
  ._36OXH {
    margin: 2px 0 0;
  }
  .TxR4u {
    min-height: calc(100vh - 90px);
  }
  div:has(> ._1ZdAj) {
    padding: 10px 16px;
  }
  ._2ieYE {
    gap: 12px;
  }
  .oRbx- {
    -moz-column-gap: 36px;
    column-gap: 36px;
  }
  ._2ltHO,
  ._1MHhr {
    font-size: 20px;
  }
  ._1vFME {
    min-width: 192px;
  }
  .v6tRX {
    padding: 0 48px;
  }
  ._3RA5c {
    width: 900px;
  }
}
@media (min-width: 992px) {
  ._2ua3h {
    margin-top: 48px;
  }
  .v6tRX {
    padding: 0 72px;
  }
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
  ._2uA6- {
    padding: 64px 40px 80px;
  }
  ._3ziXj {
    margin-right: 64px;
    max-width: 360px;
  }
  .oRbx- {
    -moz-column-gap: 48px;
    column-gap: 48px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    row-gap: 36px;
  }
  ._3yp8Y {
    min-width: -moz-max-content;
    min-width: max-content;
  }
  ._1vFME {
    min-width: 310px;
  }
}
@media (min-width: 1280px) and (min-height: 720px) {
}
@media (min-width: 1440px) {
  ._2uA6- {
    padding: 80px 186px 96px;
  }
}

@media (hover: hover) {
  .web-ui__LegacyButtonBase-module--variant-link-juicy:hover:not(
      .web-ui__LegacyButtonBase-module--fake-disabled
    ):not(.web-ui__LegacyButtonBase-module--unstyled-hover) {
    filter: var(--__internal__filter-hover);
  }
}

/* --- SOLID BUTTON STYLES --- */
.web-ui__LegacyButtonBase-module--_variant-solid {
  --__internal__background-color: var(
    --web-ui_button-background-color,
    rgb(var(--color-macaw))
  );
  --__internal__background-color-disabled: var(
    --web-ui_button-background-color-disabled,
    rgb(var(--color-swan))
  );
  --__internal__border-color: var(
    --web-ui_button-border-color,
    rgb(var(--color-whale))
  );
  --__internal__border-radius: var(--web-ui_button-border-radius, 12px);
  --__internal__color: var(--web-ui_button-color, rgb(var(--color-snow)));
  --__internal__color-active: var(
    --web-ui_button-color-active,
    var(--__internal__color)
  );
  --__internal__color-disabled: var(
    --web-ui_button-color-disabled,
    rgb(var(--color-hare))
  );
  --__internal__filter-hover: var(
    --web-ui_button-filter-hover,
    brightness(1.1)
  );
  --__internal__lip-width: var(--web-ui_button-lip-width, 4px);
  background: none;
  border-radius: var(--__internal__border-radius);
  border: 0 solid transparent;
  border-bottom: var(--__internal__lip-width) solid transparent;
  color: var(--__internal__color);
  height: var(--__internal__height);
  transition: filter 0.2s, transform var(--web-ui_button-transition-lip);
}
.web-ui__LegacyButtonBase-module--_variant-solid:before {
  background-color: var(--__internal__background-color);
  border-radius: var(--__internal__border-radius);
  bottom: 0;
  box-shadow: 0 var(--__internal__lip-width) 0;
  color: var(--__internal__border-color);
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: box-shadow var(--web-ui_button-transition-lip);
  z-index: -1;
}
.web-ui__LegacyButtonBase-module--_variant-solid.web-ui__LegacyButtonBase-module--fake-active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ),
.web-ui__LegacyButtonBase-module--_variant-solid.web-ui__LegacyButtonBase-module--fake-disabled:not(
    .web-ui__LegacyButtonBase-module--unstyled-disabled
  ),
.web-ui__LegacyButtonBase-module--_variant-solid:active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ) {
  color: var(--__internal__color-active);
  transform: translateY(var(--__internal__lip-width)) translateZ(0);
}
.web-ui__LegacyButtonBase-module--_variant-solid.web-ui__LegacyButtonBase-module--fake-active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ):before,
.web-ui__LegacyButtonBase-module--_variant-solid.web-ui__LegacyButtonBase-module--fake-disabled:not(
    .web-ui__LegacyButtonBase-module--unstyled-disabled
  ):before,
.web-ui__LegacyButtonBase-module--_variant-solid:active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ):before {
  box-shadow: none;
}
.web-ui__LegacyButtonBase-module--variant-solid-juicy {
  --__internal__font-size: var(--web-ui_button-font-size, 16px);
  --__internal__height: var(--web-ui_button-height, 48px);
  --__internal__letter-spacing: var(--web-ui_button-letter-spacing, 0.04em);
  --__internal__line-height: var(
    --web-ui_button-line-height,
    calc(var(--__internal__height) - var(--__internal__lip-width))
  );
  --__internal__padding: var(--web-ui_button-padding, 0 12px);
}
@media (hover: hover) {
  .web-ui__LegacyButtonBase-module--_variant-solid:hover:not(
      .web-ui__LegacyButtonBase-module--fake-disabled
    ):not(.web-ui__LegacyButtonBase-module--unstyled-hover) {
    filter: var(--__internal__filter-hover);
  }
}

/* --- STROKE BUTTON STYLES --- */
.web-ui__LegacyButtonBase-module--variant-stroke {
  --__internal__background-color: var(
    --web-ui_button-background-color,
    rgb(var(--color-snow))
  );
  --__internal__border-color: var(
    --web-ui_button-border-color,
    rgb(var(--color-swan))
  );
  --__internal__border-color-disabled: var(
    --web-ui_button-border-color-disabled,
    var(--__internal__border-color)
  );
  --__internal__border-radius: var(--web-ui_button-border-radius, 12px);
  --__internal__color-disabled: var(
    --web-ui_button-color-disabled,
    rgb(var(--color-hare))
  );
  --__internal__filter-hover: var(
    --web-ui_button-filter-hover,
    brightness(0.9)
  );
  --__internal__switchable__border-color: var(--__internal__border-color);
  background: none;
  border-radius: var(--__internal__border-radius);
  border: solid transparent;
  color: var(--__internal__color);
  height: var(--__internal__height);
  transition: filter 0.2s, transform var(--web-ui_button-transition-lip);
}
.web-ui__LegacyButtonBase-module--variant-stroke:before {
  background-color: var(--__internal__background-color);
  border: 2px solid var(--__internal__switchable__border-color);
  border-radius: var(--__internal__border-radius);
  bottom: -2px;
  box-shadow: 0 2px 0;
  color: var(--__internal__switchable__border-color);
  content: '';
  left: -2px;
  position: absolute;
  right: -2px;
  top: -2px;
  transition: box-shadow var(--web-ui_button-transition-lip);
  z-index: -1;
}
.web-ui__LegacyButtonBase-module--variant-stroke.web-ui__LegacyButtonBase-module--fake-active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ),
.web-ui__LegacyButtonBase-module--variant-stroke.web-ui__LegacyButtonBase-module--fake-disabled:not(
    .web-ui__LegacyButtonBase-module--unstyled-disabled
  ),
.web-ui__LegacyButtonBase-module--variant-stroke:active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ) {
  color: var(--__internal__color-active);
  transform: translateY(2px) translateZ(0);
}
.web-ui__LegacyButtonBase-module--variant-stroke.web-ui__LegacyButtonBase-module--fake-active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ):before,
.web-ui__LegacyButtonBase-module--variant-stroke.web-ui__LegacyButtonBase-module--fake-disabled:not(
    .web-ui__LegacyButtonBase-module--unstyled-disabled
  ):before,
.web-ui__LegacyButtonBase-module--variant-stroke:active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ):before {
  box-shadow: none;
}
.web-ui__LegacyButtonBase-module--variant-stroke-juicy {
  --__internal__background-color-disabled: var(
    --web-ui_button-background-color-disabled,
    rgb(var(--color-snow))
  );
  --__internal__font-size: var(--web-ui_button-font-size, 16px);
  --__internal__height: var(--web-ui_button-height, 48px);
  --__internal__letter-spacing: var(--web-ui_button-letter-spacing, 0.04em);
  --__internal__line-height: var(
    --web-ui_button-line-height,
    calc(var(--__internal__height) - 6px)
  );
  --__internal__padding: var(--web-ui_button-padding, 0 11px);
  border-width: 1px 1px 5px;
}
.web-ui__LegacyButtonBase-module--variant-stroke-juicy:before {
  border-width: 1px;
  bottom: -1px;
  box-shadow: 0 3px 0 1px;
  left: -1px;
  outline: 1px solid var(--__internal__border-color);
  right: -1px;
  top: -1px;
}
.web-ui__LegacyButtonBase-module--variant-stroke-juicy.web-ui__LegacyButtonBase-module--fake-active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ),
.web-ui__LegacyButtonBase-module--variant-stroke-juicy.web-ui__LegacyButtonBase-module--fake-disabled:not(
    .web-ui__LegacyButtonBase-module--unstyled-disabled
  ),
.web-ui__LegacyButtonBase-module--variant-stroke-juicy:active:not(
    .web-ui__LegacyButtonBase-module--fake-disabled
  ) {
  transform: translateY(4px) translateZ(0);
}
.web-ui__LegacyButtonBase-module--variant-stroke-juicy-macaw {
  --__internal__color: var(--web-ui_button-color, rgb(var(--color-macaw)));
  --__internal__color-active: var(
    --web-ui_button-color-active,
    rgb(var(--color-whale))
  );
}
@media (hover: hover) {
  .web-ui__LegacyButtonBase-module--variant-stroke:hover:not(
      .web-ui__LegacyButtonBase-module--fake-disabled
    ):not(.web-ui__LegacyButtonBase-module--unstyled-hover) {
    filter: var(--__internal__filter-hover);
  }
}

/* =================================== */
/* == Responsive Navigation Styles == */
/* =================================== */

/* This makes the desktop nav work correctly now that the inline style is gone */
.main-nav-container {
  display: flex;
  gap: 32px;
}

/* 1. Style the hamburger button and icon */
._1BpAx {
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

._1BpAx span {
  display: inline-block;
  width: 24px;
  height: 24px;

  /* This is the color of the icon, taken from their ._1iSfs class */
  background-color: #afafaf;

  /* --- Masking Properties (Standard version) --- */
  mask-image: url(./media/navbar_m.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  /* --- Masking Properties (for browser compatibility) --- */
  -webkit-mask-image: url(./media/navbar_m.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* 2. Hide the hamburger button by default on desktop */
._1BpAx {
  display: none;
}

/* 3. Media Query for tablets and mobile */
/* UPDATED to 1135px */
@media (max-width: 1135px) {
  /* Safari portrait: prevent centered/shrink-to-fit layout that can reveal side gutters */
  html,
  body {
    width: 100%;
    background: #fff;
    overflow-x: hidden;
  }

  #app {
    width: 100%;
    margin: 0;
  }

  ._1muD_ {
    width: 100%;
  }

  /* inline-flex can shrink-to-fit; force full-width on mobile */
  ._1L8UI {
    display: flex;
    width: 100%;
    align-self: stretch;
  }

  /* Many sections are capped to 90vw; make the site truly full-width on phones */
  ._4wWMC {
    width: 100%;
    max-width: none;
  }

  /* Hide the desktop navigation links */
  .main-nav-container {
    display: none;
  }

  /* Hide the desktop nav/auth wrapper so the logo can truly center */
  ._2Ik8i {
    display: none !important;
  }

  /* Show the hamburger button */
  ._1BpAx {
    display: inline-flex !important;
    margin-right: 0;
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2001;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }
  ._2YxGL {
    display: none;
  }
  
  /* Center the logo on mobile */
  #mainLogo {
    margin: 0 auto;
  }
  
  ._1IiK6 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    max-width: none;
  }

  ._2S6_E {
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
  }

  ._2S6_E > ._1IiK6 {
    width: 100%;
  }

  #mainlogo {
    width: 209.2px;
    height: 32px;
  }

  ._1gl7w {
    position: sticky;
    padding: 0;
  }
}

@media (max-width: 1090px) {
  ._1gl7w {
    position: sticky;
    top: 0;
    padding-right: 0px;
    padding-top: 1px;
    padding-left: 0px;
    z-index: 1000;
  }
}

@media (max-width: 1135px) {
  ._1pQAn {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  #mainLogo {
    content: url('./media/duolingo_logo.svg');
    display: block;
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
  }
}


/* --- Mobile Menu Container --- */
.mobile-menu {
  position: fixed;
  top: 100px; /* Adjust this to match your header's height */
  left: auto;
  right: -100%; /* Hides menu off-screen to the right */
  width: 100%;
  height: calc(100vh - 100px);
  background-color: white;
  z-index: 1000;
  overflow-y: auto;
  margin-top: 14px !important;
  padding-top: 12px;
  /* transition: right 0.3s ease-in-out; */
}

/* This class, added by JavaScript, slides the menu into view */
.mobile-menu.is-open {
  right: 0;
}

/* --- Mobile Auth Buttons in Top Bar --- */
.mobile-auth-buttons {
  display: none;
  gap: 4px;
  padding: 6px 16px 10px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 2px solid #e5e5e5;
  margin-top: 6px !important;
  border-top: none;
}

.mobile-auth-buttons a {
  flex: 1;
}

.mobile-auth-buttons button {
  width: 100%;
  height: 32px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  --__internal__border-radius: 8px !important;
  --__internal__font-size: 14px !important;
  --__internal__height: 32px !important;
}

/* Show mobile auth buttons when menu is active */
body.mobile-menu-active .mobile-auth-buttons {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
}

/* When the mobile menu is active, move the divider line below the auth buttons */
body.mobile-menu-active ._2S6_E {
  border-bottom: none !important;
}

/* --- Mobile Menu Content --- */
._3kFLo {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px;
  width: 100%;
}
._25cl- {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  border-bottom: 2px solid #e5e5e5;
  width: 100%;
}
.COWk5 {
  padding: 12px 16px;
  width: 100%;
}
.wGtDt {
  line-height: 28px;
}

/* --- Hamburger Icon Styling --- */
._1BpAx span {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #afafaf;
  mask-image: url(./media/navbar_m.svg);
  -webkit-mask-image: url(./media/navbar_m.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* Swaps the icon to the 'X' when the button is active */
._1BpAx.is-active span {
  mask-image: url(./media/navbar_x.svg);
  -webkit-mask-image: url(./media/navbar_x.svg);
}

/* When the mobile menu is active, remove border */
body.mobile-menu-active ._2S6_E {
  border-bottom: none !important;
}

@media (min-width: 1279px) {
  .mobile-menu {
    /* This forces the menu to be hidden on screens wider than 1280px,
           even if the 'is-open' class is present from being opened on mobile. */
    display: none;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-overlay.is-hidden {
  display: none;
}

/* Manual Additions */

._1lefq {
  background: #fff;
  border-radius: 16px;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: auto;
  width: 380px;
}
@media (min-width: 992px) {
  ._1lefq {
    overflow-x: unset;
  }
}
._1lefq.urTc0 {
  border-radius: 0;
  height: 100vh;
  height: 100dvh;
  max-width: 600px;
  width: 100%;
}
._2pMUp {
  margin-left: 8px;
  margin-right: 8px;
  max-width: 100%;
  padding: 32px 24px 28px;
}

._2pMUp._1HIAk {
  padding-bottom: 12px;
}

._1ad4h {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

._3Q14 {
  margin-right: -10px !important;
  /* border: 1px solid red !important; */
}

/* Mobile Certificate Scaling */
@media (max-width: 745px) {
  #certificateContainer {
    width: 180%;
    transform: scale(0.4);
    transform-origin: top left;
    margin-top: 3rem;
    margin-bottom: -45rem;
    margin-right: -475px;
    margin-left: 80px;
    display: block;
  }
  #certificateParent {
    overflow: hidden;
  }
  #clientareaButton {
    height: 32px;
    --__internal__border-radius: var(--web-ui_button-border-radius, 8px);
    border-radius: var(--__internal__border-radius);
    --__internal__font-size: var(--web-ui_button-font-size, 14px);
    font-size: var(--__internal__font-size);
  }

  ._2S6_E {
    padding: 13px 16px 10px !important;
  }
}