/* Ledenportaal Mierbeek — bewust terughoudend, zodat het bij het thema past. */

.mbl-portaal {
	--mbl-groen: #1e4739;
	--mbl-groen-licht: #e6eee9;
	--mbl-lijn: #dde2dc;
	--mbl-tekst: #14211c;
	--mbl-grijs: #6e7b75;
	--mbl-oranje: #9c6b0b;
	--mbl-oranje-licht: #f8f0dc;
	--mbl-rood: #9c3f2b;
	--mbl-rood-licht: #f7e7e2;

	max-width: 760px;
	margin: 0 auto;
	color: var(--mbl-tekst);
	font-family: inherit;
	line-height: 1.6;
}

.mbl-portaal * {
	box-sizing: border-box;
}

.mbl-kaart {
	background: #fff;
	border: 1px solid var(--mbl-lijn);
	border-radius: 4px;
	padding: 26px 26px 28px;
	margin-bottom: 20px;
}

.mbl-portaal h2 {
	margin: 0 0 8px;
	font-size: 1.5em;
	line-height: 1.25;
	color: var(--mbl-tekst);
}

.mbl-portaal h3 {
	margin: 28px 0 12px;
	font-size: 1.05em;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--mbl-groen);
}

.mbl-portaal h3:first-of-type {
	margin-top: 8px;
}

.mbl-lead {
	color: var(--mbl-grijs);
	margin: 0 0 20px;
}

.mbl-klein {
	font-size: .88em;
	color: var(--mbl-grijs);
	margin: 18px 0 0;
}

/* Kop met bedrijfsnaam en uitloggen */
.mbl-kop {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 0 18px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--mbl-groen);
}

.mbl-kop h2 {
	margin: 4px 0 4px;
}

.mbl-eyebrow {
	display: block;
	font-size: .72em;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mbl-groen);
}

.mbl-status {
	margin: 0;
	font-size: .9em;
	color: var(--mbl-grijs);
}

/* Velden */
.mbl-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.mbl-veld {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 4px;
}

.mbl-veld label {
	font-size: .88em;
	font-weight: 600;
}

.mbl-optioneel {
	font-weight: 400;
	color: var(--mbl-grijs);
}

.mbl-portaal input[type="text"],
.mbl-portaal input[type="email"],
.mbl-portaal input[type="password"],
.mbl-portaal input[type="tel"],
.mbl-portaal input[type="url"],
.mbl-portaal input[type="date"],
.mbl-portaal input[type="file"],
.mbl-portaal select,
.mbl-portaal textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--mbl-lijn);
	border-radius: 3px;
	background: #fff;
	color: var(--mbl-tekst);
	font: inherit;
	font-size: .95em;
}

.mbl-portaal input:focus,
.mbl-portaal select:focus,
.mbl-portaal textarea:focus {
	outline: 2px solid var(--mbl-groen);
	outline-offset: 1px;
	border-color: var(--mbl-groen);
}

.mbl-hint {
	font-size: .82em;
	color: var(--mbl-grijs);
}

.mbl-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 8px 0;
	font-size: .95em;
	cursor: pointer;
}

.mbl-check input {
	margin-top: 4px;
	flex: none;
}

.mbl-keuze {
	background: #f7f8f6;
	border-radius: 3px;
	padding: 14px 16px;
	margin-bottom: 18px;
}

/* Knoppen */
.mbl-acties {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.mbl-knop {
	display: inline-block;
	background: var(--mbl-groen);
	color: #fff;
	border: 0;
	border-radius: 3px;
	padding: 13px 22px;
	font: inherit;
	font-size: .95em;
	font-weight: 600;
	cursor: pointer;
}

.mbl-knop:hover,
.mbl-knop:focus {
	background: #163429;
	color: #fff;
}

.mbl-knop-waarschuwing {
	background: var(--mbl-rood);
}

.mbl-knop-waarschuwing:hover,
.mbl-knop-waarschuwing:focus {
	background: #822f1e;
}

.mbl-knop-plat {
	background: none;
	border: 1px solid var(--mbl-lijn);
	border-radius: 3px;
	padding: 8px 14px;
	font: inherit;
	font-size: .85em;
	color: var(--mbl-grijs);
	cursor: pointer;
}

.mbl-knop-plat:hover {
	border-color: var(--mbl-groen);
	color: var(--mbl-groen);
}

/* Meldingen */
.mbl-melding {
	border-radius: 3px;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: .95em;
	border-left: 3px solid var(--mbl-groen);
	background: var(--mbl-groen-licht);
}

.mbl-melding-fout {
	border-left-color: var(--mbl-rood);
	background: var(--mbl-rood-licht);
}

.mbl-melding-open {
	border-left-color: var(--mbl-oranje);
	background: var(--mbl-oranje-licht);
}

/* Uitklapblok verhuizen of stoppen */
.mbl-uitklap summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05em;
	color: var(--mbl-groen);
	list-style: revert;
}

.mbl-uitklap[open] summary {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mbl-lijn);
}

/* Spamval */
.mbl-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 520px) {
	.mbl-kaart {
		padding: 20px 18px 22px;
	}

	.mbl-raster {
		grid-template-columns: 1fr;
	}
}

/* ---------- inloggen met of zonder wachtwoord ---------- */

.mbl-scheider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 26px 0 22px;
	color: var(--mbl-grijs);
	font-size: .85em;
}

.mbl-scheider::before,
.mbl-scheider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--mbl-lijn);
}

.mbl-knop-groot {
	padding: 12px 18px;
	font-size: .95em;
}

/* ---------- vermelding op de kaart ---------- */

.mbl-veldnaam {
	display: block;
	font-size: .88em;
	font-weight: 600;
	margin-bottom: 5px;
}

.mbl-vinkjes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 2px 14px;
	background: #f7f8f6;
	border-radius: 3px;
	padding: 12px 14px;
}

.mbl-vinkjes .mbl-check {
	margin: 4px 0;
	font-size: .92em;
}

.mbl-logo-voorbeeld {
	display: block;
	max-width: 160px;
	height: auto;
	margin-bottom: 10px;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--mbl-lijn);
	border-radius: 3px;
}

.mbl-zoekrij {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.mbl-zoekrij input[type="text"] {
	flex: 1;
	min-width: 0;
}

.mbl-zoekrij button {
	flex: none;
	white-space: nowrap;
}

.mbl-treffers {
	margin-top: 8px;
	border: 1px solid var(--mbl-lijn);
	border-radius: 3px;
	background: #fff;
	font-size: .9em;
	color: var(--mbl-grijs);
	padding: 10px 12px;
}

.mbl-treffers:has(.mbl-treffer) {
	padding: 0;
}

.mbl-treffer {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--mbl-lijn);
	padding: 10px 12px;
	font: inherit;
	font-size: 1em;
	color: var(--mbl-tekst);
	cursor: pointer;
}

.mbl-treffer:last-child {
	border-bottom: 0;
}

.mbl-treffer:hover,
.mbl-treffer:focus {
	background: var(--mbl-groen-licht);
	color: var(--mbl-groen);
}

.mbl-kaartvak {
	height: 340px;
	margin-top: 10px;
	border: 1px solid var(--mbl-lijn);
	border-radius: 3px;
	background: #eef0ee;
	z-index: 0;
}

.mbl-kaartvak .leaflet-container {
	font: inherit;
}

@media (max-width: 520px) {
	.mbl-kaartvak {
		height: 260px;
	}

	.mbl-zoekrij {
		flex-direction: column;
	}
}

/*
 * Het facturatieblok klapt open met het vinkje ervoor. Kent een browser :has()
 * niet, dan wordt deze regel overgeslagen en staat het blok gewoon open; de
 * velden blijven dus altijd bereikbaar.
 */
.mbl-schakelblok {
	margin-top: 4px;
}

.mbl-check:has( .mbl-schakelaar:not(:checked) ) + .mbl-schakelblok {
	display: none;
}

/* Contactpersonen */
.mbl-contact {
	border-top: 1px solid #eef1ed;
	padding-top: 16px;
	margin-top: 16px;
}

.mbl-eigen {
	margin: 0 0 10px;
	font-size: .9em;
	color: var(--mbl-grijs);
}

/* De speld op de kaart is een SVG, geen plaatje: altijd zichtbaar. */
.mbl-speld {
	background: none;
	border: 0;
	cursor: grab;
}

.mbl-speld:active {
	cursor: grabbing;
}

.mbl-speld svg {
	display: block;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, .35 ) );
}

/* --------------------------------------------------------------------------
   Bestuurspagina
   -------------------------------------------------------------------------- */

.mbl-portaal-breed {
	max-width: 1180px;
	/*
	 * Ruimte boven de groene band. Het thema zet het logo linksboven over de
	 * inhoud heen; de smalle portaalpagina valt daar naast, deze brede niet.
	 */
	padding-top: 100px;
}

/* De groene kopband */
.mbl-band {
	background: linear-gradient( 135deg, #16382c 0%, #1E4739 55%, #23614a 100% );
	color: #fff;
	border-radius: 4px;
	padding: 26px 28px;
	margin-bottom: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.mbl-band h2 {
	margin: 4px 0 6px;
	color: #fff;
	font-size: 1.5em;
	line-height: 1.2;
}

.mbl-band-label {
	margin: 0;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9ec9b4;
}

.mbl-band-lead {
	margin: 0;
	font-size: .92em;
	color: #cfe3d8;
}

.mbl-knop-licht {
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, .35 );
	border-radius: 3px;
	padding: 9px 16px;
	font: inherit;
	font-size: .9em;
	cursor: pointer;
}

.mbl-knop-licht:hover {
	background: rgba( 255, 255, 255, .22 );
	color: #fff;
}

/* De vier getallen */
.mbl-cijfers {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 14px;
	margin-bottom: 14px;
}

.mbl-cijfer {
	background: #fff;
	border: 1px solid #dde2dc;
	border-top: 3px solid #007f20;
	border-radius: 4px;
	padding: 16px 18px;
}

.mbl-cijfer-getal {
	display: block;
	font-size: 1.9em;
	font-weight: 700;
	line-height: 1.1;
	color: #1E4739;
}

.mbl-cijfer-label {
	display: block;
	margin-top: 2px;
	font-size: .82em;
	color: var(--mbl-grijs);
}

/* Werkbalk: zoeken links, downloaden rechts */
.mbl-werkbalk {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 16px;
	border-bottom: 1px solid #eef1ed;
}

.mbl-zoekbalk {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	flex: 1 1 420px;
	margin: 0;
}

.mbl-zoekbalk .mbl-veld {
	margin: 0;
	min-width: 170px;
	flex: 1 1 170px;
}

.mbl-zoekbalk .mbl-veld-knop {
	flex: 0 0 auto;
	min-width: 0;
}

.mbl-zoekbalk input,
.mbl-zoekbalk select {
	height: 42px;
}

.mbl-download {
	margin: 0;
	flex: 0 0 auto;
}

.mbl-knop-excel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
}

.mbl-telling {
	margin: 14px 0 4px;
	font-size: .9em;
	color: var(--mbl-grijs);
}

.mbl-telling strong {
	color: var(--mbl-inkt);
}

.mbl-leeg {
	margin: 18px 0;
	padding: 22px;
	background: #f7f8f6;
	border-radius: 4px;
	text-align: center;
	color: var(--mbl-grijs);
}

/* De tabel */
.mbl-tabelvak {
	overflow-x: auto;
	margin: 6px -4px 0;
	padding: 0 4px;
}

.mbl-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: .93em;
	background: none;
}

.mbl-tabel th,
.mbl-tabel td {
	text-align: left;
	padding: 11px 14px 11px 0;
	vertical-align: top;
	border: 0;
	background: none;
}

.mbl-tabel thead th {
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbl-grijs);
	border-bottom: 2px solid #1E4739;
	padding-bottom: 9px;
	white-space: nowrap;
}

.mbl-tabel tbody tr {
	border-bottom: 1px solid #eef1ed;
}

.mbl-tabel tbody tr:hover {
	background: #f7faf7;
}

/* Op een breed scherm hoort een lege cel er gewoon te zijn. */
.mbl-tabel tbody td.mbl-leegcel {
	color: inherit;
}

/* Het kleurbalkje links, per status */
.mbl-tabel tbody td:first-child {
	padding-left: 14px;
	border-left: 3px solid #007f20;
}

.mbl-tabel tbody tr.mbl-rij-prospect td:first-child {
	border-left-color: #c98a00;
}

.mbl-tabel tbody tr.mbl-rij-verhuisd td:first-child,
.mbl-tabel tbody tr.mbl-rij-gestopt td:first-child,
.mbl-tabel tbody tr.mbl-rij-opgezegd td:first-child {
	border-left-color: #b8bfba;
}

.mbl-bedrijf {
	display: block;
	font-weight: 600;
	color: var(--mbl-inkt);
}

.mbl-onder {
	display: block;
	font-size: .86em;
	color: var(--mbl-grijs);
}

.mbl-ontbreekt {
	color: #b0b8b3;
	font-style: italic;
}

.mbl-plus {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 10px;
	background: #e7f0e9;
	color: #1E4739;
	font-size: .78em;
	font-weight: 600;
}

/* Statusetiket */
.mbl-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 11px;
	font-size: .78em;
	font-weight: 600;
	white-space: nowrap;
	background: #e7f0e9;
	color: #10603a;
}

.mbl-badge-prospect {
	background: #fdf1da;
	color: #8a5d00;
}

.mbl-badge-verhuisd,
.mbl-badge-gestopt,
.mbl-badge-opgezegd {
	background: #eef0ee;
	color: #5f6a64;
}

/* Namen die naar de stamkaart leiden */
.mbl-portaal a.mbl-naamlink {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted #9fb3a8;
}

.mbl-portaal a.mbl-naamlink:hover,
.mbl-portaal a.mbl-naamlink:focus {
	color: var(--mbl-groen);
	border-bottom: 1px solid var(--mbl-groen);
}

.mbl-portaal a.mbl-bedrijf.mbl-naamlink {
	display: inline;
	border-bottom-color: transparent;
}

.mbl-portaal a.mbl-bedrijf.mbl-naamlink:hover {
	border-bottom-color: var(--mbl-groen);
}

/* Het +1-knopje: klapt de andere contactpersonen open en dicht */
.mbl-portaal .mbl-naamregel {
	display: inline;
}

.mbl-portaal button.mbl-uitklap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 0 6px;
	padding: 1px 8px;
	min-height: 0;
	border: 1px solid transparent;
	border-radius: 10px;
	background: #e7f0e9;
	box-shadow: none;
	color: #1E4739;
	font: inherit;
	font-size: .78em;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: baseline;
	cursor: pointer;
}

.mbl-portaal button.mbl-uitklap::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY( -2px ) rotate( 45deg );
	transition: transform .15s ease;
}

.mbl-portaal button.mbl-uitklap[aria-expanded="true"]::after {
	transform: translateY( 1px ) rotate( 225deg );
}

.mbl-portaal button.mbl-uitklap:hover,
.mbl-portaal button.mbl-uitklap:focus-visible {
	border-color: #1E4739;
	background: #dbe9df;
	color: #1E4739;
}

.mbl-portaal .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Dichtgeklapt, ook op de telefoon waar rijen display: block krijgen */
.mbl-portaal .mbl-tabel tr[hidden] {
	display: none !important;
}

/* Regels van extra contactpersonen */
.mbl-subrij {
	background: #fbfcfb;
}

.mbl-subrij td {
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: .95em;
}

.mbl-subrij td:first-child {
	border-left-style: dotted;
}

.mbl-subrij .mbl-onder {
	display: inline;
}

.mbl-tak {
	display: inline-block;
	width: 14px;
	margin-right: 6px;
	border-bottom: 1px solid #c9d2cc;
	vertical-align: middle;
}

.mbl-merk {
	display: inline-block;
	margin-right: 5px;
	padding: 2px 8px;
	border-radius: 10px;
	border: 1px solid #e2e6e3;
	font-size: .74em;
	color: #b0b8b3;
	text-decoration: line-through;
}

.mbl-merk-aan {
	border-color: #cfe3d8;
	background: #f1f7f3;
	color: #2c6b4c;
	text-decoration: none;
}

.mbl-voet {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #eef1ed;
}

@media ( max-width: 900px ) {
	.mbl-cijfers {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 720px ) {
	.mbl-band {
		padding: 20px;
	}

	.mbl-werkbalk {
		display: block;
	}

	.mbl-zoekbalk {
		display: block;
	}

	.mbl-zoekbalk .mbl-veld {
		margin-bottom: 10px;
	}

	.mbl-download {
		margin-top: 10px;
	}

	.mbl-knop-excel {
		width: 100%;
		justify-content: center;
	}

	.mbl-tabel thead {
		display: none;
	}

	.mbl-tabel tbody tr {
		display: block;
		padding: 12px 0 12px 12px;
		border-left: 3px solid #007f20;
		margin-bottom: 10px;
		background: #fff;
	}

	.mbl-tabel tbody tr.mbl-rij-prospect {
		border-left-color: #c98a00;
	}

	.mbl-tabel tbody tr.mbl-rij-verhuisd,
	.mbl-tabel tbody tr.mbl-rij-gestopt,
	.mbl-tabel tbody tr.mbl-rij-opgezegd {
		border-left-color: #b8bfba;
	}

	.mbl-tabel tbody tr.mbl-subrij {
		margin-left: 16px;
		border-left-style: dotted;
		background: #fbfcfb;
	}

	/*
	 * Naast elkaar: het kolomlabel links, de inhoud rechts. Een raster in
	 * plaats van flex, zodat een tweede regel in dezelfde cel — de branche
	 * onder de bedrijfsnaam — netjes onder de eerste komt in plaats van
	 * ernaast te worden geperst.
	 */
	.mbl-tabel tbody td,
	.mbl-tabel tbody td:first-child {
		display: grid;
		grid-template-columns: 38% 1fr;
		column-gap: 10px;
		padding: 2px 0;
		border: 0;
	}

	.mbl-tabel tbody td::before {
		content: attr( data-kolom );
		grid-column: 1;
		grid-row: 1;
		font-size: .85em;
		color: var(--mbl-grijs);
	}

	.mbl-tabel tbody td > * {
		grid-column: 2;
		justify-self: start;
	}

	/* Een cel zonder inhoud hoeft op een telefoon geen regel te krijgen. */
	.mbl-tabel tbody td.mbl-leegcel {
		display: none;
	}

	.mbl-tabel tbody td:empty {
		display: none;
	}

	/* Een lang e-mailadres mag de kaart niet uit lopen. */
	.mbl-tabel td {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.mbl-tak {
		display: none;
	}

	.mbl-subrij {
		margin-left: 14px;
	}
}

/* --------------------------------------------------------------------------
   Stamkaart
   -------------------------------------------------------------------------- */

.mbl-band-knoppen {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.mbl-band-knoppen a.mbl-knop-licht {
	text-decoration: none;
	display: inline-block;
}

.mbl-band-lead .mbl-badge {
	vertical-align: 1px;
}

.mbl-stam {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 14px;
	margin-bottom: 14px;
}

.mbl-stam .mbl-kaart {
	margin-bottom: 0;
}

.mbl-portaal .mbl-stamblok h3,
.mbl-portaal h3.mbl-stamkop {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid #1E4739;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbl-grijs);
}

.mbl-stamblok dl {
	margin: 0;
}

.mbl-stamregel {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f2ef;
}

.mbl-stamregel:last-child {
	border-bottom: 0;
}

.mbl-stamregel dt {
	margin: 0;
	font-size: .88em;
	color: var(--mbl-grijs);
}

.mbl-stamregel dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.mbl-stamtekst {
	margin: 0;
}

@media ( max-width: 720px ) {
	.mbl-stam {
		grid-template-columns: 1fr;
	}

	.mbl-stamregel {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* --------------------------------------------------------------------------
   Aanmeldformulier
   -------------------------------------------------------------------------- */

.mbl-portaal fieldset.mbl-blok {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.mbl-portaal fieldset.mbl-blok legend {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0 0 8px;
	border-bottom: 2px solid #1E4739;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbl-grijs);
}

.mbl-blokhint {
	display: block;
	margin: -4px 0 12px;
}

.mbl-portaal details.mbl-extra {
	margin: 0 0 10px;
	padding: 10px 14px;
	background: #f7f8f6;
	border-radius: 3px;
}

.mbl-portaal details.mbl-extra > summary {
	cursor: pointer;
	font-size: .92em;
	font-weight: 600;
	color: var(--mbl-groen);
}

.mbl-portaal details.mbl-extra[open] > summary {
	margin-bottom: 12px;
}

.mbl-portaal details.mbl-extra .mbl-check {
	margin-top: 10px;
}

.mbl-bedankt h2 {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Tabbladen bestuurspagina en Financiën
   -------------------------------------------------------------------------- */

.mbl-tabs {
	display: flex;
	gap: 4px;
	margin: -4px 0 14px;
	border-bottom: 2px solid #1E4739;
}

.mbl-portaal .mbl-tabs a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: 4px 4px 0 0;
	background: #eef2ef;
	color: #1E4739;
	font-weight: 600;
	font-size: .92em;
	text-decoration: none;
}

.mbl-portaal .mbl-tabs a:hover {
	background: #e0e9e3;
}

.mbl-portaal .mbl-tabs a.actief {
	background: #1E4739;
	color: #fff;
}

.mbl-teller {
	display: inline-block;
	min-width: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: #c98a00;
	color: #fff;
	font-size: .75em;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	letter-spacing: 0;
}

.mbl-in { color: #10603a; }
.mbl-uit { color: #9c3f2b; }

.mbl-euro {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mbl-rechts { text-align: right !important; }

.mbl-cijfer-euro {
	font-size: 1.45em !important;
}

.mbl-cijfer-let {
	border-top-color: #c98a00 !important;
}

.mbl-fin-twee {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.mbl-fin-twee .mbl-kaart {
	margin-bottom: 14px;
}

.mbl-portaal input[type="file"] {
	padding: 8px;
	background: #f7f8f6;
}

.mbl-todo {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.mbl-todo li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid #f0f2ef;
}

.mbl-portaal .mbl-todo a {
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.mbl-todo-naam {
	display: block;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mbl-fin-kop {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.mbl-fin-kop h3 {
	margin: 0 0 4px;
}

.mbl-jaren {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.mbl-portaal .mbl-jaren a {
	padding: 4px 11px;
	border: 1px solid var(--mbl-lijn);
	border-radius: 14px;
	color: var(--mbl-grijs);
	font-size: .85em;
	text-decoration: none;
}

.mbl-portaal .mbl-jaren a.actief {
	background: #1E4739;
	border-color: #1E4739;
	color: #fff;
}

.mbl-fin {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.mbl-fin h4 {
	margin: 0 0 6px;
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbl-grijs);
}

.mbl-fin-tabel {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 0;
}

.mbl-fin-tabel td {
	padding: 6px 0;
	border: 0;
	border-bottom: 1px solid #f0f2ef;
	background: none;
}

.mbl-fin-tabel td.mbl-euro {
	text-align: right;
}

.mbl-fin-totaal td {
	border-top: 2px solid #1E4739;
	border-bottom: 0;
	font-weight: 700;
}

.mbl-fin-onder {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 14px;
	padding: 12px 16px;
	background: #f3f7f4;
	border-radius: 4px;
}

.mbl-fin-onder div {
	display: flex;
	flex-direction: column;
}

.mbl-fin-onder span {
	font-size: .82em;
	color: var(--mbl-grijs);
}

.mbl-fin-onder strong {
	font-size: 1.2em;
}

.mbl-fin-open strong {
	color: #8a5d00;
}

.mbl-niet-betaald {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	columns: 2;
	column-gap: 28px;
}

.mbl-niet-betaald li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	border-bottom: 1px solid #f0f2ef;
	break-inside: avoid;
}

.mbl-cat {
	font-size: .9em;
}

.mbl-portaal a.mbl-bon {
	text-decoration: none;
	font-size: 1.1em;
	margin-right: 4px;
}

.mbl-boeking-kop {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid #eef1ed;
}

.mbl-boeking-kop h3 {
	margin: 2px 0 4px;
	font-size: 1.25em;
}

.mbl-boeking-oms {
	margin: 0;
	color: var(--mbl-grijs);
	font-size: .92em;
}

.mbl-boeking-bedrag {
	font-size: 1.6em;
	font-weight: 700;
	white-space: nowrap;
}

.mbl-bonveld {
	margin-top: 14px;
}

.mbl-bonnen {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid #eef1ed;
}

.mbl-bonnen h4 {
	margin: 0 0 8px;
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbl-grijs);
}

.mbl-bonregel {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
}

.mbl-bonregel form {
	margin: 0 0 0 auto;
}

.mbl-klein {
	padding: 4px 10px !important;
	font-size: .78em !important;
}

.mbl-fin-blok h3 {
	margin-top: 0;
}

@media ( max-width: 720px ) {
	.mbl-fin-twee,
	.mbl-fin {
		grid-template-columns: 1fr;
	}

	.mbl-niet-betaald {
		columns: 1;
	}

	.mbl-boeking-kop {
		flex-direction: column;
	}
}

.mbl-portaal [hidden] {
	display: none !important;
}

.mbl-portaal a.mbl-knop,
.mbl-portaal a.mbl-knop:hover,
.mbl-portaal a.mbl-knop:focus {
	color: #fff;
	text-decoration: none;
}

.mbl-portaal a.mbl-knop-plat {
	display: inline-block;
	text-decoration: none;
}