@charset "utf-8";

$white-color:#fff;
$blue-color:#3382b8;

$font-size:14px;
$font-color:#666;
$font-title-color:#333;
$border-radius:4px;

@import "reset";

.monitorWrap {
	position:relative;
	width:100%;
	height:100%;
	background:$white-color;
	font-size:$font-size;
	color:$font-color;
	.monitorBody{
		position:absolute;
		left:0;
		right:0;
		top:13%;
		bottom:13%;
		background:#2f78c7 url(images/login-bg.jpg) no-repeat center;
		&:before,
		&:after {
			position:absolute;
			content: "";
			left: 0;
			right:0;
			height: 14px;
			z-index: 0;
		}
		&:before {
			background:url(images/login-bg-before.png) no-repeat center;
			top:0;
		}
		&:after {
			background:url(images/login-bg-after.png) no-repeat center;
			bottom:0;
		}
		.monitorLoginBox{
			position: absolute;
		    right: 9%;
		    top: 50%;
		    margin-top: -190px;
		    z-index: 2;
		    h1 {
				font-size: 34px;
			    color: $white-color;
			    line-height: normal;
			    font-weight: normal;
			    text-align: center;
			    letter-spacing: 4px;
			    margin-bottom: 30px;
			    text-shadow: 0 0 5px rgba(#0075b5,.3);
			}
		}
		.monitorbox{
			background:$white-color;
			border:1px solid #69efff;
			padding:20px 50px 50px 50px;
			border-radius:$border-radius;
		}
	}
	.monitorHead,
	.monitorFooter {
		height: 13%;
	}
	.monitorFooter {
		position: absolute;
	    bottom: 0;
	    right: 0;
	    left: 0;
	    text-align: center;
	    line-height: 35px;
	}
}
.loginImg{
   width: 230px;
    height: auto;
    margin-bottom: 20px;
}

#form1{
	padding:0;
}
.cloudTxt,
.cloudForm{
	width:254px;
	position:relative;
}
.textinput,
.logobtn{
	width:100%;
	padding:12px;
	box-sizing:border-box;
	border-radius:4px;
	box-shadow: none;
	margin-bottom: 20px;
	font-size:$font-size;
	font-weight: bold;
    color: $font-title-color;
    border: 1px solid $blue-color;
}
.textinput{
	padding-left:44px;
	font-weight: normal;
}
.cloudForm .iconuser,
.cloudForm .iconpwd{
	position:absolute;
	left:10px;
	top:9px;
	z-index:1;
	color:$blue-color;
	font-size:23px;
}
.cloudRember {
	span,
	input{
		vertical-align: middle;
	}
}
.logobtn{
	background:$blue-color;
	text-align:center;
	color:#fff;
	letter-spacing:10px;
	margin-top:15px;
	margin-bottom:0;
	cursor:pointer;
}
.logobtn:hover {
	background:lighten($blue-color,5%);
}
.jcaptchaEnabledbox .textinput{
	width:65%;
	background-image:none;
	padding-left:13px;
}
#verification-code{
	width:32%;
	display:inline-block;
}
#verification-code img{
	max-width:100%;
}
.cloudremeber{
	text-align:right;
	margin-top:5px;
}
.cloudremeber label,
.cloudremeber input{
	vertical-align:middle;
	color:#afdcf8;
	margin:0;
}
.errortext{
	position: absolute;
    text-align: center;
    width: 100%;
    color: #bb2626;
    font-size: 12px;
}


input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow : 0 0 0px 1000px $white-color inset ;
}