* {
  	font-family: -apple-system, BlinkMacSystemFont, roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
html {
	font-size: 62.5%;
	min-height: 100%;
	overflow: -moz;
	overflow-y: scroll;
	overflow-anchor: none;
}
body {
	padding: 0 5px;
	margin: 0;
    background-color: white;
    overflow: hidden;
}
h1{
	font-size: 1.5rem/1.2;
	letter-spacing: 2px;
	text-align: center;
	margin: 0;
	padding: 0;
	align-self: center;
}
h2{
	font-size: 3rem;
	text-align: left;
}
form {background: lightgray; padding: 15px; margin-bottom: 20px; border-radius: 5px; border: solid black 1px;}
label{padding: 5px; border-radius: 5px;}
input{padding: 5px; border-radius: 5px; border: solid grey 1px;}
i{min-width: 20px}
.content{background: white;}
.hoofding{display: flex; justify-content: space-between; margin-bottom: 10px;}
.hoofding h1{align-self: center}
#alignright{align-self: flex-end;}
#gebruikerstabel{max-width: 400px;}
#password, #confirmpassword{width: 200px;}
.form-group {display: flex; justify-content:space-between ; margin-bottom: 10px; margin-right: 20px; min-width: 200px; }
.sub-group1, .sub-group2, .sub-group3, .sub-group4 { display: flex;}
.form-group label {width: 102px;  width: 100px;}
.form-group input {margin-top: -5px; width: 100px; font-size: 1.4rem;}
.form-group select {padding: 5px; border-radius: 5px; border: solid grey 1px; width: 112px; margin: 0; margin-top: -5px;}
.sub-group2 .form-group input {width:50px;}
.sub-group2 .form-group {min-width:fit-content}
#loginform, #registerform{width: 40%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto;}
.loginknop { padding: 5px 10px; margin-right: 5px; min-width: 100px; cursor: pointer; border-radius: 5px; transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(137, 137, 137, 0.24);}
.loginknop:hover{background-color: lightgray; transform: translateY(1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(137, 137, 137, 0.3);}
#Straat, #Gemeente, #Emailprimair, #Emailsecundair, #Bankrekening, #Kinderen, #Opmerkingen {width: 150px}
table { width: 100%; margin-top: 20px; border-collapse:separate;}
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; border-radius: 5px; }
th { background-color: lightgray;}
button { padding: 5px 10px; margin-right: 5px; cursor: pointer; border-radius: 5px; transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(137, 137, 137, 0.24);}
button:hover{background-color: lightgray; transform: translateY(1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(137, 137, 137, 0.3);}
.btn-submit { background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: larger; }
.btn-submit:hover { background-color: #357b37;}
.btn-cancel { background-color: #f44336; color: white; border: none; border-radius: 5px; font-size: larger; }
.btn-cancel:hover { background-color: #be352b;}
h2 {margin-top: 0; text-align: left;}
.search-container{margin-bottom: 20px; text-align: center;}
.imagecontainer{max-width:25px; margin-right: 10px;}
img{width: 100%}
.buttoncontainer{text-align: center;}