.nav-title{
    margin:60px auto 0px;
    text-align: center;

    width: 150px;
    height: 50px;
    padding: 10px;
    font-weight: normal;


}
.cus-service,.mer-service,.pro-service{
    text-align: center;
  /*  border: 1px solid #ccc;*/

    height: 70px;
    padding: 10px;
    cursor: pointer;
    font-size:14px;
    float: left;
}
.choose-role{
    height: 80px;
    width: 100%;
    margin-top:45px;
   /*  margin-bottom:20px; */
    padding-left: 25%;
    background-color: #fff;
    padding-top:10px;
}
.mer-service{
	margin-left:15%;
    cursor: pointer;
}
.cus-service{
    cursor: pointer;
}
.service-foot{
    text-align: center;
    margin-top:50px;
}
.ser-bind{
    margin:auto;
    margin-left: 20px;
    font-size:14px;
    margin-top: 50px;
}


.ser-bind input{
  	width: 85%;
    background-color: #fff;
    margin-left:7%;
    padding-left:14%;
    /* border-radius: 20px; */
}

.get-message,.get-message1{
    background: none;
    border: none;
    position: absolute;
    right: 30%;
    color: #666;


}
.bind-btn{
    border-radius: 20px;
    margin-top: -20px;
}
.get-message .code-line,.get-message1 .code-line1{
    color: #ccc;
    position: absolute;
    left: 0;
}
.role-select{
    overflow: hidden;
    margin-bottom: 20px;
}
.role-select .role-boss{
    float: left;


}
.role-select .role-boss label,.role-select .role-staff label{
    padding-top:18px;
    font-weight:normal;
    font-size:14px;
}
.role-select .role-staff{
    float: left;
    margin-left: 4%;

}
.role-number{
    display: none;
}


.logoImg img{
    width: 150px;
    height: 50px;
}
body,html{
   /* background-color: #fff;*/
     height:100%;
    overflow:auto;
    margin: 0;
}
.service-foot p{
    position: absolute;
    z-index:11;
    left: 40%;
    top: 93%;
    -webkit-transform: translateZ(0);
}
.staff-choose form{
    background-color: #eee;
}
.bindChoose-img img{
    width: 35px;
    height: 35px;
    margin-top: 7px;
}
.bindChoose-img{
    width: 50px;
    height: 50px;
    background-color: #00aaef;
    display: inline-block;
    border-radius: 50%;
    margin-bottom: 10px;
    line-height:40px;
}

.role-icon img{
    width: 25px;

}
.role-icon{
    position: absolute;
    top: 8px;
    left: 10%;
}
.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
    color: #00aaef;
}
.mcht-role{
    background-color: #fff;
    padding-bottom:20px;
}
.manage-role{
    background-color: #fff;
    padding-bottom:20px;
    padding-top:20px;
}
.mcht-role .mui-content{
    background-color: #fff;

}
.mcht-role .mui-content .role-select{
    border-bottom: 1px solid #eee;
    height: 55px;
    line-height: 55px;
    text-align: center;
    font-size: 14px;
    padding-left: 21%;
}

.blueColor{
    background-color:#00aaef ;
}
.grayColor{
    background-color:#ccc;
}
#MchtImg{
    background-color:#ccc;
}
.shop-manager,.shop-staff{
    padding: 5px 20px;

    color: #fff;
    border-radius: 20px;
}
/*
.shop-manager{
    background-color:#00aaef ;
}
.shop-staff{
    background-color:#ccc ;
}*/

.role-boss label{
    margin-left:55px;
}


.mui-input-row .mui-btn{
    width: 28%;
    padding: 12px 15px;
    margin-right: -14%;
}

		.mui-input-group{
            box-shadow:0 0 10px #888888;
            /*height:200px;*/
            height: auto;
            width:90%;
            padding-bottom: 20px;
        }
        
        #btn{
        	background-color: #424D5E;
        	left:18%;
        	width: 249px;
			text-align: center;
			dispaly:block;
			color:#ffffff;
        }
        
        .mui-input-clear{
        	width:20px;
        }
        
        a:hover{
        	color:#000000;
        	text-decoration:underline;
        	font-weight:bold;
        }
        /* a:link{
        	color:#000000;
		    text-decoration:none;
		    position:relative;
        }
        a:after{
		    width: 0px;
		    height: 3px;
		    background: #000000;
		    position: absolute;
		    bottom: 0;
		    left: 50%;
		    transition: all .2s;
		}
		a:hover:after,a.active:after{
		    left: 20%;
		    width: 80%;
		    font-weight:bold;
		} */
        
        .nav{
        	/* font-weight:bold; */
        	font-size:20px;
        	width:100%;
        	height:50%;
        }
        .mui-content-padded{
        	margin-top:120px;
        	width:100%;
        	height:50%;
        }
        .welcome{
       		 margin-top:30px;
        }
        /* .mui-input-row{
        	margin-top:20px;
        } */
        .unbind-click{
		    margin-top:130px;
		    margin-left:10%;
		    font-size:20px;
		
		}
		.unbind-click button{
        	background-color: #424D5E;
        	width:80%;
        	height:50%;
        	color: #ffffff;
		}




.role-content{
    background-color: #fff;
    padding-bottom:20px;
    padding-top:20px;
}
.text-centent{
    text-align: center;
}
.role-form-height{
    height: 150px;
}
.top-div{
    height:100px
}
.top-div-left{
    width:50%;
    float: left;
    text-align: center;
    margin-top: 20px
}
.bottom-checked{
    border-bottom:solid 3px #566e7a;
    width: 60%;
    margin-left: 20%;
    padding-bottom: 10px;
}
.top-div-right{
    width:50%;
    float: right;
    text-align: center;
    margin-top: 20px
}
.bottom-unchecked{
    width: 60%;
    margin-left: 20%;
    padding-bottom: 10px;
}
.top-flex-div{
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.item{
    text-align: center;
    line-height: 100px;
    width: 33.3%;
    margin-left: 20px;
    margin-right: 20px;
    flex-grow: 1;
}
.flex-item-checked{
    border-bottom: solid 3px #566e7a;
}
.alert-danger::before{
    display: table;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
}
.alert{
    margin-bottom: 0;
    padding: 5px;
    font-size: 12px;
}
.row-height-auto{
    height: auto!important;
}

/*首页样式*/
.index-content {
    height: 100%;
    width: 100%;
    /*background-image: url("../images/bg.png");*/
    background-image: url("../images/new_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}
.btns-container{
    position: absolute;
    bottom: 7.1%;
    width: 60%;
    left: 20%;
}
.index-btn{
    height: 48px;
    width: 100%;
    /*background-image: url("../images/btn_bg.png");*/
    /*background-image: url("../images/newBtnBg.png");*/
    background: linear-gradient(to right, #C9BDF9, #AA99F7);
    background-size: 100%;
    border-radius: 14px;
    color: #FFFCF8;
    font-size: 18px;
}
.margin-bottom{
    margin-bottom: 30px;
}
.margin-bottom-40{
    margin-bottom: 40px;
}
.index-container {
    background: white;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-row-div{
    display: flex;
    flex-direction: row;
}
.c-center{
    align-items: center;
    justify-content: center;
}
.w-pre-100{
    width: 100%;
}
.w-pre-90{
    width: 90%;
}


/***************图形验证样式****************/
.code-input{
    width: calc(90% - 100px) !important;
}
.code-img-container{
    display: inline-block;
    width: 100px;
    height: 40px;
}
.code-img-container > img{
    width: 100%;
    height: 100%;
}