/* Match Divi's ID-scoped list rules without !important or changing site typography. */
:root :is(#page-container, #et-boc, body) ul.vlaskop-verantwoordelijkheden {
	display: flex;
	flex-direction: column;
	gap: var(--vlaskop-regelafstand, 8px);
	list-style: none;
	margin: 0;
	padding: 0;
}
:root :is(#page-container, #et-boc, body) ul.vlaskop-verantwoordelijkheden > li.vlaskop-verantwoordelijkheden__item {
	display: flex;
	align-items: flex-start;
	gap: var(--vlaskop-icoonafstand, 12px);
	list-style: none;
	margin: 0;
	padding: 0;
}
:root :is(#page-container, #et-boc, body) .vlaskop-verantwoordelijkheden,
:root :is(#page-container, #et-boc, body) .vlaskop-verantwoordelijkheden__item,
:root :is(#page-container, #et-boc, body) .vlaskop-verantwoordelijkheden__label {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}
.vlaskop-verantwoordelijkheden__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	width: 24px;
	min-width: 24px;
	max-width: 24px;
	align-self: flex-start;
	line-height: inherit;
	color: var(--vlaskop-accent, currentColor);
}
.vlaskop-verantwoordelijkheden__svg {
	display: block;
	width: 24px;
	max-width: 100%;
	height: 1em;
	margin-block: .2em;
	fill: currentColor;
	flex: none;
}
.vlaskop-verantwoordelijkheden__label {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}
.vlaskop-accentbron[hidden] { display: none; }
.vlaskop-iconen-admin__table-scroll { overflow-x: auto; }
.vlaskop-iconen-admin .vlaskop-iconen-preview {
	display: inline-block;
	min-width: 1.5em;
	font-size: 1.25rem;
	text-align: center;
}
.vlaskop-iconen-admin .vlaskop-iconen-input { max-width: 100%; }
.vlaskop-iconen-admin .vlaskop-iconen-input[aria-invalid="true"] { border-color: #b32d2e; }

/* Only paint the existing module; never change its position, dimensions or stacking. */
:root :is(#page-container, #et-boc, body) .vlaskop-bestuurskaart:has(.vlaskop-accentbron[data-vlaskop-brush]) .vlaskop-bestuur-veeg {
	background-color: var(--vlaskop-accent);
	-webkit-mask-image: var(--vlaskop-brush-image);
	mask-image: var(--vlaskop-brush-image);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	mask-mode: alpha;
}
:root :is(#page-container, #et-boc, body) .vlaskop-bestuurskaart:has(.vlaskop-accentbron[data-vlaskop-brush]) .vlaskop-bestuur-veeg svg {
	opacity: 0;
}