.unauth-center{height: calc(100vh);background: url(../img/secret-bg.png) repeat;padding: calc(8vh) 0 0;}
.unauth-center .content{box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);background: #07899f;}
.unauth-center .sidebar{display: flex;align-items: center;justify-content:center;height: 450px;}
.unauth-center .sidebar div{color: #fff;font-size: 40px;}
.unauth-center .topbar{background: #07899f;display: flex;align-items: center;justify-content:center;height: 100px;}
.unauth-center .topbar div{color: #fff;font-size: 40px;}
.unauth-center h1{color: #fff;margin: 0 0 0 10px;display: inline;font-size: 24px;}
.unauth-center .main-area{padding: 50px 30px 30px;background: #fff;min-height: 450px;}
.unauth-center .main-area .form-group{margin: 20px 0 0;}
.unauth-center .main-area label{font-size: 12px;font-weight: normal;color: #848484;}
.unauth-center .main-area h3{font-size: 20px;margin: 10px 0 30px;}
.unauth-center .main-area input.form-control{border: none;outline: none;box-shadow: none;padding-left: 0;padding-right: 0;border-bottom: 1px solid rgba(0, 0, 0, 0.1);border-radius: 0;}
.unauth-center .main-area input:focus{border-bottom: 1px solid rgba(0, 0, 0, 0.4);}
.unauth-center .main-area .has-success input.form-control{color:#3c763d;}
.unauth-center .main-area .has-error input.form-control{color:#a94442;}
.unauth-center .main-area .btn-submit{box-shadow: -2px 10px 20px -1px rgba(51, 204, 204, 0.4);background: #33cccc;color: #fff;padding: 8px 0;width: 100%;outline: none;}
.unauth-center .main-area .btn-submit:hover , .unauth-center .main-area .btn-submit:active{background: #47d1d1;}
.unauth-center .ext-url{text-align: center;margin: 15px 0 0;color: #999;font-size: 12px;}
.unauth-center .ext-url a{margin-left: 8px;}
.unauth-center .ext-url a:link , .unauth-center .ext-url a:visited , .unauth-center .ext-url a:hover , .unauth-center .ext-url a:active{color: #F44336;}
/* login */
.login .forget-pass{font-size: 12px;text-align: right;padding: 8px 6px 0 0;}
.login .forget-pass a:link , .login .forget-pass a:visited , .login .forget-pass a:hover , .login .forget-pass a:active{color: #999;}
/*register*/
.register .btn-getcode{margin-top: 2px;}
#registerCodeModal .code-area{padding:80px 0 150px;text-align: center;}
#registerCodeModal .modal-header{border-bottom:none;}
#registerCodeModal .code-area div{margin: 10px 0 0;}
#registerCodeModal .code-area div.captcha{width:150px;margin: 10px auto 0;}
#registerCodeModal .code-area input{padding:6px 12px;}
/*reset*/
.reset h5{padding: 60px 0;line-height: 30px;}
/*user menu*/
.panel-sidebar{max-width: 220px;}
.panel-heading{border: 1px solid #ddd;}
.panel-sidebar .list-group .iconfont{float: right;}
.panel-sidebar .list-group-item{padding-left: 30px;}
/*user common header*/
.user{background: #f7f7f7;padding: 20px 0;}
.user .content{background: #fff;border: 1px solid #ddd;border-radius: 4px;padding: 20px 15px 30px;min-height: 650px;overflow: hidden;}
.user h4.title{float: left;height: 22px;line-height: 22px;margin: 0;}
.user-header{border-bottom: 1px solid #e6eaec;padding-bottom: 20px;padding-top: 10px;}
.user-header a.btn-tool{float: right;margin: 0;}
@media(min-width:768px){
    .user{padding: 50px 0;}
    .user .content{padding: 20px 30px 30px;}
}
/*user center*/
.userhome .user-header{margin-bottom: 30px;}
.userhome .user-header .title{margin-top: 0px;}
.userhome .user-header p{padding: 6px 0 0;font-size: 12px;color: #999;}
.userhome .account-box{margin: 25px 0 10px;}
.userhome .account span{font-size: 22px;color: #d80e0a;}
.userhome .account-btns a.btn{padding: 2px 14px;margin: 6px 5px 0 0;}
.userhome .shortcuts{margin-top: 25px;}
.userhome .service-item{margin-bottom: 20px;}
.userhome .service-item a{color: #555;}
.userhome .service-item a:hover{text-decoration: none;}
.userhome .service-item .iconfont{font-size: 70px;color: #ccc;}
.userhome .service-item a:hover .iconfont{color: #83a9ca;}
.userhome .service-item p{font-size: 15px;font-weight: bold;color: #888;}
.userhome .service-item a:hover p{color: #83a9ca;}
.userhome .service-item .stat{line-height: 36px;border-radius: 37px;position: relative;top: -75px;left: -25px;background: #f7ea07;width: 37px;margin: auto;color: #fff;}
.userhome .service-item a:hover .stat{top: -80px;transition: all 0.2s ease-in-out;}
.userhome .recharge-activity-box{background: #f5f5f5;overflow: hidden;padding: 0 0 6px;}
.userhome .recharge-activity-box h4.title{margin: 10px 0 10px 10px;height: auto;font-size: 14px;font-weight: bold;float:none;}
.userhome .recharge-activity-item{background: #fff;margin: 0px 10px 10px;color: #666;overflow: hidden;font-size: 12px;padding: 5px 0 5px 12px;position: relative;}
.userhome .recharge-activity-item span{padding: 0 8px;color: #4CAF50;font-size: 20px;}
.userhome .recharge-activity-item span:last-child{color: #d80e0a;}
.userhome .recharge-activity-item a.btn-recharge{position: absolute;right: 10px;top: 15px;padding: 4px 12px;}
.userhome .recharge-activity-item .recharge-end-date{margin-top: 3px;}
.userhome .recharge-activity-item .recharge-end-date span{font-size: 12px;}
@media(min-width:992px){
    .userhome .user-header{padding: 20px 0 30px;}
    .userhome .user-header .title{margin-top: 10px;}
    .userhome .shortcuts{margin-top: 80px;}
    .userhome .account-box{margin: 0;}
    .userhome .account-btns a.btn{margin: 0 5px 0 0;}
    .userhome .recharge-activity-box{padding: 10px 10px 10px;}
    .userhome .recharge-activity-box h4.title{margin-bottom: 15px;}
    .userhome .recharge-activity-item{margin-bottom: 15px;padding-left: 25px;}
}
/*change password*/
.password .input-area{max-width: 300px;margin: 100px auto 100px;}
/*connects*/
.connects .list-box{margin-top: 30px;font-size: 12px;margin-bottom: 0;}
.connects .list-box tr td{vertical-align: middle;}
.connects .list-box th{background: #F5F8FA;color: #7f8fa4;}
.connects .table-hover>tbody>tr:hover{background: #e8faf3;}
.connects .table-no-data{padding: 10px 0;font-size: 12px;background: #f5f8fa;color: #6c949b;line-height: 20px;border-top: 1px solid #e5e6e7;}
.connects .table tr.expire{background: #e3e3e3;}
.connects .table tr.expire td{color: #9a9a9a;}
.connects .table-hover>tbody>tr.expire:hover{background: #e3e3e3;}
.connects tr.expire strong{color: #9a9a9a;}
.connects .expire strong , .connects .expire small , .connects .expire span{text-decoration: line-through;}
.connects .expire .manager{background: #bebebe;border: 1px solid #bebebe;}
.connects .btn{margin-top: 4px;}
.connects div.progress{margin-bottom: 0;min-width: 85px;height: 18px;position: relative;background-color: #d9d9d9;}
.connects div.surplus-label{position: absolute;text-align: center;top: 0;left: 0;right: 0;bottom: 0;color: #333;}
.connects tr.expire div.progress-bar-success{background-color: #ccc;}
.connects tr.expire div.surplus-label{color: #9a9a9a;}
/*connects detail*/
.connect-detail{}
.connect-detail .alert{margin: 10px 0;font-size: 12px;}
.connect-detail .product{background: #EFF3F6;padding: 42px;border-radius: 4px;margin-bottom: 10px;}
.connect-detail .product .label-name{margin: 20px 0;}
.connect-detail .btns{padding-bottom: 20px;}
.connect-detail .btns .btn{margin-right: 10px;margin-bottom: 10px;}
.connect-detail .product i{display: block;font-size: 40px;background: #000;color: #fff;width: 60px;height: 60px;line-height: 60px;border-radius: 60px;margin: auto;}
.connect-detail .property{padding: 10px 0;border-bottom: 1px solid #e6eaee;}
.connect-detail .nav>li>a{padding: 8px 12px;}
.connect-detail .tab-pane{margin: 30px 0 0;padding-left: 0px;}
@media(min-width:768px){
    .connect-detail .tab-pane{padding-left: 40px;max-width: 400px;}
}
.connect-detail .password-switch{margin-left: 5px;}
.connect-detail .code-copy{margin: 10px 0 0;}
.connect-detail div.progress{margin-bottom: 0;min-width: 80px;height: 18px;position: relative;background-color: #d9d9d9;}
.connect-detail div.surplus-label{position: absolute;text-align: center;top: 0;left: 0;right: 0;bottom: 0;color: #333;}
/*connects change label*/
.connect-change-label .alert{margin: 10px 0;font-size: 12px;}
.connect-change-label .tab-pane{margin: 30px 0 0;padding-left: 0px;}
@media(min-width:768px){
    .connect-change-label .tab-pane{padding-left: 40px;max-width: 300px;}
}
.connect-change-label .password-switch{margin-left: 5px;}
/*orders*/
.orders .list-box{margin-top: 30px;font-size: 12px;margin-bottom: 0;}
.orders .list-box tr td{vertical-align: middle;}
.orders .list-box th{background: #F5F8FA;color: #7f8fa4;}
.orders .table-hover>tbody>tr:hover{background: #e8faf3;}
.orders .table-no-data{padding: 10px 0;font-size: 12px;background: #f5f8fa;color: #6c949b;line-height: 20px;border-top: 1px solid #e5e6e7;}
.orders .btn{margin-top: 4px;}
/*order detail*/
.order-detail .alert{margin: 10px 0;font-size: 12px;}
.order-detail .status{color: #ff6800;font-size: 30px; padding: 10px 10px;}
.order-detail .item{overflow: hidden;padding: 10px 15px;}
.order-detail .item .item-label{display: block;font-weight: bold;}
.order-detail .item .item-value{display: block;font-size: 16px;padding-top: 10px;}
.order-detail .payment{border-top: 3px solid #29b6f6;padding: 30px 0 0;}
.order-detail .payment .form-group{margin-bottom: 30px;}
.order-detail .pay-item{margin: 0 30px 0 0;}
.order-detail .pay-item input{margin-top: 12px;}
.order-detail .pay-item img.alipay{width: 100px;}
.order-detail .pay-item a.btn{margin-left: 15px;}
.order-detail .balance{background: url(../img/balance.png) no-repeat;height: 35px;display: inline-block;padding: 0 0 0 42px;font-size: 14px;font-weight: bold;}
.order-detail .balance sub{display: block;padding-top: 6px;color: #ff6800;}
@media(min-width:768px){
    .order-detail .status{text-align: center;}
    .order-detail .item{padding-left: 10%;padding-right: 10%;}
    .order-detail .item .item-label{display: inline-block;}
    .order-detail .item .item-value{display: inline-block;}
    .order-detail .payment{padding: 50px 0 0;}
    .order-detail .payment .form-group{margin-bottom: 40px;}
}
/*order renew*/
.connect-renew .tab-pane{margin: 30px 0 0;padding-left: 0px;}
.connect-renew .btn-renew-submit{width: 100%;margin-top: 20px;}
@media(min-width:768px){
    .connect-renew .tab-pane{padding-left: 40px;padding-right: 20px;}
    .connect-renew .btn-renew-submit{width: auto;}
}
/*account-flow*/
.account-flow .list-box{margin-top: 30px;font-size: 12px;margin-bottom: 0;}
.account-flow .list-box tr td{vertical-align: middle;}
.account-flow .list-box th{background: #F5F8FA;color: #7f8fa4;}
.account-flow .table-hover>tbody>tr:hover{background: #e8faf3;}
.account-flow .table-no-data{padding: 10px 0;font-size: 12px;background: #f5f8fa;color: #6c949b;line-height: 20px;border-top: 1px solid #e5e6e7;}
.account-flow .btn{margin-top: 4px;}
.account-flow div.alert{margin: 20px 0 0;padding: 10px;font-size: 12px;text-align: center;}
/* account-recharge */
.account-recharge .recharge-activity-box{background: #f5f5f5;overflow: hidden;padding: 0 0 6px;margin-top: 30px;}
.account-recharge .recharge-activity-box h4.title{margin: 10px 0 10px 10px;height: auto;font-size: 14px;font-weight: bold;float:none;}
.account-recharge .recharge-activity-item{background: #fff;margin: 0px 10px 10px;color: #666;overflow: hidden;font-size: 12px;padding: 5px 0 5px 12px;position: relative;}
.account-recharge .recharge-activity-item span{padding: 0 8px;color: #4CAF50;font-size: 20px;}
.account-recharge .recharge-activity-item span:last-child{color: #d80e0a;}
.account-recharge .recharge-activity-item a.btn-recharge{position: absolute;right: 10px;top: 15px;padding: 4px 12px;}
.account-recharge .recharge-activity-item .recharge-end-date{margin-top: 3px;}
.account-recharge .recharge-activity-item .recharge-end-date span{font-size: 12px;}
.account-recharge .input-group-addon span{padding: 0 6px;color: #d80e0a;}
@media(min-width:992px){
    .account-recharge .recharge-activity-box{padding: 10px 10px 10px;}
    .account-recharge .recharge-activity-box h4.title{margin-bottom: 15px;}
    .account-recharge .recharge-activity-item{margin-bottom: 15px;padding-left: 25px;}
}
/* affiliate-pane */
.affiliate-pane .rules{background: #e6f7ff;padding: 1px 15px 15px;margin: 20px 0;}
.affiliate-pane .rules h3{font-size: 14px;padding: 0 0 6px;font-weight: bold;}
.affiliate-pane .rules p{color: #309cff;}
.affiliate-pane .pane-item{background: #f8f8f8;padding: 10px 20px 5px;margin-bottom: 15px;}
.affiliate-pane .pane-item:hover{background:#e6e6e6;}
.affiliate-pane a{text-decoration: none;}
.affiliate-pane .pane-item h4{font-size: 28px;color: #e70000;}
.affiliate-pane .pane-item h4 span{font-size: 14px;padding: 0 5px;color: #666;}
.affiliate-pane .pane-item p{color: #666;}
.affiliate-pane .new-invitation{margin-top: 20px;}
/* income */
.income .list-box{margin-top: 30px;font-size: 12px;margin-bottom: 0;}
.income .list-box tr td{vertical-align: middle;}
.income .list-box th{background: #F5F8FA;color: #7f8fa4;}
.income .table-hover>tbody>tr:hover{background: #e8faf3;}
.income .table-no-data{padding: 10px 0;font-size: 12px;background: #f5f8fa;color: #6c949b;line-height: 20px;border-top: 1px solid #e5e6e7;}
.income div.alert{margin: 20px 0 0;padding: 10px;font-size: 12px;text-align: center;}
/* invited-list */
.invited-list .list-box{margin-top: 30px;font-size: 12px;margin-bottom: 0;}
.invited-list .list-box tr td{vertical-align: middle;}
.invited-list .list-box th{background: #F5F8FA;color: #7f8fa4;}
.invited-list .table-hover>tbody>tr:hover{background: #e8faf3;}
.invited-list .table-no-data{padding: 10px 0;font-size: 12px;background: #f5f8fa;color: #6c949b;line-height: 20px;border-top: 1px solid #e5e6e7;}
/* affiliate-new */
.affiliate-new .invite-type{padding: 20px 0 0;}
.affiliate-new .pane-item{background: #f8f8f8;padding: 10px 20px 5px;margin-bottom: 15px;}
.affiliate-new .pane-item:hover{background:#e6e6e6;}
.affiliate-new a{text-decoration: none;}
.affiliate-new .pane-item h4{font-size: 20px;color: #009688;}
.affiliate-new .pane-item h4 span{font-size: 14px;padding: 0 5px;color: #666;}
.affiliate-new .pane-item p{color: #666;}
.affiliate-new .pane-item span{padding: 0 5px;color: #e70000;}
/* affiliate-new-url */
.affiliate-new-url .url-body{padding: 20px 0 0;}
.affiliate-new-url .code-copy{margin-top: 10px;}
.affiliate-new-url .help-block span{padding: 0 5px;color: #e70000;}
/* affiliate-new-email */
.affiliate-new-email .input-area{padding: 40px 0 20px;}
.affiliate-new-email .form-group{margin-bottom: 30px;}