@charset "utf-8";
/* CSS Document */
body  		{	background-color: #f4f4f4;  }
input[type=text], input[type=file] { margin: 10px 0 10px 0; }
input[type=submit]  { border: 1px solid white; border-bottom: 3px solid darkGrey; border-left: 4px solid darkGrey; border-radius: 25px; 
 margin: 6px 0 6px 0; padding: 5px 20px; font-size: 0.8em;  display: inline-block; background-color: black; color: white;}
input[type=submit]:hover  { background-color: #d9d7d8;  color: black;  }
.btn { background-color: black; color: white; cursor:pointer; border-radius: 25px; }
.btn:hover { background-color: #d9d7d8;  color: black; text-decoration: none; font-weight: bold; font-style: normal;}
a  	   { text-decoration: none; cursor: pointer;  color: blue; }
a:hover { text-decoration: underline; color: black; font-style: normal; }
.wijzigen_vak { margin-top:130px }
.titel_regel {	text-align: center; 	}
.topnav {  overflow: hidden;  background-color: black; width: 100%; padding-left: 10px; position: -webkit-sticky; /* Safari */
position: absolute; border-top: 2px solid grey; }
.topnav a  {  float: left; color: white;  text-align: center; text-decoration: none; border-left: 4px solid grey; padding: 8px 8px; font-size: 0.9em; }
.topnav {	 position: -webkit-sticky; /* Safari */
  position: sticky;  top: 0;	}
.wijzig_melding { padding: 10px 20px; border: 1px solid #096530; background-color:#F1F4ED; font-size: 1em; }
td {	margin: 2px 10px;	}
.info {
	position: absolute;	width: 50%; left: 25%; top: 200px ; background-color: white; color:black; text-align:center; 
	border: 1px solid #696868; border-top: 25px solid #696868; border-left:25px solid #696868; border-top-left-radius: 70px;
	border-top-right-radius: 70px; border-bottom-left-radius: 70px; font-size: 1em; padding: 15px 25px; cursor: pointer;
}


  
.row::after {  content: "";  clear: both;  display: table; border: none; }
img {  max-width: 100%;  height: auto;  }
* {  box-sizing: border-box; }
/* Voor mobiele telefoons */
[class*="col-"] {  width: 100%; float: left;  padding: 15px; }
@media only screen and (min-width: 600px) {
.wijzigen_vak { width:98%; font-size: 0.6em; color: black; } 
input[type=text], input[type=submit], input[type=password], input[type=file]{ font-size: 0.9em; }
.btn { font-size: 0.7em; } #tabellen{ width: 96% } .info {  width: 96%; left: 2%; top: 150px; }
}
@media only screen and (min-width: 800px) {
.wijzigen_vak { width:98%; font-size: 0.7em; } 
input[type=text], input[type=file], input[type=submit], input[type=password] { font-size: 0.9em; }
.btn { font-size: 0.7em; } #tabellen{ width: 96% } .info {  width: 92%; left: 3%; top: 150px; }
}
@media only screen and (min-width: 1000px) {
.wijzigen_vak { width:95%; font-size: 1em;}  
input[type=text], input[type=file], input[type=submit], input[type=password] { font-size: 1em; }
.btn { font-size: 0.8em; } #tabellen{ width: 94% } .info {  width: 90%; left: 5%; top: 150px; }
}
@media only screen and (min-width: 1300px) {
.wijzigen_vak { width:90%; font-size: 1em;  border: 1px solid black; border-radius: 50px; box-shadow: 5px 10px 18px #888888; margin-bottom:300px; }  
input[type=text], input[type=file], input[type=submit], input[type=password] { font-size:1em;  }
.btn { font-size: 0.9em; } #tabellen{ width: 90% } .info {  width: 80%; left: 10%; top: 350px; }
}
@media only screen and (min-width: 1600px) {
.wijzigen_vak { width:75%; font-size: 1em; border:1px solid #096530; border-radius: 50px; box-shadow: 5px 10px 18px #888888; }  
input[type=text], input[type=file], input[type=submit], input[type=password] { font-size: 1.1em;  }
.btn { font-size: 1em; } #tabellen{ width: 86% } .info {  width: 50%; left: 25%; top: 350px; }
}
@media only screen and (min-width: 1800px) {
.wijzigen_vak { width:60%; font-size: 1em; border: 1px solid #096530; border-radius: 50px; box-shadow: 5px 10px 18px #888888; }  
input[type=text], input[type=file], input[type=submit], input[type=password] { font-size: 1.1em;  }
.btn { font-size: 1.1em; } #tabellen{ width: 80% }
}