@font-face {
    font-family: Aller;
    src: url(../fonts/Aller_Rg.ttf);
  }

  :root {
    --color-primary: #EB0253;
    --color-text-level-1: #000;
    --color-text-level-2: #4c4c4c;
    --color-text-level-3: #66666c;
    --color-text-level-4: #939599;
    --border-color: #e0e1e5;
    --border-radius: 4px;
  }

  /* Reset */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Main Styling */
  html,
  body {
    background-color: #fff;
    font-family: Aller;
    color: var(--color-text-level-2);
  }

  h1,
  h2,
  h3 {
    padding-bottom: 1rem;
  }

  p {
    margin: 0.5rem 0;
  }

  a {
    color: var(--color-text-level-2);
  }

  a:hover {
    color: var(--color-primary);
  }

  ul {
    list-style-position: inside;
    margin-bottom: 0.5rem;
  }

  /* Header */
  .body-header {
    border-bottom: 4.8px solid var(--color-primary);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .body-header .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
  }

  .body-header .title {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .body-header {
      padding-top: 0.6rem;
      padding-bottom: 0.4rem;
    }

    .body-header .logo img {
      height: 51.2px;
    }

    .body-header .title {
      display: block;
      font-size: 1.75rem;
      line-height: 0.8;
    }
  }

  /* Container */
  .container {
    width: 100%;
    max-width: 614.4px;
    margin: 0 auto;
    padding: 1.5rem 0.9rem;
  }

  @media screen and (min-width: 1024px) {
    .container {
      padding: 2.1rem 0.9rem;
    }
  }

  /* Main */
  .baseline {
    margin-bottom: 1.6rem;
    text-align: center;
    font-size: 1rem;
  }

  @media screen and (min-width: 1024px) {
    .baseline {
      font-size: 1.25rem;
    }
  }

  /* Main Card */
  .main-card {
    width: 100%;
    padding: 1rem 0.5rem 1.8rem;
    border-radius: var(--border-radius);
    border: 1.6px solid var(--border-color);
  }

  @media screen and (min-width: 1024px) {
    .main-card {
      padding: 1.4rem 2rem 2.1rem;
    }
  }

  .header-title {
    display: flex;
    align-items: center;
    margin-bottom: 1.8rem;
  }

  .left-arrow {
    padding: 0.4rem 1.2rem 0.4rem 0;
  }
  .left-arrow:hover {
    animation: 1s ease-in-out reverse infinite leftArrow;
  }
  @keyframes leftArrow {
    0% {
      padding: 0.4rem 1.2rem 0.4rem 0;
    }
    100% {
      padding: 0.4rem 0.8rem 0.4rem 0.4rem;
    }
  }

  .header-text,
  .header-text-alone {
    font-size: 1.25rem;
    line-height: 0.88;
  }

  @media screen and (min-width: 1024px) {
    .header-text,
    .header-text-alone {
      font-size: 1.75rem;
    }
  }

  .instruction {
    margin-bottom: 1rem;
    font-size: 1.1rem;
  }

  @media screen and (min-width: 1024px) {
    .instruction {
      margin-bottom: 2.8rem;
      font-size: 1.25rem;
    }
  }

  .reset-password-footer {
    margin-bottom: -8px;
  }

  /* Main Card Form Group */
  .card-validation-unique {
    border: 2px solid #ff4081;
    padding: 15px;
    border-radius: 4px;
}

.validation-unique-warning {
    color: #ff4081;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}

.validation-unique-condition {
    font-weight: bold;
    text-align: center;
}

.validate-unique-condition-input{
    height: 30px;
    width: 30px;
}

.validate-unique-understood{
    color: #2C3036;
    font-size: 18px;
    opacity: 0.51;
    display: flex;
    align-items: center;
}

.disabled-form {
    opacity: 0.3;
    pointer-events: none;
}

  .form-group {
    margin-bottom: 2.1rem;
    position: relative;
  }

  .visibility img {
    position: absolute;
    top: 24px;
    right: 4px;
    border: none;
    width: 1rem;
    height: 1rem;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
  }

  .visibility img:hover {
    opacity: 1;
  }

  label:not(.radio):not(.checkbox):not(.visibility),
  .form-group p {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1rem;
    color: var(--color-text-level-3);
  }

  input {
    width: 100%;
    height: 24px;
    background: transparent;
    border: none;
    border-bottom: 1.6px solid var(--color-text-level-2);
    font-size: 1.1rem;
    font-family: inherit;
    color: var(--color-text-level-1);
    outline: none;
  }

  @media screen and (min-width: 1024px) {
    label:not(.radio):not(.checkbox):not(.visibility),
    .form-group p {
      font-size: 1.1rem;
    }
    input {
      font-size: 1.25rem;
    }
  }

  /* Main Card Footer */
  .main-card-footer {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }
  @media screen and (min-width: 1024px) {
    .main-card-footer {
      flex-direction: row;
      justify-content: flex-end;
      gap: 1.6rem;
    }
  }

  /* Main button*/
  .submit {
    width: 100%;
    height: auto;
    padding: 0.6rem 0.8rem;
    background-color: var(--color-primary);
    border: 0.8px solid var(--color-primary);
    border-radius: var(--border-radius);
    box-shadow: 0px 3px 6px #00000029;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    transition: box-shadow 0.3s ease-in-out;
  }

  .submit:not(:disabled) {
    cursor: pointer;
  }

  .submit:not(:disabled):hover {
    color: #ffffff;
    box-shadow: 0px 2px 9px 2px #0000004d;
  }

  @media screen and (min-width: 1024px) {
    .submit {
      align-self: flex-end;
      width: auto;
    }
  }

  /* User actions*/
  .info a {
    display: inline-block;
    font-size: 0.75rem;
    text-decoration: none;
  }

  .info a:focus {
    border-color: red;
  }

  /* Error messages */
  /* Error messages in Inputs Form */
  .form-control[aria-invalid="true"] {
    border-color: var(--color-primary);
  }

  .text-help {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: bold;
  }

  @media screen and (min-width: 1024px) {
    .text-help {
      font-size: 1.1rem;
    }
  }

  /*Error instructions*/
  .first-message {
    margin-bottom: 1rem;
  }

  .contact-us,
  .contact-us:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }

  /* Remove blue background on chrome autocomplete */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  }

  /* Custom Radio Button*/
  .radio-group {
    display: grid;
    grid-template-columns: min-content auto;
    margin-top: 0.8rem;
    grid-gap: 2.2rem;
  }

  .radio {
    display: flex;
    align-items: center;
    grid-gap: 0.4rem;
    color: var(--color-text-level-2);
  }

  .radio-input input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .radio-input input:checked + .radio-control {
    background: var(--color-text-level-2);
  }

  .radio-control {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 0.8px solid var(--color-text-level-2);
    background-color: #fff;
    transform: translateY(-0.05em);
  }

  .radio-input {
    display: flex;
  }

  .radio-label {
    font-size: 0.8rem;
  }

  .radio-control {
    display: grid;
    place-items: center;
  }

  @media screen and (min-width: 1024px) {
    .radio-group {
      grid-gap: 1.4rem;
    }
    .radio-label {
      font-size: 1rem;
    }
  }

  /* Custom Checkbox*/
  .checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .checkbox-input input {
    opacity: 0;
    width: 0.9rem;
    height: 0.9rem;
  }

  .checkbox-control {
    display: inline-grid;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: var(--border-radius);
    border: 0.8px solid currentColor;
    background-color: #fff;
  }

  .checkbox-input {
    display: grid;
    grid-template-areas: "checkbox";
  }

  .checkbox-input > * {
    grid-area: checkbox;
  }

  .checkbox-control svg {
    width: 0.7rem;
    margin: auto;
    fill: #fff;
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.1s ease-in 25ms;
  }

  .checkbox-input input:checked + .checkbox-control svg {
    transform: scale(1);
  }

  .checkbox-input input:checked + .checkbox-control {
    transform: scale(1);
    background-color: var(--color-primary);
  }

  .checkbox-label {
    font-size: 0.75rem;
    color: var(--color-text-level-3);
  }

  .checkbox-label a {
    text-decoration: underline;
    color: var(--color-text-level-3);
    cursor: pointer;
  }
  .checkbox-label a:hover {
    color: var(--color-primary);
  }

  @media screen and (min-width: 1024px) {
    .checkbox {
      gap: 1rem;
    }

    .checkbox-control {
      width: 1.2rem;
      height: 1.2rem;
    }

    .checkbox-label {
      font-size: 0.9rem;
    }
  }

  /* Submit disabled*/
  input[type="submit"]:disabled {
    border: 0.8px solid #999999;
    background-color: #cccccc;
    color: #666666;
  }

  /* International Telephone input*/
  .iti {
    width: 100%;
  }

  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: #fff;
  }

  .iti__selected-flag {
    padding: 0 4.8px 0 1.6px;
  }

  .iti__country-list {
    border: 0.8px solid #2c3036;
  }

  .iti--allow-dropdown input,
  .iti--allow-dropdown input[type="tel"],
  .iti--allow-dropdown input[type="text"],
  .iti--separate-dial-code input,
  .iti--separate-dial-code input[type="tel"],
  .iti--separate-dial-code input[type="text"] {
    padding-left: 36px;
  }

  ::-webkit-input-placeholder {
    color: var(--color-text-level-4);
  }

  ::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--color-text-level-4);
    opacity: 1;
  }

  :-ms-input-placeholder {
    color: var(--color-text-level-4);
  }

  select {
    width: 100%;
    height: 1.6rem;
  }

  .select-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  input::-webkit-calendar-picker-indicator {
    display: none;
  }

  input[type="date"]::-webkit-input-placeholder {
    visibility: hidden !important;
  }

  .dselect {
    width: 48px;
    height: 20px;
    margin-bottom: 4px;
    margin-top: 1.6px;
    font-size: 12.8px;
  }

  .yselect {
    width: 72px;
    height: 20px;
    margin-bottom: 4px;
    margin-top: 1.6px;
    font-size: 12.8px;
  }

  .textInfo {
    margin-bottom: 16px;
  }

  .text-center {
    text-align: center;
  }

  .primary-links a {
    color: var(--color-primary);
  }

  .error-box,
  .information-disclaimer {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-primary);
  }

  @media screen and (min-width: 1024px) {
    .information-disclaimer {
      margin-bottom: 0.8rem;
      font-size: 1rem;
    }
  }

  /* Extra under card */
  .extra {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-size: 0.75rem;
  }

  .required-label,
  .disclaimer {
    font-size: 0.65rem;
  }

  .disclaimer a {
    text-decoration: underline;
    cursor: pointer;
  }

  @media screen and (min-width: 1024px) {
    .extra {
      gap: 0.4rem;
      margin-left: 2em;
      margin-right: 2em;
    }

    .required-label {
      font-size: 0.75rem;
    }
  }


  .header .title {
    color: #2C3036;
    font-size: 32px;
    opacity: 1;
  }

  .alingPuce {
    margin-left: 20px;
  }

  .button-group {
    display: flex;
    justify-content: space-between;
    gap: 10px; 
    flex-wrap: wrap; 
}

.logout-container {
  display: flex;
  justify-content: center;
}

#logout-sessions {
  width: 1.5rem; 
  height: 1.5rem; 
}