body > div {
  margin:auto;
  position:relative; 
  background-color:#fff
}

@media (min-width: 900px) {
	body > div {
	  max-width:1400px; 
	}
}

header img {
	width: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 400px;
}

header .gebruiker {
	display:none;
	padding: 0px 5px 10px 0px;
  text-align: right;
}

#foutmelding { 
	display:none;
	width: calc(100% + 30px);
	height: 60px;
	padding: 20px;
	position: absolute;
	z-index:100;
	top: 10px;
	left: -15px;
	text-align: center;
	background-color: #4c9f68;
	color: white;
}

@media (max-width: 512px) {
	#foutmelding { 
		width: 100%;
		top: 10px;
		left: 0px;
	}
}

#foutmelding .closeButton {
	position:absolute;
	right:6px;
	top:6px; 
	padding:0px 5px;
	font-size:12px;
	font-weight: bold;
	border-radius:5px;
	border: 1px solid #eee;
	--background-color:#eee;
	cursor:pointer;
}
#foutmelding .closeButton:hover {
	background-color:#fff;
	color:#4c9f68;

}

#meldingen {
	display:none;
}

.vet { 
	font-weight: bold;
	font-size: large;
}
.vet span {
	font-weight: normal;
}

p.small {
	font-size: small;
}

form { 

	margin: auto;
	text-align:left;
}


.form-group label {
	width:40%;
}

.form-group input {
	width:50%;
}

input[type=text],
input[type=email] {
	border-color: #dfdfdf;
	border-style: solid;
	border-radius: 2px;
}


.categorie { 
	text-align: left;
}



.categorie label.checkbox {
	float:left; 
	font-size: large;
	padding-left: 5px;
	padding-right: 5px;
	max-width: 90%;
}
.categorie > div > label.checkbox.checked {
		-text-decoration: underline;
		-text-decoration-color: #4c9f68;
		outline: 1px solid #4c9f68;
		--font-weight:bold;
		--color: #fff;
}

.subcategorieen {
	max-height:200px;
	transition: max-height 1s;
	overflow: hidden;
	clear: left;
	padding-left:40px ;
}

.subcategorieen.hidden {
	max-height:0px; 
}

.subcategorie {
	clear:left; 
}

.subcategorie > div > label.checkbox {
	padding-left:0px;
}

.subcategorie > div > label > div {
	display:inline-block;
	margin-top:1px;
	padding:2px 5px;
	border: 1px solid transparent;
}
.subcategorie > div > label.checked > div {
	border: 1px solid #4c9f68;
}

@media (min-width: 900px) {
	.categorie > div > label.checkbox:hover {
		background-color: #4c9f68;
		--font-weight:bold;
		color: #fff;
	}
	.subcategorie > div > label.checkbox:hover > div {
		background-color: #4c9f68;
		--font-weight:bold;
		color: #fff;
	}
}

label.checkbox > span {
	display: block;
  font-size: small;
  padding-left:6px;
}


.subcategorie .checkbox-wrapper-18 {
	padding-top:1px;
}
.checkbox-wrapper-18 .round {
  position: relative;
  float:left; 
  margin-top: 3px;
  margin-right:10px;
}
.subcategorie .checkbox-wrapper-18 .round {
  margin-top: 8px;
} 

.checkbox-wrapper-18 .round label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  width: 28px;
  display: block;
}
.checkbox-wrapper-18 .round.square label {
  border-radius: 3px;
}
.checkbox-wrapper-18 .round.small label {
  height: 20px;
  width: 20px;
}
	

.checkbox-wrapper-18 .round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 8px;
  opacity: 0;
  position: absolute;
  top: 9px;
  transform: rotate(-45deg);
  width: 12px;
}
.checkbox-wrapper-18 .round.small label:after {
  left: 4px;
  top: 6px;
}

.checkbox-wrapper-18 .round input[type="checkbox"] {
  visibility: hidden;
  display: none;
  opacity: 0;
}

.checkbox-wrapper-18 .round input[type="checkbox"]:checked + label {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

.checkbox-wrapper-18 .round input[type="checkbox"]:checked + label:after {
  opacity: 1;
}















div.bg-green { 
  background-color: #4c9f68;
  color:#fff; 
}
div.bg-grey {
  background-color: #eee;
  color:m#000; 
}