@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);
}

.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 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    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;
    gap: 4cqmin;
    flex-direction: column;
}

#system img {
    max-width: 10cqmin;
    max-height: 10cqmin;
}

#system .heading-1 {
    font-size: 4cqmin;
    text-align: center;
}


#system #password-reset-form,
#system .login-form-method,
#system form,
#system .password-reset-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

#system form>* {
    margin-bottom: 10px;
}

#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: 400px;
    max-width: calc(100vw - 40px);
}

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

#system #login-submit-btn,
#system #submit-reset-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;
    margin-top: 10px;
}

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

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