#j1-frontend-app {
  padding: 6.875rem 0;
  @media screen and (max-width: 767px) {
    padding: 100px 0 32px;
  }
}

.j1-app-title {
  width: 100%;
  padding: 1.25rem;
  border-radius: 0.3125rem;
  background: #ecf4fd;
  margin: 0 0 1.25rem;
  column-count: 2;
  column-gap: 2rem;
  @media screen and (max-width: 767px) {
    column-count: 1;
    background: transparent;
    padding: 0;
  }
  h1 {
    font-weight: 400;
    margin: 0 0 1rem;

    strong {
      font-weight: 600;
    }
  }

  p:not(:last-child) {
    margin: 0 0 0.75rem;
  }
}

.dummy-button {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  width: 12.5rem;
  font-size: 1.125rem;
  z-index: 30;
  background: #003366;
  color: #fff;
  border: none;
  padding: 1.25rem;
}

.j1-application {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  font-size: 1.125rem;

  .j1-application__wrapper {
    width: 100%;
    max-width: 54.3125rem;
    padding: 1rem;
    border-radius: 0.3125rem;
    background: #ecf4fd;
    @media screen and (max-width: 767px) {
      background: transparent;
      padding: 0;
    }
  }

  .j1-application__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #003366;
    border-radius: 0.3125rem;
    color: #fff;
    padding: 1.25rem 0.625rem;
    margin: 0 0 1rem;
    @media screen and (max-width: 1024px) {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    .j1-application__header-title--back {
      display: none;
      @media screen and (max-width: 767) {
        display: inline-block;
        margin-right: 8px;
      }
    }

    .j1-application__header-progress {
      width: 100%;
      max-width: 24.6875rem;
      font-size: 1rem;
      @media screen and (max-width: 1024px) {
        max-width: 100%;
      }

      .j1-application__header-progress--bar {
        width: 100%;
        background: rgba(255, 255, 255, 0.38);
        height: 0.25rem;
        border-radius: 0.25rem;
        position: relative;
        @media screen and (max-width: 1024px) {
          margin-bottom: 2px;
        }

        span {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          background: #ff3b30;
          display: block;
          transition: 0.3s ease;
          border-radius: 0.25rem;
        }
      }
    }
  }

  .j1-application__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 0 0 1rem;
    @media screen and (max-width: 1024px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media screen and (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
    }

    .j1-application__steps-item {
      padding: 0.625rem;
      border-radius: 0.3125rem;
      background: #fff;
      color: #003366;
      font-size: 1rem;
      line-height: 150%;
      border: none;
      text-align: start;
      transition: 0.3s ease;
      opacity: 0.8;
      @media screen and (max-width: 767px) {
        background: #ecf4fd;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        padding: 18px 10px;
      }

      svg {
        width: 1.5rem;
        height: 1.5rem;
        margin: 0 0 0.3125rem;
        &.pending {
          path:first-child {
            fill: #ffbb33;
          }
        }
        path {
          fill: #003366;
          transition: 0.3s ease;
        }
      }

      &.active {
        @media screen and (min-width: 767px) {
          box-shadow: 0 0 0 0.1875rem #002f5e2b;
          background: #003366;
          color: #fff;
          opacity: 1;
          svg {
            &.pending {
              path:first-child {
                fill: #ffbb33;
              }
            }
            path {
              fill: #fff;
            }
          }
        }
      }

      .j1-application__steps-item--icons {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .j1-application__steps-item--icons---check {
          @media screen and (max-width: 767px) {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
  .j1-application__dropdowns {
    @media screen and (max-width: 767px) {
    }
    .j1-application__dropdowns-step {
      display: none;
      padding: 24px 16px;
      border-radius: 5px;
      background: #003366;
      color: #fff;
      border: none;
      width: 100%;
      margin: 0 0 22px;
      align-items: center;
      gap: 8px;
      font-size: 1rem;
      font-weight: 600;
      .j1-application__dropdowns-step--icon {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      svg {
        path {
          fill: #fff;
        }
      }

      @media screen and (max-width: 767px) {
        display: flex;
      }
    }
    .j1-application__dropdowns-btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 40px;
      gap: 16px;
      @media screen and (max-width: 767px) {
        margin-top: 22px;
      }
      .btn {
        @media screen and (max-width: 520px) {
          max-width: 100%;
          width: 100%;
        }
      }
      .btn:disabled {
        opacity: 0;
        @media screen and (max-width: 520px) {
          display: none;
        }
      }
    }
  }
}
.j1-input {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  p {
    margin: 0 0 0.375rem;
  }
  input {
    display: block;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(0, 51, 102, 0.28);
    transition: 0.5s ease;
    border-radius: 5px;
    width: 100%;
    font-size: 1rem;
    height: 2.5rem;
  }

  input:focus {
    border: 1px solid rgb(0, 51, 102);
  }

  .j1-input-error {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #d32f2f;
  }
}

.j1-input.has-error input {
  border-color: #d32f2f;
}
.j1-select {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  position: relative;
  cursor: pointer;
  > p {
    margin: 0 0 6px;
  }
  .j1-select__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(0, 51, 102, 0.28);
    transition: 0.5s ease;
    border-radius: 5px;

    .j1-select__title-arrow {
      width: 0.4375rem;
      height: auto;
      transition: 0.5s ease;
      &.active {
        transform: rotate(180deg);
      }
    }
  }
  input {
    display: block;
    width: 100%;
    border: none;
    font-size: 1rem;
    cursor: pointer;
  }

  .j1-select__options {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    transform-origin: top;
    transform: translateY(100%);
    max-height: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    transition: 0.5s ease;
    z-index: 2;

    &.active {
      overflow: auto;
      max-height: 320px;
      border: 1px solid rgb(0, 51, 102);
    }
    p {
      padding: 0.875rem 0.375rem;
      transition: 0.5s ease;
      &.active {
        background: rgba(0, 51, 102, 0.15);
      }
    }
  }
}
.j1-phone {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  > p {
    margin: 0 0 0.375rem;
  }

  .phone-input-wrapper {
    display: flex;
    border: 1px solid rgba(0, 51, 102, 0.28);
    border-radius: 5px;
    height: 2.5rem;
  }

  .phone-code-select {
    width: 4.125rem;
    padding: 0.5rem 0.75rem;
    background: rgba(204, 213, 223, 0.22);
    border: none;
    font-size: 1rem;
  }

  .phone-input-wrapper input {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
}
.j1-checkbox {
  width: 100%;
  p {
    margin: 0 0 0.5rem;
  }
  .j1-checkbox__options {
    display: flex;
    align-items: center;
    gap: 1rem;
    label {
      font-size: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      &:has(input:checked) {
        .j1-checkbox__options-mark {
          border-color: rgb(0, 51, 102);
          svg {
            opacity: 1;
          }
        }
      }
    }
    input {
      display: none;
    }
    .j1-checkbox__options-mark {
      width: 1.25rem;
      height: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      border: 1px solid rgba(0, 51, 102, 0.2);
      transition: 0.5s ease;

      svg {
        opacity: 0;
        transition: 0.5s ease;
        width: 0.5rem;
        height: auto;
      }
    }
  }
}
.j1-visa {
  &.active {
    grid-column: span 2;
  }
  .j1-add-visa {
    display: none;
    margin-top: 24px;
    padding-bottom: 32px;
    border-bottom: rgba(0, 51, 102, 0.3) 1px solid;
    &:last-child {
      margin-bottom: 16px;
    }
    &.active {
      display: block;
    }
    .j1-add-visa__title {
      color: #ff3b30;
      font-weight: 500;
      margin: 0 0 8px;
    }
    .j1-add-visa__fields {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px 10px;
      @media screen and (max-width: 1024px) {
        display: flex;
        flex-direction: column;
      }
    }
    .j1-add-visa__btn {
      font-family: "Oswald";
      padding: 0.5rem 0.875rem;
      background: #ff3b30;
      border-radius: 5px;
      border: none;
      font-size: 1rem;
      color: #fff;
      display: flex;
      align-items: center;
      height: 2.5rem;
      align-self: flex-end;
      max-width: fit-content;
      &.delete {
        background: transparent;
        color: #ff3b30;
        border: 1.5px solid #ff3b30;
      }
    }
  }
  .j1-add-visa__btns {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 16px;
  }
}
.j1-number-increment {
  display: block;
  width: 100%;
  color: #003366;
  p {
    margin: 0 0 6px;
  }
  .j1-number-increment__controls {
    border: 1px solid rgba(0, 51, 102, 0.2);
    max-width: fit-content;
    display: flex;
    align-items: center;
    border-radius: 5px;
    button {
      background: transparent;
      border: none;
      height: 2.5rem;
      width: 2.5rem;
      font-weight: 600;
      font-size: 1rem;
    }
    input {
      border: none;
      width: 2.5rem;
      text-align: center;
      font-weight: 600;
      font-size: 1.125rem;
    }
  }
  .j1-number-increment__input::-webkit-outer-spin-button,
  .j1-number-increment__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}
.j1-textarea {
  display: block;
  width: 100%;
  grid-column: span 2;
  p {
    margin: 0 0 6px;
  }
  textarea {
    display: block;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(0, 51, 102, 0.28);
    transition: 0.5s ease;
    border-radius: 5px;
    width: 100%;
    font-size: 1rem;
    height: 15rem;
    resize: vertical;
  }

  textarea:focus {
    border: 1px solid rgb(0, 51, 102);
  }
  span {
    opacity: 0.5;
    display: block;
    margin: 5px 0 0 auto;
    max-width: fit-content;
  }
  .j1-input-error {
    display: block;
    margin: 4px 0 0 !important;
    font-size: 13px;
    color: #d32f2f;
    opacity: 1 !important;
  }
}

.j1-input.has-error input {
  border-color: #d32f2f;
}
.j1-work-experience {
  grid-column: span 2;
  .j1-work-experience__content {
    margin: 0 0 1.5rem;
    p {
      font-weight: 500;
      &:not(:last-child) {
        margin: 0 0 0.5rem;
      }
    }
    ul {
      padding: 0 0 0 1.25rem;
      margin: 0 0 0.5rem;
      li {
        list-style-type: disc;
        &:not(:last-child) {
          margin: 0 0 6px;
        }
      }
    }
  }
  .j1-add-work-experience {
    &:last-child {
      margin-bottom: 1rem;
    }
    &:not(:last-child) {
      padding-bottom: 2rem;
      margin-bottom: 2rem;
      border-bottom: rgba(0, 51, 102, 0.3) 1px solid;
    }
    .j1-add-work-experience__title {
      color: #ff3b30;
      font-weight: 500;
      font-size: 1.125rem;
      margin: 0 0 0.5rem;
    }
    .j1-add-work-experience__fields {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem 0.625rem;
      @media screen and (max-width: 1024px) {
        display: flex;
        flex-direction: column;
      }
    }
    .j1-add-work-experience__btn {
      font-family: "Oswald";
      padding: 0.5rem 0.875rem;
      background: #ff3b30;
      border-radius: 5px;
      border: none;
      font-size: 1rem;
      color: #fff;
      display: flex;
      align-items: center;
      height: 2.5rem;
      max-width: fit-content;
      &.delete {
        background: transparent;
        color: #ff3b30;
        border: 1.5px solid #ff3b30;
      }
    }
  }
  .j1-add-work-experience__btns {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
  }
}
.j1-input .j1-address-autocomplete,
.j1-input gmp-place-autocomplete {
  width: 100%;
  display: block;
  background-color: #ffffff !important;
  color-scheme: light;
  color: rgb(0, 51, 102);
  border-radius: 5px;
  border: 1px solid rgba(0, 51, 102, 0.28);
  height: 40px;
}

.j1-input gmp-place-autocomplete::part(input) {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0.625rem 0.875rem;
  border: none !important;
  border-radius: 5px;
  font-size: 1rem;
  font-family: inherit;
  background-color: #ffffff !important;
  color: rgb(0, 51, 102) !important;
  box-sizing: border-box;
  transition: 0.5s ease;
  outline: none;
  box-shadow: none;
  overflow: hidden;
}

.j1-input gmp-place-autocomplete::part(input):focus {
  border: 1px solid rgb(0, 51, 102);
  background-color: #ffffff !important;
  color: rgb(0, 51, 102) !important;
}

.j1-input gmp-place-autocomplete::part(focus-ring) {
  display: none;
}

.j1-input.has-error gmp-place-autocomplete::part(input) {
  border-color: #d32f2f;
  background-color: #ffffff !important;
  color: rgb(0, 51, 102) !important;
}

.j1-input gmp-place-autocomplete::part(prediction-list) {
  border-radius: 5px;
  border: 1px solid rgba(0, 51, 102, 0.28);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: 2px;
  background-color: #ffffff;
  color: rgb(0, 51, 102);
}
.j1-education {
  grid-column: span 2;

  .j1-add-education {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
    &:last-child {
      margin-bottom: 16px;
    }
    &:not(:last-child) {
      padding-bottom: 32px;
      margin-bottom: 32px;
      border-bottom: rgba(0, 51, 102, 0.3) 1px solid;
    }
    @media screen and (max-width: 1024px) {
      display: flex;
      flex-direction: column;
    }
  }
  .j1-add-education__btn {
    font-family: "Oswald";
    padding: 0.5rem 0.875rem;
    background: #ff3b30;
    border-radius: 5px;
    border: none;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    height: 2.5rem;
    align-self: flex-end;
    max-width: fit-content;
    &.delete {
      background: transparent;
      color: #ff3b30;
      border: 1.5px solid #ff3b30;
    }
  }
  .j1-add-education__btns {
    grid-column: span 2;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    @media screen and (max-width: 1024px) {
      flex-direction: column-reverse;
    }
  }
}
.j1-file-input {
  grid-column: span 2;
  .j1-file-input__content {
    font-size: 1rem;
    line-height: 150%;
    span {
      font-weight: 500;
    }
    p {
      &:not(:last-child) {
        margin: 0 0 1rem;
      }
      &.note {
        color: #ff3b30;
        font-weight: 600;
      }
    }
    ul {
      padding: 0 0 0 1.25rem;
      li {
        list-style-type: disc;
        &:not(:last-child) {
          margin: 0 0 6px;
        }
      }
      &:not(:last-child) {
        margin: 0 0 1rem;
      }
    }
    a {
      text-decoration: underline;
      color: #003366;
    }
    .semibold {
      font-weight: 600;
    }
  }
  .j1-file-input__btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    background: #ff3b30;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    width: fit-content;
    font-family: "Oswald";
    margin-top: 2.5rem;

    @media screen and (max-width: 520px) {
      width: 100%;
      justify-content: center;
    }

    input {
      display: none;
    }

    svg {
      width: 1.5rem;
      height: 1.5rem;
      flex-shrink: 0;
    }
  }

  .j1-file-input__selected {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    margin-top: 0.75rem;

    span {
      word-break: break-word;
    }
  }

  .j1-file-input__remove {
    border: none;
    background: transparent;
    color: #ff3b30;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font: inherit;
  }
}
.j1-documentation {
  grid-column: span 2;
  .j1-documentation__title {
    font-size: 1rem;
    margin: 0 0 1.5rem;
  }
  .j1-documentation__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
    @media screen and (max-width: 1024px) {
      display: flex;
      flex-direction: column;
    }
  }
  .j1-documentation__input {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    .j1-documentation__input-title {
      font-size: 1rem;
      margin: 0 0 6px;
    }
    .j1-documentation__input-note {
      opacity: 0.6;
      font-size: 0.875rem;
      margin-top: 0.25rem;
      display: block;
    }
  }
  .j1-documentation__upload-wrapper {
    position: relative;
    width: 100%;
  }
  .j1-documentation__remove {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    border: 0;
    background: transparent;
    padding: 0;

    font-size: 1.375rem;
    line-height: 1;
    color: #003366;
    opacity: 0.7;
    cursor: pointer;

    transition: opacity 0.2s ease;

    &:hover {
      opacity: 1;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }
  }
  .j1-documentation__upload {
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: dashed 1px #003366;
    border-radius: 5px;
    cursor: pointer;

    .j1-documentation__upload-text {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding-right: 1.25rem;
      svg {
        width: 1rem;
        height: 1rem;
        min-width: 1rem;
        path {
          fill: #003366;
        }
      }
    }
  }
  .j1-documentation__footer {
    margin-top: 1.5rem;
    .j1-documentation__footer-link {
      font-size: 1.125rem;
      font-weight: 500;
      color: #003366;
      border-bottom: 2px solid #003366;
      svg {
        display: inline-block;
        margin-left: 0.625rem;
        width: 1.125rem;
        height: 1.125rem;
        min-width: 1.125rem;
      }
    }
    .j1-documentation__footer-note {
      font-size: 1rem;
      color: #ff3b30;
      margin-top: 1rem;
      line-height: 150%;
    }
  }

  .j1-documentation__upload-success {
    font-size: 14px;
    color: #2e7d32;
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    left: 0;
  }

  .j1-documentation__upload-success::first-letter {
    font-weight: 700;
  }
}
.j1-education-institution {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 0.625rem;
  @media screen and (max-width: 1024px) {
    display: flex;
    flex-direction: column;
  }
}
.login-form__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 22.75rem;
  margin: 0 auto;
}
.login-form__title {
  text-align: center;
  margin: 0 0 24px;
  h1 {
    margin: 0 0 24px;
    font-family: "Oswald";
  }
}
.login-form__actions {
  p {
    color: #003366;
    opacity: 0.55;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    font-size: 1rem;
    margin: 1rem 0 0;
    display: block;
    cursor: pointer;
  }
}
.login-form__footer {
  font-size: 1rem;
  margin: 1rem 0 0;
  opacity: 0.55;

  p {
    color: #003366;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    display: inline;
    cursor: pointer;
  }
}
.login-form__wrapper form {
  width: 100%;

  label {
    display: block;
    width: 100%;
    &:not(:last-of-type) {
      margin: 0 0 1rem;
    }

    p {
      margin: 0 0 0.375rem;
    }

    input {
      display: block;
      padding: 0.625rem 0.875rem;
      border: 0.0625rem solid rgba(0, 51, 102, 0.28);
      transition: 0.5s ease;
      border-radius: 0.3125rem;
      width: 100%;
      font-size: 1rem;
      height: 2.5rem;
    }

    .password-input {
      position: relative;
    }

    .password-input input {
      width: 100%;
      padding-right: 45px;
    }

    .password-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      svg {
        width: 1.25rem;
        height: 1.25rem;
        &.hide-line {
          line {
            display: none;
          }
        }
      }
    }
  }

  .btn {
    margin-top: 2.5rem;
  }
}
.pw-reset-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  backdrop-filter: blur(37.400001525878906px);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  &.show {
    opacity: 1;
    visibility: visible;
  }
  .pw-reset-modal__content {
    background: #fff;
    max-width: 22.75rem;
    border-radius: 0.3125rem;
    width: 100%;
    padding: 1.875rem;
    h2 {
      text-align: center;
      margin: 0 0 1rem;
      font-family: "Oswald";
    }
    h3 {
      text-align: center;
      font-family: "Oswald";
    }
    form {
      label {
        display: block;
        width: 100%;

        p {
          margin: 0 0 0.375rem;
        }

        input {
          display: block;
          padding: 0.625rem 0.875rem;
          border: 0.0625rem solid rgba(0, 51, 102, 0.28);
          transition: 0.5s ease;
          border-radius: 0.3125rem;
          width: 100%;
          font-size: 1rem;
          height: 2.5rem;
        }
      }
      .btn {
        margin-top: 1.25rem;
      }
    }
  }
}
.set-password__error {
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.3125rem;
  background: rgba(179, 45, 46, 0.08);
  color: #b32d2e;
  font-size: 0.95rem;
}
.auth-form {
  padding: 150px 0;
}
.j1-application-sidebar {
  width: 100%;
  max-width: 19.4375rem;
  @media screen and (max-width: 767px) {
    max-width: 100%;
  }

  .j1-application-sidebar__blue {
    width: 100%;
    background: #ecf4fd;
    border-radius: 0.625rem;
    padding: 1rem;
    h3 {
      margin: 0 0 1rem;
    }
    ul {
      li {
        width: 100%;
        padding: 1rem 0.625rem;
        cursor: pointer;
        transition: 0.3s ease;
        opacity: 0.6;
        &:not(:last-child) {
          border-bottom: 1px solid #003366;
        }
        &.active {
          @media screen and (min-width: 767px) {
            font-weight: 500;
            border-radius: 0.3125rem;
            background: #003366;
            color: #fff;
            opacity: 1;
          }
        }
      }
    }
  }
  .j1-application-sidebar__info {
    margin-top: 1rem;
    ul {
      li {
        width: 100%;
        padding: 1rem 0.625rem;
        cursor: pointer;
        transition: 0.3s ease;
        opacity: 0.6;
        border-radius: 0.3125rem;

        border: 1px solid #003366;
        &:not(:last-child) {
          margin: 0 0 1rem;
        }
        &.active {
          @media screen and (min-width: 767px) {
            font-weight: 500;
            background: #003366;
            color: #fff;
            opacity: 1;
          }
        }
      }
    }
  }
}
.j1-dropdown {
  border: 1px solid #003366;
  padding: 1rem;
  border-radius: 5px;
  transition: 0.5s ease;
  &:not(:last-child) {
    margin: 0 0 1rem;
  }
  &.active {
    background: #fff;
  }
  .j1-dropdown__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    opacity: 0.5;
    color: #003366;
    transition: 0.5s ease;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 150%;
    cursor: pointer;
    &.active {
      opacity: 1;
      .j1-dropdown__plus {
        span {
          &:first-child {
            transform: translate(-50%, -50%);
          }
        }
      }
    }
    .j1-dropdown__title-check {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      svg {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
      }
    }
  }
  .j1-dropdown__plus {
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    position: relative;
    span {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      background: #003366;
      height: 2px;
      width: 100%;
      transform: translate(-50%, -50%);
      transition: 0.5s ease;
      &:first-child {
        transform: translate(-50%, -50%) rotate(90deg);
      }
    }
  }
  .j1-dropdown__content {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s ease;
    font-size: 1rem;
    line-height: 100%;
    &.active {
      max-height: 125rem;
      overflow: visible;
    }
    .j1-dropdown__content-wrapper {
      margin-top: 1.25rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem 0.625rem;
      @media screen and (max-width: 1024px) {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
.info-tab {
  width: 100%;
  max-width: 54.3125rem;
  padding: 1rem;
  border-radius: 0.3125rem;
  background: #ecf4fd;
  @media screen and (max-width: 767px) {
    padding: 0;
    background: transparent;
  }
  .info-tab__title {
    background: #003366;
    border-radius: 0.3125rem;
    color: #fff;
    padding: 1.25rem 0.625rem;
    margin: 0 0 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 20px;
    @media screen and (max-width: 767px) {
      padding: 34px 16px;
    }
    svg {
      display: none;
      @media screen and (max-width: 767px) {
        display: block;
      }
    }
  }
  .info-tab__content {
    padding-left: 1rem;
    @media screen and (max-width: 767px) {
      padding: 0;
    }
    h3 {
      margin: 0 0 1rem;
    }
    p {
      &:not(:last-child) {
        margin: 0 0 1rem;
      }
    }
    ul {
      padding: 0 0 0 1.25rem;
      &:not(:last-child) {
        margin: 0 0 1rem;
      }
      li {
        list-style-type: disc;
        &:not(:last-child) {
          margin: 0 0 0.75rem;
        }
      }
    }
    a {
      text-decoration: underline;
      font-weight: 600;
      color: #003366;
    }
    strong {
      font-weight: 600;
    }
  }
}
.visa-info {
  width: 100%;
  max-width: 54.3125rem;
  border-radius: 0.3125rem;
  .visa-info__title {
    background: #003366;
    border-radius: 0.3125rem;
    color: #fff;
    padding: 2.125rem 1rem;
    margin: 0 0 1rem;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 20px;
    @media screen and (max-width: 767px) {
      display: flex;
    }
  }
  .visa-info__dropdown {
    border: 1px solid #003366;
    padding: 1rem;
    border-radius: 5px;
    transition: 0.5s ease;
    &:not(:last-child) {
      margin: 0 0 1rem;
    }
    &.active {
      background: #fff;
    }
    .visa-info__dropdown-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2.5rem;
      opacity: 0.5;
      color: #003366;
      transition: 0.5s ease;
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 150%;
      cursor: pointer;
      &.active {
        opacity: 1;
        .visa-info__dropdown-plus {
          span {
            &:first-child {
              transform: translate(-50%, -50%);
            }
          }
        }
      }
      .visa-info__dropdown-title--check {
        display: flex;
        align-items: center;
        gap: 8px;
        svg {
          width: 24px;
          height: 24px;
        }
      }
    }
    .visa-info__dropdown-plus {
      display: block;
      width: 20px;
      height: 20px;
      min-width: 20px;
      position: relative;
      span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        background: #003366;
        height: 2px;
        width: 100%;
        transform: translate(-50%, -50%);
        transition: 0.5s ease;
        &:first-child {
          transform: translate(-50%, -50%) rotate(90deg);
        }
      }
    }
    .visa-info__dropdown-content {
      max-height: 0;
      overflow: hidden;
      transition: 0.5s ease;
      font-size: 1rem;
      line-height: 150%;
      &.active {
        max-height: 250rem;
        overflow: visible;
      }
      .visa-info__dropdown-content--wrapper {
        margin-top: 20px;
        h2 {
          margin: 32px 0 12px;
          font-size: 1.5rem;
          line-height: 150%;
        }
        h3 {
          margin: 0 0 6px;
        }
        p {
          &:not(:last-child) {
            margin-bottom: 16px;
          }
        }
        ol {
          padding: 0 0 0 20px;
          &:not(:last-child) {
            margin: 0 0 24px;
          }
          li {
            list-style-type: decimal;
            &::marker {
              display: inline;
            }
            &:not(:last-child) {
              margin: 0 0 24px;
            }
          }
        }
        ul {
          margin-top: 16px;
          &:not(:last-child) {
            margin-bottom: 24px;
          }
          padding: 0 0 0 20px;
          li {
            list-style-type: disc;
            list-style-position: outside;
            &:not(:last-child) {
              margin: 0 0 16px;
            }
          }
        }
        strong {
          font-weight: 600;
        }
        a {
          color: #ff3b30;
          text-decoration: underline;
          word-break: break-all;
        }
        .orange-text {
          color: #ff3b30;
        }
        .download-button {
          font-weight: 500;
          font-size: 1.125rem;
          border-bottom: 2px solid #003366;

          a {
            color: #003366;
            text-decoration: none;
            &::after {
              width: 1.125rem;
              height: 1.125rem;
              background: url("data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.1562%2012.3164C16.9325%2012.3164%2016.7179%2012.4053%2016.5596%2012.5635C16.4014%2012.7218%2016.3125%2012.9364%2016.3125%2013.1602V13.8362C16.3118%2014.4927%2016.0507%2015.1221%2015.5865%2015.5863C15.1223%2016.0506%2014.4929%2016.3118%2013.8364%2016.3126H4.16355C3.50706%2016.3118%202.8777%2016.0506%202.41352%2015.5863C1.94934%2015.1221%201.68824%2014.4927%201.6875%2013.8362V13.1602C1.6875%2012.9364%201.59861%2012.7218%201.44037%2012.5635C1.28214%2012.4053%201.06753%2012.3164%200.84375%2012.3164C0.619974%2012.3164%200.405362%2012.4053%200.247129%2012.5635C0.0888948%2012.7218%200%2012.9364%200%2013.1602L0%2013.8362C0.0013024%2014.9401%200.440368%2015.9984%201.22089%2016.779C2.00142%2017.5596%203.05968%2017.9987%204.16355%2018.0001H13.8364C14.9403%2017.9987%2015.9986%2017.5596%2016.7791%2016.779C17.5596%2015.9984%2017.9987%2014.9401%2018%2013.8362V13.1602C18%2012.9364%2017.9111%2012.7218%2017.7529%2012.5635C17.5946%2012.4053%2017.38%2012.3164%2017.1562%2012.3164Z'%20fill='%23003366'/%3e%3cpath%20d='M8.15601%200.84375V11.4901L5.50312%208.83758C5.34489%208.6793%205.13027%208.59037%204.90647%208.59033C4.68267%208.5903%204.46802%208.67917%204.30974%208.8374C4.15147%208.99563%204.06253%209.21025%204.0625%209.43406C4.06247%209.65786%204.15134%209.87251%204.30957%2010.0308L8.38769%2014.1089C8.46824%2014.1895%208.56387%2014.2534%208.66914%2014.2971C8.7744%2014.3407%208.88723%2014.3631%209.00117%2014.3631C9.11511%2014.3631%209.22794%2014.3407%209.3332%2014.2971C9.43847%2014.2534%209.5341%2014.1895%209.61465%2014.1089L13.6864%2010.0336C13.8427%209.87738%2013.9315%209.66611%2013.9336%209.44516C13.9358%209.22422%2013.8512%209.01124%2013.698%208.85199C13.37%208.51133%2012.8142%208.51941%2012.4799%208.85375L9.84316%2011.4905V0.84375C9.84316%200.620035%209.75432%200.405477%209.59616%200.247253C9.438%200.0890292%209.22348%209.32148e-05%208.99976%200C8.77599%200%208.56138%200.0888948%208.40314%200.247129C8.24491%200.405362%208.15601%200.619974%208.15601%200.84375Z'%20fill='%23003366'/%3e%3c/svg%3e");
              background-size: cover;
              background-repeat: no-repeat;
              content: "";
              display: inline-block;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
.j1-advice {
  width: 100%;
  max-width: 54.3125rem;
  font-size: 1rem;
  .j1-advice__title {
    background: #003366;
    border-radius: 0.3125rem;
    color: #fff;
    padding: 2.125rem 1rem;
    margin: 0 0 1rem;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 1.25rem;
    @media screen and (max-width: 767px) {
      display: flex;
    }
  }
  .j1-advice__dropdown {
    border: 1px solid #003366;
    padding: 1rem;
    border-radius: 5px;
    transition: 0.5s ease;
    &:not(:last-child) {
      margin: 0 0 1rem;
    }
    &.active {
      background: #fff;
    }
    .j1-advice__dropdown-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2.5rem;
      opacity: 0.5;
      color: #003366;
      transition: 0.5s ease;
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 150%;
      cursor: pointer;
      &.active {
        opacity: 1;
        .j1-advice__dropdown-plus {
          span {
            &:first-child {
              transform: translate(-50%, -50%);
            }
          }
        }
      }
      .j1-advice__dropdown-title--check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        svg {
          width: 1.5rem;
          height: 1.5rem;
        }
      }
    }
    .j1-advice__dropdown-plus {
      display: block;
      width: 1.25rem;
      height: 1.25rem;
      min-width: 1.25rem;
      position: relative;
      span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        background: #003366;
        height: 2px;
        width: 100%;
        transform: translate(-50%, -50%);
        transition: 0.5s ease;
        &:first-child {
          transform: translate(-50%, -50%) rotate(90deg);
        }
      }
    }
    .j1-advice__dropdown-content {
      max-height: 0;
      overflow: hidden;
      transition: 0.5s ease;
      font-size: 1rem;
      line-height: 150%;
      &.active {
        max-height: 4000px;
        overflow: visible;
        @media screen and (max-width: 767px) {
          max-height: 5000px;
        }
      }
      .example-images {
        margin-top: 1rem;
        .example-images__content {
          margin-bottom: 1.5rem;
        }
        .example-images__grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1.5rem 1rem;
          @media screen and (max-width: 1024px) {
            grid-template-columns: repeat(2, 1fr);
          }
          .example-images__grid-image {
            display: flex;
            flex-direction: column;
            img {
              height: 13.625rem;
              width: 100%;
              object-fit: contain;
              border-radius: 5px;
            }
            p {
              font-weight: 500;
            }
          }
        }
      }
      .title-content {
        margin-top: 1.25rem;
        h2 {
          margin: 2rem 0 0.75rem;
          font-size: 1.5rem;
          line-height: 150%;
        }
        h3 {
          margin: 0 0 6px;
        }
        p {
          &:not(:last-child) {
            margin-bottom: 1rem;
          }
        }
        ol {
          padding: 0 0 0 1.25rem;
          &:not(:last-child) {
            margin: 0 0 1.5rem;
          }
          li {
            list-style-type: decimal;
            &::marker {
              display: inline;
            }
            &:not(:last-child) {
              margin: 0 0 1.5rem;
            }
          }
        }
        ul {
          margin-top: 1rem;
          &:not(:last-child) {
            margin-bottom: 1.5rem;
          }
          padding: 0 0 0 1.25rem;
          li {
            list-style-type: disc;
            list-style-position: outside;
            &:not(:last-child) {
              margin: 0 0 1rem;
            }
          }
        }
        strong {
          font-weight: 600;
        }
        a {
          color: #003366;
          text-decoration: underline;
        }
        .orange-text {
          color: #ff3b30;
        }
        .download-button {
          font-weight: 500;
          font-size: 1.125rem;
          border-bottom: 2px solid #003366;
          display: inline-block;

          a {
            color: #003366;
            text-decoration: none;
            &::after {
              width: 1.125rem;
              height: 1.125rem;
              background: url("data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.1562%2012.3164C16.9325%2012.3164%2016.7179%2012.4053%2016.5596%2012.5635C16.4014%2012.7218%2016.3125%2012.9364%2016.3125%2013.1602V13.8362C16.3118%2014.4927%2016.0507%2015.1221%2015.5865%2015.5863C15.1223%2016.0506%2014.4929%2016.3118%2013.8364%2016.3126H4.16355C3.50706%2016.3118%202.8777%2016.0506%202.41352%2015.5863C1.94934%2015.1221%201.68824%2014.4927%201.6875%2013.8362V13.1602C1.6875%2012.9364%201.59861%2012.7218%201.44037%2012.5635C1.28214%2012.4053%201.06753%2012.3164%200.84375%2012.3164C0.619974%2012.3164%200.405362%2012.4053%200.247129%2012.5635C0.0888948%2012.7218%200%2012.9364%200%2013.1602L0%2013.8362C0.0013024%2014.9401%200.440368%2015.9984%201.22089%2016.779C2.00142%2017.5596%203.05968%2017.9987%204.16355%2018.0001H13.8364C14.9403%2017.9987%2015.9986%2017.5596%2016.7791%2016.779C17.5596%2015.9984%2017.9987%2014.9401%2018%2013.8362V13.1602C18%2012.9364%2017.9111%2012.7218%2017.7529%2012.5635C17.5946%2012.4053%2017.38%2012.3164%2017.1562%2012.3164Z'%20fill='%23003366'/%3e%3cpath%20d='M8.15601%200.84375V11.4901L5.50312%208.83758C5.34489%208.6793%205.13027%208.59037%204.90647%208.59033C4.68267%208.5903%204.46802%208.67917%204.30974%208.8374C4.15147%208.99563%204.06253%209.21025%204.0625%209.43406C4.06247%209.65786%204.15134%209.87251%204.30957%2010.0308L8.38769%2014.1089C8.46824%2014.1895%208.56387%2014.2534%208.66914%2014.2971C8.7744%2014.3407%208.88723%2014.3631%209.00117%2014.3631C9.11511%2014.3631%209.22794%2014.3407%209.3332%2014.2971C9.43847%2014.2534%209.5341%2014.1895%209.61465%2014.1089L13.6864%2010.0336C13.8427%209.87738%2013.9315%209.66611%2013.9336%209.44516C13.9358%209.22422%2013.8512%209.01124%2013.698%208.85199C13.37%208.51133%2012.8142%208.51941%2012.4799%208.85375L9.84316%2011.4905V0.84375C9.84316%200.620035%209.75432%200.405477%209.59616%200.247253C9.438%200.0890292%209.22348%209.32148e-05%208.99976%200C8.77599%200%208.56138%200.0888948%208.40314%200.247129C8.24491%200.405362%208.15601%200.619974%208.15601%200.84375Z'%20fill='%23003366'/%3e%3c/svg%3e");
              background-size: cover;
              background-repeat: no-repeat;
              content: "";
              display: inline-block;
              margin-left: 10px;
            }
          }
        }
        .btn {
          margin-top: 24px;
          text-decoration: none;
          &.btn--primary {
            color: #fff;
          }
        }
      }
      .contact-info {
        .contact-info__intro {
          margin: 24px 0;
          p {
            &:not(:last-child) {
              margin: 0 0 10px;
            }
          }
          a {
            color: #003366;
            text-decoration: underline;
          }
        }
        .contact-info__content {
          padding: 26px 16px;
          background: #ecf4fd;
          border-radius: 5px;
          margin: 24px 0;
          @media screen and (max-width: 767px) {
            padding: 12px;
          }
          h2 {
            margin: 0 0 10px;
          }
          .contact-info__content-text {
            columns: 2;
            @media screen and (max-width: 767px) {
              columns: 1;
            }
            p {
              margin: 0 0 10px;
            }
            a {
              color: #003366;
            }
            .has-image {
              img {
                margin-right: 12px;
              }
            }
          }
        }
        .contact-info__list {
          .contact-info__list-item {
            &:not(:last-child) {
              margin-bottom: 2rem;
            }
            h2 {
              width: 100%;
              padding: 8px 16px;
              background: #ecf4fd;
              border-radius: 5px;
              font-size: 1.5rem;
              font-weight: 700;
              line-height: 150%;
              @media screen and (max-width: 767px) {
                background: transparent;
                padding: 0;
              }
            }
            .contact-info__list-grid {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 2rem;
              padding: 1rem;
              @media screen and (max-width: 767px) {
                grid-template-columns: repeat(1, 1fr);
                padding: 1rem 0;
              }
              .contact-info__list-grid--item {
                h3 {
                  margin-bottom: 8px;
                }
                .contact-info__list-grid--item---text {
                  p {
                    &:not(:last-child) {
                      margin: 0 0 8px;
                    }
                  }
                  img {
                    margin-right: 0.625rem;
                  }
                  a {
                    color: #003366;
                    text-decoration: none;
                  }
                  .download-button {
                    font-weight: 500;
                    font-size: 1.125rem;
                    border-bottom: 2px solid #003366;
                    display: inline-block;

                    a {
                      color: #003366;
                      text-decoration: none;
                      &::after {
                        width: 1.125rem;
                        height: 1.125rem;
                        background: url("data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.1562%2012.3164C16.9325%2012.3164%2016.7179%2012.4053%2016.5596%2012.5635C16.4014%2012.7218%2016.3125%2012.9364%2016.3125%2013.1602V13.8362C16.3118%2014.4927%2016.0507%2015.1221%2015.5865%2015.5863C15.1223%2016.0506%2014.4929%2016.3118%2013.8364%2016.3126H4.16355C3.50706%2016.3118%202.8777%2016.0506%202.41352%2015.5863C1.94934%2015.1221%201.68824%2014.4927%201.6875%2013.8362V13.1602C1.6875%2012.9364%201.59861%2012.7218%201.44037%2012.5635C1.28214%2012.4053%201.06753%2012.3164%200.84375%2012.3164C0.619974%2012.3164%200.405362%2012.4053%200.247129%2012.5635C0.0888948%2012.7218%200%2012.9364%200%2013.1602L0%2013.8362C0.0013024%2014.9401%200.440368%2015.9984%201.22089%2016.779C2.00142%2017.5596%203.05968%2017.9987%204.16355%2018.0001H13.8364C14.9403%2017.9987%2015.9986%2017.5596%2016.7791%2016.779C17.5596%2015.9984%2017.9987%2014.9401%2018%2013.8362V13.1602C18%2012.9364%2017.9111%2012.7218%2017.7529%2012.5635C17.5946%2012.4053%2017.38%2012.3164%2017.1562%2012.3164Z'%20fill='%23003366'/%3e%3cpath%20d='M8.15601%200.84375V11.4901L5.50312%208.83758C5.34489%208.6793%205.13027%208.59037%204.90647%208.59033C4.68267%208.5903%204.46802%208.67917%204.30974%208.8374C4.15147%208.99563%204.06253%209.21025%204.0625%209.43406C4.06247%209.65786%204.15134%209.87251%204.30957%2010.0308L8.38769%2014.1089C8.46824%2014.1895%208.56387%2014.2534%208.66914%2014.2971C8.7744%2014.3407%208.88723%2014.3631%209.00117%2014.3631C9.11511%2014.3631%209.22794%2014.3407%209.3332%2014.2971C9.43847%2014.2534%209.5341%2014.1895%209.61465%2014.1089L13.6864%2010.0336C13.8427%209.87738%2013.9315%209.66611%2013.9336%209.44516C13.9358%209.22422%2013.8512%209.01124%2013.698%208.85199C13.37%208.51133%2012.8142%208.51941%2012.4799%208.85375L9.84316%2011.4905V0.84375C9.84316%200.620035%209.75432%200.405477%209.59616%200.247253C9.438%200.0890292%209.22348%209.32148e-05%208.99976%200C8.77599%200%208.56138%200.0888948%208.40314%200.247129C8.24491%200.405362%208.15601%200.619974%208.15601%200.84375Z'%20fill='%23003366'/%3e%3c/svg%3e");
                        background-size: cover;
                        background-repeat: no-repeat;
                        content: "";
                        display: inline-block;
                        margin-left: 10px;
                      }
                    }
                  }
                }
              }
            }
          }
          .contact-info__list-subtext {
            padding: 0 1rem;
            @media screen and (max-width: 767px) {
              padding: 0;
            }
          }
        }
      }
    }
  }
}
