:root {
	--white: #fff;
	--black: #000;
	--grey: #f6f6f6;

	--hdr-bkg: var(--grey);
	--login-bkg: var(--grey);
	--btn-bkg: var(--c1);
	--btn-hvr-bkg: var(--c2);

	--info-txt: var(--grey-darker);
	--msg-txt: var(--c1);
	--msg-bkg: var(--grey);
}

/* for both */

html {
	overflow-y: initial;
}

/* for the login page */

header {
	display: block;
	height: 4em;
	background-color: var(--hdr-bkg);
	border: none;
	background-image: url(/llo/llo-portaal.svg);
	background-repeat: no-repeat;
	background-size: 160px;
	background-position: 1em 1.1em;
}

.login input {
	font-family: system-ui, arial, sans-serif;
	margin: 0;
	padding: 0.5em;
	border: none;
	border-bottom: 1px solid #ccc;
}

div.main {
	padding: 1em;
}

#auth div.title {
	color: var(--c2);
	font-size: 140%;
	margin-bottom: 1em;
}

#llo-inloggen, #llo-aanmelden {
	margin: 0 auto;
	display: none;
}

#llo-inloggen.show, #llo-aanmelden.show {
	display: block;
}

.login {
	padding: 2em;
	background-color: var(--login-bkg);
	max-width: 25em;
}

.login div.user,
.login div.pwd {
	margin-bottom: 1em;
}

.login div.user input,
.login div.pwd input {
	box-sizing: border-box;
	width: 100%;
}

.login input::placeholder {
	color: var(--grey-dark);
}

button,
button:hover {
	border: none;
}

button,
.login input[type="submit"] {
	color: var(--white);
	padding: 0.5em 0.8em;
	border: none;
	background: var(--btn-bkg);
	border-radius: 3px;
}

button:hover,
.login input[type="submit"]:hover {
	background-color: var(--btn-hvr-bkg);
}

.login div.forgotten {
	margin: 1em 0;
}

div.switch {
	margin: 1em 0 0 0;
}

#message.loginmsg {
	display: none;
	color: var(--msg-txt);
	text-align: center;
	padding: 1em;
	margin: 1em auto 0 auto;
	max-width: 25.5em;
	background-color: var(--msg-bkg);
}

/* for the password reset system */

#content h2 {
	color: var(--c2);
	font-size: 140%;
	margin: 0 0 0.5em 0;
}

#user,
#npw,
#cpw {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 0.3em;
}

div.info {
	font-style: italic;
	color: var(--info-txt);
	margin-top: 2em;
}

div.feedback {
	color: var(--msg-wrn-text);
	line-height: initial;
	background-color: initial;
}

div.feedback::before {
	content: "!";
	color: var(--msg-wrn-bfr-text);
	line-height: initial;
	font-size: 150%;
	background-color: var(--msg-wrn-bfr-bkg);
	padding: 2px 0.3em;
	margin-right: 0.3em;
}

div.tip {
	display: inline-block;
	margin-top: 2em;
	padding: 0;
	background-color: initial;
}