body {
    background-color: var(--color-background-light);
}
#content .mini-layout-body {
    width: 420px;
    text-align: left;
    padding-bottom: 48px
}

#content .page-header h1 {
    text-align: center;
    font-size: 24px;
    margin: 0 0 32px;
    padding-top: 48px
}

#content .forgot {
    display: block;
    position: relative;
    margin-top: 16px;
    padding-top: 48px
}

#content .left {
    position: absolute;
    left: 0;
    top: 0
}

#content .right {
    position: absolute;
    right: 0;
    top: 0
}

#content .checkbox {
    margin: 0
}

#content .right .checkbox input[type="checkbox"] {
    margin-top: 4px
}

#content .btn.user {
    font-size: 16px;
    display: block;
    width: 100%;
    line-height: 28px
}

#content p.extra {
    text-align: center;
    font-size: 14px;
    margin: 32px 0 0 0
}

#content .login-more-wrap {
    line-height: 24px
}

#content hr {
    width: 358px;
    height: 3px;
    border: 0;
    border-top: 1px solid #d5d5d5;
    padding: 0;
    margin: 25px 0 0 0
}

#login .desc {
    font-size: 15px;
    margin: 32px 0 12px
}

#content .registered {
    width: 360px
}

#content .signin {
    position: relative
}

    #content .signin .busy24 {
        position: absolute;
        right: -40px;
        top: 14px
    }

#error_msg a, #error_msg a:hover {
    color: #b22424;
    font-weight: bold;
    text-decoration: underline
}

@media(max-width:767px) {
    #content .mini-layout-body {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px
    }

    #signup-form, .form {
        padding: 0 4px
    }

    #content .page-header h1 {
        width: 100%
    }

    #content .input {
        width: 100%
    }

    #content .forgot {
        width: 100%
    }

    #content .btn.user {
        width: 100%
    }

    #content p.extra {
        width: 100%
    }

    #content hr {
        width: 100%
    }

    #content .registered {
        width: 100%
    }

    #content #error_msg {
        width: 100%
    }

    #content .signin .busy24 {
        position: absolute;
        left: 50%;
        margin-left: -12px;
        top: -24px
    }
}

.email-label, .password-label {
    margin-bottom: 4px;
    font-size: 14px;
    color: #747487
}

.ride-line {
    position: relative;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 32px
}

.ride-line-empty {
    height: 1px
}

.ride-line span {
    background-color: #fff;
    padding-left: 12px;
    padding-right: 12px;
    display: inline-block;
    line-height: 24px;
    position: relative;
    z-index: 1;
    color: #747487
}

.ride-line:before {
    content: '';
    height: 1px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 12px;
    background-color: #ededf4
}

.login-btn {
    display: block;
    border-radius: 8px;
    line-height: 38px;
    border: 1px solid #babacc;
    background-color: #fff;
    font-style: normal;
    padding: 0 5px 0 5px;
    color: #747487;
    position: relative;
    text-decoration: none;
    width: 300px; 
}

    .login-btn:hover {
        background-color: #e7f1fd;
        color: #295ebd;
        border-color: #cfe3fb;
        text-decoration: none
    }

    .login-btn + .login-btn {
        margin-top: 8px
    }

    .login-btn:before {
        content: "";
        width: 18px;
        height: 18px;
        position: absolute;
        left: 12px;
        top: 11px;
        -webkit-background-size: 18px 18px;
        background-size: 18px 18px;
        background-position: center center;
        background-repeat: no-repeat
    }

.login-btn--google:before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAABNVBMVEUAAAD/PgBJsUT/OwANdNRHsEtHsEpHsEoNddT/PABKsEp1tSr/YwD/OwD/wwD/OwD/wgD/PAD/OwBPsUj/wQAMdNX/PAD/PQBWskNIr0r/wgD/PABKsEj/OgBIr0j/PwD/OgAPddb/QQD/wwD/QABHr0tJr0r/wgAMdNX/wgAMdNb/OwALddU5oW9Hr0z/PAD/OwBnsz9HsEr/OwAOdNP/PABIsUv/iAALdNX/OwD/PQBMsEhIsEoMddVIsEr/OwD/PQD/OgDRuxL/vQAMdNVJr0n/QAALddT/wwD/vwAWd89Nskj/PwBMrEX/vwBAr0j/xQD/RwAQcM//TAAMdNX/OwBHsEv/wgBAqFwSecgTfMMagbYljJ1PsUdnsz6StyyvuiDdvw7/sQD/kQD/dwD/WAD/RgBL4Ss6AAAAVHRSTlMAEBLf+e/ix8W2gggH+PfvyMSal5eNfWNhYF9fRkY+OiMZFQgE+vbv7Obl49/Y2NbLv769uLe0tLKsqKebl5WThYOAgG5paEhIRDo1NSUkIB8ZEAp/9d8/AAABMklEQVQ4y8XQ13LCMBBA0cWEDkmAhBI6pPfee+8VrUjv+f9PiNkRjCzZfuU8WTt3ZmVBB0ULidkYY7H4TsEp8aR6WNtEymPXpM1E5k3rTYJp9tRmnenWBq3Nrk2zpDTHTFjIlR+i5VzI/AwpN696GZkpgVDyqg0c/FATl+Z3agNj/PvP/OcquDjjnH/9sktw08ebVsBVL0UDINRlXUEx7aboWo+oElNOonpELFHNKZLX3bqu0y8uC8pP8DkHikWKtsTp1Gw+XrFobc7r5EQcayP8HRGnDbmpTFIzCi37b9gUkKr7YJ30Q4vhQ+K/AKE49UjNeAXaMigsZ68ikZvsPGLjqRkdgiSJmsYzLZNtoO5lFRRhPUqC5shvTXwZsGGE/VISNsBBfjswhDgc2MxHoHP+AVnAlPxGJFfYAAAAAElFTkSuQmCC')
}

.login-btn--facebook:before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAVFBMVEUAAAAcjvIdlv4dlv8cl/8ZguIcj/Egl/8cjvEZlvYdlv4ck/kcj+8ZhuAbgNsdlPwclfsclPkcje4ek/kelf8aiu0biewbiuodkvgck/8ejPUel/+sgL4cAAAAG3RSTlMAmsOfQD2SICQR04hsLRz9xsW3rIB0XVVGQDOQot/GAAAAcklEQVQ4y+3QORKAIAxAUWVRUMB95f73FLCgEchoYaG/onhDJsnej5c2HiMCNdqGI6azIIFqnUZKA9CcRH7ayhgLb5c707p3AqGnSFHaO1RRkwx/48MQNEKQgKANgvZrJAkZzu2ICXSnH30WLYVtym50AK0BGFMu0HXjAAAAAElFTkSuQmCC')
}

.login-btn--sso:before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAflBMVEUAAABeZHZrdo1SWXRteI9qdItpdYtqdo1pdItpdIprdYxseI5mcYZDS1pqdYxsd49qdYxqdYxmcIdrdYxodItlboNrdYxteI9eaH1mcIhseI9cZ3trdYtsd41rdIpmb4Vmb4Vfan5tdo9hbYNXYXBheI5gYHUzMzNteI9rdo0KJC0rAAAAKHRSTlMAHNsP38t+6+fa06B5C/vvvrOXkG1oY2BOS0As+O/EvHNjUkQyIhgFWCwPLgAAALtJREFUOMut0VkSwiAQBNBJCNlXsyfuK9z/goZCLJ2IWFb6c/pVfwAsFRIXHk9pedH0J5/J8DL51MecPROQed+x1+SAc3PEPfSVOGDQiGsNZPsAHgbFdKQAcFQTZwTEdkYA9gpUCHBxpL2bKeAisFaFDlAMegRWGCQIjOl771lgmLCxSEKTuO5MAhpH/vZGK2Cs3bgjlo0Fzg9iGJCYh5lE2zqmjdy0UUVyIwRtIrnxB0DvAV9EMPUBLJA7LMAv7S7vUDMAAAAASUVORK5CYII=');
}

.login-btn--microsoft:before {
    background-image: url('images/Microsoft-logo.jpg');
}


.login-btn:after {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: 40px;
    top: 0;
    background-color: #babacc
}

.login-btn:hover:after {
    background-color: #cfe3fb
}

#content .page-header .login-section-title {
    text-align: left
}

.login-section-title a {
    float: right;
    font-size: 14px;
    line-height: 26px;
    font-weight: normal
}

.form-item-flex-wrap {
    position: relative
}

    .form-item-flex-wrap .form-control {
        width: 100%
    }

    .form-item-flex-wrap .position-button {
        position: absolute;
        right: 1px;
        top: 0;
        border: 0;
        padding: 6px;
        background-color: transparent;
        box-sizing: border-box;
        text-align: right;
        font-size: 14px;
        line-height: 28px;
        outline: 0;
        z-index: 1;
        color: #747487
    }

        .form-item-flex-wrap .position-button[disabled] {
            color: #babacc
        }

.captcha-code .captcha-input {
    height: 40px;
    width: 210px
}

@media screen and (max-width:767px) {
    .captcha-code .captcha-input {
        width: calc(100% - 170px)
    }
}

.captcha-code .captcha-display {
    width: 120px;
    height: 38px
}

    .captcha-code .captcha-display img {
        height: 100%
    }

.captcha-code .captcha-section {
    width: 160px;
    min-height: 40px
}

.captcha-code .captcha-action {
    width: 20px;
    margin: 0
}

    .captcha-code .captcha-action > a, .captcha-code .captcha-action .captcha-icon {
        float: left
    }

.captcha-code .captcha-icon {
    width: 18px;
    height: 18px
}

.captcha-code .icon-refresh {
    background-position: -4px -3px
}

    .captcha-code .icon-refresh:hover, #captcha-refresh:focus .icon-refresh {
        background-position: -28px -3px
    }

.captcha-code .captcha-switch {
    background-position: -52px -3px
}

.captcha-code .icon-switch-txt {
    background-position: -52px -3px
}

    .captcha-code .icon-switch-txt:hover, #captcha-switch:focus .icon-switch-txt {
        background-position: -76px -3px
    }

.captcha-code .icon-play {
    background-position: -146px -3px
}

    .captcha-code .icon-play:hover {
        background-position: -170px -3px
    }

.captcha-code .play_link {
    margin-top: 8px
}

    .captcha-code .play_link:hover .icon-play, .captcha-code .play_link:focus .icon-play {
        background-position: -170px -3px
    }

.captcha-code .icon-switch-auo {
    background-position: -99px -3px !important
}

    .captcha-code .icon-switch-auo:hover, #captcha-switch:focus .icon-switch-auo {
        background-position: -123px -3px !important
    }

.login-with-others {
    text-align: center
}

.login-with-title {
    display: block !important;
    text-align: center;
    top: 0;
    margin-bottom: 24px
}

.login-link {
    text-align: center;
    display: inline-block;
    margin-right: 40px;
    line-height: 1.5
}

    .login-link:last-child {
        margin-right: 0
    }

.login-type-text {
    display: block;
    line-height: 1.5;
    color: #747487
}

.login-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    -webkit-background-size: 32px 32px;
    background-size: 32px 32px;
    background-position: center center;
    text-indent: -99em;
    overflow: hidden
}

.login-icon-wechat {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAeFBMVEUAAAB+0yF/0yB+1CF/zyB91CF+0yB+0yB+0yF90iB/0yB90yB+0yB+0yF/0iB90iCA0yCB1CB+0yB+0yB+0yH////3/fGO2Tzn99Xv+uPP76y+6ZC35oKe3liG1i7f9ciu43TG7J3X8bqm4Wau5HTG7J6W20rH7J6+1tFrAAAAFHRSTlMA7yDfEIB/UM9gv7+vn4+Pb19fz5vHGxgAAAG5SURBVEjHnZXZcqswEERHwDXG8Zq0BGKxWZzc///DRDZhhBA28XnwUtVdMy1NjWhClOy3oQAQvu3jgJ4QHTcYsT4Fj+T/BKbsZi0sd1h55cEas4SeIonAA0Q8aQdPWPn0yx0xFnCy8gosQHDyEItYOwEWxwhgUeVaSZm119TXVESGHQZKJQfydKYEFzhfpI3+8pdIBn0mHSq4HH8MwwjlRtMUt66yov35VJOu3qyOUiNsgU/znd7/XuASUTwqoNN7kBKlNJzh8E579LgJVF7W1y/XcaANehx90X3qW5rx8W4p9Bp09d/yggkJvpZUpW17xo0JNhSSKZ1AOQbYcFbc0PV2bWlmriJV5jcbBA/SYGgut7s43w16dCEc2mqq65NYoTj0FkzdSyo5gWdjD4v+bH6NjOaLS8B0UhVd0V5qk8F/TDFFYIoad9yeeGwD4tmwacaGDj0fRHTEU0fJw2p2vICPWnv0CB5tmbrNlMqanBNjR8QlZkkbLvDSIuM98Izw9WVMCRYQ//VBee3JYuLHj+KJJgQhZllz3iVtiRXNEOy88ojmCZIPZ10fWT7niQ8bE0eE28P7VP0NFemQsw67kGkAAAAASUVORK5CYII=')
}

.login-icon-qq {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAflBMVEUAAAAYrf0YrP0Up/8ZrfwYrPwYq/sYrP0XrP0YrPwXrP0Yq/sXq/0Yr/8Yp/cYrPwYrfwYrf0YrPwZr/0YrP0YrPz///9Rwf01t/3i9f/F6v5DvP3x+v8msfyL1f2a2/6o3/1vy/3w+v/T7/635f6p4P590P2M1v5+0f4nsfy7hu1sAAAAFXRSTlMAf18Q7+8g38+/j4BQICDfr5+fb28qXvVJAAABiElEQVRIx42V23qCMBCEQ0BOUsXqJpxErYe27/+CRb8qzC4Y/isuZphdNmyUwNdpHgVEFCVpFioH/jYhINbvPP4yIMnnpKWXM5aj8o+YJlmPhOiA3rDIRDnkYOnQOxwZzUAP+g3mGBZ95xFxCmtr4sRTDdiqMR3ld0GI918QIQfzpLSsKP9h2BBwNQMsj5ABP2bI115GaOy2NMCBgF1nwCN0ArmISERFlWGcCPD5kBtuaPm4UwJKhyFV+EvWmCC7zlUkAxDseq0IMJICJ8EMV5eBmKGShooZAjY2iUVDxANkBDadU88v18rvlMDg7LjBwuA0Gs5cfUFDpvzh2TZHEUJtNfywKwVnoxZ9H+Ue2BJQwGk67+Vu8gPQ8wQc9Ep1ePiHMkq4KpRiEfVT1l76KUAAj2jvEc2hK+T2CGtuYpHxPVDb+vVkazwWT8J5y3ilXug5BriEPLfeU4Dn1jOy95eiVoIwmtbHfb9zylpAORCyGZX7appQxyhPdlwuPVmaRPc3R3mqpfoPzzGWwWyCWfgAAAAASUVORK5CYII=')
}

.login-icon-alipay {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAV1BMVEUAAAAQl90SltsRltsQlNsQltsSldsSl9wSldwRltsRlNsQj88SltsUmNsQl9oTl9sRldsRltwSldoRldwQn98TldoRltsQj98SltsSl9wRltwQj9oSltv9ggCOAAAAHHRSTlMAH1/fQH/vn+/PgBCPP0+/v6+fbxAwrxDPj1Awkj5hMwAAAaRJREFUSMedldt2hCAMRUNwVLzfp53J/39nB6VEAcV2P4krx+SErAgeE34vMici2X2jgAhT0dIBheIyPCef7FTC4Q4FhBCKTpGBJJjTBWnjlUMRikh8RNHQDXDnN78jSNm5pFuocwOL+OArHqagwOXCh0BR5SrIogJOwQmiAk6BxIxiY00tDLWT4ssVzEkynwm6taJ4SUwJ+DcBQuW8WEm0ADcU7amgPQqSPbM/BsvlWFR+1yXQBbXtuiUF56z6vk3t12zXmYNgqM10NZXSx89jTa4g5/LeANOczEaErQgN2s60gGI7dHZ5sWU23dt69lfSNb95+qOg46i6Dq+i8qCpuG01+qPvaxCeZGj2GdJRr9oFWdMM6WbUzsa4mxL11vGKSCIwTb/ugYf1/xyMMVz96pYdJRnpwzPnySlrHE1Px9zaL4Tt8fr04OUChunVHjqWiTWBvntOoenGRIgZszzwVzEJOEWMTHKrFd1C/n8ZA94RmPG6a4MNsCIS7/C6/ikieAhJpyj2e6es9AEniCEYXsI5Ap1L7K7C7Y5ptZ1U9hX60T8NwKADHZr9qgAAAABJRU5ErkJggg==')
}

.login-icon-sso {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAARVBMVEUAAACKk6WHk6OKk6WKlKWKk6WKk6WKkqWJlaWKk6WKk6aKk6SEk5+Kk6WLk6WJkqSKk6WLk6aJk6aJlKSLk6SGk6OKk6UvZ9p5AAAAFnRSTlMA7yBgn49/3zDP3z8Qr+9wb7+/cE9QShtUHwAAAcJJREFUWMOl1ltywyAMBdCLeMUY4jRNtf+lNuPp2C4YAfH55yITQYQa0jZNgd/ClNwPYchsA2eCmdEpujufCprGlpfuthnxfWdR0JDQFzcFkrdvUwsqLHdyOGW4m8GJiQdMwv4f1uB4kM3On4ctOKA7D1OEXciOyM0RuOnEkic2mo/8T9mZ8kdQ+Ld97D1cFbcOFH5h1+5IUsf6aaDBVSxPYL2tsznc+6haJYRjAWtJ/Db3fIRat+ODx1b03qvEdfPxEmz7mqxVvdDQeRPFrSbCRmgGnxeIFVkzd15UwisPKEntqLMzptGnxiJlgaXIgpTFP1HS8tvmufUNN8V1HsUlH0xA0d6DCeCLCeCCGTqHs0YPf5c5Pm7NBF/pkvA0aWJWzYQJiQXthATLlxIcNDdpIeEF6gmoJxDgucXoag2+dy6p1WD2R1V2PMniDVXcZow+u9x+YLYwe0B+vFF9GqBoYLxRtzLA7v9+/Qn67I944R7qod/C6Qv8xR/w2JG6OGRh4WEPcQ5pc9dH3evD9vVx/+OB26JiUX0NhSry3PQkSLRvby8jq4TlLqKNtBeW95lNkeHtjCH0cmny69IpWU2o+AWoueSEZTQXEgAAAABJRU5ErkJggg==')
}

input.form-control {
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    border-color: #babacc
}

.form-group {
    margin-bottom: 14px;
    margin-top: 20px
}