/* 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;
}

/* 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;
}

.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;
}

/* 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;
}

.scanKanten{
	width: 76px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}

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

.scanKant .vlak{
	height: 62px;
	background: var(--section-bg-color);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	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;
}

.scanKant .vlak span{
	font-size: 9px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--grey);
}

.scanKant .naam{
	font-size: 10px;
	line-height: 13px;
	margin-top: 3px;
}

/* 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;
}

/* 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;
}

.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;
}

.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);
}

/* 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: 30px 10px;
}

.scanInpakTotaal .cijfer{
	font-weight: 700;
	font-size: 64px;
	line-height: 64px;
}

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

.scanInpakTotaal .klein{
	font-size: 12px;
	color: var(--grey);
}

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

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

.scanInpakItem .vlak{
	width: 40px;
	height: 40px;
	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: 14px;
}

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

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

.scanInpakItem .stuks span{
	font-weight: 400;
	font-size: 11px;
	color: var(--grey);
	margin-left: 5px;
}

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

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

/* het adresblok */

.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: 22px;
	line-height: 30px;
}

.scanInpakAdres .adres .straat{
	font-weight: 700;
	font-size: 22px;
	line-height: 30px;
}

.scanInpakAdres .adres .land{
	font-size: 13px;
	color: var(--grey);
	margin-top: 5px;
}

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

.scanInpakAdres .melding{
	background: #FFF6E0;
	border-radius: 6px;
	padding: 10px 12px;
	margin-top: 15px;
	font-size: 12px;
	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-size: 13px;
}

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

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

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

/* 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 .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);
}

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

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

/* 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);
}

.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;
	}

	#scanPreview,
	.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;
}