@import "base";

@baseColor: #0099ff;
@successColor: #52c41a;
body {
    background: #f9f9f9;
}

.container {
    font-size: 0;
}

.fixed {
    .pf();
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.common-container {
    .pr();
    max-width: 640px;
    margin: 0 auto;
    min-height: 100vh;
    padding-top: 1.2rem;

    .mb-header {
        .pf();
        top: 0;
        left: 0;
        .fs(.44rem, #343434);
        height: 1.2rem;
        line-height: 1.2rem;
        width: 100%;
        text-align: center;
        background: #fff;
        font-family: "Microsoft YaHei";
        font-weight: bold;

        .back {
            .pa();
            top: .4rem;
            left: .4rem;
            width: .23rem;
            height: .41rem;
            background: url("../images/icon_back.png") no-repeat center;
            background-size: 100% auto;
        }
    }
}
.cc-logo {
    img {
        width: 2.6rem;
        .pa();
        left: .2rem;
        top: .1rem;
    }
}
.form-container {
    width: 100%;
    overflow: hidden;
    min-height: 100vh;
    background: #fff url("../images/login_bg.jpg") no-repeat center top;
    background-size: 100% auto;

    .form {
        width: 80%;
        background: #fff;
        border-radius: .4rem;
        margin: 3.4rem auto 0;
        box-shadow: 0 0 10px rgba(0, 153, 255, .24);
        padding: .4rem .5rem .5rem;

        &.form-realName {
            margin: 0 auto;
        }

        li {
            height: 1.36rem;
            border-bottom: 1px solid #f1f1f1;
            padding-left: .9rem;

            &.icon-account {
                background: url("../images/icon_user.png") no-repeat left center;
                background-size: .51rem auto;
            }

            &.icon-password {
                background: url("../images/icon_lock.png") no-repeat left center;
                background-size: .51rem auto;
            }

            &.icon-phone {
                background: url("../images/icon_phone.png") no-repeat left center;
                background-size: .51rem auto;
            }

            &.icon-code {
                background: url("../images/icon_code.png") no-repeat left center;
                background-size: .51rem auto;

                input {
                    width: 4.5rem;
                }

                .send-code,.img-code {
                    .fs(.4rem, @baseColor);
                    background: none;
                    height: .8rem;
                    display: inline-block;
                    width: 3rem;
                    vertical-align: middle;
                    border-left: 1px solid #f1f1f1;
                    cursor: pointer;
                    &.gray{
                        color: #eee;
                        cursor: auto;
                    }
                }
            }

            &.icon-realName {
                background: url("../images/icon_realname.png") no-repeat left center;
                background-size: .51rem auto;
            }

            &.icon-idCard {
                background: url("../images/icon_idcard.png") no-repeat left center;
                background-size: .6rem auto;
            }

            &.icon-orange {
                background: url("../images/icon_orange.png") no-repeat left center;
                background-size: .6rem auto;
            }

            &.icon-server{
                background: url("../images/icon_server.png") no-repeat left center;
                background-size: .6rem auto;
            }
            &.icon-role{
                background: url("../images/icon_role.png") no-repeat left center;
                background-size: .6rem auto;
            }
            input ,select{
                .fs(.4rem, #343434);
                padding: .3rem 0;
                margin: .1rem 0;
                width: 100%;
                background: none;
                display: inline-block;
                vertical-align: middle;
            }
        }

        .password-message {
            height: auto;
            .fs(.32rem, #ababab);
            padding: .2rem .3rem .2rem;
            background: #f1f1f1;
            margin: .2rem 0;
            border-radius: 4px;

            &.leave-times {
                span, em {
                    color: #f00;
                }
            }
        }

        .change-password {
            text-align: right;
            border: 0;
            height: .32rem;
            padding-top: .38rem;

            a {
                .fs(.32rem, @baseColor);
            }
        }
    }

    .btn-login, .btn-register, .btn-changePassword, .btn-findPassword, .btn-bind-orange, .btn-confirm,.btn-receive{
        display: block;
        width: 90%;
        margin: .9rem auto;
        .transition(.1s);

        &:active {
            box-shadow: 0 0 0;
        }
    }

    .register-now {
        text-align: center;

        a {
            .fs(.4rem, @baseColor);
            text-decoration: underline;
        }
    }

    .toast-msg {
        text-align: center;
        padding: .3rem;
        .fs(.28rem, #646464)
    }

    .realName-title {
        .fs(.46rem, #343434);
        width: 90%;
        margin: 0 auto;
        padding: .7rem 0 .5rem;
    }

    .protocol {
        padding-top: .5rem;
        width: 9.3rem;
        margin: 0 auto;
        .fs(.36rem, #343434);

        a {
            color: @baseColor;
        }

        .checkbox {
            display: inline-block;
            vertical-align: middle;
            width: .38rem;
            height: .38rem;
            border: 1px solid #ababab;
            border-radius: 100%;
            cursor: pointer;
            margin-right: .1rem;

            &.current {
                background: @baseColor url("../images/icon_checked.png") no-repeat center;
                background-size: .24rem auto;
                border: 1px solid @baseColor;
            }
        }
    }

    .form-footer {
        width: 88%;
        margin: 0 auto;
        overflow-x: hidden;

        a {
            .fs(.4rem, #343434);
        }

        .customer {
            color: @baseColor;
            text-decoration: underline;
            .fl();
        }

        .back-login {
            .fr();
        }
    }
}

.resize-password, .dialog {
    overflow: auto;
    .pf();
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: rgba(0, 0, 0, .6);
    z-index: 9;

    &.dialog-orange {
        .form-container {
            h3 {
                padding: .4rem 0;
            }
        }

        .btn {
            margin: .5rem auto;
        }
    }

    .form-container {
        .pr();
        min-height: auto;
        margin: 2rem auto 0;
        background: #fff;
        width: 86%;
        max-width: 540px;
        padding: 0;
        border-radius: .4rem;

        .form {
            margin: 0 auto;
            padding: 0;
            box-shadow: 0 0 0 #fff;
            border-radius: 0;
        }

        .btn {
            box-shadow: 0 0 0;
            width: 60%;
        }

        h3 {
            text-align: center;
            .fs(.52rem, #343434);
            font-weight: normal;
            padding: .8rem 0 .6rem;
        }
    }
}

.close {
    .pa();
    top: .3rem;
    right: .3rem;
    width: .53rem;
    height: .53rem;
    background: url("../images/close.png") no-repeat center;
    background-size: 100% auto;
    .transition();
}

.dialog-protocol {
    z-index: 9999;

    .content {
        .pa();
        left: 50%;
        top: 50%;
        margin: -44vh 0 0 -4.7rem;
        background: #fff;
        border-radius: .1rem;
        padding-bottom: 2vh;

        h3 {
            text-align: center;
            font-size: .4rem;
            padding: 2vh 0 1vh;
        }

        p {
            .fs(.2rem, #343434);
            height: 80vh;
            width: 9rem;
            border-radius: .1rem;
            padding: 2% .1rem;
            overflow-y: scroll;

            span {
                display: block;
            }

            .t1 {
                text-align: center;
                font-size: .4rem
            }

            .t2 {
                text-align: left;
                font-size: .32rem
            }

            .t3 {
                text-align: left;
                font-size: .24rem;
                line-height: .5rem
            }
        }
    }
}

.progress {
    .pr();
    display: inline-block;
    vertical-align: middle;
    height: .2rem;
    width: 2.6rem;
    border-radius: .66rem;
    background: #eee;

    em {
        .pa();
        left: 0;
        top: 0;
        height: 100%;
        width: 50%;
        background: #ffba00;
        border-radius: .66rem;
    }

    &.progress-blue {
        em {
            background: @baseColor;
        }
    }
}

// message
.toast-item-wrapper {
    min-width: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    padding: .2rem;
    box-sizing: border-box;
    font-size: .4rem;
    color: #343434;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    background: #fff;

    &.toast-top-left {
        left: 20px;
        top: 20px;
    }

    &.toast-top-right {
        right: 20px;
        top: 20px;
    }

    &.toast-top-center {
        margin: 0 auto;
        top: 40%;
    }

    &.toast-bottom-left {
        left: 20px;
        bottom: 20px;
    }

    &.toast-bottom-right {
        right: 20px;
        bottom: 20px;
    }

    &.toast-bottom-center {
        margin: 0 auto;
        bottom: 20%;
    }

    p {
        margin: 0
    }

    .toast-message {
        font-size: 0.4rem;
        color: #343434;

        svg {
            display: inline-block;
            vertical-align: middle;
            margin-right: .1rem;
        }
    }

    .success {
        .toast-message {
            svg {
                color: #0E9A00;
            }
        }
    }

    .error {
        .toast-message {
            svg {
                color: #f00;
            }
        }
    }
}

.message-container {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .65);
    font-size: .4rem;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: fixed;
    top: 40%;
    left: 0;
    z-index: 1010;
    width: 100%;
    pointer-events: none;
    text-align: center;
    .transition();

    .message-content {
        display: inline-block;
        padding: .25rem .35rem;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
        pointer-events: all;

        i {
            vertical-align: middle;
            margin-right: .1rem;
        }

        &.success {
            i {
                color: @successColor;
            }
        }
    }
}

.other-login {
    text-align: center;
    padding-top: 1.8rem;

    h4 {
        .fs(.4rem, #343434);
        padding-bottom: .4rem;
    }

    span, a {
        .fs(.4rem, #ababab);
        display: inline-block;
        height: .92rem;
        line-height: .92rem;

        &.ald-login-mode {
            padding-right: 1rem;
            background: url("../images/ald_icon_bg.png") no-repeat center right;
            background-size: auto 100%;
        }
    }
}

.ald-login-container {
    .form-container {
        background: #fff url("../images/ald_login_bg.jpg") no-repeat center top;
        background-size: 100% auto;
    }
}

.relation-game{
    .pr();
    z-index: 0;
    background: #fff;
    box-shadow: 2px 4px 6px rgba(153, 153, 153, .16);
    margin-top: 10px;
    padding: 20px 0;
    border-radius: 10px;
    .swiper-container{
        width: 740px;
        margin: 0 auto;
        height: 120px;
        img{
            width: auto;
        }
        .swiper-slide{
            text-align: center;
            span{
                padding: 8px 0;
                display: block;
                .fs(20px,#343434);
            }
        }
    }
    .swiper-button-next,.swiper-button-prev{
        top: 44%;
        &:after{
            content: '';
        }
    }
    .swiper-button-next{
        right: 50px;
        background: url("../images/icon_next.png") no-repeat center;
    }
    .swiper-button-prev{
        left: 50px;
        background: url("../images/icon_prev.png") no-repeat center;
    }
}

img {
    image-rendering:-moz-crisp-edges;
    image-rendering:-o-crisp-edges;
    image-rendering:-webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode:nearest-neighbor;
}
@media screen and ( min-width: 640px ) {
    .common-container {
        .mb-header {
            max-width: 640px;
            left: auto;
        }
    }
    .cc-logo {
        img {
            width: 4rem;
            top: 0;
            left: .2rem;
        }
    }

    .container-pc .dialog-orange .bind-rules {
        overflow-y: auto;
    }

    .form-container {
        .form li.icon-code input {
            width: 5.5rem;
        }
    }
}

.toast-icon-error:before {
    content: ""
}

// 账号安全
.account-safe-range{
    width: 100%;
    padding: 36px 0;
    margin: 0 0 20px 0;
    text-align: center;
    background: #fff;
    .fs(24px,#5D5D5D);
    box-shadow: 0px 2px 7px 0px rgba(153, 153, 153, 0.16);
    border-radius: 10px;
    em{
        display: inline-block;
        vertical-align: middle;
        font-weight: bold;
        width: 60px;
        height: 12px;
        background: #DBDBDB;
        border-radius: 10px;
        &.current{
            background: @baseColor;
        }
    }
}
.account-safe-list{
    li{
        .pr();
        width: 822px;
        box-shadow: 0px 2px 7px 0px rgba(153, 153, 153, 0.16);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 24px 24px 24px 110px;
        h3{
            padding: 4px 0 6px;
            .fs(24px,#5D5D5D);
            span{
                .fs(16px,#EF2727);
                margin-left: 10px;
                font-weight: normal;
                &.current{
                    color: @baseColor;
                }
            }
        }
        p{
            .fs(20px,#5D5D5D);
        }
        &.icon-change-word{
            background:#fff url("../images/icon_change_word.png") no-repeat 20px center;
        }
        &.icon-bind-phone{
            background:#fff url("../images/icon_bind_phone.png") no-repeat 20px center;
        }
        &.icon-bind-email{
            background:#fff url("../images/icon_email.png") no-repeat 20px center;
        }
        &.icon-bind-realname{
            background:#fff url("../images/icon_bind_realName.png") no-repeat 20px center;
        }
        a{
            .pa();
            top: 36px;
            right: 60px;
            .fs(24px,#029BFF);
            width: 151px;
            .lh(49px);
            text-align: center;
            background: rgba(0, 0, 0, 0);
            border: 1px solid #029BFF;
            border-radius: 10px;
            box-shadow: 0 0 0;
            &.current{
                color: #999;
                border-color: #999;
            }
        }
    }
}
// 修改密码
.safe-title{
    .fs(.4rem,#343434);
    width:92%;
    padding: .4rem 2%;
    margin: .2rem auto;
    background: #fff;
    box-shadow: 0px 2px 7px 0px rgba(153, 153, 153, 0.16);
    border-radius: .1rem;
    a{
        color: #343434;
    }
}
.safe-content{
    .form-container{
        .pr();
        width: 88%;
        margin: 0 auto;
        min-height: auto;
        padding: 10% 4% 4%;
        background: #fff;
        border-radius: .1rem;
        box-shadow: 0 2px 7px 0 rgba(153, 153, 153, 0.16);
        .form{
            width: 100%;
            margin: 0;
            padding: 0;
            box-shadow: 0 0 0;
            background: #fff;
            li{
                span{
                    .fs(.4rem,#ababab);
                    line-height: 1.5rem;
                }
            }
        }
    }
    .success-text{
        .fs(.45rem,#343434);
        padding:.4rem 0 0 1.2rem;
        min-height: 1rem;
        &.icon-success{
            background: url("../images/icon_success.png") no-repeat left center;
            background-size: 1rem auto;
        }
        &.icon-fail{
            background: url("../images/icon_fail.png") no-repeat left center;
            background-size: 1rem auto;
        }
        &.icon-warn{
            background: url("../images/icon_warn.png") no-repeat left center;
            background-size: 1rem auto;
        }
    }
    .real-msg{
        .fs(.36rem,#343434);
        line-height: .5rem;
        padding-top: .2rem;
    }
    .btn-small{
        display: block;
        width: 80%;
        text-align: center;
        line-height: 1.06rem;
        margin: 1.4rem auto 1rem;
    }
}
.btn-confirm-change-mobile{
    display: block;
    width: 80%;
    margin: 1rem auto;
}

.confirm-dialog{
    .pa();
    left: .4rem;
    top: .4rem;
    .hide();
    width: 76%;
    background: #fff;
    border-radius: .1rem;
    border: 1px solid #eee;
    box-shadow: 0 2px 7px 0 rgba(153, 153, 153, 0.16);
    padding: .5rem .2rem .3rem;
    .arrow-tran{
        .pa();
        bottom: -.2rem;
        left: 57%;
        width: 0;
        height: 0;
        border-width:.2rem .2rem 0;
        border-style: solid;
        border-color:  #fff transparent transparent;
    }
    .btn-container{
        text-align: center;
        padding: .5rem 0 0;
        .btn{
            width:2rem;
            .lh(.8rem);
            font-size: .4rem;
            border-radius: .1rem;
            margin: 0 .2rem;
            box-shadow: 0 0 0;
            &.btn-cancel{
                background: #ababab;
            }
        }
    }

}
.dialog-fcm{
    text-align: center;
    .form-container{
        padding-bottom: .2rem;
        p{
            text-align: left;
            .fs(.4rem,#343434);
            line-height: .6rem;
        }
    }
    button{
        margin: .2rem auto .5rem;
    }
}

.m-img{
    width: 100%;
    display: block;
}