#contentWrapper{
	width: 80vw;
	margin: 0 auto;	
}

#logoimage{
	width: 90%;
	display: block;
	margin: 0 auto;
}

#loginbox{
	width: 60vw;
	background: #FFF;
	height: 60vh;
	/*margin: 0 auto;
	position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);*/
	border-radius: 1vw;
	border: 2px solid #333;
}

#loginbox input{
	padding: 5px 0px;
	margin: 5px 0px;
	font-size: 2em;
	width: 100%;
	border: 2px solid #ccc;
}


#loginbox form{
	display: block;
	margin: 0 auto;
	width: 80%;	 
}

#loginbox h2{
	text-align: center;
	color: #333;
	font-size: 3em;
}

#loginbox input[type="submit"]{
	height: auto;
}

.clientListRow .client div{
	width: calc(100% / 6);
	float: left;
	padding: 5px 0px;
}

.stockTableBox{
	width: 100%;
}

div.turnover_list{
	width: 59vw;
	border: 1px solid black;
	border-radius: 1vw;
	background-color: #fff;
	padding: 1vw;
}



/*------------------- Dashboard boxes --------------------------*/

div.dashboardBox{
	width: 18vw;
	height: 18vw;
	overflow: hidden;
	border: 1px solid black;
	margin: 1%;
	border-radius: 1vw;
	background-color: #fff;
}

div.dashboardBigBox{
	width: calc(72vw + 6%);
	height: 18vw;
	margin: 1.4%;
	border: 1px solid black;
	border-radius: 1vw;
	background-color: #fff;
	overflow: hidden;
}

div.dashboardBigBoxHigh{
	width: calc(72vw + 6%);
	height: 54vw;
	margin: 1%;
	border: 1px solid black;
	border-radius: 1vw;
	background-color: #fff;
	overflow: hidden;
}

div.dashboardMidBox{
	height: 18vw;
	width: calc(36vw + 2%);
	margin: 1%;
	border: 1px solid black;
	border-radius: 1vw;
	background-color: #fff;
	overflow: hidden;
}

div.dashboardBox50{
	width: calc(50% - 3.2%);
	height: 18vw;
	overflow: hidden;
	border: 1px solid black;
	margin: 1.5%;
	border-radius: 1vw;
	background-color: #fff;
}

.dashboardBox .dashboardBoxRow{

}

.dashboardBox .dashboardBoxTitleRow{
	
}

.dashboardBox .dashboardBoxRow .small{
	width:25%;
}

.dashboardBox .dashboardBoxRow .big{
	width:50%;
}

.dashboardBox  .dashboardBoxRow:nth-child(even),
.stockRow:nth-child(odd){
	background-color: #ccc;
}

.dashboardBox  .dashboardBoxRow:nth-child(even),
.stockRow:nth-child(even){
	background-color: #fff;
}

.graphDiv{
	height: 100%;
}

.locTypeBG-11,
.locTypeBG-12,
.locTypeBG-13,
.locTypeBG-14,
.locTypeBG-21,
.locTypeBG-22,
.locTypeBG-23,
.locTypeBG-24{
	background: url('/assets/icons/056-disabled.svg') no-repeat ;
}


.locTypeBG11{
	background: url('/assets/icons/store1.svg') no-repeat ;
}

.locTypeBG12{
	background: url('/assets/icons/004-warehouse.svg') no-repeat ;
}

.locTypeBG14{
	background: url('/assets/icons/horeca.svg') no-repeat ;
}

.locTypeBG15{
	background: url('/assets/icons/010-eco_factory.svg') no-repeat ;
}

.locTypeBG13,
.locTypeBG03{
	background: url('/assets/icons/036-increase.svg') no-repeat ;
}

.locTypeBG02{
	background: url('/assets/icons/001-mobile_storage.svg') no-repeat ;
}

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

.boxTitle{
	font-weight: bold;
	text-align: center;
	font-size: 1.5em;
	line-height: 1.5em;
	display: table-caption;
	
	background-color: #fff;
}

.boxWrapper{
	display: table;
	height: 18vw;
}

.boxCell{
	height: 18vw;
	overflow: none;
	display: table-cell;
}

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




.flexWrap{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap; 
	align-items: stretch;
	font-size: 1em;
}

.dashboardflexBox{
	width: 18vw;
	height: 19vw;
	background: white;
	border-radius: 1vw;
	border: 1px solid #ccc;
	margin-bottom: 2vw;
}


.dashboardflexBox33{
	width: 26vw;
	height: 19vw;
	background: white;
	border-radius: 1vw;
	border: 1px solid #ccc;
	margin-bottom: 2vw;
}

.dashboardlexBoxMid{
	width: 38.5vw;
	height: 19vw;
	background: white;
	border-radius: 1vw;
	border: 1px solid #ccc;
	margin-bottom: 2vw;
} 

.dashboardlexBoxFull{
	width: 80vw;
	height: 19vw;
	background: white;
	border-radius: 1vw;
	border: 1px solid #ccc;
	margin-bottom: 2vw;
} 

.dashboardBoxData{
	display: flex;
	height: 13.5vw;
	flex-direction: column;
	/*justify-content: space-evenly;*/	
	align-items: stretch;
	background-color: #fff;
}

.dashboardBoxData > div:nth-child(even){
	background-color: #ddd;
}

.dashboardBoxGraph{
	display: flex;
	height: 17vh;
}

.dashboardflexBox .flexboxTitle,
.dashboardflexBox33 .flexboxTitle,
.dashboardlexBoxMid .flexboxTitle,
.dashboardlexBoxFull .flexboxTitle
{
	display: flex;
	align-content: flex-start;
	font-weight: bold;
	text-align: center;
	font-size: 1.2vw;
	justify-content: space-evenly;
	height: 2em;
}



.flexTitleSpan{
		
}

.dashboardBoxTitleRow{
	font-weight: bold;
	font-size: 1vw;
}


.dashboardBoxRow{
	flex-grow: 1;
}

.dashboardBoxRow,
.dashboardBoxTitleRow{
	flex-direction: row;
	justify-content: space-evenly;
	display: flex;
	align-items: stretch;
}



.dashboardflexBox .dashboardBoxRow .big,
.dashboardflexBox33 .dashboardBoxRow .big,
.dashboardflexBox .dashboardBoxTitleRow .big{
	width: 70%;
	flex-basis:  auto;
	align-self: center;
}

.dashboardflexBox .dashboardBoxRow .medium,
.dashboardflexBox33 .dashboardBoxRow .medium,
.dashboardflexBox .dashboardBoxTitleRow .medium{
	width: 50%;
	flex-basis:  auto;
	align-self: center;
}

.dashboardflexBox .dashboardBoxRow .small,
.dashboardflexBox33 .dashboardBoxRow .small,
.dashboardflexBox .dashboardBoxTitleRow .small{
	width: 23%;
	text-align: right;
	align-self: center;
}

.fillBox{
	width: 100%;
}

.fillBox .graphDiv{
	display: flex;
	font-size: 1.5em;
	height: 15vw;
}


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

.FormSucces{
	background-color:  rgba(0, 255, 0, 0.3);
	font-size: 1.5vw;
}

.FormError{
	background-color:  rgba(255, 0, 0, 0.3);
	font-size: 1.5vw;
}

#fullForm{
	width: 95%;
	padding-left: 5%;
	margin-top: 20px;
	background: white;
	border-radius: 1vw;
	padding-bottom: 1vh;
	padding-top: 2vh;
}

#fullForm input[type="text"]{
	width: 70%;
	margin: 5px 0px;
	font-size: 2em;
}

#fullForm input[type="password"],
#fullForm #password,
#fullForm #password2{
	width: 30%;
	margin: 10px 0px;
	font-size: 2em;
}


#fullForm .bigBox{
	transform: scale(2);
	font-size: 2em;
}

#fullForm label{
	width: 15%;
	font-size: 2em;
	display: inline-block;
}

#fullForm input[type="submit"]{
	margin: 20px auto;
	font-size: 1.5em;
	height: 2em;
	width: 20%;
	display: block;
}

#fullForm .linkBut{
	width: 9%;
	margin-top: -15px;
	font-size: 1.3em;
}

@media screen and (max-width: 1000px){
 .flexWrap{
	 font-size: 1.5em;
 }
 
 .dashboardflexBox{
	width: 47.5vw;
	height: 47vw;
}
 .dashboardlexBoxMid,
 .dashboardlexBoxFull{
	width: 98vw;
	height: 47vw;
}

.dashboardBoxGraph{
 height: 47vw;	
}

.dashboardflexBox .flexboxTitle,
.dashboardlexBoxMid .flexboxTitle,
.dashboardlexBoxFull .flexboxTitle
{
	font-weight: bold;
	font-size: 1.6em;
}

.dashboardBoxTitleRow{
	font-weight: bold;
	font-size: 1.1em;
}

.fillBox .graphDiv{
	display: flex;
	font-size: 1.2em;
	height: 38vw;
}

}

/* Voor standaard schermen (1x schaal) */
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
	.flexWrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap; 
		align-items: stretch;
		font-size: 1.2em;
	}
  }
  
  /* Voor retina (2x schaal) */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.flexWrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap; 
		align-items: stretch;
		font-size: 1em;
	}
  }
  
  /* Voor super hoge resoluties (3x schaal) */
  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
	.flexWrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap; 
		align-items: stretch;
		font-size: 1em;
	}
  }