html.division_1 {
	background: url(images/purple2.jpg) no-repeat bottom center fixed;
	background-size:cover;
	box-sizing: border-box;
	overflow-x: hidden;
}

html.division_2 {
	background: url(images/green2.jpg) no-repeat bottom center fixed;
	background-size:cover;
	box-sizing: border-box;
	overflow-x: hidden;
}

.ledgeryear-container  {
	width: 6em;
	float: right;
	margin-right:1em;
}
.ledgeryear-container select {
	width: 100%;
}

.ledgeryear {
	font-size: 2em;
	font-weight: bolder;
}

.select2-container.jq-ledgeryear-select .select2-choice {
	background: #454545;
	color: white;
	border: none;
}

html.ledger_history {
	background: none;
	background-color: rgba(254,0,0,0.3);
	background-size: 60px 60px;
	background-repeat: repeat;
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
}

.ledger_history .header {
	background-color: #f3e640;
}

*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	height: 100%;
}

html, button {
	font-family: verdana, sans-serif;
	color: #444;
}

::selection {
	background: #8fbcee;
}

.main {
	margin:0;
	padding:0;
	width: 100%;
	clear:both;
}

.caret-d {
	display: inline-block;
	width: 12px;
	height: 0;
	vertical-align: top;
	border-top: 6px solid #000;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	content: "";
	margin-top:5px;
}

.caret-r {
	display: inline-block;
	width: 8px;
	height: 0;
	vertical-align: top;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-left: 6px solid #000;
	content: "";
	margin-top:1px;
	margin-left:4px;
}

.caret-l {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: top;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #000;
	content: "";
	margin-top:1px;
}

/* Pager */
/* Pager */
.pager {
	font-family: consolas;
	font-size: 12px;
	float:right;
	background-color: #d2d2d2;
}

.pager-container {
	border-radius: 0 15px 0 0;
	padding: 0 7px;
	float: left;
	font-family: verdana;
	font-weight: bolder;
	font-size: 12px;
	line-height: 28px;
	background-color: #8A8A8A;
}

.pager-container .caret-r {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: top;
	border-bottom: 7px solid transparent;
	border-top: 7px solid transparent;
	border-left: 7px solid #fff;
	content: "";
	margin: 7px 0px 0 10px;
}
.pager-container .caret-l {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: top;
	border-bottom: 7px solid transparent;
	border-top: 7px solid transparent;
	border-right: 7px solid #fff;
	content: "";
	margin: 7px 10px 0 0;
}

.pager-button .select2-drop, .pager-button .select2-results, .pager-button .select2-search input, .pager-button .select2-container a {
	font-family: verdana !important;
}

.pager-button {
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
	font-size:12px;
	line-height: 18px;
	display: block;
	float:left;
	padding: 4px 7px;
}

.pager-button select {
	width:5em;
	background-color: #aecbea;
	border:none;
}

.pager-nav-button {
	color: #fff !important;
	display: block;
	float:left;
	padding: 0 7px 0 7px;
}

.pager-nav-button.left {
	border-right: 1px solid #aaa;
}

.pager-nav-button.right {
	border-left: 1px solid #aaa;
}

.pager-action-button {
	display: block;
	float: left;
	padding: 0 7px 0 7px;
	margin: 0;
}

.pager-action-button:hover {
	cursor: pointer;
}

.pager-nav-button.disabled {
	background-color: #999999;
}

.fa.pager-nav-button {
	font-size: 20px;
	padding: 4px 12px;
}

/* END Pager */
/* END Pager */

input, select, textarea {
	padding-left: 4px;
	font-family: consolas;
	color: #000;
}

input[readonly="readonly"], select[disabled="disabled"], textarea[readonly="readonly"], input[disabled="disabled"] {
	background-color: #ddd;
	color: #333;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
}

.button-container, .child-button-container {
	float:right;
	clear:right;
	min-height: 2em;
	min-width: 5%;
}

#stock-button-container.child-button-container, #orderline-button-container {
	clear:right;
}

.button-container .action-button, .child-button-container .action-button {
	border-radius: 0 0 10px 10px;
	margin: 0 10px;
}

.editor-button-container .action-button, .editor-button-container .download-button, .editor-button-container .close-button {
	border-radius: 0 0 10px 10px;
	margin: 0 10px 10px 0;
	box-shadow: none;
}

.editor-button-container .action-button:hover {
	box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
	background-color: #d5e5ff;
}

.action-button, .download-button {
	color: #000;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
	box-shadow: 4px 3px 6px rgba(0,0,0,0.5);
	float:right;
	background-color: #aecbea;
	padding: 5px 9px;
	margin: 5px;
	border-radius: 6px;
}

.action-button.inactive {
	cursor: not-allowed;
	background-color: #ddd !important;
}

.semifinish-button {
	color: #000;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
	box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
	float:left;
	background-color: #f3cb1b;
	padding: 5px 9px;
	border-radius: 0 0 10px 10px;
	margin: 0 10px 10px 0;
	box-shadow: none;
}

.recipe-button {
	color: #000;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
	box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
	float:left;
	background-color: #ff9b2e;
	padding: 5px 9px;
	border-radius: 0 0 10px 10px;
	margin: 0 10px 10px 0;
	box-shadow: none;
}

.article-button {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
	box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
	float:left;
	background-color: #1a9fe2;
	padding: 5px 9px;
	border-radius: 0 0 10px 10px;
	margin: 0 10px 10px 0;
	box-shadow: none;
}

.close-button {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
	box-shadow: 4px 3px 6px rgba(0,0,0,0.5);
	float:left;
	background-color: #8a8a8a;
	padding: 5px 9px;
	margin: 5px;
	border-radius: 6px;
}

.editor-button-container .action-button:focus, .editor-button-container .action-button.focus {
	box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
	animation-name: attention;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.user-input-message .action-button:focus {
	box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
	animation-name: attention;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.jq-inline-save:focus {
	animation-name: inline-blink;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

.action-button-small {
	float:left;
	margin: 0 15px;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
	background-color: #aecbea;
	padding: 2px 9px;
	border-radius: 6px;
}

.action-button-small.inactive {
	cursor: not-allowed;
	background-color: #ddd;
}

.action-button-smaller {
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
	background-color: #aecbea;
	border-radius: 6px;
}

.action-button-smaller:hover {
	box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
	background-color: #d5e5ff;
}


.action-icon {
	height: 20px;
	width: 20px;
	display: inline-block;
}

.action-icon-td {
	text-align: center;
}

.logo-container {
	float:left;
}

.header-spacer {
	height: 30px;
}

.header a {
	outline:none;
}

.header {
	z-index: 9999;
	position: fixed;
	width: 100%;
	min-width: 1300px;
	background-color: #fff;
}

.grid-container {
	width: 100%;
	min-width: 200px;
}

/* default way of showing a grid as readonly and greyed out */
.grid-container.grid-read-only .grid-header {
	background-color: #8A8A8A;
}
.grid-container.grid-read-only .grid-row:hover td {
	background-color: initial;
	cursor: default;
}
.grid-container.grid-read-only .grid > tbody:not([class="skip-header"]) > tr:first-child > td {
	background-color: #8A8A8A;
}
.grid-container.grid-read-only .info_block_with_columndata, .grid-container.grid-read-only .info_block {
		background-color: #8A8A8A;
}
.grid-container.grid-read-only .info_block_with_columndata td {
		    border-right: 1px solid #8A8A8A;
}

.form-container .grid-container .grid-header {
	border-radius: 15px 0 0 0;
}

.inline-editor {
	background-color: #fff;
}

.inline-editor input {
	width: 98%;
	border-color: #aecbea;
	padding: 2px;
	margin: 2px;
}
.inline-editor select {
	width: 98%;
}

.grid-header {
	font-weight:bolder;
	font-size: 1.4em;
	line-height: 28px;
	background-color: #454545;
	color: #fff;
	padding: 0 20px;
	float:left;
}

.grid > tbody > tr:first-child > td:last-child {
	border-top-right-radius: 15px;
}

.grid-sort-asc, .grid-sort-desc, .grid-filter-apply, .grid-filter-reset {
	width: 16.667px;
	text-align: center;
}

.grid-filter-reset {
	background-color: #8A8A8A;
	border-radius: 0 7px 7px 0;
}

.grid-sort-asc a.sorted, .grid-sort-desc a.sorted {
	color: #aecbea;
}

.grid-filter-apply a, .grid-sort-asc a, .grid-sort-desc a {
	color: #8A8A8A;
}
.grid-filter-reset a {
	color: #f4f4f4;
	padding: 1px 0 0 0;
}

.grid > tbody:not([class="skip-header"]) > tr:first-child > td {
	background-color: #454545;
	color: #fff;
	padding: 3px 2px 4px 2px;
	vertical-align:bottom;
}

.grid {
	width: 100%;
	table-layout: fixed;
	clear:both;
}
.grid td div:first-child {
	line-height: 18px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}

.grid-input-char4 {
	width: 30px;	
}

.grid-input-char5 {
	width: 38px;
}

.grid-input-char9 {
	width: 64px;
}
.grid-input-char11 {
	width: 78px;
}

.grid-input-char12 {
	width: 85px;
}

.grid-input-date {
	width: 80px;
}

.grid-input-word {
	width: 165px;
}

.grid-input-line {
	width: 450px;
}

.grid-input-file {
	width: 300px;
}

.grid-textarea-alinea { /* short text */
	width: 305px;
	height: 56px;
}
.grid-textarea-paragraph { /* big tekst, multiple alineas  */
	width: 450px;
	height: 150px;
}
.grid-textarea-page { /* full text, multiple paragraphs */
	width: 450px;
	height: 400px;
}

.grid-filter-container {
	background-color: #fff;
	width: 90%;
	font-size: 11px;
}

.grid-filter-value {
	padding: 0 0 0 4px;
	line-height: 17px;
	width: 100%;
	font-size: 14px;
	display: block;
	float:left;
	background-color: #8A8A8A;
	color: white;
	border: none;
	text-shadow: 1px 1px 1px black;
}

.grid-filter-button {
	color: #000 !important;
	float:right;
}

.grid-filter-toggle {
	display:none;
}

.highlighted-grid-row {
	background-color: #c4d4eb !important;
}

.ingrid-input {
	width: 98%;
	background-color: #ffffff;
}

.header-inner {
	width: 100%;
	max-width: 500px;
	margin-right:10px
}

.fa {
	color: #8A8A8A;
	font-size:1.10em;
	margin-left: 2px;
}

.candlestick-wrapper .fa {
	font-size:1.26em;
}

.candlestick-on .fa {
	margin-left: 0px;
}

.fa:focus {
	outline: 0;
}

.fa.in-button {
	color: #7796a5;
}

.fa.in-close-button {
	color: #fff;
}

.fa.in-editor {
	color: #AAA;
}

.header-inner td {
	padding: 0 !important;
	white-space: nowrap;
}

.header-inner tbody tr:first-child {
	line-height: 18px;
}

.info_block {
	padding: 5px 30px 5px 24px;
	min-height: 16px;
	top: 0;
	left: 0;
	color: #fff;
	background-color: #454545;
	font-size: 10px;
	border-radius: 0 0 15px 15px;
}

.info_block_with_columndata {
	padding: 5px 0 5px 0;
	min-height: 16px;
	top: 0;
	left: 0;
	color: #fff;
	background-color: #454545;
	font-size: 1.2em;
	font-weight:bolder;
	border-radius: 0 0 15px 15px;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
}
.info_block_with_columndata td {
	border-right: 1px solid #454545;
}

/* Generic class for each row in each grid */
.grid-row:hover td {
	background-color: #d5e5ff;
	cursor: pointer;
}
.grid-row td.default {
	text-align:center;
	padding: 0;
}
.grid-row:hover td.default {
	background-color: #d5e5ff;
	cursor: inherit;
}
.grid-row:hover td.default input[type="text"] {
	cursor: auto;
}
.grid-row td.default input[type="checkbox"] {
	cursor: pointer;
	margin: 0;
	vertical-align: middle;
}

.grid-row td.default input[type="checkbox"] {
	cursor: pointer;
	margin: 0;
	vertical-align: middle;
}
.grid-row td.default input[type="checkbox"][value="-1"] {
	/*background-color: #fff696;*/
}
.grid-row td.default input[type="checkbox"][value="1"] {
	/*background-color: #93ea7a;*/
}
.grid-row td.default input[type="checkbox"][value="0"] {
	background-color: #ffa29a;
}

/* Disable the pointer cursor by overruling */
#orderline-grid .grid-row:hover td {
	background-color: initial;
	cursor: default;
}

.grid-spacer {
	width: 1%;
}
.grid-delete-button, .grid-button {
	width: 2%;
}

.grid-checkbox-select {
	width: 2%;
}

.grid-td-bold-red {
	font-weight: bolder;
	color: #CF0005;
}

.date-picker, .date-db2dutch, .date-picker-db2dutch {
	/* For autocomplete */
}

.login-editor {
	padding-top: 60px;
	width: 500px;
	margin: 0 auto;
}

.login-choose-background {
	min-height: 100px;
	border-left: 1px solid #ddd;
	padding-top:10px;
	background-color: #f4f4f4;
	background-image: linear-gradient( 180deg, rgba(0,0,0,0.12) 0%, transparent 30% ),linear-gradient( 180deg, rgba(0,0,0,0.2) 0%, transparent 2% );
	border-collapse: separate;
	border-spacing: 3px;
	vertical-align:top;
	border-radius: 0 0 15px 15px;
	border-bottom: 1px solid #8A8A8A;
	box-shadow: 6px 6px 20px rgba(69,69,69,0.3);
	text-align:center;
}

.grid tr {
	line-height:16px;
}
/* {space} td:not(:first-child) */
.grid tr.zebra-0  {
	background-color: #f4f4f4;
}
/* {space} td:not(:first-child) */
.grid tr.zebra-1  {
	background-color: #e4e4e4;
}

.grid tr[class*="zebra-"].reserved-stock { /* 	background-color: #e4e4e4;*/
	background-color: rgb(255, 239, 162);
}

/* .grid tr[class*="zebra-"].endproduct {
	background-color: rgb(197, 223, 198);
} */

.grid tr[class*="zebra-"].can-produce {
	background-color: rgb(197, 223, 198);
}

.grid tr td {
	padding: 0 0 0 3px;
}


.grid tr.zebra-0 td, .grid tr.zebra-1 td {
	border-right: 1px solid #d4d4d4;
}

#export-grid .grid tr.combi {
	font-weight: bolder;
}

#export-grid .grid tr[class*="lev-"]:not([class*="lev-1"]) {
	display:none; /* Hide all sub items intitially */
}

#export-grid .grid tr.zebra-0 {
	background-color: #F4F4F4;
}

#export-grid .grid tr.zebra-1 {
	background-color: #E4E4E4;
}



#financial-grid .grid tr.combi {
	font-weight: bolder;
}

#financial-grid .grid tr[class*="lev-"]:not([class*="lev-1"]) {
	display:none; /* Hide all sub items intitially */
}

#financial-grid .grid tr.zebra-0 {
	background-color: #F4F4F4;
}

#financial-grid .grid tr.zebra-1 {
	background-color: #E4E4E4;
}

#tree-grid .grid tr.combi {
	font-weight: bolder;
}

#tree-grid .grid tr[class*="lev-"]:not([class*="lev-1"]) {
	display:none; /* Hide all sub items intitially */
}

#tree-grid .grid tr.zebra-0 {
	background-color: #F4F4F4;
}

#tree-grid .grid tr.zebra-1 {
	/*	background: rgba(170, 188, 207, 0.7);*/
	background-color: #E4E4E4;
}

#tree-grid .grid > tbody > tr:not(:first-child):hover td {
	background-color: #d5e5ff;
	cursor: default;
}

#tree-grid tr.combi:hover td {
	cursor: pointer !important;
}

#recipeingredientforcalculation-grid .grid tr[class~="lev-1"] {
	background-color: #F5F5F5;
}
#recipeingredientforcalculation-grid .grid tr[class~="lev-2"] {
	background-color: #EEEEEE;
}
#recipeingredientforcalculation-grid .grid tr[class~="lev-3"] {
	background-color: #D9D9D9;
}
#recipeingredientforcalculation-grid .grid tr[class~="lev-4"] {
	background-color: #D3D3D3;
}
#recipeingredientforcalculation-grid .grid tr[class~="lev-5"] {
	background-color: #C7C7C7;
}
#recipeingredientforcalculation-grid .grid tr[class~="lev-6"] {
	background-color: #C1C1C1;
}
#recipeingredientforcalculation-grid .grid tr[class~="lev-7"] {
	background-color: #BABABA;
}

#pricecalculation.control-editor {
	position:absolute;
	width: 30%;
    float: left;
    margin-left: 1%;
    margin-bottom: 1%;
}

.editor .label {
	font-weight: bolder;
	width: 175px;
	text-align: right;
	vertical-align:middle;
}

.editor .label-top {
	vertical-align:top;
	font-weight: bolder;
	width: 175px;
	text-align: right;
}

.editor .label-top span {
	line-height: 1.4em;
	font-size:1em;
	font-style:italic;
	font-weight: normal;
	color: #AAAAAA;
	text-shadow: 1px 1px 1px white;
}

.editor .formelement {
	width: 80%;
}

.editor {
	border-left: 1px solid #ddd;
	padding-top:10px;
	background-color: #f4f4f4;
	background-image: linear-gradient( 180deg, rgba(0,0,0,0.12) 0%, transparent 30% ),linear-gradient( 180deg, rgba(0,0,0,0.2) 0%, transparent 2% );
	width: 100%;
	border-collapse: separate;
	border-spacing: 3px;
	vertical-align:top;
	border-radius: 0 0 15px 15px;
	border-bottom: 1px solid #8A8A8A;
	box-shadow: 6px 6px 20px rgba(69,69,69,0.3);
}

.editor-textarea {
	width: 350px;
	height: 200px;
}
.right-sub-container {
	display: flow-root;
	float:right;
}

.clearfix:before, .clearfix:after { content: ""; display: block; }
.clearfix:after { clear: both; }

.editor-container {
	min-width: 200px; /* otherwise it wil use a percentage of the width of it's own contents. */
	width: 42%; /* Fallback default width, mostly overwritten */
	margin: 0 0 40% 0;
	float: left;
	position: relative;
}
#part-editor.editor-container {
	position: absolute;
}
/*  Type specific form "tables" in div format. Easier to show/hide and group input form elements */ 
.editor-table {
	border-left: 1px solid #ddd;
	padding: 0 15px 5px 15px;
	background-color: #f4f4f4;
	width: 100%;
	border-collapse: separate;
	border-spacing: 3px;
	vertical-align:top;
	border-radius: 0 0 15px 15px;
	border-bottom: 1px solid #8A8A8A;
	box-shadow: 6px 6px 20px rgba(69,69,69,0.3);
}

.editor-subheader {
	text-align:left;
	font-size: 1.2em;
	font-weight: bolder;
	border-bottom: 1px solid #333333;
	margin-bottom: 0.5em;
}

.editor-label {  /* Hybrid, use for td's and div's  */
	vertical-align: top;
	line-height: 1.5em;
	font-weight: bold;
	text-align: right;
}
div.editor-label {
	float: left;
}

.editor-label-left {
	vertical-align: top;
	line-height: 1.5em;
	font-weight: bold;
	text-align: left;
	float: left;
}

.editor-label i {
	font-style: normal;
	line-height: 1em;
	font-size: 0.75em;
	letter-spacing: -0.1em;
	color: #888;
}

.editor-label i.fa {
	font-size: 1.2em;
}

.editor-label.required {
	color: #CF0005;
}

.editor-label span {
	line-height: 1.4em;
	font-size:1em;
	font-style:italic;
	font-weight: normal;
	color: #AAAAAA;
	text-shadow: 1px 1px 1px white;
}

.editor-input {
	min-height: 20px;
	float:left;
}

.editor-button-footer {
	float:left;
	width:96%;
	padding: 0 2%;
}

.editor-button-container {
	min-height: 34px;
}

.stock-calc-editor-container {
	float:left;
}

.grid-selected-row {
	background-color: #aecbea !important; /* Overrule the highly specific hover class definition */
}

#export-grid .grid > tbody > tr:not(:first-child):hover td {
	background-color: #d5e5ff;
	cursor: default;
}

#export-grid tr.combi:hover td {
	cursor: pointer !important;
}

.transparent-blocker:hover {
	cursor: wait;
}

.transparent-blocker {
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: none;
}

.error-overlay-background {
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: rgba(207,222,255,0.5);
	background-size: 40px 40px;
	background-repeat: repeat;
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
}

/* Exception for Esther L */
.page_customerorder .message-overlay-background {
	top:250px;
}

/* Exception for Albert D ? */
.page_productionorder .message-overlay-background {
	top:250px;
}

.message-overlay-background {
	position: fixed;
	top:35px;
	left:21%;
	width: 58%;
	z-index: 9999;
}
.user-input-message-overlay-background {
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: rgba(207,222,255,0.5);
	background-size: 40px 40px;
	background-repeat: repeat;
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
}

.error-message {
	border-radius: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: #dca7a7;
	margin: 10% auto;
	padding: 0 30px;
	font-weight: bolder;
	width: 57%;
	font-size: 16px;

	background-image: -webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));
	background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);
	background-repeat: repeat-x;
	
	text-shadow: 0 1px 0 rgba(255,255,255,.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
	color: #a94442;
	background-color: #f2dede;
	cursor: pointer;
}

.choose-button {
	display:inline-block;
	font-weight:bolder;
	font-size: 2em;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(80,80,80,1);
	box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
	background-color: #aecbea;
	padding: 10px 10px;
	margin: 15px;
	border-radius: 10px;
}

.user-input-message .action-button, .user-input-message .download-button {
	float:none;
}

.user-input-message {
	border-radius: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: #b2dba1;

	margin: 10% auto;
	padding: 10px 30px;
	width: 57%;

	background-image: -webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#c8e5bc));
	background-image: linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);
	background-repeat: repeat-x;

	text-shadow: 0 1px 0 rgba(255,255,255,.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
	color: #3c763d;
	background-color: #dff0d8;
}

.success-message {
	border-radius: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: #b2dba1;
	
	margin: 0 auto;
	padding: 0 0 0 25px;
	font-weight: bolder;
	font-size: 16px;

	background-image: -webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#c8e5bc));
	background-image: linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);
	background-repeat: repeat-x;
	
	text-shadow: 0 1px 0 rgba(255,255,255,.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
	color: #3c763d;
	background-color: #dff0d8;
}

.warning-message {
	border-radius: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: #db9406;
	
	margin: 0 auto;
	padding: 0 0 0 25px;
	font-weight: bolder;
	font-size: 16px;

	background-image: -webkit-linear-gradient(top, #dbbd18 0, #db9406 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#dbbd18),to(#db9406));
	background-image: linear-gradient(to bottom,#dbbd18 0,#db9406 100%);
	background-repeat: repeat-x;
	
	text-shadow: 0 1px 0 rgba(255,255,255,.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);
	color: #765e12;
	background-color: #dbbd18;
}

.editor-warning-message {
	border-radius: 0 0 15px 15px;
	margin: 0 auto;
	padding: 0.8em;
	font-weight: bolder;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,100);
	color: #CF0005;
	background-color: #dddddd;
}

.error-close-button {
	position: absolute;
	top: 10px;
	right: 22%;
	margin: 10% auto;
	background-color: #454545;
	color: #fff;
	border-radius: 15px;
	width: 22px;
	height: 22px;
	text-align: center;
	font-weight: bolder;
	font-size: 16px; 
	cursor: pointer;
	line-height: 21px;
}

.message-close-button {
	position: absolute;
	top: 10px;
	right: 1%;
	background-color: #454545;
	color: #fff;
	border-radius: 15px;
	width: 20px;
	height: 19px;
	text-align:center;
	font-weight: bolder;
	font-size: 16px; 
	cursor: pointer;
}

.jq-weight-container { /* Don't show both at first instance (used in stock) */
	display:none;
}

.loader-anim {
	position: fixed;
	top: 0px;
	left: 0px;
	display: block;
	padding: 7.5px 55px;
	background-color: #fff;
	display:none;
}

.shaded-cell {
	background-color: #ccc;
	padding: 0 10px 10px 10px;
}
.divider-cell {
	font-weight:bolder;
	width:50px;
	text-align:center;
}
.option-blocker {
	height: 100%;
	width: 100%;
	position:absolute;
	top:0;
	left:0;
	display:none;
}
.option-blocker p {
	padding: 0 50px;
	font-size: 14px;
	font-weight: bolder;
	color: #000;
	margin: 30px auto;
	text-shadow: 3px 3px #fff;
}

.jq-part-option-two, .jq-part-option-one {
	position:relative;
	padding:0;
}
.jq-part-option-one {
	text-align: center;
}

.row-item-separator {
	color:#454545;
}

.row-item-separator:before {
	content: '●';
}

.row-item-separator.week {
	color:#888888;
}

.new-part-container {
	display: none;
}

.footer-spacer {
	float:left;
	height: 10px;
	width: 100%;
}

.grid_info_box {
	position:absolute;
	background-color: rgb(207,222,255);
	display:none;
	padding: 10px;

	border-radius: 12px / 12px;
	box-shadow: 0 0 8px #454545;
}

.filtercontainer {
	width: 65%;
	padding: 0 0 0 20px;
	border-top-right-radius: 15px;
	float:left;
}

.filter-title-span {
	color:#fff;
	font-size: 12px;
	line-height: 17px;
	display: inline-block;
	padding: 0 7px 0 7px;
}

.filter-title-span-left {
	color:#fff;
	font-size: 12px;
	line-height: 14px;
	display:block;
	padding: 0 7px 7px 0;
	float:left;
}

.special-stock-filter {
	float:left;
}
.special-stock-filter td {
	padding: 0 !important;
}
.special-stock-filter .grid-filter-reset {
	background-color: #B7B7B7;
}

input[name="custom1_filter"] {
	line-height:15px;
	width:100%;
	font-size: 12px;
	background-color: #B7B7B7;
	color: white;
	border: none;
}

.grid-top-button-container {
	padding-right: 8px;
	padding-left: 8px;
	height: 28px;
	background-color: #8A8A8A;
	float:left;
}

.grid-toggle-button {
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 2px;
	line-height: 28px;
	float:left;
}
.grid-toggle-button .fa {
	color: #fff;
	font-size: 1.4em;
}
.grid-toggle-button .fa:hover {
	color: #aecbea;
	font-size: 1.4em;
}

.grid-top-search-container {
	background-image: linear-gradient( 90deg, rgb(69,69,69) 0%, transparent 35% );
	background-color: #8A8A8A;
	height: 28px;
	padding-top: 6px;
	float:left;
}

.messages {
	margin: 0 auto;
	padding: 20px 20px 20px 20px;
	width: 1000px;
	position: relative;
}

.messages .quotemessage {
	position: absolute;
	top: 15px;
	right: 15px;
	font-family: 'Helvetica Neue Light';
	font-size: 20px;
	text-align: right;
	color: #ddd;
}

.lasteditted {
	text-decoration: underline;
}

.messages pre {
	font-family: verdana;
	font-size: 11px;
}

.fa-external-link-square-alt, .fa-external-link-square-alt:hover {
	font-size: 1.5em;
	color: #8A8A8A !important;
	margin: 0 0 0 5px !important;
}

.jq-charge-handler .fa {
	font-size: 1.4em;
	color: #8A8A8A;
	margin: 2px 0 0 15px;
}

.fa-external-link-square-alt.inline {
	padding: 0 0 0 10px !important;
	display:inline-block;
	
}
.fa-external-link-square-alt.inline.shadowed {
	text-shadow: 0px 0px 2px rgba(0,0,0,.6);
	color: #fff !important;
}

.fa-external-link-square-alt.grid {
	font-size: 1.2em;
	color: #8A8A8A !important;
	margin: 0 !important;
	vertical-align: bottom;
}
#report-editor {
	width: 80%;
}

#report-editor .action-button {
	float:left;
}

#stockimport-editor {
	margin: 0 1% 0 0;
	width: 25%;
	min-width: initial;
	float:left;
}
#stockimport-editor .label {
	width: 25%;
}

#stockimportline-editor .label {
	width: 15%;
}
#part-new-table .label {
	width: 30%;
}

#stockimportline-grid {
	width:74%;
	min-width:initial;
	float:left;
	clear:right;
}
/*.child-button-container[data-target-id="stockimportline-grid"] {
	width: 74%; 
}*/

#purchasestock-editor {
	min-width: initial;
	width: 41%;
	margin: 0 0 0 2%;
}

#stockimportline-editor {
	margin: 0 13% 0 0;
	width: 50%;
	min-width: initial;
	float:right;
}

#purchase-editor {
	margin: 0 1% 0 0;
	width: 28%;
	min-width: initial;
	float:left;
}

#orderheader-editor {
	margin: 0 1% 20% 0; /* Bottom margin prevents the child-editor to float to the left too much */
	width: 27%;
	min-width: initial;
	float:left;
}

#recipe-editor {
	margin: 0 1% 20% 0; /* Bottom margin prevents the child-editor to float to the left too much */
	width: 32%;
}

#orderheader-form-container #orderline-grid {
	width:100%;
	min-width:initial;
	float:right;
	clear:right;
}
.division_1 #orderheader-form-container #orderline-grid {
	width:72%;
}

#supplier-editor {
	margin-right: 1%;
	width: 35%;
	min-width: initial;
	float:left;
}
#supplier-editor .label {
	width: 30%;
}

#productionform-editor {
	margin: 0 1% 0 0;
	width: 40%;
	min-width: initial;
	float:left;	
}
#purchase-editor .label {
	width: 30%;
}
#purchaseline-editor .label, #productionform-editor .label {
	width: 23%;
}

#article-editor .label {
	width: 180px;
}

#purchase-form-container #purchaseline-grid {
	width:71%;
	float:left;
}
#contract-form-container #purchaseline-grid {
	width:63%;
	float:right;
}
#contract-editor {
	margin: 0 1% 20% 0;
	width: 35%;
	min-width: initial;
	float:left;
}

#purchaseline-editor {
	margin: 0 0% 0% 1%;
	width: 57%;
	min-width: initial;
	float:right;
}

#shippingorder-editor {
	position:absolute;
	margin: 0 1% 1% 0;
	width: 36%;
	min-width: initial;
}

#customerorder-editor {
	position:absolute;
	margin: 0 1% 1% 0;
	width: 36%;
	min-width: initial;
}

#customerorder-form-container #customerorderline-grid {
	width:62%;
	min-width:initial;
	float:right;
	clear:right;
}

#customerorderline-editor {
	margin: 0 0% 0% 2%;
	width: 48%;
	min-width: initial;
	float:right;
}

#customerorderlineforadmin-editor {
	width: 48%;
	min-width: initial;
	float:left;
}
#usage-grid {
	width: 45%;
	margin:0;
	float:right;
}

#productionfloor-form-container #usage-grid {
	width: 38%;
}

#shippingorderline-grid {
	width:62%;
	min-width:initial;
	float:right;
}

#shippingorderline-editor {
	margin: 0 0% 0% 2%;
	width: 52%;
	float: right;
}

#productionorder-editor, #productionorderforlab-editor {
	position:absolute;
	width: 40%;
}
#productionorderinternal-editor {
	position: absolute;
	width: 52%;
	margin:0;
}

#productionfloor-editor {
	position: absolute;
	width: 60%;
	margin:0;
}

#stock-editor {
	margin: 0 1% 20% 0;
	width: 43%;
	min-width: initial;
	float: left;
}

#orderinsight-editor {
	width: 100%;
	margin:0 0 1% 0;
	float: inherit;
}

#orderinsight-editor .label {
	width: 11%;
}

#contract-form-container #stock-grid {
	width: 55%;
	min-width: initial;
	float: left;
}

#purchase-form-container #stock-grid {
	margin-top: 10px;
	width: 71%;
	min-width: initial;
	float: right;
}

#purchaselineforwarehouse-form-container #stock-editor {
	margin: 0;
	width: 46%;
	min-width: initial;
	float:left;
}
#purchaselineforwarehouse-form-container #stock-grid {
	width: 53%;
	min-width: initial;
	float: right;
}
#purchaselineforwarehouse-form-container #purchaseline-editor {
	margin: 0;
	width: 48%;
	min-width: initial;
	float:left;
}

#purchaselineforprocurement-editor {
	margin: 0;
	width: 55%;
	min-width: initial;
}

/* The stock editor that's used from inside the purchaseline child grid. Should be the same as the purchaseline editor form. */
#purchase-form-container #stock-editor {
	margin: 0 0 0 1%;
	width: 48%;
	min-width: initial;
	float:right;
}
/* Same as above, but for contracts */
#contract-form-container #stock-editor {
	margin: 0 0 0 1%;
	width: 48%;
	min-width: initial;
	float:left;
}

#checkingoods-form-container #checkingoods-editor {
	width: 44%;
}

#checkingoods-form-container #stock-grid {
	margin-top: 10px;
	width: 55%;
	float:right;
}

#debtor-form-container #contact-grid .grid-header,
#debtor-form-container #address-grid .grid-header,
#supplier-form-container #address-grid .grid-header {
	border-radius: 15px 15px 0 0;
}

#orderheader-form-container #stock-grid {
	width: 72%;
	min-width: initial;
	float: right;
	clear: right;
}

#productionorder-form-container #stock-grid {
	margin: 0 0 0 1%;
	width: 58%;
	min-width:initial;
	float:right;
}

#productionorder-form-container #stockmutation-grid {
	margin: 0 0 0 1%;
	width: 58%;
	min-width:initial;
	float:right;
}

[class*="jq-ajax-selectbox"].faux-width-for-ext-link {
	width:91% !important;
}

#partrecipe-grid {
	width:66%;
	float:right;
	clear:right;
}

#partrecipe-editor {
	margin: 0 2%;
	width: 45%;
	float:left;
}

#purchasestock-grid {
	margin-top: 10px;
	width:55%;
	min-width:initial;
	float:right;
	clear:right;
}

#stockmutation-grid {
	width:56%;
	min-width:initial;
	float:left;
	clear:right;
}

#stockmutation-editor {
	margin: 0 1%;
	width: 38%;
	min-width: initial;
	float:left;
}

#stockmutation-editor .label {
	width: 18%;
}

#stock-editor .label {
	width: 23%;
}

.form-container {
	clear:left;
	width:98%;
	margin: 0 0 0 1%;
}

.preview-container {
	margin: 0 1% 0 0;
	width: 58%;
	min-width: initial;
	float:left;
}

.preview-document-container {
	background-color: #fff;
	box-shadow: 5px 7px 15px rgba(0,0,0,0.2);	
	border: 1px solid gray;
	padding: 10px;
	margin-top: 20px;
}

.preview-input {
	font-family: consolas, droid_sans_monoregular;
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0 0 0 8px;
	height: 23px;
	margin: 2px;
	border: 1px solid #aaa;
	border-radius: 5px;
	background-color: #fff;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
	line-height: 24px;
}

.preview-document-header {
	width: 100%;	
}

.preview-container .preview-header {
	line-height: 1.2em;
}

.preview-basic-info {
	margin-bottom:20px;
}

.preview-container .preview-label {
	vertical-align: middle;
	font-weight: bolder;
	width: 18%;
	text-align: right;
	padding-right: 5px;
}

.preview-container h1 {
	font-size: 16px;
	font-weight: bolder;
	text-align: center;
}

.selectbox_option_container {
	font-family: verdana, sans-serif;
	color: #777777;
}

[class*="jq-ajax-selectbox"] {
	width: calc(100%) !important;
}

#productionorderinternal-editor [class*="jq-ajax-selectbox"] {
	width: calc(96.5%) !important;
}

/* Only overwrites of 600px wide */
input[name="productionform_part_id"] {
	width: 500px;
}

input[name="cargocarrier_id"] {
	width: 550px;
}

input[name="nutritionalinformation_part_id"] {
	width: 350px;
}

#article-editor {
	width: 60%;
}

#partcom-editor {
	width: 55%;
}

#contact-grid {
	width:56%;
	min-width:initial;
	float:right;
	clear:right;
}

#debtor-form-container #contact-grid {
	width:56%;
	margin-left:2%;
}
#debtor-form-container #contact-editor {
	margin-left:4%;
	margin-bottom: 1%;
}

#address-grid {
	width:64%;
	min-width:initial;
	float:left;
	clear:right;
}
#address-editor {
	margin: 0 1%;
	width: 35%;
	min-width: initial;
	float:left;
}
#debtor-form-container #address-grid {
	width:56%;
	margin-left:2%;
	float:right;
}
#debtor-form-container #address-editor {
	margin-left:4%;
}
#debtor-form-container #address-button-container {
	float:right;
}


#supplier-form-container #address-editor {
	margin-left:4%;
}
.costprice-date-valid {
	margin: 7px;
}

.orderinsight-article-tr td:first-child, .orderinsight-article-tr td:last-child {
	color: #000 !important;
	background-color: #F4F4F4;
	padding: 3px;	
}

.orderinsight-invoiceline-headerrow td {
	font-weight: bolder;
}

.orderinsight-invoiceline-table {
	font-size: 0.8em;
	width: 250px;
	display: block;
	float:left;
}

.orderinsight-invoiceline-containerrow {
	display:none;
}

.orderinsight-invoiceline-table td {
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.orderinsight-invoiceline-table tr td:first-child {
	background-color: #DCDCDC;
}

.orderinsight-article-tr td {
	vertical-align: middle;
}

span.spacer_lbl {
	margin: 0 0.5em;
}

.ci { /* Custom Icon */
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	width:14px;
	height: 14px;
	font-size:0.9em;
	line-height: 1.3em;
	border-radius: 10px;
	font-style: normal;
	text-decoration: none;
	font-weight: bolder;
}

.nr_one, .nr_two, .nr_three, .nr_four {
	color: #ffffff !important;
	background-color: #888888;
	text-shadow: none;
    padding: 0 0.3em;
    font-size: 0.85em;
}
.nr_one:before {
	content: "1";
}
.nr_two:before {
	content: "2";
}
.nr_three:before {
	content: "3";
}
.nr_four:before {
	content: "4";
}

.parttype_semifinished_icon {
	color: #000000 !important;
	background-color: #FFEE63;
	padding: 0 0.3em;
}
.parttype_semifinished_icon:before {
  content: "H";
}
.parttype_recipe_icon {
	color: #000000 !important;
	background-color: #FF9D40;
	padding: 0 0.21em;
}
.parttype_recipe_icon:before {
  content: "R";
}
.parttype_ingredient_icon {
	color: #ffffff !important;
	background-color: #B40000;
	padding: 0 0.33em;
}
.parttype_ingredient_icon:before {
  content: "I";
}

.parttype_packaginggroup_icon {
	color: #ffffff !important;
	background-color: #326496;
	padding: 0 0.3em;
}
.parttype_packaginggroup_icon:before {
  content: "E";
}
.parttype_packaging_icon {
	color: #ffffff !important;
	background-color: #966432;
	padding: 0 0.24em;
}
.parttype_packaging_icon:before {
  content: "V";
}

.header_icon {
	color: #ffffff !important;
	background-color: #8a8a8a;
	padding: 0 0.33em;
}
.header_icon:hover {
	cursor: help;
}


/* Style for td cells within editor with flexbox; experimental */
.flexcon {
	display: flex;
}
span.selectbox_tag {
	font-style: normal;
	color: #666;
	border-style: solid;
	border-color: #ccc;
	border-width: 1px 1px 1px 1px;
	background-color: #EFEFEF;
	padding: 0 5px 0 5px;
	line-height: 16px;
	border-radius: 10px 10px 10px 10px;
}

span.sb_parttype1 { /* Combinatie */
	font-size: 1.2em;
	border: none;
	color: #333333 !important;
	background-color: #FFBFED;
}

span.sb_parttype2 { /* Product */
	font-size: 1.2em;
	border: none;
	color: #ffffff !important;
	background-color: #8900FC;
}

span.sb_parttype3 { /* Verpakking */
	font-size: 1.2em;
	border: none;
	color: #ffffff !important;
	background-color: #966432;
}

span.sb_parttype4 { /* Wichtgoed */
	font-size: 1.2em;
	border: none;
	color: #ffffff !important;
	background-color: #676767;
}

span.sb_parttype5 { /* Kosten */
	font-size: 1.2em;
	border: none;
	color: #ffffff !important;
	background-color: #B40000;
}

span.sb_parttype6 { /* Ingredient */
	font-size: 1.2em;
	border: none;
	color: #ffffff !important;
	background-color: #329632;
}

span.sb_parttype7 { /* Declaratie */
	font-size: 1.2em;
	color: #666666 !important;
	background-color: #ffffff;
}

span.sb_parttype8 { /* Halffabricaat */
	font-size: 1.2em;
	border: none;
	color: #000000 !important;
	background-color: #FFEE63;
}

span.sb_parttype11 { /* Recept */
	font-size: 1.2em;
	border: none;
	color: #000000 !important;
	background-color: #ffab63;
}

span.sb_parttype12 { /* Emballage Set / Verpakkings Combinatie */
	font-size: 1.2em;
	border: none;
	color: #ffffff !important;
	background-color: #326496;
}

span.selectbox_tag_label {
	border-style: solid;
	border-color: #ccc;
	border-width: 1px 0 1px 1px;
	color: #333;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
	line-height: 16px;
	padding: 0 5px 0 5px;

	background-color: #ddd;
	border-radius: 10px 0 0 10px;
}

span.selectbox_tag_value {
	color: #666;
	border-style: solid;
	border-color: #ddd;
	border-width: 1px 1px 1px 0;
	background-color: #EFEFEF;
	padding: 0 5px 0 5px;
	line-height: 16px;
	border-radius: 0 10px 10px 0;
}

span.selectbox_tag_label_trial {
	border-style: solid;
	border-color: #ff0000;
	border-width: 1px 0 1px 1px;
	color: #fff;
	/*text-shadow: 1px 1px 1px rgba(255,255,255,1);*/
	line-height: 16px;
	padding: 0 5px 0 5px;

	background-color: #CF0005;
	border-radius: 10px 0 0 10px;
}
span.selectbox_tag_value_trial {
	color: #fff;
	border-style: solid;
	border-color: #ff0000;
	border-width: 1px 1px 1px 0;
	background-color: rgba(207, 0, 5, 0.4);
	padding: 0 5px 0 5px;
	line-height: 16px;
	border-radius: 0 10px 10px 0;
	margin: 0 0.4em 0 0;
}

span.selectbox_tag_label_monster {
	border-style: solid;
	border-color: #db9406;
	border-width: 1px 0 1px 1px;
	color: #333;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
	line-height: 16px;
	padding: 0 5px 0 5px;
	background-color: #db9406;
	border-radius: 10px 0 0 10px;
}
span.selectbox_tag_value_monster {
	color: #333;
	text-shadow: 1px 1px 1px rgba(255,255,255,1);
	border-style: solid;
	border-color: #db9406;
	border-width: 1px 1px 1px 0;
	background-color: #dbbd18;
	padding: 0 5px 0 5px;
	line-height: 16px;
	border-radius: 0 10px 10px 0;
	margin: 0 0.4em 0 0;
}

span.multiply_lbl {
	color: #eee;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 16px;
	padding: 0 0.5em;
	margin: 0 0.8em;
	background-color: #8A8A8A;
	border-radius: 10px;
}

span.quotient_lbl, span.quotient_weight_lbl {
	color: #eee;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 16px;
	padding: 0 0.5em;
	margin: 0 0 0 0.8em;
	background-color: #8A8A8A;
	border-radius: 10px 0 0 10px;
}

span.first_lbl, span.second_lbl, span.third_lbl, span.fourth_lbl {
	color: #8A8A8A;
	border-style: solid;
	border-color: #bbb;
	border-width: 1px 1px 1px 0;
	background-color: #EFEFEF;
	padding: 0 0.5em;
	line-height: 16px;
	border-radius: 0 10px 10px 0;
	white-space:nowrap
}

.row_amount_container span, .row_amount_container input {
	float:left;
}

.row_amount_first {
	padding-left: 4px;
	line-height: 14px;
	border-width: 1px 0 1px 1px !important;
	border-color: #ccc !important;
	border-style: solid !important;
}

.row_amount_second, .row_amount_third, .row_amount_fourth {
	padding-left: 4px;
	line-height: 14px;
	border-width: 1px 0 1px 1px;
	border-color: #ccc;
	border-style: solid;
}

#mainmenu li.info-panel {
	text-shadow: 1px 1px 1px white;
	font-family: verdana, sans-serif;
	float: right;
	color: #8A8A8A;
	line-height: 2.4em;
}

.fieldset-border-container {
	width: 100%;
	margin: 1% 0;
	background-image: linear-gradient( 180deg, rgba(0,0,0,0.16) 10%, rgba(0,0,0,0.08) 60% );
	float: left;
	border-radius: 10px;
}

.grid-input-normal {
	width: 152px;
}

.column-container-nutritional-information {
	float: left;
	width: 56%;
	margin-right: 1%;
}

.column-container-allergens {
	float: left;
	width: 42%;
}

.column-container input[type="radio"] {
	margin: 3px 5px;
}

.active-filter {
	color:#fff !important;
}
.login-header {
	background-color: #454545;
	color: white;
	font-weight: bolder;
	font-size: 12px;
	border-radius: 15px 15px 0 0;
	padding: 5px 5px 5px 15px;
}

#partpart-editor {
	width:60%;
}

#part-editor  {
	width: 58%;
}

#part-editor.type-initial {
	width: 32%;
}

/* Class on container does not update on ajax content replacement *inside* the container. Container stays to small when editing a semi-final after a recipe */
#part-editor.type-recipe {
	margin: 0 1% 20% 0; /* Bottom margin prevents the child-editor to float to the left too much */
	width: 37%;
}

#part-editor.type-semifinished {
	margin: 0 1% 20% 0; /* Bottom margin prevents the child-editor to float to the left too much */
	width: 45%;
}

#part-editor.type-rawmaterial {
	margin: 0 1% 20% 0; /* Bottom margin prevents the child-editor to float to the left too much */
	width: 40%;
}

#part-editor.type-packaginggroup {
	margin: 0 1% 20% 0; /* Bottom margin prevents the child-editor to float to the left too much */
	width: 43%;
}

#part-editor.type-packaging {
	margin: 0 1% 20% 0; /* Bottom margin prevents the child-editor to float to the left too much */
	width: 55%;
}

#part-editor.type-combination {
	margin: 0 1% 20% 0; /* Bottom margin prevents the child-editor to float to the left too much */
	width: 50%;
}

#part-editor.type-product {
	margin: 0 1% 20% 0; /* Bottom margin prevents the child-editor to float to the left too much */
	width: 50%;
}

#semifinishedrecipe-grid {
	width: 53%;
	margin: 0 0 0 0;
	float: right;
	clear: right;
}

#rawmaterialextension-grid {
	width: 55%;
	margin: 0 0 0 0;
	float: right;
	clear: right;
}

#rawmaterialextension-button-container {
	clear: right;
}

#rawmaterialextension-editor {
	width: 41%;
	margin: 0 5% 0 0;
	float: right;
}

#recipeingredient-grid {
	width: 60%;
	margin: 0 0 0 0;
	float: right;
	clear: right;
}

#recipeingredient-button-container {
	clear: right;
}

#recipeingredient-editor {
	width: 44%;
	margin: 0 1% 0 0;
	float: right;
}

#packagingpackaginggroup-grid {
	width: 55%;
	margin: 0 0 0 0%;
	float: right;
	clear: right;
}
#packagingpackaginggroup-button-container {
	clear: right;
}
#packagingpackaginggroup-editor {
	width: 44%;
	margin: 0px 5% 0 0;
	float: right;
}

#packagingpackaginggroupforcalculation-grid {
	width: 67%;
	margin: 1% 0 0 0;
	float: right;
}
#packagingpackaginggroupforcalculation-editor {
	width: 44%;
	margin: 0px 5% 0 0;
	float: right;
}

#recipeingredientforcalculation-grid {
	width: 67%;
	margin: 0 0 0 0;
	float: right;
	clear: right;
}
#recipeingredientforcalculation-editor {
	width: 44%;
	margin: 0 5% 0 0;
	float: right;
}

#part-form-container #article-grid {
	width: 42%;
	margin: 0 0 0 0;
	float: right;
	clear: right;
}

.production-charge-fieldset .section.group[data-production-charge-id] {
	border-bottom: 1px dashed #999999;
	padding: 2px;
}

.production-charge-fieldset input {
	text-align: right;
}

.jq-select-all-minus:hover {
	cursor: pointer;
}

.grid_display_field .fa {
	text-shadow: 1px 1px 2px #ffffff, -1px -1px 2px #ffffff;

}
#productionorder-grid .grid_display_field .fa {
	margin: 0;
}

.grid_display_field i:not(.fa) {
	color:#454545;
}

.grid_display_field a:not(.fa .select2-choice)  {
	text-decoration: underline;
}

.grid_display_field.hover_fulltext:hover {
	overflow: visible;
	position:relative;
	white-space:unset;
}

.caret-basic {
	padding: 0 5px 0 0;
	vertical-align: text-bottom;
}

#articlehistory-form-container #article-editor {
	float:right;
	width: 45%;
}
#articlehistory-editor {
	width: 45%;
}

#articlehistory-form-container #article-editor .action-button.jq-submit {
	display:none;
}


/* Can only be editted/created from Exact Online */
#debtor-form-container #address-editor .action-button.jq-submit, #debtor-form-container #address-button-container {
	display:none;
}

#supplier-form-container #address-editor .editor-warning-message {
	display:none;
}

span[data-price-history], span[data-price-history-grey] {
	text-align: left;
	display: inline;
	position: relative;
}

span[data-price-history]:before, span[data-price-history-grey]:before {
	border: solid;
	border-color: #dbbd18 transparent;
	border-width: 1em 1em 0 1em;
	bottom: 1em;
	content: "";
	display: block;
	left: 1.2em;
	position: absolute;
	z-index: 99;
	display:none;
	white-space: pre-line;
}

span[data-price-history]:after, span[data-price-history-grey]:after {
	background: #dbbd18;
	border-radius: .5em;
	bottom: 1.7em;
	color: #fff;
	content: attr(data-price-history);
	white-space: pre-line;
	left: 0.8em;
	padding: .3em 1em;
	position: absolute;
	width: 200px;
	z-index: 98;
	text-shadow: none;
	display: none;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
}
span[data-price-history-grey]:after {
	content: attr(data-price-history-grey);
}

span[data-price-history]:hover:before,span[data-price-history]:hover:after,span[data-price-history-grey]:hover:before,span[data-price-history-grey]:hover:after {
	display:block;
}

span[data-price-history] i {
	color:#dbbd18 !important;
}

span[data-price-history]:hover i {
	color:#aecbea !important;
}

.grid-sort-asc, .grid-sort-desc, span[data-help], span[data-warning], span[data-info] {
	text-align: left;
	position: relative;
}

span[data-help]:before, span[data-warning]:before, span[data-info]:before {
	border: solid;
	border-color: #888888 transparent;
	border-width: 1em 1em 0 1em;
	bottom: 1em;
	content: "";
	display: block;
	left: 1.2em;
	position: absolute;
	z-index: 99;
	display:none;
}

span[data-help]:after, span[data-warning]:after, span[data-info]:after {
	background: #888888;
	border-radius: .5em;
	bottom: 1.7em;
	color: #fff;
	content: attr(data-help);
	left: 0.8em;
	padding: .3em 1em;
	position: absolute;
	width: 500px;
	z-index: 98;
	text-shadow: none;
	display:none;
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
}

span[data-info]:after {
		content: attr(data-info) !important;
}

span[data-help].list:after {
	white-space: pre-line;
}

span[data-help].edge:after {
	left: initial;
	right: -3em;
}

	.grid-sort-asc:before, .grid-sort-desc:before {
		/* Arrow of tooltip background */
		left: 12%;
		border: solid;
		border-color: #888888 transparent;
		border-width: 0.5em 0.5em 0 0.5em;
		bottom: 85%;
		content: "";
		display: block;
		position: absolute;
		z-index: 99;
		display:none;
	}

	.grid-sort-asc:after, .grid-sort-desc:after {
		/* Tooltip background */
		font-size: 0.8em;
		background: #888888;
		border-radius: .5em;
		bottom: 115%;
		color: #fff;
		content: "A-z";
		left: -0.3em;
		padding: 0em 0.4em;
		position: absolute;
		z-index: 98;
		text-shadow: 1px 1px 1px black;
		display:none;
		box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	}

	.grid-sort-asc:after {
		content: "A-z";
	}

	.grid-sort-desc:after {
		content: "Z-a";
	}


span[data-warning]:after {
	content: attr(data-warning);
}

.grid-sort-asc:hover:before, .grid-sort-asc:hover:after ,
.grid-sort-desc:hover:before, .grid-sort-desc:hover:after ,
span[data-help]:hover:before, span[data-help]:hover:after {
	display:block;
}
span[data-warning]:hover:before, span[data-warning]:hover:after {
	display:block;
}
span[data-info]:hover:before, span[data-info]:hover:after {
	display:block;
}

span[data-help]:hover i {
	color:#aecbea !important;
}

span[data-warning]:hover i {
	color:#ff9800 !important;
}

span[data-info]:hover i {
	color:#dbbd18 !important;
}

.jq-post-float-int {}
.jq-to-kg {}

span.selectbox_tag_label.add-green {
	background-color: #d8f6d8;
}

.section-group-header {
	font-weight:bolder;
	border-bottom: 1px dashed #999999;
	padding: 10px !important;
}

.section.group.saved input, .section.group.saved select {
	background-color: #d8f6d8;
}

.tw-toggle {
	position:relative;
}

.tw-toggle label {
	text-align: center;
	padding: 0 4px;
	font-family: sans-serif;
	display: inline-block;
	color: #95A5A6;
	position:relative;
	z-index:2;
	margin: 0;
	text-align: center;
	font-size: 0.8em;
}

.tw-toggle label i.fa  {
	font-size: inherit;
	color: inherit;
	text-shadow: none;
}

.tw-toggle input {
	position: absolute;
	z-index: 3;
	opacity: 0;
	cursor: pointer;
	width: 16px;
	height: 16px;
}

.tw-toggle input[disabled="disabled"] {
	cursor:not-allowed;
}

.tw-toggle span {
	height: 1.2em;
	width: 1.2em;
	border-radius: 50%;
	background:#fff;
	display:block;
	position:absolute;
	top: 2px;
	transition:all 0.3s ease-in-out;
}

.tw-toggle input[value="0"]:checked ~ span{
	background:#e74c3c;
	left: calc(50% - 2em);
}

.tw-toggle input[value="-1"]:checked ~ span{
	background:#95A5A6;
	left: calc(49% - 0.5em);
}

.tw-toggle input[value="1"]:checked ~ span{
	background:#27ae60;
	left: calc(50% + 1em);
}

.tw-toggle input[value="-1"]:checked + label, .tw-toggle input[value="0"]:checked + label,.tw-toggle input[value="1"]:checked + label {
	color:#fff !important;
}

/* EXPERIMENTAL CSS GRID/FLEX */
.exp_datagrid {
	display:grid;
}

span[data-help] {
	cursor: help;
}

.color-red {
	color: red;
}

.cfa-price-one-contract {
	color:#1fd41f !important;
	padding-right: 2px;
}
.cfa-price-one-contract:before {
	content: "\f058";
}
.cfa-price-choose-contract {
	color:#f3e640 !important;
	text-shadow: 0 0 2px #333 !important;
	margin-left: 2px;
}
.cfa-price-choose-contract:before {
	content: "\f059";
}
.cfa-price-last-buyin {
	color:#009247 !important;
}
.cfa-price-last-buyin:before {
	content: "\f28b";
}
.cfa-price-base {
	color:#ffa500 !important;
	margin-left: 2px;
}
.cfa-price-base:before {
	content: "\f28b";
}
.cfa-price-missing {
	color:#ff0000 !important;
}
.cfa-price-missing:before {
	content: "\f057";
}
.cfa-price-calculated {
	color:#009247 !important;
}
.cfa-price-calculated:before {
	content: "\f1ec";
}
.cfa-price-avg-buyin {
	color:#009247 !important;
}
.cfa-price-avg-buyin:before {
	content: "\f080";
}
.cfa-price-manual {
	color:#f3e640 !important;
	text-shadow: 0 0 2px #333 !important;
	margin-left: 2px;
}
.cfa-price-manual:before {
	content: "\f071";
}

.fa-ph {
	display: inline-block;
	width: 12px;
}

@keyframes blink {
	0% { color: white; }
	100% { color: red; font-weight:bolder; text-shadow: 0 0 5px white;}
}
.blink {
	animation-name: blink;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes inline-blink {
	0% { color: #8A8A8A; }
	100% { color: red; font-size: 2em;background-color:white}
}

/* should use only for fontawesome action icon buttons (e.g. productioncharge pallet input lines */
@keyframes attention2 {
	0% { color: white }
	100% { color: red; text-shadow: 0 0 5px white; }
}
.attention2 {
	animation-name: attention2;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes attention {
	0% { color: white; background-color: red;text-shadow: 1px 1px 1px rgba(0,0,0,1) }
	100% { color: black; background-color: white }
}
.attention {
	animation-name: attention;
	animation-duration: 2s; /* ideally keep in sync with action-button:focus class*/
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media only screen and (max-width: 90em) {
	.info-panel {
		display: none;
	}

	.main {
		font-size: 0.8em;
	}

}