ul.nav {
    margin:0;
    list-style:none;
    background:#343a40!important; /* you can change the backgorund color here. */
    padding: 8px 16px;
    padding: 0.5rem 1rem;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
ul.nav a {
    display:block;
    padding:16px; 28px;
    color:rgba(255,255,255,0.5);
    text-decoration:none;
}
ul.nav a:hover,
ul.nav li.current a {
    background:rgba(255,255,255,0.5);
}

*                      { margin:0; padding:0;     box-sizing: border-box; font-family:"Uurboek",arial;}
h1                     { margin-top:40px; }
h1,h2                  { margin-bottom:20px; color: #aeaeae; }
h1,h2,h3               { font-weight:100; }
body                   { background-color: #fff; font-size:20px;}
input,textarea         { font-size:20px;}
.blue                  { color:#0560a7; }
.light-blue            { color: #009ee0; }
.red                   { color:#f00; }
.orange                { color:#ec7f00; } 
body.login,body.dialoog { background: #0560a7; }
body.login,body.dialoog h1 { margin-top:20px; }
body.dialoog article { background-color:#fff; border:10px #0560a7 solid; padding:20px; padding-bottom:40px; margin:auto; margin-top:40px; max-width:800px; min-height: 200px; margin-bottom: 800px;}
body.login article input { max-width:220px; }
#header img { height:60px; float:left; margin-top:12px;}




.logo-small            { display:none; float:left; padding:10px;padding-left:0;height:40px;line-height:40px; font-size:20px; padding-left:24px;
                           font-weight:bold; opacity:0.2;
	                       transform: rotate(45deg);
	                   }
#header                { font-size:20px;position:absolute; z-index:2; top:0;left:0; 
                           color:#fff; border-top:6px #fff6b6 solid;width:100%; line-height:40px;
                           background: #0560a7;
                       }

#header ul             { list-style:none; float:right; background: #0560a7;}

#header > .inner > ul > li          { float:left;  transition: background 1s; }
#header > .inner > ul > li:not(.sluiten):hover     { background-color: #009ee0; }
#header > .inner > ul > li > a        { color: #fff; padding: 20px; margin-top:0px; display:inline-block;}
a                      { text-decoration:none; }
#header .inner         { margin:auto; max-width:1200px; width:100%; height:80px;}
#header .logo          { float:left; padding:20px;padding-left:0;height:40px;line-height:40px; font-size:40px;}
.container             { padding-top:100px; margin:auto; max-width:1200px;}
.container article     { padding:10px; padding-bottom:140px;}
body .round            { border-radius:100%; }

#header > .inner > ul > li > ul           {

	background-color: #fff; position:absolute; margin:0; left:0; top: 80px; width:100%; height:60px; z-index:999;
	line-height:60px;
	padding:0;
	display:none;
	border-bottom: 1px #0560a7 solid;
	
}

@media(min-width:960px){
	#header > .inner > ul > li > ul           {
		box-shadow: 0 22px 73px 1px #e8e8e8;
		text-align:center;
	}
}

#header > .inner > ul > li:last-child,
#header > .inner > ul+a {
	display:none;
}

#header > .inner > ul > li > ul > li        { 
	display:inline-block;  transition: background 1s;     height: 59px;
}

#header > .inner > ul > li > ul > li:hover        { 
	background-color: #fff6b6;
	
}

#header > .inner > ul > li > ul > li > a       { 
	padding-left:20px;
	color:#0560a7;
	height:59px;
	display:inline-block;
	padding-left:20px;
	padding-right:20px;
	
}

#header sup {
	vertical-align:middle;
	position:relative;
	top:-10px;
	border-radius:100%;
	background-color:#fff4;
	width:20px;
	height:20px;
	line-height:20px;
	font-size:16px;
	text-align:center;
	display:inline-block;
}

article                { line-height:30px; color:#666; width:100%; min-height:calc(100vh - 200px);}
article h1             { margin-bottom: 20px; }
article p              { margin-bottom:40px; }
footer                 { width:100%; color:#888; font-size:10px; text-align:center; background-color:#f5f5f5; height:60px; line-height:60px; bottom:0; border-top:1px #ddd solid; }
body.login footer      { display:none; }
footer a               { color:#aaa; }
.left                  { float:left; width:50%; max-width:600px; padding-right:10px; }
.right                 { float:right; width:50%; max-width:600px; padding-left:10px; }
textarea               { display:block; border: 1px #000 dotted; width:100%; height:200px; padding:6px; 	background-color:#fff; }
form.login             { width:100%; max-width:600px; margin: auto;	padding:20px; background: #fff; }
input[type="text"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="url"]      { border: none; border-left: 1px #000 dotted; border-bottom: 1px #000 solid;	max-width:300px; width:100%; display:block;	margin-bottom:20px;	background-color:transparent;padding:6px; }

input:invalid { background-color:#BDC3C7; }
input:invalid:empty { background-color:#BDC3C7; }

input[type="search"]   { border:none;	border-bottom: 1px #000 dotted; padding:12px; width:200px; float:left; margin-right:20px; }
label                  { color:#0560a7; }
input[type="text"].w-wide {	width:100%;	max-width:600px; }
input[type=checkbox]   { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {  font-family: "Font Awesome 5 Free";  display: inline-block;  font-size:20px;  cursor:pointer;  color: #000; }

input[type=checkbox]:checked + label:before { content: "\f205";  font-weight:900; } /* checked icon  f046 */
input[type=checkbox] + label:before { content: "\f204";  font-weight:900; } /* unchecked icon  f096 */

input[type=checkbox].vinkje:checked + label:before { content: "\f14a";  font-weight:900; } /* checked icon  f046 */
input[type=checkbox].vinkje + label:before { content: "\f0c8";  font-weight:100; } /* unchecked icon  f096 */
input[type=checkbox].trash:checked + label:before { content: "\f14a";  font-weight:900; } /* checked icon  f046 */
input[type=checkbox].trash + label:before { content: "\f0c8";  font-weight:100; } /* unchecked icon  f096 */

input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */
input[type=checkbox] + label { color:#000; }


input[type="submit"] { background: #05A34C; color:#fff;  padding:10px; border-radius:4px; border:none;  cursor:pointer; float:right; height:50px; }
input[type="submit"].safe {	background-color:#2a0;	display:inline-block; }



select                 { 
background-image:url(/img/pijl.png);
background-size: 12px;
background-position: calc(100% - 5px) 12px;
background-repeat:no-repeat;

display:block; background-color:#fff; border:1px #000 solid; border-radius:4px; font-size:16px; width:300px; padding:6px; appearance:none; -moz-appearance:none; -webkit-appearance:none; cursor:pointer; }
.select-deco           { position:absolute;	margin-left:-30px; margin-top:10px;	opacity:0.3; pointer-events:none; }
.btn-spacer            { display:block; width:5px; float:right; }
.clear                 { clear:both; }
*:focus                { outline: none; } 
table                  { clear:both; width:100%; border-collapse:collapse; }
table td a             { color: #000; } 
th.w-small,th:empty    { width:60px; }
th.w-medium            { width:200px; }
th.w-wide              { width:600px; }
th.w-fill              { width:100%;  }

td.zo-klein-mogelijk    { width: 1px; } /* Table cells always expands to the smallest possible size to fit its content. */

table thead th button { border:none; background: none; color:#666; font-size:20px; font-weight:bold; }


table thead { background-color:#fff; }
table thead th         { text-align:left; border-bottom:1px #000 double; padding:5px;padding-top:10px;}
table tbody tr td      { vertical-align:bottom; }
table tbody tr > th, table tbody tr > td { padding:4px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
table tbody tr:nth-child(odd) {	background-color: #f5f5f5; }
input:disabled         { background-color:#ddd;	cursor:not-allowed; }
.button-link           { font-style:normal; background: #05A34C; color:#fff; font-size:20px; padding:10px; border-radius:4px; border:none;  cursor:pointer; padding-left:20px; padding-right:20px; height:50px; display:inline-block;  transition:background 0.3s ease;}
.button-link.inactive  { background: #DDD; }
.button-link:hover      { background-color: #009ee0; }
.pageno .button-link { background:none; color: #05A34C; }
.pageno .button-link.inactive { color:#AAA; }
.pageno * { padding:0; margin:0; display:inline;}
.login .warning        { width: 100%; max-width:600px; background: #ecc; margin:auto; padding:20px;	color:#b22; }
section                { padding-top:20px; padding-bottom:20px; border-bottom:1px #000 dotted; }
.new                   { display:none; margin-top:20px; border-top:1px #000 dotted;	padding-top:20px; }
ul                     { margin-left:20px; }
ul li a, a             { color:#0560a7; }
.pageno                { text-align:center; padding-bottom:4px; margin-bottom:20px;border-bottom: 1px #DDD dotted;}
hr                     { border:none; border-bottom:1px #ccc dotted; }
#filterForm select+.fa-arrow-down:before { position:relative; top:5px;}
[onclick],[form],[for]  { cursor:pointer; }

.kliktoon { background-color:#666; width:100px; display:inline-block; height:30px; position:relative; top:5px; cursor:pointer; }
.kliktoon:target { display:none; }
.kliktoon+span { display:none; }
.kliktoon:target+span { display:inline; background-color:#666; color:#fff; padding:5px; }


#header .inner a { color:#fff; }

.verbergen { display:none; }

.input_zoekveld {}
#resultaten {}
#resultaten li {color: black; display: block }
#waarden { list-style-type: none; }
#waarden li { display: block }
#myUL li a:hover:not(.header) { background-color: #eee; }

.remove_button {
    position:relative;
    bottom:45px;
    left:20px;
    width:35px;
    height:35px;
}

.dot {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  display: inline-block;
}

.collapsible {
  background-color: #f18202;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #FFE430;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}

.actie {
	float:none !important;
	margin:0 auto;
	display:block;
	width: 180px;
}


/* Regels voor tabellen - op mobiel zichtbare kolommen: 1,2 ; op groter scherm: 1,>2 */
@media(min-width:960px){
	body table tr>*.alleen-mobiel,.alleen-mobiel { display:none; }
	body table tr>*.alleen-op-mobiel,.alleen-op-mobiel { display:none; }
}



@media(max-width:960px){


body:not(:target) #header sup {
	position:absolute;
	top:8px;
	right:7px;
	z-index:1;
	background-color:#009ee0;
}

input#archief+label {
	width: 100%;
	display: block;
	text-align: center;
	line-height:20px;
	margin-bottom:20px;
	clear:both;
}


input[type=checkbox] + label:before {
	display:inline;
	line-height:20px;
}



body .logo             { display:none; }

body .logo-small       { display:block; }
body #header           { line-height:20px; }
body #header .inner    { margin:auto; max-width:1200px; width:100%; height:60px; }
body .left, body .right{ width:100%; float:none; padding:0; }
body .container        { padding-top:100px;	}
body table tbody tr td { white-space:normal; }



	body table thead { display:none; }
	body table tr>*.verberg-op-mobiel, .verberg-op-mobiel { display:none; }
	#header img { height:40px; margin-top:10px; }
	#header > .inner > ul,
	#header > .inner > ul > li > ul {
		transition: max-height 1s ease;
		/*max-height:600px;*/
		overflow:hidden;
	}
	body:not(:target) #header > .inner > ul,
	body:not(:target) #header > .inner > ul > li > ul {
		max-height:0px;
		overflow:hidden;
	}


	#header > .inner > ul+a {
		float:right;
	}
	#header > .inner > ul,
	#header > .inner > ul > li,
	#header > .inner > ul > li > a {
		width:100%;
		float:none;
		clear:both;
		display:block;
		margin:0;
	}

	#header > .inner > ul > li > ul > li > a  {
		display:block;
	}

	#header > .inner > ul > li > ul {
		display:none;
	}

	#header > .inner > ul > li > ul,
	#header > .inner > ul > li > ul > li {
		position:static;
		height:auto;
		width:100%;
	}

	#header > .inner > ul > li:last-child {
		display:block;
		text-align:center;
		position:absolute;
		top:-10px;
		right:20px;
		width:40px;
		transform:scale(0.8);
	}


	h1 { margin-top:0px; }

	#header > .inner > ul+a {
		display:inline-block;
		position:absolute;
		top:12px;
		right:10px;
		transform:scale(0.8);
	}

	body:target #header > .inner > ul+a {
		opacity:0;
		pointer-events:none;
	}

	body:not(:target) #header > .inner > ul .sluiten {
		display:none;
	}

	#header > .inner > ul {
		padding-top:10px;
	}
	 
}


.bericht {
	padding:20px;
	border-radius:5px;
	background-color:#eee;
}

.bericht:empty {
	display:none;
}

.bericht.geslaagd {
	background-color:#d7ffde;
}

.bericht.fout {
	background-color:#ffebd4;
}

.bericht.geslaagd::before {
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	content:'\f164';
	margin-right:20px;
}

.bericht.fout::before {
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	content:'\f06a';
	margin-right:20px;
	font-weight:bold;
}



.status0  * { color: #DAA520; }
tr.status20 { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQYV2NkQAIfnq//zwjjgzgCkoGMYAEYB8RmROaABAABmQ+KQH5ORwAAAABJRU5ErkJggg==); }
tr.status10 { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIUlEQVQYV2NkQAL/j1/6zwjjgzmWeoxgARgHxGZE5oAEAAYpD5wOVh05AAAAAElFTkSuQmCC); }
tr.status30 { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQYV2NkQAJrPr38zwjjgzghfOKMYAEYB8RmROaABAABXQ+Lup3h4wAAAABJRU5ErkJggg==); }

tbody tr:hover td {
	color: #000;
}

tbody tr td i {
	transition: transform 0.3s ease;
}

tbody tr td i:hover {
	transform: scale(1.2);
}

ul.secundaire-navigatie {
	display:block;
	background-color:#ddd;
	list-style:none;
	width:100%;
	padding:20px;
	margin:0;
	border-radius:4px;
	
}

ul.secundaire-navigatie li {
	margin-bottom:10px;
	text-align:center;
}

@media(min-width:960px){
	ul.secundaire-navigatie li {
		display:inline;
		margin-right:10px;
		text-align:left;
	}
}


body.bezig::after {
	content:'';
	background-color:#000b;
	position:fixed;
	top:0;
	width:100%;
	left:0;
	height:100%;
	z-index:10;
}

.link {

	text-decoration:underline;
	background:transparent;
	border:none;
	font-size:20px;
	color: #0560a7;
}

.link:hover {
	color:#009ee0;
}

.lds-ring {
  position: fixed;
  width: 80px;
  height: 80px;
  left:calc(50% - 40px);
  top:calc(50% - 40px);
  z-index:11;
  display:none;
}

body.bezig .lds-ring {
	display:inline-block;
}


.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 4px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.regel {
 border-bottom: 1px solid black;
}
.regel.opmerking {
	background-color:#000;
	color:#fff6b6;
}

.uitklapbaar {
	display: none;
}
.uitklapbaar:target {
	display:block;
}


.knoppen {
	width:100%;
	padding-top:20px;
}

.knoppen > * {
	
	display: inline-block;
	background-color: #0561a7;
	color:#fff;
	border:none;
	height:60px;
	line-height:60px;
	font-size:20px;
	padding-left:10px;
	padding-right:10px;
	border-radius:8px;
	cursor:pointer;
	transition: background 1s;
	margin-bottom:20px;
	text-align:left;
}



.knoppen > * > i {
	margin-right:10px;
}

.knoppen > *:hover {
	
	background-color: #009ee0;
	color:#fff;
}

.knoppen > label {
	background-color:transparent;
	color:#0561a7;
}

.knoppen > select {
	background-color:transparent;
	color:#0561a7;
}

@media(max-width:960px){
	.inliner {
		float:right;
		display:block;
		width:calc(100% - 30px);
	}
}

td.bewerkingsknop {
	vertical-align:top;
}

@media(min-width:960px){
	td.bewerkingsknop {
		vertical-align:middle;
	}
}