html, body {
width:100%; min-width:414px; height:100vh; margin:0; padding:0; font-family:"Open Sans", Helvetica, sans-serif; font-size:16px; line-height:24px; color:#475166; background:#f2f2f2; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

section.header { width:100%; padding:0; position:relative; background-color:#1b3860; height:100px; background-image:url('../images/logo-blue-bg.png'); background-repeat:no-repeat; background-position:center center; background-size:300px auto; 
}
section.content { width:100%; padding:0; position:relative; }
section.content h1 { font-family:Signika, sans-serif; font-size:2em; margin-top:10px; margin-bottom:10px; line-height:1.3; }

article.container { width:100%; text-align:center; }

.logincolumn { display:inline-block; width:50%; vertical-align:top; padding:20px; box-sizing:border-box; position:relative; }
.footnote { display:inline-block; width:100%; margin:40px 0; font-style:italic; font-size:14px; }

.formLine { display:inline-block; width:100%; margin-bottom:10px; }
.formLine label { display:inline-block; width:100%; }
.formLine .userEmail { display:inline-block; height:40px; max-width:250px; line-height:40px; padding:0 8px; border:1px solid #c8cff7; border-radius:3px; }

.aanmelden { position:relative; display:inline-block; font:700 15px/46px 'Open Sans', sans-serif; height:48px; padding:0 24px; border-radius:5px; text-decoration:none !important; color:#fff; transition:all .2s; background:#ec008a !important; color:#fff !important; border:0; margin-top:10px; cursor:pointer; }

.versturen { position:relative; display:inline-block; font:700 15px/46px 'Open Sans', sans-serif; height:48px; padding:0 24px; border-radius:5px; text-decoration:none !important; color:#fff; transition:all .2s; background:#ec008a !important; color:#fff !important; border:0; margin-top:10px; cursor:pointer; }

.versturen.sending { background-color:#c0c0c0 !important; }

.versturen_test { position:relative; display:inline-block; font:700 15px/46px 'Open Sans', sans-serif; height:48px; padding:0 24px; border-radius:5px; text-decoration:none !important; color:#fff; transition:all .2s; background:#c0c0c0 !important; color:#fff !important; border:0; margin-top:10px; cursor:default; }

.versturen_new { position:relative; display:inline-block; font:700 15px/46px 'Open Sans', sans-serif; height:48px; padding:0 24px; border-radius:5px; text-decoration:none !important; color:#fff; transition:all .2s; background:#ec008a !important; color:#fff !important; border:0; margin-top:10px; cursor:pointer; }

.versturen_new.sending { background-color:#c0c0c0 !important; pointer-events: none !important; }

.verifyerror { background-color:#fad1d0; }

.loginerror { display:inline-block; width:100%; padding:10px; margin-bottom:10px; background-color:#cb3d3d; color:#fff; }
.loginwarning { display:inline-block; width:100%; padding:10px; margin-bottom:10px; background-color:#f3940e; color:#fff; }

.booking-container-succes { display:inline-block; width:100%; padding:20px; box-sizing:border-box; text-align:center; background-color:#44bd60; color:#fff; }
.booking-container-warning { display:inline-block; width:100%; padding:20px; box-sizing:border-box; text-align:center; background-color:#f3940e; color:#fff; }
.booking-container-error { display:inline-block; width:100%; padding:20px; box-sizing:border-box; text-align:center; background-color:#cb3d3d; color:#fff; }

.booking-container { display:inline-block; width:100%; padding:20px; box-sizing:border-box; text-align:center; }
.booking-recap { display:inline-block; width:100%; background-color:#fff; max-width:1140px; text-align:left; margin-top:20px; border:1px solid #c0c0c0; padding:20px; box-sizing:border-box; position:relative; }
.booking-recap h1 { margin-top:0 !important; }					
.booking-recap .exit { position:absolute; right:20px; top:20px; padding:8px 10px 5px 25px; border-radius:5px; color:#ec008a; box-sizing:border-box; text-decoration:none; border:1px solid  rgba(0,0,0,0.15); background-image:url('../images/logout.svg'); background-repeat:no-repeat; background-position:5px center; background-size:15px; }					
.booking-recap .exit:hover { background-color:rgba(0,0,0,0.1); }					
.booking-recap-block { display:inline-block; width:70%; vertical-align:top; }					
.booking-recap-block.second { display:inline-block; width:30%; vertical-align:top; text-align:right; }					
.booking-recap-block.wide { width:100%; text-align:center; }					

.booking-complement { display:inline-block; width:100%; background-color:#fff; max-width:1140px; text-align:left; margin-top:20px; border:1px solid #c0c0c0; padding:20px; box-sizing:border-box; position:relative; }
.booking-complement-block { display:inline-block; width:100%; vertical-align:top; }	
.booking-complement-block.bottommargin { margin-bottom:20px; }	

.formLine { display:inline-block; width:100%; padding:5px 0px; box-sizing:border-box; margin-bottom:5px; }		
.formLine label { font-size:14px !important; box-sizing:border-box; background:#1b3860; color:#fff; font-weight:700; padding:0 8px 0 15px; height:40px; line-height:40px; vertical-align:top; display:inline-block; width:160px; text-align:right; }

.formLine input { width:100%; display:inline-block; height:40px; line-height:40px; padding:0 8px; border:1px solid #c8cff7; border-left:0; box-sizing: border-box; }	
.formLine span { vertical-align:top; display:inline-block; width:calc(100% - 160px); }	

.file { position:absolute; left:0; right:0; top:0; bottom:0; margin:0 !important; background:linear-gradient(to right, lightblue 50%, transparent 50%); background-size:200% 100%; background-position:right bottom; transition:all 1s ease; line-height:40px; padding:0 120px 0 10px; box-sizing:border-box; }

.retry { width:100px !important; border-radius:5px; cursor:pointer; position:absolute; right:5px; top:5px; bottom:5px; text-align:center; line-height:30px; background-color:red; color:white; }

.file.done { background:lightgreen; }
.file.error { background:#fad1d0; }
.file a { display:block; position:relative; padding:5px; color:black; }
.file p { padding:0; margin:0; }

.inputcontainer { position:relative; min-height:40px; }
.temphidden { opacity:0; visibility:hidden; }

.extraDriver { display:inline-block; width:100%; border-top:1px solid #c0c0c0; margin-bottom:15px; padding-top:5px; padding-bottom:15px; }
.extraDriver.first { margin-top:15px; }
.hiddenDriver { display:none; }

.addExtraDriver { display:inline-block; width:auto; border:1px solid #c0c0c0; padding:5px 10px; cursor:pointer; border-radius:5px; box-sizing:border-box; }

.filledValue { min-height:40px; padding:7px 0 0 10px; box-sizing:border-box; background-color:#f2f2f2; }


.examples { display:inline-block; width:100%; text-align:center; padding:30px 0; box-sizing:border-box; font-size:0; }
.example-container { display:inline-block; width:33.33%; padding:10px; box-sizing:border-box; }
.example-container img { display:inline-block; width:100%; }

@media only screen and (min-width:0) and (max-width:900px) {
	.example-container { width:50%; }
}

@media only screen and (min-width:0) and (max-width:800px) {
	.booking-recap-block { width:100%; }					
	.booking-recap-block.second { width:100%; text-align:left; }	
}

@media only screen and (min-width:0) and (max-width:700px) {
	.example-container { width:100%; }	
}

@media only screen and (min-width:0) and (max-width:700px) {
	.formLine label { width:100%; text-align:left; }
	.formLine span { width:100%; }
	.formLine input { border-left: 1px solid #c8cff7; }
}