/* Stylesheet Freshino */

:root {
	--main-groen: #7E9C29;
	--main-lichtgroen: #7E9C29;
	--main-groen-hover: #759126;
	--main-lichtgroen: #94C11F;

	--freshino-red: #AD1817;
	--freshino-red-hover: #991717;
	--freshino-red-error: #D91A19;

	--main-grey: #ccc;
	--main-grey1: #ddd;
	--main-grey2: #eeeeee;
	--main-white2: #fafafa;
	--background-ed: #ededed;
	--white: #fff;

	--lichtblauw: #2196F3;
	--donkerblauw: #126DB2;
	--donkerblauwhover: #0C5993;
	--subrow-background: #ececec;
	--iconblauw: #5796C5;
	--iconblauw-hover: #4481af;
	--subrow-grey: #8E8E8E;
	--selected-row: #acbad4;

	--main-orange: #D7830F;
	--main-orange-hover: #b66e09;
	--main-geel: #EAAF5D;
	--main-geel-hover: #C89043;

	/* NIEUW */
	--freshino-blue:                #121E2D;
	--freshino-text-blue:           #121E2D;
	/* --freshino-blue2: 			 	#556f91; */
	--freshino-blue2: 			 	#425c7e;
	--freshino-lightblue: 			#3b80c0;
	--freshino-lightblue2: 			#CAE5FF;
	--freshino-orange: 			    #E69A3D;
	--freshino-red: 			    #C72E44;
	--freshino-darkgrey: 			#676866;
	
	--freshino-bottom-border-color:	#7e8b9b;

	--smart-background: 			#556f91;

	--font1: 						'Open Sans', verdana;

	--font-headers: 				'Accord Alternate', 'open sans';
	--font-sidebar:					'Accord Alternate', 'open sans';
	--font-search: 				    'Open Sans', verdana;
	--font-login: 					'Accord Alternate', 'open sans';

	--fsize-sidebar: 				15px;
	--fsize-sidebar-small: 			14px;
	--fsize-sidebar-search: 		12px;
	--fsize-search: 				14px;
	--fsize-button: 				14px;
	
	--font-color-sidebar-icons: 		var(--freshino-blue);
	--font-color-sidebar: 				var(--freshino-blue);
	--font-color-text: 			        var(--freshino-blue);

	--color-line: 					#ddd;
	--color-sidebar-inner: 			#f6f6f6;

	--input-bg-color: 		        #f5f5f5;
	--input-border-color: 			#E3E3E3;
	--freshino-lightgrey: 			#E3E3E3;
	
	--radius-menu-search: 			30px;
	--radius-menu-item: 			10px;
	--radius-dashboarditem: 		10px;
	--radius-fieldset:  			5px;
	--radius-input:       			12px;
	--radius-buttons:       		20px;

	--radius-datatables-buttons: 	8px;
	--radius-datatables-inputs: 	8px;


}

html, body {
	height: 100%;
	margin: 0;
	background-color: var(--background-ed);
	color: var(--font-color-text);
}
html * {
	box-sizing: border-box;
}

@-webkit-keyframes blinkingBack {
	0%, 49% {
		color: var(--white);
	}
	50%, 100% {
		color: var(--freshino-red);
	}
}
@-webkit-keyframes fadeInDown {
  0% {
     opacity: 0;
     -webkit-transform: translateY(-30px);
  }
  100% {
     opacity: 1; 
     -webkit-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
     opacity: 0;
     transform: translateY(-30px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}

@keyframes fadeUpDown {
  0% {
     opacity: 1;
     transform: translateY(0);
		 z-index: 9999;
  }
  100% {
		opacity: 0;
		transform: translateY(-30px);
		z-index: -20;
  }
}
/* 
.fadeInBallon {
  animation: fadeInBallon 2s;
  -webkit-animation: fadeInBallon 2s;
  -moz-animation: fadeInBallon 2s;
  -o-animation: fadeInBallon 2s;
  -ms-animation: fadeInBallon 2s;
}
@keyframes fadeInBallon {
  0% {opacity:0;}
  100% {opacity:1;}
} */
#sticker_pincode{
	-webkit-text-security: disc; /* Voor Safari en Chromium-gebaseerde browsers */
	text-security: disc; 
	font-family: sans-serif; 
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
	animation: fadeUpDown 2s ease-out 5s;
}
.TimeBar20secs {
  border: 1px solid var(--main-grey);
  height: 4px;
  width: 100%;
}  
  .TimeBar20secs .in {
    animation: fill 20s linear 1;
    height: 100%;
    background-color: var(--main-groen);
  }
.TimeBar10secs {
  border: 1px solid var(--main-grey);
  height: 4px;
  width: 100%;
}  
  .TimeBar10secs .in {
    animation: fill 10s linear 1;
    height: 100%;
    background-color: var(--main-groen);
  }


@keyframes fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
a{
 	cursor: pointer;
}
a.blue {
	color: var(--donkerblauw);
}
span.blue {
	color: var(--donkerblauw);
}
input[type="date"] {
	width: 125px !important;	
	position: relative;
}
input[type="number"] {
	-moz-appearance: textfield; /* Firefox: spinners weg */
	appearance: textfield; /* Edge/Chrome */
}
input[type="number"]:focus {
	-moz-appearance: unset; /* Firefox: spinners weg */
	appearance: unset; /* Edge/Chrome */
}
td.selectRowsDT:hover {
	cursor: crosshair;
}
input[type="datetime-local"] {
	width: 175px;	
	position: relative;
}
td:has(> .dateChangePlusMin) {
	width: 200px !important;
}
div.gap_medium {
	column-gap: 10px;
}
div.form-item {
	padding-bottom: 5px;
}
div.form-item label {
	display: flex;	
}
div.form-item input, div.form-item select, div.form-item textarea {
	width: 100%;
}
div.form-item div.items {
	display: flex;	
}
div.form-item div.items>div {
	display: flex;	
	flex-direction: row;
	column-gap: 10px;
}
div.form-item div.items>div input[type="radio"] {
  display: none;
}	
div.form-item div.items>div input[type="radio"]:checked+label {
  background-color: #f1f1f1;
	border: 2px solid var(--lichtblauw);
}
div.form-item div.items>div>label {
	display: unset;	
	font-weight: normal;
	margin-right: 6px;	
	border: 2px solid #f1f1f1;
  padding: 4px 11px;
  cursor: pointer;
}
div.form-item div.items>div>label:hover {
	background-color: #f1f1f1;
}
div.form-item div.items.col {
	flex-direction: column;
}
div.form-item div.items.row {
	flex-direction: row;
}
.elementDisabled {
	pointer-events: none;
	cursor: default;
	filter: grayscale(1);
	opacity: 0.5;
}
div.dateChangePlusMin {
	display: inline-flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	/* position: absolute;  */
	position: relative; 
	width: 20px; 
	height: 36px;
	margin: 0px 5px;
	top: -7px;
	margin-bottom: -7px;
}
	div.dateChangePlusMin i {
		cursor: pointer;
		color: var(--lichtblauw);
		font-size: 16px;
		transition: 0.1s ease-in-out;
	}
		div.dateChangePlusMin i:hover {
			color: var(--donkerblauw);
		}
a.loggedin {
	text-decoration: none;
	color: var(--white);
	font-weight: normal;
	display: block;
}
a.loggedin:hover {
	text-decoration: none;
	color: none;
}

div#content_loading,div#content_loading2 {
	position: absolute;
	top: 50%;
	margin-top: -50px;
	left: 50%;
	margin-left: -50px;				
	z-index: 99999;
	height: 100px;
	width: 100px;
	display: none;
	/* background-image: url('../images/loading_content.gif'); */
	background-image: url('../images/loading_content.svg');
	background-repeat: no-repeat;
	background-position: center center;
}

#page_all {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height: 100%;
	background-image: url('../images/overlay.png');
	opacity: 0.8;
	display: none;
	z-index: 80;
}
	#info_all {
		position:absolute;
		top: 200px;
		width: 100%;
		background-color: transparent;
		display: none;
		z-index: 90;
	}
	#login_form {
		position:absolute;
		top: 200px;
		width: 100%;
		background-color: transparent;
		display: none;
		z-index: 90;
	}
	div.login_content {
		background-color: var(--main-white2);
		width: 100%;
	}
	td.info_title {
		font-family: var(--font1);
		font-size: 14pt;
		color: #C3C3C3;
		width: 370px;
		text-align: left;
	}	
	td.info_desc {
		vertical-align: middle;
		width: 370px;
		height: 150px;
	}
	td.info_image {
		vertical-align: middle;	
		width: 150px;
		height: 150px;
	}
	#article_info {
	 	padding: 10px;
		position:absolute;
		top: 10%;
	 	margin-left: 150px;
		width: 650px;
		background-color: var(--white);
		z-index: 100;
	}
#container {
	width: 100%;
	height: 100%;
	background-color: var(--background-ed);
	display: flex;
    justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	flex-wrap: wrap;
}
table.page_table {
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
 
}
	/* HEADER */
	td#header_left {
		background-color: var(--white); /*1f3d7a*/
		height: 60px;
		padding: 4px 4px;
		vertical-align: top;
		color: var(--white);
	}
		div#menu_buttons, div#menu_buttons_smart {
			display: none;
		}
			div#menu_buttons, div#menu_buttons_smart .menu_buttons_menu>i { 
				float: left;
			}
			div#menu_buttons, div#menu_buttons_smart iframe.refresh_button {
				float: right;
				cursor: pointer;
			} 
			i#closeNav, i#openNav, i#closeNavSmart, i#openNavSmart {
				cursor: pointer;
			}
			i#closeNav, i#closeNavSmart {
				display: none;
			}
			.menu_buttons_menu i.fa-solid, .menu_buttons_refresh i.fa-solid {
				/* color: black; */
				/* color: var(--white); */
				color: var(--main-grey);
				font-size: 28px;
			}


	td.header {
		text-align: right;
		padding: 10px 15px;
		vertical-align: middle;
		/*background-image: url('../images/header3.jpg');*/
		background-color: var(--main-groen);
		color: #f1f1f1;
	}	
		/* td.header #header_driehoek {
		 	position: absolute;
			float: left;
			width: 20px;
			height: 20px;
			background-image: url('../images/header_driehoek.png');
			margin-left: 34px;
			margin-top: 35px;
		} */
		td.header #bedrijfsnaam {
			float: left;
			color: #F9F9F9;
			opacity: 0.4;
			margin: 5px;
			font-size: 14pt;
		}
		td.header #beta {
			float: left;
			color: var(--freshino-red);
			opacity: 1;
			margin: 5px;
			font-size: 14pt;
		}
		td.header #support_button {
			float: right;
			width: 60px;
			margin-top: -5px;
		}
		div#support_button i:hover {
		  -moz-transform: scale(1.1);
		  -webkit-transform: scale(1.1);
		  transform: scale(1.1);		  
		}
		div#support_button i {
			font-size: 24px;	
			color: var(--main-grey);
		}
		td.header #header_versie_info {
			float: right;
			width: 120px;
		}

	div.dashboard {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		max-width: 100%;
		margin-top: 4px;
		flex-wrap: wrap;
		--dashboardGap: 13px;
		gap: var(--dashboardGap);
		row-gap: 24px;
	} 
		div.dashboard_row {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: space-between;
			width: 100%;
			max-width: 100%;
			--dashboardGap: 26px;
			gap: var(--dashboardGap);
		}
			div.dashboard * { box-sizing: border-box; }
			div.dashboard_item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				background-color: var(--white);
				width: calc((100% / 4) - 12px);
				min-height: 120px;
				padding: 15px 15px;
				box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
				border-radius: var(--radius-dashboarditem);
				overflow: hidden;
				white-space: normal;
			} div.dashboard_item.large { width: calc(100% - (100% / 4 - 20px)); max-width: unset; } div.dashboard_item.full { width: 100%; max-width: unset; }
			div.dashboard_item>h2 {
				margin-top: 0;
			}
			div.dashboard_item.dashboard_info {
				flex-direction: row;
				justify-content: space-between;
			}
				div.dashboard_home_info {
					width: calc(100% - 320px - 60px);
					/* min-width: 400px; */
					max-width: none;
					min-height: 320px;
					position: relative;
				}
					div.dashboard_home_info .title {
						font-size: 12pt;
						font-family: var(--font1);
						margin-bottom: 12px;
					}
					div.dashboard_home_info .text {
						font-size: 10pt;
						font-family: var(--font1);
					}
				div.dashboard_contact_info {
					width: 320px;
					min-width: 320px;
					max-width: none;
					min-height: 320px;
					position: relative;
				} div.dashboard_contact_info:before { 
					content: "";
					position: absolute;
					width: 2px;
					height: 95%;
					top: 50%;
					left: -30px;
					transform: translateY(-50%);
					background-color: var(--main-grey2);
				}
					div.dashboard_contact_info p:first-of-type {
						margin-top: 0;
					}
					div.dashboard_contact_info a i{
						width: 30px;
						/* color:var(--lichtblauw); */
						color: var(--freshino-red);
						font-size: 14pt;
						transition: all 0.1s ease-in-out;
					}
						div.dashboard_contact_info i.fa-phone {
							font-size: 17px;
						}	
						div.dashboard_contact_info i.fa-whatsapp {
							font-size: 20px;
						}	
						div.dashboard_contact_info i.fa-link {
							font-size: 14px;
						}	
						div.dashboard_contact_info i.fa-at {
							font-size: 20px;
						}	
					div.dashboard_contact_info a{
						font-weight: normal;	
						transition: all 0.1s ease-in-out;
						height: 30px;
					}
					div.dashboard_contact_info a:hover{
						font-weight: normal;
						text-decoration: none;		
						color:var(--donkerblauw);		
					}
					div.dashboard_contact_info a:hover i{	
						color:var(--donkerblauw);		
					}
			
			div.dashboard_stats_row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				max-width: 600px;
				color: black;
				font-family: var(--font1);
				font-size: 10pt;
				border-bottom: 2px solid var(--main-grey2);
				padding: 6px 0;
				font-weight: bold;
			}
				div.dashboard_stats_row .title {
					
				}
				div.dashboard_stats_row .aantal {
					font-size: 12pt;
				}

			div.dashboard .content_title {
				margin-bottom: 2px;
			}
			div.dashboard_chart_container, div.graphsHolder {
				display: flex;
				width: 100%;
				height: 100%;
				padding: 16px 20px;
				background-color: var(--white);
				column-gap: 50px;
				border-radius: 8px;
				box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
			}
				div.dashboard_chart_container div.itemHolder {
					width: 100%;
					height: 100%;
					padding: 0;
					margin: 0;
				}
			div.dashboard_row.machine_info {
				flex-direction: column;
				
				width: 100%;
				background-color: var(--white);
				padding: 16px 20px;
				border-radius: 8px;
				box-shadow: rgb(0 0 0 / 8%) 0px 2px 4px 0px;
			}
			div.dashboard_row_title {
				font-size: 14pt;
				color: #676866;
				padding-bottom: 8px;
				border-bottom: 2px solid var(--freshino-red);
			}
			.dashboard_chart_container#controleChart {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
				flex-wrap: wrap;
			}

			.dashboard_chart_stats {
				display: table;
				padding: 20px;
			}
				.dashboard_chart_stats .dashboard_chart_item {
					display: table-row;
				}
				.dashboard_chart_title {
					display: table-cell;
					padding: 6px;
				}
				.dashboard_chart_value {
					display: table-cell;
					padding: 6px;
				}

			div.dashboard_chart {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				background-color: var(--white);
				/* width: 100%; */
				/* max-width: calc(800px + var(--dashboardGap)); */
				padding: 16px 20px;
				box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
				border-radius: 8px;
			}
			div.dashboard_header {
				width: 100%;
				font-family: var(--font1);
				font-size: 16px;
				color: #676866;
				/* border-bottom: 1px solid var(--freshino-red); */
				overflow: hidden;
			}
				div.dashboard_header>i {
					font-size: 14px;
					color: var(--freshino-red);
					cursor: pointer;
					margin-right: 8px;
				}
				div.dashboard_header span.title_date {
					color: var(--main-grey);
				}
			/* .header_line, */
			.dashboard_header::after {
				content: "";
				position: relative;
				display: block;
				width: 100%;
				max-width: 100px;
				height: 6px;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: left center;
				background-image: url('../images/line.svg');
				margin: 8px 0;
			}
			div.active_user {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				padding: 4px 8px;
				border-radius: 8px;
				/* background-color: rgb(247, 247, 247); */
			}
				div.active_user .user_status {
					width: 10px;
					height: 10px;
					border-radius: 12px;
					margin-right: 12px;
					background-color: red;
					/* box-shadow: 0px 0px 2px black; */
				}
					div.active_user .user_status.online {
						background-color: rgb(27, 189, 68);
					}
					div.active_user.current_user .user_name a {
						font-weight: bold;
					}
				div.active_user .user_name {
					font-size: 14px;
					/* font-weight: bold; */
					font-family: var(--font1);
					color: #676866;
					text-transform: capitalize;
				}


	/* Sidebar profile */
	div.menu_profile {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 200px;
		background-color: var(--color-sidebar-inner);
		padding: 10px 14px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid var(--color-line);
		z-index: 10;
	}
		div.menu_profile_top {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 0 14px;
			padding-bottom: 10px;
		}
		div.menu_profile_btm {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 0 14px;
			padding-top: 10px;
		}
		div.menu_profile_btm:before {
			content: "";
			position: absolute;
			top: -1px;
			left: 50%;
			transform: translateX(-50%);
			height: 1px;
			width: calc(100% - 20px);
			border-bottom: 1px solid var(--color-line);
		}
			div.menu_profile .icon {
				font-size: 14px;
				cursor: pointer;
				padding: 0px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
				div.menu_profile .icon.blue-icon a i {
					color: var(--freshino-lightblue);
				}
			div.menu_profile .profile_name {
				font-size: var(--fsize-sidebar);
				font-family: var(--font-sidebar);
				font-weight: bold;
				color: var(--font-colorsidebar);
				text-transform: uppercase;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 120px;
			}
			div.menu_profile .profile_logout {
				cursor: pointer;
			}
			div.menu_profile a, div.menu_profile a:hover, div.menu_profile i:hover {
				text-decoration: none;
			}

	/* ERROR PAGES */
	div.error_page {
		display: flex;
		align-items: center;
		flex-direction: column;		
		justify-content:center;
		min-height: 80vh;
		text-align: center;
	}
		div.error_page i {
			color: var(--background-ed);
			font-size: 160px;
		}
		div.error_page h1 {
			margin-top: 25px;
			margin-bottom: 10px;
			color: var(--main-grey);
			font-size: 40px;
		}
		div.error_page p {
			margin-top: 15px;
		}
	/* MENU */
	div#td_menu {
		width: 200px;
		background-color: var(--white);
		vertical-align: top;
		box-sizing: border-box;
		height: calc( 100vh - 64px);
		overflow-y: scroll;
		position: fixed;
    	scrollbar-width: none;
		z-index: 8;
	}
		div#td_menu * {
			box-sizing: border-box;
		}
		div#td_menu::-webkit-scrollbar{
			width: 0px;
		}
		div.menu {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			width: 100%;
			max-width: 200px;
			min-height: calc(100vh - 64px);
			/* max-height: 100%; */
			background-color: var(--white);
			position: relative;
			z-index: 1999;
			box-shadow: rgba(0, 0, 0, 0.548) 0px 2px 4px 0px;
			padding-bottom: 85px;
			padding-top: 6px;
			padding-inline: 6px;
			row-gap: 6px;
			font-family: var(--font-sidebar);
			overflow-x: hidden;
		}
		div.menu.fullw {
			max-width: 100%;
		}
		div.menu_row {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			min-height: 10px;
			color: #111111;
			width: 100%;
			box-sizing: border-box;
			background-color: var(--white);
			position: relative;
			/* border-top: 1px solid var(--color-line); */
		}
		div.menu_row:before {
			content: "";
			content: unset;
			position: absolute;
			bottom: 0px;
			left: 50%;
			transform: translateX(-50%);
			height: 2px;
			width: calc(100% - 20px);
			border: inherit;
			border-bottom: 1px solid var(--main-grey2);
		}
		div.menu_item {
			padding: 8px 6px;
			box-sizing: border-box;
			margin: 0px;
			cursor: pointer;
			width: 100%;
			max-width: 200px;
			display: flex;
			align-items: center;
			color: var(--font-color-sidebar);
			font-size: var(--fsize-sidebar);
			font-family: var(--font-sidebar);
			font-weight: 500;
			border-radius: var(--radius-menu-item);
			column-gap: 10px;
		}
		div.menu_item.opened {
			background-color: #ececec;
		}
		/* .menu_row_search .menu_item {
			cursor: unset;
		} */
		div.menu_item:hover {
			background-color: var(--freshino-lightblue2);
		}
		a.menu_item:hover {
			text-decoration: none;
			width: 100%;
		}
		div.menu_item_slide {
			cursor: pointer;
			font-size: 10pt;
			position: absolute;
			top: 10px;
			right: 10px;
			color: var(--freshino-red);
		}
		div.menu_row a, div.menu_row a:hover {
			text-decoration: none;
			width: 100%;
			display: flex;
			align-items: center;
			column-gap: 10px;
		} div.menu_row a {
			color: inherit;
			font-weight: inherit;
		}
		div.menu_item_slide i {
			position: relative;
		}
		div.menu_item_slide i.fa-solid {
			position: relative;
			font-size: 14px;
		}

		div.menu_row_search {
			/* z-index: 20; */
			/* position: fixed; */
			/* top: 74px; */
			/* max-width: 200px; */
			max-width: 170px;
		}
		div.menu_row_search .searchMenuHolder {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			background-color: #EDEFF0;
			border-radius: var(--radius-menu-search);
			margin: 0 auto;
		}
		div.menu_row_search i.fa-magnifying-glass {
			margin-left: 12px;
			color: #6e6e6e;
			font-size: 11px;
		}	
		div.menu_row_search>.menu_item {
			padding: 4px 0 !important;
			background-color: white;
		}
		div.menu_row_search:before {
			content : "";	
			border-bottom: 0px solid transparent;
		}
		.searchMenuHolder .close_search {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 10px;
			color: var(--freshino-red);
			font-size: 14px;
		}
		#searchMenuResult {
			width: 100%;
			padding: 0 4px;
			border-radius: 16px;
			background-color: #ededed;
		}
			#searchMenuResult > h3:last-child,
			#searchMenuResult > a.menu_item:last-child {
				margin-bottom: 8px;
			}
			 
			.menu_row_search h3 {
				font-family: var(--font-sidebar);
				color: var(--freshino-red);
				font-weight: normal;
				margin-top: 4px;
				padding: 4px 8px 4px 10px;
				font-size: 13px;
			}
			.menu_row_search div.menu_div2 a.menu_item {
				padding: 4px 8px 4px 10px;
			}
				.menu_row_search .menu_div2 {
					margin-left: 0;	
				}
				.menu_row_search .menu_div2::before {
					content: unset;
				}
		input.searchMenuItems {
			width: 100%;
			color: var(--font-color-sidebar);
			font-size: var(--fsize-sidebar-search);
		}

		input.searchMenuItems, input.searchMenuItems:focus {
			color: var(--font-color-sidebar);
			font-family: var(--font-search);
			font-size: var(--fsize-sidebar-search);
			border: none;
			outline: none;
			background-color: transparent;
			border-radius: none;
			box-shadow: none;
			height: unset;
		}

		input.searchMenuItems::placeholder { color: #6d6d6d; opacity: 1; text-transform: unset;}
		input.searchMenuItems::-webkit-input-placeholder { color: #6d6d6d; opacity: 1; text-transform: unset; }
		input.searchMenuItems:-ms-input-placeholder { color: #6d6d6d; opacity: 1; text-transform: unset; }
		input.searchMenuItems:-moz-input-placeholder { color: #6d6d6d; opacity: 1; text-transform: unset; }
		input.searchMenuItems::-moz-input-placeholder { color: #6d6d6d; opacity: 1; text-transform: unset; }

		.menu_icon {
			width: 26px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.menu_icon>i {
				font-size: 14px;
				color: var(--font-color-sidebar-icons);
			}
		
		a.iframe_berichten {
			text-align: left;
			color: #000;
			font-weight: normal;
			font-size: 10pt;
			padding-top: 5px;
			padding-bottom: 5px;
			padding-left: 10px;
		}
		a.menu_item  {
		 	width: 100%;
			display: block;
			text-align: left;
			color: #000;
			font-weight: normal;
			font-size: 10pt;
		}
		div.menu_div2 {
			z-index: 2;
			position: relative;
			width: 100%;
			/* margin-left: 30px; */
			padding-left: 30px;
		}
			div.menu_div2::before {
				content: "";
				position: absolute;
				top: 12px;
				bottom: 12px;
				/* left: 0; */
				left: 19px;
				width: 2px;
				background-color: #DDDDDD;
			}
			div.menu_div2 a.menu_item {
				padding: 8px 8px 8px 10px;
				/* border-left: 3px solid transparent;
				border-right: 3px solid transparent; */
				box-sizing: border-box;
				position: relative;
				font-family: var(--font-sidebar);
				font-size: var(--fsize-sidebar-small);
			} 
			.menu_div2 a.menu_item::before {
				content: "";
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: -4px;
				height: 2px;
				width: 16px;
				background-color: #DDDDDD;
			}

			div.menu_div2 div.sep_menu {
				padding: 8px 8px 8px 10px;
				/* border-left: 3px solid transparent; */
				/* border-right: 3px solid transparent; */
				box-sizing: border-box;
				position: relative;
				font-family: var(--font-sidebar);
				font-size: var(--fsize-sidebar-small);
				font-weight: 600;
				cursor: default;
			} 
				div.menu_div2 a.menu_item:hover {
					/* border-right: 3px solid var(--freshino-red); */
					color: var(--freshino-red);
				}
				div.menu_div2 a.menu_item:before, div.menu_div2 div.sep_menu::before{
					content : "";
					content: unset;
					position: absolute;
					bottom: 0px;
					left: 50%;
					transform: translateX(-50%);
					height: 1px;
					width: calc(100% - 20px);
					border-bottom: 1px solid var(--color-line);
				}
				div.menu_div2 a.extra_margin:before {
					left: calc(50% - 5px);
					transform: translateX(-50%);
					height: 1px;
					width: calc(100% - 40px);
				}
				div.menu_div2 a.menu_item:last-child:before {
					display: none;
				}
				div.menu_div2 a.extra_margin {
					margin-left: 10px;
				}

	/* SMART DEVICES */
	div#div_td_menu_smart {
		width: 100%;
		min-width: 50px;
		vertical-align: top;
	}
		div#div_td_menu_smart table.menu {
			width: 100%;
		}
		div#div_td_menu_smart td.menu_item {
			height: 10px;
			vertical-align: middle;
			background-color: var(--smart-background);
			color: var(--white);
			border: 0px;
			padding: 0 20px;
		}
		/* div#div_td_menu_smart div.menu_item {
			padding: 3px 10px;
			margin: 0px;
			font-size: 10pt;
			text-transform: uppercase;
			text-align: left;
		} */
		div#div_td_menu_smart div.menu_item_slide {
			cursor: pointer;
			font-size: 10pt;
			float: right;
		}
		div#div_td_menu_smart a.menu_item_smart {
		}
			div#div_td_menu_smart button.menu_smart {
				width: 100%;
				min-height: 50px;
				color: var(--freshino-text-blue);
				border-radius: 4px;
				background-color: var(--white);
				padding: 5px 8px;
			}
			div#div_td_menu_smart button.menu_smart:hover {
				background-color: var(--main-grey);
			}
		div#div_td_menu_smart div.smart_menu_div2 {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 6px;
		}
		#div_td_menu_smart a, #div_td_menu_smart button, #div_td_menu_smart .smart_menu_title {
			font-family: var(--font-sidebar);
			font-size: 14px;
		}

		.smart_menu_title {
			margin: 10px 0;
		}
		div#div_td_menu_smart .smart_menu_div2#smart_menu_login {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
		}
		.smart_menu_div2 div.saveSwitchButton {
			justify-content: flex-end;
		}
		.smart_logout {
			width: max-content;
			background-color: var(--freshino-blue);
			color: var(--white);
			border-radius: 4px;
			padding: 8px 14px;
		}
		.smart_device div.page_space,
		.smart_device div.dataTables_wrapper,
		div.content-box,
		.content_td>#loadGraph,
		#indeling_table,
		#release_note_form {
			padding: 5px 5px;
		}
		.smart_device div.button_top_page {
			padding-inline: 5px;
		}

		.smart_device table.dataTable thead tr:first-child th:first-child,
		.smart_device table.dataTable thead tr td:first-child {
			border-top-left-radius: 4px;
		}
		.smart_device table.dataTable thead tr:first-child th:last-child,
		.smart_device table.dataTable thead td:last-child {
			border-top-right-radius: 8px;
		}

		/* Wel of niet? */
		.smart_device div.dataTables_wrapper>div.dt-buttons {
			display: flex;
			flex-wrap: wrap;
		}

		.smart_device div#td_menu {
			display: none;
		}
		.smart_device div.content {
			padding-left: unset;
			padding-inline: 0.8%;
		}

		

	/* CONTENT DIV */
	div.content {
		width: auto;
		height: calc(100vh - 62px);
		text-align: left;
		padding: 0.8%;
		background-color: var(--background-ed);
	}
	/* div.betabackground {
		background-image: url('../images/back_develop_1.png');
	} */
		div.toolbar_filter {
			color: var(--lichtblauw);
			/* padding-top: 8px;
			padding-left: 8px; */
			box-sizing: border-box;
			height: 100%;
			float: left;
		}
		div.toolbar_filter_100 {
			color: var(--lichtblauw);
			padding-bottom: 8px;
			box-sizing: border-box;
			height: 100%;
			float: left;
			width: 100%;
			display: none;			
			transition: 0.3s ease-in-out;
		}
		div.content_holder {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-direction: column;
			/* height: 100%; */
			width: 100%;
		}
		div.top_page_title {
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: +1;
		}
			div.top_page_title i.fa-circle-arrow-left {			
				display: flex;
				align-items: center;
				/* margin-bottom: 10px; */
				color: var(--lichtblauw);
				font-size: 15pt;
				cursor: pointer;	
				transition: 0.1s ease-in-out;			
			}
				div.top_page_title i.fa-circle-arrow-left:hover {
					color: var(--donkerblauw);
				}
			div.content_title {
				margin-left: 8px;
				/* margin-bottom: 10px; */
				color: #676866;
				/* font-size: 14pt; */
				font-size: 20px;
				font-family: var(--font-headers);
			}
				div.content_title	span.legend_filter {
					width: 24px;
					height: 24px;
					margin-left: 5px;
					margin-top: 3px;
				}
		div.content_td {
			height: auto;
			width: 100%;
			max-width: 100%;
			display: flex;
			position: relative;
			flex-direction: column;
			margin-top: 10px;
			row-gap: 24px;
		}
			div.content_td h2 {
				font-size: 14px;
				font-weight: normal;
				color: var(--freshino-darkgrey);
				margin: 0;
				margin-bottom: 15px;
			}
			div.content_td h2.red {
				color: #676866;
			}
				div#laadbon_new_1:hover h2.red { color: #000; }
				div#laadbon_new_2:hover h2.red { color: #000; }
				
				div.content_td div.error_message, div.div_newRow div.error_message {
				float: left;
				color: var(--freshino-red);
				margin-bottom: 10px;
				display: none;
			}

			/*div.content_div_icon {
			 	position: absolute;
			 	margin-left: 30px;
			 	margin-top: -26px;
			 	width: 20px;
			 	background-image: url('../images/content_div_icon.png');
			}*/

			div.content_td div.space_content_vert {
				/* box-sizing: border-box;
				background-color: var(--background-ed);
				margin-left: -20px;
				margin-right: -20px;
				height: 25px;
				margin-top: 10px;
				margin-bottom: 10px; */
				display: none;
			}
			
			div.toggleFullDiv {
				display: flex;
				align-items: center;
				column-gap: 8px;
				margin-bottom: 14px;
			}
				div.toggleFullDiv i {
					color: var(--freshino-red);
					font-size: 12pt;
					cursor: pointer;
				}
				div.toggleFullDiv h2 {
					margin: 0;
				}
			div.div_newRow, div.div_newRowABold {
				margin: 20px;
			}
				div.div_newRow a {
					font-weight: normal;
				}
				
				div.div_newRow a.bold, div.div_newRow .details_row_open a {
					font-weight: bold;
				}
				div.div_newRow h1 {
					width: 100%;
				}
				div.div_newRow div.button_newRow {
					float: right;
				}
				div.div_newRow div#newRowProduct {
					width: 100%;
					height: auto;
				}
				div.div_newRow div.dtsp-titleRow {
					display: none;
				}
				div#select_regels_verkoopbundel_wrapper div.dtsp-titleRow {
					display: block;
				}
				div.div_newRow div.weergaveProduct {
					float: left;
					width: 280px;
					border: 2px solid var(--main-grey);
					min-height: 430px;					
					margin: 10px;
					padding: 8px;
				}
				div.div_newRow div.weergaveProduct:hover {
					border: 2px solid var(--main-groen);
				}
					div.div_newRow div.weergaveProduct div.product_title, div.div_newRow div.weergaveProductNoBorder div.product_title {
						font-size: 14pt;
						min-height: 50px;
					}
					div.div_newRow div.weergaveProduct div.product_foto, div.div_newRow div.weergaveProductNoBorder div.product_foto {
						position: relative;
						height: 200px;
						width: 100%;
						margin-bottom: 10px;
					}
						div.div_newRow div.weergaveProduct div.slide_foto, div.div_newRow div.weergaveProductNoBorder div.slide_foto {
							height: 200px;
							width: 100%;
						}
						
			table#addeditorder a.chosen-single {
				font-weight: normal;
			}
			td.locatie_td {
				height: 90px;
				max-width: 80px;
				background-color: var(--main-grey);
				border: 1px solid var(--white);
			}
			td.locatie_td:hover {
				background-color: #f9f9f9;
			}
				td.locatie_td img.locatie_plaats_info, td.locatie_td div.set_active, td.locatie_td div.change_hoogte {
					display: none;
				}
				td.locatie_td:hover img.locatie_plaats_info, td.locatie_td:hover div.set_active, td.locatie_td:hover div.change_hoogte {
					display: block;
				}
		div.page_t21 {
			float: left;
			width: 49%;
		}
		div.page_t22 {
			float: left;
			padding-left: 5px;
			width: 49%;
		}
	
		
		.naw_tab_box {
			padding: 15px 15px;
			background-color: var(--white);
			box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
			border-radius: 8px;
		}

		.naw_dashboard_box {
			width: 100%;
			max-width: 500px;
			display: flex;
			flex-direction: column;
			border: 1px solid var(--freshino-lightgrey);
			background-color: #fbfbfb;
			border-radius: 10px;
			padding: 1em;
		}
			.naw_dashboard_box h1 {
				margin: 0;
			}
			.naw_dashboard_box div h2 {
				margin-bottom: unset;
			}
			.naw_dashboard_box div h5 {
				margin-bottom: 1em;
			}

		.naw_grafiek_holder {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			margin-top: 2em;
			column-gap: 2em;
		}

		div.page_space_transparent {
			width: 100%;
			padding: 15px 15px;
			background-color: transparent;
			border-radius: 8px;
		}
		div.page_space {
			width: 100%;
			padding: 15px 15px;
			background-color: var(--white);
			box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
			border-radius: 8px;
		}
		div.page_space:first-of-type {
			margin-top: 0;
		}

		#userForm {
			display: flex;
			flex-direction: column;
			row-gap: 24px;
		}

		#userForm .section_header {
			width: 100%;
		}
		.dropdown-container{
			position: relative;
		}
			.dropdown-items{
				display: none;
				position: absolute;
				top: 28px;
				padding: .4em;
				background: var(--freshino-lightgrey);
				border-radius: 0px 4px 4px 4px;
				cursor: pointer;
			}
			.dropdown-container:hover > button {
				border-bottom-left-radius: 0;
			}
			.dropdown-container:hover .dropdown-items{
				display: block;
			}
			.dropdown-item{
				padding: .3em;
				margin-bottom: .2em;
			}
		div.card-box-small{
			max-width: 296px;
			width: 100%;
			border-radius: .2em;
		}
		div.card-box{
			max-width: 500px;
			width: 100%;
			border-radius: .2em;
		}
			div.card-title{
				width: 100%;
				border-top-right-radius: .4em;
				border-top-left-radius: .4em;
				background-color: var(--freshino-lightgrey);
				color: var(--freshino-text-blue) !important;
				padding: 1em .5em;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
				div.card-title h3{
					font-weight: bold;
					color: var(--freshino-text-blue);
				}
			div.card-body{
				width: 100%;
				padding: 1em .5em;
				border: 1px solid var(--freshino-lightgrey);
				border-bottom-left-radius: .4em;
				border-bottom-right-radius: .4em;
				background-color: var(--white);
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				gap: .5em;
			}
				div.card-col{
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					flex-direction: column;
					gap: .5em;
				}

		.row{
			width: 100%;
			padding: 1em 2em;
			border-top: 1px solid var(--freshino-lightgrey)
		}

		.flex-center{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.flex-between{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.flex-start{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			gap: .4em;
		}
		.flex-end{
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: wrap;
			gap: .4em;
		}
		.flex-col{
			flex-direction: column;
		}
		.vertical-line{
			height: 30px;
			width: 2px;
			border-radius: 999px;
			background-color: var(--freshino-lightgrey);
		}
		.horizontal-invisible-line{
			height: 2px;
			width: 80px;
			border-radius: 999px;
			background: transparent;
			margin: 0 2em;
		}
		.horizontal-line{
			height: 2px;
			width: 80px;
			border-radius: 999px;
			background-color: var(--freshino-lightgrey);
			margin: 0 2em;
		}
		div.content-box-flex{
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			gap: 2em;
			flex-wrap: wrap;
		}
		div.content-box,
		.content_td>#loadGraph,
		#indeling_table,
		#release_note_form {
			width: 100%;
			padding: 15px 15px;
			background-color: var(--white);
			box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
			border-radius: 8px;
		}

		div.page_space.naw_table{
			overflow-y: scroll;
			overflow-x: hidden;
			max-height: calc(100vh - 155px);
		}
		div.page_space.naw_algemeen {
			padding: unset;
			background-color: unset;
			box-shadow: unset;
			border-radius: unset;
			overflow-y: unset;
			overflow-x: unset;
			max-height: unset;
		}
			div.page_space.naw_algemeen #tab_algemeen {
				display: flex !important;
				flex-direction: column;
				row-gap: 24px;
			}
		
		div.headerContFieldset {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			width: 100%;
			padding: 15px 15px;
			background-color: var(--white);
			box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
			border-radius: 8px;
		}

		.gegevens_order_info_form,
		#orderFormNew,
		.sticker_scan_page {
			width: 100%;
			padding: 15px 15px;
			background-color: var(--white);
			box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
			border-radius: 8px;
		}

		.container_bg {
			padding: 15px 15px;
			background-color: var(--white);
			box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
			border-radius: 8px;
		}
		
		/* div.headerContFieldset fieldset {
			padding: 15px 15px;
			background-color: var(--white);
			box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
			border-radius: 8px;
			border: none;
		} */

		div.headerContFieldset form#form_addinkoopfactuur {
			display: flex; 
			flex-wrap: wrap;
			gap: 10px;
			width: 80%;
		}
			div.headerContFieldset div.buttonLoadMore {
				display: none;
			}
		div.page_t31 {
			float: left;
			width: 33%;
		}
		div.page_t32 {
			float: left;
			padding-left: 5px;
			width: 33%;
		}
		div.page_t33 {
			float: right;
			padding-left: 5px;
			width: 33%;
		}	

		div.headerContFieldset div.page_t3 {
			display: flex; 
			flex: 1 0 ;
			flex-flow: column; 
		}
			div.headerContFieldset div.page_t3 fieldset i.fa-circle-info, div.headerContFieldset div.page_t3 fieldset i.fa-envelope{
				font-size: 13pt;
				float: none;
				margin-left: 5px;
				color: var(--lichtblauw);
			}
			div.headerContFieldset div.page_t3 fieldset select {
				width: 100%;
			}
			div.headerContFieldset div.page_t3 fieldset {
				height: 100%;
			}
		div.headerContFieldset div.page_t4 {
			display: flex; 
			flex: 1 0 ;
			flex-flow: column; 
		}
			div.headerContFieldset div.page_t4 fieldset {
				height: 100%;
			}
		div.rowTr {
			padding: 2px 0px;
			display: flex;
			flex-direction: row;
			
		}
			div.notes {
				width: 100%;
				height: 145px;
				overflow: auto;
			}
			
		div.page_t323 {
			float: right;
			padding-left: 5px;
			width: 66%;
		}
		div.page_t41 {
			float: left;
			width: 33%;
		}
		div.page_t42 {
			float: left;
			padding-left: 5px;
			width: 20%;
		}
		div.page_t43 {
			float: left;
			padding-left: 5px;
			width: 32%;
		}	
		div.page_t44 {
			float: right;
			padding-left: 5px;
			width: 13.5%;
		}	
	td.footer {
		text-align: center;
		height: 20px;	
		background-color: #DADADA;
	}
	span#savingContentTitle {
		color: var(--donkerblauw); 
		font-size: 10pt; 
		margin-left: 25px;
		display: none;		
	}
	span#return_melding {
		color: var(--donkerblauw); 
		font-size: 10pt; 
		margin-left: 25px;
		display: none;		
	}
	/* RADIO buttons restyle */
/* The container */
.containerRadio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.containerRadio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--main-grey2);
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.containerRadio:hover input ~ .checkmark {
  background-color: var(--main-grey);
}

/* When the radio button is checked, add a blue background */
.containerRadio input:checked ~ .checkmark {
  background-color: var(--lichtblauw);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerRadio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.containerRadio .checkmark:after {
 	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--white);
}

	/* TABEL SPECIFICATIES */
	
	th.filter {
		text-align: left;
		background-color: var(--main-grey1);
	} 
	th.no_filter {
		text-align: left;
		background-color: var(--main-grey1);
	} 
	th.no_back {
		background-color: var(--white);
	} 
		th.no_back input {
			margin: 0px;
			padding: 2px;
		}
		th.filter select {
			padding: 0px;
			margin: 5px 0px 5px 0px;
			border: 0;
			width: 100%;
			height: 25px;
		}th.filter input {
			padding: 0px;
			margin: 5px 0px 5px 0px;
			border: 0;
			width: 100%;
			height: 25px;
		}
	div.rechten_structuur {
		transform: rotate(320deg);
		-ms-transform: rotate(320deg); /* IE 9 */
		-webkit-transform: rotate(320deg); /* Safari and Chrome */
		-o-transform: rotate(320deg); /* Opera */
		-moz-transform: rotate(320deg); /* Firefox */
		width: 30px;
		margin-bottom: 15px;
	}
	table#settings tr.dtrg-group {
		text-transform: uppercase;
	}
		table#settings tr.dtrg-group td{
			border-bottom: 0px;
		}
		table#settings tr.collapsed td{
			border-bottom: 1px solid var(--white);
		}

	div#gebruikers_wrapper thead th.overflow{
		/* background-position-y: 120px !important; */
		overflow: hidden;
		max-width: 5ch;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	div#gebruikers_wrapper thead th.normal{
		/* background-position-y: 120px !important; */
		max-width: auto;
	}
	div#gebruikers_wrapper thead .sorting{
		/* background-position-y: 120px !important; */
	}
	div.dataTables_wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		padding: 15px 15px;
		background-color: var(--white);
		box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
		border-radius: 8px;
	}
	div.page_space div.dataTables_wrapper {
		padding: unset;
		background-color: unset;
		box-shadow: unset;
		border-radius: unset;
	}
	.dataTables_wrapper .dataTables_scroll {
		width: 100% !important;
	}
	.div_newRow div.dataTables_wrapper {
		padding: unset;
		background-color: unset;
		box-shadow: unset;
		border-radius: unset;
	}

	/* Custom scrollbar */
	.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody::-webkit-scrollbar {
		width: 3px;
		height: 3px;
	}
	.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody::-webkit-scrollbar-track {
		background: #f1f1f1;
	}
	.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody::-webkit-scrollbar-thumb {
		background: var(--freshino-lightgrey);
	}
	.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
		background: var(--freshino-lightgrey);
	}

	.content_td>table:not(.display) {
		padding: 15px 15px;
		background-color: var(--white);
		box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
		border-radius: 8px;
	}

	div.dt-buttons {
		float: unset !important;
	}
		
		button.dt-button.active::before {
			content: "\f058      ";
			font-family: 'FontAwesome';
			font-size: 10pt;
			color: var(--lichtblauw);
			margin-right: 5px;
		}

		button.dt-button.disabled,
		div.dt-button.disabled,
		a.dt-button.disabled,
		input.dt-button.disabled {
			cursor: not-allowed !important;
		}

	/* voor de info met een totaal regel, mag die naar boven is de tabelID gevolgd door _info */
	div#show_stickers_laadbon_info {
		margin-top: -40px;
	}
	span#vo_aantal_err {
		display:inline-block; 
		color: var(--freshino-red-error); 
		font-size: 12pt; 
		font-weight: bold;
	}
	table.th_grey thead tr td{
		background-color: #A2B766;
	}
	td.bekijk_data_title {
		width: 90px;
		vertical-align: top;
	}
	td.bekijk_data_info {
		width: 170px;
		vertical-align: top;
	}
	table tfoot th.total, table tfoot td.total {
		text-align: left; 
		font-weight: bold !important;
	}

	
	td.details-control,td.details-control-showsticker {
		color: var(--freshino-red) !important;
	}

	/* VOOR RESULTAAT PAGINA */
/*	table.resultaat_table {
		width: 100%;
	}
	table.resultaat_table td {
		padding: 6px 0px;
	}
	table.resultaat_table tr:first-child td {
    font-weight: bold;
		border-bottom: 1px solid var(--main-groen);
		padding: 7px 0px;
	}
	table.resultaat_table tr:last-child td {
		font-weight: bold;
		text-align: right;
		padding: 7px 0px;
		border-top: 1px solid var(--main-grey);
	}
	td.subsorteerorder {
		color: blue;
	}
	table.resultaat_table td a {
		font-weight: bold;
		color: inherit;
	}

	table.resultaat_table tr.tr_hover:hover td {
		background-color: #f1f1f1;
	}
	div.div_newRow h2 a {
		font-weight: bold;
		color: inherit;
	}
*/

	/* MESSAGE SYSTEM */
	div.message_form p {
		margin-top: 5px;
		margin-bottom: 0px;
	}
	.melding_btn{
		background: #a8ceeb !important;
		padding: 6px 12px;
		margin-top: 10px;
		color: var(--white);
	}
	.new_melding{
			display: none;
			float: bottom; 
			width: 400px; 
			height: auto; 
			color: var(--white); 
			background-color: rgb(18,109,178, 0.7); 
			padding: 10px; 
			border-radius: 5px; 
			margin-top: 20px; 
			box-sizing: border-box;
			z-index: 10;
	}
			.new_melding h1{
					font-size: 8pt; 
					font-weight: bold; 
					color: var(--white);
					margin-top: 0px; 
					margin-bottom: 5px;
			}
			div.melding_header{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
			}
				div.melding_header i{
					cursor: pointer;
				}
	/* BUTTONS BOVEN IN DE PAGINA */
	div.info_top_page {
		float: left;
		width: 100%;
	}
	div.button_top_page {
		position: absolute;
		top: -37px;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		min-height: 32px;
		max-height: 50px;
		padding-inline: 15px;
  	}
		div.button_top_page_inner {
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			overflow-x: scroll;
			overflow-y: hidden;
			max-width: 100%;
			max-height: 100%;
			scrollbar-width: none;
		}
		div.button_top_page_inner::-webkit-scrollbar { display: none; }
		div.button_top_page_inner::-webkit-scrollbar { height: 0px; }
		
		#newIconsInfo {
			height: 35px;
			width: 35px;
			text-align: center;
			cursor: pointer;
			color: var(--freshino-red);
			margin-right: 20px;
			position: relative;
			/* left: -40px; */
		}

		/* #newIconsInfo::before {
			content: "Bekijk hier de nieuwe icoontjes";
			height: 100%;
			position: absolute;
			offset-anchor: right;
			right: 40px;
			top: calc(50% + 3px);
			transform: translateY(-50%);
			opacity: 1;
			color: var(--lichtblauw);
			font-weight: bold;
			-moz-animation: iconUpdateAnimation 0.4s ease-in 5s forwards;
			-webkit-animation: iconUpdateAnimation 0.4s ease-in 5s forwards;
			-o-animation: iconUpdateAnimation 0.4s ease-in 5s forwards;
			animation: iconUpdateAnimation 0.4s ease-in 5s forwards;
			-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
		}
			@keyframes iconUpdateAnimation {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
					content: "";
				}
			}
			@-webkit-keyframes iconUpdateAnimation {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
					content: "";
				}
			} */

			#newIconsInfo i {
				font-size: 25px;
				color: var(--lichtblauw);
				text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
			}
			#oldIcons {
				display: flex;
				flex-direction: column;
			}
				#oldIcons .oldIconsTitle {
					font-size: 22px;
					color: var(--freshino-red);
					font-weight: bold;
					width: 100%;
					/* border-bottom: 1px solid var(--freshino-red); */
					padding-bottom: 12px;
					margin: 10px 10px;
				}
				#oldIcons .oldIconsInfo {
					font-size: 16px;
					color: var(--freshino-red);
					width: 100%;
				}
				#oldIcons .oldIconsInner {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					height: 450px;
				}
					#oldIcons .oldIconsCategory {
						margin: 20px 10px;
						width: 100%;
						color: var(--freshino-red);
						padding-bottom: 6px;
						border-bottom: 1px solid var(--freshino-red);
						font-size: 18px;
						font-weight: bold;
					}
					#oldIcons .oldIconsRow {
						display: inline-flex;
						align-items: center;
						gap: 12px;
						color: var(--freshino-red);
						font-weight: bold;
						margin: 0 10px;
					}
						div#oldIcons .fa-stack {
							margin-left: -7px;
						}




		div.button_top_page_inner>form {
			display: flex;
		}
		div.button_top_page a, div#oldIcons a {
			margin-left: 4px;
			padding-left: 2px;
			padding-right: 2px;
			height: 35px;
			width: 35px;
			text-align: center;
			cursor: pointer;
			color: var(--freshino-red);
			position: relative;
			
			display: flex;
			align-items: center;
			justify-content: center;
			top: -4px;
			text-decoration: none;
		}
		div.button_top_page a:first-child {
			margin-left: 0;
		}
		div.button_top_page a:hover {
			transform: scale(1.05);
		}
		div.button_top_page .fa-stack {
			cursor: pointer;
		}
			div.button_top_page a.chosen-single {
				height: auto !important;
				width: auto !important;
			}
			div.button_top_page a i, div#oldIcons i, div.inslagorder_notes i {
				font-size: 25px;
				color: #C46363;
				text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
			}
			/* fa stack en kleuren */
			div.button_top_page .fa-stack-1x, div#oldIcons .fa-stack-1x{
				color: #C46363;
			}
			div.inslagorder_notes .fa-stack-1x {
				color: #EAAF5D;
			}
			div.button_top_page .fa-stack-2x, div#oldIcons .fa-stack-2x, div.inslagorder_notes .fa-circle {
				bottom: -4px;
				color: #971414;
				border-radius: 50px;
				font-size: 18px;
				width: 18px;
				height: 18px;
				display: flex;
				justify-content: center;
				align-items: center;
				text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
			}

			div.button_top_page .fa-stack-2x.fa-circle-arrow-left, div#oldIcons .fa-stack-2x.fa-circle-arrow-left,
			div.button_top_page .fa-stack-2x.fa-circle-arrow-right, div#oldIcons .fa-stack-2x.fa-circle-arrow-right,
			div.button_top_page .fa-stack-2x.fa-square-up-right, div#oldIcons .fa-stack-2x.fa-square-up-right,
			div.button_top_page .fa-stack-2x.fa-circle-plus, div#oldIcons .fa-stack-2x.fa-circle-plus{
				background-color: var(--white);
			}
			div.button_top_page .fa-stack.fa-left .fa-stack-2x, div#oldIcons .fa-stack.fa-left .fa-stack-2x{
				/* left: 0; */
				left: 16px;
			}
			div.button_top_page .fa-stack.fa-right .fa-stack-2x, div#oldIcons .fa-stack.fa-right .fa-stack-2x{
				left: 16px;
			}

			div.button_top_page .fa-stack .fa-stack-inner, div#oldIcons .fa-stack .fa-stack-inner {
				position: absolute;
				text-align: center;
				color: var(--white);
				text-shadow: none;
				font-size: 10px;
			}

			/* div.button_top_page .fa-stack .fa-stack-2x.circle {
				background-color: #971414;
				color: var(--white);
				font-size: 12px;
			} */
			/* div.button_top_page .fa-stack-fill {
				height: 18px;
				width: 18px;
				border-radius: 50px;
				color: var(--white);
				background-color: var(--freshino-red);
				font-size: 12px;
			} */
		i.contact_addressbook, i.ordertimeStarted {
			color: #5796C5;
			font-size: 24px;
		}
		i.orderlistVragen {
			font-size: 20px;
		}
		i.ordertimeStarted:hover, i.contact_addressbook:hover {
			color: var(--donkerblauw);
		}
		div.button_top_page_inner i.fa-envelope,
		#oldIcons .oldIconsInner i.fa-envelope,
		div.button_top_page_inner i.fa-thumbs-up.fa-stack-1x,
		div.button_top_page_inner i.fa-file-export,
		#oldIcons .oldIconsInner i.fa-file-export,
		div.button_top_page_inner i.fa-circle-plus.naw,
		div.button_top_page_inner i.fa-truck-arrow-right,
		#oldIcons .oldIconsInner i.fa-truck-arrow-right,
		div.button_top_page_inner i.fa-warehouse,
		div.button_top_page_inner i.fa-copy,
		#order_rows .fa-file-export
		{
			color: #5796C5;
		}
		div.button_top_page_inner i.fa-file-lines,
		#oldIcons .oldIconsInner i.fa-file-lines,
		div.button_top_page_inner i.fa-file,
		#oldIcons .oldIconsInner i.fa-file,
		div.button_top_page_inner i.fa-file-invoice,
		#oldIcons .oldIconsInner i.fa-file-invoice,
		div.button_top_page_inner i.fa-angle-left,
		#oldIcons .oldIconsInner i.fa-angle-left,
		div.button_top_page_inner i.fa-angle-right,
		#oldIcons .oldIconsInner i.fa-angle-right,
		div.button_top_page_inner i.fa-address-book
		{
			color: #777;
			/* color: #aeadad; */
		}
		div.button_top_page_inner i.fa-coins,
		div.button_top_page_inner i.fa-clipboard,
		div.button_top_page_inner i.fa-calculator,
		div.button_top_page_inner i.fa-box,
		div.button_top_page_inner i.fa-boxes-packing,
		div.button_top_page_inner i.invoice-yellow		
		{
			color: #EAAF5D;
		}
		div.button_top_page_inner i.fa-paperclip,
		#oldIcons .oldIconsInner i.fa-paperclip,
		div.button_top_page_inner i.fa-gear,
		#oldIcons .oldIconsInner i.fa-gear,
		div.button_top_page_inner i.fa-link,
		#oldIcons .oldIconsInner i.fa-link
		{
			/* color: #758292; */
			color: #aeadad;
		}
		div.button_top_page_inner i.fa-floppy-disk, 
		#oldIcons .oldIconsInner i.fa-floppy-disk,
		div.button_top_page_inner i.fa-rotate, 
		#oldIcons .oldIconsInner i.fa-rotate,
		div.button_top_page_inner i.fa-file-excel, 
		#oldIcons .oldIconsInner i.fa-file-excel,
		div.button_top_page_inner .fa-thumbs-up,
		#oldIcons .oldIconsInner .fa-thumbs-up,
		i.orderlistVragen
		{
			color: var(--main-groen);
		}		
		div.button_top_page_inner i.fa-lock, 
		#oldIcons .oldIconsInner i.fa-lock,
		div.button_top_page_inner i.fa-unlock, 
		#oldIcons .oldIconsInner i.fa-unlock
		{
			color: #D7830F;
		}		
		div.button_top_page_inner i.fa-print, 
		#oldIcons .oldIconsInner i.fa-print
		{
			color: #000;
		}		
		div.button_top_page img {
			cursor: pointer;
		}
		div.button_top_page img:hover, div.button_top_page button.zoom:hover {
			-moz-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			transform: scale(1.1);		  
		}
		div.button_top_page button.heropen {
			width: 35px;
			padding-left: 2px;
			padding-right: 2px;
			text-align: center;
		}
		div.button_top_page button.zoom {
			padding-left: 2px;
			padding-right: 2px;
			height: 35px;
			width: 35px;
		}
		div.button_top_page div.button_space {
			width: 2px;
			height: 22px;
			/* position: relative; */
			/* top: -4px; */
			/* background-color: #7575758c; */
			margin: 0 8px;
			/* border-radius: 20px; */
		}


	span.file-extension i {
		font-size: 25px;
		color: #777;
		text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	}
		span.file-extension i.text-only-fa {
			font-size: 12px;
			color: #fff;
			font-style: normal;
		} 
		span.file-extension i.fa-stack-2x {
			bottom: -4px;
			left: 12px;
			background-color: var(--main-geel);
			font-size: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
			text-shadow: unset;
			padding: unset;
			line-height: 10px;
			width: 23px;
			padding: 0px 1px 2px 1px;
			border-radius: 2px;
		}
		/* KLEUREN VOOR EXTENTIES */
		span.file-extension i.fa-stack-2x.extension-pdf { background-color: var(--freshino-red); }
		span.file-extension i.fa-stack-2x.extension-xlsx,span.file-extension i.fa-stack-2x.extension-xls { background-color: var(--main-groen); }
		span.price_error {
			color: var(--main-geel);
		}
		span.error_gegevens_rows {
			
			color: var(--main-orange);
		}
		.negative-number {
			color: red;
		}
	div.orderValuta {
		display: flex; 
		align-items: center; 
		justify-content: center; 
		border-radius: 15px; 
		height: 30px; 
		width: 30px; 
		text-align: center; 
		color: #000; 
		font-size: 16px; 
		background: var(--main-geel);
		border: 1px solid var(--main-geel);
		cursor: pointer;
	} div.orderValuta:hover { background: var(--main-geel-hover);}
	div.buttons_tab {
		display: flex;
		flex-wrap: wrap;
		background-color: var(--background-ed);
		width: auto;
		margin-top: 10px;
		padding: 0px 10px;
	}
	.open_tab_dropdown{
		position: relative;
	}
	.open_tab_dropdown_container{
		z-index: 9999;
		position: absolute;
		display: flex;
		flex-direction: column;
		gap: 8px;
		/* padding: 8px; */
		padding: 5px 0px;
		width: max-content;
		background-color: rgb(236, 236, 236);
	}
		.open_tab_dropdown_container button{
			padding: 1em;
			margin-right: 0 !important;
		}
	div.div_newRow div.buttons_tab {
		background-color: unset;
		margin: unset;
	}
		div.div_newRow div.buttons_tab button.open_tab {
			border: 1px solid #ddd;
			border-bottom: none;
		}
		div.div_newRow div.hidden_tab {
			/* border-top: 1px solid red; */
		}
	div.info_top_page {
		text-align: left;
	}
  	div.title_top_page {
		float: left;
	}
 	div.title_top_page h1 {
		float: left;
		margin-top: 5px;
		margin-bottom: 0px;
	}

	div.minimizeColored {
		float: left; 
		margin: 3px 6px 0px 0px; 
		height: 18px; 
		padding: 0px 3px 3px 3px; 
		background-color: var(--freshino-red); 
		color: #000000; 
		font-size: 13pt; 
		cursor: pointer;
	}
	div.page_t4 div.minimizeColored, div.pageOrder div.minimizeColored {		
		float: left; 
		display: none;
		align-items: center;
		margin: 3px 6px 0px 0px; 
		height: 18px;
		width: 18px; 
		background-color: var(--freshino-red); 
		color: var(--background-ed); 		
		font-size: 8pt; 
		cursor: pointer;
		border-radius: 2px;
	}
		div.page_t4 div.minimizeColored span.spnMinimize, div.pageOrder div.minimizeColored span.spnMinimize {
			margin: auto;			
		}
		div.page_t4 div.minimizeColored span.spnMaximize, div.pageOrder div.minimizeColored span.spnMaximize {
			margin: -1px auto auto;
		}
	
  fieldset.margin_button {
	margin-top: -5px;
  }
	
  div.melding_new {
		position: absolute; 
		margin-top: 10px;
		margin-left: -15px;
		z-index: 999999; 
		width: 168px; 
		min-height: 90px; 
		text-align: left; 
		padding: 12px 15px; 
		font-size: 10pt; 
		color: var(--white); 
		font-weight: normal;
		background-image: url('../images/melding_new.png'); 
		border-radius: 10px;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
		div.melding_new div.driehoek {
			position: absolute;
			margin-top: -36px;
			margin-left: 4px;
			width:0px;
			height:0px;
			border-top:solid 12px transparent;
			border-right:solid 12px transparent;
			border-bottom:solid 12px #07649E;
			border-left:solid 12px transparent;
			} 
  div.melding_order_afsluiten, div.melding_verkooporder_delfactuur, div.melding_verkooporder_delorder, div.melding_cmr_delcmr, div.melding_laadbon_del, div.melding_verkooporder_totalprijs {
		position: absolute; 
		top: 25px; 
		z-index: 9999; 
		width: 168px; 
		height: 90px; 
		text-align: left; 
		padding: 15px 6px 10px 6px; 
		font-size: 10pt; 
		color: var(--white); 
		background-image: url('../images/melding.png'); 
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
    	animation-fill-mode: both;
	}
	div.melding_order_afsluiten {
		margin-left: 218px; 
	}
	div.melding_cmr_delcmr {
		margin-left: -130px; 
		display: none;
		background-image: url('../images/melding2.png'); 
	}
	div.melding_laadbon_del {
		margin-left: 70px; 
		display: none;
		background-image: url('../images/melding2.png'); 
	}
	div.melding_verkooporder_delfactuur {
		margin-left: -16px; 
		display: none;
	}
	div.melding_verkooporder_delorder {
		margin-left: 150px; 
		display: none;
		background-image: url('../images/melding2.png'); 
	}
	div.melding_verkooporder_totalprijs {
		padding-top: 5px;
		margin-left: -120px; 
		margin-top: -95px; 
		height: 100px; 
		display: none;
		background-image: url('../images/melding3.png'); 
	}
	.tr_verkooporder_hover:hover {
		background-color: #C7C7C7;
	}
	span.invoice_warning {
		color: var(--lichtblauw); background-color: #f9f9f9; border: 1px solid var(--main-grey); padding: 5px; border-radius: 5px; display: block;
	}
	span.info_letop {
		color: var(--lichtblauw);
	}
	form#form_make_incoice i.fa-file-pdf {
		color: #971414;
		font-size: 28px;
		cursor: pointer;
	}

/* Toastr */
#toast-container > .toast {
	border-radius: 12px;
}
#toast-container .toast-info {
	background-color: var(--freshino-blue2);
	/* background-color: var(--freshino-orange); */
	/* background-color: var(--main-groen); */
}
.toast-message {
	display: flex;
    column-gap: 20px;
    align-items: center;
}
#toast-container.toast-bottom-right .toast-message br {
		display: none;
	}
button.toast-close-button {
	top: 50%;
}
.toast-container .fa-close {
	top: 50%;
	transform: translateY(-50%);
}

td {	
	font-size: 10pt;
}
i.line-logboek {
	color: var(--lichtblauw);
	font-size: 18pt;
}

/* voor de tabellen like datatable */
table.likedatatable {
	/* border-bottom: 1px solid var(--main-groen); */
}

/* voor de login */
div.login {
	width: 100vw;
	height: 100vh;
	background-color: var(--white);
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 60px;
	row-gap: 50px;
	padding: 2em 60px 2em 2em;
}
	.login h3 {
		font-family: var(--font-login);
		font-size: 24px;
	}
	div.login div.login_image {
		flex: 1;
		height: 100%;
		background-position: right center;
		background-size: cover;
		border-radius: 20px;
	}
	div.login div.login_form {
		position: relative;
		width: 100%;
		max-width: 520px;
		height: 100vh;
		background-color: var(--white);
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		padding-bottom: 100px;
	}
	
	div.login div.login_logo {
		width: 100%;
	}
	.login_form .login_logo img {
		margin-bottom: 60px;
		width: 100%;
		max-width: 360px;
	}
	.login_form .login_text {
		display: block;
		margin-bottom: 20px;
		font-family: var(--font-login);
		font-size: 14px;
	}
		/* div.login div.login_logo div.driehoek {
		 	position: absolute;
		 	height: 32px;
		 	width: 32px;
			background-image: url('../images/login_driehoek.png'); 
		 	margin: auto;
			margin-left: -85px;
			margin-top: 25px;
		} */
	.login_buttons {
		display: flex;
		flex-wrap: wrap;
		column-gap: 10px;
		row-gap: 8px;
		margin-top: 20px;
	}
		div.login button.button_login {
			flex-shrink: 0;
			border: 0px;
			border-radius: 10px;
			background-color: var(--freshino-red);
			color: var(--white);
			padding: 8px 14px;
			font-size: 16px;
    		font-family: var(--font-login);
		}
			div.login button.button_login:hover {
				background-color: var(--freshino-red-hover);
			}
			div.login button.button_login.forgot_password {
				background-color: var(--freshino-orange);
			}
			div.login button.button_login.forgot_password:hover {
				background-color: #b67a31;
			}

	.login_footer {
		position: absolute;
		bottom: 70px;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 520px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		column-gap: 10px;
		row-gap: 6px;
		color: #9d9d9d;
		border-top: 1px solid #9d9d9d52;
		padding-top: 8px;
		font-family: var(--font-login);
		font-size: 14px;
	}
		.login_footer a {
			color: #818181;
		}
		
	input.login_user,
	input.login_auth,
	input.login_password {
		position: relative;
		height: 45px;
		width: 235px;
		padding-left: 38px;
	}

	.input-wrapper-user, .input-wrapper-password, .input-wrapper-resetpassword, .input-wrapper-auth, .input-wrapper-googlecode {
		position: relative;
	}

	.input-wrapper-user::before, .input-wrapper-password::before, .input-wrapper-resetpassword::before, .input-wrapper-auth::before, .input-wrapper-googlecode::before {
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		color: var(--freshino-orange);
		position: absolute;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
		font-size: 18px;
		opacity: 0.7;
		pointer-events: none;
		z-index: 9999;
	}
	
	.input-wrapper-user::before { 
		content: "\f007";
	}
	.input-wrapper-password::before, .input-wrapper-resetpassword::before {
		content: "\f023";
	}
	.input-wrapper-auth::before {
		content: "\f2bd";
	}
	.input-wrapper-googlecode::before {
		content: "\f132";
	}

	.login_form_container {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
		/* .login_form_container input {
			margin-bottom: 10px;
		} */

	.input-wrapper-auth {
		display: none;
	}
	input.login_code {		
		width: 185px;
		letter-spacing: 10px;
		font-size:19px;
		padding-left: 43px;
	}

	
	div.login button.login_code_switch {
		display: none;
		border: 0px;
		border-radius: 10px;
		background-color: var(--freshino-red);
		color: var(--white);
		padding: 5px 14px;
		font-size: 14px;
	}
		div.login button.login_code_switch:hover {
			background-color: var(--freshino-red-hover);
		}

	input.minStyle {
		border: 0px;  
		border-bottom: 1px solid #ddd;  
		background-color: transparent;
		padding: 4px;  
		text-align: center;
		margin: 0px 10px;
	}
	/* LAADBON */
	div#nummerbord {
		background-image: url('../images/nummerbord_eu.png');
		width: 200px;
		height: 52px;
		padding: 8px 3px 10px 17px;
	}
		div#nummerbord input {
			background: transparent;
			border: 0px;
			-webkit-box-shadow: 0px 0px 0px;
			-moz-box-shadow: 0px 0px 0px;  
			box-shadow:  0px 0px 0px;  
			text-shadow: 0px 0px 0px;  
			-webkit-border-radius: 0px;  
			-moz-border-radius: 0px;  
			border-radius: 0px; 
			font-size: 15pt;
			font-weight: bold;
			text-transform: uppercase;
			margin-top: -5px;
			margin-left: 2px;
		}
	td.page_t41 {
		width: 35%;
	}
	td.page_t42 {
		width: 25%;
	}
	td.page_t43 {
		width: 25%;
	}
	td.page_t44 {
		width: 15%;
	}
	div.laadbon_info, div.laadbon_totalen, div.laadbon_opties, div.laadbon_toevoegen {
		display: flex;
		flex-direction: column;
	}		
		div.laadbon_info a {
			font-weight: normal;
		}
		div.laadbon_info h4 {
			padding-left: 3px;
			font-weight: bolder;
		}
		div.laadbon_info_smart {
			display: flex;
			align-items: center;
		}
		div.grondstof_info_smart,div.laadbon_info_smart2 {
			padding-top: 5px;
			display: flex;
			flex-direction: column;
		}
			div.grondstof_info_smart div#orderinfo {
				padding-top: 10px;
				line-height: 20px;
			}
		div.laadbon_info_smart div.small_info_buttons {
			width: 40px;
		}
		div.laadbon_info_smart div.small_info_buttons div.slide_smart_info {
			width: 25px;
			height: 25px;
			padding-top: 3px;
			text-align: center;
			background-color: var(--freshino-red);
			color: var(--white);
			border-radius: 3px;
			position: unset;
			margin-left: 5px;
		}
			div.laadbon_info_smart div.small_info_buttons div.slide_smart_info i {
				right: 0px;
			}
		div.laadbon_info_smart div.small_info_text {
		}
		div.scanButtons {
			width: 100%;
			display: flex;
			flex-direction: row;
			gap: 20px;
			padding-top: 10px;
		}
			div.scanButtons div, div.scanButtons div button {
				width: 100%;
			}

	div.laadbon_intern_info, div.laadbon_intern_totalen, div.laadbon_intern_opties, div.laadbon_intern_toevoegen {
		min-height: 240px;
	}
	div.laadbon_info_tablet, div.laadbon_totalen_tablet, div.laadbon_opties_tablet, div.laadbon_toevoegen_tablet {
		height: 80px;
		display: none;
	}

div.sticker_scan_page {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}
div.sticker_input_holder {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
}




/* pagina gegevens_order.php */

div.gegevens_order_info_form td.page_t31 {
	width: 33%;
}
div.gegevens_order_info_form td.page_t32 {
	width: 33%;
}
div.gegevens_order_info_form td.page_t33 {
	width: 33%;
}
div.gegevens_order_info, div.gegevens_order_info {
	min-height: 200px;
	margin-right: 10px;
}

sup.required {
	color: var(--freshino-red); /*red;*/
	padding-left: 2px;
}
h1 {
 	font-size: 12pt;
 	font-weight: normal;
	color: var(--freshino-red);
}
	h1.h1_arrows i{
		cursor: pointer;
		color: var(--lichtblauw);
		font-size: 13pt;
		margin-left: 5px;
	}
	h1.h1_arrows i:hover {
		color: var(--donkerblauw);
	}
	h1.h1_arrows i:nth-child(1){
		margin-left: 20px;
	}
h2 {
 	font-size: 11pt;
 	font-weight: normal;
	color: var(--freshino-darkgrey);
	margin-bottom: auto;
}
h3 {
 	font-size: 10pt;
 	font-weight: normal;
	color: #ce2929;
	margin: 0px;
}
h4 {
 	font-size: 10pt;
 	font-weight: normal;
	color: var(--donkerblauw);
	margin: 0px;
}
button {
	border: 0px;
	background-color: var(--white);
	cursor: pointer;
}
textarea {
	font-family: var(--font1);
	font-size: 9pt;	
	resize: vertical; 
}
img {
	border: 0px;
}
i.button_after_input {
	margin-top: -5px;
	margin-left: 8px;
	vertical-align: middle;
	cursor: pointer;
	font-size: 18px;
	color: var(--main-orange);
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #000000;
}
a img {
	cursor: pointer;
}
a:hover {
	text-decoration: underline;
}
a.legend_link {
	font-size: 11pt;
	font-weight: normal;	
}
.red {
	color: #ce2929;
	text-decoration: italic;
}
p.not_found {
 	font-size: 10pt;
	color: #ce2929;
}

.button_top_page_inner, .button_top_page_inner a:has(button){
	width: 100% !important;
}
button.button_green {
	/* min-width: 155px; */
	outline: none;
	border-width: 0px;
	border-radius: var(--radius-buttons);
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 500;
	max-width: 100%;
	text-align: center;
	text-decoration: none;
	transition: 0.1s ease-in-out;
	background-color: var(--freshino-red);
	cursor: pointer;
	padding: 6px 12px;
	vertical-align: middle;
	width: auto;
	color: var(--white);
}
button.button_green:hover {
	background-color: #991717;
	/* transform: scale(1.02); */
	transition: 0.1s ease-in-out;
}

button.button_green.disabled, button.button_green:disabled{
	border: 0px;
	background-color: #DDDDDD;
	color: #000;
	padding: 6px 12px;
	font-size: 11pt;
	margin-right: 5px;
	box-shadow: rgba(0, 0, 0, 0.075) 0px -3px 4px -4px;
}

button.button_green.disabled:hover {
	cursor: not-allowed;
	background-color: #999797 !important;
}
div.buttons_tab {
	display: inline-flex;
	column-gap: 5px;
	row-gap: 4px;
	background-color: var(--main-grey1);
	border-radius: 20px;
	padding: 4px;
	margin-bottom: 10px;
}
	button.button_grey {
		border: 0px;
		background-color: transparent;
		color: grey !important;
		padding: 6px 12px;
		font-size: 11pt;
		border-radius: 20px;
	}
	button.button_grey.tab_opened {
		background-color: var(--freshino-blue2);
		color: var(--white) !important;
	}
div.open_tab_dropdown_container button.button_grey {
	border-radius: 0px;
	padding: 10px 20px;
	text-align: left;
}
button.button_grey:hover, button.button_green.disabled:hover {
	/* background-color: var(--white); */
	background-color: #c0c0c0;
}
button.button_grey.tab_opened:hover {
	background-color: var(--freshino-lightblue);
}
button.button_loadmore {
	outline: none;
	border-width: 0px;
	box-sizing: border-box;
	font-weight: 500;
	max-width: 100%;
	text-align: center;
	text-decoration: none;
	transition: 0.1s ease-in-out;
	background-color: var(--donkerblauw);
	cursor: pointer;
	padding: 3px 20px;
	vertical-align: middle;
	width: auto;
	font-size: 12px;
	color: var(--white);
	border-radius: 20px;
}
button.open_tab {
	font-weight: 600;
	font-size: 10pt;
	/* color: #818181; */
	color: var(--freshino-text-blue) !important;
}
button.product_weergave_maat {
	border: 2px solid var(--main-grey);
	color: #000;
	padding: 5px;
	font-size: 13pt;
	height: 100px;
	width: 150px;
	margin: 10px;
}
button.product_weergave_maat:hover {
	background-color: var(--main-groen);
	color: var(--white);
}
legend {
	font-family: var(--font1);
	font-size: 12pt;
	color: #C3C3C3;
	font-weight: lighter;
}
fieldset {
	border: 1px solid #D9D9D9;
	border-radius: var(--radius-fieldset);
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 10px;
	background-color: var(--white);
}
	fieldset div.filter_text_fieldset {
		margin-bottom: -20px;
	}
span.span_error, span.chosen_notfilled_error {
	color: #ce2929;
	font-weight: normal;
	font-style: italic;
	margin-left: 8px;
}
span.valutaIcon, span.valutaIconWisselkoers {
	padding: 2px 7px;
	border-radius: 16px;
	background-color: var(--freshino-orange);
	color: var(--white);
}
span.valutaIconWisselkoers {
	background-color: var(--freshino-darkgrey);
	color: var(--white);
	display: none;
}
span.valutaIconWisselkoersPrice {
	display: none;
}
span.chosen_notfilled_error {
	display: block;
	margin-left: 0px;
	margin-bottom: 5px;
}
span.span_info {	
	color: #ce2929 !important;
	font-style: italic !important;
	font-weight: normal;
	margin-left: 8px;
}
span.onclick {
	color: #ce2929;
	cursor: pointer;
	margin-left: 10px;
}
span.font12 {
	font-size: 11pt;
}
span.font11 {
	font-size: 10pt;
}
input, textarea, select, checkbox {		
	padding: 8px;
	font-family: var(--font1);
	font-size: 10pt;
	outline: none;
	border: 1px solid var(--input-border-color);
	position: relative;
	overflow: hidden;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}

input, textarea, select, checkbox,
.chosen-container-single .chosen-single {
	border-color: var(--input-border-color);
	background-color: var(--input-bg-color);
	-webkit-border-radius: var(--radius-input);
	-moz-border-radius: var(--radius-input);
	border-radius: var(--radius-input);
}

input[type='color']{
	height: 40px !important;
}

.chosen-container-single .chosen-single {
	background-image: unset;
	border: 1px solid var(--input-border-color);
}
div.dataTables_wrapper table.dataTable input:not([type="search"]) {
    background-color: white;
	padding: 4px 10px;
}

textarea{
	resize: vertical; 
}
select>option {
	font-family: var(--font1);
	font-size: 9pt;
}

input.redBorder, select.redBorder, div.redBorder {
	border-top: 1px solid var(--freshino-red);
	-webkit-border-radius: var(--radius-input);  
	-moz-border-radius: var(--radius-input);  
	border-radius: var(--radius-input);  
}
input.no_back_border {
	padding: 4px;
}
input:read-only, textarea:read-only {
	opacity: 0.5 !important;
}
textarea {
	white-space: pre;
}
select.look_button {
	background-color: var(--main-groen);
	padding: 3px 16px;  
	font-family: var(--font1);
	font-size: 11pt;  
	outline: none;  
	-webkit-border-radius: 0px;  
	-moz-border-radius: 0px;  
	border-radius: 0px;  
	border: 0px solid var(--main-grey);  
	-webkit-box-shadow: 1px 1px 0px #f1f1f1;  
	-moz-box-shadow: 1px 1px 0px #f1f1f1;  
	box-shadow:  1px 1px 0px #f1f1f1;
	color: var(--white);
	cursor: pointer;
}
input[type=checkbox] {
	width: 20px;
	height: 20px;
	margin: 5px 5px 0px 5px;
	cursor: pointer;
}
input[type=radio] {
	width: 12px;
	height: 12px;
	margin: 5px 5px 0px 5px;
	cursor: pointer;
}

input.no_radio {
	display: none;
}
input[type=checkbox]:checked, input[type=radio]:checked {
	background-color: var(--main-lichtgroen);
}
input:focus, textarea:focus, select:focus, file:focus {
  -webkit-box-shadow: 0px 0px 5px #BFBFBF;  
  -moz-box-shadow: 0px 0px 5px #BFBFBF;  
	box-shadow: 0px 0px 5px #BFBFBF;  
}
input[type=range] {
  height: 15px;
  -webkit-appearance: none;
  width: 50px;	
 	background-color: #F9F9F9;
 	margin-bottom: 0px;
	padding: 8px;  
	font-family: MYRIADPROREGULAR;
	font-size: 11pt;  
	outline: none;  
	border: 0px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animation: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #673910;
  border-radius: 9px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 15px;
  background: #036652;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #673910;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animation: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #673910;
  border-radius: 9px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 15px;
  background: #036652;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animation: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #673910;
  border: 0px solid #000101;
  border-radius: 18px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #673910;
  border: 0px solid #000101;
  border-radius: 18px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 5px;
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 15px;
  background: #036652;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #673910;
}
input[type=range]:focus::-ms-fill-upper {
  background: #673910;
}
input.submit {
	cursor: pointer;
}
input.no_space,input.no_space_pad2, button.no_space, select.no_space, textarea.no_space {
	margin-left: 0px;
	width: 100%;
	box-sizing: border-box;
}
input.no_space_pad2 {
	padding-left: 4px;
	padding-right: 4px;
}
input.no_space80, button.no_space80, select.no_space80, textarea.no_space80 {
	margin-left: 0px;
	width: 80%;
}
input.no_margin, select.no_margin {
	margin-left: 0px;
}
input.no_space_100, button.no_space_100, select.no_space_100, textarea.no_space_100 {
	margin-left: 0px;
	width: 100%;
}
input.warning {
	border: 1px dashed var(--freshino-red);
}
textarea.bericht {
	font-size: 12pt;
}
textarea.full_width {
	width: 100%;
	box-sizing: border-box;
}
textarea.barcodescanner, div.barcodescanner {
	/* margin: 5px 0px; */
	/* border: 1px solid var(--main-groen); */
	/* background-color: transparent; */
	/* height: 190px; */
	/* overflow: auto; */
	/* box-sizing: border-box; */
}
button {
	background: transparent;
	cursor: pointer;
}
button.highlight_btn {
	/* border: 3px #9AD000 solid; */
}
input.active, button.active {
 	margin: 3px;
	padding: 8px;
	background-color: var(--freshino-red);
	cursor: pointer;
	outline: none;  
	color: var(--white);
	-webkit-border-radius: 3px;  
	-moz-border-radius: 3px;  
	border-radius: 3px;  
	-webkit-box-shadow: 1px 1px 0px #efefef;  
	-moz-box-shadow: 1px 1px 0px #efefef;  
	box-shadow:  1px 1px 0px #efefef;  
}
div.smart_device input.active, button.active {
	margin: unset;
}
/* button.active {
	margin: 0px;
	padding: 6px;
	border: none;
} */

select {
	-webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	background-image: url('../images/drop_down.png');
	background-repeat: no-repeat;
	background-position: right 5px center;
}
div.DTE_Body select{
	width: 100% !important;
}
div.ExtraRowsVO {
	width: 1200px !important;
}
	div.ExtraRowsVO div.DTE_Body div.DTE_Body_Content div.DTE_Field > label { width: 20%; }
	div.ExtraRowsVO div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input { width: 80%; }
	div.ExtraRowsVO div.DTE_Field_Type_textarea textarea {
		height: 300px !important;
		width: 100% !important;
	}
.chosen-container-single a {
	font-weight: normal;
}
.chosen-container-multi .chosen-choices {
	/* border-radius: var(--radius-input) !important; */
	/* border-bottom: 1px solid var(--freshino-bottom-border-color) !important; */
}
td.padding_row_textarea {
	padding-top: 10px;
	padding-bottom: 10px;
	vertical-align: top;
}
.melding_regel {
 	padding: 3px 0px 3px 10px;
	color: red; 
	display:none;
}
.melding_regel a {
	color: red; 
	font-weight: normal;	
}

/* MAIL */
div#alle_klant_teler {
	display: none; 
	margin-left: 10px; 
	height: 480px; 
	overflow-y: scroll; 
	margin-bottom: 10px; 
	margin-top: 10px;
}
tr.adresboek:hover {
	background-color: #f1f1f1;
}
tr.loginoptions:hover {
	background-color: #3F5EA1;	
}

/* ATTACH */
div.attach_container {
	border: 1px dashed var(--freshino-orange);
	border-radius: var(--radius-fieldset);
	width: 100%;
	color: var(--main-grey);
	font-size: 11pt;
	background-color: #F1F1F1;
	text-align:left;
	vertical-align:middle;
	padding: 10px;
	box-sizing: border-box;

}
	div.attach_container > a > button{
		background-color: var(--freshino-orange);
	}

/* HANDMATIG TABEL LIKE DATATABLES */
tr.tr_green {
	/* background-color: var(--main-groen); */
	background-color: #2A4B6E;
	color: var(--white);
	padding: 8px 4px;
}
	tr.tr_green td {
		padding: 8px 4px;
	}
table.likedatatables tr.row_hover_odd td {
	background-color: var(--white);
	height: 32px;
}
table.likedatatables tr.row_hover_even td {
	background-color: #f1f1f1;
	height: 32px;
}
	table.likedatatables tr.row_hover_odd:hover td, table.likedatatables tr.row_hover_even:hover td {
		background-color: var(--main-grey);
	}
div.divSubChild {
	/* padding-left:30px; 
	padding-bottom: 30px; */
	width: 100%;
	box-sizing: border-box;
}
	div.divSubChild table#orderPlanningRows tbody tr td,
	div.divSubChild table#orderRows tbody tr td {
		height: 25px;
	}
	div.divSubChild table#orderPlanningRows thead tr td,
	div.divSubChild table#orderRows thead tr td {
		height: 23px;
	}
	div.divSubChild table#orderPlanningRows tfoot td.total,
	div.divSubChild table#orderRows tfoot td.total {
		border-top:1px solid var(--main-groen) !important;
	}
	div.divSubChild h2 {
		color: #676866;
	}
	div.divFlex {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
		div.divFlex div.flexRow {
			justify-content: flex-start;
		}
		div.divFlex div.div100pr {
			width: 100%;
			flex-direction: row;
			gap: 20px;
		}
		div.divFlex div.noFlex {
			display: block;
		}
		p.lblP {
			margin: 10px 0px 2px 0px;
		}
	/* div.dom_wrapper {
		position: sticky;
		top: 0;
		padding-top: 10px;
		background: rgba(255, 255, 255, 1); 
		z-index: 8;
		display: flow-root;
	} */
	div.dom_wrapper {
		position: sticky;
		top: 0;
		padding-top: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: rgba(255, 255, 255, 1); 
		z-index: 8;
		align-items: center;
		width: 100%;
	}
/* STYLE VOOR DE DATEPICKER */
.datepickerdropdown {  
  background-color: #F1F1F1;
  border: 1px solid #888;
  border-radius:5px;
  padding: 10px;
  position: absolute;
  text-align: center;
	font-family: var(--font1);
	z-index: 99999;
}
.datepickerdropdown table {
  border-collapse: collapse;
  margin:auto;
}
.datepickerdropdown input {
  font-family: var(--font1);
  border:1px solid #888;
  border-radius: var(--radius-input);
  margin:1px;
  padding:2px 5px;
  text-align:center;
}
.datepickerdropdown table input[type=button] {
  width:2em;
  text-shadow: 0px 0px 0px var(--white);
}
.datepickerdropdown input[type=button] {
 	background-color: #C7C7C7;
  /*background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAElJREFUGFeNwwEGACEQQNF//6MlSRSRSMMkY86wdk+wj4e78zaz772Xcw6qioiw92atxZyTMQa9d1pr1FoppZBzJqVEjJEQwt8PXeRLuM/peRgAAAAASUVORK5CYII=);*/
}
.datepickerdropdown input[type=button]:hover {
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAFpJREFUGFdjePfuAgMIv3lzCoxfvTrK8OLFAYbnz/cyPHmyleHx480MDx+uY7h3bxnDnTsLGW7enMVw7dpkhqtXJzJcutTFcOFCG8O5c00MZ87UMZw6VUksBgDwaURPl4Jv2AAAAABJRU5ErkJggg==);
}
.datepickerdropdown input[type=button]:active {
  /*background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAFhJREFUGFdjOHWqkuHMmTqGc+eaGC5caGO4dKmL4erViQzXrk1muHlzFsOdOwsZ7t1bxvDw4TqGx483Mzx5spXh+fO9DC9eHGB49eoow5s3p8D43bsLpGAAr0NKhZpZNgcAAAAASUVORK5CYII=);*/
  padding:2px 4px 2px 6px;
}      
.datepickerdropdown input.selected {
 	background-color: var(--main-groen);
  border:1px solid var(--main-groen);
  /*background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAEBJREFUGFdj+P//P8P//5+A+CkQXwfiU0C8B4jXA/EiIJ4CxO1AXAnEOUAcB8SBQOwCxGZArAnE0kDMB8QMxGIAwnRFxCnPkL8AAAAASUVORK5CYII=);*/
}
.datepickerdropdown input[type=text] {
  background:var(--white);
  color:#000;
}
.datepickerdropdown input.today {
  border:1px solid red;
}
.datepickerdropdown input.othermonth {
  color:#aaa;
  border:1px solid #bbb;
}
.datepickershow img {
  border:0;
}
.monthDsp
{
width:80px;
font-size:9px;
}



div.hoverDiv {
	display: none;
	position: absolute;
	width: 300px;
	height: 200px;
	border: 5px solid var(--white);
	background-position: center;
	background-size: cover;
	transition: 0.3s ease-in-out;
	z-index: 99999;
}
i.hoverI {
	cursor: pointer;
}

i.hoverI:hover + div.hoverDiv {
	display: block;
	transition: 0.3s ease-in-out;
}

/* VOOR CMR PAGINA */
div.cmr_container {
 	float: left;
	width: 790px;
	height: 1150px;
	background-image: url('../images/cmr_background.jpg');
	background-color: #f1f1f1;
}
	div.cmr_container table thead td {
	 	font-size: 8pt;
	 	font-weight: bold;
	}
	div.cmr_container table tbody td {
	 	font-size: 8pt;
	}
	div.cmr_container div.edit_button {
		 margin-top: -18px;
		 width: 100%;
		 text-align: right;
	}
	div.cmr_container textarea {
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: 100%;
		border: 0px solid #AAA;
		font-size: 8pt;
		background-color: transparent;
	}
	div.cmr_container input {
		margin: 0px;
		padding: 0px;
		width: 90%;
		border: 1px solid #AAA;
		font-size: 8pt;
		background-color: transparent;
	}
	div.cmr_container button {
		margin: 0px;
		padding: 2px 10px;
		/* width: 90%; */
		font-size: 8pt;
	}
	div.cmr_container div.field1 {
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 69px;
	 	width: 340px;
	 	height: 74px;
	}
	div.cmr_container div.field0 {
	 	float: left;
	 	margin-left: 18px;
	 	margin-top: 77px;
	 	width: 150px;
	 	height: 24px;
	}
	div.cmr_container div.field2 {
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 25px;
	 	width: 340px;
	 	height: 74px;
	}
	div.cmr_container div.field16 {
	 	float: left;
	 	margin-left: 18px;
	 	margin-top: 25px;
	 	width: 340px;
	 	height: 76px;
	}
	div.cmr_container div.field3 {
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 25px;
	 	width: 340px;
	 	height: 39px;
	}
	div.cmr_container div.field17 {
	 	float: left;
	 	margin-left: 18px;
	 	margin-top: 25px;
	 	width: 340px;
	 	height: 39px;
	}
	div.cmr_container div.field4 {
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 27px;
	 	width: 340px;
	 	height: 39px;
	}
	div.cmr_container div.field18 {
	 	float: left;
	 	margin-left: 18px;
	 	margin-top: -40px;
	 	width: 340px;
	 	height: 102px;
	}
	div.cmr_container div.field5 {
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 28px;
	 	width: 340px;
	 	height: 38px;
	}
	div.cmr_container div.field6 {
	 	position: relative;
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 25px;
	 	width: 705px;
	 	height: 262px;
	 	overflow-y: scroll;	 	
	}
	div.cmr_container div.field13 {
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 27px;
	 	width: 340px;
	 	height: 142px;
	}
	div.cmr_container div.field14 {
	 	float: left;
	 	margin-left: 235px;
	 	margin-top: 24px;
	 	width: 170px;
	 	height: 20px;
	}
	div.cmr_container div.field19 {
	 	float: left;
	 	margin-left: 18px;
	 	margin-top: 27px;
	 	width: 340px;
	 	height: 75px;
	}
	div.cmr_container div.field19_space {
	 	float: left;
	 	margin-left: 18px;
	 	margin-top: 25px;
	 	width: 280px;
	 	height: 40px;
	}
	div.cmr_container div.field21 {
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 29px;
	 	width: 340px;
	 	height: 16px;
	}
	div.cmr_container div.field21_space {
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 29px;
	 	width: 280px;
	 	height: 16px;
	}
	div.cmr_container div.field22 {
	 	float: left;
	 	margin-left: 65px;
	 	margin-top: 28px;
	 	width: 220px;
	 	height: 80px;
	}
	div.cmr_container div.field23 {
	 	float: left;
	 	margin-left: 18px;
	 	margin-top: 28px;
	 	width: 220px;
	 	height: 80px;
	}
	div.cmr_container div.field24 {
	 	float: left;
	 	margin-left: 18px;
	 	margin-top: 48px;
	 	width: 220px;
	 	height: 57px;
	}
div.cmr_edit_field {
 	float: left;
 	margin-left: 30px;
	width: 400px;
	height: 1150px;
}

/* VOOR DE SLIDE BUTTONS CHECKBOXEN */

div.saveSwitchButton{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: .2em;
	margin: .4em 0;
}

div.saveSwitchButton .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

div.saveSwitchButton .switch input {display:none;}

div.saveSwitchButton .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--subrow-grey);
  -webkit-transition: .4s;
  transition: .4s;
}


div.saveSwitchButton .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: var(--white);
  -webkit-transition: .4s;
  transition: .4s;
}

div.saveSwitchButton input:checked + .slider {
  background-color: var(--lichtblauw);
}

div.saveSwitchButton input:focus + .slider {
  box-shadow: 0 0 1px var(--lichtblauw);
}

div.saveSwitchButtonOrange input:checked + .slider {
  background-color: orange !important;
}

div.saveSwitchButtonOrange input:focus + .slider {
  box-shadow: 0 0 1px orange !important;
}


div.saveSwitchButton input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
div.saveSwitchButton .slider.round {
  border-radius: 24px;
}

div.saveSwitchButton .slider.round:before {
  border-radius: 50%;
}
div.saveSwitchButton.smallItem .switch {
	width: 25px;
	height: 18px;
}
div.saveSwitchButton.smallItem .slider.round {
	border-radius: 18px;
}
div.saveSwitchButton.smallItem .slider:before {
	height: 10px;
	width: 10px;
}
div.saveSwitchButton.smallItem input:checked + .slider:before {
	-webkit-transform: translateX(8px);
	-ms-transform: translateX(8px);
	transform: translateX(8px);
}

div.fustEigenschapItem {
	width: 225px;
	display: flex;
	align-content: space-between;
	flex-direction: row;
}
	div.fustEigenschapItem div {
		display: flex;
		align-self: center;
	}
	div.fustEigenschapItem input {
		margin: 0 6px;
		text-align: left;
		width: 44px;
	}
		div.fustEigenschapItem div.saveSwitchButton .switch {
			width: 25px;
			height: 18px;
		}
		div.fustEigenschapItem div.saveSwitchButton .slider.round {
			border-radius: 18px;
		}
		div.fustEigenschapItem div.saveSwitchButton .slider:before {
			height: 10px;
			width: 10px;
		}
		div.fustEigenschapItem div.saveSwitchButton input:checked + .slider:before {
			-webkit-transform: translateX(8px);
			-ms-transform: translateX(8px);
			transform: translateX(8px);
		}

/* Voor de tabletools footer */
tr.footer_total td {
	/* background-color: var(--main-groen);
	color: var(--white); */
	height: 28px;
}

/* Melding voor updates */
div#melding_update { 	
	margin-left: 20px;
	color: #F9F9F9;
	opacity: 0.4;
	font-size: 10pt;
	transition: 0.1s ease-in-out;
}
div#melding_update:hover {
	opacity: 1;
	transition: 0.1s ease-in-out;
}
	div#melding_update a {
		color: #f9f9f9;
		text-decoration: none;
		font-weight: normal;
	}
	div#melding_update i {
		font-size: 14pt;
		margin-right: 5px;
		margin-left: 15px;
		-webkit-animation: blinkingBack 1s infinite;  /* Safari 4+ */
		-moz-animation: blinkingBack 1s infinite;  /* Fx 5+ */
		-o-animation: blinkingBack 1s infinite;  /* Opera 12+ */
		animation: blinkingBack 1s infinite;  /* IE 10+, Fx 29+ */		
		animation-iteration-count: 20;
		-moz-transition: all .9s ease-in;
		-o-transition: all .9s ease-in;
		-webkit-transition: all .9s ease-in;
		transition: all .9s ease-in;
	}

	div#melding_update div.text {
		float: left;
		position: relative;
	}
	div#melding_update div.text img {
		margin-right: 10px;
	}



div.graph_container{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
	div.graph_item{
		/* background-color: var(--main-grey2); */
		margin: 0 10px;
		padding: 10px;
	}

div.container{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-top: 64px;
}
	div.header_container{
		z-index: 9;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 64px;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}
		div#header_left{
			/* padding-left: 200px; */
			/* position: fixed; */
			width: 200px;
			/* height: 68px; */
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: var(--freshino-blue);
			box-sizing: border-box;
			z-index: 1;
		}
		div.header{
			width: calc(100% - 200px);
			/* width: 100%; */
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			/* height: 68px; */
			box-sizing: border-box;
			/* background-color: var(--main-groen); */
			background-color: var(--freshino-blue);
			/* margin-left: 200px; */
		}
			div#header_info_balk{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: row;
				/* padding-left: 200px; */
			}
				div#beta, div#bedrijfsnaam{
					margin-left: 20px;
					color: #F9F9F9;
					opacity: 0.4;
					/* font-size: 14pt; */
					font-size: 20px;
					font-family: var(--font-headers);
				}
				div#header_versie_info{
					margin-right: 20px;
					opacity: 0.4;
					text-align: right;
					/* color: var(--white); */
					color: #F9F9F9;
				}
				div#support_button{
					margin-left: auto;
					margin-right: 20px;
				}
					div#support_button i {
						margin-left: 8px;
					}

			#header_left>a {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			img.logo {
				width: 100%;
				height: 100%;
				max-height: 52px;
				object-fit: contain;
				padding: 12px 16px;
			}

	div.content_menu_container{
		position: relative;
		width: 100%;
		/* min-height: calc(100vh - 68px); */
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		transition: all 0.5s ease-in-out;
		background-color: #F9F9F9;
	}
		div.content {
			width: 100%;
			height: 100%;
			/* height: calc(100vh - 64px); */
			box-sizing: border-box;
			padding-left: 225px;
		}

div.rapport_verkooplijst_container{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: row;
}
	div.verkooplijst_container{
		width: 50%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	div.fruit_item{
		padding: 0 10px;
		box-sizing: border-box;
	}


div.menu_buttons_smart_container{
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	box-sizing: border-box;
	padding-bottom: 15px;
	/* margin-top: 200px; */
}


div.menu_hover{
	text-align: right;
	position: absolute;
	left: 0;
	top: 0;
}
	div.menu_hover i{
		margin-right: -10px;
		z-index: 9998;
		position: fixed;
		background: transparent;
		font-size: 18px;
		width: 20px;
		height: 100%;
	} 

div.colorbox_input_item{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
	padding: 5px 0;
	box-sizing: border-box;
}
	div.colorbox_input_item p{
		min-width: 150px;
	}

	/* verwijder zwarte balken bij colorbox */
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight {
	display: none;
}
#cboxContent {
	border-radius: 20px;
	overflow: hidden;
}

div.no_padding {
	padding: 0px;
}

div.hoverShowDelete i.fa-trash {
	color: var(--freshino-red);
	font-size: 16px;
}
div.hoverShowDelete:hover .deleteIMG{
	display: flex !important;
}

/* whatssapp icon */
.whatsappBlock i.pijl{
    color: #F9F9F9;
    font-size: 15px;
    right: 19px;
    position: absolute;
    top: 7px;
    cursor: pointer;
    text-align: center;
}
.whatsappBlock a{
	text-decoration: none;
}
.whatsappBlock i.whatsapp{
	color: #F9F9F9;
	font-size: 25px;
	cursor: pointer;
	text-align: center;
	padding-top: 8px;
	display: none;
	transition: all 0.3s ease-in-out;
}
.whatsappBlock a{
	color: var(--white);
	font-size: 25px;
	cursor: pointer;
	text-align: center;
}
.whatsappBlock{
	position: fixed;
	bottom: 0px;
	right: 100px;
	height: 20px;
	width: 50px;
	background-color: var(--donkerblauw);
	z-index: 1000;
	border-radius: 10px 10px 0 0;
	transition: all 0.3s ease-in-out;
	text-align: center;
	padding: 2px 0;
}
.whatsappBlock:hover{
	height: 40px;
	transition: all 0.3s ease-in-out;
	display: block;
}
.whatsappBlock:hover  i.pijl {
	display: none;
	transition: all 0.3s ease-in-out;
}
.whatsappBlock:hover i.whatsapp {
	display: block;
	transition: all 0.3s ease-in-out;
}

/* INKOOPFACTUUR STYLING */
div.inkoopfactuur_content {
	padding-top: 20px;
	display: flex; 
	flex-direction: row; 
	column-gap: 20px;
}
	div.inkoopfactuur_content div.leftRows{
		max-width: 1000px;
	}
	div.inkoopfactuur_content div.rightPdf{
		width: 100%;
		background-color: #2a2a2e;
	}
		div.inkoopfactuur_content div.rightPdf embed {
			width: 100%;
			height: calc(100% - 20px);
		}
/* LOCATIE INDELING STYLING */
div.indelingContainer{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
	div.indelingIndex{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}
		div.indelingIndexItem{
			width: 100%;
			text-align: center;
			padding: 5px 0px;
			border-bottom: 1px solid #C3C3C3;
		}
	div.indelingRow{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}
		div.indelingRowItem{
			width: 100%;
			text-align: center;
			margin-top: 10px;
			padding: 10px 0px;
			box-sizing: border-box;
			cursor: pointer;
		}
			div.indelingRowItemStatus{
				display: flex;
			}
		div.indelingHover{
			transition: all 200ms ease-in-out;
		}
		div.indelingHover:hover{
			background-color: #BFBFBF !important;
		}

/* MESSAGE SYSTEM */
div.inbox_icon{
	display: flex;
	align-items: center;
	cursor: pointer;
}
div.inbox_icon i{
	font-size: 24px;
	color: var(--main-grey);
}
div#msgCounter{
	background-color: var(--freshino-red);
	width: 20px;
	height: 20px;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--white);
	margin-left: -5px;
	margin-top: 5px;
}
div.inbox_container{
	position: absolute;
	top: 68px;
	right: 0;
	width: 100%;
	max-width: 300px;
	max-height: 400px;
	overflow-y: scroll;
	padding: 20px;
	background-color: var(--white);
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.3);
	z-index: 10;
	display: none;
} 
	div.inbox_container::-webkit-scrollbar{
		width: 5px;
	}
	div.inbox_container::-webkit-scrollbar-track{
		box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
		border-radius: 10px;
	}
	div.inbox_container::-webkit-scrollbar-thumb{
		border-radius: 5px;
		box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
	}
	div.inbox_item{
		width: 100%;
		padding: 10px 0;
		border-bottom: 1px solid var(--main-groen);
		transition: transform 150ms ease-in-out;
	}
		div.inbox_item:hover{
			transform: scale(1.02);
		}
		div.inbox_item_head{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
			div.inbox_item_title{
				font-weight: bold;
				font-size: 18px;
				color: var(--main-groen);
				text-transform: uppercase;
			}
			div.inbox_item_subject{
				font-size: 14px;
			}
			div.inbox_item_head_right{
				cursor: pointer;
				display: flex; 
				justify-content: center;
				align-items: center;
				gap: 8px;
			}
				div.inbox_item_head_right i{
					color: var(--freshino-red);
				}
		div.inbox_item_text{
			font-size: 14px;
			color: #C7C7C7;
			margin-top: 10px;
			word-break: break-all;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		  
		}
	div.inbox_action_container{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
		div.inbox_action_item{
			padding: 8px 0px;
		}
			div.inbox_action_item i{
				font-size: 26px;
				color: var(--main-grey);
				cursor: pointer;
				transition: color 200ms ease-in-out;
			}
				div.inbox_action_item i:hover{
					color: rgb(180, 180, 180);
				}
	div.inbox_item_text p {
		padding: 0;
		margin: 0;
	}
/* FONT AWESOME */
.fa-circle-plus, .fa-circle-info, .fa-circle-minus {
	font-size: 22pt;
	color: var(--lichtblauw);
	float: right;
	padding-right: 2px;
	transition: all 0.3s ease-in-out;
}
.fa-circle-info.table_acc_sale {
	font-size: 18px;
	position: absolute;
	margin-left: 10px;
}
.fa-circle-right{
	font-size: 26px;
	padding-left: 5px;
	color: var(--lichtblauw);
	transition: all 300ms ease-in-out;
}
.fa-trash-can{
	font-size: 22px;
	color: #ce2929;
	cursor: pointer;
}
.fa-xmark{
	font-size: 26px;
	padding-left: 5px;
	color: #ce2929;
	transition: all 300ms ease-in-out;
}
div#dataNotitieOrder i.fa-xmark {
	font-size: 16pt;
}
div#dataNotitieOrder tr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--main-grey2);
	padding: 4px 4px;
	transition: all .1s ease;
}
div#dataNotitieOrder tr:hover {
	background-color: #f8f8f8;	
	transition: all .1s ease;
}
div#dataNotitieOrder i.fa-pen {
	font-size: 11pt;
	margin-right: 6px;
	top: -2px;
	position: relative;
}
.fa-xmark:hover, .fa-trash-can:hover{
	color: var(--freshino-red);
}
.fa-circle-plus:hover, .fa-circle-info:hover, .fa-circle-right:hover {
	color: var(--donkerblauw);
} 
span.selectedRowKoppel {
	color: var(--lichtblauw);
	font-weight: bold;
}
span.selectedRowKoppel::before {
	content: "\f058      ";
	font-family: 'FontAwesome';
	font-size: 10pt;
	color: var(--lichtblauw);
}
i.linkedKoppelSticker{
	color: var(--lichtblauw);
	font-size: 10pt;
	margin-left: 5px;
}
i.i_bullet_green, i.i_bullet_blue, i.i_bullet_orange, i.i_bullet_yellow, i.i_bullet_black, i.i_bullet_purple, i.i_bullet_red, i.i_bullet_white {
	/* -webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.3));
	filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.3)); */
	font-size: 11pt;
	width: 20px;
	margin-top: 4px;
	/* text-shadow: 0px 0px 4px var(--main-grey); */
}
i.firstColumnWidth {
	width: 28px;
}
i.i_bullet_green { color: #81C000; }
i.i_bullet_blue { color: #42A6E2; }
i.i_bullet_orange { color: #FF9743; }
i.i_bullet_yellow { color: #FFC84D; }
i.i_bullet_black { color: #737476; }
i.i_bullet_purple { color: #C080C2; }
i.i_bullet_red { color: #E94D33; }
i.i_bullet_white { color: #CDCFD0; }
i.i_bullet_error { 
	color: #FFCC42; 
	font-size: 11pt;
	width: 20px;
	float: left; 
	margin-top: 2px; 
	margin-right: 3px;
}
i.i_bullet_noshadow {
	text-shadow: unset;
}
div.inkoop_rows_verpakking i {
	/* padding-right: 4px; */
	/* font-size: 11pt; */
	/* width: 20px; */
	/* text-align: center; */
}
div.inkoop_rows_verpakking i.fa-plus { color: #42A6E2; }
div.inkoop_rows_verpakking .dataTables_scroll i.fa-check { color: #81C000; }
div.inkoop_rows_verpakking i.fa-check-double, table#inkoopgegevensrows i.fa-check-double { color: #81C000; }
div.inkoop_rows_verpakking i.fa-exclamation { color: #FFC84D; }

div.vragenlijst_color {
	width: 35px;
	height: 35px; 
	border-radius: 35px;
	float: left;
	margin: 5px 10px 5px 0px;
	border: 3px solid var(--white);
	cursor: pointer;
}
div.vragenlijst_color_green { background-color: #81C000; }
div.vragenlijst_color_orange { background-color: #FF9743; }
div.vragenlijst_color_red { background-color: #E94D33; }
div.vragenlijst_color_selected { border: 3px solid #000; }
td.vragenlijst_hist {
	font-style: normal;
	color:#111111;
	padding-left: 5px;
}
/* SECTIONS STYLING */
.section {
	margin-bottom: 14px;
}
.section_header * {
	box-sizing: border-box;
}
.section_header {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: #f5f5f5;
	color: #000000;
	width: 400px;
	padding: 6px 18px;
	box-sizing: border-box;
	cursor: pointer;
	border-radius: 4px;
	border-bottom: 2px solid #bebebe;
}
	.section_title {
		width: 100%;
		font-size: 14px;
		letter-spacing: 1px;
	}	
		.section_title i {
			color: #222E3D;
			font-size: 16px;
			margin-right: 14px;
		}
	.section_expand_icon {
		position: absolute;
		top: 50%;
		right: 22px;
		transform: translateY(-50%);
	}
		.section_expand_icon i {
			color: #222E3D;
			font-size: 16px;
		}
.section_content {
	transition: all .5s ease;
	height: 0px;
	overflow: hidden;
	margin: 0 10px;
	box-sizing: content-box;
} .section_content.open {
	transition: all .5s ease;
	height: auto;
	padding: 10px 0;
}


#weight_fust_title, #weight_pallet_title{
	max-width: 160px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* Search panes 0 onderaan de resultaten weggehaald door deze display: none; */
div.dts div.dts_label{
	display: none !important; 
}

/* Level 0 - Top-level group styling */
.level-0-group {
    font-weight: bold;
    cursor: pointer;
}

/* Level 1 - Subgroup styling */
.level-1-group {
    background-color: #F1F1F1;

}

.lever-1-group b {
	margin-left: 60px;
}

/* Row hiding class */
.hidden {
    display: none;
}



/* voor controle view */
table.controleView td.th_view, table.controleView td.td_view {
	padding: 10px;
	box-sizing: border-box;
	background-color: #42A6E2; 
	vertical-align: middle;
	text-align: center;
}
table.controleView td.th_view {
	writing-mode: vertical-lr; 
}
table.controleView td.th_trigger, table.controleView td.td_trigger {
	padding: 10px;
	box-sizing: border-box;
	background-color: #C080C2; 
	vertical-align: middle;
	text-align: center;
}
table.controleView td.td_view_install {
	color: #42A6E2;
}
table.controleView td.td_trigger_install a{
	color: #C080C2;
}
table.controleView td.th_trigger {
	writing-mode: vertical-lr; 
}

/* BALLON info */
div.scan_balloon {
	z-index: 99999; 
	display: none; 
	position: fixed; 
	border-radius: 50%; 
	width: 250px; 
	min-height: 250px; 
	background-color: #7E9C29; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	top: 50%; 
	border: 5px solid #fff;
}
	div.scan_balloon div.info_baloon {
		height: 100%; 
		min-height: 250px; 
		width: 100%; 
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
		div.scan_balloon div.info_baloon span {
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}		
		div.scan_balloon div.info_baloon span.info_amount {
			font-size: 42pt;
			font-weight: bold;
			width: 160px;
		}
		div.scan_balloon div.info_baloon span.info_size {
			font-size: 24pt;
			margin-top: -10px;
			width: 220px;
		}
		div.scan_balloon div.info_baloon span.info_ras {
			font-size: 12pt;
			width: 220px;
		}
		div.scan_balloon div.info_baloon span.info_fust {
			font-size: 12pt;
			width: 220px;
		}
		div.scan_balloon div.info_baloon span.info_pallet {
			font-size: 12pt;
			width: 200px;
		}
		div.scan_balloon div.info_baloon span.info_class {
			font-size: 12pt;
			width: 180px;
		}
		div.scan_balloon div.info_baloon span.info_other_rows {
			margin-top: 10px;
			font-size: 9pt;
		}
		div.scan_balloon div.info_baloon span.info_error {
			text-align: center;
			overflow: unset;
			white-space: unset;
			text-overflow: ellipsis;
			font-size: 16pt;
			color: #fff !important
		}


.globalFilterHolder{
	background-color: var(--white);
	border-radius: 8px;
	padding: 16px 20px;
}
.globalFilterHolder h2{
	padding-bottom: 10px;
}
/* .graphsHolder{
	display: flex;
	flex-direction: row;
	column-gap: 50px;
	width: 100%;
	background-color: var(--white);
	border-radius: 8px;
	padding: 10px;
	height: 500px;
} */
	.graphsHolder h2{
		margin-right: 10px;
	}
	.graphsHolder .verkoopresultaatHeader i{
		font-size: small;
		padding: 0;
		margin: 0;
		vertical-align: middle;
		line-height: 0.5;
	}
	.graphsHolder .graphHolder.verkoopresultaatHeader{
		display: flex;
		flex-direction: row;
		vertical-align: middle;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	.graphsHolder .verkoopresultaatHeader .Filterbar{
		display: ruby;
	}
	.graphsHolder .hoverToShow_icon div i{
		line-height: normal;
	}
	.graphsHolder .hoverToShow_icon{
		display: flex;
		flex-direction: row;
	}
	.graphsHolder .graphHolder{
		display: flex;
		flex-direction: column;
		width: 100%;
		/* max-width: 500px; */
	}
	.graphsHolder.margeData{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
		.graphsHolder.margeData #margeDataDiv{
			display: flex;
			flex-direction: row;
			width: 100%;
			margin-top: 10px;
			gap: 20px;
		}
			.graphsHolder.margeData #margeDataDiv div{
				display: flex;
				flex-direction: column;
				border-radius: 8px;
				background-color: var(--white);
				/* box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); */
				border: 1px solid #f1f1f1;
				width: 25%;
				padding: 10px;
			}
				.graphsHolder.margeData #margeDataDiv div p.betekenissen{
					margin: 0;
					padding:0;
				}
				.graphsHolder.margeData #margeDataDiv div p.margeDataText{
					font-size: 24px;
					font-weight: bold;
					padding: 0;
					margin: 0;
				}
				.graphsHolder.margeData #margeDataDiv div i{
					height: 100%;
					line-height: unset;
					color: var(--lichtblauw);
				}
.hoverLegenda {
	display: none;
	flex-direction: column;
	border-radius: 8px;
	background-color: var(--white);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	margin: 15px;
	width: 23%;
	padding: 10px;
	position: absolute;
}

.hoverLegenda p{
	display: flex;
    flex-direction: row;
	padding: 0;
	margin: 0;
}
.hoverLegenda div{
	display: flex;
	flex-direction: column;
}
	.hoverLegenda div i{
		color: var(--lichtblauw);
	}

.hoverToShow_icon i:hover + .hoverLegenda {
	display: flex;
}
.hoverToShow_icon i:hover{
	cursor: pointer;
}
.hoverToShow_icon i{
	z-index: 5;
}
.hoverToShow_icon div{
	right: 0;
	z-index: 1;
}
.hoverToShow_icon{
	display: flex;
	justify-content: start;
}
	/* .graphsHolder .graphHolder .dashboard_verkooptotaal_chart{
		height: 100px;
		width: 100px;
	} */
		.graphsHolder .graphHolder .Filterbar, .itemHolder .Filterbar{
			display: flex;
			flex-direction: row;
			height: 50px;
			/* align-self: center; */
			padding-bottom: 20px;
			/* justify-content: space-between; */
			column-gap: 10px;
			align-items: center;
		}
			.graphsHolder .graphHolder .Filterbar .title{
				font-weight: bold;
				font-size: 14px;
			}
			.graphsHolder .graphHolder .Filterbar input[type="date"]{
				/* border: 0; */
				/* border-bottom: 1px solid var(--main-lichtgroen); */
				padding: 3px 5px;
				/* background: transparent; */
			}
.dashboard_verkooptotaal_chart{
	max-width: 400px; 
	max-height: 400px;
}

.negative-number {
	color: red;
}



/* DEBUG CONSOLE */
div.div_newRow:has(.debug-body){
	margin: 0;
}
.debug-console {
    background: #1e1e1e;
    color: #f1f1f1;
    font-family: Consolas, monospace;
    font-size: 13px;
    border-radius: 6px;
	height: 100%;
    overflow: hidden;
	display: flex;
	flex-direction: column;
}
	.debug-header {
		background: #111;
		color: #0f0;
		padding: 8px 12px;
		font-weight: bold;
		border-bottom: 1px solid #333;
	}
	.debug-body {
		max-height: 400px;
		overflow-y: auto;
		padding: 10px;
		align-self: stretch;
	}
		.debug-line {
			padding: 4px 0;
			border-bottom: 1px solid #333;
		}
		.debug-line:last-child {
			border-bottom: none;
		}
			.debug-type {
				color: #e67e22;
				margin-right: 8px;
			}
			.debug-message {
				color: #e74c3c;
				margin-right: 8px;
			}
			.debug-file {
				color: #aaa;
			}

/* RESPONSIVE DESIGN */
@media screen and (max-width: 1700px) {
	div.page_t31 {
		width: 100%;
	}
	div.page_t32, div.page_t33 {
		width: 50%;
		box-sizing: border-box;
	}
	div.page_t32 {		
		padding: 0px;
	}
}

@media screen and (max-width: 1500px){

	/* Zodat de button_top_page niet overlappen met de paginatitel */
	div.content_td {
		margin-top: 50px;
	}

	div.login {
		column-gap: 40px;
		row-gap: 30px;
        padding: 10px 40px 10px 10px;
	}
	div.login div.login_form {
		max-width: 440px;
	}

}
@media screen and (max-width: 1200px){	
	div.headerContFieldset div.page_t3:first-child{
		flex-basis: 100%;
	}
	div.headerContFieldset div.buttonLoadMore {
		display: flex;
		margin-left: calc(50% - 50px);
		width: 100%;
	}
	div.headerContFieldset div.page_t3:nth-child(n+2) {
		display: none;
	}

	div.login div.login_form {
		max-width: 360px;
	}
	div.login .login_logo img {
		max-width: 280px;
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 1100px){

	table.dataTable thead th, table.dataTable thead td {
		white-space: nowrap;
	}

}

@media screen and (max-width: 1100px){
	div#tabs_grondstof, div#tab_orderrow, div#tabs_voorraad, div#tabs_verladen, div#tabs_fabriek_rot {
		margin-top: 0px !important;
	}
	div.dashboard_item {
		/* width: 100%; */
		max-width: 100%;
	}
}
@media screen and (max-width: 1000px) {
	div.dom_wrapper {
		flex-direction: column;
	}
	div.dataTables_wrapper>div.dt-buttons {		
		/* flex-shrink: 0;
		overflow-x: scroll;
		width: 100%;
		max-width: 100%;
		scrollbar-width: thin;
		-ms-overflow-style: none; */
	}
}
@media screen and (max-width: 900px) {
	div.page_t31, div.page_t32, div.page_t33 {
		width: 100%;
		box-sizing: border-box;
		padding: 0px;
	}
}
@media screen and (max-width: 780px) {
	div.content_td {
        margin-top: 60px;
    }
	div.content {
		padding-left: unset !important;
		padding: 0.8% 0;
	}
	div.header {
		margin-left: unset !important;
	}

	#container #img_logo_header {
		display: none;
	}
	#container #header_left {
		height: 40px;
		vertical-align: inherit;
	}
	#container #header_versie_info {
		width: 80%;
		height: 20px;
		margin-top: 5px;
	}
	#container #support_button {
		margin-top: 0px;
	}
	#container #support_button img {
		height: 30px;
		
	}
	#container #header_driehoek {
	 	margin-top: 20px;
	}
	#container #menu_buttons {
		display: block;
		margin-right: 6px;
	}
	#container legend {
		font-size: 12pt;
	}
	div.laadbon_info_tablet, div.laadbon_totalen_tablet, div.laadbon_opties_tablet, div.laadbon_toevoegen_tablet {
	 	display: block;
	}
	div.smart_device div.laadbon_info_tablet {
		display: inline;
	}
	div.laadbon_info, div.laadbon_totalen, div.laadbon_opties, div.laadbon_toevoegen {
	 	display: none;
	}
	td.page_t43 {
		width: 24%;
	}
	td.page_t44 {
		width: 16%;
	}
	div.laadbon_melding_opslaan {
		display: none;
	}
	
	#container div#menu_buttons, table.page_table div#header_info_balk {
		display: none;
	}
	div#header_info_balk {
		display: none;
	}
	td.header {
		height: 20px;
	}
	#container #header_left {
		display: none;
	}
	#container #td_menu {
		display: none;
  	}
	#container #td_menu.opened {
		display: block;
		max-width: 100%;
	}
		#container #td_menu.opened .menu {
			max-width: 100%;
			width: 200px;
		}
	#container div#menu_buttons_smart {
		display: block;
		float: left;
		width: 100%;
		box-sizing: border-box;
	}
	#td_menu_inner {
		position: absolute;
		z-index: 1999;
	}
	/* div.content_title {
		margin-top: 5px;		
		margin-bottom: 10px
	} */
	div.top_page_title i.fa-circle-arrow-left {
		padding-left: 8px;
		/* margin-top: 5px; */
	}
	
	div.button_top_page {
		width: 100%;
		top: -44px;
		margin-top: 0px;
        margin-bottom: 5px;
        display: block;
        white-space: nowrap;
        flex-shrink: 0;
        overflow-y: hidden;
        overflow-x: scroll;
        max-width: 100%;
        scrollbar-width: thin;
        -ms-overflow-style: none;
        margin-left: auto;
	}
		div.button_top_page button:not(:last-child) {
			margin-right: 10px;
		}

	/* div.content_td div.space_content_vert {
		margin-left: -20px;
		margin-right: -20px;
		height: 12px;
	} */
	td.bekijk_data_title {
		width: 100%;
		display: inline-block;
		color: var(--freshino-red);
	}
	td.bekijk_data_info {
		width: 100%;
		display: inline-block;
	}
	div.div_newRow {
		float: left;
		margin: 0px;
		width: 100%;
	}
	table.table_for_smart tr td {
		display: inline-block;
		width: 100%;
	}
	div.header{
		width: 100%;
		height: 100%;
		z-index: 9999;
		justify-content: flex-start;
		align-items: flex-start;
		padding-top: 19px;
	}
	div.header_container{
		height: auto;
	}
}

@media only screen and (max-width: 800px) {

	div.login {
        column-gap: 20px;
        row-gap: 20px;
        padding: 10px 20px 10px 10px;
	}

	div.login .login_logo img {
        max-width: 240px;
	}

}

@media screen and (max-width: 600px){

	div#td_menu {
		height: 100%;
	}

	/* Mobile responsive menu */
	div.menu_item {
		font-size: 11pt;
	}
		div.menu_div2 {
			font-size: 11pt;
		}
			div.menu_div2 a.menu_item {
				padding: 10px 16px;
			}

}

@media screen and (max-width: 480px) {
	.input-wrapper-user, .input-wrapper-password {
		display: none;		
	}
	.input-wrapper-auth {
		display: block;
	}
	div.login button.login_code_switch {
		display: block;
	}	
	div.headerContFieldset fieldset table td {
		display: block;
	}

	div#div_td_menu_smart td.menu_item {
		padding: 0 5px;
	}

}

.generate_password {
	padding-right: 10px;
	font-size: 15px;
	color: var(--white);
	cursor: pointer;
}


.dashboard_chart_kilo{
	width: 100%;
}

.margeInfoButtons {
	padding: 15px;
}
	.margeInfoButtons a{
		outline: none;
		border-width: 0px;
		border-radius: 3px;
		box-sizing: border-box;
		font-size: 11pt;
		font-weight: 500;
		max-width: 100%;
		text-align: center;
		text-decoration: none;
		transition: 0.1s ease-in-out;
		/* background-color: var(--main-groen); */
		background-color: var(--freshino-red);
		cursor: pointer;
		min-height: 28px;
		/* line-height: 32px !important; */
		padding: 5px 20px;
		vertical-align: middle;
		width: auto;
		font-size: 14px;
		color: var(--white);
	}
	.margeInfoButtons a:hover{
		background-color: #991717;
		transition: 0.1s ease-in-out;
	}
	.margeInfoButtons a.currentPage{
		background-color: var(--main-grey1);
		color: black;
	}
	.margeInfoButtons a.currentPage:hover{
		background-color: var(--main-grey);
		color: black;
	}
	

/* Dashboard Responsive */
@media screen and (max-width: 1350px) {
	div.dashboard_item.dashboard_info {
		flex-direction: column;
	}
		div.dashboard_item .dashboard_home_info, div.dashboard_item .dashboard_contact_info {
			width: 100%;
		}
	div.dashboard_home_info {
		margin-bottom: 30px;
	}
	div.dashboard_contact_info:before {
		content: "";
		position: absolute;
		width: 95%;
		height: 2px;
		left: 50%;
		top: -15px;
		transform: translateX(-50%);
		background-color: var(--main-grey2);
	}
}
@media screen and (max-width: 1200px){
	div.dashboard_row.stats {
		flex-wrap: wrap;
	}
		div.dashboard_row.stats .dashboard_item {
			width: calc(100% / 2 - 14px);
		}
	div.dashboard_chart_container {
		flex-direction: column;
	}
		div.dashboard_chart_omzet, div.dashboard_chart_kilo {
			width: 100% !important;
		}
}
@media screen and (max-width: 950px){
	div.dashboard_row.intro {
		flex-direction: column;
	}
	div.dashboard_row.intro .dashboard_item {
		width: 100%;
	}
	div.dashboard_row.stats {
		flex-wrap: wrap;
	}
		div.dashboard_row.stats .dashboard_item {
			width: calc(100% / 2 - 14px);
		}
}
@media screen and (max-width: 650px){
	div.dashboard_row.stats {
		flex-direction: column;
	}
	div.dashboard_row.stats .dashboard_item {
		width: 100%;
	}

    div.login {
        padding: unset;
    }
		div.login div.login_form {
			position: absolute;
			width: calc(100% - 10px);
			height: unset;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 2px 4px 10px -6px #000000;
			left: 50%;
			transform: translateX(-50%);

		}
	div.login div.login_image {
		border-radius: unset;
	}

	.login_footer {
		display: none;
	}

	#loginForm,
	#loginFormReset {
		width: 100%;
	}
	input.login_user,
	input.login_auth,
	input.login_password,
	input.login_code {
		width: 100%;
	}
	div.login div.login_logo {
		text-align: center;
	}

	.input-wrapper-user, .input-wrapper-password, .input-wrapper-resetpassword, .input-wrapper-auth, .input-wrapper-googlecode {
		width: 100%
	}

	.login_form_container {
		align-items: center;
	}
	
}	
@media screen and (max-width: 780px) {
	div.content.home_dashboard {
		padding: 15px !important;
	}
}
.fh-fixedHeader {
	z-index: 1;
	background-color: red;
}

@media only screen and (max-width: 500px){


}

/* CUSTOM CSS */
#createContactPricelist div.form-item,
#pricelistSettingsForm div.form-item{
	margin-bottom: 1em;
}

/* 350 */
@media only screen and (max-width: 350px) {

	div.login div.login_form {
		width: calc(100% - 5px);
		padding: 20px 10px;
	}
}

@media only screen and (max-width: 320px) {

	div#div_td_menu_smart div.smart_menu_div2 {
		grid-template-columns: repeat(2, 1fr);
	}

}