@import "./settings/settings.css";

html, body {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    transition-duration: var(--auth-transition-duration);
    transition-timing-function: ease-out;
    font-size: var(--auth-default-font-size);
}

body {
    background-color: var(--auth-body-bg-color);
}

.auth {
    background-color: var(--auth-bg-color);
}

.my-label {
    font-size: var(--auth-default-font-size);
    padding-left: var(--auth-default-padding);
    font-weight: normal;
}

.my-text-link {
    padding-left: var(--auth-small-padding);
    font-size: var(--auth-small-font-size);
}

.my-form-check {
    margin-left: var(--auth-default-padding);
    padding-left: var(--auth-default-padding);
}

.remember-me-bg {
    background-color: var(--auth-gray-color);
}

.validation-summary-errors{
    padding-left: var(--auth-default-padding);
}

.validation-summary-errors ul {
    font-size: var(--auth-large-font-size);
    color: var(--auth-validation-error-color);
    list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="8" height="8">');
}

.validation-summary-errors ul li {
    font-size: var(--auth-tiny-font-size);
    padding-left: var(--auth-small-padding);
    align-items: center;
}

.my-submit-button {
    font-size: var(--auth-submit-button-font-size);
    height: var(--auth-height);
    margin: var(--auth-large-padding) var(--auth-default-padding);
    padding: 0;
    border-radius: var(--auth-radius);
}

.password-toggle-icon {
    width: 0;
    height: 0;
    position: relative;
    top: var(--auth-height-half);
    right: -92%;
    cursor: pointer;
}

.password-toggle-icon i {
    color: var(--auth-password-toggle-color);
    transition: color 0.3s ease-in-out;
}

.password-toggle-icon i:hover {
    color: var(--auth-password-toggle-hover-color);
}

.my-form-group {
    display: flex;
    flex-direction: column;
    margin: var(--auth-large-padding) var(--auth-default-padding) var(--auth-small-margin);
}

.my-form-control {
    display: flex;
    padding: var(--auth-default-padding) 45px var(--auth-default-padding) var(--auth-default-padding);
    font-size: var(--auth-form-control-font-size);
    height: var(--auth-height);
    background-color: var(--auth-form-bg-color);
    border-radius: var(--auth-radius);
    border: 2px solid var(--auth-form-border-color);
}

label {
    font-weight: bold;
}