/* Pagina voor het vinden van coalities na Nederlandse verkiezingen */
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 14px;
	-webkit-text-size-adjust: none;
	background-color: seashell;
}
.content {
	width: 90%;
	max-width: 500px;
	margin: 0 auto;
}
.rechts {
	background-color: navy;
	color: white;
}
.links {
	background-color: firebrick;
	color: white;
}

header, section#filter {
	width: 100%;
	padding: 18px 0 8px;	
	background-color: silver;
}
header p {
	text-align: center;
	margin-top: 0;
}

.flextabel {
	margin-block: 10px;
	overflow: hidden;
	border-top: 1px solid black;
}
.flextabel > ul {
	display: flex;
	align-items: center;
	flex-flow: row wrap;
	justify-content: center;
	margin: 0 -1px 0 0;
	padding: 0;
	list-style: none;
}
.flextabel li {
	flex-grow: 1;
	padding: 7px 8px;
	text-align: center;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}
#filter .flextabel li {
	flex-basis: 50%;
	flex-grow: 0;
	align-self: stretch;
}
#filter .flextabel li > div {
	margin: 8px 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	justify-items: start;
}

section#filter {
	position: sticky;
	top: 0;
	left: 0;
}
#filter summary {
	line-height: 1.3;
}
#filter-content {
	max-height: 45vh;
	overflow-y: scroll;		
}
label {
	white-space: nowrap;
}
input {
	margin-right: 5px;
}
p#buttons {
	text-align: center;
}
button {
	width: 18ch;
	font-size: 1em;
	background-image: linear-gradient(180deg, #4098ff, #4058ff 62%, #4075ff);
	box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 0px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
	border: 1px solid #3247cf;
	border-radius: 5px;
	color: white;
}
button:active {
	background-image: linear-gradient(180deg, #0a40ce, #4058ff 38%, #40a0ff);
}

main ul {
	padding: 1em 0 0;
	list-style: none;
}
main ul > li {
	padding-bottom: 1.4em;
	max-height: 8em;
	display: flex;
	flex-flow: row wrap;
	row-gap: 5px;
	justify-content: space-between;
	transition: transform 0.3s ease-in-out,
				max-height 0.3s ease-out,
				padding-bottom 0.3s ease-in-out;
}
main ul > li > div+div {
	margin-left: auto;
}
main ul > li > div > span {
	display: inline-block;
	margin-bottom: 3px;
	padding: 4px;
	border-radius: 3px;
	background-color: #ff6961; /* geen meerderheid */
}
li.mh-TK > div + div > span:first-child,
li.mh-EK > div + div > span + span {
	background-color: mediumaquamarine; /* wel meerderheid */
}

main ul > li > div > span+span {
	margin-left: 5px;
}

/* Filter-indicators */
#filter:not(.mh-TK) #mh-TK,
#filter:not(.mh-EK) #mh-EK,
#filter:not(.m-VVD) #m-VVD,
#filter:not(.m-D66) #m-D66,
#filter:not(.m-GLPvdA) #m-GLPvdA,
#filter:not(.m-PVV) #m-PVV,
#filter:not(.m-CDA) #m-CDA,
#filter:not(.m-SP) #m-SP,
#filter:not(.m-FvD) #m-FvD,
#filter:not(.m-PvdD) #m-PvdD,
#filter:not(.m-CU) #m-CU,
#filter:not(.m-Volt) #m-Volt,
#filter:not(.m-JA21) #m-JA21,
#filter:not(.m-SGP) #m-SGP,
#filter:not(.m-Denk) #m-Denk,
#filter:not(.m-Vijftig) #m-Vijftig,
#filter:not(.m-BBB) #m-BBB,
#filter:not(.m-BIJ1) #m-BIJ1,
#filter:not(.m-Piraten) #m-Piraten,
#filter:not(.m-BVNL) #m-BVNL,
#filter:not(.m-NSC) #m-NSC,
#filter:not(.m-VredevD) #m-VredevD,
#filter:not(.m-LP) #m-LP,
#filter:not(.m-FNP) #m-FNP,
#filter:not(.m-VV) #m-VV,
#filter:not(.m-PLAN) #m-PLAN,
#filter:not(.m-Linie) #m-Linie,
#filter:not(.m-ELLECT) #m-ELLECT,
#filter:not(.m-PvdR) #m-PvdR,
#filter:not(.z-VVD) #z-VVD,
#filter:not(.z-D66) #z-D66,
#filter:not(.z-GLPvdA) #z-GLPvdA,
#filter:not(.z-PVV) #z-PVV,
#filter:not(.z-CDA) #z-CDA,
#filter:not(.z-SP) #z-SP,
#filter:not(.z-FvD) #z-FvD,
#filter:not(.z-PvdD) #z-PvdD,
#filter:not(.z-CU) #z-CU,
#filter:not(.z-Volt) #z-Volt,
#filter:not(.z-JA21) #z-JA21,
#filter:not(.z-SGP) #z-SGP,
#filter:not(.z-Denk) #z-Denk,
#filter:not(.z-Vijftig) #z-Vijftig,
#filter:not(.z-BBB) #z-BBB,
#filter:not(.z-BIJ1) #z-BIJ1,
#filter:not(.z-Piraten) #z-Piraten,
#filter:not(.z-BVNL) #z-BVNL,
#filter:not(.z-NSC) #z-NSC,
#filter:not(.z-VredevD) #z-VredevD,
#filter:not(.z-LP) #z-LP,
#filter:not(.z-FNP) #z-FNP,
#filter:not(.z-VV) #z-VV,
#filter:not(.z-PLAN) #z-PLAN,
#filter:not(.z-Linie) #z-Linie,
#filter:not(.z-ELLECT) #z-ELLECT,
#filter:not(.z-PvdR) #z-PvdR,
#filter:not(.x-VVD-SP) #x-VVD-SP,
#filter:not(.x-VVD-GLPvdA) #x-VVD-GLPvdA,
#filter:not(.x-JA21-D66) #x-JA21-D66,
#filter:not(.x-JA21-links) #x-JA21-links
{
	display: none;
}

/* Coalities verbergen: */
/*  - zonder meerderheid */
#filter.mh-TK + main li:not(.mh-TK),
#filter.mh-EK + main li:not(.mh-EK),

/*  - zonder bepaalde gewenste partijen */
#filter.m-VVD + main li:not(.VVD),
#filter.m-D66 + main li:not(.D66),
#filter.m-GLPvdA + main li:not(.GLPvdA),
#filter.m-PVV + main li:not(.PVV),
#filter.m-CDA + main li:not(.CDA),
#filter.m-SP + main li:not(.SP),
#filter.m-FvD + main li:not(.FvD),
#filter.m-PvdD + main li:not(.PvdD),
#filter.m-CU + main li:not(.CU),
#filter.m-Volt + main li:not(.Volt),
#filter.m-JA21 + main li:not(.JA21),
#filter.m-SGP + main li:not(.SGP),
#filter.m-Denk + main li:not(.Denk),
#filter.m-Vijftig + main li:not(.Vijftig),
#filter.m-BBB + main li:not(.BBB),
#filter.m-BIJ1 + main li:not(.BIJ1),
#filter.m-Piraten + main li:not(.Piraten),
#filter.m-BVNL + main li:not(.BVNL),
#filter.m-NSC + main li:not(.NSC),
#filter.m-VredevD + main li:not(.VredevD),
#filter.m-LP + main li:not(.LP),
#filter.m-FNP + main li:not(.FNP),
#filter.m-VV + main li:not(.VV),
#filter.m-PLAN + main li:not(.PLAN),
#filter.m-Linie + main li:not(.Linie),
#filter.m-ELLECT + main li:not(.ELLECT),
#filter.m-PvdR + main li:not(.PvdR),

/*  - waarin bepaalde ongewenste partijen zitten */
#filter.z-VVD + main li.VVD,
#filter.z-D66 + main li.D66,
#filter.z-GLPvdA + main li.GLPvdA,
#filter.z-PVV + main li.PVV,
#filter.z-CDA + main li.CDA,
#filter.z-SP + main li.SP,
#filter.z-FvD + main li.FvD,
#filter.z-PvdD + main li.PvdD,
#filter.z-CU + main li.CU,
#filter.z-Volt + main li.Volt,
#filter.z-JA21 + main li.JA21,
#filter.z-SGP + main li.SGP,
#filter.z-Denk + main li.Denk,
#filter.z-Vijftig + main li.Vijftig,
#filter.z-BBB + main li.BBB,
#filter.z-BIJ1 + main li.BIJ1,
#filter.z-Piraten + main li.Piraten,
#filter.z-BVNL + main li.BVNL,
#filter.z-NSC + main li.NSC,
#filter.z-VredevD + main li.VredevD,
#filter.z-LP + main li.LP,
#filter.z-FNP + main li.FNP,
#filter.z-VV + main li.VV,
#filter.z-PLAN + main li.PLAN,
#filter.z-Linie + main li.Linie,
#filter.z-ELLECT + main li.ELLECT,
#filter.z-PvdR + main li.PvdR,

/*  - waarin een van de partijen een andere heeft uitgesloten */
#filter.x-VVD-SP + main li.VVD.SP,
#filter.x-VVD-GLPvdA + main li.VVD.GLPvdA,
#filter.x-JA21-D66 + main li.JA21.D66,
#filter.x-JA21-links + main li.JA21.GLPvdA,
#filter.x-JA21-links + main li.JA21.SP,
#filter.x-JA21-links + main li.JA21.PvdD,
#filter.x-JA21-links + main li.JA21.CU,
#filter.x-JA21-links + main li.JA21.Volt,
#filter.x-JA21-links + main li.JA21.Denk,
#filter.x-JA21-links + main li.JA21.BIJ1,
#filter.x-JA21-links + main li.JA21.Piraten,
#filter.x-JA21-links + main li.JA21.PLAN,
#filter.x-JA21-links + main li.JA21.PPB
{
	transform: scaleY(0);
	max-height: 0;
	padding-bottom: 0;
}