*,*::before,*::after {
	box-sizing:border-box;
}
html:focus-within {
	scroll-behavior:smooth;
}

body {
	margin:0;
	min-height:100svh;
	text-rendering:optimizeLegibility;
	font-size: 11px;
	-webkit-font-smoothing:antialiased;
}
body.noscroll {
	overflow: hidden;
}
img, svg {
	display:block;
	max-width:100%;
}
input, button, textarea, select {
	font:inherit;
}
table td {
	font-size: 11px;
}
table td strong {
	font-size: 11px;
}
:root {
  --primary: #4063a7;
  --primary-700: #32508a;
  --primary-dark: #345596;
  --primary-dark-700: #28457c;
  --lighter: #151515;
  --ring: #5b7fc2;
  --error: #ef4444;
  --radius: 16px;
  --shadow-lg: 0 10px 25px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  --border: 1px solid color-mix(in oklab, white 6%, transparent);
  --card-max-w: 420px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  --bg: #0b1020;
  --surface: #10172a;
  --surface-2: #0f1526A6;
  --text: #e5e7eb;
  --muted: #9aa3b2;

  /* Background images: warehouse with forklift/boxes */
  --bg-image-light: url('https://images.pexels.com/photos/4483610/pexels-photo-4483610.jpeg?auto=compress&cs=tinysrgb&w=1920');
  --bg-image-dark: url('https://images.pexels.com/photos/6169661/pexels-photo-6169661.jpeg?auto=compress&cs=tinysrgb&w=1920');
  --bg-image: var(--bg-image-dark);
  --overlay: rgba(0,0,0,.55);
}

@media (prefers-color-scheme: light){
  :root{
	--bg: #f7f7fb;
	--surface: #ffffff;
	--surface-2: #ffffffE6;
	--text: #0f172a;
	--muted: #475569;
	--ring: #4063a7;
	--shadow-lg: 0 10px 30px rgba(20,20,40,.12), 0 2px 8px rgba(20,20,40,.08);
	--border: 1px solid color-mix(in oklab, black 10%, transparent);
	--bg-image: var(--bg-image-light);
	--overlay: rgba(255,255,255,0.9);
  }
}

html[data-theme="light"]{
	--bg: #f7f7fb;
	--surface: #ffffff;
	--surface-2: #ffffffE6;
	--text: #0f172a;
	--muted: #475569;
	--ring: #4063a7;
	--shadow-lg: 0 10px 30px rgba(20,20,40,.12), 0 2px 8px rgba(20,20,40,.08);
	--border: 1px solid color-mix(in oklab, black 10%, transparent);
	--bg-image: var(--bg-image-light);
	--overlay: rgba(255,255,255,.9);
}
html[data-theme="dark"]{
	--bg: #0b1020;
	--surface: #10172a;
	--surface-2: #0f1526A6;
	--text: #e5e7eb;
	--muted: #9aa3b2;
	--bg-image: var(--bg-image-dark);
	--overlay: rgba(0,0,0,.55);
}

body {
  font-family: var(--font);
  color: var(--text);
}
body.login {
  background: var(--bg-image) no-repeat center center fixed;
  background-size: cover;
}

body::before {
  content:"";
  position: fixed; inset:0;
  background: var(--overlay);
  z-index:-1;
}

.pattern {
	position: fixed; 
	inset: 0; 
	pointer-events: none; 
	opacity: .25; 
	mix-blend-mode: overlay;
	background:	linear-gradient(transparent 0 31px, color-mix(in oklab, #fff 6%, transparent) 31px 32px) 0 0/32px 32px, linear-gradient(90deg, transparent 0 31px, color-mix(in oklab, #fff 6%, transparent) 31px 32px) 0 0/32px 32px;
}

.auth{
	min-height: 100svh; 
	display: grid; 
	place-items: center; 
	padding: 24px;
}

.card {
	width: min(100%, var(--card-max-w)); 
	background: var(--surface-2); 
	backdrop-filter: blur(10px) saturate(1.2); 
	-webkit-backdrop-filter: blur(10px) saturate(1.2); 
	border: var(--border); 
	border-radius: var(--radius); 
	box-shadow: var(--shadow-lg); 
	overflow: clip;
}

.card__inner {
	padding: clamp(18px, 3.2vw, 28px);
}
.card__inner h1, .card__inner p {
	text-align: center;
}
.brand {
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:16px;
}
.brand__logo {
	width: 100%;
}
.brand__logo img {
	width:120px;
	height:auto;
	display:block;
	margin: 0px auto;
}
h1{
	margin:0 0 6px;
	font-size: 24px;
}
.sub {
	margin:0 0 18px;
	color: var(--muted);
	font-size: .97rem;
}
form{
	display:grid; 
	gap:14px;
}
.field {
	display:grid; 
	gap:6px;
}
.field label {
	font-size:.9rem;
	color: var(--muted); 
}
.input {
	display:flex;
	align-items:center;
	gap:10px;
	border: var(--border); 
	border-radius: 12px; 
	padding: 12px 14px;
	background: color-mix(in oklab, var(--surface) 82%, transparent); 
	transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.input:focus-within {
	border-color: color-mix(in oklab, var(--ring) 65%, transparent); 
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 16%, transparent); 
	background: color-mix(in oklab, var(--surface) 94%, transparent);
}
.input input {
	width:100%;
	border:0;
	outline:0;
	background:transparent;
	color:var(--text);
	padding:0;
	min-width:0;
	caret-color: var(--primary);
}
.input input::placeholder {
	color: color-mix(in oklab, var(--muted) 70%, transparent);
}
.row {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-top:4px;
}
.checkbox {
	display:inline-flex;
	align-items:center;
	gap:10px;
	user-select:none;
}
.checkbox input {
	width:18px;
	height:18px;
	accent-color: var(--primary);
}
.link {
	color: var(--primary);
	text-decoration:none;
}
.link:hover {
	text-decoration: underline;
}
.btnsmall {
	float: right!important;
	cursor:pointer!important;
	border-radius:5px!important;
	padding:6px 15px!important;
	font-weight:500!important;
	text-decoration: none!important;
	background-color:rgba(199,199,199,0.70)!important;
	border: 1px solid rgba(199,199,199,1.00)!important;
	color: #000!important;
	width: auto!important;
	font-size: 10px!important;
	transition:all 0.2s!important;
}
.smallbtn:hover {
	background-color: rgba(199,199,199,1.00)!important;
}
.btn {
	border:0;
	cursor:pointer;
	border-radius:5px;
	padding:12px 16px;
	font-weight:600;
	text-decoration: none;
	background: linear-gradient(180deg, var(--primary), var(--primary-700)); 
	color: #fff;
	box-shadow: 0 10px 20px rgba(64,99,167,.35), inset 0 1px 0 rgba(255,255,255,.2); 
	transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.btn.cancel, .btn.cancelpopup, .btn.cancelconfirm {
	background: linear-gradient(180deg, #adadad, #8c8c8c); 
	color: #fff;
	box-shadow: 0 10px 20px rgba(64,99,167,.35), inset 0 1px 0 rgba(255,255,255,.2); 
	transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover {
	filter: brightness(1.05); 
	box-shadow: 0 12px 22px rgba(64,99,167,.42), inset 0 1px 0 rgba(255,255,255,.25); 
}
.btn:active {
	transform: translateY(1px); 
}
.btn:focus-visible {
	outline:none;
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 22%, transparent), 0 10px 20px rgba(64,99,167,.35);
}
.btn.small {
	float: right;
	padding: 5px 13px 5px 10px;
	font-size: 14px;
	font-weight: 400;
}

.errors {
	min-height: 1.25rem;
	color: var(--error); 
	font-size: .92rem; 
}

.theme-toggle { 
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 10;
	background: color-mix(in oklab, var(--surface) 90%, transparent); 
	border: var(--border); color: var(--text);
	padding: 8px 12px;
	border-radius: 999px;
	font-weight: 600;
	cursor: pointer; 
	box-shadow: var(--shadow-lg); 
}
.theme-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 22%, transparent), var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce){ 
	html:focus-within{
		scroll-behavior: auto;
	}
	.btn, .input {
		transition: none 
	}
}

.message {
	position: fixed;
	z-index: 1000000;
	bottom: 200px;
	right: 200px;
	opacity: 0;
	width: 300px;
	padding: 15px;
	border-radius: 8px;
	background-color: rgba(47,0,0,1.00);
	border: 2px solid rgba(255,0,4,1.00);
	color: #fff;
	transition: all 0.4s;
}
.message.show {
	right: 20px;
	bottom: 20px;
	opacity: 1;
}
.message.t200 {
	background-color:rgba(11,59,0,1.00);
	border: 2px solid rgba(0,142,7,1.00);
	color: #fff;
	font-size: 14px;
}
.message.t200 strong {
	font-weight: 500;
	font-size: 16px;
}
.message.t200 p {
	color: #fff;
	font-size: 12px;
}

.flex {
	display: flex!important;
	gap: 1em;
}
.flex > div, .flex > span {
	flex: 1;
}
.flex > div.f2, .flex > span.f2 {
	flex: 2;
}
.flex > div.f3, .flex > span.f3 {
	flex: 3;
}
.flex.max4 {
	 --g: 17px;  
	flex-wrap: wrap;
}
.flex.max4 > div, .flex.max4 > span {
	flex: 0 0 calc((100% - 3 * var(--g)) / 4);
	max-width: calc((100% - 3 * var(--g)) / 4);
}

.loadginoverlay {
	position: fixed;
	z-index: 10000000;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.70);
}
.loading {
	position: fixed;
	z-index: 10000001;
	width: 500px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* centers it */
	/* optional: make it fit on small screens */
	max-width: calc(100vw - 2rem);
}
.loading svg {
	width: 100%;
}

table th {
	padding: 5px 10px;
	font-weight: 500;
	font-size: 14px;
	text-align: left;
	border-bottom: 1px solid #ccc;
}
table td {
	padding: 5px 10px 4px 10px;
	font-weight: normal;
	font-size: 13px;
	border-bottom: 1px solid #000;
}
table tr:nth-child(even) td {
	background-color: rgba(255,255,255,0.1);
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
table tr:hover td {
	border-bottom: 1px solid #ccc;
}
table td .material-symbols-outlined {
	font-size: 20px;
	display: inline-block;
	vertical-align: middle;
}
table tr th.red, table tr td.red {
	color: rgba(255,67,67,1.00);
}
table tr th.green, table tr td.green {
	color: rgba(66,189,0,1.00);
}
table tfoot tr th {
	padding: 5px 10px 4px 10px!important;
	font-size: 12px!important;
}
.smallbtn {
	display: inline-block;
	padding: 3px 8px 3px 5px;
	font-size: 12px;
	border-radius: 8px;
	border: 1px solid #fff;
	transition: all 0.2s;
}
.smallbtn .material-symbols-outlined, button .material-symbols-outlined {
	font-size: 16px;
	vertical-align: middle;
	margin: -2px 0px 0px 0px;
}
.smallbtn:hover {
	background-color: #fff;
	color: #000;
}
table td a {
	color: #fff;
	text-decoration: none;
}


.notice {
	font-style: italic;
	font-size: 14px;
}
.importboxes .data {
	position: relative;
}
.importboxes form {
	padding-bottom:80px;
	position: relative;
}
.importboxes h2 {
	margin: 0px;
}
.importboxes p {
	font-size: 14px;
}
.importboxes label {
	margin: 0px 0px -8px 0px;
	font-size: 12px;
}
.importboxes input[type=file] {
	background-color: #000;
	color: #fff;
	border: 1px solid #aaa;
	font-size: 12px;
	border-radius: 5px;
	padding:3px 5px;
}
.importboxes hr {
	border: 0px;
	border-bottom: 1px solid #ccc;
}
.importboxes input[type=submit] {
	padding: 5px 10px;
	width: 130px;
	position: absolute;
	right: 20px;
	bottom: 20px;
}











.collinsonreimport {
	list-style: none;
	margin: 0px;
	font-size: 14px;
	padding: 0px;
}
.collinsonreimport .head {
	font-weight: 700;
	background-color: rgba(0,0,0,0.00);
}
.collinsonreimport li {
	margin: 0px 0px 5px 0px;
	border-radius: 5px;
	background-color: var(--lighter);
	padding: 3px 10px;
}
.collinsonreimport li a {
	color: #fff;
	text-decoration: none;
}

.collinsonreimport li .date {
    width: 160px;
    flex: none;
}
.collinsonreimport li .edit {
    width: 80px;
	text-align: center;
    flex: none;
}

.collinsonreimport li a span {
	font-size: 20px;
}


.backorders .bo_code {
	flex: none;
	width: 140px;
}
.backorders .bo_date {
	flex: none;
	width: 90px;
}
.backorders .bo_inkoop {
	flex: none;
	width: 90px;
}
.backorders .bo_leverdatum {
	flex: none;
	width: 140px;
}
.backorders .bo_orders {
	flex: none;
	width: 130px;
}
.backorders .bo_aantal {
	flex: none;
	width: 50px;
	text-align: center;
}
.backorders .bo_productname {
	flex: 2;
}






.shops .shop_uses {
	flex: none;
	width: 150px;
}



.shops .shop_small {
	flex: none !important;
    width: 60px;
	text-align: center;
}




.program_mails {
	flex: none!important;
	width: 70px;
	text-align: center;
}
.program_options {
	flex: none;
	width: 80px;
	text-align: right;
}
.cc_code {
	flex: none!important;
	width: 80px;
}

.whc_cc {
	flex: none!important;
	width: 80px;
}
.whc_me, .whc_pe, .whc_ec {
	flex: none!important;
	width: 120px;
	text-align: center!important;
}



.topx_klant {
	flex: none!important;
	width: 90px;
}
.topx_productcode {
	flex: none!important;
	width: 130px;
}
.topx_leverancier {
	flex: none!important;
	width: 110px;
}
.topx_stock {
	flex: none!important;
	width: 40px;
	text-align: center;
}
.topx_aantal {
	flex: none!important;
	width: 50px;
	text-align: center;
}
.topx_avg {
	flex: none!important;
	width: 80px;
	text-align: center;
}
.topx_10d {
	flex: none!important;
	width: 70px;
	text-align: center;
}
.topx_inkoop, .topx_inkoop_totaal, .topx_omzet_totaal, .topx_marge_totaal {
	flex: none!important;
	width: 80px;
	text-align: right;
}








.ret_id {
	flex: none!important;
	width: 50px;
}
.ret_onr {
	flex: none!important;
	width: 110px;
}
.ret_odt {
	flex: none!important;
	width: 80px;
}
.ret_tt {
	flex: none!important;
	width: 130px;
}
.ret_cr {
	flex: none!important;
	width: 150px;
}
.ret_nt {
	flex: none!important;
	width: 100px;
}

.ret_st {
	flex: none!important;
	width: 170px;
}

.ret_ship {
	flex: none!important;
	width: 60px;
	text-align: center;
}
.ret_cty {
	flex: none!important;
	width: 60px;
	text-align: center;
}

.ret_1st, .ret_2nd, .ret_3rd, .ret_rm {
	flex: none!important;
	width: 60px;
	text-align: center;
}

li.orange {
	background-color:rgba(255,174,0,1.00)!important;
	color: #000;
}
li.orange a { 
	color: #000!important;
}
li.red {
	background-color:#FFBDBF!important;
	color: #000;
}
li.blue a, li.yellow a, li.red a {
	color: #000;
}
li.yellow {
	background-color:#FFE488!important;
		color: #000;
}
li.green {
	background-color:#C1FFAF!important;
}
li.blue {
	background-color:#ADCDFF!important;
	color: #000;
}
li.purple {
    background-color:rgba(225,149,255,1.00)!important;
}
li.teal {
    background-color:rgba(255,188,123,1.00)!important;
}
.pc_ordernummer {
	flex: none!important;
	width: 70px;
}
.pc_productname {
	flex: none!important;
	width: 250px;
}
.pc_linked {
	flex: none!important;
	width: 250px;
}















.nocoo .stock, .nocoo .reserved, .nocoo .minsupply, .nocoo .moq , .nocoo .coo {
	flex: none;
	text-align: center;
	width: 60px;
}
.nocoo .hscode {
	flex: none;
	width: 100px;
}
.nocoo .brand {
	flex: none;
	width: 100px;
}
.nocoo .supplier {
	flex: none;
	width: 100px;
}
.nocoo .batch {
	flex: none;
	width: 100px;
}
.nocoo .inkoop {
	flex: none;
	text-align: right;
	width: 80px;
}
.nocoo .ean {
	flex: none;
	width: 100px;
}
.nocoo .prodartcode {
	flex: none;
	width: 170px;
}
						

.noloy .stock, .noloy .reserved, .noloy .minsupply, .noloy .moq , .noloy .coo {
	flex: none;
	text-align: center;
	width: 60px;
}
.noloy .activeprod, .noloy .ean, .noloy .prodartcode, .noloy .brand, .noloy .supplier, .noloy .activeprod, .noloy .batch {
	flex: none;
	width: 100px;
}
.noloy .inkoop {
	flex: none;
	text-align: right;
	width: 80px;
}

.inkooplist .ink_datum {
	flex: none;
	width: 100px;
}
.inkooplist .ink_voorgesteld, .inkooplist .ink_ingekocht, .inkooplist .ink_geleverd {
	flex: none;
	width: 80px;
	align-content: center;
}












.inkooplijst span, .inkooplijst input {
	font-size: 11px!important;
}

.inkooplijst .inkoop_code {
	flex: none;
	width: 105px;
	position: relative;
}
.inkooplijst .inkoop_code .autoresults {
	position: absolute;
	top: 10px;
	left: 0px;
	width: 300px;
	background-color: #000;
	border-radius: 5px;
	padding: 10px;
	z-index: 1000;
}
.inkooplijst .inkoop_code .autoresults ul {
	max-height: 250px;
	overflow: auto;
}
.inkooplijst .inkoop_code .autoresults li {
	border-radius: 5px;
	padding: 3px 5px;
}
.inkooplijst .inkoop_code .autoresults li:hover {
	background-color: #333333;
}

.inkooplijst .inkoop_levcode {
	flex: none;
	width: 100px;
}
.inkooplijst .inkoop_stock, .inkooplijst .inkoop_reserved, .inkooplijst .inkoop_suggested, .inkooplijst .inkoop_ingekocht, .inkooplijst .inkoop_min, .inkooplijst .inkoop_moq, .inkooplijst .inkoop_ttov, .inkooplijst .inkoop_ontvangen, .inkooplijst .inkoop_ontvangen, .inkooplijst .inkoop_teontvangen {
	flex: none;
	width: 35px;
	text-align: center;
}
.inkooplijst .inkoop_ingekocht input, .inkooplijst .inkoop_ontvangen input {
	width: 26px!important;
    text-align: center!important;
}

.inkooplijst .inkoop_inkoop_totaal, .inkooplijst .inkoop_totaalontvangenwaarde, .inkooplijst .inkoop_ontvangen {
	flex: none;
	width: 50px;
	text-align: right;
}
.inkooplijst .inkoop_inkoop {
	flex: none;
	width: 50px;
	text-align: right;

}
.inkooplijst .inkoop_leverdatum {
	flex: none;
	width: 70px;
}
.inkooplijst .inkoop_opmerking {
	flex: none;
	width: 100px;
}
.inkooplijst .inkoop_leverdatum input { 
	width: 65px;
}
.inkooplijst .inkoop_opmerking textarea { 
	width: 95px;
	padding: 3px;
	line-height: 16px!important;
    height: 65px;
}
.ll {
	text-align: center;
	font-size: 14px!important;
}
.ll span {
	vertical-align: middle;
}
.ll .select2 {
	text-align: left;
	margin: 0px 10px;
}







.debtorlist .deb_id {
	flex: none;
	width: 80px;
}
.debtorlist .deb_country {
	flex: none;
	width: 120px;
}
.debtorlist .deb_email {
	flex: 1.5;
}














.invoicelist .inv_date, .invoicelist .inv_nr {
	flex: none;
	width: 70px;
}
.invoicelist .inv_ref {
	flex: none;
	width: 160px;
}
.invoicelist .inv_sent, .invoicelist .inv_rem1, .invoicelist .inv_rem2, .invoicelist .inv_final, .invoicelist .inv_paid {
	flex: none;
	width: 45px;
	text-align: center;
}

.invoicelist .inv_subtotal, .invoicelist .inv_total {
	flex: none;
	width: 80px;
	text-align: right;
}











h2.PO {
	font-size: 16px!important;
	margin: 0px 0px -12px 0px!important;
	padding: 8px 10px!important;
	background-color: #0b1020!important;
}

ul.tbl li.divider {
    text-align: center;
    font-weight: bold;
	color: #000!important;
    background-color: #5aea5a !important;
}

.divider.unfinished {
    background-color: #fffe88 !important;
    color: #000;
    text-align: center;
    font-weight: bold;
}


.expand table td {
    padding: 1px 6px!important;
	font-size: 11px!important;
}
.expand table td strong {
	font-size: 11px!important;
}
.expired {
	background-color: rgba(255,0,4,0.40)!important;
	border: 1px solid rgba(255,0,4,1.00)!important;
}
.paid {
	background-color: rgba(27,200,0,0.40)!important;
	border: 1px solid rgba(27,200,0,1.00)!important;
}
.noinput {
	display: inline-block;
	background: #000;
	border-radius: 5px;
	padding: 5px 10px;
	width: calc(100% - 10px);
	border: 1px solid rgba(255,255,255,0.2);
	margin: 0px 0px 6px 0px;
}
.invoicelines input, .invoicelines select {
	width: calc(100% - 10px)!important;
	margin: 0px!important;
}

.invoicelines .onoff, .invoicelines .select2-container {
	margin: 0px!important;
}
.invoicelines li {
	margin: 0px 0px 5px 0px;
	padding: 8px 5px 5px 8px;
}



.invoicelines li:nth-child(even) {
	border-radius: 8px;
	background-color: #000;
}







.invoicelines .invline_ad {
	flex: none;
	width: 30px;
	text-align: center;
}
.invoicelines .invline_pn {
	flex: none;
	width: 100px;
	position: relative;
}
.invoicelines .invline_am {
	flex: none;
	width: 80px;
}
.invoicelines .invline_rt, .invoicelines .invline_pp, .invoicelines .invline_pr {
	flex: none;
	width: 80px;
	text-align: right;
}
.invoicelines .invline_pp, .invoicelines .invline_pr {
	line-height: 26px;
}
.invoicelines .head .invline_pp, .invoicelines .head .invline_pr {
    line-height: 16px;
}
.invoicelines .invline_vt {
	flex: none!important;
	width: 80px!important;
}
.invoicelines .invline_us {
	flex: none!important;
	width: 80px!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 25px;
    font-size: 11px;
}
li.head {
	font-weight: bold;
}

.autofillresult {
	position: absolute;
	z-index: 100;
	top: 26px;
	list-style: none;
	margin: 0px;
	left: 0px;
	background-color: rgba(0,0,0,1.00);
	width: 350px;
	padding: 5px;
	border: 1px solid #a1a1a1;
	border-radius: 5px;
	line-height: 9px;
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
}
.autofillresult li {
	cursor: pointer;
	margin: 5px;
}
.autofillresult li:hover {
	background-color: rgba(255,255,255,0.01);
	border-radius: 5px;
}

.nocustomer.true {
	display: none;
}
.date-field {
	position: relative;
}
.date-field input {
	width: 100%;
	color: #fff; /* input text and icon color */
	background-color: #000;

	/* same as before */
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.2rem;
	background-repeat: no-repeat;
	background-position: right .6rem center;
	background-size: 1.2rem 1.2rem;

	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' fill='white'/%3E%3Crect x='7' y='2' width='2' height='4' fill='white'/%3E%3Crect x='15' y='2' width='2' height='4' fill='white'/%3E%3Crect x='5' y='9' width='4' height='4' fill='black'/%3E%3Crect x='11' y='9' width='4' height='4' fill='black'/%3E%3Crect x='5' y='15' width='4' height='4' fill='black'/%3E%3Crect x='11' y='15' width='4' height='4' fill='black'/%3E%3C/svg%3E");

}
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
h3 {
	user-select: none; 
}
h3 div {
	display: inline-block;
	vertical-align: middle;
}
h3 ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	float: right;
}
h3 ul li {
	float: left;
	background-color: rgba(219,219,219,0.10);
	font-size: 10px;
	padding: 5px 10px;
	margin: 0px 0px 0px 10px;
	border-radius: 8px;
	cursor: pointer;
	user-select: none; 
}
h3 ul li.active {
	background-color: rgba(219,219,219,0.40);
}

.loadingbox {
	text-align: center;
}
.loadingbox svg {
	max-width: 50%;
	margin: 0px auto;
	
}


.sidebox.product input, .sidebox.product textarea {
    width: calc(100% - 10px);
}
.sidebox.product input[type=checkbox] {
    width: auto;
}
.sidebox.product .left strong {
    font-size: 14px;
    display: block;
    margin: 0px 0px 20px 0px;
}
.sidebox.product .left strong span {
	float: right;
}
.data {
	transition: all 0.2s;
}
.data.closed {
	overflow: hidden;
	height: 58px;
}

.PO {
	overflow: hidden;
}





.PO span.addinkoopproduct, .PO span.removeEmpty, .PO span.inkoopexcel, .PO span.addinkoopproduct, .PO span.sendemailPO {
	float: right;
	border: 2px solid #ccc;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 100px;
	font-size: 10px;
	color: #ccc;
	margin: 0px 0px 0px 5px;
	transition: all 0.2s;
}
.PO span.addinkoopproduct:hover, .PO span.removeEmpty:hover, .PO span.inkoopexcel:hover, .PO span.addinkoopproduct:hover, .PO span.sendemailPO:hover {
	background-color: #ccc;
	color: #000;
}

.PO a {
	transition: all 0.2s;
	color: #ccc;
}
.PO .material-symbols-outlined {
	display: inline-block;
	font-size: 20px;
	margin: 3px 0px 0px 0px;
	transition: all 0.2s;
	color: #ccc;
}

.PO span:hover a, .PO .material-symbols-outlined:hover {
	color: #000!important;
}



.joblist {
	position: fixed;
	bottom: 5px;
	left: 5px;
	padding: 20px;
	width: calc(100% - 20px);
}
.joblist .job {
	width: 200px;
	display: inline-block;
	margin: 0px 20px 0px 0px;
	border-radius: 10px;
	background-color: #000;
	padding: 5px 10px;
	box-shadow: 0px 0px 3px 0px rgba(147,147,147,1.00);
	color:#BCBCBC;
	font-size: 9px;
}
.joblist .job strong {
	display: block;
	font-size: 10px;
	color: #fff;
}
.joblist .job strong.running {
	color: #057C00;
}
.joblist .job strong.error {
	color:#A30002;
}

.inkooplijst input {
	transition: all 0.2s;
}
.inkooplijst .stored {
	background-color: #B5FFB2;
	color: #000;
	border: 1px solid #2DAF00;
}



.cancelinkoop {
	float: right;
	cursor: pointer;
}





.duplicate1{
    background-color: #d991ab!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate2{
    background-color: #91d99c!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate3{
    background-color: #91a2d9!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate4{
    background-color: #b9d991!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate5{
    background-color: #d99991!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate6{
    background-color: #bb91d9!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate7{
    background-color: #91bdd9!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate8{
    background-color: #cfd991!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}


.duplicate9{
    background-color: #a391d9!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate10{
    background-color: #91d9c5!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate11{
    background-color: #d891d9!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.duplicate12{
    background-color: #d9c091!important;
    border: 1px solid red;
    display: block!important;
	color: #000!important;
}

.inputlabel label {
	display: inline-block;
    width: 30%;
}
.inputlabel > div, .inputlabel > input {
	display: inline-block;
    width: 68%;
    max-width: 100%;
}
.inputlabel > div input {
	max-width: 100%!important;
}

.filteroptions {
	text-align: right;
}
.filteroptions > span.hl {
	cursor: pointer;
	height: 28px;
	line-height: 24px;
	border-radius: 5px;
	border: 1px solid #fff;
	color: #fff;
	display: inline-block;
	padding: 0px 10px;
	transition: all 0.2s;
	margin: 0px 0px 0px 9px;
}
.filteroptions > span.hl:hover {
	background-color: #fff;
	color: #000;
}
.filteroptions > span.hl span {
	font-size: 18px;
	vertical-align: top; 
	margin: 4px 0px 0px 0px;
}

.mailkey {
	display: block;
}
.mailkey ul {
	display: block;
	margin: 10px 0px;
	padding: 0px;
}
.mailkey ul li {
	display: block;
	background-color: rgba(201, 201, 201, 1.00);
	border-radius: 100px;
	margin: 0px 0px 5px 0px;
	cursor: pointer;
	color: #000;
	padding: 5px 10px;
}

.blk td a {
    color: #5b7fcd !important;
    font-weight: bold;
}
span.updatetnt {
	float: right;
	font-size: 14px;
	margin: 7px 0px 0px 0px;
}
span.addtoshop {
	float: right;
	font-size: 20px;
}

.inkoop_leverdatum.date-field input {
    background-image: none;
    border: 1px solid rgb(133, 133, 133);
    border-radius: 2px;
    background-color: rgb(59, 59, 59);
    padding: 1px 2px;
    font-size: 10px !important;
}