/* Basic Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Inter, sans-serif;
}

button,
input {
  all: unset;
  box-sizing: border-box;
}

:root {
  --logotype-color: 77, 87, 93;
  --paragraph-color: 62, 70, 74;
}

h2 {
  all: unset;
  font-size: 24px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.35px;
}

p {
  all: unset;
  color: rgb(var(--paragraph-color));
  font-family: "Inter";
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.25px;
  text-align: center;
  max-width: 356px;
}
p.strong {
  --paragraph-color: 200,8.8%,13.3%;
  font-weight: 500;
}

.hidden {
  display: none;
  visibility: hidden;
}

.atea__dim {
  display: flex;
  align-items: center;
}
@media (max-width: 968px) {
  .atea__dim {
    flex-direction: column;
  }
}
.atea__dim--image {
  width: calc(45svw - 24px);
  height: calc(100svh - 24px);
  margin: 12px;
  overflow: hidden;
  border-radius: 24px;
}
@media (max-width: 968px) {
  .atea__dim--image {
    width: 100%;
    height: 24svh;
    margin: 0 0 -4svh 0;
    border-radius: 0;
    z-index: 0;
  }
}
.atea__dim--image img {
  min-height: 100%;
  min-width: 100%;
}
.atea__dim--form {
  display: flex;
  width: 55svw;
  height: 100svh;
  align-items: center;
  justify-content: center;
  background-color: #FFF;
}
@media (max-width: 968px) {
  .atea__dim--form {
    align-items: flex-start;
    padding-top: 6svh;
    width: 100%;
    height: 76svh;
    z-index: 1;
    border-radius: 24px 24px 0 0;
  }
}
.atea__dim--form .other--divider {
  --divider-text-color: 202, 9%, 33%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: -8px;
}
.atea__dim--form .other--divider:before {
  content: "";
  height: 1px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 10px;
  background-color: #B8BCBE;
  z-index: 0;
}
.atea__dim--form .other--divider span {
  padding: 0px 10px;
  background-color: #FFF;
  z-index: 1;
  font-size: 14px;
  letter-spacing: -0.15px;
  font-weight: 500;
  color: hsl(var(--divider-text-color));
}
.atea__dim--form .other--actions {
  display: flex;
  gap: 24px;
  width: 100%;
}
.atea__dim--form .signup {
  font-size: 14px;
  position: absolute;
  bottom: 24px;
}
@media (max-width: 968px) {
  .atea__dim--form .signup {
    position: relative;
    margin: 64px 0 -24px 0 !important;
  }
}
.atea__dim--form .signup button.button__link {
  font-weight: 600;
  text-decoration: underline;
  color: #097288;
  line-height: 100%;
  padding: 5px 0;
}
.atea__dim--form .signup button.button__link:hover {
  background: rgba(157, 199, 207, 0.5);
  color: #054452;
}
.atea__dim .dim__form {
  max-width: 490px;
  width: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 968px) {
  .atea__dim .dim__form {
    align-items: center;
    padding: 24px 24px 48px 24px;
  }
}
.atea__dim .dim__form--logo {
  height: 40px;
  fill: rgba(var(--logotype-color), 1);
}
@media (max-width: 968px) {
  .atea__dim .dim__form--logo {
    height: 32px;
  }
}
.atea__dim .dim__form p {
  margin: 16px 0;
}
.atea__dim .dim__form form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.atea__dim .dim__form--buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 12px;
  margin-top: 16px;
}
.atea__dim .dim__form .info--section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 48px;
}
.atea__dim .dim__form .info--section h2 {
  margin: 16px 0 -16px 0;
}
.atea__dim .dim__form .pictogram {
  --pictogram-bg: 120,100%,27%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: hsl(var(--pictogram-bg));
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atea__dim .dim__form .pictogram.error {
  --pictogram-bg: 358.3,71.2%,49%;
}
.atea__dim .dim__form .pictogram svg {
  fill: currentColor;
  width: 38px;
  height: 38px;
}

.alert__inline--error {
  --alert-bg: 358, 69%, 80%;
  --alert-text: 358, 71%, 29%;
  background-color: hsla(var(--alert-bg), 0.25);
  color: hsla(var(--alert-text), 1);
  padding: 16px 24px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.alert__inline--error.hidden {
  display: none;
}
.alert__inline--error svg {
  fill: currentColor;
  width: 22px;
  height: 22px;
}
.alert__inline--error span, .alert__inline--error li {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.25px;
  color: inherit;
  display: flex;
  gap: 4px;
}

ul.alert__inline--error {
  list-style-type: disc;
  padding-left: 32px;
}
ul.alert__inline--error li {
  display: list-item;
}

.alert__inline--warning,
.alert__inline--info {
    padding: 16px 24px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.alert__inline--warning svg,
.alert__inline--info svg {
    fill: currentColor;
    width: 22px;
    height: 22px;
}

.alert__inline--warning span,
.alert__inline--warning li,
.alert__inline--info span,
.alert__inline--info li {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.25px;
    color: inherit;
}

ul.alert__inline--warning,
ul.alert__inline--info {
    list-style-type: disc;
    padding-left: 32px;
}
ul.alert__inline--warning li,
ul.alert__inline--info li {
    display: list-item;
}

.alert__inline--warning {
    --alert-bg: 56, 69%, 80%;
    --alert-text: 56, 71%, 29%;
    background-color: hsla(var(--alert-bg), 0.25);
    color: hsla(var(--alert-text), 1);
    margin: 20px;
}
.alert__inline--info {
    --alert-bg: 207, 69%, 80%;
    --alert-text: 207, 71%, 29%;
    background-color: hsla(var(--alert-bg), 0.25);
    color: hsla(var(--alert-text), 1);
}

.alert__inline--warning span,
.alert__inline--warning li {
    display: flex;
    justify-content: center;
}

.alert__inline--info span,
.alert__inline--info li {
    gap: 4px;
    text-align: center;
}

.ad__textfield {
  --textfield-bg: 0, 0%, 97%;
  --textfield-bg-hover: 180,2.9%,93.1%;
  --textfield-border: 200,5%,46.7%;
  --textfield-text: 200,8.8%,13.3%;
  --textfield-label-default: 200,8.8%,26.7%;
  --textfield-label-active: 190.6,87.9%,22.7%;
  --textfield-error:358.3,71.2%,49%;
  position: relative;
  width: 100%;
}
.ad__textfield input {
  width: 100%;
  height: 56px;
  padding: 16px 40px 0px 16px;
  font-weight: 500;
  border-radius: 4px;
  background-color: hsl(var(--textfield-bg));
  border: 1px solid hsl(var(--textfield-border));
  color: hsl(var(--textfield-text));
  transition: background-color 0.1s;
}
.ad__textfield input:hover {
  background-color: hsl(var(--textfield-bg-hover));
  cursor: text;
}
.ad__textfield input:focus {
  outline: 0.5px solid hsl(var(--textfield-label-active));
  outline-offset: -1.5px;
  border-color: hsl(var(--textfield-label-active));
}
.ad__textfield input:user-invalid, .ad__textfield input.invalid {
  outline: 0.5px solid hsl(var(--textfield-error));
  outline-offset: -1.5px;
  border-color: hsl(var(--textfield-error));
}
.ad__textfield input:user-invalid ~ .ad__textfield--helper, .ad__textfield input.invalid ~ .ad__textfield--helper {
  display: inline-flex;
  color: hsl(var(--textfield-error));
}
.ad__textfield input:required ~ label::after {
  content: " *";
  position: absolute;
  right: 0;
  color: hsl(var(--textfield-error));
  margin: -2px -11px 0 0;
}
.ad__textfield input:disabled, .ad__textfield input:disabled ~ label {
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}
.ad__textfield input:disabled ~ .ad__textfield--icon {
  display: none;
}
.ad__textfield input:focus ~ label, .ad__textfield input:not(:placeholder-shown) ~ label {
  color: hsl(var(--textfield-label-active));
  transform: scale(0.75) translateY(-12px);
  font-weight: 500;
}
.ad__textfield input:not(:placeholder-shown) ~ .ad__textfield--icon {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.ad__textfield.numberOnly {
  height: 56px;
  width: 53px;
  margin: auto;
}
.ad__textfield.numberOnly:first-of-type {
  margin-left: 0;
}
.ad__textfield.numberOnly:last-of-type {
  margin-right: 0;
}
.ad__textfield.numberOnly input {
  padding: 0;
  height: 56px;
  width: 53px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.75px;
  text-align: center;
}
.ad__textfield label {
  position: absolute;
  left: 16px;
  top: 18px;
  font-weight: 400;
  letter-spacing: -0.25px;
  color: hsl(var(--textfield-label-default));
  transition: all 150ms;
  transform-origin: top left;
  pointer-events: none;
  user-select: none;
}
.ad__textfield--icon {
  --textfield-icon-hover-bg: 210,5.9%,86.7%;
  --textfield-icon-active-bg: 200,4.4%,73.3%;
  --textfield-icon-size: 24px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  padding: 4px;
  right: 12px;
  top: calc(50% - var(--textfield-icon-size) / 2);
  width: var(--textfield-icon-size);
  height: var(--textfield-icon-size);
  border-radius: 50%;
  color: hsl(var(--textfield-label-default));
  visibility: hidden;
}
.ad__textfield--icon:hover {
  background-color: hsl(var(--textfield-icon-hover-bg));
  cursor: pointer;
}
.ad__textfield--icon:active {
  background-color: hsl(var(--textfield-icon-active-bg));
}
.ad__textfield--icon:focus-visible, .ad__textfield--icon:has(#hiddenDateInput:focus-visible) {
  outline: 2.5px solid hsl(190.6, 87.9%, 22.7%);
}
.ad__textfield--icon svg {
  fill: currentColor;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.ad__textfield--icon.showPassword {
  --textfield-icon-size: 28px;
  right: 42px;
}
.ad__textfield--icon.showPassword .ic_visibility_off {
  display: none;
}
.ad__textfield--icon.showPassword.active .ic_visibility {
  display: none;
}
.ad__textfield--icon.showPassword.active .ic_visibility_off {
  display: block;
}
.ad__textfield--helper {
  position: absolute;
  display: none;
  top: calc(100% + 2px);
  left: 16px;
  font-size: 12px;
  letter-spacing: -0.15px;
  font-weight: 500;
  color: currentColor;
}

.ad__button {
  --button-padding: 13px 26px;
  --button-bg-alpha: 1;
  --button-text-alpha: 1;
  --button-bg: 120,100%,27.1%;
  --button-bg-hover: 120,51.9%,41.6%;
  --button-bg-active: 120,100%,21.6%;
  --button-text: 0, 0%, 100%;
  --button-font-size: 14px;
  --button-letter-spacing: -0.25px;
  --button-text-decoration: none;
  display: flex;
  border-radius: 3px;
  height: 50px;
  padding: var(--button-padding);
  justify-content: center;
  align-items: center;
  background: hsla(var(--button-bg), var(--button-bg-alpha));
  color: hsla(var(--button-text), var(--button-text-alpha));
  font-size: var(--button-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  letter-spacing: -0.25px;
  text-decoration: var(--button-text-decoration);
}
.ad__button:hover {
  background: hsla(var(--button-bg-hover), var(--button-bg-alpha));
  text-decoration: var(--button-text-decoration);
  transition: all 0.1s;
  cursor: pointer;
}
.ad__button:active {
  background: hsla(var(--button-bg-active), var(--button-bg-alpha));
}
.ad__button:focus-visible {
  outline: 2px solid black;
  outline-offset: 3px;
}
.ad__button:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.ad__button .isLoading {
  pointer-events: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  border: 3.5px solid hsla(var(--button-text), 0.4);
  border-top-color: hsla(var(--button-text), 0.9);
  animation: rotateLoading 0.75s infinite linear;
}
@keyframes rotateLoading {
  to {
    transform: rotate(360deg);
  }
}
.ad__button.variant--label {
  --button-bg-alpha: 0;
  --button-text: 200,8.8%,13.3%;
}
.ad__button.variant--label:hover {
  --button-text-decoration: underline;
}
.ad__button.variant--label:active {
  color: hsla(var(--button-text), 0.6);
}
.ad__button.variant--ghost {
  --button-bg-alpha: 0;
  --button-text: 200,8.8%,13.3%;
  border: 1px solid hsl(200, 5%, 47%);
}
.ad__button.variant--ghost:hover {
  border-color: hsl(200, 9%, 27%);
  background: hsla(200, 9%, 13%, 0.08);
}
.ad__button.variant--ghost:active {
  border-color: hsl(200, 9%, 13%);
  background: hsla(200, 9%, 13%, 0.16);
}
.ad__button.displayhelper {
    width: 100%;
}

.singleNumberInputContainer {
    display: flex;
    width: 100%;
    max-width: 390px;
}

h2.size-centering{
    font-size: 22px;
    text-align: center;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}

input[readonly] {
    background-color: hsla(0, 0%, 89%, 0.89);
    color: hsla(0, 0%, 53%, 1);
    opacity: 1;
    cursor: not-allowed;
}

#forgotPassword {
    display: none;
}
/*# sourceMappingURL=styles.css.map */