/*CSS for the Login Page*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: > 0.01%,last 100 versions,Firefox ESR,not dead
*/

body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    -moz-box-orient: vertical !important;
    -moz-box-direction: normal !important;
    flex-direction: column !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    gap: var(--space-m);
    height: 100vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    background-image: url("/images/Hags-Texture-Dark-Green.png");
    background-color: var(--primary-color);
}

#LoginForm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    gap: var(--space-s);
}

.login .logo {
    padding: var(--space-s) var(--space-l);
    text-align: center;
}

.login .content {
    width: 65vw;
    padding: var(--space-s) var(--space-l);
    /*margin-block-end: var(--space-mega);*/
    -webkit-box-shadow: var(--shadow-primary-color-elevation-low);
    -moz-box-shadow: var(--shadow-primary-color-elevation-low);
    box-shadow: var(--shadow-primary-color-elevation-low);
    background: var(--widget-background);
    /*background: var(--secondary-accent-color-glass);*/
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
    backdrop-filter: var(--box-backdrop-filter-glass);
    border: var(--box-backdrop-border-glass);
}

    .login .content:hover {
        -webkit-transition: var(--general-transition);
        -o-transition: var(--general-transition);
        -moz-transition: var(--general-transition);
        transition: var(--general-transition);
        -webkit-box-shadow: var(--shadow-primary-accent-color-elevation-medium);
        -moz-box-shadow: var(--shadow-primary-accent-color-elevation-medium);
        box-shadow: var(--shadow-primary-accent-color-elevation-medium);
        backdrop-filter: var(--hover-backdrop-filter-glass);
    }

    .login .content hr {
        margin: 0px 0px 40px 0px;
        border: 0;
        border-top: 2px dotted var(--primary-color);
    }

    .login .content .input-icon {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        border: var(--ternary-accent-color-border);
        gap: var(--space-s);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-flow: row nowrap;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        align-items: center;
        background-color: var(--general-background);
        -webkit-transition: var(--general-transition);
        -o-transition: var(--general-transition);
        -moz-transition: var(--general-transition);
        transition: var(--general-transition);
    }

        .login .content .input-icon:has(> .form-control:hover),
        .login .content .input-icon:has(> .form-control:focus-visible),
        .login .content .input-icon:focus,
        .login .content .input-icon:focus-within,
        .login .content .input-icon:focus-visible {
            border: var(--primary-color-border);
            outline: none;
            -webkit-box-shadow: var(--shadow-primary-accent-color-elevation-low);
            -moz-box-shadow: var(--shadow-primary-accent-color-elevation-low);
            box-shadow: var(--shadow-primary-accent-color-elevation-low);
            -webkit-transition: var(--general-transition);
            -o-transition: var(--general-transition);
            -moz-transition: var(--general-transition);
            transition: var(--general-transition);
        }

            .login .content .input-icon:has(> .form-control:hover) i,
            .login .content .input-icon:has(> .form-control:focus-visible) i,
            .login .content .input-icon:focus i,
            .login .content .input-icon:focus-within i,
            .login .content .input-icon:focus-visible i {
                color: var(--primary-color);
                -webkit-transition: var(--general-transition);
                -o-transition: var(--general-transition);
                -moz-transition: var(--general-transition);
                transition: var(--general-transition);
            }

        .login .content .input-icon i {
            padding-inline-start: var(--space-s);
            color: var(--secondary-color);
        }

            .login .content .input-icon i.fa-eye,
            .login .content .input-icon i.fa-eye-slash {
                padding-inline-end: var(--space-s);
            }

        .login .content .input-icon.error {
            -webkit-box-shadow: var(--shadow-error-elevation-low) !important;
            -moz-box-shadow: var(--shadow-error-elevation-low) !important;
            box-shadow: var(--shadow-error-elevation-low) !important;
        }

            .login .content .input-icon.error i {
                color: var(--error-color) !important;
            }

    .login .content h3 {
        color: var(--primary-acent-text-color);
    }

    .login .content h4 {
        color: #000;
    }

    .login .content p,
    .login .content label {
        color: var(--primary-accent-text-color);
        margin: unset;
    }

    .login .content .login-form,
    .login .content .forget-form {
        padding: unset;
        margin: unset;
    }

    .login .content .form-control {
        -webkit-box-shadow: var(--browser-auto-fill-fix) !important;
        border: unset !important;
        -webkit-border-radius: var(--border-radius-small) !important;
        -moz-border-radius: var(--border-radius-small) !important;
        border-radius: var(--border-radius-small) !important;
        background-clip: content-box !important;
        padding-inline-start: unset !important;
        -webkit-transition: var(--general-transition);
        -o-transition: var(--general-transition);
        -moz-transition: var(--general-transition);
        transition: var(--general-transition);
    }

        .login .content .form-control:focus-visible {
            outline: 0;
        }

    .login .content .forget-form {
        display: none;
    }

    .login .content .register-form {
        display: none;
    }

    .login .content .form-actions {
        background-color: var(--transparent-background);
        clear: both;
        border: unset;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -moz-box-pack: end;
        justify-content: flex-end;
        gap: var(--space-s);
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        align-items: center;
    }

        .login .content .form-actions .button-primary:hover i {
            color: var(--secondary-text-color) !important;
            -webkit-transition: var(--general-transition);
            -o-transition: var(--general-transition);
            -moz-transition: var(--general-transition);
            transition: var(--general-transition);
        }

.remember-me {
    -webkit-box-pack: start !important;
    -webkit-justify-content: flex-start !important;
    -moz-box-pack: start !important;
    justify-content: flex-start !important;
}

.login .content .form-actions .checkbox {
    margin-inline-start: 0;
    margin-block-start: unset;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-flow: row wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    gap: var(--space-3xs);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    font-weight: -webkit-calc(var(--app-font-weight) * 1.5);
    font-weight: -moz-calc(var(--app-font-weight) * 1.5);
    font-weight: calc(var(--app-font-weight) * 1.5);
    -webkit-align-content: stretch;
    align-content: stretch;
}

.login .content .forget-form .form-actions {
    border: 0;
    margin-block-end: 0;
    padding-block-end: 20px;
}

.login .content .register-form .form-actions {
    border: 0;
    margin-block-end: 0;
    padding-block-end: 0px;
}

.login .content .form-actions .btn {
    margin-block-start: 1px;
}

.login .content .forgot-password {
    font-weight: -webkit-calc(var(--app-font-weight) * 1.5);
    font-weight: -moz-calc(var(--app-font-weight) * 1.5);
    font-weight: calc(var(--app-font-weight) * 1.5);
}

#forgot-password:focus-visible,
#forgot-password:hover {
    color: var(--primary-accent-text-color) !important;
    outline: unset;
    display: inline-block;
}

.login .content .create-account {
    border-top: 1px dotted #eee;
    padding-block-start: 10px;
    margin-block-start: 15px;
}

    .login .content .create-account a {
        display: inline-block;
        margin-block-start: 5px;
    }

.login .content .select2-container i {
    display: inline-block;
    position: relative;
    color: #ccc;
    z-index: 1;
    top: 1px;
    margin: 4px 4px 0px 3px;
    width: 16px;
    height: 16px;
    font-size: 16px;
    text-align: center;
}

.login .content .has-error .select2-container i {
    color: #b94a48;
}

.login .content .select2-container a span {
    font-size: 13px;
}

    .login .content .select2-container a span img {
        margin-inline-start: 4px;
    }

.windows-logo {
    -webkit-transform: perspective(4em) rotateY(-30deg) scale(0.9);
    -moz-transform: perspective(4em) rotateY(-30deg) scale(0.9);
    transform: perspective(4em) rotateY(-30deg) scale(0.9);
    height: 4.5ex;
    width: 6.5ex;
    min-height: auto;
    font-size: calc(var(--app-font-size) * 2) !important;
}

    .windows-logo > .windows-logo-squares {
        position: absolute;
        top: 0;
        left: 0;
        height: 2ex;
        width: 2.75ex;
        background: var(--primary-text-color);
        -webkit-border-radius: unset !important;
        -moz-border-radius: unset !important;
        border-radius: unset !important;
        -webkit-transition: var(--general-transition);
        -o-transition: var(--general-transition);
        -moz-transition: var(--general-transition);
        transition: var(--general-transition);
    }

        .windows-logo > .windows-logo-squares:nth-child(2) {
            top: 0;
            left: 48%;
        }

        .windows-logo > .windows-logo-squares:nth-child(3) {
            top: 49%;
            left: 0;
        }

        .windows-logo > .windows-logo-squares:nth-child(4) {
            top: 49%;
            left: 48%;
        }

#EntraAuth {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: var(--general-transition);
    -o-transition: var(--general-transition);
    -moz-transition: var(--general-transition);
    transition: var(--general-transition);
}

    #EntraAuth:has(> a:focus-visible),
    #EntraAuth:hover {
        -webkit-transform: var(--popup-hover) !important;
        -moz-transform: var(--popup-hover) !important;
        -o-transform: var(--popup-hover) !important;
        transform: var(--popup-hover) !important;
    }

        #EntraAuth:has(> a:focus-visible),
        #EntraAuth > a:focus-visible,
        #EntraAuth:hover > a {
            border: var(--primary-accent-color-border);
        }

            #EntraAuth:has(> a:focus-visible) .windows-logo-squares,
            #EntraAuth:hover .windows-logo-squares {
                background: var(--secondary-text-color);
            }

    #EntraAuth > a {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -moz-box-flex: 1;
        flex: 1 1 auto;
        border: var(--primary-color-border);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-align-content: center;
        align-content: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        align-items: center;
        gap: var(--space-s);
        -webkit-transition: var(--general-transition);
        -o-transition: var(--general-transition);
        -moz-transition: var(--general-transition);
        transition: var(--general-transition);
        -webkit-border-radius: var(--border-radius-button) !important;
        -moz-border-radius: var(--border-radius-button) !important;
        border-radius: var(--border-radius-button) !important;
        padding: var(--space-2xs) var(--space-s) !important;
        -webkit-transition: var(--general-transition);
        -o-transition: var(--general-transition);
        -moz-transition: var(--general-transition);
        transition: var(--general-transition);
    }

.copyright {
    color: var(--primary-text-color);
}


/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {
    .login .logo {
        margin-block-start: 10px;
    }

    .login .content {
        padding: 30px;
        width: 80vw;
        margin-block-end: unset;
    }

        .login .content h3 {
            font-size: 22px;
        }

    .login .checkbox {
        font-size: 13px;
    }

    .btn {
        padding: 7px 10px;
    }
}

form [action*='/updatepassword'],
form#UpdatePassword,
form.UpdatePassword,
form:has(> .update-password-obj) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-flow: column nowrap;
    gap: var(--space-s);
}

    form[action*='/updatepassword'] .control-label,
    form.UpdatePassword .control-label,
    form#UpdatePassword .control-label,
    form:has(> .update-password-obj) .control-label {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -moz-box-align: stretch;
        align-items: stretch;
    }

.form-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    gap: var(--space-2xs);
}

.validation-summary-errors {
    margin-block-start: var(--space-s);
}

    .validation-summary-errors ul {
        padding: unset;
        margin-block-end: unset;
        margin-block-end: var(--space-s);
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);
    }

        .validation-summary-errors ul li {
            list-style-type: none;
            color: var(--error-color);
        }