html,
body {
height: 100%;
}
body {
background-color: #f5f5f5;
}
form {
width: 100%;
max-width: 400px;
padding: 15px;
margin: 0 auto;
display: block;
}
form .checkbox {
font-weight: 400;
}
form .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
form .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.registerSection {
display: inline-block;
}
.form-signup {
display: none;
}
.form-signup input[type="email"] {
margin-bottom: 20px;
}
.form-signup #inputPasswordSignUp {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signup #inputPasswordSignUpRepeat {
margin-bottom: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#pwdContainer {
position: relative;
}
#passwordInfo {
position: absolute;
top:0px;
left:400px;
min-width: 300px;
border: 1px solid silver;
border-radius: 3px;
background-color: white;
font-size: 14px;
padding: 10px;
min-height: 88px;
box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.2);
display: none;
}
meter {
margin: 10px auto 1em;
width: 100%;
height: 0.5em;
}
/* Webkit based browsers */
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }
/* Gecko based browsers */
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }
p[id^="pwdStrength"] {
display:none;
}
#pwdStrengthTextHelper {
word-wrap: none;
white-space: nowrap;
text-align: left;
}