.x-mask{
	background: rgba(100,100,100,.4);
}


.login{
	background: url('../img/loginbg.jpg') no-repeat;
	background-size: cover;
}

.loginWin, .verificationwin, .loginqrcode, .downloadqrcode{
	background: #fff;
	border-radius: 3px;
	box-shadow: 0px 0px 15px 5px rgba(100,100,100,.2);
}

.loginWin .loginWinTitle{
	font-size: 20px;
	color: #34a7d3;
	text-align: center;
}

.loginWin .loginWinInputs p{
	position: relative;
	margin: 0;
}

.loginWin .loginWinInputs p input{
	width: 100%;
	height: 38px;
	font-size: 12px;
	padding-left: 36px;
	margin-bottom: 14px;
	border: 1px solid #cccccc;
	border-radius: 2px;
}

.loginWin .loginWinInputs p::before{
	content: '';
	position: absolute;
	top: 9px;
	left: 8px;
	width: 20px;
	height: 20px;
	background-size: cover;
}
.loginWin .loginWinInputs p:nth-child(1)::before{
	background: url('../img/user.png') no-repeat;
}
.loginWin .loginWinInputs p:nth-child(2)::before{
	background: url('../img/password.png') no-repeat;
}
.loginWin .loginWinInputs p:nth-child(3)::before{
	background: url('../img/vericon.png') no-repeat;
}

.loginWin .loginWinInputs .verCode input{
	width: 160px;
}

.loginWin .loginWinInputs .verCode img{
	position: absolute;
	right: 0;
}

.loginWin .loginWinBtn button{
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 2px;
	font-size: 12px;
	color: #fff;
	background: #36a6d4;
	cursor: pointer;
}

.loginWin .verificationKey,.loginWin .loginqrcode{
	text-align: center;
}

.loginWin .verificationKey span{
	font-size: 18px;
	color: #34a7d4; 
	cursor: pointer;
}

.loginqrcode .qrcodeImg img,
.downloadqrcode .qrcodeImg img{
	display: block;
	margin: 0 auto;
}
.downloadqrcode .qrcodeMsg p{
	text-align: center;
	font-size: 16px !important;
}
.loginqrcode .qrcodeMsg p,
.downloadqrcode .qrcodeMsg p{
	display: block;
	margin: 0 auto;
	width: 185px;
	font-size: 14px;
	margin-bottom: 15px;
}

.loginqrcode .qrcodeMsg .link{
	text-align: center;
}

.loginqrcode .qrcodeMsg .link span{
	font-size: 16px;
	color: #37a8d3;
	cursor: pointer;
}

.verificationwin .closeIcon span,
.loginqrcode .closeIcon span,
.downloadqrcode .closeIcon span{
	float: right;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background: url('../img/grayclose.png') no-repeat;
}

.verificationwin .verTitle p{
	text-align: center;
	margin: 0;
	font-size: 20px;
	color: #36a6d6;
}

.verificationwin .verKeyContainer p{
	margin: 0 0 14px;
	font-size: 14px;
	color: #989898;
}

.verificationwin .verKeyContainer input{
	margin: 0 0 20px;
	height: 36px;
	width: 100%;
	padding: 6px;
	border: 1px solid #cccccc;
	border-radius: 2px;
	font-size: 14px;
}

.verificationwin .verKeyContainer .btns{
	margin-top: 47px;
}

.verificationwin .verKeyContainer .btns button{
	width: 119px;
	height: 34px;
	font-size: 12px;
	border: 1px solid #34a7d4;
	border-radius: 2px;
	cursor: pointer;
}

.verificationwin .verKeyContainer .btns .ok{
	float: left;
	background: #34a7d4;
	color: #fff;
}

.verificationwin .verKeyContainer .btns .cancel{
	float: right;
	background: #fff;
	color: #34a7d4;
}



.mainContainer .mainTitle{
	background: #38a9d5;
}

.mainContainer .mainTitle p{
	display: inline-block;
	margin: 0 0 0 15px;
	font-size: 18px;
	height: 50px;
	line-height: 50px;
	color: #fff;
}

.mainContainer .mainTitle .logout{
	-webkit-user-select: none;
	float: right;
	width: 96px;
	height: 28px;
	margin: 11px 15px;
	border-radius: 3px;
	background: #4cb3de;
	cursor: pointer;
}

.mainContainer .mainTitle .logout i{
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 4px 0 0 10px;
	background: url('../img/exit.png') no-repeat;
}

.mainContainer .mainTitle .logout span{
	float: right;
	height: 28px;
	font-size: 14px;
	color: #fff;
	line-height: 28px;
	margin-right: 15px;
}


.sidemenu{
	border-right: 1px solid #e0e0e0;
	background: #f8f8f8;
}

.sidemenu .sideMenuTitle p{
	height: 43px;
	line-height: 43px;
	margin: 0;
	padding-left: 19px; 
	font-size: 16px;
	color: #333333;
}

.sidemenu .menu ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidemenu .menu li{
	-webkit-user-select: none;
	position: relative;
	width: 100%;
	height: 39px;
	cursor: pointer;
}

.sidemenu .menu li p{
	margin: 0;
	height: 39px;
	line-height: 39px;
	font-size: 14px;
	text-indent: 52px;
}

/*.sidemenu .menu li:hover{
	background: #f0f0f0;
	border-right: 5px solid #dedede;
}*/

.sidemenu .menu .select{
	background: #f0f0f0;
	border-right: 5px solid #dedede;
}

.sidemenu .menu li i{
	position: absolute;
	top: 8px;
	left: 17px;
	width: 22px;
	height: 22px;
}

.sidemenu .menu li .icon-lock{
	background: url('../img/lock.png') no-repeat;
}

.sidemenu .menu li .icon-delete{
	background: url('../img/delete.png') no-repeat;
}


.mainbodycontent{
	background: #fff;
}

.mainbodycontent .devicePage .contentNav,
.mainbodycontent .passwordPage .contentNav{
	-webkit-user-select: none;
	background: #f8f8f8;
	border-bottom: 1px solid #e0e0e0;
	cursor: default;
}

.mainbodycontent .devicePage .contentNav .nav-c,
.mainbodycontent .passwordPage .contentNav .nav-c{
	width: 100%;
	height: 42px;
	padding-left: 14px;
}

.mainbodycontent .devicePage .contentNav .nav-c span,
.mainbodycontent .passwordPage .contentNav .nav-c span{
	height: 42px;
	line-height: 42px;
	font-size: 16px;
}

.mainbodycontent .devicePage .contentNav .nav-c .icon-arrows,
.mainbodycontent .passwordPage .contentNav .nav-c .icon-arrows{
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url('../img/rightarrows.png') no-repeat;
}

.mainbodycontent .devicePage .deleteDevice,
.mainbodycontent .passwordPage .deleteDevice{
	position: relative;
}

.mainbodycontent .devicePage .deleteDevice p,
.mainbodycontent .passwordPage .devicePassword p{
	margin: 0 0 8px;
	font-size: 14px;
}

.mainbodycontent .devicePage .deleteDevice input,
.mainbodycontent .passwordPage .devicePassword input[type="text"]{
	width: 100%;
	height: 36px;
	padding-left: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 22px;
}

.mainbodycontent .devicePage .deleteDevice button,
.mainbodycontent .passwordPage .devicePassword button{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 132px;
	height: 32px;
	border: none;
	border-radius: 2px;
	background: #34a7d4;
	color: #fff;
	cursor: pointer;
}

.mainbodycontent .passwordPage .devicePassword .icon{
	position: relative;
	height: 36px;
	padding-left: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 22px;
}
.mainbodycontent .passwordPage .devicePassword .icon input{
	width: 255px;
	height: 34px;
	border: none;
}
.mainbodycontent .passwordPage .devicePassword .icon-calendar:after{
	position: absolute;
	top: 9px;
	right: 10px;
	content: '';
	display: block;
	width:20px;
	height: 20px;
	background: url('../img/calendar.png') no-repeat;
	cursor: pointer;
}
.mainbodycontent .passwordPage .devicePassword .icon-downarrows:after{
	position: absolute;
	top: 12px;
	right: 8px;
	content: '';
	display: block;
	width:20px;
	height: 20px;
	background: url('../img/downarrows.png') no-repeat;
}


.oneButtonPrompt,
.twoButtonPrompt{
	background: #fff;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0px 0px 15px 5px rgba(100,100,100,.2);
}

.oneButtonPrompt .title,
.twoButtonPrompt .title{
	position: relative;
	background: #38a9d5;
	height: 40px;
}
.oneButtonPrompt .title p,
.twoButtonPrompt .title p{
	margin: 0;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #fff;
}
.oneButtonPrompt .title .icon-close,
.twoButtonPrompt .title .icon-close{
	position: absolute;
	top: 10px;
	right: 10px;
	display: block;
	width: 20px;
	height: 20px;
	background: url('../img/whiteclose.png') no-repeat;
	cursor: pointer;
}
.oneButtonPrompt .msg,
.twoButtonPrompt .msg{
	margin: 27px 0 0 20px;
}
.oneButtonPrompt .btn ,
.twoButtonPrompt .btn {
	position: absolute;
	bottom: 14px;
	right: 18px;
}
.oneButtonPrompt .btn button,
.twoButtonPrompt .btn button{
	width: 96px;
	height: 32px;
	border-radius: 4px;
	border: none;
	color: #fff;
	background: #38a9d5;
	cursor: pointer;
}
.twoButtonPrompt .btn button{
	margin-left: 10px;
}
.twoButtonPrompt .msg i{
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 5px;
	background: url('../img/question.png') no-repeat;
}
.twoButtonPrompt .msg p{
	position: relative;
	top: -5px;
	margin: 0;
	display: inline-block;
}