:root {
	--openinfo-blue: #002870;
	--openinfo-blue-hover: #164785;
	--openinfo-border: #d8dee8;
	--openinfo-text: #202a3a;
	--openinfo-muted: #5d6878;
	--openinfo-focus: #1787e0;
}

body.login {
	background: #f3f5f8;
	color: var(--openinfo-text);
	font-family: "Segoe UI", Calibri, sans-serif;
}

body.login::before {
	background: var(--openinfo-blue);
	content: "";
	height: 6px;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

#login {
	box-sizing: border-box;
	padding: 7vh 20px 32px;
	width: min(100%, 440px);
}

.login h1 a {
	background-image: url("https://openinfo.nl/wp-content/uploads/2023/05/openinfo-logo-van-data-naar-informatie.png");
	background-position: center;
	background-size: contain;
	height: 86px;
	margin-bottom: 24px;
	width: 100%;
}

.login form {
	border: 1px solid var(--openinfo-border);
	border-top: 4px solid var(--openinfo-blue);
	box-shadow: 0 10px 30px rgb(20 38 67 / 10%);
	box-sizing: border-box;
	margin-top: 0;
	padding: 28px;
}

.login label {
	color: var(--openinfo-text);
	font-size: 14px;
	font-weight: 600;
}

.login .input,
.login input[type="password"],
.login input[type="text"] {
	border: 1px solid #aeb8c6;
	border-radius: 3px;
	box-shadow: none;
	font-size: 17px;
	margin-top: 6px;
	min-height: 46px;
	padding: 8px 12px;
}

.login .input:focus,
.login input[type="password"]:focus,
.login input[type="text"]:focus {
	border-color: var(--openinfo-focus);
	box-shadow: 0 0 0 2px rgb(23 135 224 / 20%);
}

.login .button.wp-hide-pw {
	color: var(--openinfo-blue);
	margin-top: 6px;
}

.login .button-primary {
	background: var(--openinfo-blue);
	border-color: var(--openinfo-blue);
	border-radius: 3px;
	font-size: 15px;
	font-weight: 600;
	min-height: 42px;
	padding: 0 20px;
}

.login .button-primary:hover,
.login .button-primary:focus {
	background: var(--openinfo-blue-hover);
	border-color: var(--openinfo-blue-hover);
}

.login .message,
.login .notice,
.login #login_error {
	border-left-color: var(--openinfo-focus);
	box-shadow: 0 4px 16px rgb(20 38 67 / 8%);
}

.login #nav,
.login #backtoblog {
	font-size: 14px;
	margin-left: 0;
	margin-right: 0;
	padding: 0 4px;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--openinfo-blue);
}

.login #backtoblog a::before {
	content: "← ";
}

.login .language-switcher {
	margin-top: 20px;
}

@media (max-width: 480px) {
	#login {
		padding-top: 32px;
	}

	.login h1 a {
		height: 70px;
	}

	.login form {
		padding: 22px;
	}
}