.login {
	--brand-color: #6f1515;
	/* background-image: url( "https://picsum.photos/1920/1080" ); */
	background-image: url('../images/login-banner.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
}


/**
* Login box itself
*/
#login {
	background-color: #fff;
	box-shadow: 0 6px 12px rgba(128, 128, 128, 0.5);
	padding: 30px 30px 20px 30px;
	margin-top: 2rem;
	border-radius: 5px;
}
/*
* Change checkbox colour
*/
#login input[type="checkbox"]:checked::before{
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%236f1515%27%2F%3E%3C%2Fsvg%3E")
}
/**
* Change input focus styles
*/
.login input:focus, input:focus-within, input:active, button:focus, button:active, a:focus, a:active {
	border-color: var(--brand-color) !important;
	box-shadow: 0 0 0 1px vaR(--brand-color) !important;
}
.login .dashicons {
	color: var(--brand-color);
}
.login #nav a:hover, a:focus, a:focus-within, a:active {
	color: var(--brand-color);
}
.login #backtoblog a:hover, a:focus, a:focus-within, a:active {
	color: var(--brand-color);
}

#login #wp-submit {
	background-color: var(--brand-color);
	border-color: var(--brand-color);
}

#login #nav {
	margin: 20px 0
}

#loginform,
#lostpasswordform {
	/* border: none; */
	box-shadow: none;
	border: none;
	padding: 5px 20px;
}

.login .clear-client-branded-login-message {
	font-size: 1.5rem;
	text-align: center;
	font-weight: 600;
	margin-bottom: 20px;
}

/*
* WP 6.7 updated the CSS classes used for the login. Old ones are below for ref
* .login h1 a
*/
.login .wp-login-logo a {
	background-image: url('../images/client_logo.png' ) !important;
	background-size: clamp( 200px, calc(5rem + 20vw), 300px);
	background-position: center;
	width: 100%;
	/* margin: 0 auto clamp( 15px, calc(-1rem + 3vw), 25px ); */
	margin: 0 auto;
}

/**
* Mobile specific overrides
*/
@media only screen and (max-width: 600px) {
	#login {
		padding: 10px;
	}
}