/* tekst-009-dl.css */

body {
	background: #ff9;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
}

main {counter-reset: goed fout leeg 12;}

h1 {
	background: white;
	color: black;
	box-sizing: border-box;
	width: 700px;
	max-width: 94vw;
	font-size: 1.2em;
	font-weight: normal;
	text-align: center;
	margin: 10px auto;
	border: black solid 1px;
	padding: 5px;
}

#wrapper {
	width: 700px;
	max-width: 94vw;
	margin: 0 auto;
	position: relative;
}

#kaart {
	box-sizing: border-box;
	max-width: 100%;
	border: black solid 1px;
}

label {
	font-size: 0.8em;
	text-align: center;
	position: absolute;
}

input {
	background: white;
	color: black;
	width: 2em;
	height: 1.2em;
	font-size: 0.8em;
	margin-left: 3.5em;
	border: black solid 1px;
	border-radius: 5px;
	position: absolute;
	transition: width 0.5s, margin 0.5s;
}

#groningen label {
	width: 3em;
	bottom: 80%;
	left: 74%;
}

#groningen input {
	margin-bottom: 10px;
	margin-left: calc(3.5em + 30px);
	bottom: calc(80% - 2em);
	left: calc(74% - 3.1em);
}

#friesland label {
	width: 3em;
	right: 28%;
	bottom: 75%;
}

#friesland input {
	margin-right: 3.5em;
	margin-left: 0;
	right: calc(28% - 3.1em);
	bottom: calc(75% - 2em);
}

#drenthe label {
	top: 23%;
	left: 74%;
}

#drenthe input {
	top: calc(23% + 1.5em);
	left: calc(74% - 3.1em);
}

#overijssel label {
	width: 3em;
	bottom: 52%;
	left: 72%;
}

#overijssel input {
	bottom: calc(52% - 2em);
	left: calc(72% - 1.4em);
}

#flevoland label {
	width: 3em;
	bottom: 56%;
	left: 48%;
}

#flevoland input {
	bottom: calc(56% - 2em);
	left: calc(48% - 3.1em);
}

#gelderland label {
	width: 4em;
	top: 48%;
	left: 64%;
}

#gelderland input {
	top: calc(47% + 2.8em);
	left: calc(64% - 2.6em);
}

#utrecht label {
	top: 50%;
	left: 40%;
}

#utrecht input {
	top: calc(50% + 1.6em);
	left: calc(40% - 3.1em);
}

#noord-holland label {
	width: 4em;
	right: 52%;
	bottom: 60%;
}

#noord-holland input {
	margin-right: 3.5em;
	margin-left: 0;
	right: calc(52% - 2.8em);
	bottom: calc(60% - 2em);
}

#zuid-holland label {
	width: 4em;
	right: 60%;
	bottom: 42%;
}

#zuid-holland input {
	margin-right: 3.5em;
	margin-left: 0;
	right: calc(60% - 2.6em);
	bottom: calc(42% - 2em);
}

#zeeland label {
	width: 4em;
	right: 70%;
	bottom: 30%;
}

#zeeland input {
	margin-right: 3.5em;
	margin-left: 0;
	right: calc(70% - 2.8em);
	bottom: calc(30% - 2em);
}

#noord-brabant label {
	top: 64%;
	left: 36%;
}

#noord-brabant input {
	top: calc(64% + 1.6em);
	left: calc(36% - 1.4em);
}

#limburg label {
	top: 80%;
	left: 56%;
}

#limburg input {
	top: calc(80% + 1.6em);
	left: calc(56% - 2.6em);
}

span {display: none;}

.sr-fout, .sr-goed {
	position: absolute;
	top: -1000px;
	left: -20000px;
}

.fout {
	background: rgb(255 255 255 / 0.7);
	color: black;
	width: 4ch;
	font-size: 0.7em;
	margin: 0 auto;
	border: red solid 1px;
	padding: 2px;
	position: absolute;
	top: 1em;
	right: 0;
	left: 0;
}

.afk {
	background: white;
	color: black;
	box-sizing: border-box;
	height: 1.2rem;
	font-size: 0.8em;
	border: black solid;
	border-width: 1px 0 1px 1px;
	padding: 1px 20px 1px 2px;
	position: absolute;
	left: 0;
}

div:nth-of-type(even) .afk {left: 54%;}

#wrapper div:has(:focus) label {
	background: rgb(255 255 255 / 0.8);
	color: black;
	font-weight: bold;
	z-index: 20;
}

#wrapper input:focus {
	width: 9em;
	margin: 0;
	border-radius: 0;
	z-index: 20;
}

#wrapper input:user-valid {
	box-sizing: border-box;
	width: calc(46% - 1.5rem);
	height: 1.2rem;
	margin: 0;
	border-left-width: 0;
	border-radius: 0;
	left: 1.8em;
	z-index: 10;
	transition-property: width, border-left, top, right, bottom, left;
	transition-duration: 2s, 0s, 2s, 2s, 2s, 2s;
	transition-timing-function: ease-in;
	transition-delay: 0s, 2s, 0s, 0s, 0s, 0s;
}

#wrapper div:nth-of-type(even) input:user-valid {
	right: 0;
	left: auto;
}

#wrapper div:has(:user-valid) label {
	background: lightgreen;
	color: black;
	outline: darkgreen solid 2px;
	padding: 1px;
}

input:user-valid ~ .afk {display: block;}

#groningen input:user-valid, #groningen input:user-valid ~ .afk, #friesland input:user-valid, #friesland input:user-valid ~ .afk {bottom: 0;}

#drenthe input:user-valid, #drenthe input:user-valid ~ .afk {top: calc(100% + 0.4em);}

#overijssel input:user-valid {
	bottom: -2em;
	left: calc(54% + 1.9em);
}

#overijssel input:user-valid ~ .afk {bottom: -2em;}

#flevoland input:user-valid, #flevoland input:user-valid ~ .afk {bottom: -3.8em;}

#gelderland input:user-valid {
	top: calc(100% + 2.4em);
	left: calc(54% + 1.9em);
}

#gelderland input:user-valid ~ .afk {top: calc(100% + 2.4em);}

#utrecht input:user-valid, #utrecht input:user-valid ~ .afk {top: calc(100% + 4.2em);}

#noord-holland input:user-valid, #noord-holland input:user-valid ~ .afk {bottom: -5.8em;}

#zuid-holland input:user-valid {
	right: 54%;
	bottom: -7.8em;
	left: auto;
}

#zuid-holland input:user-valid ~ .afk {bottom: -7.8em;}

#zeeland input:user-valid, #zeeland input:user-valid ~ .afk {bottom: -7.8em;}

#noord-brabant input:user-valid {
	top: calc(100% + 8.4em);
	left: 1.9em;
}

#noord-brabant input:user-valid ~ .afk {top: calc(100% + 8.4em);}

#limburg input:user-valid {
	top: calc(100% + 8.4em);
	left: calc(54% + 1.9em);
}

#limburg input:user-valid ~ .afk {bottom: -9.9em;}

#wrapper div:has(:user-invalid):not(:has(:focus)) .fout {display: block;}

#wrapper div:has(:user-invalid) .sr-fout {display: block;}

#wrapper div:has(:user-valid) .sr-goed {display: block;}

#naar-uitslag, #naar-boven {
	background: white;
	color: black;
	display: none;
	box-sizing: border-box;
	width: 700px;
	max-width: 94vw;
	font-size: 0.8em;
	text-align: center;
	margin-bottom: 20em;
	border: black solid 1px;
	padding: 3px;
	position: relative;
	top: 12.4em;
}

#naar-boven {display: block;}

#uitslag {display: none;}

@supports selector(:has(*)) {
	h1 {padding-bottom: 2.2em;}
	#uitslag {
		display: block;
		width: 700px;
		max-width: 94vw;
		font-size: 0.9em;
		text-align: center;
		margin: 0 auto;
		scroll-margin-top: 3.5em;
		position: absolute;
		top: 3.8em;
		right: 0;
		left: 0;
	}
	#alles-goed {
		background: lightgreen;
		color: black;
		display: none;
		font-size: 1.2em;
		margin: 0;
		border: black solid 1px;
		padding: 3px;
	}
	#met-fout {margin: 0;}
	#naar-uitslag {display: block;}
	#naar-boven {display: none;}
}

#goed, #fout, #leeg {display: inline;}

input:user-invalid {counter-increment: fout leeg -1;}

input:user-valid {counter-increment: goed leeg -1;}

#goed::after {content: counter(goed);}

@supports not selector(:user-valid) {
	#wrapper input:valid {
		box-sizing: border-box;
		width: calc(46% - 1.5rem);
		height: 1.2rem;
		margin: 0;
		border-left-width: 0;
		border-radius: 0;
		left: 1.8em;
		z-index: 10;
		transition-property: width, border-left, top, right, bottom, left;
		transition-duration: 2s, 0s, 2s, 2s, 2s, 2s;
		transition-timing-function: ease-in;
		transition-delay: 0s, 2s, 0s, 0s, 0s, 0s;
	}
	#wrapper div:nth-of-type(even) input:valid {
		right: 0;
		left: auto;
	}
	#wrapper div:has(:valid) label {
		background: lightgreen;
		color: black;
		outline: darkgreen solid 2px;
		padding: 1px;
	}
	input:valid ~ .afk {display: block;}
	#groningen input:valid, #groningen input:valid ~ .afk, #friesland input:valid, #friesland input:valid ~ .afk {bottom: 0;}
	#drenthe input:valid, #drenthe input:valid ~ .afk {top: calc(100% + 0.4em);}
	#overijssel input:valid {
		bottom: -2em;
		left: calc(54% + 1.9em);
	}
	#overijssel input:valid ~ .afk {bottom: -2em;}
	#flevoland input:valid, #flevoland input:valid ~ .afk {bottom: -3.8em;}
	#gelderland input:valid {
		top: calc(100% + 2.4em);
		left: calc(54% + 1.9em);
	}
	#gelderland input:valid ~ .afk {top: calc(100% + 2.4em);}
	#utrecht input:valid, #utrecht input:valid ~ .afk {top: calc(100% + 4.2em);}
	#noord-holland input:valid, #noord-holland input:valid ~ .afk {bottom: -5.8em;}
	#zuid-holland input:valid {
		right: 54%;
		bottom: -7.8em;
		left: auto;
	}
	#zuid-holland input:valid ~ .afk {bottom: -7.8em;}
	#zeeland input:valid, #zeeland input:valid ~ .afk {bottom: -7.8em;}
	#noord-brabant input:valid {
		top: calc(100% + 8.4em);
		left: 1.9em;
	}
	#noord-brabant input:valid ~ .afk {top: calc(100% + 8.4em);}
	#limburg input:valid {
		top: calc(100% + 8.4em);
		left: calc(54% + 1.9em);
	}
	#limburg input:valid ~ .afk {bottom: -9.9em;}
	input:valid {counter-increment: goed leeg -1;}
	#fout, #leeg {display: none;}
	#fout-of-leeg {display: inline;}
	#fout-of-leeg::after {content: counter(leeg);}
}

#fout::after {content: counter(fout);}

#leeg::after {content: counter(leeg);}

@media screen and (min-width: 500px) {
	#groningen label {
		bottom: 84%;
		left: 76%;
	}
	#groningen input {
		bottom: calc(84% - 2em);
		left: calc(76% - 3.1em);
	}
	#friesland label {
		right: 32%;
		bottom: 79%;
	}
	#friesland input {
		right: calc(32% - 3.1em);
		bottom: calc(79% - 2em);
	}
	#overijssel label {
		width: auto;
		bottom: 58%;
	}
	#overijssel input {
		bottom: calc(58% - 2em);
		left: calc(74% - 3.1em);
	}
	#flevoland label {left: 52%;}
	#flevoland input {
		bottom: calc(56% - 2em);
		left: calc(52% - 3.1em);
	}
	#gelderland label {
		width: auto;
		top: 49%;
		left: 62%;
	}
	#gelderland input {
		top: calc(49% + 1.7em);
		left: calc(62% - 2.2em);
	}
	#utrecht label {left: 44%;}
	#utrecht input {left: calc(44% - 3.1em);}
	#noord-holland label {right: 56%;}
	#noord-holland input {right: calc(56% - 2.7em);}
	#zuid-holland label {right: 62%;}
	#zuid-holland input {right: calc(62% - 2.7em);}
	#zeeland label {
		width: 4em;
		right: 74%;
		bottom: 30%;
	}
	#zeeland input {
		right: calc(74% - 2.8em);
		bottom: calc(30% - 2em);
	}
	#noord-brabant label {left: 40%;}
	#noord-brabant input {left: calc(40% - 1.4em);}
	#limburg label {top: 83%; left: 60%;}
	#limburg input {
		top: calc(83% + 1.6em);
		left: calc(60% - 2.8em);
	}
	#wrapper div:has(:focus) label {
		font-size: 1em;
		font-weight: normal;
	}
}

@media screen and (min-width: 760px) {
	body {font-size: 110%;}
	#wrapper div {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		position: absolute;
	}
	#groningen {
		width: 20%;
		height: 20%;
		top: 4%;
		left: 72%;
	}
	#friesland {
		width: 19%;
		height: 22%;
		top: 9%;
		left: 53%;
	}
	#drenthe {
		width: 18%;
		height: 13%;
		top: 21%;
		left: 72%;
	}
	#overijssel {
		width: 24%;
		height: 14%;
		top: 33%;
		left: 67%;
	}
	#flevoland {
		width: 14%;
		height: 10%;
		top: 36%;
		left: 47%;
	}
	#gelderland {
		width: 28%;
		height: 12%;
		top: 50%;
		left: 56%;
	}
	#utrecht {
		width: 17%;
		height: 11%;
		top: 46%;
		left: 39%;
	}
	#noord-holland {
		width: 17%;
		height: 30%;
		top: 20%;
		left: 30%;
	}
	#zuid-holland {
		width: 17%;
		height: 16%;
		top: 46%;
		left: 22%;
	}
	#zeeland {
		width: 20%;
		height: 16%;
		top: 59%;
		left: 7%;
	}
	#noord-brabant {
		width: 33%;
		height: 14%;
		top: 62%;
		left: 27%;
	}
	#limburg {
		width: 11%;
		height: 32%;
		top: 62%;
		left: 58%;
	}
	#wrapper label {
		width: auto;
		font-size: 1em;
		position: static;
	}
	#wrapper div:has(:focus) label {
		background: transparent;
		font-size: 1.5em;
	}
	.fout {position: static;}
	#wrapper input, #wrapper input:valid {
		background: rgb(255 255 255 / 0.8);
		color: black;
		width: 9em;
		height: auto;
		margin: 0;
		border-left: black solid 1px;
		border-radius: 5px;
		position: static;
	}
	#wrapper .afk {display: none;}
	#naar-uitslag, #naar-boven {
		font-size: 1em;
		margin-bottom: 30px;
		top: 6px;
	}
}

#wrapper:not(:has(:placeholder-shown)):not(:has(:invalid)) + #uitslag #met-fout {display: none;}

#wrapper:not(:has(:placeholder-shown)):not(:has(:invalid)) + #uitslag #alles-goed {display: block;}