fbody, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
img {
    max-width: 100%;
    max-height: 100%;
}

*, ::after, ::before {
    box-sizing: unset;
}

.dropbtn,
body{ 
	font-family: 'Open Sans', Segoe UI, Arial, Helvetica, sans-serif; 
	font-size:60%;
	background-color:#f1f1f1;
	color:#333;
	margin:0;
	padding:0;
} 
@media (min-width: 995px){
	.dropbtn,
	body{
		font-size: 85%;
		line-height:1.5;
	}
}
body a,
body a:visited
{ 
	text-decoration:none;
	color:#333;	
} 


.container {
    width: 100%;
    margin: 0 auto;
	background-color:#f8f8f8;
	border:1px solid #ccc;
	padding-left: 0;
    padding-right: 0;
}
@media (min-width: 995px){
	.container{
		width: 995px;
	}
}

#header {
	height:140px;
	border-top:1px solid #ccc;
	background-color :#859aa7;
	position:relative;
	overflow: hidden;
	color: #f4f4f4;
	font-size: medium;
}
@media (max-width: 995px){
	#header {
		height: 75px;
	}
}
#header #logo{
	width:70%;
    height:85%;
	float:left;
	padding-top: 10px;
}

#header #tagline{
	width: 30%;
	height: 100%;
	float:left;
}
#header #tagline span{
    position: absolute;
    top: 23%;
}
#header #tagline #address{
	position: absolute;
	bottom: 5%;
}
#header #address a{
	width: 100%;
	color: #f4f4f4;
	font-size: medium;
}
@media (max-width: 995px){
	#header #tagline{
		display: none;
	}
}

#header #menu_bars{
	display:none;
}
@media (max-width: 995px){
	#header #menu_bars{
		display: inline-block;
		width: 30%;
		height: 75px;
		text-align: center;
		font-size: small;
		padding-top: 20px;
	}
	#header #menu_bars a{
		display: block;
        vertical-align: middle;
		color: black;
       text-decoration: none;
	}
	#header #menu_bars i{    
	    font-size: x-large;
	}
}


#banner img{
	display: block;
}

.contact_bar {
	width:100%;
    background-color: #d7e1e6;
}
.contact_bar button {
	background-color: #3f546d;
    font: inherit;
    font-size: larger;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
	color: white;
	padding: 6px 10px 6px 10px;
	cursor: pointer;
}
.contact_bar button:hover
{
	background:whitesmoke;
	color:#3f546d;
}
.contact_bar div{
	display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 4px;
    margin-top: 4px;
}

.contact_bar .info div a{
    text-decoration: none;
    color: #333;
}

@media screen and (max-width: 995px) {
	.contact_bar{
		display: inline-block;
	}
	.contact_bar .button {
		width: 30%;
		display: flex;
		justify-content: center;
		float: left;
		bottom: -10px;
		position: relative;
	}
	.contact_bar .info {
		width: 60%;
		justify-content: center;
		align-items: center;
		float: right;
	}
	.contact_bar button {
		font-size: inherit;
	}
	.contact_bar div{
		display: inline-block;
		margin-left: 8px;
		margin-right: 8px;
		margin-bottom: 4px;
		margin-top: 4px;
	}
}


#nav_desktop{
	display:block;
}
#nav_mobile{
	display:none;
}
	
#navigation {
	width:100%;
	background-color :#b2c7d4;
}

#navigation a,
#navigation a:visited{
	text-decoration:none;
	color: #f4f4f4;
}

.topnav .dropdown{
    position: relative;
    display: inline-block;
	text-align: center;
}

#navigation .dropdown:hover .dropbtn,
#navigation .dropdown:hover .dropbtn a
{
	background:#9d9d9d;
}

#navigation .dropbtn {
	border: none;
    background-color: inherit;
	color: #f4f4f4;
	font-size:initial;
	cursor: pointer;
	width: 100%;
	height: 38px;
}
#navigation .dropbtn a{
	display: block;
    padding: 7px;	
    padding-left: 30px;
    padding-right: 28px;
}

.topnav .dropdown-content{
	display: none;
    position: absolute;
    z-index: 1;
	width: auto;
	background:#333;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	/*border-top-left-radius:10px; 
	border-top-right-radius:10px;*/
	color:#fff;
	padding:12px;
	list-style:none;
	font-weight:normal;
}

@media screen and (max-width: 995px) {
	#nav_desktop{
		display:none;
	}
	#nav_mobile{
		display:block;
	}
	.topnav {
		display:none;
	}
	
	.topnav.responsive,
	.topnav.responsive .dropdown
	{
		display:block;
	}

	.topnav .dropdown-content.responsive 
	{
		display:block;
	}	
	.topnav .dropdown-content{
	    width: 100%;
		padding:12px 0 12px 0;
	}
}


#navigation .dropdown-content a{
    padding: 5px;
    margin: 5px;
    display: inline-block;
	white-space: nowrap;
}

@media screen and (min-width: 995px) {
	#navigation .dropdown:hover .dropdown-content {
		display: block;
	}
}

#navigation .dropdown-content a:hover {
	color:#333;
	background:#eaeaea;
	border-radius:10px;
	padding:5px;
}

@media screen and (min-width: 995px) {
	body.openingsuren #openingsuren ,
	body.openingsuren #openingsuren .dropbtn ,
	body.openingsuren #openingsuren .dropbtn a,
	body.openingsuren #openingsuren:hover,
	body.over_ons #over_ons,
	body.over_ons #over_ons .dropbtn,
	body.over_ons #over_ons .dropbtn a,
	body.over_ons #over_ons:hover,
	body.dringend #dringend,
	body.dringend #dringend .dropbtn,
	body.dringend #dringend .dropbtn a,
	body.dringend #dringend:hover,
	body.contactlenzen #contactlenzen,
	body.contactlenzen #contactlenzen .dropbtn,
	body.contactlenzen #contactlenzen .dropbtn a,
	body.contactlenzen #contactlenzen:hover,
	body.alg_info #alg_info,
	body.alg_info #alg_info .dropbtn,
	body.alg_info #alg_info .dropbtn a,
	body.alg_info #alg_info:hover
	{
		color:#333;
		background:#f8f8f8;
	}
}

body.welcome .contact_bar{
	display: none;
}

body.openingsuren #banner,
body.over_ons #banner,
body.dringend #banner,
body.contactlenzen #banner,
body.afspraak #banner,
body.alg_info #banner
{
	display: none;
}

#content {
    margin-left: 4%;
    margin-right: 4%;
}

#content .text-block{
	display: inline-block;
	margin-top: 10px;
    margin-bottom: 20px;
}

#content .welcome{
    text-align: center;
	
}

#content .welcome .tagline{
    display: none;
	color: #45728e;
}
@media (max-width: 995px){
	#content .welcome .tagline{
		display: inherit;
		font-size: larger;
	}
}

#content .welcome .opening_text{
	display: inline-block;
    text-align: center;
	margin: 10px;
}

#content .welcome .open{
	color: green;
    font-size: large;
}

#content .welcome .gesloten{
	color: red;
}
#content .welcome .info_text{
	color: #858b92;;
}

.buttontable .big_button:hover
{
	background:#9d9d9d;
}

.buttontable .big_button{
	width: 200px;
    line-height: 70px;
    display: block;
    text-align: center;
	background-color: #3f546d;
	color: white;
	border: none;
    border-radius: 8px;
	font-size: large;
	padding-bottom:6px;
	padding-left: 5px;
    padding-right: 5px;
	margin-left: 45px;
    margin-right: 45px;

	/*
	display: block;
    margin-left: 45px;
    margin-right: 45px;
	width: 200px;
	line-height: 70px;
	height: 70px;	
    background-color: #3f546d;
    font: inherit;
	font-size: large;
	text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 8px;
	cursor: pointer;
	margin: 15px 0 15px 0;
	color: white;
	*/
}
.buttontable .big_button p{
	line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
@media (max-width: 995px){
	.buttontable .big_button{
		margin-left: 0;
		margin-right: 0;
		width: 110px;
		height: 70px;
		font-size: 150%;	
	}
}
#content .buttontable
{
	margin: 0 auto;
}

#content .welcome .contact{
	display: inline-block;
    text-align: left;	
    padding: 15px;
	background-color :#d3dfe6;
}

@media (min-width: 995px){
	#content .welcome .contact,
	#content .info,
	#content .welcome .info{
		width: 60%;
	}
}

#content .welcome .opening_text p,
#content .welcome .contact p,
#content .welcome .contact div
{
	font-size: larger;
}
#content .contact p{
	margin: 10px;
}
#content  .info{
    color: #45728e;
	font-size: larger;
}
#content .welcome .info{
    display: inline-block;
    text-align: center;	
    /*padding: 15px;*/
}
#content .small_title{
    font-size: larger;
    font-weight: bold;	
}


.openingsuren .title{
	margin: 10px;
    font-weight: bold;
    font-size: x-large;
}
@media (max-width: 995px){
	.openingsuren .title{
		font-size: large;
    }
}

.openingsuren .subtitle{
    font-size: larger;
}
.openingsuren .afspraakfield{
	float: left;
	background: #d0dfef;
    border-radius: 10px;
	padding: 5px;
    padding-bottom: 15px;
	margin-bottom: 10px;
}
.openginsuren .afspraken{
	line-height: 1.5;
}
#content .betalen{
    margin: 20px;
	line-height: 2.5;
	text-align: center;
}

.title{
   	font-size: large;
	line-height: 1.5;
	font-weight: bold;
    margin: 10px 0px 10px 0px;
    /*margin-top: 2em;*/
}
.over_ons .subtitle{
	font-size: larger;
	line-height: 1.5;
	font-weight: bold;
	padding-left: 1em;
    padding-bottom: 10px;
}
.over_ons .fotos{
    width: 180px;
    height: 120px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
@media (max-width: 995px){
	.over_ons .fotos{
		display: block;
    }
}

.over_ons .fotos *{
	vertical-align: middle;
	height: 100px;
}

.over_ons .text{
    display: table-cell;
    vertical-align: middle;	
}


#sidebar {
	  /*width : 180px;*/
	  width : 22.5%;
	  float : left;
	  margin-top:15%;
	  /*background-color :#93acab;*/
	  background-color :#821127;
	  color : #fff;
	  border: 1px solid #BEBDBD; 
	  border-radius:10px;	  
	  text-decoration:none;
	  text-align:left;
	  font-size:95%;	
	  padding:3px;
}
@media (min-width: 995px){
	#sidebar{
		margin: 10px;
		margin-top:120px;
		padding:5px;
	}
}
#sidebar p{
	margin-top:10px;
	margin-bottom:10px;
	padding-left:6px;
}
#sidebar a{
	color : #fff;
	text-decoration:none;
}

#sidebar #afspraak_link{
	padding:5px;
	/*background-color:#527885;*/
	background-image: url('../includes/images/button_slice.jpg');  
	/*background-repeat:repeat-x;*/
	color:#f5f5f5;
	font-weight:bold;	
	text-decoration:none;
	text-align:center;
	border: 2px solid #BEBDBD; 
	border-style:outset;
	border-radius:10px;
	font-size:120%;
	display:block;
	margin: 0 auto;
}

#sidebar #afspraak_link:active,
#sidebar #afspraak_link:hover
{
	/*background-color:#ffffff;*/
	color : #f5f5f5;	
	border-style:inset;
	cursor: pointer; 
}

#footer {
    margin-top: 10px;
    margin-bottom:10px;
	border :#ccc;
	font-size:70%;
}
#footer div{
	padding-top: 10px;
    padding-bottom:10px;
	text-align:center;
}

#steps {
	/*height:40px;
	text-decoration:none;*/
}
#step_item li{
	list-style:none;
	float: left;
	/*padding:15px;
	padding-top:5px;*/
	padding-bottom:5px;
	margin:1%;
	display:block;
	text-decoration:none;
	width:45%;
}

#step_item li .steparrow{
	border-bottom-right-radius:10px;
	border-top-right-radius:10px;
	border-style:none;
	padding:3%;
	color:#9ea5a0;
	font-size:85%;
}

#step_item li button:hover { 
	cursor: pointer;
}

#step_item li .steparrow#selected_step{
	background-color:grey;	
	color:whitesmoke;
	font-weight:bold;
}

#sluitingsdagen{
	white-space: nowrap;
}

span.avoidwrap { display:inline-block; }
td.textcenter { text-align:center; }

.google_maps{
	position: relative;
    padding-bottom: 70%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.google_maps iframe{
	position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
	border:0;
	frameborder:0;
	scrolling:no;
	marginheight:0;
	marginwidth:0;
}

div#content div#afspraakHeader{
    border-radius: 10px;
    padding: 8px;
    background: #d7e1e6;
	margin-bottom: 15px;
}

.tables_container{
	overflow:hidden;
}
.daySchedule_container{
	float: left;
    margin-right: 20px;
	margin-bottom: 10px;
}
.schedule,
.daySchedule{
	text-align:center;
	border-spacing:10px;
	float:left;
}
.schedule th,
.daySchedule th{
   text-align: center;
}
.schedule #border,
.daySchedule #border{
	border: 3px solid #000000;
}
.schedule,
.daySchedule {
	border: 1px solid #859aa7;
    border-spacing: 0;
	border-collapse:separate;
    border-radius:10px;
    -moz-border-radius:10px;
	margin-left: 16px;
}
.schedule td,
.daySchedule td,
.daySchedule th
{
	border-left:solid #859aa7 1px;
    border-top:solid #859aa7 1px;
	padding:2px;
}
.daySchedule .table_header,
.schedule th{
	border-top: none;
	background-color: #859aa7;
    color: #ffffff;
	height: 50px;
	border-radius: 8px 8px 0 0;
	padding-left: 10px;
    padding-right: 10px;
	font-weight: normal;
	font-size: larger;
}
.daySchedule  tr:last-child td.invalid:last-child,
.schedule tr:last-child td.invalid:last-child {
	background-color:#fdbbbd;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
.daySchedule .table_header{
	border-top:none;
}
.timeslots  td.invalid,
.daySchedule  td.invalid{
	background-color:#fdbbbd;
}
.timeslots  th:first-child,
.timeslots  td:first-child,
.daySchedule  th:first-child,
.daySchedule  td:first-child {
     border-left: none;
}
.daySchedule .table_day{
	background-color: #d7e1e6;
	font-weight:bold;
}

.timeslots .appointments_timeslots{
	width:30%;
}
#content .timeslots .info{
	color: #45728e;
	font-size:inherit;
	font-weight: normal;
	text-align: center;
	margin-top: 20px;
}
.daySchedule > tr > td{
	vertical-align:top;
}

.timeslots .valid a,
.timeslots .valid a:visited,
.timeslots .valid a:link,
.daySchedule .valid a,
.daySchedule .valid a:visited,
.daySchedule .valid a:link{
	color:#0000ff;
	text-decoration:none;
    display:block;
    height:100%;
    width:100%;
	font-weight: bold;
}
.timeslots .valid a:hover,
.daySchedule .valid a:hover{
	background-color:#c1d5f9;
}

.daySchedule #nav{
	color:#ffffff;
	text-decoration:none;
	display: inline;
	height: auto;
	width: auto;
	background-color: transparent;
}

.daySchedule .closed{
	background-color:#ffa4a6;
}

.daySchedule .no_appointments a,
.daySchedule .no_appointments a:visited,
.daySchedule .no_appointments a:link{
	color:#000000;
	text-decoration:none;
    display:block;
    height:100%;
    width:100%;
}

.daySchedule td.passed{
	background-color:#acacac;
}

#afspraakHeader2{
	width:50%;
	width:fit-content;
	border:1px solid black;
	padding:5px;
	border-radius:10px;
}

.next_day_link{
	display:inline-block;
	background-color:lightslategrey;
	padding:1px;
	border-radius:10px;
	color:whitesmoke;
	text-decoration:none;
	padding-left:15px;
	padding-right:15px;
	margin-top:5px;
}
.next_day_link:visited{
	color:whitesmoke;
}
.next_day_link:hover{
	background-color:lightgrey;
	color:darkslategrey;
}


#afspraaktable {
	float:left;
	margin-bottom: 10px;
}

#uurrooster {
	display: inline-block;
	text-align:center;
	border-spacing:0px;
	border-collapse: separate; 
	border-spacing: 0;
	margin-bottom: 10px;
}

#uurrooster td{
	border: 2px solid #acacac;
	border-style: none solid solid none;
    padding: 5px;	
}

#uurrooster tr:first-child td:first-child { border-top-left-radius: 10px; }
#uurrooster tr:first-child td:last-child { border-top-right-radius: 10px; }
#uurrooster tr:last-child td:first-child { border-bottom-left-radius: 10px; }
#uurrooster tr:last-child td:last-child { border-bottom-right-radius: 10px; }
#uurrooster tr:first-child td { border-top-style: solid; }
#uurrooster tr td:first-child { border-left-style: solid; }

#uurrooster #day{
	font-weight:bold;
	text-align:left;
}
#uurrooster #dayheader{
	text-align:center;
	font-weight:bolder;
	font-size:larger;
}

#list{
	list-style-type: none;
}

#afspraaktable td{
	padding:5px;
	padding-left:10px;
	padding-right:10px;
}

#content .list_contactlenzen {
	margin-left:25px;
	line-height:2em;
}
#content .list_contactlenzen li{
	padding:0.4em;
	line-height:1.2em;	
}
#content .list_contactlenzen li li{
	padding:0.1em;
	margin-left:2.2em;
}


h5{
	font-size:1em;
}


#jseyeslayer{
	/*float:right;*/
	
}

#afspraak_button{
	background-color:#3f546d;
	color:whitesmoke;
	padding:5px;
	padding-left:10px;
	padding-right:10px;	
	border-radius:10px;
}
#afspraak_button:hover{
	color:#3f546d;
	background-color:whitesmoke;
	cursor: pointer;
}

.confirmForm {
	width:90%;
}
.confirmForm_column1{
	width:20%;
}

textarea, input{
	font: inherit;
	font-family: inherit;
	width:99%;
}

input#invalid,
textarea#invalid{
	background-color:#ffbbbb;
}

#uitzondering {
	color:red;
	font-size:normal;
	/*font-size:large*/
}

span.line {
  display: inline-block;
}


/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative; width: 30%;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #859aa7; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #3a3a3a; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;background-color: #d7e1e6;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #859aa7;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #d7e1e6;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #ebf1f5; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/

.afspraak_steps{
    width: 100%;
    margin-left: 20%;
	margin-bottom: 10px;
}

.steps_table{
	width: 100%;
}

.nice_paragraph{
	text-align: justify;
}

#news{
	text-align: justify;
}

#news img{
	float: left;
	max-height: 130px;
	max-width: 20%;
	margin: 3px;
}

#news_light{
	text-align: justify;
	color:steelblue;
}