body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 22px;
	color: #666;
	border-top: 3px solid #eee;
	-webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	padding: 1px 0px;
	margin: 1px 0px;
	font-weight: 600;
	color: #666;
}

h5,h6{
	color: #444;
	font-weight: 600;
}

h2{
	font-size: 25px;
	line-height: 35px;
}

h3{
	font-size: 20px;
	line-height: 30px;
}

h4{
	font-size: 16px;
	line-height: 28px;
}

h5{
	font-size: 14px;
	line-height: 27px;
}

h6{
	font-size: 13px;
	line-height: 25px;
}

p{
	padding: 0px;
	margin: 0px;
}

a:hover,a:active,a:focus {
	outline: 0;
}

ul li{
	list-style-type: circle;
	padding: 1px 0px;
}

.bold{
	font-weight: 600;
}

.sep{
	height: 5px;
	background: url("/static/img/sep.png") repeat;
}

hr{
margin:15px 0px 10px 0px;
padding:0px;
border-top:0px;
border-bottom:1px solid #f4f4f4;
height:0px;
}

.bor{
height:5px;
margin:10px 0px 10px 0px;
background:url('/static/img/sep.png') repeat-x;
}

.center{
text-align:center;
}

.horizontal-links a{
	margin-right: 20px;
}

a:hover,a:active,a:focus {
outline: 0;
}

:focus {
	outline:none;
}

::-moz-focus-inner {
	border:0;
}

.well{
	background: #fafafa;
	border: 1px solid #eee;
	padding: 10px 15px;
	box-shadow: inset 0px 0px 2px #eee;
	margin: 10px 0px;
}

/* Form */

form{
   margin:5px 0px;
}

form *{
   font-size:13px;
}

/* Back to top */

.totop {
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 104400;
}

.totop a, .totop a:visited{
	display: block;
	width: 30px;
	height: 30px;
	color: #fff;
	text-align: center;
	line-height: 30px;
}

.totop a:hover {
	color: #fff;
	text-decoration: none;
}


/* Container */

.container{
   max-width:980px;
}

/* Header */

header{
	padding: 10px 0px 5px 0px;
	background: #fafafa url("/static/img/cream.png") repeat;
}

header .logo{
	padding: 0px;
	padding-top: 10px;
}

header .logo h1 a, header .logo h1 a:visited, header .logo h1 a:hover{
	font-size: 35px;
	color: #777;
	text-decoration: none;
	font-weight: 400;
}

header .logo .meta{
	color: #888;
	line-height: 15px;
	padding: 0px;
	margin: 0px;
}

header .logo img {
	width:152px;
}

/* Page heading */

.page-head{
	padding: 20px 0px;
	box-shadow: inset 0px 0px 4px #bbb;
	background: #2a5f99; /* origineel grijs: #f8f8f8; */
	border-bottom: 1px solid #ddd;
	/* wouter toevoeging om vast te zetten: */
	position:fixed;
	z-index:999;
	width:100%;
	top:0;
}

.page-head h2{
	color: #777;
	font-size: 23px;
	line-height: 33px;
}

.page-head h4{
	color: #999;
	font-size: 15px;
}

  h2.top-logo {float:left;margin-top:6px;}
  h2.top-logo a {text-decoration:none;color:white;}
  h2.top-logo img {height:50px;float:left;margin-right:3px;}
  h2.top-logo .tagline {min-width:400px;font-weight:normal;font-size:13px;color:#ddd;line-height:12px;}

/* Responsive */

@media (max-width: 480px){

}

@media (max-width: 767px){


	header{
		padding-top: 10px !important;
		padding-bottom: 0px !important;
		padding-left: 20px;
		padding-right: 20px;
	}
	header .logo{
		text-align: center;
	}
	.navbar{
		margin-top: 10px;
	}

}

@media (max-width: 991px){
	.dropdown-menu a{
		margin: 0px !important;
	}

}

/*
* Wouter changes
*/

.actionstatemessage {
	padding:5px;
	font-size:120%;
	border-radius:3px;
}

.success {
	background-color:green;
	color:white;
}

.fail {
	background-color:#dd3311;
	color:white;
}

div.loginbutton a, div.loginbutton a:visited {
	color:white !important;
	background-color:#aaa;
	border-bottom:2px solid #999;
}

div.cadeaubonlink {
	position:absolute;
	bottom:30px;
	right:10px;
	padding:10px;
	background-color:white;
}

.flexslider div.cadeaubonlink img {
	height:130px;
	width:140px;
}

.page-head {
	padding-bottom:5px;
	padding-top:5px;
}

nav.navbar-collapse{
	padding-left:0;
	padding-right:0;
}

.red {
	color:red;
}

.exampleshop img {
	width:40px;
}

 .helparticle {
 	background:white;
 	border-top:1px solid #ddd;
 	border-left:1px solid #ddd;
 	border-right:3px solid #ccc;
 	border-bottom:3px solid #ccc;
 	padding:8px;
 	font-size:15px;
 }

 .helparticle h2,.helparticle h3,.helparticle h1 {
 	margin-top:10px;
 }

 .helparticle img { 
 	margin:5px;
 	border:3px solid #ddd;
 }

.blog {
	background:#fafafa;
	margin:0;
}

/*
* nav tabs fixes
 */

.nav-tabs {margin-top:4px;margin-bottom:5px;}
.nav-tabs li {margin-bottom:-2px;}
.nav-tabs li a {padding:6px 10px;}

/* CODE KASSA SPECIFIEK */

.reseller-topnav {background:#eee;border-bottom:1px solid #999;font-size:15px;}
.reseller-topnav a {color:#777;text-decoration:none;display:block;padding:2px;float:left;text-align:center;margin-right:10px;}
.reseller-topnav a:hover {background:#ddd;}
.reseller-topnav a.active {background:#bdd0d8;color:#fff;}

.progresstepscontainer {margin-bottom:5px;padding-top:5px;}
.progresstep, a.progresstep {line-height:16px;color:#aaa;display:block;float:left;margin-right:10px;border-radius:2px;text-decoration:none;}
.step-active, a.step-active {border-bottom:2px solid #777;color:#777;}
.step-succesful {background:#aaff55;color:#338877;}

.keypad-container {width:95%;height:150px;margin:auto;user-select: none;}
.keypad-button {border-radius:4px;color:#999;font-size:25px !important;cursor:pointer;float:left;height:35%;width:33%;border:1px solid #aaa;background:#eee;text-align:center;padding-top:12px;}
.keypad-button:hover {background:#ddd;text-decoration:none;color:black;}

.generatedvoucherinfo { border:1px solid #999;background:white;padding:10px;margin-top:5px;color:black;box-shadow: 3px 3px 3px #999;}

table.generatedvouchertable tbody tr th {text-align:right;}
table.generatedvouchertable tbody tr th,table.generatedvouchertable tbody tr td, table.generatedvouchertable span {font-weight:bold;font-size:20px !important;}

.verifieer-footer {margin-top:10px;background:#bdd0d8;color:#5b8090;}

.ajaxloader {text-align:center;}

table.bonnenlijst td {white-space:nowrap;}

/* clearfix */
.clearfix {
	overflow: auto;
}

/* Added some BS4 margin classes */
.m-0 {
	margin: 0 !important;
}
.mt-0,
.my-0 {
	margin-top: 0 !important;
}
.mr-0,
.mx-0 {
	margin-right: 0 !important;
}
.mb-0,
.my-0 {
	margin-bottom: 0 !important;
}
.ml-0,
.mx-0 {
	margin-left: 0 !important;
}
.m-1 {
	margin: 0.25rem !important;
}
.mt-1,
.my-1 {
	margin-top: 0.25rem !important;
}
.mr-1,
.mx-1 {
	margin-right: 0.25rem !important;
}
.mb-1,
.my-1 {
	margin-bottom: 0.25rem !important;
}
.ml-1,
.mx-1 {
	margin-left: 0.25rem !important;
}
.m-2 {
	margin: 0.5rem !important;
}
.mt-2,
.my-2 {
	margin-top: 0.5rem !important;
}
.mr-2,
.mx-2 {
	margin-right: 0.5rem !important;
}
.mb-2,
.my-2 {
	margin-bottom: 0.5rem !important;
}
.ml-2,
.mx-2 {
	margin-left: 0.5rem !important;
}
.m-3 {
	margin: 1rem !important;
}
.mt-3,
.my-3 {
	margin-top: 1rem !important;
}
.mr-3,
.mx-3 {
	margin-right: 1rem !important;
}
.mb-3,
.my-3 {
	margin-bottom: 1rem !important;
}
.ml-3,
.mx-3 {
	margin-left: 1rem !important;
}
.m-4 {
	margin: 1.5rem !important;
}
.mt-4,
.my-4 {
	margin-top: 1.5rem !important;
}
.mr-4,
.mx-4 {
	margin-right: 1.5rem !important;
}
.mb-4,
.my-4 {
	margin-bottom: 1.5rem !important;
}
.ml-4,
.mx-4 {
	margin-left: 1.5rem !important;
}
.m-5 {
	margin: 3rem !important;
}
.mt-5,
.my-5 {
	margin-top: 3rem !important;
}
.mr-5,
.mx-5 {
	margin-right: 3rem !important;
}
.mb-5,
.my-5 {
	margin-bottom: 3rem !important;
}
.ml-5,
.mx-5 {
	margin-left: 3rem !important;
}
.p-0 {
	padding: 0 !important;
}
.pt-0,
.py-0 {
	padding-top: 0 !important;
}
.pr-0,
.px-0 {
	padding-right: 0 !important;
}
.pb-0,
.py-0 {
	padding-bottom: 0 !important;
}
.pl-0,
.px-0 {
	padding-left: 0 !important;
}
.p-1 {
	padding: 0.25rem !important;
}
.pt-1,
.py-1 {
	padding-top: 0.25rem !important;
}
.pr-1,
.px-1 {
	padding-right: 0.25rem !important;
}
.pb-1,
.py-1 {
	padding-bottom: 0.25rem !important;
}
.pl-1,
.px-1 {
	padding-left: 0.25rem !important;
}
.p-2 {
	padding: 0.5rem !important;
}
.pt-2,
.py-2 {
	padding-top: 0.5rem !important;
}
.pr-2,
.px-2 {
	padding-right: 0.5rem !important;
}
.pb-2,
.py-2 {
	padding-bottom: 0.5rem !important;
}
.pl-2,
.px-2 {
	padding-left: 0.5rem !important;
}
.p-3 {
	padding: 1rem !important;
}
.pt-3,
.py-3 {
	padding-top: 1rem !important;
}
.pr-3,
.px-3 {
	padding-right: 1rem !important;
}
.pb-3,
.py-3 {
	padding-bottom: 1rem !important;
}
.pl-3,
.px-3 {
	padding-left: 1rem !important;
}
.p-4 {
	padding: 1.5rem !important;
}
.pt-4,
.py-4 {
	padding-top: 1.5rem !important;
}
.pr-4,
.px-4 {
	padding-right: 1.5rem !important;
}
.pb-4,
.py-4 {
	padding-bottom: 1.5rem !important;
}
.pl-4,
.px-4 {
	padding-left: 1.5rem !important;
}
.p-5 {
	padding: 3rem !important;
}
.pt-5,
.py-5 {
	padding-top: 3rem !important;
}
.pr-5,
.px-5 {
	padding-right: 3rem !important;
}
.pb-5,
.py-5 {
	padding-bottom: 3rem !important;
}
.pl-5,
.px-5 {
	padding-left: 3rem !important;
}

.d-none {
	display: none !important;
}
.d-inline {
	display: inline !important;
}
.d-inline-block {
	display: inline-block !important;
}
.d-block {
	display: block !important;
}

.video-container.example-style-2 {
	position: relative;
	width: max-content;
	height: max-content;
	overflow: hidden;
}
.video-container.example-style-2 .scan-region-highlight {
	border-radius: 30px;
	outline: rgba(0, 0, 0, .25) solid 50vmax;
}
.video-container.example-style-2 .scan-region-highlight-svg {
	display: none;
}
.video-container.example-style-2 .code-outline-highlight {
	stroke: rgba(255, 255, 255, .5) !important;
	stroke-width: 15 !important;
	stroke-dasharray: none !important;
}
.mirror-camera {
	transform: scaleX(-1);
}
.video-container {
	/*height: 333px !important;*/
	margin-bottom: 16px;
}
.black-border-fix {
	margin-bottom: -7px;
}

/* honey pot field */
.non-company {
	display: none;
}


/* progress bar */
.stepper-wrapper {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.stepper-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}
@media (max-width: 768px) {
	.stepper-item {
		font-size: 12px;
	}

}
.stepper-item::before {
	position: absolute;
	content: "";
	border-bottom: 2px solid #ccc;
	width: 100%;
	top: 20px;
	left: -50%;
	z-index: 2;
}
.stepper-item::after {
	position: absolute;
	content: "";
	border-bottom: 2px solid #ccc;
	width: 100%;
	top: 20px;
	left: 50%;
	z-index: 2;
}
.stepper-item .step-counter {
	color: white;
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ccc;
	margin-bottom: 6px;
}
.stepper-item.active {
	font-weight: bold;
}
.stepper-item.active .step-counter {
	border: 2px solid #5CB85C;
}
.stepper-item.completed .step-counter {
	background-color: #5CB85C;
}
.stepper-item.completed::after {
	position: absolute;
	content: "";
	border-bottom: 2px solid #5CB85C;
	width: 100%;
	top: 20px;
	left: 50%;
	z-index: 3;
}
.stepper-item:first-child::before {
	content: none;
}
.stepper-item:last-child::after {
	content: none;
}