/* Inloggen. */

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	font: 14.5px/1.5 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	color: #17201d;
	background: linear-gradient(160deg, #2b1838 0%, #3d2150 55%, #6a2f86 130%);
	-webkit-font-smoothing: antialiased;
}

.inlogvak {
	width: 100%; max-width: 360px; margin: 24px; background: #fff;
	border-radius: 12px; padding: 32px 30px 28px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.inlogvak .logo { display: block; margin: 0 auto 10px; width: 92px; height: 92px; }
.inlogvak h1 {
	text-align: center; font-size: 24px; line-height: 1.25; font-weight: 650;
	margin: 0 0 12px; letter-spacing: -.01em;
}

label { display: block; font-size: 13px; color: #5b6864; margin: 12px 0 4px; }
input[type=text], input[type=password] {
	width: 100%; padding: 7px 10px; border: 1px solid #cdd5d1;
	border-radius: 6px; font: inherit; color: #17201d; background: #fff;
}
input[type=text]:focus, input[type=password]:focus {
	outline: none; border-color: #2f6f4e;
	box-shadow: 0 0 0 3px rgba(47, 111, 78, .15);
}

button {
	width: 100%; margin-top: 20px; padding: 10px;
	border: 1px solid #2f6f4e; border-radius: 6px;
	background: #2f6f4e; color: #fff; font: inherit; font-weight: 600;
	cursor: pointer;
}
button:hover { background: #245a3f; border-color: #245a3f; }

.melding {
	background: #fbe9e6; color: #a23a2c; padding: 9px 12px;
	border-radius: 6px; font-size: 14px; margin: 12px 0 0;
}