body.login {
	background-color: #fcfcfc;
	height: auto;
}

body.login a {
	transition: 0.3s all ease-in-out;
}
.login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover {
    color: var(--colorMain);
}
.login #login {
	background: #fff;
	width: 280px;
	margin-top: 8%;
	padding: 20px;
	box-shadow: 0 0 10px 0 rgba(100, 100, 100, .2);
}

/*iframe style*/
@media screen and (max-height: 550px) {
	.login #login {
		margin-top: 10px;
	}
}

.login #login:before,
.login #login:after {
	content: '';
	display: block;
	clear: both;
}

.login #loginform {
	margin-top: 0;
	border-radius: 3px;
}

.login #loginform .button {
	text-shadow: none;
	border: none;
	border-radius: 4px;
	box-shadow: none;
	height: auto;
	padding: 5px 20px;
	border: none;
	transition: 0.3s all ease-in-out;
    background-color: var(--colorMain);
}
.login #loginform .button:hover {
    background-color: #444444;
}

.login #login > h1 {
	display: none;
}

.login form .input,
.login input[type=password],
.login input[type=text] {
	border: none;
	background: #f5f5f5;
}

.login form .input:focus,
.login input[type=password]:focus,
.login input[type=text]:focus {
	box-shadow: 0 0 0 1px #dddddd inset;
}

.login form#loginform {
	padding: 0;
	border: none;
	box-shadow: none;
}

.login #login > p#backtoblog,
.login #login > p#nav {
	position: relative;
	line-height: 1.35;
	margin: 20px 0 0;
	padding: 0;
	width: 54%;
	float: right;
}

.login #login > p#nav {
	text-align: right;
	width: 46%;
}

.login form .forgetmenot {
	padding: 10px 1px 1px;
}
.login form .forgetmenot input[type="checkbox"]{
    border-color: #ddd;
}
.login form .forgetmenot input[type="checkbox"]:checked:before{
    font-family: Dashicons;
    content: "\f147";
    color: var(--colorMain);
    font-size: 22px;
    line-height: 1;
    width: auto;
    height: auto;
    margin: 0;
    position: relative;
    left: -4px;
    bottom: 4px;
}
.login form .forgetmenot input[type="checkbox"]:focus{
    border-color: var(--colorMain);
    box-shadow: 0 0 0 1px var(--colorMain);
}

.login .button.wp-hide-pw .dashicons {
	right: .5rem;
}
.login #loginform .button.wp-hide-pw {
    background-color: transparent;
    color: var(--colorMain);
}
.login #loginform .button.wp-hide-pw:hover{
    color: #444444;
}
/*message*/
.login #login_error, .login .message, .login .success {
	box-shadow: none;
	background: #fefefe;
	margin-bottom: 15px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.login .message {
    border-left-color: var(--colorMain);
}