@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");

.heading-1 {
  font-family: var(--setting-heading_1_font_family);
  font-weight: var(--setting-heading_1_font_weight);
  /* font-size: var(--setting-heading_1_font_size); */
  font-style: var(--setting-heading_1_font_style);
}

.heading-2 {
  font-family: var(--setting-heading_2_font_family);
  font-weight: var(--setting-heading_2_font_weight);
  /* font-size: var(--setting-heading_2_font_size); */
  font-style: var(--setting-heading_2_font_style);
}

.paragraph-1 {
  font-family: var(--setting-paragraph_1_font_family);
  font-weight: var(--setting-paragraph_1_font_weight);
  /* font-size: var(--setting-paragraph_1_font_size); */
  font-style: var(--setting-paragraph_1_font_style);
}

.paragraph-2 {
  font-family: var(--setting-paragraph_2_font_family);
  font-weight: var(--setting-paragraph_2_font_weight);
  /* font-size: var(--setting-paragraph_2_font_size); */
  font-style: var(--setting-paragraph_2_font_style);
}

button {
  font-family: var(--setting-button_text_font_family);
  font-weight: var(--setting-button_text_font_weight);
  /* font-size: var(--setting-button_text_font_size); */
  font-style: var(--setting-button_text_font_style);
}

.input-field {
  background-color: var(--input_field_background_color);
  color: var(--input_field_text_color);
  border-color: var(--input_field_border_color, transparent);
  border-style: solid;
  border-radius: 1vmin;
  border-width: 1px;
}

.input-field.error {
  border-color: var(--input_field_error_border_color, #fe4a67);
  border-width: 2px;
}

.primaryButton {
  background-color: var(--primary_button_background_color);
  color: var(--primary_button_text_color);
  border-color: var(--primary_button_border_color);
  border-radius: var(--setting-primary_button_shape);
}

.secondaryButton {
  background-color: var(--secondary_button_background_color);
  color: var(--secondary_button_text_color);
  border-color: var(--secondary_button_border_color);
  border-radius: var(--setting-secondary_button_shape);
}

.dangerButton {
  background-color: var(--danger_button_background_color);
  color: var(--danger_button_text_color);
  border-color: var(--danger_button_border_color);
  border-radius: var(--setting-danger_button_shape);
}

.tertiaryButton {
  background-color: var(--tertiary_button_background_color);
  color: var(--tertiary_button_text_color);
  border-color: var(--tertiary_button_border_color);
  border-radius: var(--setting-tertiary_button_shape);
}

.modalContainer {
  background-color: var(--modal_background_color);
  color: var(--modal_text_color);
}

.modalContainer .primaryButton {
  background-color: var(--modal_primary_button_background_color);
  color: var(--modal_primary_button_text_color);
  border-color: var(--modal_primary_button_border_color);
  border-radius: var(--setting-modal_primary_button_shape);
}

.modalContainer .secondaryButton {
  background-color: var(--modal_secondary_button_background_color);
  color: var(--modal_secondary_button_text_color);
  border-color: var(--modal_secondary_button_border_color);
  border-radius: var(--setting-modal_secondary_button_shape);
}

.largeLogo {
  max-width: calc(26vmin * var(--setting-logo_size, 0.3));
  max-height: calc(26vmin * var(--setting-logo_size, 0.3));
}

.smallLogo {
  max-width: calc(26vmin * var(--setting-logo_size, 0.3));
  max-height: calc(26vmin * var(--setting-logo_size, 0.3));
}

@media (max-aspect-ratio: 1) {
  .largeLogo {
    max-width: calc(26vmax * var(--setting-logo_size, 0.3));
    max-height: calc(26vmax * var(--setting-logo_size, 0.3));
  }

  .smallLogo {
    max-width: calc(26vmax * var(--setting-logo_size, 0.3));
    max-height: calc(26vmax * var(--setting-logo_size, 0.3));
  }
}

/* System */
#system,
#system * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#system {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  background-color: var(--page_background_color);
  color: var(--page_text_color);
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: fit-content;
}

#system .card {
  background-color: var(--modal_background_color);
  color: var(--modal_text_color);
  width: 600px;
  padding: 50px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 20px;
  position: relative;
}

#system .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

#system .heading-1 {
  font-size: 30px;
  line-height: 1;
  margin: 0;
}

#system #password-reset-form,
#system .login-form-method,
#system form,
#system .password-reset-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

#system form .nav {
  list-style: none;
}

#system .form-floating~button {
  display: none;
}

#system form button {
  width: 100%;
  height: 80px;
  font-size: 30px;
}

#system label {
  font-family: var(--setting-paragraph_1_font_family);
  font-weight: var(--setting-paragraph_1_font_weight);
  /* font-size: var(--setting-paragraph_1_font_size); */
  font-style: var(--setting-paragraph_1_font_style);
  display: block;
  margin-bottom: 5px;
}

#system button {
  font-family: var(--setting-button_text_font_family);
  font-weight: var(--setting-button_text_font_weight);
  /* font-size: var(--setting-button_text_font_size); */
  font-style: var(--setting-button_text_font_style);
  border: 1px solid;
  font-size: calc(0.5rem + 1.179vmin);
  padding: 5px 20px;
  cursor: pointer;
  line-height: 1;
}

#system input {
  background-color: var(--input_field_background_color);
  color: var(--input_field_text_color);
  border: 1px solid var(--input_field_border_color, transparent);
  font-size: 1.25rem;
  padding: 15px;
  border-radius: 8px;
  width: 100%;
}

#system .text-danger {
  color: #fe4a67;
}

#system .reader-otp-container {
  position: static;
}

#system .card .reader-otp-container #back-to-login-link {
  top: 50px;
  left: 50px;
  width: 50px;
  background-color: var(--secondary_button_background_color);
  color: var(--secondary_button_text_color);
  border: 1px solid var(--secondary_button_border_color);
  border-radius: 50%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#system .card .reader-otp-container #back-to-login-link svg {
  transform: scale(1.25);
}

#system .card .reader-otp-container #back-to-login-link:hover {
  opacity: 1;
}

#system #login-submit-btn,
#system #submit-reset-btn,
#system #request-new-code-btn,
#system #reset-password-btn,
#system #reader-otp-submit-btn {
  background-color: var(--primary_button_background_color);
  color: var(--primary_button_text_color);
  border: 1px solid var(--primary_button_border_color);
  border-radius: var(--setting-primary_button_shape);
  outline: none;
  cursor: pointer;
}

#system #reader-otp-btn {
  background-color: var(--secondary_button_background_color);
  color: var(--secondary_button_text_color);
  border: 1px solid var(--secondary_button_border_color);
  border-radius: var(--setting-secondary_button_shape);
  outline: none;
  cursor: pointer;
}

#system .login-form-method button:first-of-type {
  margin-top: 30px;
}

#system a,
#system #portal-login-form .trailing {
  color: inherit;
}

#system .position-relative {
  position: relative;
}

#forgot-password-link {
  margin: auto;
}

#system img {
  max-width: calc(26vmin * var(--setting-logo_size, 0.3));
  max-height: calc(26vmin * var(--setting-logo_size, 0.3));
  width: 100%;
}

@media (max-height: 800px) {
  #system .card {
    gap: 25px;
  }
  #system .header {
    gap: 15px;
  }
  #system form button {
    height: 50px;
    font-size: 20px;
  }
  #system .login-form-method button:first-of-type {
    margin-top: 10px;
  }
}

@media (max-width: 500px) {
  #system img {
    max-width: calc(26vmax * var(--setting-logo_size, 0.3));
    max-height: calc(26vmax * var(--setting-logo_size, 0.3));
  }

  #system .card {
    padding: 20px;
  }
}