@charset "utf-8";
/* CSS Document */
body, h1, h2, h3, h4, h5, h6 {
  font-family:Verdana;
  font-size: 0.9em;	
}

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #0257a7;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 100%;
  margin-left: 0px;
}
	
/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: relative;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

#container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.noDisplay {
	display: none;
}
.custom-select {
	height: 34px;
  width: auto;
  min-width: 80px;
  background-color: #0257A7;
  color: #ffffff;
  border-style: solid;
  border-color: #FFFFFF #D9D9D9 #D9D9D9 #D9D9D9;
  border-width: 1px 1px 0 0;
  padding: 0;
  text-align: left;
}

@media screen and (min-width:321px) and (max-width:768px){
.one {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #000000 0%, #0257a7 100%);
  flex-basis: 100%;
  height: 100px;
}
.two {
  flex-basis: 100%;
  height: 10%;
  margin-bottom: 1px;
  text-align: center;
}
	    #content {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height:100%;
        padding: 0px 0;
        overflow: scroll;
    }
    .full-height {    
      min-height: 50%;    
      width: 100%;
      padding-top: 1px;  /* header height */
      display: flex;
      overflow: auto;
    }
    .col{
      margin-bottom: 120px; /* header height + footer height */
      flex: 1;
      padding: 20px;  
      overflow: auto;
    }
    .collinks {
    	max-width: 50%;
      background: #fff;
    }
 		.colrechts {
    	max-width: 50%;
      background: #fff;
   }    
    .colrechts p{	
      width: 90%; 
      margin: 0% 5% 0% 5%; 
      background: #fff;	
      box-sizing: border-box;
      overflow: auto;
    }
    .collinks p{	
      width: 90%; 
      margin: 0% 5% 0% 5%; 
      background: #fff;	
      box-sizing: border-box;
      overflow: auto;
    }
    .colmidden {
      float: right; width:auto; 

    }
    .col2 p{	
      float: center; width: 90%; 
      margin: 0% 5% 0% 5%; 
      padding: 5px; 
      background: #fff;	
      border: 1px solid #fff; 
      box-sizing: border-box;
      text-align: center;
      text-transform: uppercase;
      overflow: hidden;
    }
    .col1 {
      max-width: 20%;
      background: #fff;   	
    }
 		.col1 p{	
      padding: 5px; 
      text-align: center;
    }   
   .col2 {
      width: 40%;  
      background: #fff; 
    }
	.col2 p{	
      padding: 5px; 
      text-align: center;
    }
    .col3 {
		display: none;
    }
 .col3 p{
	overflow: auto;
    }
 .colfull{
	  max-width: 100%;
      background: #fff; 
	}
	.nametext {
		font-family: "Verdana";
		position: absolute;
		padding-top: 20px;
		padding-left: 5.5%;
		color: #ffffff;
		font-size: 0.8em;		
	}
	.nametext p {
		font-family: "Verdana";
		position: absolute;
		color: #ffffff;
		font-size: 0.8em;			
	}
	.inlogtext {
	display:none; 
	}	
	.site-logo {
  		position: absolute;
		padding-left: 1%;
		padding-top: 1%;
  		display: block;
}
	.site-logo img{
		width: 4%;
		max-width: 1600px;
		height: auto;
}
.thumbnail {
	width: 100%;
	max-width: 80px;
	height: auto;
	margin-left: auto;
}
.thumbnail_align {
	text-align: center;
}
.knop {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0193cf;
  color: #ffffff;
  font-size: 1.1em;
  width: 130px;
  height: 35px;
}
.knopvoet {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0193cf;
  color: #ffffff;
  font-size: 0.9em;
  width: 340px;
  height: 35px;
}
.FO-KL {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  color:#0193cf;
}
.WC-BL {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  color:#2c1376;
}

.knopknop {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0257A7;
  color: #ffffff;
  font-size: 0.9em;
  width: 30%;
  max-width: 130px;
  height: 35px;
}
.knopknopmid {
  font-family: "Verdana";
  border-radius: 5px;  
  background-color:#000000;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: bold;
  width: 135px;
  height: 35px;
}
.knopknop2 {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0257a7;
  color: #ffffff;
  font-size: 0.9em;
  width: 30%;
  max-width: 130px;
  height: 35px;
}
.knopknop2mid {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0257a7;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 32%;
  min-width: 185px;
  height: 35px;
}
.wit{
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  font-family: Verdana;
}
.knop2 {
  font-family: "Verdana";
  background-color:#0257a7;
  border-radius:  25px;
  color: #ffffff;
  font-size: 1.1em;
  width: 130px;
  height: 35px;
}
.home {
  font-family: "Verdana";
  background-color:#0257A7;
  border-radius:  5px;
  color: #ffffff;
  font-size: 0.4em;
  font-weight: bold;
  width: 130px;
  height: 35px;
}
.homeknop {
  font-family: "Verdana";
  background-color:#002e40;
  border-radius:  25px;
  color: #ffffff;
  font-size: 0.9em;
  width: 30%;
  max-width: 130px;
  height: 35px;
}
.homeknopmid {
  font-family: "Verdana";
  border-radius: 5px;   
  background-color:#0257A7;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: bold;
  width: 135px;
  height: 35px;
}
.copyright {
	text-align: center;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
	font-family: "Verdana";
	font-size: 0.6em";
}
.basis-kl{
  font-family: "Verdana";
  color: #4a4a4a;
  font-size: 0.7em;
}
.basis-kl a{
  font-family: "Verdana";
  color: #0257a7;
  font-size: 12px;
}
.tablehef {
        border-collapse: collapse;
    }
    #one td {
        border: 1px solid #0193cf; 
    }
.tablehef tr:hover {background-color: #E5E5E9;}

.tablehoog {
        border-collapse: collapse;
	    }
    #two td {
        border: 1px solid #0257a7; 
    }
.tablehoog tr:hover {background-color: #E5E5E9;}

.titel{
  font-size: 0.7em;
  font-weight: bold;
  color: #2a3e59;
  font-family: "Verdana";
}

.four {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #000000 0%, #0257a7 100%);
  flex-basis: 100%;
  height: 100px;
}
.five {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #0257a7 0%, #000000 100%);
  flex-basis: 100%;
  height: 100px;
}
.drieenhalf {
  background: #ffffff;
  height: auto;
  margin:auto;
  width: 70%;
  padding: 10px;
}
.drieenhalf img {
  overflow: hidden;
  border-radius: 15px; /* 15px gerond op alle hoeken */
  margin: 10px;
  height: 40%;
  width: 40%;
}
.drieenhalf p{
  font-size: 1.0em;
  font-weight: bold;
  color: #2a3e59;
  font-family: "Verdana";
}
.twotabel {
  flex-basis: 100%;
  min-height: 50%;
  margin-bottom: 1px;
  background-color: #ffffff;
  text-align: center;
}
.spoor {
  font-family: "Verdana";
  max-height: 4%;
  text-align: center;
}
.spoorerror {
  background-color: #ffffff;
  flex-basis: 100%;
  min-height: 200px;
  text-align: left;
  font-family: "Verdana";
  padding-left: 10%;	
}
.rood {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  color:#FF0000;
}
.groen {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  background-color:#90e491;
  color:#000000;
}
.roodfout {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  color:#FF0000;
  text-align: center;
}
.overzicht { /* box om overzicht te tonen */
  box-sizing: border-box;
  display: block;
  margin: auto;
  padding-left: 8%;
  padding-right: 10%;
  vertical-align: middle;
  overflow-x: scroll;
  width: auto; /* If you want a fixed width, set it here, else set to auto */
  min-width: 0;/*100%*/; /* If you want a % width, set it here, else set to 0 */
  height: 80%;/*100%*/; /* Set table height here; can be fixed value or % */
  min-height: 0/*104px*/; /* If using % height, make this large enough to fit scrollbar arrows + caption + thead */
  font-family: "Verdana";
  font-size: 10px;
  line-height: 20px;
  text-align: left;	
}

.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 1.1em;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50%;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 50%;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}}	


@media screen and (min-width:769px) and (max-width:1000px){
.one {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #000000 0%, #0257a7 100%);
  flex-basis: 100%;
  height: 100px;
}
.two {
  flex-basis: 100%;
  height: 10%;
  margin-bottom: 1px;
  text-align: center;
}
	    #content {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height:100%;
        padding: 0px 0;
        overflow: scroll;
    }
     .full-height {    
      min-height: 50%;  
      width: 100%;
      padding-top: 1px;  /* header height */
      display: flex;
      overflow: auto;
    }
    .col{
      margin-bottom: 120px; /* header height + footer height */
      flex: 1;
      padding: 20px;  
      overflow: auto;
    }
    .colmidden {
      float: center; width: 50%; 
    	padding-left: 5%;
    	padding-right: 5%;
    }
    .col1 {
      max-width: 30%;
      background: #fff;  	
    }
		.collinks {
    	max-width: 50%;
      background: #fff;
      padding-left: 55px;
      padding-right: 55px;           
    }
 		.colrechts {
    	max-width: 50%;
      background: #fff;
      padding-left: 55px; 
      padding-right: 55px;      
   }    
    .colrechts p{	
      float: center; width: 90%; 
      margin: 0% 5% 0% 5%; 
      background: #fff;	
      box-sizing: border-box;
      overflow: hidden;
    }
   .collinks p{	
      float: center; width: 90%; 
      margin: 0% 5% 0% 5%; 
      background: #fff;	
      box-sizing: border-box;
      overflow: hidden;
    } 
    .col2 {
      width: 40%;  
      background: #fff; 
    }
	.col2 p{	
      padding: 5px; 
      text-align: center;
    }
    .col3 {
      max-width: 30%;  	
      background: #fff; 
    }
 .col3 p{
	overflow: auto;
    }
 .colfull{
	  max-width: 100%;
      background: #fff; 
	}
	.nametext {
		font-family: "Verdana";
		position: absolute;
		padding-top: 20px;
		padding-left: 7.5%;
		color: #ffffff;
		font-size: 1.0em;		
	}
	.nametext p {
		font-family: "Verdana";
		position: absolute;
		color: #ffffff;
		font-size: 1.0em;			
	}
	.inlogtext {
		font-family: "Verdana";
		position: absolute;
		padding-top: 4px;
		padding-left: 70%;			
		color: #ffffff;
		font-size: 1em;
	}
	.site-logo {
  		position: absolute;
		padding-left: 1%;
		padding-top: 1%;
  		display: block;
}
	.site-logo img{
		width: 6%;
		max-width: 1600px;
		height: auto;
}
.thumbnail {
	width: 100%;
	max-width: 80px;
	height: auto;
	margin-left: auto;
}
.thumbnail_align {
	text-align: center;
}
.knop {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0193cf;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 130px;
  height: 35px;
}
.knopvoet {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0193cf;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 350px;
  height: 35px;
}
.FO-KL {
  font-family: "Verdana";
  font-size: 0.9em;
  font-weight: bold;
  color:#0193cf;
}
.WC-BL {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  color:#2c1376;
}
.knopknop {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0257A7;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 14%;
  max-width: 130px;
  height: 35px;
}
.knopknopmid {
  font-family: "Verdana";
  border-radius: 5px;  
  background-color:#000000;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: bold;
  width: 135px;
  height: 35px;
}
.knopknop2 {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0257a7;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 14%;
  max-width: 130px;
  height: 35px;
}
.knopknop2mid {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0257a7;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 32%;
  min-width: 185px;
  height: 35px;
}
.wit{
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  font-family: Verdana;
}
.knop2 {
  font-family: "Verdana";
  background-color:#0257a7;
  border-radius:  25px;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 130px;
  height: 35px;
}
.home {
  font-family: "Verdana";
  background-color:#0257A7;
  border-radius:  5px;
  color: #ffffff;
  font-size: 0.4em;
  font-weight: bold;
  width: 130px;
  height: 35px;
}
.homeknop {
  font-family: "Verdana";
  background-color:#002e40;
  border-radius:  25px;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 14%;
  max-width: 130px;
  height: 35px;
}
.homeknopmid {
  font-family: "Verdana";
  border-radius: 5px;   
  background-color:#0257A7;
  border-radius:  10px;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: bold;
  width: 135px;
  height: 35px;
}
.copyright {
	text-align: center;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
	font-family: "Verdana";
	font-size: 0.6em";
}
.basis-kl{
  font-family: "Verdana";
  color: #4a4a4a;
  font-size: 0.9em;
}
.basis-kl a{
  font-family: "Verdana";
  color: #0257a7;
  font-size: 12px;
}
.tablehef {
        border-collapse: collapse;
    }
    #one td {
        border: 1px solid #0193cf; 
    }
.tablehef tr:hover {background-color: #E5E5E9;}

.tablehoog {
        border-collapse: collapse;
	    }
    #two td {
        border: 1px solid #0257a7; 
    }
.tablehoog tr:hover {background-color: #E5E5E9;}

.titel{
  font-size: 0.9em;
  font-weight: bold;
  color: #2a3e59;
  font-family: "Verdana";
}

.four {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #000000 0%, #0257a7 100%);
  flex-basis: 100%;
  height: 100px;
}
.five {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #0257a7 0%, #000000 100%);
  flex-basis: 100%;
  height: 100px;
}
.drieenhalf {
  background: #ffffff;
  height: auto;
  margin:auto;
  width: 70%;
  padding: 10px;
}
.drieenhalf img {
  overflow: hidden;
  border-radius: 15px; /* 15px gerond op alle hoeken */
  margin: 10px;
  min-height: 40%;
  min-width: 40%;
}
.drieenhalf p{
  font-size: 1.0em;
  font-weight: bold;
  color: #2a3e59;
  font-family: "Verdana";
}
.twotabel {
  flex-basis: 100%;
  min-height: 50%;
  margin-bottom: 1px;
  background-color: #ffffff;
  text-align: center;
}
.spoor {
  font-family: "Verdana";
  max-height: 4%;
  text-align: center;
}
.spoorerror {
  background-color: #ffffff;
  flex-basis: 100%;
  min-height: 300px;
  text-align: left;
  font-family: "Verdana";
  padding-left: 25%;	
}
.rood {
  font-family: "Verdana";
  font-size: 0.9em;
  font-weight: bold;
  color:#FF0000;
}
.groen {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  background-color:#90e491;
  color:#000000;
}
.roodfout {
  font-family: "Verdana";
  font-size: 0.9em;
  font-weight: bold;
  color:#FF0000;
  text-align: center;
}
.overzicht { /* box om overzicht te tonen */
  box-sizing: border-box;
  display: block;
  margin: auto;
  padding-left: 8%;
  padding-right: 10%;
  vertical-align: middle;
  overflow-x: scroll;
  width: auto; /* If you want a fixed width, set it here, else set to auto */
  min-width: 0;/*100%*/; /* If you want a % width, set it here, else set to 0 */
  height: 80%;/*100%*/; /* Set table height here; can be fixed value or % */
  min-height: 0/*104px*/; /* If using % height, make this large enough to fit scrollbar arrows + caption + thead */
  font-family: "Verdana";
  font-size: 10px;
  line-height: 20px;
  text-align: left;	
}
body {
  	background-color: #ffffff;
}
.login {
  	width: 80%;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 1.0em;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 45%;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 45%;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}
a {
  color: #000000;
}
}	
	

	
@media screen and (min-width:1001px){
.one {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #000000 0%, #0257a7 100%);
  flex-basis: 100%;
  height: 100px;
}
.two {
  flex-basis: 100%;
  height: 10%;
  margin-bottom: 1px;
  text-align: center;
}
	    #content {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height:100%;
        padding-left: 0px 0;
        overflow: scroll;
    }
    .full-height {    
      min-height: 50%;    
      width: 100%;
      padding-top: 1px;  /* header height */
      display: flex;
      overflow: auto;
    }
    .col{
      margin-bottom: 120px; /* header height + footer height */
      flex: 1;
      padding: 20px;  
      overflow: auto;
    }
    .col1 {
      max-width: 30%;
      background: #fff;  	
    }
    .collinks {
    	max-width: 50%;
      background: #fff;
      padding-left: 305px;
      padding-right: 105px;           
    }
 		.colrechts {
    	max-width: 50%;
      background: #fff;
      padding-left: 105px; 
      padding-right: 105px;      
   }    
    .colrechts p{	
      float: center; width: 90%; 
      margin: 0% 5% 0% 5%; 
      background: #fff;	
      box-sizing: border-box;
      overflow: hidden;
    }
      .collinks p{	
      float: center; width: 90%; 
      margin: 0% 5% 0% 5%; 
      background: #fff;	
      box-sizing: border-box;
      overflow: hidden;
    }
    .colmidden {
    	box-sizing: border-box;
      width: 50%; 
    	padding-left: 25%;
    	padding-right: 25%;
    }	
    .col1 {
      max-width: 30%;
      background: #fff;  	
    }
    .col2 {
      width: 40%;  
      background: #fff; 
    }
	.col2 p{	
      padding: 5px; 
      text-align: center;
    }
    .col3 {
      max-width: 30%;  	
      background: #fff; 
    }
 .col3 p{
	overflow: auto;
    }
 .colfull{
	  max-width: 100%;
      background: #fff; 
	}
	.nametext {
		font-family: "Verdana";
		position: absolute;
		padding-top: 20px;
		padding-left: 5.5%;
		color: #ffffff;
		font-size: 0.9em;		
	}
	.nametext p {
		font-family: "Verdana";
		position: absolute;
		color: #ffffff;
		font-size: 0.9em;			
	}	
	.inlogtext {
		font-family: "Verdana";
		position: absolute;
		padding-top: 4px;
		padding-left: 70%;		
		color: #ffffff;
		font-size: 1em;
	}
	.site-logo {
  		position: absolute;
		padding-left: 1%;
		padding-top: 1%;
  		display: block;
}
	.site-logo img{
		width: 4%;
		max-width: 1600px;
		height: auto;
}
.thumbnail {
	width: 100%;
	max-width: 80px;
	height: auto;
	margin-left: auto;
}
.thumbnail_align {
	text-align: center;
}
.knop {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0193cf;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 130px;
  height: 35px;
}
.knopvoet {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0193cf;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 300px;
  height: 35px;
}
.FO-KL {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  color:#0193cf;
}
.WC-BL {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  color:#2c1376;
}

.knopknop {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0257A7;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 14%;
  max-width: 130px;
  height: 35px;
}
.knopknopmid {
  font-family: "Verdana";
  border-radius: 5px;  
  background-color:#000000;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: bold;
  width: 135px;
  height: 35px;
}
.knopknop2 {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0257a7;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 14%;
  max-width: 130px;
  height: 35px;
}
.knopknop2mid {
  font-family: "Verdana";
  border-radius:  25px;
  background-color:#0257a7;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 40%;
  min-width: 185px;
  height: 35px;
}
.wit{
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  font-family: Verdana;
}
.knop2 {
  font-family: "Verdana";
  background-color:#0257a7;
  border-radius:  25px;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 200px;
  height: 35px;
}
.home {
  font-family: "Verdana";
  background-color:#0257A7;
  border-radius:  5px;
  color: #ffffff;
  font-size: 0.4em;
  font-weight: bold;
  width: 130px;
  height: 35px;
}
.homeknop {
  font-family: "Verdana";
  background-color:#002e40;
  border-radius:  25px;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: bold;
  width: 14%;
  max-width: 130px;
  height: 35px;
}
.homeknopmid {
  font-family: "Verdana";
  border-radius: 5px;   
  background-color:#0257A7;
  border-radius:  10px;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: bold;
  width: 135px;
  height: 35px;
}
.copyright {
	text-align: center;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
	font-family: "Verdana";
	font-size: 0.6em";
}
.basis-kl{
  font-family: "Verdana";
  color: #4a4a4a;
  font-size: 0.7em;
}
.basis-kl a{
  font-family: "Verdana";
  color: #0257a7;
  font-size: 12px;
}
.tablehef {
        border-collapse: collapse;
    }
    #one td {
        border: 1px solid #0193cf; 
    }
.tablehef tr:hover {background-color: #E5E5E9;}

.tablehoog {
        border-collapse: collapse;
	    }
    #two td {
        border: 1px solid #0257a7; 
    }
.tablehoog tr:hover {background-color: #E5E5E9;}

.titel{
  font-size: 0.7em;
  font-weight: bold;
  color: #2a3e59;
  font-family: "Verdana";
}

.four {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #000000 0%, #0257a7 100%);
  flex-basis: 100%;
  height: 100px;
}
.five {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #0257a7 0%, #000000 100%);
  flex-basis: 100%;
  height: 100px;
}
.drieenhalf {
  background: #ffffff;
  height: auto;
  margin:auto;
  width: 70%;
  padding: 10px;
}
.drieenhalf img {
  overflow: hidden;
  border-radius: 15px; /* 15px gerond op alle hoeken */
  margin: 10px;
}
.drieenhalf p{
  font-size: 1.0em;
  font-weight: bold;
  color: #2a3e59;
  font-family: "Verdana";
}
.twotabel {
  flex-basis: 100%;
  min-height: 50%;
  margin-bottom: 1px;
  background-color: #ffffff;
  text-align: center;
}
.tabel {
  border: solid 2px #0257a7;
  background: linear-gradient(to bottom, #0257a7 0%, #000000 100%);
  flex-basis: 100%;
  height: 100px;
}
.columns {
	width: 33%;
	float: right;
	font-family: "Source Sans Pro";
	color: #414141;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
.spoor {
  font-family: "Verdana";
  max-height: 4%;
  text-align: center;
}
.spoorerror {
  background-color: #ffffff;
  flex-basis: 100%;
  min-height: 300px;
  text-align: left;
  font-family: "Verdana";
  padding-left: 40%;	
}
.rood {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  color:#FF0000;
}
.groen {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  background-color:#90e491;
  color:#000000;
}  
.roodfout {
  font-family: "Verdana";
  font-size: 0.7em;
  font-weight: bold;
  color:#FF0000;
  text-align: center;
}
body {
  	background-color: #ffffff;
}
.login {
  	width: 70%;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 1.1em;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 45%;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 45%;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}
a {
  color: #000000;
}
} 


@media only screen and (max-width: 500px) {
  .one {
    flex-basis: 100%;
    order: 1;
  }
  .two {
    flex-basis: 100%;
    order: 3;
  }

}