/* ------------------------------------------------------------ *\
	Login Style
\* ------------------------------------------------------------ */

body.login {
	background: #005826;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 15px;
}

#login {
	border-radius: 10px;
	background: #e7d9c4;
	padding: 30px;
	padding: 30px 20px;
}

#login h1 {
	margin-bottom: 40px;
}

#login h1 a {
	background: url(../resources/images/logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	display: block;
	width: 180px;
	margin: 0 auto;
	filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.14));
	transition: opacity 0.3s;
}

#login h1 a:hover {
	opacity: 0.5;
}

#login form {
	margin: 0 0 20px;
	padding: 30px 20px;
	border: 1px solid rgba(#005826, 0.9);
	border-radius: 10px;
}

#login .input {
	border: 1px solid rgba(#005826, 0.9);
	border-radius: 5px;
	font-size: 16px;
	padding-inline: 10px;
	transition: border, box-shadow;
	transition-duration: 0.2s;
}

#login input:focus {
	border: 1px solid #ff5a00;
	box-shadow: 0 0 0 1px #ff5a00;
}

#login input[type=password] {
	padding-right: 40px;
}

#login .wp-hide-pw {
	color: #005826;
}

#login .wp-hide-pw:hover {
	color: #ff5a00;
}

#login input[type=checkbox]::before {
	width: 0;
	height: 0;
	border: solid #ff5a00;
	border-width: 0 2px 2px 0;
	padding: 0 4px 8px 0;
	transform: translate(135%, 33%) rotate(45deg);
}

#login input[type=checkbox]:checked::before {
	content: "";
}

#login input[type=submit].button {
	background: #fff;
	border: 1px solid #005826;
	color: #005826;
	transition: color, background;
	transition-duration: 0.3s;
} 

#login input[type=submit].button:hover {
	background: #005826;
	color: #fff;
}

.login #nav {
	margin-top: 0;
}

.login #nav a,
.login #backtoblog a {
	transition: color 0.3s;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: #ff5a00;
}