:root {
	--c1: #01689b;

	--white: #fff;
	--black: #000;

	--grey: #f3f3f3;

	--bnr-bkg: var(--white);
	--hdr-bkg: var(--c1);
	--shdr-txt: var(--black);
	--shdr-bkg: var(--grey);

	--login-bkg: var(--grey);
	--title-txt: var(--black);
	--btn-bkg: var(--c1);
	--btn-hvr-bkg: #01496d;

	--info-txt: var(--grey-dark);
	--msg-txt: #d00;
	--msg-bkg: var(--grey);
}

div.banner {
	height: 87px;
	background-image: url(ministerie-ocw.svg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-color: var(--bnr-bkg);
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 5em;
	color: var(--white);
	background-color: var(--hdr-bkg);
	border: none;
}

header h1 {
	color: var(--white);
	border: none;
}

header span.darkmode-toggle {
	font-size: 150%;
	padding: 0.5em;
}

div.subheader {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	font-size: 140%;
	color: var(--shdr-txt);
	margin-top: 0;
	margin-bottom: 0.7em;
	padding: 0.5em 0.7em;
	background-color: var(--shdr-bkg);
}

section.main {
	padding: 1em;
}

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

#wmon-inloggen, #wmon-aanmelden {
	display: none;
	max-width: 18em;
}

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

.login, .register {
	padding: 2em;
	background-color: var(--login-bkg);
}

.login div.label {
	margin-right: 0.2em;
	padding: 0;
	width: 2.4em;
	height: 2em;
	border: 1px solid var(--btn-bkg);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: var(--btn-bkg);
}

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

.login div.user input,
.login div.pwd input {
	width: 100%;
}

.login div.user div.label {
	background-image: url(user.png);
}

.login div.pwd div.label {
	background-image: url(key.png);
}

.login div.start div.label {
	border: 1px solid #fff;
	background-color: transparent;
}

.login div.value {
	width: 100%;
	margin-right: 0.6em;
	height: 2em;
}

.login input {
	height: 2em;
	margin: 0;
	padding: 0em 0.3em;
}

.login input[type="submit"] {
	color: #fff;
	padding: 0.3em 0.8em;
	border: none;
	background: var(--btn-bkg);
}

.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-top: 1em;
	max-width: 20em;
	background-color: var(--msg-bkg);
}

footer {
	display: none;
}

/* password reset */

#content {
	color: var(--title-txt);
	max-width: 30em;
	padding: 2em;
}

#content h2 {
	font-size: 140%;
	margin: 0 0 0.5em 0;
}

#user {
	border: 1px solid var(--element-brd);
}

#user,
#npw,
#cpw {
	width: 16em;
}

input {
	height: 2em;
	margin: 0;
	padding: 0em 0.3em;
}

input[type="submit"] {
	color: #fff;
	padding: 0.3em 0.8em;
	border: none;
	background: var(--btn-bkg);
}

input[type="submit"]:hover {
	border: none;
	background-color: var(--btn-hvr-bkg);
}

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;
}

@media screen and (max-width: 768px) {

div.banner {
/*	display: none;*/
}

}

.darkmode {
	--c1: #adf;

	--grey-blue-lighter: #889;
	--grey-blue-darker: #334;

	--bnr-bkg: var(--grey-blue-lighter);
	--shdr-txt: var(--white);
	--shdr-bkg: var(--grey-blue-darker);

	--login-bkg: var(--grey-blue-darker);
	--title-txt: var(--white);
	--btn-bkg: #01689b;
	--btn-hvr-bkg: #125a7e;

	--info-txt: var(--grey-blue-lightest);
	--msg-txt: #ffc363;
	--msg-bkg: var(--grey-blue-darker);
}