/* /dev.ebws.nl/assets/css/bo.css */

table, caption, tbody, tfoot, thead, tr, th, td, form {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body{
	font-family: "Arial";
	background-color: #c3c4bc;
}

#container{
	display: flex;
  justify-content: center;  
align-items: center; 
 height: 95vh;
}


.flLeft{
	float: left;
}

.flRight{
	float: right;
}

.clear{
	clear: both;
	display: block;
	overflow: hidden;
}

.toggle{
	cursor:pointer;
}

.nodisplay{
	display:none;
}
 
.bg_red{
	background-color: #ff9191;
}

.bg_green{
	background-color: #99ff94;
}

.tLeft{
	text-align: left;
}

.tCenter{
	text-align: center;
}

.tRight{
	text-align: right;
}

.remove{
		color: red;
}

.edit{
	color: green;
}

.link{
	cursor: pointer;
}

.bigText{
	font-size: 24px;
}

.strong{
	font-weight: bold;
}

.icon{
	width: 2em;
}

.rowimg{
	width: 25px;
	display: inline-block;
}

.version{
	font-size: 0.8em;
	color: #999;
	text-align: center;
	margin-top: 10px;
}

.disabledIcon {
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
}

.sort{
	cursor: pointer;
	font-weight: bold;
}

.totalCell{
	font-size: 1.2em;
	font-weight: bold;
}

.emptyRow{
	width: 100%;
	display: block;
	float:left;
	display: table-row;
}

/* - Frame styles - */

#left_bar{
	float: left;
	margin-right: 10px;
	width: 190px;
}

#top_bar, #add_object_bar, #body_block{
	background-color: #fff;
	padding: 5px;
	border-radius: 1vw;
	
}

#top_bar{
	margin-bottom: 1%;
	width: 80vw;
}

#top_bar a{
	font-size: 2em;
	text-decoration: none;
	text-transform: uppercase;
	color: #36444a;
}

#body_block a{
	text-decoration: none;
	text-transform: uppercase;
	color: #36444a;
}

#backIcon{
	width: 1em;
	float: left;
	padding: 0em 0.5em;
}

.linkCol{
	width: 2em;
}


#totalBar{
	background-color: orange;
	Color: white;
	font-size: 2em;
	text-align: center;
}

/* - Menu Styles - */
#menu{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu li{
	background-color: #ddd;
	padding: 5px;
	margin-bottom: 1px;
}

#menu li a{
	width: 120px;
	display: block;
}

/* - chart styles - */

canvas{
	width: 100%;
}

#chartDiv{
	margin-top: 10px;
}

#legend{
	margin-top: -333px;
}

.pie-legend{
	width: 100%;
}

.pie-legend li{
	padding: 5px;
	list-style: none;
}

/* - Table styles - */
table{
	width: 100%;
}

.odd{
	background-color: #ededed;
}

.t_center{
	text-align: center;
}

.turnover_list{
	width: 100%;
}

.total{
	border-top: 1px solid black;
	background-color: #eee;
	padding-top: 3px;
}

.numeric{
	text-align:right;
}
.name{
	width: 150px;
}

.price{
	text-align: right;
	font-weight: bold;
}
		
.va_top{
	vertical-align: top;
}

td{
	padding:2px 5px;
	white-space: nowrap;
}

.linkBut{
	background-color: #194152;
    COLOR: white;
    display: inline-block;
    text-decoration: none;
    border: 1px solid white;
    border-radius: 10px;
    width: 4vw;
    line-height: 2em;
    text-align: center;
    vertical-align: middle;
	cursor: pointer;
}

.linkButRed{
	background-color: #ad0000;
    COLOR: white;
    display: inline-block;
    text-decoration: none;
    border: 1px solid white;
    border-radius: 10px;
    width: 4vw;
    line-height: 2em;
    text-align: center;
    vertical-align: middle;
	cursor: pointer;
}
/* -- Left bar styles -- */
.menuHeader{
		font-size: 30px;
		margin-bottom: 5px;
}

.locName{
	font-weight: bold;
	text-align: center;
	font-size: 2em;
	padding-right: 2%;
}

/* -- Screen buttons with color -- */

#screen_overview{
	border: 1px solid #333;
}

#screenOverview{
	width: 42vw;
}

#screenOverview td{
	width: 150px;
	height: calc(65vh / 8); 
	text-align: center;
	font-weight: bold;
	border: 1px solid #333;
	z-index: 1;
}



#screenOverview td{
	background: #7d7e7d;
	background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); 
	background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); 
	background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); 
	padding: 0px; 
}

#screenOverview td.A, #screenOverview td.N, .soortA, .soortN{	
	background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);  
	background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%);  
	background: linear-gradient(to bottom, #499bea 0%,#207ce5 100%);  
	
	color: white;
}

#screenOverview td.N, .soortN{
	color: #adadad;
}

/*
#screenOverview td.A:hover{
	background: -moz-linear-gradient(top, #207ce5 0%, #499bea 100%); 
	background: -webkit-linear-gradient(top, #207ce5 0%,#499bea 100%); 
	background: linear-gradient(to bottom, #207ce5 0%,#499bea 100%); 
}

#screenOverview td.A:active{
	background: #207ce5;
}


*/
#screenOverview td.S, .soortS{
	background: -moz-linear-gradient(top, #90b57b 0%, #398235 100%); 
	background: -webkit-linear-gradient(top, #90b57b 0%,#398235 100%);  
	background: linear-gradient(to bottom, #90b57b 0%,#398235 100%);  
	
	color: white;
}

#screenOverview td.F, .soortF{
	background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%);  
	background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%);  
	background: linear-gradient(to bottom, #e570e7 0%,#c85ec7 47%,#a849a3 100%);  
	
	color: white;

}
#screenOverview td.M, .soortM{

	background: -moz-linear-gradient(top, #c800e2 0%, #a5009a 100%);  
	background: -webkit-linear-gradient(top, #c800e2 0%,#a5009a 100%);  
	background: linear-gradient(to bottom, #c800e2 0%,#a5009a 100%);  

	color: white;
}

#screenOverview td.Q, .soortQ{
	background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);  
	background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);  
	background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%);  ;

	color: white;
}

#screenOverview td.V, .soortV{
	background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%);  
	background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%);  
	background: linear-gradient(to bottom, #e570e7 0%,#c85ec7 47%,#a849a3 100%);  
	
	color: white;
}

#screenOverview td.B, .soortB{
	background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%);  
	background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%);  
	background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%);  
}

.butDiv{
	width: 100%;
	height: 100%;
	position: relative;
}

.delbutton{
	vertical-align: middle;
	color: white;
	cursor: pointer;
	background-color: white;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	line-height: 30px;
	position: absolute;
	top:0px;
	left: 0px;
}

.editbutton{
	background-color: white;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	line-height: 30px;
	vertical-align: middle;
	cursor: pointer;
	position: absolute;
	top:0px;
	right: 0px;
}

.butText{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}


.buttonForm input[type='text']{
	text-align: center;
	width: 120px;
}

.sendbutton{
	background-image: url('icons/Pencil.png');
	background-color: green;
	width: 12px;
	height: 12px;
	display: block;
	cursor: pointer;
	position: absolute;
	bottom: 0px;
	right: 0px;
}

/* - Screen tabs -*/
/*#screenlistWrap{
	display:inline-block;
	float:right;
	height: 65vh;
	margin-top: -560px;
}*/


#screenlistWrap {
    display: block;
    height: 65vh;
    margin-top: -560px;
	float: none;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
}


#screenlist{
	width: 15vw;
	float: right;
}

#screenlist .toggle{
	background-color: #ddd;
	margin-bottom: 5px;
	padding: 2px 5px;
}

#screenlist .toggle .showList{
	float: right;	
	color: #207ce5;
	cursor: pointer;
}

#screenlist .toggle #addScreen{
	color: #207ce5;
	cursor: pointer;
	padding-right: 5px;
}

#screenlist ul{
	list-style: none;
	padding-left: 0px;
	margin: 0px;
}

#screenlist ul li{
	border-bottom: 2px solid white;
	padding: 5px 0px 5px 5px;
	display: block;
	cursor: move;
}

.listNumber{
	display: inline-block;
	width: 40px;
	border-right: 1px solid white;
	margin-right: 5px;
}

.onScreen{
	font-size: 11px;
	margin-left: -5px;
	margin-bottom: -5px;
	text-align: right;
	padding: 2px;
}

.delScreen{
	color: white;
	cursor: pointer;
	background-color: red;
	width: 15px;
	height: 15px;;
	font-size: 10px;
	padding-bottom: 2px;
	text-align: center;
	float: right;
	margin-right: 5px;
}


#screenForm{
	
}

#screenForm input[type="number"]{
	width: 40px;
	margin-right: 5px;
}

#screenForm input[type="text"]{
	width: 157px;
}

#sendButton{
	width: 18px;
	background-color: green;
	height: 18px;
	float: right;
	color: white;
	text-align: center;
	margin-right: 5px;
	font-size: 9px;
	line-height: 18px;
	cursor: pointer;
}
/* - Form Styles - */

select{
	font-size: 1em;
}

.priceBox{
	width: 90px;
	text-align: right;
	font-size: 1em;
}

.inputBox{
	width:150px;
	display: inline-block;
	font-size: 1em;
}

input[type="button"],input[type="submit"], button{
	margin-left: 10px;
	width: 150px;
	display: inline-block;
	background-color: #194152;
	border: 1px solid #333;
	margin-right: 10px;
	height: 30px;
	border-radius: 1vw;
	color: #fff;
}

input[type="button"]:hover,input[type="submit"]:hover, button:hover{
	background: #235970;
}

input[type="submit"].nodisplay{
	display:none;
}

button{
	width: 5vw;
}


/* - Add product From - */

form#add_product{
	
}

#omschr, .message{
	width: 200px;
}

#addProduct label,
#editProduct label{
	width: 80px;
	display: inline-block;
	line-height: 1.5em;
}

#addProduct input[type="text"], #addProduct input[type="number"],
#editProduct input[type="text"], #editProduct input[type="number"]
{
	margin-bottom:  5px;
}

#viewBut{
	width: 150px;
	height: 72px; 
	text-align: center;
	font-weight: bold;
	border: 1px solid #333;
	z-index: 1;
	vertical-align: middle;
	display: table-cell;
}





/* --------------- STARTUP Screen ----------------------*/
	.selectLocDiv{
		width: 19.35vw;
		height: 19.35vw;
		margin: 3px;
		background-color: #fff;
		border-radius: 1vw;
		cursor: pointer;
	}
	
	.smallBlock{
		width: 15.35vw;
		height: 15.35vw;
	}
	
	.locationName{
		text-align: left;
		height: 15%;
		line-height: 1.5em;
		font-size: 2em;
		padding-top: 2%;
		padding-left: 2%;
		vertical-align: center;
		color: white;
		background-color: #999;
		border-radius: 1vw 1vw 0vw 0vw;
		
	}
	
	.locationNumber{
		height: 45%;
		text-align: center;
		font-size: calc(2vw + 2vh + 2vmin);
		padding-top: 30%;
		color: #36444a;
		background-position: center;
		background-size:60%;
	}
	
	.locNrSpan{
		margin-right:0.5vw;
		display: inline-block;
		margin-top: -45%;
		background: url('/assets/icons/stamp.svg') no-repeat;
		width: 4vw;
		height: 4vw;
		line-height: 70%;
		text-align: center;
		color: white;
		padding-top: 1.2vw;
		font-size: calc(1vw + 1vh + 1vmin);	
	}
	
	.locationLink{
		height: 10%;
		line-height: 25px;
		text-align: center;
		font-size: 1em;
	}
	
	.boxIcon{
		width: 50%;
		margin-top: -15%;
	}
/* -------------------------------------------------------*/	


/* ---------------------- Div Tabellen -------------------*/
.rTable {
   display: table;
   width: 100%;
}
.rTableRow {
   display: table-row;
   width: 100%;
}

.rTableRow:nth-child(odd){
	background-color: #ededed;
}

.rTableHeading {
   display: table-header-group;
   background-color: #ddd;
   width: 100%;
}
.rTableCell, .rTableHead {
   display: table-cell;
   padding: 3px 5px;
   vertical-align: middle;
   /*border: 1px solid #999999;*/
}
.rTableHeading {
   display: table-header-group;
   background-color: #7eaffc;
   font-weight: bold;
}
.rTableFoot {
   display: table-footer-group;
   font-weight: bold;
   background-color: #ddd;
}
.rTableBody {
   display: table-row-group;
}

.rTableCell.big{
	font-weight: bold;
}

.caption{
	display: table-caption;
}

.batchRow{
	background-color: #ededed;
	   display: table-row;
   width: 100%;
   text-align: bottom;
}

.batchRow > div{
   border-bottom: 2px solid #555;
}

.bagsRow {
    display:table-row;
}
.bagsRow.table-hidden{
    display:none;
}
/* ------------------------------------------------------- */	


/* ------------------------------------------------------- */

#stock{background-color: red; color: white; display: block; width: 100%; text-align: center; font-size: 2em; position: -webkit-sticky; /* Safari */ position: sticky; top: 0;}
#lastsync{color: white; display: block; width: 100%; text-align: center; font-size: 0.6em; position: -webkit-sticky; /* Safari */ position: sticky; bottom: 0;}

/*
#camField{	
	width: 60vw;
	overflow: hidden;
}

#camera_reader{
	margin:  -10vw auto 0px auto;
}
*/

#QRForm, #CamForm, #doneForm, #continueForm, #deleteForm{
	font-size: 2em;
	display: block;
}


#QRForm #addButton,
#deleteForm button,
#CamForm button,
#continueForm button
{
	height: 60px;
	font-size: 1.4em;
	padding: 5px 20px;
	width: 90%;
	display: block;
	margin: 0 auto;
	background-color: #ad0000; 
	color: #FFF;
}

#QRForm #addButton,
#scanDone{
	height: 60px;
	font-size: 1.4em;
	padding: 5px 20px;
	width: 90%;
	display: block;
	margin: 0 auto;
	color: #FFF;
	background-color: #006600;
}

#QRForm #addButton{
	width: 40%;
}

#qrr-output, #qrr-ok, #qrr-close{
	display: none;
}

#qrr-container{
	width: 60vw;
	margin: 0 auto;
}

#scanForm{
	display: block;
	/*float: left;*/
	margin-top:  -10000px; 
}

#scanfield{
	font-size: 1em;
}


	#qrcode{
		width: 50vw;
		margin: 0 auto;
		padding-bottom: 5vh;
		padding-top: 5vh;
	}
	

/* ------------------------------------------------------- */

@media print{
	
	#content{
		float: none;
	}
	
	#mutation_bar, #left_bar, #top_bar{
		display: none;
	}
	
	@page {
		size: portrait;
		margin: 15px;
	}
	
	code{
		
		font-size: 0.96em;
		float: none;
	}
	
	.page-end{
		page-break-after: always;
	}
	
	.stockRow{
		display:none;
	}
	
	
	.batchRow{
		background-color: white;
	}
	 .prhide{
		display: none; 
	 }
	
	.pram,.prgram,.prbag,.prart{
		width: 14%;
		display: inline-block;
		text-align: right;
	}
	
	.prdesc{
		width: 35%;
		display:  inline-block;
	}
	
}

@media screen and (max-width: 1200px){
	#top_bar{
		width: 98vw;
		font-size: 1.5em;
	}
	
}

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

#camField{	
	overflow: hidden;
}


#qrr-container{
	width: 98vw;
	height: 25vh;
	overflow: hidden;
}

	#contentWrapper{
		width: 100%;
	}
	
	.stockTableBox{
		font-size: 2.5em;
	}
	
	.selectLocDiv{
		width: 48vw;
		height:48vw;
		margin: 5px auto;
		border: 3px solid #ddd;
	}
	
	.stockRow input[type="text"]{
		font-size: 0.8em;
		width: 15vw;
	}
	
	 
	.bagsRow{
		font-size: 1.5em;
	}
	
	div.dashboardBox{
	width: 48%;
	height: 300px;
	overflow: hidden;
	border: 1px solid black;
	margin: 1.5% auto;
	}
	
	.locationName{
		font-size: 3em;
	}
	
	.locationNumber{
		font-size: 8em;
	}
	
	#loginbox{
	width: 90%;
	height: 100vh;
	}
	
	.rTableCell, .rTableHead{
		font-size: 1.4em;
	}

	#top_bar{
		width: 98vw;
		font-size: 1em;
	}
}