body{font-family: 'Roboto', sans-serif; color:#666; font-size:14px; color:#333}
li,ul,body,input{margin:0; padding:0; list-style:none}
#login-form-wrapper{
	width:98%;
	margin: 10px auto;
}
#login-form{
	width:350px; 
	margin: auto;
	padding: 10px 0 0 0; 
	background:#fffff;
	border: 1px solid #cccccc;
	overflow:hidden; 
	text-align:center;
}
/*sectiop*/
.section-out{width:700px; float:left; transition:all 600ms ease}
.section-out:after{content:''; clear:both; display:table}
.section-out section{width:350px; float:left}

.login{padding:20px;}
.ul-list{clear:both; display:table; width:100%}
.ul-list:after{content:''; clear:both; display:table}
.ul-list li{ margin:0 auto; margin-bottom:5px}
.input{background:#fff; transition:all 800ms; width:247px; border-radius:3px 0 0 3px;  border:solid 1px #ccc; border-right:none; outline:none; color:#999; height:40px; line-height:40px; display:inline-block; padding-left:10px; font-size:16px}
.input,.login span.icon{vertical-align:top}
.login span.icon{width:50px; transition:all 800ms; text-align:center; color:#999; height:40px; border-radius:0 3px 3px 0; background:#e8e8e8; height:40px; line-height:40px; display:inline-block; border:solid 1px #ccc; border-left:none; font-size:16px}
.input:focus:invalid{border-color:red}
.input:focus:invalid+.icon{border-color:red}
.input:focus:valid{border-color:green}
.input:focus:valid+.icon{border-color:green}
.btn{border:none; outline:none; background:#965c1e; font-family: Tahoma,Arial,Helvetica,sans-serif; margin:0 auto; display:block; height:40px; width:100%; padding:0 10px; border-radius:3px; font-size:16px; color:#fee4b4}
.btnDis{background:#CCCCCC;}

.form a i.fa{line-height:35px}
.fb{background:#305891} .tw{background:#2ca8d2} .gp{background:#ce4d39} .in{background:#006699}
.label{display: none; float: left; font-size:14px; color:#999; margin: 0 0 0 0;}
.label-wrapper{height: 16px; margin: 0 0 3px 0;}

@font-face {
  font-family: 'icomoon';
  src:  url('/fonts/icomoon.eot?ohym62');
  src:  url('/fonts/icomoon.eot?ohym62#iefix') format('embedded-opentype'),
    url('/fonts/icomoon.ttf?ohym62') format('truetype'),
    url('/fonts/icomoon.woff?ohym62') format('woff'),
    url('/fonts/icomoon.svg?ohym62#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-calculator:before {
  content: "\e940";
}
.icon-user:before {
  content: "\e971";
}
.icon-lock:before {
  content: "\e98f";
}
.icon-mail:before {
  content: "\ea83";
}
.information{
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 300px;
  font-size: 14px;
  margin: 0 auto 10px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  display: none;
}
.dottedLink{
	text-decoration: none; 
	border-bottom: 1px black dotted
}
.help1{
 margin: 0 0 0 5px;
}
/*for password strength*/
#strength-indicator{
	width: 97.5%;
	height: 25px;
	border: 1px solid #DDD;
	border-radius: 4px;
	text-align: center;
	font: 12px/25px Arial, Helvetica, sans-serif;
}
.very_weak{
	border: 1px solid #FF9191;
	background: #FFC7C7;
	color: #94546E;
}
.weak{
	border: 1px solid #FBB;
	background: #FDD;
	color: #945870;
}
.medium{
	border: 1px solid #C4EEC8;
	background: #E4FFE4;
	color: #51926E;
}
.strong{
	border: 1px solid #6ED66E;
	background: #79F079;
	color: #348F34;
}
.very_strong{
	border: 1px solid #379137;
	background: #48B448;
	color: #CDFFCD;
}