/* 1. IMPORT SECTION */

	@import url("http://fonts.googleapis.com/css?family=Raleway:200,300,600,700&subset=latin,latin-ext");
/*algemeen*/
.verberg {
	display:none;
}
.container {width:100% !important;}
.row {margin-right:0px !important; margin-left:0px !important;}
.col-xs-12, .col-sm-12 {padding-left:0px !important; padding-right:0px !important;}
.w300 {width:300px;}
.span_after span {margin-left:10px;}
.font80 {font-size:80%;}
.mtb20 { margin-top:20px !important; margin-bottom:20px !important;}
.mb20 { margin-bottom:20px !important;}
.mt20 { margin-top:20px !important;}
.ml0 {margin-left:0px !important;}

.tac {text-align:center;}

.favo_kleur { color:#ffd900; }
.inactief { opacity:0.5; color:#969696; }
.kritisch_kleur { color:#f50a29 !important; }
.urgent_kleur  { color:#ff9900 !important; }

.clickable {cursor:pointer;}

/*navigatiebars*/
#navtop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
	z-index:99;
}
#navtop .navbar {margin-top:0px; margin-bottom:0px; border-radius:25px 25px 0px 0px;}
#navbottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
	z-index:99;
}
#navbottom .navbar {margin-top:30px; margin-bottom:0px; border-radius:0px 0px 25px 25px;}

#navtop .st-navbar { background:#0c508f; height:100px;}
#navbottom .st-navbar { background:#0c508f; height:100px;}
.navbar-center { text-align:center; }
.nav { font-weight:bold; }

.icondiv {width:100px;}
.titeldiv {width:calc(100% - 200px);}
.icondiv_onder {margin:auto;}

/*button in navigaties*/
.button-menu, .menu { 
	text-align:center;
 }

.menu .btn-menu,
.menu .ibtn-menu {display:block;}

.menu.menu-mini {
	display:inline-flex;
	width: 100%;
	height: 100px;
}

.menu-mini div {
	margin-top:auto;
	margin-bottom:auto;
}
.icondiv {width:100px;}
.titeldiv {width:calc(100% - 200px);}
.icondiv_onder {margin:auto;}

.titel-menu-mini {color:#efefef; font-size:36px;}

.ibtn-menu {
	margin-top:30px;
	margin-bottom:30px;
	color:#035c9d;
}

.ibtn-menu-mini {
	color:#efefef;
}

.menu .item-menu {
	display:inline-flex;
	width:100%;
}


/*content blokken*/
section.contentblock {
	margin-top:100px;
    /*padding-top: 25px;*/
    /*padding-bottom: 125px;*/
	height:calc(100vh - 200px);
	border-left:3px solid #0c508f;
	border-right:3px solid #0c508f;
}

.scrollsection {overflow-y: auto;}

#hoofdmenu.scrollsection,
#locatiemenu.scrollsection,
#winkelmenu.scrollsection,
#bibmenu.scrollsection {
	padding-top:25px;
	padding-bottom:125px;
	height:calc(100vh - 200px);
}

#winkelmenu .item-menu div,
#locatiemenu .item-menu div{
	font-size:30px;
	color:#035c9d;
}

#winkelmenu .item-menu .item_naam,
#locatiemenu .item-menu .item_naam {
	margin-left:25px;
	width:80%;
	text-align:left;
}

#winkelmenu .item-menu .item_aantal,
#locatiemenu .item-menu .item_aantal {
	margin-right:25px;
	width:20%;
	text-align:right;
}

.item_ndf {margin:auto;}

.menu-hr {
	background-color: #efefef;
    height: 1px;
    border: 0;
 }

#uom_overzicht.scrollsection,
#cat_overzicht.scrollsection,
#loc_overzicht.scrollsection,
#winkel_overzicht.scrollsection {
	height:calc(100vh - 340px);
}

#prod_overzicht.scrollsection {
	height:calc(100vh - 275px);
}

#prod_formulier.scrollsection {
	height:calc(100vh - 200px);
}


#uom_add,
#cat_add,
#loc_add,
#winkel_add {
	border-top: 1px solid #efefef;
	background:#8da9c3;
}

#uom_search,
#cat_search,
#loc_search,
#winkel_search,
#prod_search {
	border-bottom: 1px solid #efefef;
	background:#8da9c3;
}

/*forms*/
label, .label {
	font-weight:bold important;
	margin-right:25px;}

.form_item.big_ckb input {
	width:30px;
	height:30px;
	margin-right:15px;
	vertical-align:middle;
}

.ibtn-menu-mini {
	cursor:pointer;
}

.form_veld {
    height: 40px;
    padding-left: 10px;
    font-size: 16px;
    outline: 1px solid #efefef;
    border: unset;
    outline-offset: -1px;
}

.form_veld.klein_veld {
	width:80px;
}

.form_btn {
    border: unset;
    outline-offset: -1px;
}

.form_btn {
	height: 40px;
    width: 40px;
}

.form_btn.zoek_btn {
	outline: 1px solid #efefef;
	background-color: #efefef;
    color: #035c9d;
}

.form_btn.add_btn {
	outline: 1px solid #efefef;
	background-color: #6edb60;
    color: #19251a;
}

.form_btn.switch_btn {
    border: 1px solid #efefef;
    background: #2781c3;
    color: #fefefe;
}

.form_btn.aantal_plus_btn {
    border: 1px solid #efefef;
    background: #6edb60;
    color: #19251a;
}

.form_btn.aantal_min_btn {
    border: 1px solid #efefef;
    background: #c32727;
    color: #fefefe;
}

#uom_search, #uom_add,
#cat_search, #cat_add,
#loc_search, #loc_add,
#winkel_search, #winkel_add,
#prod_search {
	width:100%;
	height:70px;
}

.search_form,
.add_form {
	display:inline-flex;
	width:100%;
	height:70px;
}

.search_form .form_item,
.add_form .form_item {
	margin-top:auto;
	margin-bottom:auto;
}

.search_form .form_item.item {
    margin-left: auto;
}

.add_form .form_item.item {
    margin-left: 25px;
}

.search_form .form_item.knop {
    margin-right: 25px;
}

.add_form .form_item.item {
    width: 85%;
}

.add_form .form_item.item .form_veld {
    width: 100%;
}

.add_product_form {
	padding-top:25px;
}

.add_product_form .form_item {
	margin-bottom:25px;
	text-align:center;
}

.form_item_group {
    text-align: center;
}
.form_item_group .form_item {
    display: inline-flex;
}


/*overzichtslijsten*/

.lijst-hr {
	background-color: #efefef;
    height: 1px;
    border: 0;
	margin-top:10px;
	margin-bottom:10px;
 }
 
 .bib-lijst, .lijst { 
	text-align:center;
 }

.lijst .lijst-item {
	display:inline-flex;
	width:100%;
	height:30px;
}

.item_ndf, .item_del, .item_naam, .item_aantal {
    margin-top: auto;
    margin-bottom: auto;
}

.item_ndf {
	width:100%;
}

.item_del.actief {
	color:#a71c1c;
	cursor:pointer;
}

.item_del {
    width: 10%;
}

.item_naam {
    width: 80%;
    font-size: 16px;
    text-align: left;
    color: #035c9d;
}

.item_aantal {
    margin-right: 25px;
    width: 10%;
    text-align: right;
    font-size: 16px;
    color: #035c9d;
}

.icon_groep {
	display:inline-flex;
	margin-top:auto;
	margin-bottom:auto;
	margin-left:50px;
	color:#8f8f8f;
}
.icon_groep span {margin-right:5px;}

.item_favo {
	cursor:pointer;
	margin:auto;
}

.detail_naam {
    font-size: 250%;
    color: #0c508f;
}

.detail_uom {
    font-size: 150%;
}

.detail_aantal {
    font-size: 150%;
}

.detail_cat span {
    margin-left: 10px;
    margin-right: 10px;
}

.detail_favo {
	cursor:pointer;
	color:#8f8f8f;
}


	


/*
.btn-menu{
	background-color: #ddc8f1;
	border-radius: 10px;
	border: 3px solid #035c9d;
	color: #035c9d;
	padding: 18px 14px;
	font-weight:bold;
	font-size:35px;
	margin:20px 25px 30px 25px;
	height:100px;
}

.btn-menu:hover{
	background-color: #035c9d;
	border-radius: 10px;
	border: 3px solid #035c9d;
	color: #efefef;
	padding: 18px 14px;
	font-weight:bold;
	font-size:35px;
	margin:20px 25px 30px 25px;
	height:100px;
}
*/

/* 2. BASIC STYLES */

	html, body {
		height: 100%;
	}

	body {
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
		line-height: 1.7857;
		letter-spacing: 0.075em;
		color: #333333;
		background-color: #fff;
	}

	a { 
		color: #000;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	a:hover {
		color: #000;
	}

	a, a:hover, a:active, a:focus, button:focus {
		outline: 0;
		border: 0;
		text-decoration: none;
	}

	#st-preloader {
		background: #FFF;
		bottom: 0;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 9999;
	}

	p {
		line-height: 1.5;
	}

	h1, h2, h3, h4, h5, h6{
		font-family: 'Raleway', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
	}
	.lijst {font-family:Verdana; font-size:12px; color:#000000;}
	.subtitel {font-family:Verdana; font-size:13px; color:#0077D1; font-weight:bold;}
	.subtitel-licht {font-family:Verdana; font-size:15px; color:#F5F5F5; font-weight:bold;}
	
	input, textarea{
		outline: none;
	}

	/*label{
		font-weight: 300;
	}*/

	#pre-status,
	.preload-placeholder {
		background-image: url(../images/preloader.gif);
		background-position: center;
		background-repeat: no-repeat;
		height: 40px;
		left: 50%;
		margin: -20px 0 0 -20px;
		position: absolute;
		top: 50%;
		width: 40px;
	}

	.preload-placeholder {
		background: none;
		left: 0;
		margin: 0;
		text-align: center;
		top: 65%;
	}


	.overlay{
		background-color: #000;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.8;
	}

	section h2.section-heading {
	  font-size: 25px;
	  margin-top: 0;
	  margin-bottom: 15px;
	}
	section h3.section-subheading {
	  font-size: 16px;
	  font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
	  text-transform: none;
	  font-style: italic;
	  font-weight: 400;
	  margin-bottom: 50px;
	}
	.text-primary {
	  color: #0077D1;
	}



/* formulier */

	#contact{
		background-color: #0077D1;
		padding-top: 50px;
		padding-bottom: 60px;
	}
	
	.contact-info .contact-content{
		margin-bottom: 30px;
	}

	.contact-info p{
		margin-bottom: 20px;
	}

	.contact-info p i{
		font-size: 16px;
		margin-right: 10px;
	}

	.contact-form input[type="text"],
	.contact-form input[type="email"]{
		border: 1px solid #E8E8E8;
		padding: 8px 14px;
		width: 100%;
		margin-bottom: 20px;
	}

	.contact-form textarea{
		border: 1px solid #E8E8E8;
		padding: 8px 14px;
		width: 100%;
		margin-bottom: 20px;
	}

	
/* SCROLL TO TOP */

	.scroll-up {
		position: fixed;
		display: none;
		z-index: 999;
		bottom: 1.8em;
		right: 1.8em;
	}

	.scroll-up ul{
		margin: 0;
		padding: 0;
	}

	.scroll-up li{
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.scroll-up a {
		background-color: #fff;
		display: block;
		width: 40px;
		height: 40px;
		text-align: center;
		color: #000;
		font-size: 20px;
		line-height: 38px;
		box-shadow: 0px 0px 6px #ccc;
	}

	.scroll-up a:hover,
	.scroll-up a:active {
		background-color: #f5f5f5;
		color: #000;
	}