/*
* 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: flex;
    flex-direction: column !important;
    align-items: center;
    background-image: url('../../../images/myprofit-login-background.jpg');
    background-size: cover;
    font-family: var(--app-font-family-body) !important;
    gap: 2rem;
    height: 100vh;
    justify-content: center;
}

.content-form > form,
#CustomerSelectForm,
#LoginForm {
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    gap: var(--space-xl);
    align-items: stretch;
}

.container {
    display: flex;
    justify-content: center;
}

    .container:has(> .content-update-password-main) {
        width: 60%;
    }

    .container:has(> .content-forgotpassword) {
        width: 30%;
    }

.login .logo {
    padding: 2rem;
    text-align: center;
}

a:has(> .center) {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-block-end: calc(1* var(--space-xl));
    flex-direction:column;
    gap:2rem;
}

.center {
    display: flex;
    width: calc(0.5* var(--space-mega));
    height: auto;
}


.image-right {
    display: flex;
    width: calc(0.5* var(--space-mega));
    height: auto;
}

.title {
    font-size: large;
    font-weight: var(--app-font-weight-bold);
}

.xero-logo {
    width: var(--space-l);
    transform: scale(1.5);
}

.content-form {
    display: flex;
    align-items: center;
    flex: 1;
    border-right: var(--primary-color-border);
    border-radius: unset !important;
    padding: calc(1 * var(--space-3xl)) var(--space-2xl);
}

.password-instructions,
.side {
    display: flex;
    flex: 1;
    align-items: center;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    padding: calc(1 * var(--space-3xl)) var(--space-2xl);
    gap: var(--space-l);
}

    .side .dot p {
        max-width: var(--space-mega);
    }

        .side .dot p:first-of-type {
            font-family: var(--app-font-family-title);
            font-size:x-large;

        }

.content-forgotpassword,
.content-update-password-main,
.login .content {
    width: var(--space-inline-max-width);
    display: flex;
    flex-wrap: wrap;
    -webkit-box-shadow: var(--secondary-accent-color-shadow-out);
    -moz-box-shadow: var(--secondary-accent-color-shadow-out);
    box-shadow: var(--secondary-accent-color-shadow-out);
    background: white;
    transition: var(--element-transition);
    backdrop-filter: var(--box-backdrop-filter-glass);
}

    .login .content:hover, 
    .content-forgotpassword:hover, 
    .content-update-password-main:hover {
        box-shadow: unset;
    }

.content-forgotpassword,
.content-update-password-main {
    margin: 0px 0px 40px 0px;
    border: 0;
    border-top: 2px dotted var(--primary-color);
}

    .login .content .input-icon, 
    .content-forgotpassword .input-icon,
    .content-update-password-main .input-icon {
        display: flex;
        border: var(--ternary-color-border);
        gap: var(--space-s);
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        background-color: var(--general-background) !important;
        position: relative;
    }

        .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;
/*            box-shadow: var(--primary-color-shadow-out);*/
            transition: var(--element-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(--secondary-color);
                transition: var(--form-control-transition);
            }

        .login .content .input-icon i.fa-user,
        .login .content .input-icon i.fa-lock,
        .content-forgotpassword .input-icon i.fa-user,
        .content-forgotpassword .input-icon i.fa-lock {
            padding-left: 1rem;
            color: var(--primary-color) !important;
        }

        .login .content .input-icon.error, .content-forgotpassword .input-icon.error {
            box-shadow: var(--error-color-shadow-glass-out) !important;
        }

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

    .login .content h3 {
        color: #0697dfe0;
        font-size: 20px;
    }

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


    .login .content label {
        color: var(--primary-accent-text-color);
        margin-bottom: unset !important;
        font-family: Manrope !important;
        font-size:x-large;
    }

.login .content p {
    color: var(--primary-accent-text-color);
    margin-bottom: unset !important;
    font-size:medium;
}
.login .content .login-form,
.login .content .forget-form {
    padding: 0px;
    margin: 0px;
}


.input-icon .form-control {
    width: 100% !important; /* Ensures the dropdown spans the full width of the parent */
    box-sizing: border-box; /* Includes padding and border in the element's total width */
}
    .login .content .form-control {
        -webkit-box-shadow: var(--browser-auto-fill-fix) !important;
        border: unset !important;
        -webkit-border-radius: var(--border-radius-input) !important;
        -moz-border-radius: var(--border-radius-input) !important;
        border-radius: var(--border-radius-input) !important;
        background-clip: content-box !important;
        padding: var(--space-m) var(--space-m);
        padding-left: unset !important;
        transition: var(--element-transition);
    }

        .login .content .form-control::placeholder {
            color: var(--ternary-text-color);
            opacity: 1; /* Firefox */
            font-family: var(--app-font-family-body) !important;
        }

        .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: 0px;
        display: flex;
        justify-content: space-between;
        gap: var(--space-s);
        align-items: center;
        align-content: center;
    }

/*        .login .content .form-actions > * {
            flex: 0.5;
        }*/

        .login .content .form-actions .button-primary {
            flex-wrap: nowrap;
        }

            .login .content .form-actions .button-primary:hover i {
                color: var(--secondary-text-color) !important;
                transition: var(--box-glass-transition);
            }

a {
    font-size: var(--app-font-size);
    text-shadow: none !important;
    color: var(--primary-color);
    text-decoration: unset !important;
    border-radius: var(--border-radius-button);
}

.remember-me {
    justify-content: flex-start !important;
}

.login .content .form-actions .checkbox {
    margin-left: 0;
    margin-top: 0px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: var(--space-2xs);
    align-items: flex-start;
    font-weight: var(--app-font-weight-bold);
    font-size: var(--app-font-size);
    align-content: stretch;
    padding: unset !important;
}

    .login .content .form-actions .checkbox input {
        display: flex;
        flex: 0;
    }

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

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

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

.login .content .forgot-password {
    font-weight: var(--app-font-weight-bold);
    font-size: medium;
}

#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-top: 10px;
    margin-top: 15px;
}

    .login .content .create-account a {
        display: inline-block;
        margin-top: 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-left: 4px;
    }

.input-icon {
    border-radius: var(--border-radius-input) !important;
}

.side-pager {
    display: flex;
    flex-direction: row;
    gap: var(--space-s);
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

    .side-pager > * {
        height: var(--space-xs);
        width: var(--space-xs);
        background-color: var(--ternary-color);
    }

        .side-pager > *.active {
            background-color: var(--primary-color);
        }

        .side-pager > *:hover {
            cursor: pointer;
        }

.windows-logo {
    transform: perspective(4em) rotateY(-30deg) scale(0.9);
    height: 4.5ex;
    width: 6.5ex;
    min-height: auto;
}

.windows-logo-text {
    color: var(--primary-text-color);
    font-weight: calc(var(--app-font-weight) * 1.5);
    transition: var(--element-transition);
}

.windows-logo > .windows-logo-squares {
    position: absolute;
    top: 0;
    left: 0;
    height: 2ex;
    width: 2.75ex;
    background: var(--primary-text-color);
    border-radius: unset !important;
    transition: var(--element-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: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    transition: var(--element-transition);
}

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

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

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

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

    #EntraAuth > a {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        flex: 1 1 auto;
        border: var(--primary-color-border);
        background-color: var(--primary-color);
        height: 2.5rem;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 1vw;
        transition: var(--element-transition);
    }

.form-group.form-error:has(> .validation-summary-valid > ul > li[style='display:none']) {
    display: none;
}


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

    .login .content {
        padding: 30px;
        width: 80vw;
    }

        .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: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-s);
}

form .choose-customer,
form .form-group:has(> div > i.fa-user) > p {
    font-size: x-large;
    font-weight: var(--app-font-weight-bold);
    font-family: var(--app-font-family-title);
}

.validation-summary-errors ul {
    padding: unset;
    margin-bottom: unset;
    margin-bottom: 1rem;
}

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


.custom-select-wrapper {
    position: relative;
    display: flex;
    gap:1rem;
    align-items: center;
    border: 1.5px solid #ccc; 
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
/*    transition: border-color 0.3s, box-shadow 0.3s;*/
}

    /* Hover effect: blue border with glow */
    .custom-select-wrapper:hover {
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); /* Optional soft glow */
    }

    .custom-select-wrapper i.fa-user {
        position: absolute;
        left: 1rem;
        color: var(--primary-color);
        font-size: 1.2rem;
        background-color: #fff;
        z-index: 2;
        pointer-events: none;
    }

.custom-select-box {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
/*    padding: 0.5rem 2rem 0.5rem 3.5rem;*/
    font-size: 1.2rem;
    margin-left:.8rem;
    width: 100%;
    color: #333;
}