/*
	The static app mocks (templates/vfs_mocks.php), in the look of Velifact: #2f2f2f header, #1d5b8f navigation, Lato.
	Used on the Voor wie page (web_employments/index.php, which animates them per tab) and on the sector pages
	(web_employments/sector.php, .vfs-static: the end state, no animation).
*/
.vfs-mock {
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.5;
	color: #1d1d1f;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
.vfs-mock *, .vfs-mock *::before, .vfs-mock *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}
.vfs-mock svg.vfs-ic { display: inline-block; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; overflow: visible; }

.vfs-mock .vfs-app { border-radius: 10px; overflow: hidden; background: #f9f9f9; box-shadow: 0 24px 50px -18px rgba(20,30,50,.32), 0 0 0 1px rgba(0,0,0,.07); color: #3a3a3c; font-size: 10.5px; line-height: 1.35; }
.vfs-mock .vfs-app-head { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 10px; background: #2f2f2f; color: #fff; font-size: 10.5px; }
.vfs-mock .vfs-app-head > svg { font-size: 11px; opacity: .85; }
.vfs-mock .vfs-app-head span { display: flex; align-items: center; gap: 5px; }
.vfs-mock .vfs-app-nav { display: flex; align-items: center; justify-content: flex-end; gap: 13px; height: 28px; padding: 0 12px; background: #1d5b8f; color: rgba(255,255,255,.85); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.vfs-mock .vfs-app-nav .on { position: relative; color: #fff; font-weight: 700; }
.vfs-mock .vfs-app-nav .on::after { content: ""; position: absolute; left: 50%; bottom: -10px; margin-left: -4px; border: 4px solid transparent; border-bottom-color: #f9f9f9; }
.vfs-mock .vfs-app-body { min-height: 280px; padding: 10px 12px 12px; }
.vfs-mock .vfs-app-body.w { background: #fff; }
.vfs-mock .vfs-d-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.vfs-mock .vfs-d-top b { margin-right: auto; color: #3a3a3c; font-size: 14px; font-weight: 700; }
.vfs-mock .vfs-d-sel { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; border: 1px solid #bdbdbd; border-radius: 3px; background: #fff; color: #333; font-size: 10px; }
.vfs-mock .vfs-d-sel svg { font-size: 7px; color: #555; }
.vfs-mock .vfs-d-btn { display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 4px; background: #1d5b8f; color: #fff; font-size: 10px; font-weight: 700; }
.vfs-mock .vfs-d-opt { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.vfs-mock .vfs-d-search { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; height: 20px; padding: 0 7px; border: 1px solid #bdbdbd; border-radius: 3px; color: #9a9a9a; font-size: 10px; }
.vfs-mock .vfs-d-search svg { color: #1d5b8f; }

.vfs-mock .vfs-pr { display: grid; grid-template-columns: 66px repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #e2e2e2; }
.vfs-mock .vfs-pr > span { min-width: 0; padding: 5px 3px; }
.vfs-mock .vfs-pr .n { display: flex; align-items: center; gap: 5px; padding-left: 5px; border-right: 1px solid #e2e2e2; background: #f3f3f3; color: #3a3a3c; font-size: 10.5px; font-weight: 700; }
.vfs-mock .vfs-pr .n em { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 7.5px; font-weight: 700; }
.vfs-mock .vfs-pr-h > span { padding: 0 4px 4px; color: #1d5b8f; font-size: 10px; }
.vfs-mock .vfs-pr-h > span b { font-weight: 700; }
.vfs-mock .vfs-pr-h > span:first-child { border-right: 1px solid #e2e2e2; background: #f3f3f3; }
.vfs-mock .vfs-pr:not(.vfs-pr-h) > span:not(.n) { min-height: 58px; }
.vfs-mock .vfs-k { position: relative; display: block; border: 1px solid #e2e2e2; border-left: 3px solid rgb(var(--c)); background: #fff; color: #3a3a3c; font-size: 9.5px; line-height: 12px; }
.vfs-mock .vfs-k > span { display: block; background: rgba(var(--c), .15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfs-mock .vfs-k .h { display: flex; justify-content: space-between; gap: 3px; padding: 2px 4px 1px; }
.vfs-mock .vfs-k .h > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vfs-mock .vfs-k .h b { font-weight: 700; }
.vfs-mock .vfs-k .pl { color: #a1a1a1; font-style: italic; }
.vfs-mock .vfs-k .t { padding: 0 4px 1px; color: #000; font-weight: 700; }
.vfs-mock .vfs-k .m { padding: 0 4px 3px; color: rgb(93,93,93); }

.vfs-mock .vfs-dt { font-size: 10.5px; }
.vfs-mock .vfs-dtr { display: grid; grid-template-columns: 58px minmax(0, 1fr) 66px 64px 40px; align-items: center; border-bottom: 1px solid #dcdcdc; }
.vfs-mock .vfs-dtr > span { min-width: 0; padding: 6px 3px; color: #3a3a3c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfs-mock .vfs-dtr .r { text-align: right; }
.vfs-mock .vfs-dth { border-bottom-color: #1d5b8f; }
.vfs-mock .vfs-dth > span { color: #1d5b8f; font-weight: 700; }
.vfs-mock .vfs-dtt { border-bottom: 0; }
.vfs-mock .vfs-dtt > span { font-weight: 700; }
.vfs-mock .vfs-dti { display: flex; justify-content: flex-end; gap: 5px; font-size: 10px; }
.vfs-mock .vfs-dti .e { color: #11a21b; }
.vfs-mock .vfs-dti .p { color: #1d5b8f; }
.vfs-mock .vfs-dti .x { color: #de0005; }
.vfs-mock .vfs-dti .xg { color: #b6b6b6; }

.vfs-mock .vfs-st { display: inline-block; padding: 2px 7px; border-radius: 999px; background: #ececec; color: #666; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.vfs-mock .vfs-st.g { background: #e2f5e6; color: #1f8a36; }
.vfs-mock .vfs-st.b { background: #e3eef8; color: #1d5b8f; }
.vfs-mock .vfs-st.o { background: #fdf0de; color: #b86a0c; }

.vfs-mock .vfs-phone { position: relative; width: 240px; height: 480px; margin: 0 auto; padding: 9px; border-radius: 38px; background: #101014; box-shadow: 0 30px 60px -22px rgba(20,30,50,.45), inset 0 0 0 1px rgba(255,255,255,.14); }
.vfs-mock .vfs-ph { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #fff; color: #3a3a3c; font-size: 11px; line-height: 1.35; }
.vfs-mock .vfs-ph-isl { position: absolute; left: 50%; top: 7px; width: 62px; height: 18px; margin-left: -31px; border-radius: 9px; background: #000; }
.vfs-mock .vfs-ph-st { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 4px 18px 0 22px; color: #111; font-size: 10px; font-weight: 700; }
.vfs-mock .vfs-ph-st span:last-child { display: flex; gap: 3px; font-size: 8.5px; }
.vfs-mock .vfs-m-title { margin: 4px 14px 0; padding-bottom: 7px; border-bottom: 1px solid #dcdcdc; color: #1d5b8f; font-size: 15px; text-align: center; }
.vfs-mock .vfs-m-nav { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 14px; }
.vfs-mock .vfs-m-back { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #1d5b8f; color: #fff; font-size: 10px; }
.vfs-mock .vfs-m-ic { display: flex; gap: 11px; color: #c4c4c4; font-size: 14px; }
.vfs-mock .vfs-m-body { padding: 0 14px; }
.vfs-mock .vfs-m-row { display: flex; align-items: center; gap: 6px; min-height: 26px; margin-top: 4px; }
.vfs-mock .vfs-m-row .l { flex: 0 0 76px; color: #333; }
.vfs-mock .vfs-m-row .v { margin-left: auto; color: #222; font-weight: 700; white-space: nowrap; }
.vfs-mock .vfs-m-in { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; height: 24px; padding: 0 6px; border: 1px solid #1d5b8f; background: #fff; color: #222; white-space: nowrap; overflow: hidden; }
.vfs-mock .vfs-m-in > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vfs-mock .vfs-m-in.s { flex: none; width: 40px; }
.vfs-mock .vfs-m-in svg { color: #333; font-size: 9px; }
.vfs-mock .vfs-m-sel { display: flex; align-items: center; gap: 3px; }
.vfs-mock .vfs-mt { margin: 12px -14px 0; font-size: 10.5px; }
.vfs-mock .vfs-mtr { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 4px; min-height: 26px; padding: 3px 14px; }
.vfs-mock .vfs-mtr:nth-child(even) { background: #f4f4f4; }
.vfs-mock .vfs-mtr > span { min-width: 0; }
.vfs-mock .vfs-mth { color: #1d5b8f; font-weight: 700; }
.vfs-mock .vfs-mtr .r { justify-self: end; text-align: right; }
.vfs-mock .vfs-mtr .c { justify-self: center; }
.vfs-mock .vfs-mtt { border-top: 1px solid #cfcfcf; font-weight: 700; }
.vfs-mock .vfs-mtr b { font-weight: 700; }
.vfs-mock .vfs-ph-v { color: #aaa; }
.vfs-mock .vfs-m-scan { display: flex; align-items: center; justify-content: center; height: 30px; margin-top: 2px; border: 1px solid #1d5b8f; color: #9a9a9a; font-size: 11px; }
.vfs-mock .vfs-m-hint { margin-top: 3px; color: #8a8a8a; font-size: 9px; font-style: italic; text-align: center; }
.vfs-mock .vfs-m-sigl { margin-top: 10px; color: #333; }
.vfs-mock .vfs-m-sig { display: flex; align-items: center; justify-content: center; height: 56px; margin-top: 4px; border: 1px solid #cfcfcf; background: #fff; }
.vfs-mock .vfs-m-sig .vfs-sig { width: 130px; height: 40px; }
.vfs-mock .vfs-m-cam { position: absolute; left: 14px; bottom: 66px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #1d5b8f; color: #fff; font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.vfs-mock .vfs-m-submit { position: absolute; left: 14px; right: 14px; bottom: 20px; display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 2px; background: #1d5b8f; color: #fff; font-size: 19px; }
.vfs-mock .vfs-ph-ind { position: absolute; left: 50%; bottom: 6px; width: 80px; height: 4px; margin-left: -40px; border-radius: 2px; background: #1a1a1a; }
.vfs-mock .vfs-rad { display: inline-flex; align-items: center; justify-content: center; justify-self: center; width: 14px; height: 14px; border: 1.5px solid #bdbdbd; border-radius: 50%; background: #fff; }
.vfs-mock .vfs-rad i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #1d5b8f; transform: scale(0); }

.vfs-mock .vfs-tick { display: inline-flex; flex: none; align-items: center; justify-content: center; justify-self: end; width: 16px; height: 16px; border-radius: 50%; background: #29b06c; color: #fff; font-size: 8px; transform: scale(0); }
.vfs-mock .vfs-flip { display: inline-grid; }
.vfs-mock .vfs-flip > * { grid-area: 1 / 1; justify-self: start; }
.vfs-mock .r .vfs-flip > *, .vfs-mock .vfs-k .vfs-flip > * { justify-self: end; }
.vfs-mock .vfs-flip .f2 { opacity: 0; }
.vfs-mock .vfs-sig path { stroke-dasharray: 260; stroke-dashoffset: 260; }

/* The end state, without the animation (sector pages) */
.vfs-static .vfs-flip .f1 { opacity: 0; }
.vfs-static .vfs-flip .f2 { opacity: 1; }
.vfs-static .vfs-tick, .vfs-static .vfs-rad.sel i { transform: none; }
.vfs-static .vfs-sig path { stroke-dashoffset: 0; }

/* Sector page mocks (vfl-): the keuringen table and the invoice card */
.vfs-mock .vfs-st.r { background: #fde3e3; color: #c4161c; }
.vfs-mock .vfl-tabs { display: flex; gap: 2px; margin-bottom: 8px; border-bottom: 1px solid #dcdcdc; }
.vfs-mock .vfl-tabs span { padding: 5px 10px; color: #1d5b8f; }
.vfs-mock .vfl-tabs .on { border-bottom: 2px solid #1d5b8f; font-weight: 700; }
.vfs-mock .vfl-table { font-size: 10.5px; }
.vfs-mock .vfl-tr { display: grid; grid-template-columns: 38px minmax(0, 1fr) 84px 72px 72px; align-items: center; min-height: 30px; border-bottom: 1px solid #e6e6e6; }
.vfs-mock .vfl-tr > span { min-width: 0; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfs-mock .vfl-th { min-height: 26px; border-bottom-color: #1d5b8f; color: #1d5b8f; font-weight: 700; }
.vfs-mock .vfl-invoice { max-width: 440px; margin: 0 auto; padding: 26px 28px; border-radius: 10px; background: #fff; box-shadow: 0 24px 50px -18px rgba(20,30,50,.32), 0 0 0 1px rgba(0,0,0,.07); color: #3a3a3c; font-size: 14px; }
.vfs-mock .vfl-inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 2px solid #1d5b8f; }
.vfs-mock .vfl-inv-head b { display: block; color: #1d5b8f; font-size: 15px; font-weight: 700; }
.vfs-mock .vfl-inv-head span { color: #666; }
.vfs-mock .vfl-inv-head .vfs-st { color: #1f8a36; font-size: 11px; }
.vfs-mock .vfl-inv-line, .vfs-mock .vfl-inv-total { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px; gap: 8px; padding: 8px 0; border-bottom: 1px solid #ececec; }
.vfs-mock .vfl-inv-line span:not(:first-child), .vfs-mock .vfl-inv-total span:last-child { text-align: right; }
.vfs-mock .vfl-inv-total { grid-template-columns: minmax(0, 1fr) auto; border-bottom: 0; font-weight: 700; }
@media (max-width: 480px) {
.vfs-mock .vfl-tr { grid-template-columns: minmax(0, 1fr) 76px 72px; }
.vfs-mock .vfl-tr > span:first-child, .vfs-mock .vfl-tr > span:nth-child(3) { display: none; }
}