/* ####################################
   User Login Components 

   - Critical Rendering Path: Optional
   - Some of these elements might appear in the header or other important spots, depending on the site design.
   ################################## */

/* LoginStatusShort appears in the header in most designs. */

    /* See DefaultPageElements.css for #LoginStatusShort */

/* LoginStatusLong appears within the page content area, but only on pages that have their own login form. */

#LoginStatusLong {
}

#LoginStatusLong.logged-in {
}

#LoginStatusLong.logged-out {
    /* The long version isn't shown when logged out in the standard white site. */
}

    #LoginStatusLong .legend {
    }
    
    #LoginStatusLong .login-status-info {
    }

        #LoginStatusLong .login-status-info .login-message {
        }

        #LoginStatusLong .login-status-info .login-user {
        }

    #LoginStatusLong .login-links {
    }
    
        #LoginStatusLong .login-links li {
        }

        #LoginStatusLong .login-links li a {
        }
            
        #LoginStatusLong .login-links .link-login-home {
        }

        #LoginStatusLong .login-links .link-logout {
        }
        
        #LoginStatusLong .login-links .link-login {
        }
        
        #LoginStatusLong .login-links .link-register {
        }
        
        #LoginStatusLong .login-links .link-request-access {
        }

/* 
    #LoginForm is the old (pre-v8) login UI. It might still exist in some old functions but can't be used by authors any more. The new one is below - #LoginPanel.
    The login form might be shown inside any page.
*/

#LoginForm {
}

    #LoginForm #RememberMeContainer {
    }

        #LoginForm #RememberMeContainer .fieldControls {
            float: none;
        }

    #LoginForm #LoginHelp {
        clear: left;
        margin: 1em 0 0;
    }

        #LoginForm #LoginHelp ul.login-links {
            margin: 0 0 var(--site-box-margin-bottom);
            padding: 0;
            list-style: none;
        }

        #LoginForm #LoginHelp ul.login-links li {
            display: inline-block;
            margin: 0;
        }
        
            #LoginForm #LoginHelp ul.login-links li a {
                margin-right: 10px;
            }
        
        #LoginForm #LoginButtonContainer {
        }

            #LoginForm #LoginButtonContainer input {
            }
            
    #LoginForm #LoginHelp .link-forgotten-password {
    }
        
    #LoginForm #LoginHelp .link-register {
    }

    #LoginForm #LoginHelp .link-request-access {
    }

/*
    #LoginPanel - The login form might be shown inside any page.
*/

#LoginPanel {
}

    #LoginPanel .loginForm {
        margin: 0;
    }

    #LoginFormOneStep.loginForm {
    }

    #LoginFormTwoSteps.loginForm {
    }

        #LoginFormTwoSteps.loginForm.step1 {
            /* Username/email and password together. */
        }

        #LoginFormTwoSteps.loginForm.step2 {
            /* Username/email first, leading to different options in the second step - password, encrypted email link reqeuest, two factor sign-on. */
        }
        
    #LoginPanel fieldset.loginCredentials {
    }
        
        #LoginPanel fieldset.loginCredentials legend {
        }
        
        #LoginPanel fieldset.loginCredentials ul.formFields {
        }
        
        #LoginPanel fieldset.loginCredentials .fieldContainer {
        }

            #LoginPanel fieldset.loginCredentials .fieldContainer .fieldTitle {
                width: 250px;
            }

            #LoginPanel fieldset.loginCredentials .fieldContainer .fieldContent {
                width: calc(100% - 250px);
            }

    #LoginPanel fieldset.submitButtons {
    }
        
        #LoginPanel fieldset.submitButtons #LoginButton {
        }
        
    #LoginPanel .loginFormTools {
    }
        
        #LoginPanel .loginFormTools a {
        }

/*
    Authentication Links
*/

.external-authentication-links {
    position: relative;
}

    [id^="LoginForm"] + .external-authentication-links::before {
        content: "Or";
        position: relative;
        z-index: 1;
        display: inline-block;
        width: 40px;
        margin: 15px 0 15px calc(50% - 20px);
        padding: 5px 0;
        font-size: 14px;
        text-align: center;
        text-transform: uppercase;
        color: #000;
        background: #fff;
        border: #000 1px solid;
    }

    [id^="LoginForm"] + .external-authentication-links::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: 0;
        top: 28px;
        display: block;
        width: 100%;
        height: 1px;
        background: #000;
    }

    .external-authentication-links #AuthenticationLinks a {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 10px;
        margin: 0 0 10px;
        text-align: center;
        font-weight: bold;
        text-decoration: none;
        color: #009376;
        background: #fff;
        border: #009376 1px solid;
    }

        .external-authentication-links #AuthenticationLinks a:last-child {
            margin-bottom: 0;
        }

        .external-authentication-links #AuthenticationLinks a img {
            width: auto;
            height: 1.5em;
        }

        .external-authentication-links #AuthenticationLinks a i {
            /* Use font-size and dimensions to allow for icon fonts or background image based icons. */
            font-size: 1.25em;
            width: 1.125em;
            height: 1.125em;
        }

            .external-authentication-links #AuthenticationLinks a i::before {
                color: #121816;
            }

            .external-authentication-links #AuthenticationLinks a i::after {
                color: #121816;
            }

        .external-authentication-links #AuthenticationLinks a:hover {
            text-decoration: none;
            color: #fff !important;
            background: #323834 !important;
            border: #323834 1px solid !important;
        }

            .external-authentication-links #AuthenticationLinks a:hover i::before {
                color: #fff;
            }

            .external-authentication-links #AuthenticationLinks a:hover i::after {
                color: #fff;
            }

            .external-authentication-links #AuthenticationLinks a:hover img {
                /* Inverts white to black but works fairly well for most color inversions. */
                filter: invert(98%) sepia(5%) saturate(2909%) hue-rotate(206deg) brightness(117%) contrast(100%);
            }

        .external-authentication-links #AuthenticationLinks a.localAuthentication.acora {
            color: #fff;
            background: #009376;
        }

            .external-authentication-links #AuthenticationLinks a.localAuthentication.acora i {
            }

                .external-authentication-links #AuthenticationLinks a.localAuthentication.acora i::before {
                    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBpZD0ic3ZnQ29udGVudCIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjE4NyIgaGVpZ2h0PSIxNzcxIiBzdHlsZT0icG9zaXRpb246IHJlbGF0aXZlOyB3aWR0aDogMjE4N3B4OyBoZWlnaHQ6IDE3NzFweDsgbWFyZ2luOmF1dG87IHVzZXItc2VsZWN0OiBub25lOyBjdXJzb3I6IGRlZmF1bHQ7IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjE4NyAxNzcxIj48ZyBpZD0ic3ZnUGF0aCI+PHBhdGggZD0iTSAxOTU1LjUwMCAxLjE3NiBDIDE5MjIuNzA1IDQuNDc3LCAxODg4LjkxNSAxNi40NjcsIDE4NjIgMzQuMzUyIEMgMTg0OC45ODMgNDMuMDAyLCAxODQyLjg3MyA0OC4wNDEsIDE4MjkgNjEuNTY1IEMgMTgxOS40MTYgNzAuOTA4LCAxNTYwLjgyNCAyODUuNTE5LCA5MzcuNTAwIDgwMS40NDAgQyA0NTQuNjAwIDEyMDEuMTMzLCA1OC42MDAgMTUyOS4xNTgsIDU3LjUwMCAxNTMwLjM4NCBDIDU2LjQwMCAxNTMxLjYxMSwgNTIuNTAzIDE1MzQuOTU4LCA0OC44NDEgMTUzNy44MjEgQyAzNS4wODQgMTU0OC41NzcsIDIxLjA1MiAxNTY1LjgzMywgMTMuMDU2IDE1ODEuODI5IEMgOC40MDYgMTU5MS4xMjksIDMuMzAzIDE2MDcuMTcwLCAxLjU0OCAxNjE4IEMgLTAuNDY1IDE2MzAuNDE5LCAtMC40MzQgMTY1MS4xMTYsIDEuNjE1IDE2NjMuMDc0IEMgMTAuNzI1IDE3MTYuMjM0LCA1MS4wMDggMTc1Ny4zNjksIDEwNSAxNzY4LjY0MyBDIDExNi42MDQgMTc3MS4wNjcsIDE0My4xMDYgMTc3MS4xMTEsIDE1NSAxNzY4LjcyNyBDIDE3OS4yNDkgMTc2My44NjcsIDE5OC42OTAgMTc1NC4xODYsIDIxOC40NzcgMTczNy4xMTUgQyAyMjMuMTg1IDE3MzMuMDUzLCA1NzMuNDE2IDE0ODAuMDE0LCA5OTYuNzY4IDExNzQuODA3IEwgMTc2Ni41MDAgNjE5Ljg4MyAxNzY2Ljc1NCA3NTAuNDQyIEMgMTc2Ni45MjEgODM2LjMxOSwgMTc2Ny4zNDggODgxLCAxNzY4LjAwNCA4ODEgQyAxNzY4LjU5NiA4ODEsIDE3NjkgODg0Ljg3MCwgMTc2OSA4OTAuNTM5IEMgMTc2OSA5MjcuNjYzLCAxNzgxLjY0NiA5NjkuMTAzLCAxODAyLjcwOCAxMDAxIEMgMTgzNi40NDkgMTA1Mi4wOTcsIDE4ODkuNjk5IDEwODUuNjQwLCAxOTQ5LjUyNiAxMDkzLjQ4MiBDIDE5NjQuMzkyIDEwOTUuNDMxLCAxOTkwLjYxNyAxMDk1LjQyNSwgMjAwNS42OTkgMTA5My40NzAgQyAyMDkwLjc5MSAxMDgyLjQzNywgMjE2MS4zODAgMTAxOC43MDYsIDIxODAuODg0IDkzNS4zMDQgQyAyMTg2LjgyMiA5MDkuOTA3LCAyMTg2LjM4MSA5MzguOTY0LCAyMTg2LjczMyA1NTAuNTc4IEMgMjE4Ni45NTMgMzA4LjQ5OSwgMjE4Ni43MjkgMTk1LjMyOSwgMjE4Ni4wMjggMTk0LjYyOCBDIDIxODUuNDYyIDE5NC4wNjIsIDIxODQuOTk4IDE5MS43NzgsIDIxODQuOTk2IDE4OS41NTAgQyAyMTg0Ljk5MCAxODMuODI1LCAyMTgyLjM1MCAxNjguMjQ1LCAyMTc5LjQ0MSAxNTYuNzY5IEMgMjE2NS44ODIgMTAzLjI3NSwgMjEzMC44ODkgNTcuMDM0LCAyMDgyLjI1OCAyOC4zNDUgQyAyMDQ1LjQ2NiA2LjY0MCwgMTk5OS4zNjYgLTMuMjQxLCAxOTU1LjUwMCAxLjE3NiBNIDE5NTguMDU2IDEzNTQuMDQwIEMgMTg3MC43ODMgMTM2Mi40NjMsIDE3OTguMjU0IDE0MjMuNTY1LCAxNzc1Ljk5NSAxNTA3LjQxOCBDIDE3NzAuNTg2IDE1MjcuNzk2LCAxNzY5LjU4NiAxNTM2LjMxMSwgMTc2OS41ODYgMTU2MiBDIDE3NjkuNTg2IDE1ODcuMTI3LCAxNzcwLjUwOCAxNTk1LjI5OCwgMTc3NS42MTQgMTYxNS40NTcgQyAxNzg0LjM4NyAxNjUwLjA4NywgMTgwMy4xODMgMTY4My4wNDQsIDE4MjguOTk5IDE3MDkuMDU3IEMgMTg0Ni43NjEgMTcyNi45NTYsIDE4NjQuMjc3IDE3MzkuNDIzLCAxODg3LjEzMSAxNzUwLjQzNSBDIDE5MzkuMTE4IDE3NzUuNDg0LCAyMDAxLjE3NyAxNzc3LjY5MSwgMjA1NC45MTQgMTc1Ni40MDEgQyAyMTI0LjUzNCAxNzI4LjgxOCwgMjE3NC4wMDQgMTY2Ni4wMjYsIDIxODQuNDg5IDE1OTEuOTMzIEMgMjE4Ni40MDEgMTU3OC40MTUsIDIxODYuNjgzIDE1NDkuNjQxLCAyMTg1LjAzMiAxNTM2LjUwMCBDIDIxNzcuMzE0IDE0NzUuMDkzLCAyMTQ0LjEzNSAxNDIxLjQ1MCwgMjA5MyAxMzg3LjcwOSBDIDIwNjcuNzYzIDEzNzEuMDU2LCAyMDM4LjQ2MiAxMzU5Ljg2NCwgMjAwOC43NjAgMTM1NS41MzMgQyAxOTk1LjMxNyAxMzUzLjU3MywgMTk3MC40NzggMTM1Mi44NDEsIDE5NTguMDU2IDEzNTQuMDQwIiBzdHJva2U9Im5vbmUiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvZz48L3N2Zz4=");
                }

    .external-authentication-links #AuthenticationMessage {
        margin-top: 15px;
    }

/* 
    LoginMessage is shown on a splash page when a login message such as "expiry pending" or "disabled account" is shown to the user.
*/

#LoginMessage {
}

    #LoginMessage #ContinueLinks {
    }
    
    #LoginMessage #ContinueLinks ul {
        margin: 0 0 var(--site-box-margin-bottom);
        padding: 0;
        list-style: none;
    }

        #LoginMessage #ContinueLinks ul li {
            margin: 0;
            padding: 0;
        }

/* 
    The Member Profile widget usually only appears on the members login page but could be dropped anywhere. 
    Note that it might be used as a general user info panel in sites that don't use the membership module.
*/

#MemberProfileSummary {
}

    #MemberProfileSummary #MemberProfile {
    }

        #MemberProfileSummary #MemberProfile #MemberDetails.fieldset {
        }

            #MemberProfileSummary #MemberProfile ol.formFields {
            }

                #MemberProfileSummary #MemberProfile ol li.fieldContainer {
                }

                    #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldTitle {
                    }

                    #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText {
                    }

                        #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountInfo {
                            position: relative;
                            float: left;
                            width: 35%;
                        }

                        #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountLinks {
                            position: relative;
                            float: left;
                            width: 65%;
                        }

                            #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountLinks a.membershipAccountLink {
                                margin-right: 10px;
                            }

                #MemberProfileSummary #MemberProfile ol li#MemberAccountContainer {
                }

                    #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountInfo {
                    }

                        #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountInfo .accountCompanyName {
                        }

                            #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountInfo .accountCompanyName::after {
                                content: " / ";
                            }

                        #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountInfo .accountName {
                        }

                        #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountInfo .accountUsername {
                        }

                            #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountInfo .accountUsername::before {
                                content: "(";
                            }

                            #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountInfo .accountUsername::after {
                                content: ")";
                            }

                    #MemberProfileSummary #MemberProfile ol li#MemberTypeContainer .fieldText .membershipAccountLinks {
                    }

                        #MemberProfileSummary #MemberProfile ol li#MemberTypeContainer .fieldText .membershipAccountLinks a.profileLink {
                        }

                        #MemberProfileSummary #MemberProfile ol li#MemberTypeContainer .fieldText .membershipAccountLinks a.forumProfileLink {
                        }

                        #MemberProfileSummary #MemberProfile ol li#MemberTypeContainer .fieldText .membershipAccountLinks a.link-logout {
                        }

                #MemberProfileSummary #MemberProfile ol li#MemberTypeContainer {
                }

                    #MemberProfileSummary #MemberProfile ol li#MemberTypeContainer a.upgradeLink {
                    }

                #MemberProfileSummary #MemberProfile ol li#MemberExpiryContainer {
                }

                    #MemberProfileSummary #MemberProfile ol li#MemberExpiryContainer a.renewLink {
                    }

@media screen and (max-width: 900px) {

    #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountInfo {
        width: 100%;
        margin-bottom: 10px;
    }

    #MemberProfileSummary #MemberProfile ol li.fieldContainer .fieldText .membershipAccountLinks {
        width: 100%;
    }

}

/* Version 8.5+ Login Form */

.loginForm {
    /* Extends .formPanel */
    position: relative;
}

    .loginForm .loginFormHelpTop {
        position: absolute;
        right: 20px;
        z-index: 2;
    }

    .loginForm.step1 {
    }

    .loginForm.step2 {
    }

    .loginForm.oneCol1 {
    }

        .loginForm.oneCol1 .rememberMeField {
        }

            .loginForm.oneCol1 .rememberMeField label {
                display: none;
            }

    .loginForm.cols-2 {
    }