/* --------------- BASE STYLES --------------- */
html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-default);
  font-size: var(--text-md);
  line-height: 140%;
  font-weight: 400;
  color: var(--color-primaryBlue);
  overflow-x: hidden;
}
body * {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
body h1 {
  font-size: var(--text-5xl);
  line-height: 110%;
  font-weight: 600;
}
@media only screen and (max-width: 640px) {
  body h1 {
    font-size: var(--text-4xl);
  }
}
body h2 {
  font-size: var(--text-4xl);
  line-height: 110%;
  font-weight: 600;
}
@media only screen and (max-width: 640px) {
  body h2 {
    font-size: var(--text-3xl);
  }
}
body h3 {
  font-size: var(--text-3xl);
  line-height: 110%;
  font-weight: 600;
}
@media only screen and (max-width: 640px) {
  body h3 {
    font-size: var(--text-2xl);
  }
}
body h4 {
  font-size: var(--text-2xl);
  line-height: 120%;
  font-weight: 600;
}
@media only screen and (max-width: 640px) {
  body h4 {
    font-size: var(--text-xl);
  }
}
body h5 {
  font-size: var(--text-xl);
  line-height: 110%;
  font-weight: 600;
}
@media only screen and (max-width: 640px) {
  body h5 {
    font-size: var(--text-lg);
  }
}
body h6 {
  font-size: var(--text-lg);
  line-height: 110%;
  font-weight: 500;
}
@media only screen and (max-width: 640px) {
  body h6 {
    font-size: var(--text-md);
  }
}
body p,
body li {
  line-height: 140%;
}
body p.paragraph-highlight,
body li.paragraph-highlight {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 110%;
}
body ul li {
  list-style: initial;
  list-style-position: inside;
}
body q {
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-style: italic;
}
body q::before, body q::after {
  width: 24px;
  height: 20px;
  color: var(--color-yellow);
  text-align: center;
  font-size: var(--text-5xl);
  line-height: 85%;
  font-style: normal;
}
body q::before {
  transform: rotate(180deg) scaleX(-1);
}
body q::after {
  align-self: flex-end;
}
body a {
  font-weight: 500;
  color: var(--color-tealBlue);
}
@media screen and (max-width: 640px) {
  body a {
    font-size: var(--text-md);
  }
}
body a:hover {
  text-decoration: underline;
}
body a.page-link {
  text-decoration: none;
}
body a.back, body a.next {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: var(--text-lg);
  color: var(--color-primaryBlue);
}
@media screen and (max-width: 640px) {
  body a.back, body a.next {
    font-size: var(--text-md);
  }
}
body a.back.back, body a.next.back {
  padding-left: var(--spacing-sm);
}
body a.back.back::before, body a.next.back::before {
  font-family: "Material Icons";
  content: "\e5e0";
  position: absolute;
  left: 0;
}
body a.back.next, body a.next.next {
  padding-right: var(--spacing-sm);
}
body a.back.next::after, body a.next.next::after {
  font-family: "Material Icons";
  content: "\e5e1";
  position: absolute;
  right: calc(-1 * var(--spacing-3xs));
}
body a.back.large::before, body a.back.large::after, body a.next.large::before, body a.next.large::after {
  font-size: var(--text-3xl);
}
@media screen and (max-width: 640px) {
  body a.back.large::before, body a.back.large::after, body a.next.large::before, body a.next.large::after {
    font-size: var(--text-2xl);
  }
}
body a.back.large::before, body a.next.large::before {
  left: calc(-1 * var(--spacing-2xs));
}
body a.back.large::after, body a.next.large::after {
  right: calc(-1 * var(--spacing-xl));
}
body .footnote {
  font-size: var(--text-sm);
  line-height: 110%;
}
body .caption {
  font-size: var(--text-xs);
  line-height: 110%;
}

#accordion-collapse .accordion-item .accordion-btn {
  background-color: var(--color-primaryBlueLight40);
  transition: all 0.2s;
}
#accordion-collapse .accordion-item .accordion-btn:hover, #accordion-collapse .accordion-item .accordion-btn:focus, #accordion-collapse .accordion-item .accordion-btn[aria-expanded=true] {
  background-color: var(--color-primaryBlueLight30);
}
#accordion-collapse .accordion-item-body {
  border-color: var(--color-primaryBlueLight30);
}

/* --------------- BUTTONS --------------- */
button,
input[type=submit],
a.btn {
  /* Primary Button */
  /* Secondary Button */
  /* Neutral Button */
  /* Base Button */
  /* Danger Button */
  /* Icon Button */
}
button:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn), button.btn-primary,
input[type=submit]:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn),
input[type=submit].btn-primary,
a.btn:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn),
a.btn.btn-primary {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  background-color: var(--color-primaryBlueLight10);
  color: var(--color-white);
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-small);
  font-size: var(--text-md);
  font-family: var(--font-default);
  text-align: center;
  transition: all 0.2s;
}
button:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):hover, button.btn-primary:hover,
input[type=submit]:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):hover,
input[type=submit].btn-primary:hover,
a.btn:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):hover,
a.btn.btn-primary:hover {
  background-color: var(--color-primaryBlue);
}
button:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):focus, button:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):active, button.btn-primary:focus, button.btn-primary:active,
input[type=submit]:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):focus,
input[type=submit]:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):active,
input[type=submit].btn-primary:focus,
input[type=submit].btn-primary:active,
a.btn:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):focus,
a.btn:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):active,
a.btn.btn-primary:focus,
a.btn.btn-primary:active {
  background-color: var(--color-primaryBlueDark20);
  outline: 2px solid var(--color-primaryBlueLight20);
}
button:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):disabled, button.btn-primary:disabled,
input[type=submit]:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):disabled,
input[type=submit].btn-primary:disabled,
a.btn:not(.dropdown-toggle, .menu-toggle, .user-btn, .accordion-btn):disabled,
a.btn.btn-primary:disabled {
  background-color: var(--color-primaryBlueLight30);
  pointer-events: none;
}
button.btn-secondary,
input[type=submit].btn-secondary,
a.btn.btn-secondary {
  background-color: var(--color-yellow);
  color: var(--color-primaryBlue);
}
button.btn-secondary:hover,
input[type=submit].btn-secondary:hover,
a.btn.btn-secondary:hover {
  background-color: var(--color-yellowDark10);
  color: var(--color-primaryBlueDark20);
}
button.btn-secondary:focus, button.btn-secondary:active,
input[type=submit].btn-secondary:focus,
input[type=submit].btn-secondary:active,
a.btn.btn-secondary:focus,
a.btn.btn-secondary:active {
  background-color: var(--color-yellowDark20);
  outline: 2px solid var(--color-yellowLight20);
  color: var(--color-white);
}
button.btn-secondary:disabled,
input[type=submit].btn-secondary:disabled,
a.btn.btn-secondary:disabled {
  background-color: var(--color-yellowLight30);
  color: var(--color-white);
  pointer-events: none;
}
button.btn-neutral,
input[type=submit].btn-neutral,
a.btn.btn-neutral {
  background-color: var(--color-white);
  border: 1px solid var(--color-primaryBlueLight10);
  color: var(--color-primaryBlueLight10);
}
button.btn-neutral:hover,
input[type=submit].btn-neutral:hover,
a.btn.btn-neutral:hover {
  background-color: var(--color-primaryBlueLight30);
  border-color: var(--color-primaryBlue);
  color: var(--color-primaryBlue);
}
button.btn-neutral:focus, button.btn-neutral:active,
input[type=submit].btn-neutral:focus,
input[type=submit].btn-neutral:active,
a.btn.btn-neutral:focus,
a.btn.btn-neutral:active {
  background-color: var(--color-primaryBlueLight20);
  border-color: var(--color-primaryBlue);
  outline: 2px solid var(--color-primaryBlueLight30);
  color: var(--color-primaryBlue);
}
button.btn-neutral:disabled,
input[type=submit].btn-neutral:disabled,
a.btn.btn-neutral:disabled {
  background-color: var(--color-primaryBlueLight30);
  color: var(--color-primaryBlueLight10);
  pointer-events: none;
}
button.btn-base,
input[type=submit].btn-base,
a.btn.btn-base {
  background-color: var(--color-white);
  border: 1px solid var(--color-primaryBlueLight30);
  color: var(--color-primaryBlue);
}
button.btn-base:hover,
input[type=submit].btn-base:hover,
a.btn.btn-base:hover {
  background-color: var(--color-primaryBlueLight40);
  border-color: var(--color-primaryBlueLight20);
}
button.btn-base:focus, button.btn-base:active,
input[type=submit].btn-base:focus,
input[type=submit].btn-base:active,
a.btn.btn-base:focus,
a.btn.btn-base:active {
  background-color: var(--color-primaryBlueLight30);
  border-color: var(--color-primaryBlueLight10);
  outline: 2px solid var(--color-primaryBlueLight40);
}
button.btn-base:disabled,
input[type=submit].btn-base:disabled,
a.btn.btn-base:disabled {
  background-color: var(--color-primaryBlueLight40);
  color: var(--color-primaryBlueLight20);
  pointer-events: none;
}
button.btn-danger,
input[type=submit].btn-danger,
a.btn.btn-danger {
  background-color: var(--color-pink);
  color: var(--color-white);
}
button.btn-danger:hover,
input[type=submit].btn-danger:hover,
a.btn.btn-danger:hover {
  background-color: var(--color-pinkDark10);
}
button.btn-danger:focus, button.btn-danger:active,
input[type=submit].btn-danger:focus,
input[type=submit].btn-danger:active,
a.btn.btn-danger:focus,
a.btn.btn-danger:active {
  background-color: var(--color-pinkDark20);
  outline: 2px solid var(--color-pinkLight20);
}
button.btn-danger:disabled,
input[type=submit].btn-danger:disabled,
a.btn.btn-danger:disabled {
  background-color: var(--color-pinkLight30);
  color: var(--color-white);
  pointer-events: none;
}
button.btn-icon,
input[type=submit].btn-icon,
a.btn.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: var(--spacing-3xs);
  border-radius: var(--radius-full);
  background-color: var(--color-primaryBlueLight40);
  color: var(--color-primaryBlue);
}
button.btn-icon:hover,
input[type=submit].btn-icon:hover,
a.btn.btn-icon:hover {
  background-color: var(--color-primaryBlueLight30);
}
button.btn-icon:focus, button.btn-icon:active,
input[type=submit].btn-icon:focus,
input[type=submit].btn-icon:active,
a.btn.btn-icon:focus,
a.btn.btn-icon:active {
  background-color: var(--color-primaryBlueLight30);
  outline: 2px solid var(--color-primaryBlueLight40);
}
button.btn-icon:disabled,
input[type=submit].btn-icon:disabled,
a.btn.btn-icon:disabled {
  background-color: var(--color-primaryBlueLight40);
  color: var(--color-primaryBlueLight30);
  pointer-events: none;
}
button.btn-close,
input[type=submit].btn-close,
a.btn.btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: var(--spacing-3xs);
  border-radius: var(--radius-small);
  background-color: var(--color-pinkLight30);
  color: var(--color-pink);
}
button.btn-close:hover,
input[type=submit].btn-close:hover,
a.btn.btn-close:hover {
  background-color: var(--color-pinkLight20);
  color: var(--color-pinkDark10);
}
button.btn-close:focus, button.btn-close:active,
input[type=submit].btn-close:focus,
input[type=submit].btn-close:active,
a.btn.btn-close:focus,
a.btn.btn-close:active {
  background-color: var(--color-pinkLight20);
  outline: 2px solid var(--color-pinkLight40);
  color: var(--color-pinkDark10);
}
button.btn-close:disabled,
input[type=submit].btn-close:disabled,
a.btn.btn-close:disabled {
  background-color: var(--color-pinkLight30);
  color: var(--color-pinkLight20);
  pointer-events: none;
}
button.btn-collapse,
input[type=submit].btn-collapse,
a.btn.btn-collapse {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-white);
  color: var(--color-primaryBlue);
  padding-right: var(--spacing-sm);
}
button.btn-collapse svg,
input[type=submit].btn-collapse svg,
a.btn.btn-collapse svg {
  width: 24px;
  height: 24px;
}
button.btn-collapse:hover,
input[type=submit].btn-collapse:hover,
a.btn.btn-collapse:hover {
  background-color: var(--color-primaryBlueLight40);
  color: var(--color-primaryBlue);
}
button.btn-collapse:focus, button.btn-collapse:active,
input[type=submit].btn-collapse:focus,
input[type=submit].btn-collapse:active,
a.btn.btn-collapse:focus,
a.btn.btn-collapse:active {
  background-color: var(--color-primaryBlueLight30);
  outline: 2px solid var(--color-primaryBlueLight20);
  color: var(--color-primaryBlueDark20);
}
button.btn-collapse::after,
input[type=submit].btn-collapse::after,
a.btn.btn-collapse::after {
  font-family: "Material Icons";
  content: "\e313";
  font-size: var(--text-5xl);
}
button.btn-collapse[aria-expanded=true]::after,
input[type=submit].btn-collapse[aria-expanded=true]::after,
a.btn.btn-collapse[aria-expanded=true]::after {
  transform: rotate(180deg);
}

/* --------------- FORM FIELDS --------------- */
.form-field {
  width: 324px;
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Dropdown only */
  /* Datepicker only */
  /* Checkbox only */
}
.form-field label,
.form-field > span:not(.error-message, .success-message) {
  margin-bottom: var(--spacing-3xs);
  font-size: var(--text-md);
  font-weight: 500;
}
.form-field input,
.form-field textarea,
.form-field select,
.form-field .dropdown-toggle {
  all: unset;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2xs) var(--spacing-xs);
  background-color: var(--color-white);
  border: 1px solid var(--color-primaryBlueLight30);
  border-radius: var(--radius-small);
  font-size: var(--text-md);
  transition: all 0.2s;
}
.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover,
.form-field .dropdown-toggle:hover {
  background-color: var(--color-primaryBlueLight40);
  border-color: var(--color-primaryBlueLight20);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.form-field .dropdown-toggle:focus {
  background-color: var(--color-primaryBlueLight40);
  border-color: var(--color-primaryBlueLight10);
  outline: 2px solid var(--color-primaryBlueLight30);
}
.form-field input.success,
.form-field textarea.success,
.form-field select.success,
.form-field .dropdown-toggle.success {
  border-color: var(--color-greenDark10);
  outline: 2px solid var(--color-greenLight20);
}
.form-field.required > label::after,
.form-field.required > span:not(.error-message, .success-message)::after {
  content: "*";
  color: var(--color-pink);
  margin-left: var(--spacing-3xs);
}
.form-field.error input,
.form-field.error textarea,
.form-field.error .dropdown-toggle,
.form-field .field_with_errors input,
.form-field .field_with_errors textarea,
.form-field .field_with_errors .dropdown-toggle {
  width: 100%;
  border: 1px solid var(--color-pink);
  background-color: var(--color-pinkLight30);
  margin-top: var(--spacing-3xs);
}
.form-field .error-message {
  color: var(--color-pinkDark10);
  font-size: var(--text-xs);
}
.form-field.disabled label,
.form-field.disabled > span:not(.error-message, .success-message) {
  pointer-events: none;
}
.form-field.disabled input,
.form-field.disabled textarea,
.form-field.disabled .dropdown-toggle,
.form-field.disabled input:disabled,
.form-field.disabled textarea:disabled,
.form-field.disabled .dropdown-toggle:disabled {
  background-color: var(--color-primaryBlueLight40);
  border-color: var(--color-primaryBlueLight30);
  pointer-events: none;
  color: var(--color-primaryBlueLight20);
}
.form-field.full-width {
  width: 100%;
}
.form-field.full-width input,
.form-field.full-width textarea,
.form-field.full-width select,
.form-field.full-width .dropdown-toggle {
  width: 100%;
}
.form-field.module-textarea textarea {
  padding: var(--spacing-2xl);
  font-size: var(--text-md);
  line-height: 140%;
  color: var(--color-primaryBlueLight10);
}
.form-field:has(.success) .success-message {
  display: block;
}
.form-field .dropdown-toggle {
  cursor: pointer;
}
.form-field .dropdown-toggle::after {
  font-family: "Material Icons";
  content: "\e313";
  font-size: var(--text-lg);
  color: var(--color-primaryBlueLight10);
  transition: all 0.2s;
}
.form-field .datepicker-wrapper {
  position: relative;
}
.form-field .datepicker-wrapper svg {
  position: absolute;
  right: var(--spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primaryBlueLight10);
  pointer-events: none;
}
.form-field.checkbox .checkbox-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2xs);
}
.form-field.checkbox .checkbox-wrapper input {
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  appearance: none;
  transition: all 0.2s;
}
.form-field.checkbox .checkbox-wrapper input:checked {
  background-color: var(--color-primaryBlueLight10);
  border-color: var(--color-primaryBlueLight10);
  position: relative;
}
.form-field.checkbox .checkbox-wrapper input:checked::after {
  font-family: "Material Icons";
  content: "\e5ca";
  color: var(--color-white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.form-field.checkbox .checkbox-wrapper label {
  margin-bottom: 0;
  cursor: pointer;
}
.form-field.checkbox .checkbox-wrapper label a {
  font-size: var(--text-md);
}
.form-field.checkbox .error-message {
  margin-top: var(--spacing-3xs);
}

.dropdown-menu {
  position: absolute;
  max-height: 224px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-strong);
}
.dropdown-menu ul li {
  list-style: none;
  font-size: var(--text-md);
  font-family: var(--font-default);
}
.dropdown-menu ul li a,
.dropdown-menu ul li span {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2xs) var(--spacing-xs);
  transition: all 0.2s;
  border-bottom: 1px solid var(--color-primaryBlueLight40);
  color: var(--color-primaryBlueLight10);
}
.dropdown-menu ul li a:hover, .dropdown-menu ul li a:focus,
.dropdown-menu ul li span:hover,
.dropdown-menu ul li span:focus {
  background-color: var(--color-primaryBlueLight40);
}
.dropdown-menu ul li.active {
  position: relative;
  background-color: var(--color-primaryBlueLight30);
  color: var(--color-primaryBlue);
}
.dropdown-menu ul li.active::after {
  font-family: "Material Icons";
  content: "\e5ca";
  position: absolute;
  right: var(--spacing-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-primaryBlueLight10);
  color: var(--color-white);
  font-size: var(--text-xs);
}

.datepicker-portal {
  transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .datepicker-portal {
    position: fixed !important;
    width: 100vw;
    height: 100vh;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primaryBlueTransparent);
  }
}
@media only screen and (max-width: 768px) {
  .datepicker-portal .react-datepicker {
    width: fit-content !important;
  }
}
.datepicker-portal .react-datepicker .react-datepicker__aria-live {
  display: none;
}
.datepicker-portal .react-datepicker .react-datepicker__navigation {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: var(--spacing-3xs);
  border-radius: var(--radius-full);
  background-color: var(--color-primaryBlueLight40);
  color: var(--color-primaryBlue);
}
.datepicker-portal .react-datepicker .react-datepicker__navigation:hover {
  background-color: var(--color-primaryBlueLight30);
}
.datepicker-portal .react-datepicker .react-datepicker__navigation:focus, .datepicker-portal .react-datepicker .react-datepicker__navigation:active {
  background-color: var(--color-primaryBlueLight30);
  outline: 2px solid var(--color-primaryBlueLight40);
}
.datepicker-portal .react-datepicker .react-datepicker__navigation:disabled {
  background-color: var(--color-primaryBlueLight40);
  color: var(--color-primaryBlueLight30);
  pointer-events: none;
}
.datepicker-portal .react-datepicker .react-datepicker__navigation--next {
  right: var(--spacing-xl);
}
.datepicker-portal .react-datepicker .react-datepicker__navigation--next::before {
  font-family: "Material Icons";
  content: "\e315";
  font-size: var(--text-lg);
}
.datepicker-portal .react-datepicker .react-datepicker__navigation--previous {
  left: var(--spacing-xl);
}
.datepicker-portal .react-datepicker .react-datepicker__navigation--previous::before {
  font-family: "Material Icons";
  content: "\e314";
  font-size: var(--text-lg);
}
.datepicker-portal .react-datepicker .react-datepicker__day-name,
.datepicker-portal .react-datepicker .react-datepicker__day {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-small);
  font-size: var(--text-md);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3xs);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header h2 {
  display: none;
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown {
  position: relative;
  display: flex;
  gap: var(--spacing-2xs);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-read-view--selected-month,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-read-view--selected-year,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-read-view--selected-month,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-read-view--selected-year {
  background-color: var(--color-white);
  padding: var(--spacing-3xs) var(--spacing-xs);
  border-radius: var(--radius-small);
  border: 1px solid var(--color-primaryBlueLight30);
  font-size: var(--text-xl);
  line-height: 120%;
  font-weight: 500;
  height: 24px;
  visibility: visible !important;
  cursor: pointer;
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-read-view--selected-month:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-read-view--selected-year:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-read-view--selected-month:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-read-view--selected-year:hover {
  background-color: var(--color-primaryBlueLight40);
  border-color: var(--color-primaryBlueLight20);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + var(--spacing-xs));
  width: 100%;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  background-color: var(--color-white);
  border-radius: var(--radius-small);
  border: 1px solid var(--color-primaryBlueLight30);
  box-shadow: var(--shadow-strong);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child),
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child),
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child),
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child) {
  cursor: pointer;
  padding: var(--spacing-3xs) var(--spacing-2xs) !important;
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child):hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child):hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child):hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child):hover {
  background-color: var(--color-primaryBlueLight40);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option.react-datepicker__month-option--selected_month, .datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option.react-datepicker__year-option--selected_year,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__month-option--selected_month,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__year-option--selected_year,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option.react-datepicker__month-option--selected_month,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option.react-datepicker__year-option--selected_year,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__month-option--selected_month,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__year-option--selected_year,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option.react-datepicker__month-option--selected_month,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option.react-datepicker__year-option--selected_year,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__month-option--selected_month,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__year-option--selected_year,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option.react-datepicker__month-option--selected_month,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option.react-datepicker__year-option--selected_year,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__month-option--selected_month,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__year-option--selected_year {
  background-color: var(--color-primaryBlueLight10);
  color: var(--color-white);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option.react-datepicker__month-option--selected_month > span, .datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option.react-datepicker__year-option--selected_year > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__month-option--selected_month > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__year-option--selected_year > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option.react-datepicker__month-option--selected_month > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option.react-datepicker__year-option--selected_year > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__month-option--selected_month > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__year-option--selected_year > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option.react-datepicker__month-option--selected_month > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-option.react-datepicker__year-option--selected_year > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__month-option--selected_month > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__year-option--selected_year > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option.react-datepicker__month-option--selected_month > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__month-option.react-datepicker__year-option--selected_year > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__month-option--selected_month > span,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__year-option:not(:first-child, :last-child).react-datepicker__year-option--selected_year > span {
  display: none !important;
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation {
  width: 100%;
  height: 32px;
  border-radius: 0;
  left: 0;
  background-color: var(--color-primaryBlueLight30);
  text-decoration: none;
  cursor: pointer;
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation:hover,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation:hover {
  background-color: var(--color-primaryBlueLight20);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation--years-upcoming,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation--years-upcoming,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation--years-upcoming,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation--years-upcoming {
  top: 0;
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation--years-upcoming::before,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation--years-upcoming::before,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation--years-upcoming::before,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation--years-upcoming::before {
  font-family: "Material Icons";
  content: "\e316";
  font-size: var(--text-lg);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation--years-previous::before,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation--years-previous::before,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__month-dropdown .react-datepicker__navigation--years-previous::before,
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container .react-datepicker__year-dropdown .react-datepicker__navigation--years-previous::before {
  font-family: "Material Icons";
  content: "\e313";
  font-size: var(--text-lg);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__day-names {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-2xs);
  margin-top: var(--spacing-xs);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__day-names .react-datepicker__day-name {
  color: var(--color-primaryBlueLight20);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-2xs);
  width: 100%;
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day {
  cursor: pointer;
  font-weight: 500;
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover {
  background-color: var(--color-primaryBlueLight40);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day--today {
  background-color: var(--color-yellowLight10);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day--today:hover {
  background-color: var(--color-yellowDark10);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day--selected {
  background-color: var(--color-primaryBlueLight10);
  color: var(--color-white);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day--selected:hover {
  background-color: var(--color-primaryBlueDark10);
}
.datepicker-portal .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day--outside-month {
  opacity: 0;
  pointer-events: none;
}

@media only screen and (max-width: 768px) {
  .react-datepicker-popper {
    transform: none !important;
  }
}

.auth-form-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-3xl);
}
@media only screen and (max-width: 768px) {
  .auth-form-wrapper {
    padding: var(--spacing-xl);
    min-height: 100vh;
  }
}
.auth-form-wrapper .auth-form-container {
  width: 100%;
  max-height: 100%;
  max-width: 480px;
  padding: var(--spacing-3xl);
  overflow: auto;
  border-radius: var(--radius-small);
  background-color: var(--color-white);
}
@media only screen and (max-width: 768px) {
  .auth-form-wrapper .auth-form-container {
    max-height: unset;
    padding: var(--spacing-xl);
    overflow: hidden;
  }
}
.auth-form-wrapper .auth-form-container form {
  margin-top: var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.auth-form-wrapper .auth-form-container form .form-field {
  width: 100%;
}
.auth-form-wrapper .auth-form-container form .actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-3xl);
}
.auth-form-wrapper .auth-form-container form .actions input[type=submit] {
  width: 100%;
}

/* --------------- NAVBAR --------------- */
nav {
  position: fixed;
  width: 100vw;
  height: 64px;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-3xl);
  background-color: var(--color-white);
  box-shadow: var(--shadow-main);
  z-index: 20;
}
@media only screen and (max-width: 768px) {
  nav {
    height: 96px;
    align-items: flex-end;
    padding: var(--spacing-xl);
  }
}
nav img {
  height: 28px;
}
@media only screen and (max-width: 768px) {
  nav img {
    height: 28px;
    margin-bottom: var(--spacing-3xs);
  }
}
nav .menu-toggle {
  display: none;
  position: absolute;
  width: 48px;
  height: 48px;
  top: 50%;
  right: var(--spacing-xl);
  transform: translateY(-50%);
  z-index: 3;
  align-items: center;
  padding: var(--spacing-2xs);
  border-radius: var(--radius-small);
  cursor: pointer;
}
nav .menu-toggle:hover {
  background-color: var(--color-primaryBlueLight40);
}
@media only screen and (max-width: 768px) {
  nav .menu-toggle {
    display: flex;
    transform: none;
    top: unset;
    bottom: var(--spacing-lg);
  }
}
nav .menu-toggle::after {
  font-family: "Material Icons";
  content: "\e5d2";
  color: var(--color-primaryBlue);
  font-size: 32px;
  transition: all 0.2s;
}
nav .menu-toggle[aria-expanded=true]:hover {
  background-color: var(--color-primaryBlueLight10);
}
nav .menu-toggle[aria-expanded=true]::after {
  content: "\e5cd";
  color: var(--color-white);
}
nav > ul {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}
@media only screen and (max-width: 768px) {
  nav > ul {
    display: none;
  }
}
nav > ul > li {
  height: fit-content;
  list-style: none;
}
nav > ul > li a {
  display: flex;
  align-items: center;
  position: relative;
  font-size: var(--text-lg);
  color: var(--color-primaryBlue);
}
nav > ul > li a:hover {
  text-decoration: none;
}
nav > ul > li:not(.profile-link, .btn-link) {
  padding: 0 var(--spacing-xs);
}
nav > ul > li:not(.profile-link, .btn-link):has(a.active) a::after, nav > ul > li:not(.profile-link, .btn-link):hover a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-yellow);
}
nav > ul > li.profile-link {
  position: relative;
}
nav > ul > li.profile-link .user-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-small);
  font-family: var(--font-default);
  cursor: pointer;
}
nav > ul > li.profile-link .user-btn:hover, nav > ul > li.profile-link .user-btn:focus, nav > ul > li.profile-link .user-btn:active {
  background-color: var(--color-primaryBlueLight40);
}
nav > ul > li.profile-link .user-btn img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-primaryBlue);
}
nav > ul > li.profile-link .dropdown-menu {
  width: fit-content;
  min-width: 100%;
}
nav > ul > li.profile-link .dropdown-menu a {
  white-space: nowrap;
}
nav #mobile-menu {
  position: fixed;
  inset: 0;
  background-color: var(--color-primaryBlue);
}
nav #mobile-menu > ul {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding: 10vh var(--spacing-xl) var(--spacing-xl);
}
nav #mobile-menu > ul > li {
  margin: var(--spacing-lg) 0;
  list-style: none;
}
nav #mobile-menu > ul > li a {
  position: relative;
  color: var(--color-white);
  font-size: var(--text-4xl);
}
nav #mobile-menu > ul > li a:hover {
  text-decoration: none;
}
nav #mobile-menu > ul > li:not(.profile-link, .btn-link) {
  padding: 0 var(--spacing-xs);
}
nav #mobile-menu > ul > li:not(.profile-link, .btn-link):has(a.active) a::after, nav #mobile-menu > ul > li:not(.profile-link, .btn-link):hover a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-yellow);
}
nav #mobile-menu > ul > li.profile-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  margin-top: auto;
  border-radius: var(--radius-small);
  flex-direction: row-reverse;
  color: var(--color-white);
  font-size: var(--text-3xl);
  font-family: var(--font-default);
  list-style: none;
}
nav #mobile-menu > ul > li.profile-link img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-primaryBlue);
}
nav #mobile-menu > ul > li.btn-link {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}
nav #mobile-menu > ul > li.btn-link button {
  width: 100%;
}

main {
  width: 100vw;
}
main:not(.auth-page) {
  display: flex;
  flex-direction: column;
}
main:not(.auth-page) {
  min-height: calc(100vh - 64px);
  padding-top: 64px;
}
@media only screen and (max-width: 768px) {
  main:not(.auth-page) {
    min-height: calc(100vh - 132px);
    padding-top: 96px;
  }
}
main .page-heading {
  height: 148px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--spacing-3xl);
}
@media only screen and (max-width: 768px) {
  main .page-heading {
    padding: 0 var(--spacing-xl);
  }
}
main .page-body {
  max-width: 1200px;
  width: 100%;
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-3xl);
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  main .page-body {
    padding: var(--spacing-xl);
  }
}
main.sub-page {
  position: relative;
}
main.sub-page .page-heading {
  height: 264px;
  background-position: bottom;
  background-size: cover;
  padding: 0;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  main.sub-page .page-heading {
    height: 380px;
  }
}
main.sub-page .page-heading .sub-page-navigation {
  width: 100vw;
  min-height: 58px;
  position: relative;
  position: fixed;
  z-index: 20;
  top: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  padding: var(--spacing-xs) var(--spacing-3xl);
  box-shadow: var(--shadow-main);
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  main.sub-page .page-heading .sub-page-navigation {
    top: 96px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2xs);
    padding: var(--spacing-sm) var(--spacing-xl);
  }
}
main.sub-page .page-heading .sub-page-navigation .cover-inner {
  position: absolute;
  width: 100%;
  height: 264px;
  object-fit: cover;
  top: 0;
  left: 0;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  main.sub-page .page-heading .sub-page-navigation .cover-inner {
    height: 380px;
  }
}
main.sub-page .page-heading .sub-page-navigation .back {
  position: absolute;
  top: 50%;
  left: var(--spacing-3xl);
  transform: translateY(-50%);
  z-index: 2;
  transition: color 0.3s ease;
}
@media only screen and (max-width: 768px) {
  main.sub-page .page-heading .sub-page-navigation .back {
    position: relative;
    transform: unset;
    top: unset;
    left: 0;
  }
}
main.sub-page .page-heading .sub-page-navigation h3 {
  width: 100%;
  margin: 0 calc(var(--spacing-2xl) * 4);
  text-align: center;
  z-index: 2;
  color: var(--color-primaryBlue);
}
@media only screen and (max-width: 768px) {
  main.sub-page .page-heading .sub-page-navigation h3 {
    margin: 0;
    text-align: left;
  }
}
main.sub-page .page-body {
  max-width: 860px;
}
main.sub-page .page-body .dialog-block .dialog-arrow {
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
main.sub-page .page-body .dialog-block .dialog-arrow.left {
  border-right-width: 24px;
  margin-right: calc(-1 * var(--spacing-2xs));
}
main.sub-page .page-body .dialog-block .dialog-arrow.right {
  border-left-width: 24px;
  margin-left: calc(-1 * var(--spacing-2xs));
}
@media only screen and (max-width: 640px) {
  main.sub-page .page-body .dialog-block > img {
    min-width: 64px;
    max-width: 64px;
    min-height: 64px;
    max-height: 64px;
  }
}
main.chapter-5-page h3,
main.chapter-5-page .header-back-btn {
  color: var(--color-white) !important;
}
main.auth-page {
  height: 100vh;
  display: flex;
}
@media only screen and (max-width: 768px) {
  main.auth-page {
    height: fit-content;
  }
}
main.auth-page > section {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-3xl);
}
main.auth-page > section.auth-page-left {
  background-color: var(--color-white);
}
@media only screen and (max-width: 768px) {
  main.auth-page > section.auth-page-left {
    display: none;
  }
}
main.auth-page > section.auth-page-left img {
  height: 86px;
}
main.auth-page > section.auth-page-right {
  padding: 0;
}
@media only screen and (max-width: 768px) {
  main.auth-page > section.auth-page-right {
    width: 100%;
  }
}
main.terms-page .page-body, main.my-path-page .page-body {
  max-width: 860px;
}
main.profile-setup-page .page-heading {
  height: 96px;
}
main.profile-setup-page .page-body {
  max-width: 560px;
}

footer {
  width: 100vw;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-xs);
  background-color: var(--color-primaryBlueLight40);
  color: var(--color-primaryBlue);
}
@media only screen and (max-width: 768px) {
  footer {
    height: 124px;
    flex-direction: column;
    padding: var(--spacing-xl);
    gap: var(--spacing-xs);
    text-align: center;
  }
}
footer a {
  position: relative;
  font-size: var(--text-lg);
  padding-right: var(--spacing-xs);
  margin-right: var(--spacing-2xs);
  color: var(--color-primaryBlue);
}
@media screen and (max-width: 640px) {
  footer a {
    font-size: var(--text-md);
  }
}
footer a::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 75%;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: var(--color-primaryBlueLight20);
}
@media only screen and (max-width: 768px) {
  footer a::after {
    display: none;
  }
}