:root {
  --color-primary: #365EFC;
  --color-neutral: #636A86;
  --color-readonly: #6F7495;
  --color-disabled: #AEB1C6;
  --color-success: #00804B;
  --color-warning: #DC6E00;
  --color-error: #BC004B;
  --color-base: #FFFFFF;
  --color-container-primary: #D3D7F8;
  --color-container-success: #B4EFC6;
  --color-container-warning: #FFD6AD;
  --color-container-error: #F2B0BB;
  --color-container-neutral: #E5E5E5;
  --color-surface-primary-default: #F6F7FE;
  --color-surface-primary-strong: #CFD7F7;
  --color-surface-success: #F2FCF9;
  --color-surface-warning: #FFF1E4;
  --color-surface-error: #FDF4F6;
  --color-text-default: #1D202F;
  --color-text-subtle: #50556D;
  --color-border-default: #B3BAC7;
  --color-border-subtle: #D1DCE7;
  --color-border-minimal: #F6F6F6;
  --color-product-logo-background: #122FB0;
  --spacing-32: 2rem;
  --spacing-24: 1.5rem;
  --spacing-16: 1rem;
  --spacing-12: 0.75rem;
  --spacing-8: 0.5rem;
  --spacing-4: 0.25rem;
  --font-size-28: 1.75rem;
  --font-size-24: 1.5rem;
  --font-size-16: 1rem;
  --font-size-14: .875rem;
  --font-size-12: .75rem;
  --font-size-10: .625rem;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-light: 400;
  --icon-size-24: 24px;
  --icon-size-16: 16px;
}

.fill-button {
  all: unset;
  cursor: pointer;
  position: relative;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 2rem;
  padding-inline: var(--spacing-12);
  fill: currentColor;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-base);
  background-color: var(--color-primary);
}
.fill-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-base);
}
.fill-button::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: currentColor;
  border-radius: inherit;
  opacity: 0;
}
.fill-button:hover:not(:disabled)::before {
  opacity: 0.08;
}
.fill-button:active:not(:disabled)::before {
  opacity: 0.12;
}
.fill-button:disabled {
  background-color: var(--color-disabled);
}

.outline-button {
  all: unset;
  cursor: pointer;
  position: relative;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 2rem;
  padding-inline: var(--spacing-12);
  fill: currentColor;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-primary);
  background-color: var(--color-base);
  border: 1px solid currentColor;
}
.outline-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-base);
}
.outline-button::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: currentColor;
  border-radius: inherit;
  opacity: 0;
}
.outline-button:hover:not(:disabled)::before {
  opacity: 0.08;
}
.outline-button:active:not(:disabled)::before {
  opacity: 0.12;
}
.outline-button:disabled {
  color: var(--color-disabled);
}

.flat-button {
  all: unset;
  cursor: pointer;
  position: relative;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 2rem;
  padding-inline: var(--spacing-12);
  fill: currentColor;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-primary);
}
.flat-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-base);
}
.flat-button::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: currentColor;
  border-radius: inherit;
  opacity: 0;
}
.flat-button:hover:not(:disabled)::before {
  opacity: 0.08;
}
.flat-button:active:not(:disabled)::before {
  opacity: 0.12;
}
.flat-button:disabled {
  color: var(--color-disabled);
}

.text-button {
  all: unset;
  cursor: pointer;
  position: relative;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 1.25rem;
  display: inline;
  width: fit-content;
  color: var(--color-primary);
  fill: currentColor;
  border-radius: 4px;
}
.text-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-base);
}
.text-button::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: currentColor;
  border-radius: inherit;
  opacity: 0;
}
.text-button:hover:not(:disabled)::before {
  opacity: 0.08;
}
.text-button:active:not(:disabled)::before {
  opacity: 0.12;
}
.text-button:disabled {
  color: var(--color-disabled);
}

.text-28-medium {
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-medium);
  line-height: 2rem;
}

.text-24-medium {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-medium);
  line-height: 1.875rem;
}

.text-24-regular {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-regular);
  line-height: 1.875rem;
}

.text-24-light {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-light);
  line-height: 1.875rem;
}

.text-16-semibold-upper {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  line-height: 1.5rem;
  text-transform: uppercase;
}

.text-16-medium {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: 1.25rem;
}

.text-16-regular {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 1.5rem;
}

.text-14-medium {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: 1.25rem;
}

.text-14-regular {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 1.25rem;
}

.text-14-bold {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25rem;
}

.text-14-semibold {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1rem;
  letter-spacing: 0.4px;
}

.text-14-semibold-upper {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.text-12-medium {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  line-height: 1.125rem;
}

.text-12-regular {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: 1.125rem;
}

.text-10-regular {
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-regular);
  line-height: 1rem;
}

.alert {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: 8px;
}
.alert--success {
  fill: var(--color-success);
  border-color: var(--color-success);
  background-color: var(--color-surface-success);
}
.alert--error {
  fill: var(--color-error);
  border-color: var(--color-error);
  background-color: var(--color-surface-error);
}
.alert--warning {
  fill: var(--color-warning);
  border-color: var(--color-warning);
  background-color: var(--color-surface-warning);
}
.alert__icon {
  box-sizing: border-box;
  padding: 0.15rem;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
}
.alert__message {
  margin: 0 0 1rem 0;
  color: var(--color-text-default);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 1.25rem;
}
.alert__message:last-of-type {
  margin: 0;
}

.radio-field {
  margin: 0.5rem 0;
}

.social-providers {
  margin-top: 2rem;
}
.social-providers__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.social-providers__label:before, .social-providers__label:after {
  display: block;
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--color-border-default);
}
.social-providers__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}
.social-providers__link {
  width: 100%;
}
.social-providers__icon {
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
}

body {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: var(--color-text-default);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 1.25rem;
}

.skip-links {
  position: absolute;
  top: -2137px;
  display: flex;
  width: 100vw;
  padding: 0.5rem 0;
  background-color: var(--color-product-logo-background);
  color: var(--color-base);
  font-size: 1rem;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.skip-links .skip-links__list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}
.skip-links .skip-links__link {
  display: inline-block;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-base);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration-line: underline;
}

.wrapper {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .wrapper {
    flex-direction: column;
  }
}
.wrapper .logo-container {
  width: 50%;
  height: 100%;
  padding-top: calc(80px + env(safe-area-inset-top));
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  padding-left: calc(80px + env(safe-area-inset-left));
  padding-right: 80px;
  box-sizing: border-box;
  background-color: var(--color-product-logo-background);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
@media (max-width: 1024px) {
  .wrapper .logo-container {
    width: 100%;
    height: auto;
    justify-content: center;
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: 16px;
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
}
.wrapper .scrollable-container {
  overflow: auto;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .wrapper .scrollable-container {
    width: 100%;
    height: auto;
    flex-grow: 1;
  }
}
.wrapper .content-container {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: calc(32px + env(safe-area-inset-top));
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
  padding-left: 64px;
  padding-right: calc(64px + env(safe-area-inset-right));
}
@media (max-width: 1024px) {
  .wrapper .content-container {
    width: fit-content;
    margin: 0 auto;
    padding-top: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    padding-left: calc(32px + env(safe-area-inset-left));
    padding-right: calc(32px + env(safe-area-inset-right));
  }
}
.wrapper .content-container .locale {
  margin-inline-start: auto;
  margin-bottom: 2rem;
}
.wrapper .content-container .locale__list {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}
.wrapper .content-container .locale__item {
  padding: 0 6px;
  font-weight: 300;
}
.wrapper .content-container .locale__item:not(:last-child) {
  border-inline-end: 1px solid var(--color-border-default);
}
.wrapper .content-container .locale__item--active {
  font-weight: 700;
}
.wrapper .content-container .locale__button {
  font-weight: unset;
}
.wrapper .content-container main {
  max-width: 25rem;
  margin: auto 0;
  display: flex;
  flex-direction: column;
}
.wrapper .content-container .header {
  margin: 1rem 0;
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-medium);
  line-height: 2rem;
}

.product-logo {
  height: 10rem;
}
@media (max-width: 1024px) {
  .product-logo {
    height: 3rem;
  }
}

.form-field {
  display: block;
  margin-block: var(--spacing-24);
}
.form-field__label {
  margin-block-end: var(--spacing-4);
  color: var(--color-text-default);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: 1.25rem;
}
.form-field--invalid .form-field__label {
  color: var(--color-error);
}
.form-field__label-required-mark {
  color: var(--color-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1rem;
  letter-spacing: 0.4px;
}
.form-field__input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  fill: var(--color-neutral);
  box-sizing: border-box;
  cursor: text;
  padding: 5px var(--spacing-12);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  background-color: var(--color-base);
}
.form-field__input-wrapper:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-base);
}
.form-field--invalid .form-field__input-wrapper {
  border-color: var(--color-error);
}
.form-field__input {
  all: unset;
  width: 100%;
  min-height: 24px;
  word-break: break-word;
  color: var(--color-text-default);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 1.5rem;
}
.form-field__input:focus-visible {
  outline: none;
}
.form-field__input::placeholder {
  color: var(--color-neutral);
}

.footer {
  margin-top: 2rem;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: 1.125rem;
}

ul, ol {
  padding-inline-start: 24px;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  line-height: 1.5;
}

.inline-svg {
  display: inline;
  width: 1.2em;
  height: 1.2em;
  vertical-align: top;
}

.action-buttons {
  margin-top: var(--spacing-32);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.visually-hidden {
  position: absolute;
  user-select: none;
  clip-path: inset(50%);
}

/*# sourceMappingURL=login-1783072833.css.map */
