/*
Author:       SMART CHINESE TEACHER
Description:  This css file is for login area used in cnpinyin login plugin
Author: Md Altab Hossin
Author URI:   cnpinyin.com
Version:      1.0
*/

/***** login area common*/
#login h1{display:none;}
.login-logo{text-transform: uppercase;}
.login-desc{font-family: verdana}
#loginform{margin-top:5px;border: 1px solid #d1d1d1;border-radius: 5px;padding: 0.625em;}
#loginform p {margin-top:5px !important;}
.message{color:#993366;}
.wp-pwd{display:block;float:left; width:100%;background: #f7f7f7;border: 1px solid #d1d1d1;border-radius:2px;margin:0 0 5px 0;padding:0;}
.password-input{width:87%;border:0 !important;}
.wp-hide-pw{padding:0.4em;margin:0;background:none;border:none;color:black;}
.wp-hide-pw:hover{padding:0.4em;background-color:#e5e5e5;color:black;border: 1px solid #e5e5e5;border-radius:15px;}
#pass-strength-result{margin-left:0% !important;width:100% !important;margin:0 !important;background-color: #c3ff88;border-color: #8dff1c;}
#user_login{margin-bottom:5px;}
#nav{margin-top:5px;}
#login_error {border-left:red 5px solid;color:darkred;}

/***** password reset message common*/
p.reset-pass{color:#993366;}
#resetpassform:before{content:"You also can use the auto generated password";color:red;}
.reset-pass a{display:block;margin-top:10px;color:darkgreen;}
.reset-pass :after{content:"  to enjoy the products now →";}

/*** min width = 0 by default */
.login-branding{display:none;}
#login{width:94%;text-align: center;}
.password-input{display:block;float:left;width:87% !important;}
.wp-hide-pw{left:88%;top:10% !important;}
.submit{text-align:center !important;}
.button-primary{width:50%}

@media screen and (min-width: 736px) {
.login-branding,#login{display:inline-block;vertical-align: middle;padding:0;margin:5% 0 2% 0;}
.login-branding{width:35%;margin-left:2%;text-align: center;}
#login{width:57%; margin-left:3%;}
}

@media screen and (min-width: 900px) {
	#login{width:48%;}
	.login-branding{margin-left:8%;}
}
@media screen and (min-width: 1024px) {
#login{width:42%;}
}

@media screen and (min-width: 1200px) {
#login{width:38%;}
.login-branding{margin-left:10%;}
}

@media screen and (min-width: 1400px) {
#login{width:32%;}
.login-branding{width:30%;margin-left:15%;}
}