﻿
*{
       margin:0;
       padding: 0;

        }
button,a {outline:0 none !important; blr:expression(this.onFocus=this.blur());}
a {
  color: #EDEDED;
  text-decoration: none;
}
html{
       width: 100%;
       font-size: 1.2rem;
	  /* background-image: url(../images/login_backgroundimg.png);*/
	   background-size: cover;
        }


body{

	width: 100%;
	color: #444;
  	font: 100%/1.5 sans-serif;
  	/*margin: 1em auto 2em;*/
  	/*max-width: 30em;*/
  	/*padding: 0 1em;*/
    -moz-user-select: none; /*火狐*/ /*禁止用户在页面选择文字*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}

.head-middle {
    font-size: 14px;
}

input {
  font-family: sans-serif;
  font-size: 100%;
  line-height: normal;
  background-color:rgba(0,0,0,0);
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(210,210,210,0.7);

}

h1 {
  font-size: 1.25em;
  line-height: 1.25;
  margin: 1.5em 0 0.5em;
}

h2 {
  border-top: 3px solid #e6e6e6;
  font-size: 1.125em;
  line-height: 1.5;
  margin: 1.5em 0 1em;
  padding-top: 1em;
}
p {
  margin: 0 0 1em; /* 1.5em; */
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

figure {
  margin: 0 0 1.5em;
}

figcaption {
  color: #999;
  font-size: 0.875em;
  margin-top: 0.5em;
  /*text-align: center;*/
}

.login {
  margin-top: 3rem;
	padding: 0 0.5rem;
}
.login-field {
  color: #ededed;
}

.login-label,
.login-field {
    display: block;
}

.login-label {
  font-size: 0.7em;
  padding: 0.57142857142857em 0.57142857142857em 0.28571428571429em;
  color: black;
}

.inputplaceholder .login-label {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  color: #ededed;
}

.login-field {
  background-color: rgba(255,255,255,0.00);
/*  border: 2px solid #ccc;*/
    color: black;
  margin: 0;
  padding: 0.50rem;
  position: relative;
  width: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.login-field:focus {
/*  border-color: #EDEDED;*/
  outline: transparent;
  
  z-index: 2;
}

.inputplaceholder .login-field-username {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: -2px;
}

.inputplaceholder .login-field-password  {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.input-val{
	width: 65%;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.login-footer {
  padding: 0.25em 0.5em 0.5em;
}

.hideShowPassword-toggle,
.my-toggle {
  z-index: 3;
}

.btns {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}

.btns li {
  display: inline-block;
  margin-left: 0.5em;
}

.btns li:first-child {
  margin-left: 0;
}

.btn {
/*  background: #0088cc;*/
/*  border-radius: 0.25em;*/
  color: #fff;
  display: inline-block;
  padding: 0em 1em;
}

/*.btn:hover,
.btn:focus {
  background-color: #0077b3;
  outline: transparent;
}*/

.byline {
  color: #999;
  border-top: 3px solid #e6e6e6;
  font-size: 0.875em;
  padding-top: 1em;
}


.login_img{
	width: 3rem;
	height: 3rem;
	margin: 0 auto;
	padding: 0;
	background: url(../images/login.png) no-repeat;
	background-size: 3rem 3rem;
			
	
}
       
#canvas{
	width: 30%;
	height: 2rem;
	position: relative;
    left: 70%;
	bottom: 2rem;
    display: inline-block;
	background-color: rgba(255,255,255,0.71);
            /*border:1px solid #ccc;*/
    border-radius: .3rem;
    cursor: pointer;
	font-size: 1rem;
}

.phonecode {
    width: 30%;
    height: 2rem;
    position: relative;
    left: 70%;
    bottom: 2.4rem;

    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
    display: inline-block;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 4px;
}

span{
	position: relative;
	left: 2.0rem;
	top:-3.8rem;
	color: #EDEDED;
	font-size: 0.7rem;
			
}

input#username-1,
input#password-1,
input.login-field.input-val{
	font-size: 0.8rem;
}


.resetpw{
	position: relative;
	left: 50%;
	top:-3.8rem;
	font-size: 0.7rem;
			
}

		
.btn{
    width: 40%;
    height: 2rem;
     background: #0f9ae0;
     border: 0px solid rgba(255,255,255,0.0); 
     border-radius: 20px;
	padding-bottom: 0.3rem;
     margin: 20px auto 0;
     display: block;
     font-size: 0.8rem;
     color: white;
     cursor: pointer;
	 outline:none;
	 position: relative;
	 top: -1rem;
    /*z-index: 9999;*/
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.btn-pic{
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
