/* CSS Document */

/* kleuren */
.donkergrijs-bg { background:#303135; }
.donkergrijs-color { color:#303135; }
.oranje-bg { background:#fdbc22; }
.oranje-color { color:#fdbc22; }


/* vangils styles */
nav.navbar, footer.main-footer { background:#303135;  }
.content-inner { min-height:calc(100vh - 100px); }


/* forms */
input.input-material ~ label.active, textarea.input-material ~ label.active { color:#303135;font-weight:400; }
input.input-material ~ label {  }
	.label-datum { font-size:0.8em!important; top:-10px!important; color:#303135!important; }
textarea.input-material {
    height: 170px;
}
.no-padding-leftright { padding: 30px 0!important;  }
.page-content { position:relative; }
.readonly { color:#aaa!important; cursor:default; }
.readonly:focus { border-color:#eee!important; }

.login-page .form-holder .info { background: #fdbc22!important; color: #303135!important; }
.login-page::before {
  background-image: url(../img/vangils-login.jpg)!important;
  background-position-x: -100px!important;
}
.full-width { width:100%!important; }

.onderdelen-shortlist { width:20%; display:inline-block; vertical-align:top; }
.onderdelen-shortlist nav { padding:40px 0; max-width:350px; }
.medewerker-header, .medewerker-header form { display:inline-block; width:79%; }

	nav#onderdelen {}
	nav#onderdelen ul  { padding:0 30px; margin:0; }
	nav#onderdelen li { list-style:decimal; color:#aaa; font-weight:300; }
	nav#onderdelen li.active { color:#000; font-weight:400; }

.medewerker-header form label { display:inline-block; font-size:14px; }
.heading-row label { font-weight:bold; }
.col5 { width:5%; }
.col10 { width:10%; }
.col20 { width:20%; }
.col30 { width:30%; }
.col40 { width:40%; }
.col50 { width:50%; }
.white { color:#fff!important;  }
.no-margin { margin:0!important; }
.ml15 { margin-left:15px!important; }
.display-none {  display:none!important; }

.mt40 { margin-top:40px!important; }
.p30 { padding:30px; }

.yellow-block { margin:auto; background:#fdbc22; color:#333; padding:40px; margin-top:80px; }
.btn-new { background:#333; color:#fff!important; padding:8px 14px; cursor:pointer; }
.file-row { width:100%; margin-top:20px; }

.error { color:red!important; padding:40px; }
#form_onderdeel { width:100%; }
#form_onderdeel table { width:100%; }
#form_onderdeel table td label{ font-weight:400; font-size:14px; }
#form_onderdeel table td.bold label{ font-weight:600; }

.btn-volgende, #btnVolgende, #btnManco, #send_manco, #scan_locatie, #btnVolgendeFoto, #btnScan { background:#28a745!important; color:#fff; border:none; font-size:16px; padding:8px 14px; text-transform:uppercase; }
#btnManco { background:#d9534f!important; float:right; }


.btn-volgende { display:inline-block; margin:15px; }
.btn-volgende:hover { background:#333!important; color:#fff; text-decoration:none; }

.col-md-center { margin:auto; }
.no-padding-lr { padding-left:0; padding-right:0; }

.akkoord { display:inline-block; background:#28a745; color:#fff!important; padding:6px 8px; border-radius:4px; border:none; }
.akkoord span { font-size:14px; padding-left:10px;color:#fff;  font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif; }

.text-center { text-align:center; }
#mancoError { color:red; }
#next_manco { cursor:pointer; }
#form_onderdeel { width:calc(100% - 40px);margin:20px; }
#form_onderdeel h2 { font-size:42px; }
table.onderdeel-info { max-width:600px; width:100%; float:left;clear:both; }

#loading { display:none; position: fixed; width: 100%; height: 100%; z-index: 99999; background: rgba(0,0,0,0.9); text-align: center; color: #fff; font-size: 28px; }
#loading div { height: 40px; margin: auto; top: calc(50% - 20px); position: absolute; width: 100%; }

#files input { font-size:14px!important; }

li.status-nav-item { margin-right:40px; }
form#status_form select { border:0px; padding:6px 10px; }
form#status_form label { margin-right:10px; }

p.order_opmerking { color:red; font-size:16px; }

#dashboard_page section { padding-top:20px; }

#video video { width:100%; }
#video canvas { display:none; }

#manco-detail { }
	#manco-detail .bold { font-weight:bold }
	#manco-detail ul { padding-left:0; }
	#manco-detail li { list-style:none; border-bottom: 1px solid #ddd; margin-bottom:40px; padding-bottom:40px; float:left; width:100%; }

.lightgray { color:gray; }

.counter { padding-left:4px; padding-right:20px; }
.left { float:left; }
.right { float:right; }
.inline-block { display:inline-block; }
.ml10 { margin-left:10px; }

.demontage-popup { position:fixed; z-index:99999; background:black; width:100%; height:100%;color:#fff; text-align:center;  padding-top:40px;}
.btn-green,
.btn-red,
.btn-orange { color:#fff; border:none; font-size:16px; padding:8px 14px;  }

.btn-green:hover,
.btn-red:hover,
.btn-orange:hover { color:#fff;  }

.btn-green { background:#28a745!important; cursor:pointer; }
.btn-red { background:#d9534f!important; cursor:pointer; }
.btn-orange { background:#fdbc22!important; cursor:pointer; }
.separator { width:20px; display:inline-block; }

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1000px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

.fl { float:left; }
.fr { float:right; }
.w100 { width:100%; }
.w40 { width:40%; }
.ml20 { margin-left:20px; }
.mr20 { margin-right:20px; }

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.counter-link .icon, .counter-link .title, .counter-link .number { float:left; }
.counter-link .icon { margin-top:15px; }
.counter-link .number { margin-top:15px; color:#000; }
.counter-link:hover { text-decoration:none; }
.logout span { position:inherit!important; font-size:16px!important; }

form.scan_locatie .yellow-block { padding:0 40px 40px; margin-top:20px!important; }
form.scan_locatie .barcode_info_block { margin:auto; padding:0!important; }
 	form.scan_locatie .barcode_info_block h3 { line-height:22px;  }

.login-page .form-holder .status-keuze { background:#fff!important; min-height:40vh!important; }
	.status-keuze .content { margin:auto; }
	.status-keuze select { width:100%; height:120px; }
	.status-keuze .btn-primary { font-weight:500!important;   }

#error, .msg_error { display:none; font-size:20px; color:red; vertical-align:middle; margin-bottom:20px; background:white; margin-left:-25px; margin-right:-25px; text-align:center; padding-bottom:20px; }
#error i, #error span, .msg_error i, .msg_error span { display:inline-block; }
#error i, .msg_error i { font-size:110px; width:100%; vertical-align:middle; }
#error span, .msg_error span { width: calc(100% - 80px); font-size:18px;vertical-align:middle; display:inline; }

#success, .msg_success { display:none; color:#07bd30; vertical-align:middle; margin-bottom:20px; background:white; margin-left:-25px; margin-right:-25px; text-align:center;padding-bottom:20px;}
#success div, .msg_success div { width:80%; margin:auto; }
#success i, .msg_success i, #success span, .msg_success span { display:inline-block; }
#success i, .msg_success i { font-size:110px; width:100%;vertical-align:middle; }
#success span, .msg_success span { width: calc(100% - 80px); font-size:18px; vertical-align:middle; display:inline-block;}

#toast, #toast_bezet { display:none; position:absolute; top:10px; left:calc(50% - 160px); width:320px; background:#fff;box-shadow: 0 0 10px #555; padding:20px; border-radius:5px; color:#07bd30; vertical-align:middle; }
#toast i, #toast span, #toast_bezet i, #toast_bezet span { display:inline-block; vertical-align:middle; }
#toast i, #toast_bezet i { font-size:40px; display:none; }
#toast span, #toast_bezet span { margin-left:10px; font-size:13px; }
#toast_bezet { color:#d9534f!important }
#annulerenBlock { transition-delay:0.9; display:none; }
.mb40 { margin-bottom:40px; }

#stap2 { width:100%; }
.no-radius { border-radius:0; }

@media only screen and (max-width: 1024px){
	/*#toggle-btn { display:none; }*/
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
	.logout span { display:none; }
	.logout .fa-sign-out { font-size:25px; }
	#status_form label { display:none; }
	select#status { margin-bottom:0; margin-top:3px; }
}

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

	li.status-nav-item { margin-right:10px; }
	#form_onderdeel h2 { font-size:26px!important; }
	#form_onderdeel h3 { font-size:16px!important; }
	#form_onderdeel table td label { font-size:14px!important; }
	.inpakken-right { float:left; margin-bottom:15px; }

	nav.navbar .menu-btn { display:none; }
	nav.navbar .nav-menu {
		width:100%;
		max-width:calc(100% - 100px);
	}
	li.nav-item {
		width:30%;
	}
	li.status-nav-item {
		width:70%;
	}
	form#status_form select {
		max-width:100%; width:100%;
	}
}