/* Stylesheet for the station scan page (?page=station&sub=scan). */

/* Zoek een order */

.scanContainer{
	max-width: 640px;
	margin: 0px auto;
	padding-top: 40px;
}

.scanContainer h1{
	text-align: center;
	font-weight: 700;
	font-size: 34px;
	margin-bottom: 30px;
}

.scanSearchContainer{
	position: relative;
}

.scanSearchContainer input{
	width: 100%;
	height: 60px;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 0px 55px;
	font-size: 15px;
}

.scanSearchContainer .searchIcon{
	position: absolute;
	left: 22px;
	top: 22px;
}

.scanSearchContainer .barcodeIcon{
	position: absolute;
	right: 22px;
	top: 21px;
	font-size: 18px;
	color: var(--accent-color);
}

.scanHint{
	text-align: center;
	color: var(--grey);
	font-size: 13px;
	margin-top: 12px;
	margin-bottom: 30px;
}

/* De melding boven het invulveld, op een printstation het enige dat een scan oplevert */

.scanPrintMelding{
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--green);
	border-radius: 16px;
	padding: 18px 24px;
	margin-bottom: 15px;
	color: #fff;
	animation: scanPrintOp 0.2s ease-out;
}

/* zonder melding hoort er niets te staan */
.scanPrintMelding:empty{
	display: none;
}

.scanPrintMelding.fout{
	background: var(--red);
}

.scanPrintMelding .vink{
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.scanPrintMelding .nr{
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
}

.scanPrintMelding .oms{
	font-size: 13px;
	font-weight: 600;
	opacity: 0.85;
	margin-top: 3px;
}

.scanPrintMelding .rechts{
	margin-left: auto;
	text-align: right;
}

.scanPrintMelding .tijd{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
}

.scanPrintMelding .tel{
	font-size: 12px;
	opacity: 0.85;
	margin-top: 3px;
}

@keyframes scanPrintOp{
	from{ opacity: 0; transform: translateY(-6px); }
	to{ opacity: 1; transform: none; }
}

/* Laatst verwerkt op dit station */

.scanLastContainer{
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 20px 25px;
}

.scanLastTitle{
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.scanLastRow{
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 14px 0px;
	border-bottom: 1px solid var(--border-color);
}

.scanLastRow:last-child{
	border-bottom: none;
}

.scanLastRow .orderNumber{
	width: 80px;
	color: var(--accent-color);
	font-weight: 700;
}

.scanLastRow .bak{
	flex-grow: 1;
	color: var(--grey);
	font-size: 13px;
}

.scanLastRow .date{
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}

.scanLastRow .open a{
	color: var(--accent-color);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
}

.scanLastEmpty{
	color: var(--grey);
	font-size: 13px;
	padding: 14px 0px;
}

/* Het detailscherm ligt over de pagina heen, de topbar (70px + rand) blijft zichtbaar */

.scanOverlay{
	display: none;
	position: fixed;
	top: 71px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 900;
	overflow: hidden;
	background: var(--section-bg-color);
	padding: 15px;
	box-sizing: border-box;
}

/* kolom, zodat het scherm er onder tot de onderkant door kan lopen */
.scanOverlay.open{
	display: flex;
	flex-direction: column;
}

.scanBezig{
	text-align: center;
	padding-top: 60px;
	font-size: 13px;
	color: var(--grey);
}

/* Scanscherm van een order (station->order) */

.scanOrderPage{
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex: 1;
	min-height: 0px;
}

/* de balk als een ander de order ook open heeft staan */
.scanBezet{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #FFF6E0;
	border: 1px solid #F0D89B;
	border-radius: 10px;
	padding: 12px 20px;
}

.scanBezet .vlak{
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 17px;
	background: #F5C64B;
	color: #6B4E00;
	font-size: 15px;
}

.scanBezet .titel{
	font-weight: 700;
	font-size: 14px;
	color: #6B4E00;
}

.scanBezet .oms{
	font-size: 12px;
	color: #8A6100;
	margin-top: 2px;
}

.scanBezet .hint{
	margin-left: auto;
	text-align: right;
	font-size: 12px;
	color: #8A6100;
}

.scanOrderTop{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 12px 20px;
}

.scanOrderNr{
	font-weight: 700;
	font-size: 18px;
	color: var(--accent-color);
}

.scanLabel{
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 20px;
	padding: 4px 10px;
}

.scanLabel.spoed{
	background: var(--accent-color);
	color: #fff;
}

.scanLabel.repeat{
	background: #FFF0D4;
	color: #8A6100;
}

.scanLabel.batch{
	background: #E3F4FB;
	color: #00658A;
}

.scanVoortgang{
	margin-left: auto;
	text-align: right;
}


.scanVoortgang .cijfers{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	font-weight: 700;
	font-size: 15px;
	color: var(--green);
}

.scanVoortgang .balk{
	width: 90px;
	height: 6px;
	background: var(--border-color);
	border-radius: 3px;
	overflow: hidden;
}

.scanVoortgang .balk div{
	height: 100%;
	background: var(--green);
}

.scanVoortgang .label{
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--grey);
}

.scanSluiten{
	color: var(--grey);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	padding-left: 15px;
	border-left: 1px solid var(--border-color);
	cursor: pointer;
}

.scanRegel .vlak,
.scanLastRow .open a{
	cursor: pointer;
}

/* groeit mee tot de onderkant van het scherm */
.scanOrderBody{
	display: flex;
	gap: 15px;
	align-items: stretch;
	flex: 1;
	min-height: 0px;
}

.scanOrderMain{
	flex-grow: 1;
	min-width: 0px;
	min-height: 0px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.scanOrderSide{
	width: 340px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
	min-height: 0px;
	overflow-y: auto;
}

/*
 * Pers: het scherm vult precies het venster en scrolt zelf niet; in de rechterkolom geeft
 * alleen het notitiepaneel mee en scrolt daarbinnen. Onder het scherm staat de orderbon,
 * en daarvoor scrolt de overlay als geheel.
 */
.scanOverlay.metBon{
	overflow-y: auto;
}

.scanOrderPage.metBon{
	flex: none;
	height: 100%;
}

.scanOrderPage.metBon .scanPaneel{
	flex-shrink: 0;
}

.scanOrderPage.metBon .scanPaneel.notities{
	flex: 1 1 auto;
	min-height: 140px;
	display: flex;
	flex-direction: column;
}

.scanOrderPage.metBon .scanPaneel.notities .scanPaneelHead,
.scanOrderPage.metBon .scanPaneel.notities .scanNotitieInput{
	flex-shrink: 0;
}

.scanOrderPage.metBon .scanNotities{
	flex: 1;
	min-height: 0px;
	overflow-y: auto;
}

.scanOrderPage.metBon .scanActies{
	flex-shrink: 0;
}

.scanBon{
	flex: none;
	width: 100%;
	height: 1200px;
	margin-top: 15px;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	background: #fff;
	box-sizing: border-box;
}

/* De gekozen regel met de preview */

.scanProductCard{
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 15px;
	flex: 1;
	min-height: 0px;
	display: flex;
	flex-direction: column;
}

.scanProductHead{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.scanProductHead .titel{
	font-weight: 700;
	font-size: 16px;
}

.scanProductHead .chip,
.scanRegelsHead .chip,
.scanPaneelHead .chip{
	background: var(--section-bg-color);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--grey);
}

.scanToggle{
	margin-left: auto;
	display: flex;
	background: var(--section-bg-color);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 2px;
}

.scanToggle button{
	border: none;
	background: none;
	border-radius: 4px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--grey);
	cursor: pointer;
}

.scanToggle button.actief{
	background: #fff;
	color: #000;
	box-shadow: 0px 1px 2px #00000014;
}

.scanProductBody{
	display: flex;
	gap: 20px;
	align-items: stretch;
	flex: 1;
	min-height: 0px;
}

/*
 * De vakjes zijn 100 x 100, maar passen altijd onder elkaar zonder scrollbalk: past het niet,
 * dan rekent scanKantenPassen() (station.php) een kleinere maat uit en zet die in --kant.
 * Breedte en hoogte volgen allebei die maat, dus ze blijven vierkant.
 */
.scanKanten{
	--kant: 100px;
	width: var(--kant);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}

.scanKant{
	flex-shrink: 0;
	cursor: pointer;
	text-align: center;
}

.scanKant .vlak{
	position: relative;
	width: var(--kant);
	height: var(--kant);
	box-sizing: border-box;
	background: var(--section-bg-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.scanKant.actief .vlak{
	border: 2px solid var(--accent-color);
}

.scanKant .vlak img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* zonder opdruk: het kale shirt vervaagd, met het label er onderin overheen */
.scanKant.leeg .vlak img{
	filter: blur(4px);
	opacity: 0.6;
	transform: scale(1.1);
}

.scanKant .vlak span{
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 6px;
	padding: 4px 0px;
	border-radius: 6px;
	background: #fff;
	font-weight: 700;
	font-size: 6px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	color: #A6A6AE;
}

.scanKant .naam{
	font-size: 11px;
	line-height: 14px;
	margin-top: 4px;
}

.scanKant.actief .naam{
	font-weight: 700;
	color: var(--accent-color);
}

/* preview en het bijschrift onder elkaar, anders zet de flexbox ze naast elkaar */
.scanPreviewWrap{
	flex-grow: 1;
	min-width: 0px;
	min-height: 0px;
	display: flex;
	flex-direction: column;
}

/*
 * Het vlak waar de preview in ligt. Het heeft dezelfde rol als de wrap had, maar dan relatief,
 * zodat de ontwerpnotitie er absoluut in de hoek overheen kan liggen zonder ruimte van het
 * iframe af te snoepen: de pers kijkt naar de opdruk en die moet zo groot mogelijk blijven.
 */
.scanPreviewVlak{
	position: relative;
	flex: 1;
	min-height: 0px;
	display: flex;
	flex-direction: column;
}

/* vult wat er over is, zo groeit de preview mee met het scherm */
#scanPreview{
	width: 100%;
	flex: 1;
	min-height: 0px;
	border: none;
	background: #fff;
}

.scanPreviewVoet{
	flex-shrink: 0;
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: var(--grey);
	margin-top: 8px;
}

.scanPreviewVoet span{
	font-weight: 700;
	color: #000;
}

/*
 * De ontwerpnotitie van het product dat groot in beeld staat, rechtsonder over de preview heen.
 * Een eigen achtergrond met een randje, anders valt de tekst weg tegen een lichte of drukke
 * opdruk.
 *
 * Een vaste, smalle breedte in plaats van meegroeien met de notitie: zo blijft het een blokje in
 * de hoek dat de opdruk vrij laat, en loopt de tekst over meerdere regels in plaats van als 1
 * lange streep door het aanzicht. Smal wordt hoog, vandaar dat het tot de helft van de preview
 * mag groeien en daarna scrollt; op een smalle preview begrenst max-width de vaste maat alsnog.
 */
.scanPreviewNotities{
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 180px;
	max-width: 45%;
	max-height: 50%;
	overflow-y: auto;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--border-color);
	border-left: 3px solid var(--accent-color);
	border-radius: 8px;
	padding: 8px 10px;
	box-shadow: 0px 2px 8px #0000001f;
	text-align: left;
}

.scanPreviewNotities .kop{
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--grey);
	margin-bottom: 4px;
}

.scanPreviewNotities .tekst{
	font-size: 13px;
	line-height: 18px;
}

/* meerdere notities bij hetzelfde ontwerp: een streepje er tussen, anders loopt het aan elkaar */
.scanPreviewNotities .tekst + .tekst{
	border-top: 1px solid var(--border-color);
	margin-top: 6px;
	padding-top: 6px;
}

.scanGeenOntwerp{
	flex-grow: 1;
	min-height: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--section-bg-color);
	border-radius: 6px;
	font-size: 13px;
	color: var(--grey);
}

/* Alle regels van de order */

.scanRegels{
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 15px 20px;
}

.scanRegelsHead{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.scanRegelsHead .titel{
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #A9AFB6;
}

.scanRegelsHead .hint{
	margin-left: auto;
	font-size: 11px;
	color: var(--grey);
}

.scanRegelsLijst{
	display: flex;
	gap: 12px;
	overflow-x: auto;
}

.scanRegel{
	flex: 1 0 200px;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 12px;
}

.scanRegel.actief{
	border: 2px solid var(--accent-color);
}

.scanRegel.klaar{
	background: #F1FBF5;
	border-color: var(--green);
}

.scanRegel .vlak{
	flex-grow: 1;
	min-width: 0px;
	text-decoration: none;
	color: #000;
}

.scanRegel .naam{
	font-weight: 700;
	font-size: 13px;
}

.scanRegel .sku{
	font-size: 11px;
	color: var(--grey);
}

.scanRegel .kleuren{
	margin-top: 5px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.scanRegel .kleur{
	font-size: 10px;
	color: var(--grey);
	background: var(--section-bg-color);
	border-radius: 10px;
	padding: 1px 7px;
}

.scanRegel .stuks{
	text-align: center;
	font-weight: 700;
	font-size: 16px;
}

.scanRegel .stuks span{
	display: block;
	font-weight: 400;
	font-size: 10px;
	color: var(--grey);
}

.scanRegel .vink{
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
}

.scanRegel .vink.klaar{
	background: var(--green);
	border-color: var(--green);
}

.scanRegel .vink.klaar:after{
	content: '';
	display: block;
	width: 5px;
	height: 10px;
	margin: 2px auto;
	border: solid #fff;
	border-width: 0px 2px 2px 0px;
	transform: rotate(45deg);
}

/*
 * Pers: de producten als vaste kaartjes van 327 x 96 in een balk die opzij scrolt. Links de
 * afbeelding, in het midden naam, artikelnummer en de kleur met een stip, rechts het aantal
 * met het vinkje er onder.
 */
.scanRegelsLijst.kaarten{
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 6px;
}

.scanRegelsLijst.kaarten .scanRegel{
	position: relative;
	flex: 0 0 327px;
	width: 327px;
	height: 96px;
	box-sizing: border-box;
	align-items: center;
	gap: 12px;
	padding: 10px 12px 10px 10px;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

/* de rand van 2px bij de gekozen regel mag de maat niet veranderen */
.scanRegelsLijst.kaarten .scanRegel.actief{
	padding: 9px 11px 9px 9px;
}

.scanRegelsLijst.kaarten .scanRegel.klaar{
	background: #F1FBF5;
}

.scanRegelsLijst.kaarten .plaatje{
	width: 70px;
	height: 76px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.scanRegelsLijst.kaarten .plaatje img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.scanRegelsLijst.kaarten .vlak{
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	min-width: 0px;
}

.scanRegelsLijst.kaarten .naam{
	font-size: 14px;
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.scanRegelsLijst.kaarten .sku{
	font-weight: 500;
	font-size: 11px;
	line-height: 15px;
}

.scanRegelsLijst.kaarten .kleuren{
	margin-top: 6px;
	flex-wrap: nowrap;
	overflow: hidden;
}

.scanRegelsLijst.kaarten .kleur{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 1px 8px 1px 5px;
	font-weight: 600;
	font-size: 10px;
	color: #000;
}

.scanRegelsLijst.kaarten .kleur .stip{
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid #00000022;
	box-sizing: border-box;
}

/* rechts: het aantal boven, het vinkje er onder; getal en "stuks" links uitgelijnd op elkaar */
.scanRegelsLijst.kaarten .stuks{
	align-self: flex-start;
	margin-left: auto;
	padding-right: 4px;
	text-align: left;
	font-size: 17px;
	line-height: 18px;
}

.scanRegelsLijst.kaarten .stuks span{
	margin-top: 1px;
	font-weight: 700;
}

.scanRegelsLijst.kaarten .vink{
	position: absolute;
	right: 12px;
	bottom: 10px;
	width: 30px;
	height: 26px;
	border-radius: 6px;
	background: #fff;
}

.scanRegelsLijst.kaarten .scanRegel.actief .vink{
	right: 11px;
	bottom: 9px;
}

.scanRegelsLijst.kaarten .vink.klaar{
	background: var(--green);
}

.scanRegelsLijst.kaarten .vink.klaar:after{
	width: 6px;
	height: 12px;
	margin: 4px auto 0px auto;
}

/* snij / sorteer: de producten waar de gekozen opdruk op zit */

.scanItem{
	flex: 1 0 230px;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 8px 10px;
}

.scanItem.actief{
	border: 2px solid var(--accent-color);
}

.scanItem.klaar{
	background: #F1FBF5;
	border-color: var(--green);
}

.scanItem .vlak{
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background: var(--section-bg-color);
	border-radius: 5px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scanItem .vlak img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.scanItem .tekst{
	flex-grow: 1;
	min-width: 0px;
	cursor: pointer;
}

.scanItem .sku{
	font-weight: 700;
	font-size: 13px;
	color: var(--accent-color);
}

.scanItem .logos{
	font-weight: 700;
	font-size: 16px;
}

.scanItem .logos span{
	font-weight: 400;
	font-size: 11px;
	color: var(--grey);
	margin-left: 4px;
}

.scanItem .maten{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

.scanItem .maat{
	font-size: 10px;
	color: var(--grey);
	background: var(--section-bg-color);
	border-radius: 10px;
	padding: 1px 7px;
}

.scanItem .maat b{
	color: #000;
}

.scanItem .vink{
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
}

.scanItem .vink.klaar{
	background: var(--green);
	border-color: var(--green);
}

.scanItem .vink.klaar:after{
	content: '';
	display: block;
	width: 5px;
	height: 10px;
	margin: 2px auto;
	border: solid #fff;
	border-width: 0px 2px 2px 0px;
	transform: rotate(45deg);
}

/* Inpak: links tellen, rechts waar het heen gaat */

.scanOrderBody.inpak{
	display: flex;
	gap: 15px;
	align-items: stretch;
}

.scanInpakItems,
.scanInpakAdres{
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 15px 20px;
	display: flex;
	flex-direction: column;
	min-height: 0px;
}

.scanInpakItems{
	flex: 1;
	min-width: 0px;
}

.scanInpakAdres{
	width: 420px;
	flex-shrink: 0;
}

.scanInpakTotaal{
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 45px 10px;
}

.scanInpakTotaal .cijfer{
	font-weight: 800;
	font-size: 110px;
	line-height: 100px;
	letter-spacing: -3px;
}

.scanInpakTotaal .groot{
	font-weight: 600;
	font-size: 18px;
}

.scanInpakTotaal .klein{
	font-weight: 500;
	font-size: 13px;
	color: var(--grey);
	margin-top: 2px;
}

.scanInpakLijst{
	flex: 1;
	min-height: 0px;
	overflow-y: auto;
}

.scanInpakItem{
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px 0px;
	border-top: 1px solid var(--border-color);
}

.scanInpakItem .vlak{
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	background: var(--section-bg-color);
	border-radius: 5px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scanInpakItem .vlak img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.scanInpakItem .tekst{
	flex-grow: 1;
	min-width: 0px;
}

.scanInpakItem .naam{
	font-weight: 700;
	font-size: 17px;
	line-height: 22px;
}

.scanInpakItem .oms{
	font-weight: 500;
	font-size: 13px;
	color: var(--grey);
	margin-top: 2px;
}

.scanInpakItem .stuks{
	font-weight: 700;
	font-size: 30px;
}

.scanInpakItem .stuks span{
	font-weight: 500;
	font-size: 12px;
	color: var(--grey);
	margin-left: 10px;
}

.scanInpakVoet{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--border-color);
	padding-top: 12px;
	margin-top: 10px;
	font-weight: 500;
	font-size: 12px;
	color: var(--grey);
}

.scanInpakVoet .totaal{
	font-weight: 700;
	font-size: 15px;
	color: #000;
}

/* het adresblok */

/* de kopjes boven de twee panelen staan in het ontwerp grijs, niet zwart */
.scanOrderBody.inpak .scanPaneelHead{
	font-weight: 600;
	font-size: 10px;
	color: var(--grey);
}

.scanOrderBody.inpak .scanPaneelHead .chip{
	font-size: 11px;
	font-weight: 700;
}

.scanInpakAdres .chip.geel{
	background: #FFF6E0;
	border-color: #F3E0B0;
	color: #8A6100;
}

.scanInpakAdres .adres{
	padding: 25px 0px 20px 0px;
}

.scanInpakAdres .adres .kop,
.scanInpakAdres .contact .kop,
.scanInpakAdres .gegevens .kop{
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--grey);
	margin-bottom: 3px;
}

.scanInpakAdres.afhalen .adres .kop{
	color: #B07A00;
}

.scanInpakAdres .adres .naam{
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 4px;
}

.scanInpakAdres .adres .straat{
	font-weight: 800;
	font-size: 28px;
	line-height: 34px;
}

.scanInpakAdres .adres .land{
	font-weight: 500;
	font-size: 15px;
	color: var(--grey);
	margin-top: 8px;
}

.scanInpakAdres .contact{
	display: flex;
	gap: 25px;
	border-top: 1px solid var(--border-color);
	padding-top: 15px;
	font-weight: 700;
	font-size: 14px;
}

.scanInpakAdres .melding{
	background: #FFF6E0;
	border-radius: 6px;
	padding: 12px 14px;
	margin-top: 15px;
	font-weight: 500;
	font-size: 13px;
	color: #8A6100;
}

.scanInpakAdres .melding.grijs{
	background: var(--section-bg-color);
	color: var(--grey);
}

.scanInpakAdres .gegevens{
	display: flex;
	flex-wrap: wrap;
	gap: 15px 0px;
	margin-top: auto;
	padding-top: 20px;
	font-weight: 700;
	font-size: 14px;
}

.scanInpakAdres .gegevens > div{
	width: 50%;
}

.scanInpakAdres .scanActies{
	margin-top: 15px;
}

.scanInpakAdres .scanActie{
	padding: 18px 10px;
	font-weight: 700;
	font-size: 18px;
}

/* Rechterkolom */

.scanPaneel{
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 15px;
}

.scanPaneelHead{
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.scanPaneelHead .tel{
	margin-left: auto;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: none;
}

.scanLeeg{
	font-size: 12px;
	color: var(--grey);
	padding: 5px 0px;
}

/* smal gehouden zodat vier kanten onder elkaar passen zonder te scrollen */
.scanOpdruk{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0px;
	border-top: 1px solid var(--border-color);
	cursor: pointer;
}

.scanOpdruk .vlak{
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	background: var(--section-bg-color);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scanOpdruk .vlak img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.scanOpdruk .tekst{
	flex-grow: 1;
	min-width: 0px;
}

.scanOpdruk .naam{
	font-weight: 600;
	font-size: 12px;
	line-height: 15px;
}

.scanOpdruk .oms{
	font-size: 10px;
	line-height: 13px;
	color: var(--grey);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scanOpdruk .aantal{
	font-weight: 700;
	font-size: 12px;
}

/* snij / sorteer: de logo's van de hele order, als losse kaartjes */

.scanLogo{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	margin-top: 8px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	cursor: pointer;
}

.scanLogo.actief{
	border-color: var(--blue);
	background: #F2FAFE;
}

.scanLogo .vlak{
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	background: var(--section-bg-color);
	border-radius: 5px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scanLogo .vlak img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* het tekstvoorbeeldje moet in het vlakje passen, hoe lang de tekst ook is */
.scanLogo .vlak span{
	max-width: 100%;
	font-size: 9px;
	line-height: 11px;
	padding: 0px 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scanLogo .tekst{
	flex-grow: 1;
	min-width: 0px;
}

.scanLogo .naam{
	font-weight: 700;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scanLogo .naam.kopieer{
	cursor: copy;
}

.scanLogo .naam.kopieer:hover{
	text-decoration: underline;
}

.scanLogo .naam.gekopieerd{
	color: var(--grey);
}

.scanLogo .oms{
	font-weight: 600;
	font-size: 11px;
	color: var(--grey);
}

.scanLogo .aantal{
	font-weight: 700;
	font-size: 15px;
}

table.scanMaten{
	width: 100%;
	font-size: 12px;
}

table.scanMaten th{
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--grey);
	text-align: center;
	padding-bottom: 5px;
}

table.scanMaten th:first-child{
	text-align: left;
}

table.scanMaten td{
	text-align: center;
	padding: 4px 0px;
	border-top: 1px solid var(--border-color);
}

table.scanMaten td.kleur{
	text-align: left;
}

table.scanMaten td.tot{
	font-weight: 700;
}

.scanMatenVoet{
	text-align: right;
	font-size: 11px;
	color: var(--grey);
	margin-top: 8px;
}

.scanNotitieKop{
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--grey);
	margin: 10px 0px 5px 0px;
}

.scanNotitieKop:before{
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	margin-right: 6px;
	background: var(--blue);
}

.scanNotitieKop.prive:before{
	background: var(--accent-color);
}
/* de notitie bij de bestelling staat los van die uit de ontwerptool, dus ook een eigen kleur */
.scanNotitieKop.bestel:before{
	background: var(--opm-groen);
}

.scanNotitie{
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 8px;
}

.scanNotitie .meta{
	font-size: 10px;
	color: var(--grey);
	margin-top: 2px;
}

/*
 * De prullenbak bij een eigen prive notitie, op de stations en bij de kwaliteitscontrole. Rechts
 * boven in de notitie; in het label van opmaak (een flex regel) schuift hij naar rechts.
 */
.notitieWeg{
	float: right;
	margin: 0px 0px 2px 8px;
	padding: 2px 4px;
	border: none;
	background: none;
	font-size: 11px;
	line-height: 1;
	color: var(--grey);
	cursor: pointer;
}

.notitieWeg:hover{
	color: var(--red, #d33);
}

.opmNotitie .nlabel .notitieWeg{
	float: none;
	margin: 0px 0px 0px auto;
}

/* de reden die bij een melding gekozen is */
.scanNotitie .reden{
	display: inline-block;
	background: var(--section-bg-color);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 1px 8px;
	margin-bottom: 3px;
	font-weight: 600;
	font-size: 10px;
	color: var(--grey);
}

.scanNotitieInput{
	width: 100%;
	height: 36px;
	background: var(--section-bg-color);
	border: 1px dashed var(--border-color);
	border-radius: 6px;
	padding: 0px 10px;
	font-size: 12px;
	margin-top: 10px;
}

.scanAdres{
	font-size: 12px;
	line-height: 18px;
}

/* hele order afkeuren, boven de knoppen */
.scanAfkeuren{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #FDF3F3;
	border: 1px solid #F3D5D5;
	border-radius: 8px;
	padding: 12px;
	cursor: pointer;
}

.scanAfkeuren.aan{
	border-color: var(--red);
}

.scanAfkeuren .vink{
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
	background: #fff;
	border: 1px solid #E0BDBD;
	border-radius: 4px;
}

.scanAfkeuren .vink.aan{
	background: var(--red);
	border-color: var(--red);
}

.scanAfkeuren .vink.aan:after{
	content: '';
	display: block;
	width: 4px;
	height: 9px;
	margin: 2px auto;
	border: solid #fff;
	border-width: 0px 2px 2px 0px;
	transform: rotate(45deg);
}

.scanAfkeuren .titel{
	font-weight: 700;
	font-size: 12px;
	color: var(--red);
}

.scanAfkeuren .oms{
	font-size: 11px;
	line-height: 15px;
	color: #A05555;
}

.scanActies{
	display: flex;
	gap: 10px;
}

.scanActie{
	flex-grow: 1;
	border: none;
	border-radius: 8px;
	padding: 14px 10px;
	font-weight: 600;
	font-size: 13px;
	color: #fff;
	cursor: pointer;
}

.scanActie.approved{
	background: var(--green);
}

.scanActie.denied{
	background: var(--red);
}

.scanActie.bak{
	background: var(--red);
}

/* Prive notities bij het openen van een order, als kaartjes op elkaar */

.scanMeldingen{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 950;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #00000066;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
}

/* ze liggen op elkaar, de onderste steken er een stukje onderuit */
.scanMelding{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 420px;
	max-width: calc(100% - 40px);
	max-height: calc(100% - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0px 10px 40px #00000033;
	padding: 25px;
	box-sizing: border-box;
	transform-origin: center top;
}

.scanMelding .kop{
	text-align: center;
	margin-bottom: 20px;
}

.scanMelding .avatar{
	position: relative;
	width: 54px;
	height: 54px;
	margin: 0px auto 15px auto;
	border-radius: 27px;
	overflow: visible;
}

.scanMelding .avatar img{
	width: 54px;
	height: 54px;
	border-radius: 27px;
	object-fit: cover;
}

.scanMelding .avatar.letters{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-color);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.5px;
	color: #fff;
}

.scanMelding .avatar .stip{
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 13px;
	height: 13px;
	border: 2px solid #fff;
	border-radius: 8px;
	background: var(--green);
}

.scanMelding .titel{
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
}

.scanMelding .wie{
	font-size: 13px;
	color: var(--grey);
	margin-top: 4px;
}

.scanMelding .reden{
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 12px;
}

.scanMelding .reden .vlak{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 6px;
	background: var(--section-bg-color);
	color: var(--grey);
}

/* achtergrond verwijderen (opmaak): de afbeelding zelf in het vlakje, op een ruitje zodat je ziet wat transparant is */
.scanMelding .reden .vlak.plaatje{
	width: 56px;
	height: 56px;
	padding: 4px;
	box-sizing: border-box;
	background: repeating-conic-gradient(#EDEDF1 0% 25%, #fff 0% 50%) 50% / 12px 12px;
}

.scanMelding .reden .vlak.plaatje img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.scanMelding .reden .tekst{
	min-width: 0px;
	overflow-wrap: anywhere;
}

.scanMelding.achtergrond .avatar.letters{
	background: var(--red, #d33);
	font-size: 22px;
}

.scanMelding .reden .naam{
	font-weight: 700;
	font-size: 13px;
}

.scanMelding .reden .oms{
	font-size: 11px;
	color: var(--grey);
}

/* de notitie zelf, in hetzelfde geel als de meldingen op het inpakscherm */
.scanMelding .melding{
	background: #FFF6E0;
	border-radius: 8px;
	padding: 15px;
	margin-top: 15px;
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	color: #8A6100;
}

.scanMelding .voet{
	display: flex;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--border-color);
	padding-top: 15px;
	margin-top: 20px;
}

.scanMelding .voet .hint{
	font-size: 11px;
	line-height: 15px;
	color: var(--grey);
}

.scanMelding .gezien{
	margin-left: auto;
	flex-shrink: 0;
	height: 44px;
	padding: 0px 28px;
	border: none;
	border-radius: 8px;
	background: var(--green);
	font-weight: 600;
	font-size: 13px;
	color: #fff;
	cursor: pointer;
}

/* smal scherm: kolommen onder elkaar, dan hun eigen hoogte en het venster scrollt */
@media (max-width: 1300px){
	.scanOverlay{
		overflow-y: auto;
	}

	.scanOrderBody{
		flex-direction: column;
		flex: none;
	}

	.scanOrderSide{
		width: 100%;
		overflow-y: visible;
	}

	.scanProductCard{
		flex: none;
	}

	/* de vaste hoogte staat op het vlak, het iframe er in vult hem; zo blijft de hoek met de notitie kloppen */
	.scanPreviewVlak,
	.scanGeenOntwerp{
		flex: none;
		height: 420px;
	}
}

/* Order details tijdens het inscannen */

#scanOrderDivWP iframe{
	height: 100%;
}

#scanOrderDiv iframe{
	height: 95%;
}

#scanOrderDiv div.dialogFooter{
	background-color: #efefef;
	border-top: 1px solid lightgray;
	height: 5%;
	text-align: center;
}

#scanOrderDivChecks div.checkboxDevider{
	float: left;
	width: 100%;
}

#scanOrderDivChecks div.checkboxContainer{
	background: #ec7a7a;
    text-align: center;
    border-radius: 5px;
    float: left;
    padding: 3px;
    min-width: calc(25% - 4px);
    margin-right: 4px;
    margin-bottom: 4px;
    cursor: pointer;
}

#scanOrderDivChecks div.checkboxContainer.checked{
	background: #9CEC7A;
}

#scanOrderDivChecks td{
	width: 25%;
}

#scanOrderDiv button{
	padding: 6px;
}

#scanInputContainer{
	width: 400px;
	height: 400px;
}

#scanInputContainer input{
	width: 350px;
	height: 50px;
}

/* Het venster voor de melding bij een bak of bij het afkeuren van een order */

.scanRedenModal{
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 960;
	background: #00000066;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
}

.scanRedenModal.open{
	display: flex;
	align-items: center;
	justify-content: center;
}

.scanRedenVenster{
	width: 460px;
	max-width: 100%;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0px 10px 40px #00000029;
	padding: 25px;
}

.scanRedenTitel{
	font-weight: 700;
	font-size: 18px;
}

.scanRedenUitleg{
	font-size: 13px;
	color: var(--grey);
	margin: 5px 0px 20px 0px;
}

/* het strookje boven het tekstveld met de order, de batch en wie de bak maakt */
.scanRedenBalk{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	background: var(--section-bg-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 12px 15px;
	margin-bottom: 15px;
	font-size: 12px;
}

.scanRedenBalk .kop{
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--grey);
}

.scanRedenBalk .waarde{
	font-weight: 700;
	margin-right: 15px;
}

.scanRedenBalk .waarde:last-child{
	margin-right: 0px;
}

.scanRedenTekst{
	width: 100%;
	height: 120px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 12px;
	font-family: inherit;
	font-size: 13px;
	resize: vertical;
	box-sizing: border-box;
}

.scanRedenTekst:focus{
	outline: none;
	border-color: var(--grey);
}

.scanRedenVoet{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.scanRedenFout{
	flex-grow: 1;
	font-size: 12px;
	color: var(--red);
}

.scanRedenKnop{
	height: 48px;
	padding: 0px 20px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background: #fff;
	font-weight: 600;
	font-size: 13px;
	color: #000;
	cursor: pointer;
}

.scanRedenKnop.rood{
	border-color: var(--red);
	background: var(--red);
	color: #fff;
}


/* ===================================================================
   Het scanscherm van opmaak (?page=station&sub=scan, station type 0).

   Opmaak werkt anders dan de andere stations: geen enkele regel groot
   in beeld met een lijst er onder, maar alle producten van de order
   onder elkaar als kaarten. Daarom staat het hier apart, met een eigen
   opm prefix, en raakt het de scanOrder stijlen van de rest niet.
   =================================================================== */

.scanOrderPage{
	--opm-ink: #1A1A20;
	--opm-muted: #6B6B75;
	--opm-faint: #9C9CA6;
	--opm-line: #E7E7EC;
	--opm-hair: #F1F1F4;
	--opm-veld: #F5F5F8;
	--opm-paper: #F6F7F9;
	--opm-pink: #E6007E;
	--opm-pink-soft: #FDEAF4;
	--opm-groen: #22A34C;
	--opm-groen-soft: #EAF7EF;
	--opm-groen-lijn: #C3E7CF;
	--opm-rood: #E5372A;
	--opm-rood-soft: #FDEFED;
	--opm-rood-lijn: #F5CBC6;
	--opm-blauw: #2F6FED;
	--opm-blauw-soft: #EDF3FE;
	--opm-blauw-lijn: #BFD5F8;
	--opm-tan: #FBEFD6;
	--opm-tan-tekst: #8A6416;
	--opm-lucht: #E4F0FB;
	--opm-lucht-tekst: #2E7FC4;
}

/* --- de balk boven de order --- */

.opmTop{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--opm-line);
	border-radius: 12px;
	padding: 11px 18px;
}

.opmNr{
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.02em;
	color: var(--opm-ink);
}

.opmPil{
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 6px;
	white-space: nowrap;
}

.opmPil.spoed{ background: var(--opm-pink); color: #fff; }
.opmPil.repeat{ background: var(--opm-tan); color: var(--opm-tan-tekst); }
.opmPil.batch{ background: var(--opm-lucht); color: var(--opm-lucht-tekst); }
.opmPil.nieuw{ background: var(--opm-veld); color: var(--opm-faint); }

.opmVoortgang{
	margin-left: auto;
	text-align: right;
}

.opmVoortgang .rr{
	display: flex;
	align-items: center;
	gap: 11px;
	justify-content: flex-end;
}

.opmVoortgang .cijfer{
	font-size: 17px;
	font-weight: 800;
	color: var(--opm-groen);
	letter-spacing: -0.015em;
}

.opmVoortgang .baan{
	width: 118px;
	height: 8px;
	background: var(--opm-hair);
	border-radius: 99px;
	overflow: hidden;
}

.opmVoortgang .vul{
	display: block;
	height: 100%;
	background: var(--opm-groen);
	border-radius: 99px;
	transition: width .2s;
}

.opmVoortgang .om{
	display: block;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--opm-faint);
	text-transform: uppercase;
	margin-top: 3px;
}

.opmSluiten{
	font-size: 12.5px;
	font-weight: 700;
	color: var(--opm-muted);
	border: 1.5px solid var(--opm-line);
	border-radius: 9px;
	padding: 8px 15px;
	cursor: pointer;
}

.opmSluiten:hover{
	border-color: var(--opm-pink);
	color: var(--opm-pink);
}

/* --- het werkvlak --- */

.opmBody{
	flex: 1;
	min-height: 0px;
	min-width: 0px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 15px;
}

/*
 * De kolom met de producten is de enige scroller: hij scrolt gewoon door de order heen, zonder
 * per product vast te klikken. Dat klikte eerder wel vast, maar dan is de helft van een kaart niet
 * te bereiken en hangt het van de plek van de muis af wat er scrolt. De springknoppen bovenin gaan
 * nog wel van product naar product.
 */
.opmRol{
	overflow-y: auto;
	scroll-behavior: smooth;
	min-height: 0px;
	min-width: 0px;
	padding-right: 2px;
}

.opmZij{
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 0px;
}

.opmZijRol{
	flex: 1;
	min-height: 0px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-right: 2px;
}

/* --- een product --- */

.opmKaart{
	background: #fff;
	border: 1px solid var(--opm-line);
	border-radius: 14px;
	margin-bottom: 15px;
	/* zo hoog als zijn eigen inhoud; wat er niet in past duwt de kolom langer in plaats van
	   dat het binnen de kaart apart moet scrollen */
	height: auto;
	display: flex;
	flex-direction: column;
}

.opmKaart.klaar{
	border-color: var(--opm-groen-lijn);
	background: var(--opm-groen-soft);
}

.opmKop{
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 15px 18px 0px;
}

.opmKop .nr{
	flex: none;
	width: 27px;
	height: 27px;
	border-radius: 8px;
	background: var(--opm-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	display: grid;
	place-items: center;
}

.opmKaart.klaar .opmKop .nr{ background: var(--opm-groen); }

.opmKop .tt{
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.opmKop .rechts{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.opmChip{
	font-size: 11.5px;
	font-weight: 600;
	color: var(--opm-muted);
	background: var(--opm-veld);
	border-radius: 6px;
	padding: 5px 10px;
	white-space: nowrap;
}

.opmKind{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	font-weight: 800;
	padding: 5px 11px;
	border-radius: 8px;
	background: #fff;
	color: var(--opm-rood);
	border: 1.5px dashed var(--opm-rood);
}

.opmVink{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--opm-line);
	background: #fff;
	border-radius: 10px;
	padding: 6px 13px 6px 8px;
	font-size: 12.3px;
	font-weight: 700;
	color: var(--opm-muted);
	cursor: pointer;
}

.opmVink .bol{
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--opm-line);
	display: grid;
	place-items: center;
	flex: none;
	font-size: 11px;
	color: #C9C9D2;
}

.opmVink:hover{
	border-color: var(--opm-groen);
	color: var(--opm-groen);
}

.opmVink.aan{
	background: var(--opm-groen);
	border-color: var(--opm-groen);
	color: #fff;
}

.opmVink.aan .bol{
	background: #fff;
	border-color: #fff;
	color: var(--opm-groen);
}

.opmBewerkKnop{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--opm-line);
	background: #fff;
	border-radius: 10px;
	padding: 8px 14px;
	font-size: 12.3px;
	font-weight: 700;
	color: var(--opm-muted);
	cursor: pointer;
}

.opmBewerkKnop:hover{
	border-color: var(--opm-pink);
	color: var(--opm-pink);
}

.opmBewerkKnop.aan{
	background: var(--opm-pink);
	border-color: var(--opm-pink);
	color: #fff;
}

.opmTog{
	display: inline-flex;
	background: var(--opm-veld);
	border-radius: 9px;
	padding: 4px;
}

.opmTog button{
	border: 0px;
	background: transparent;
	font-size: 12.2px;
	font-weight: 600;
	color: var(--opm-faint);
	padding: 7px 15px;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}

.opmTog button.actief{
	background: #fff;
	color: var(--opm-ink);
	box-shadow: 0px 1px 3px rgba(0, 0, 0, .10);
}

/* tijdens het bewerken staat het doek vast op de opdruk, dus de knoppen uit */
.opmTog.uit{
	opacity: .45;
	pointer-events: none;
}

.opmInhoud{
	flex: 1;
	min-height: 0px;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) 250px;
	gap: 16px;
	padding: 12px 16px 4px;
	align-items: stretch;
}

/* --- de aanzichten --- */

/* de aanzichten staan gewoon onder elkaar; de kolom er omheen scrolt */
.opmKanten{
	min-height: 0px;
	padding-right: 2px;
}

.opmKant{
	display: block;
	width: 100%;
	border: 0px;
	background: transparent;
	padding: 0px;
	cursor: pointer;
	text-align: center;
}

.opmKant + .opmKant{ margin-top: 12px; }

/* een kant die niet in het ontwerp staat, alleen de kledingfoto: niet te kiezen */
.opmKant:disabled{ cursor: default; }

.opmKant .vak{
	display: block;
	position: relative;
	background: var(--opm-paper);
	border: 2px solid transparent;
	border-radius: 12px;
	padding: 8px;
	min-height: 74px;
}

.opmKant .vak img{
	width: 100%;
	height: auto;
	display: block;
}

.opmKant:hover .vak{ border-color: var(--opm-line); }

.opmKant.actief .vak{
	border-color: var(--opm-pink);
	background: #fff;
}

.opmKant .lb{
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: #3A3A44;
	margin-top: 7px;
}

.opmKant.actief .lb{ color: var(--opm-pink); }

.opmKant .num{
	position: absolute;
	left: 6px;
	top: 6px;
	width: 19px;
	height: 19px;
	border-radius: 6px;
	background: rgba(26, 26, 32, .82);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	display: grid;
	place-items: center;
}

.opmKant.actief .num{ background: var(--opm-pink); }

/* zonder opdruk: het kale shirt vervaagd, met het label er onderin overheen, net als .scanKant */
.opmKant.leeg .vak{
	overflow: hidden;
}

.opmKant.leeg .vak img{
	filter: blur(4px);
	opacity: 0.6;
	transform: scale(1.1);
}

.opmKant .geen{
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 6px;
	padding: 4px 0px;
	border-radius: 6px;
	background: #fff;
	text-align: center;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	color: #A6A6AE;
}

/* --- de preview --- */

.opmPodium{
	min-width: 0px;
	min-height: 0px;
	display: flex;
	flex-direction: column;
}

/*
 * Het doek vult de ruimte tot de exportknoppen: de kaart is minstens zo hoog als de zichtbare
 * kolom (zie hieronder, alleen op een breed scherm), en het doek krijgt wat daarvan overblijft
 * naast de kop en de knoppen. Is de kolom ernaast langer, dan groeit de kaart met hem mee.
 */
.opmDoek{
	flex: none;
	height: 55vh;
	min-height: 300px;
	background: var(--opm-paper);
	border: 1px solid var(--opm-hair);
	border-radius: 12px;
	overflow: hidden;
}

/*
 * Buiten de bewerkmodus is het doek alleen een preview en valt er niets aan te klikken. Het iframe
 * ving het muiswiel wel op, en dan deed scrollen boven de preview niets: dat is het grootste vlak
 * van de kaart, dus dat voelde als scrollen dat niet werkt. In de bewerkmodus staat het weer aan,
 * want daar wordt in het doek gesleept.
 */
.opmDoek iframe{
	display: block;
	width: 100%;
	height: 100%;
	border: 0px;
	pointer-events: none;
}

.opmKaart.bewerken .opmDoek iframe{
	pointer-events: auto;
}

/*
 * Op een breed scherm is de kolom met de producten de scroller, en is elke kaart minstens zo hoog
 * als dat zichtbare stuk (100cqh van .opmRol, min de ruimte onder de kaart). Het doek rekt dan op
 * tot de rij met exportknoppen in plaats van een vaste 55vh. Onder 1200px scrolt de pagina als
 * geheel, daar is geen kolomhoogte om op te vullen en blijft de vaste hoogte staan.
 */
@media(min-width: 1201px){
	.opmRol{
		container-type: size;
	}

	.opmKaart{
		min-height: calc(100cqh - 15px);
	}

	.opmPodium{
		min-height: 300px;
	}

	.opmDoek{
		flex: 1;
		height: auto;
	}
}

.opmDoekVoet{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 0px 2px;
	font-size: 11.5px;
	color: var(--opm-faint);
}

.opmDoekVoet span:first-child{
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--opm-ink);
}

.opmGewijzigd{
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--opm-tan-tekst);
	background: var(--opm-tan);
	border-radius: 5px;
	padding: 3px 8px;
}

.opmGeenOntwerp{
	flex: 1;
	display: grid;
	place-items: center;
	min-height: 200px;
	background: var(--opm-paper);
	border: 1px dashed var(--opm-line);
	border-radius: 12px;
	font-size: 13px;
	color: var(--opm-faint);
}

/* --- het bewerkpaneel --- */

.opmPaneel{
	flex: none;
	margin-top: 12px;
	border: 1.5px solid var(--opm-pink);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.opmPaneelKop{
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 13px;
	background: var(--opm-pink-soft);
	border-bottom: 1px solid var(--opm-line);
	color: var(--opm-pink);
}

.opmPaneelKop .pt{
	font-size: 11.5px;
	font-weight: 800;
}

.opmPaneelKop .pb{
	font-size: 11.3px;
	color: var(--opm-muted);
	font-family: ui-monospace, Menlo, monospace;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.opmPaneelKop .rechtsaf{
	margin-left: auto;
	display: flex;
	gap: 8px;
	flex: none;
}

.opmKlein{
	border: 1.5px solid var(--opm-line);
	background: #fff;
	border-radius: 9px;
	padding: 7px 13px;
	font-size: 12px;
	font-weight: 700;
	color: var(--opm-muted);
	cursor: pointer;
}

.opmKlein:hover{
	border-color: var(--opm-pink);
	color: var(--opm-pink);
}

.opmKlein.groen{
	background: var(--opm-groen);
	border-color: var(--opm-groen);
	color: #fff;
}

.opmKlein.groen:hover{ background: #1C8C40; }

.opmGereedschap{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 12px 13px 13px;
}

/* zolang er geen opdruk gekozen is valt er niets in te stellen */
.opmGereedschap.uit{
	opacity: .4;
	pointer-events: none;
}

.opmGereedschap .groep{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.opmGereedschap .groep.breed{ flex: 1 1 100%; }

.opmGereedschap .gl{
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--opm-faint);
}

.opmGereedschap .gnaam{
	letter-spacing: 0px;
	text-transform: none;
	color: var(--opm-ink);
	font-size: 10px;
	margin-left: 4px;
}

.opmGereedschap .gr2{
	display: flex;
	gap: 6px;
	align-items: center;
}

.opmGereedschap .gr2.swatches{ flex-wrap: wrap; }

.opmGereedschap .gknop{
	border: 1.5px solid var(--opm-line);
	background: #fff;
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 11.6px;
	font-weight: 700;
	color: var(--opm-muted);
	cursor: pointer;
	min-width: 34px;
}

.opmGereedschap .gknop:hover{
	border-color: var(--opm-pink);
	color: var(--opm-pink);
}

.opmGereedschap .gknop.rood{
	border-color: var(--opm-rood-lijn);
	color: var(--opm-rood);
}

.opmGereedschap .gknop.rood:hover{ background: var(--opm-rood-soft); }

.opmGereedschap .gwaarde{
	font-size: 11.6px;
	font-weight: 700;
	color: var(--opm-ink);
	min-width: 150px;
	text-align: center;
}

.opmGereedschap .gwaarde.klein{ min-width: 54px; }

.opmGereedschap .gveld{
	border: 1.5px solid var(--opm-line);
	border-radius: 8px;
	padding: 7px 9px;
	font-size: 12px;
	min-width: 170px;
	font-family: inherit;
}

.opmGereedschap .gkleur{
	width: 24px;
	height: 24px;
	border-radius: 6px;
	border: 1.5px solid rgba(0, 0, 0, .16);
	cursor: pointer;
	padding: 0px;
}

.opmGereedschap .gkleur.aan{
	outline: 2px solid var(--opm-pink);
	outline-offset: 2px;
}

.opmPaneelVoet{
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 0px 13px 13px;
}

.opmPaneelVoet .hint{
	font-size: 11px;
	color: var(--opm-faint);
	flex: 1;
}

.opmStatus{
	font-size: 11.5px;
	font-weight: 700;
	color: var(--opm-groen);
	white-space: nowrap;
}

/* --- de kolom naast de preview --- */

.opmNaast{
	padding-top: 6px;
	min-height: 0px;
	padding-right: 4px;
}

.opmNaastKop{
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--opm-faint);
	margin: 0px 0px 8px;
}

.opmNaastKop.tweede{ margin-top: 18px; }

.opmKleurRij{
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	border: 1px solid var(--opm-line);
	border-radius: 10px;
	padding: 8px 10px;
	background: #fff;
}

.opmKleurRij + .opmKleurRij{ margin-top: 8px; }

.opmKleurRij .st{
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	border: 1px solid rgba(0, 0, 0, .14);
}

.opmKleurRij .kw{
	flex: 1;
	min-width: 74px;
}

.opmKleurRij .kn{
	display: block;
	font-size: 11.8px;
	font-weight: 600;
	line-height: 1.25;
}

.opmKleurRij .kh{
	display: block;
	font-size: 10.8px;
	color: var(--opm-faint);
	font-family: ui-monospace, Menlo, monospace;
}

.opmKleurRij .ka{
	font-size: 12px;
	font-weight: 700;
}

.opmKopieer{
	border: 1px solid var(--opm-line);
	background: #fff;
	border-radius: 7px;
	padding: 5px 9px;
	font-size: 10px;
	font-weight: 700;
	color: var(--opm-muted);
	cursor: pointer;
}

.opmKopieer:hover{
	border-color: var(--opm-pink);
	color: var(--opm-pink);
}

table.opmKm{
	width: 100%;
	border-collapse: collapse;
}

table.opmKm th{
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--opm-faint);
	text-align: center;
	padding: 0px 0px 7px;
}

table.opmKm th.l{ text-align: left; }

table.opmKm td{
	padding: 4px 0px;
	font-size: 12px;
	text-align: center;
}

table.opmKm td.l{
	text-align: left;
	font-weight: 600;
}

table.opmKm td .cel{
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 26px;
	border-radius: 7px;
	background: var(--opm-veld);
	font-weight: 600;
}

table.opmKm td .cel.leeg{
	background: transparent;
	color: var(--opm-faint);
}

table.opmKm td.tot .cel{
	background: var(--opm-ink);
	color: #fff;
}

.opmFmt{
	display: inline-flex;
	background: var(--opm-veld);
	border-radius: 8px;
	padding: 3px;
}

.opmFmt button{
	border: 0px;
	background: transparent;
	font-size: 11.2px;
	font-weight: 700;
	color: var(--opm-faint);
	padding: 5px 12px;
	border-radius: 6px;
	cursor: pointer;
}

.opmFmt button.actief{
	background: #fff;
	color: var(--opm-ink);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .10);
}

.opmDl{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.opmDlKnop{
	border: 1.5px solid var(--opm-line);
	background: #fff;
	border-radius: 9px;
	padding: 8px 11px;
	font-size: 11.6px;
	font-weight: 700;
	color: var(--opm-muted);
	cursor: pointer;
	display: inline-flex;
	gap: 7px;
	align-items: center;
}

.opmDlKnop:hover{
	border-color: var(--opm-pink);
	color: var(--opm-pink);
}

/* --- de exportknoppen onder de kaart --- */

.opmStrook{
	flex: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	/* onderaan uitlijnen: de laatste kolom heeft de pijltjes er boven en is hoger */
	align-items: end;
	padding: 14px 16px 16px;
}

.opmExport{
	background: #fff;
	border: 1.5px solid var(--opm-line);
	border-radius: 10px;
	padding: 12px 15px;
	font-size: 12.4px;
	color: #3A3A44;
	cursor: pointer;
	display: flex;
	gap: 9px;
	align-items: center;
	text-align: left;
	min-width: 0px;
}

.opmExport:hover{
	border-color: var(--opm-pink);
	color: var(--opm-pink);
}

.opmExport.groen{
	background: var(--opm-groen);
	border-color: var(--opm-groen);
	color: #fff;
}

.opmExport.groen:hover{ background: #1C8C40; }

.opmExport b{
	display: block;
	font-weight: 700;
}

.opmExport small{
	display: block;
	font-size: 10.3px;
	font-weight: 500;
	opacity: .75;
	margin-top: 2px;
	line-height: 1.3;
}

.opmSlot{
	padding: 18px 20px 26px;
	text-align: center;
	font-size: 13px;
	color: var(--opm-faint);
}

/* --- de rechterkolom --- */

.opmPaneelZij{
	background: #fff;
	border: 1px solid var(--opm-line);
	border-radius: 14px;
	padding: 14px 15px 15px;
	flex: none;
}

.opmZijKop{
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 11px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--opm-faint);
}

.opmZijKop .opmChip{
	margin-left: auto;
	letter-spacing: 0px;
	text-transform: none;
}

.opmZijKop .tel{
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0px;
	text-transform: none;
	color: var(--opm-muted);
}

.opmArtRij{
	display: flex;
	align-items: center;
	gap: 11px;
	border: 1.5px solid var(--opm-line);
	border-radius: 11px;
	padding: 9px 11px;
	background: #fff;
	cursor: pointer;
}

.opmArtRij + .opmArtRij{ margin-top: 9px; }

.opmArtRij:hover{ border-color: var(--opm-pink); }

.opmArtRij .mv{
	flex: none;
	width: 46px;
	height: 42px;
	border-radius: 8px;
	background: var(--opm-paper);
	border: 1px solid var(--opm-hair);
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 4px;
	color: var(--opm-faint);
}

.opmArtRij .mv img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/*
 * een tekstopdruk: de tekst zelf, met de regels uit het ontwerp. opmLettersPassen() zet de
 * font-size zo dat hij in het vlakje past; de 11px geldt alleen tot dat gebeurd is.
 */
.opmArtRij .mv .letters{
	display: block;
	font-size: 11px;
	line-height: 1.1;
	white-space: pre;
}

.opmArtRij .rw{
	flex: 1;
	min-width: 0px;
}

.opmArtRij .rn,
.opmArtRij .rs{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.opmArtRij .rn{
	font-size: 12.4px;
	font-weight: 700;
	line-height: 1.3;
}

/* tekstopdrukken: klik op de tekst kopieert hem, zie scanKopieer() */
.opmArtRij .rn.kopieer{
	cursor: copy;
}

.opmArtRij .rn.kopieer:hover{
	text-decoration: underline;
}

.opmArtRij .rn.gekopieerd{
	color: var(--opm-groen);
}

.opmArtRij .rs{
	font-size: 11px;
	color: var(--opm-faint);
	line-height: 1.35;
}

.opmArtRij .ra{
	flex: none;
	font-size: 13px;
	font-weight: 700;
}

.opmNotitie{
	border-radius: 11px;
	padding: 11px 12px;
}

.opmNotitie + .opmNotitie{ margin-top: 10px; }

.opmNotitie.bestel{
	border: 1px solid var(--opm-groen-lijn);
	background: var(--opm-groen-soft);
}

.opmNotitie.prive{
	border: 1.5px solid var(--opm-pink);
	background: var(--opm-pink-soft);
}

/* de notitie uit de ontwerptool, in de kaart van het product zelf */
.opmNotitie.ontwerp{
	border: 1px solid var(--opm-blauw-lijn);
	background: var(--opm-blauw-soft);
}

.opmNotitie .nlabel{
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.opmNotitie .nlabel > i{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: block;
}

.opmNotitie.bestel .nlabel{ color: var(--opm-groen); }
.opmNotitie.bestel .nlabel > i{ background: var(--opm-groen); }
.opmNotitie.prive .nlabel{ color: var(--opm-pink); }
.opmNotitie.prive .nlabel > i{ background: var(--opm-pink); }
.opmNotitie.ontwerp .nlabel{ color: var(--opm-blauw); }
.opmNotitie.ontwerp .nlabel > i{ background: var(--opm-blauw); }

/* staat er geen notitie bij het product, dan blijft het vak wel staan */
.opmGeenNotitie{
	border: 1px dashed var(--opm-line);
	border-radius: 11px;
	padding: 11px 12px;
	font-size: 11.4px;
	color: var(--opm-faint);
	background: var(--opm-paper);
}

.opmNotitie .nreden{
	font-size: 11.5px;
	font-weight: 700;
	margin-bottom: 3px;
}

.opmNotitie .ntekst{
	font-size: 12.4px;
	line-height: 1.5;
	color: #33333C;
}

.opmNotitie .nwie{
	font-size: 10.6px;
	color: var(--opm-faint);
	margin-top: 3px;
}

.opmNotitieInput{
	width: 100%;
	margin-top: 12px;
	border: 1px dashed var(--opm-line);
	border-radius: 9px;
	padding: 10px 12px;
	font-size: 11.6px;
	color: var(--opm-muted);
	background: var(--opm-paper);
}

.opmAdres{
	font-size: 12.6px;
	font-weight: 600;
	line-height: 1.45;
}

.opmAdresVoet{
	font-size: 11.5px;
	color: var(--opm-faint);
	margin-top: 6px;
}

.opmLeeg{
	font-size: 11.6px;
	color: var(--opm-faint);
	padding: 4px 0px;
}

.opmBeslis{
	display: grid;
	grid-template-columns: 1fr;
	gap: 9px;
	flex: none;
	padding-bottom: 4px;
}

.opmActie{
	border: 0px;
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 12.8px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.opmActie.approved{ background: var(--opm-groen); }
.opmActie.approved:hover{ background: #1C8C40; }
.opmActie.denied{ background: var(--opm-rood); }
.opmActie.denied:hover{ background: #CE2C20; }
.opmActie.bak{ background: var(--opm-ink); }

/* --- van product naar product --- */

/* de pijltjes staan rechts boven de laatste exportknop, de knoppen zelf blijven onderaan op 1 lijn */
.opmStrookLaatste{
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0px;
}

.opmSpring{
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

.opmSpring button{
	border: 1px solid var(--opm-line);
	background: rgba(255, 255, 255, .96);
	border-radius: 9px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0px 2px 10px rgba(20, 20, 40, .12);
	font-size: 14px;
	color: var(--opm-muted);
}

.opmSpring button:hover{
	border-color: var(--opm-pink);
	color: var(--opm-pink);
}

/* --- smallere schermen --- */

@media(max-width: 1500px){
	.opmBody{ grid-template-columns: minmax(0, 1fr) 320px; }
	.opmInhoud{ grid-template-columns: 92px minmax(0, 1fr) 220px; }
	.opmStrook{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width: 1200px){
	/* alles onder elkaar, met de pagina zelf als scroller in plaats van de twee kolommen */
	.opmBody{
		display: block;
		overflow-y: auto;
	}

	.opmRol{
		overflow-y: visible;
	}

	/* hier scrolt de pagina als geheel en staat alles onder elkaar */
	.opmKaart{
		display: block;
	}

	.opmZij,
	.opmZijRol{
		display: block;
		overflow-y: visible;
		flex: none;
		min-height: 0px;
	}

	.opmPaneelZij{ margin-bottom: 12px; }

	.opmInhoud{
		display: block;
		min-height: 0px;
	}

	.opmPodium,
	.opmNaast{
		display: block;
		overflow-y: visible;
	}

	.opmDoek{ height: 440px; }

	.opmKanten{
		display: flex;
		gap: 10px;
		overflow-x: auto;
		overflow-y: visible;
		margin-bottom: 14px;
	}

	.opmKant{ width: 96px; flex: none; }
	.opmKant + .opmKant{ margin-top: 0px; }
	.opmSpring{ display: none; }
}