/*
Inter
*/

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;700&display=swap');

:root {
  --border-color: #DEDEDE;
  --border-radius: 4px;
  --font-size: 12px;
  --primary-color: #333333;
  --input-color: #f1f3f4;
  --brand-color: hsl(32, 95%, 50%);
  --brand-color-light: hsl(32, 95%, 93%);
  --brand-color-dark: hsl(32, 95%, 50%);
  --normal: 400;
  --bold: 800;
}

* {
	outline: none;
}
body {
	font-size: 11px;
	line-height: 1.5em;
	background: white!important;
	
}
.ui-datepicker {
	z-index: 1000!important;
}
.label {
    background: hsl(32, 95%, 50%);
    color: white;
    padding: 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    opacity: 0.7;
    font-weight:bold;
}
.objectnr {
	white-space: nowrap;
}

h3, h4, h5 {
	font-weight: var(--bold)!important;
}
h3 a,
input[type=button],
input[type=submit],
a.link {
	transition: none!important;
    background: #2f2f37;
}

@media(hover: hover) {
	div#navigation li:hover ul {
		display:block;
		position:absolute;
		background-color:#2f2f37;
		margin-top:14px!important;
		padding-bottom: 0.5rem;
		margin-left:-52px!important;
		left:46px;
		top:15px;
		z-index:200;
		border:none;
		border-radius: 0 0 0.5rem 0.5rem;
		flex-direction: column;
		box-shadow: 0 0.5em 1em rgba(0,0,0,0.1);
		width: auto!important;
	}
	div#navigation li:hover > a {
		color: #f98a08;
	}
}

div#navigation ul ul li a {
	display: block;
	padding: 0 1rem;
	margin:0;
	height:auto;
	color:#fff;
	line-height:28px;
	white-space: nowrap;
	width: auto!important;
	display: block;
}
div#navigation ul ul li a:hover{
	text-decoration:none
}
div#navigation div ul li a:hover{
	color:#f98a08
}
div#navigation div ul li a:hover span {
	color: white;
}

th.rotate {
    height: 221px;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

*, *:before, *:after {
	transition:none!important;
}

h3 {
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
	margin-top: 1rem;
	margin-bottom: 0;
}
h3 a, h3 input {
	margin: 0 0.25em;
}

th.rotate {
    height: 226px!important;
    white-space: nowrap;
    padding: 0.5rem;
}

@media print {
   #navigation, #footer, footer {
      visibility: hidden;
   }
}
div#navigation {
	height: auto;
	min-height: 54px
}
div#navigation ul {
    margin-left: 40px;
}
div#navigation ul li a {
	font-size: 13px;
}
#navigation a.selected {
	color: #f98a08;
}

.wrapper {
	padding: 0 2em;
	width: 94%!important;
	left: 0!important;
	margin: 0 auto;
	margin-left: auto!important;
}
div#navigation h1 {
	background: #f98a08;
    border: 0;
    width: auto;
    padding: 0px; 
    top: -16px;
    box-shadow: none;
}
div#navigation h1:hover {
	background: none;
    border: 0px solid #f98a08;
    width: auto;
    padding: 0;
    top: -16px;
}
div#navigation h1 img {
	width: 80px;
}
div#navigation h1:hover img {
	transform: scale(1.05);
}
div#navigation h1 a {
	padding: 20px 16px 10px 16px;
}
div#navigation h1 a {
	padding: 22px 16px 10px 16px;
}

input[type=password], input[type=text] {
    font-size: 13px;
    padding: 4px;
    line-height: 10px;
    border: 1px solid #bbb;
    text-decoration: none;
    color: #333;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
}

.headerSortDown, .tablesorter-headerSortDown, .tablesorter-headerDesc,
.headerSortUp, .tablesorter-headerSortUp, .tablesorter-headerAsc {
    background-color: hsl(30deg,100%,75%)!important;
    color: #2f2f37;
}
th {
	color: #2f2f37;
}
table thead th {
	white-space: nowrap;
}
h3 {
	font-size: 20px;
}
h3 a, h3 span {
	font-weight: bold;
}



.block h3 a, .block a.link, .block button {
	background-color: white!important;
	color: #2f2f37!important;
    text-shadow: none;
	border: 2px solid #2f2f37;
	text-decoration: none;
	border-radius: 3px;
	font-weight: bold;
}
.block h3 a.active, .block h3 a:hover, .block a.link:hover, .block button:hover {
    background-color: #2f2f37!important;
	color: white!important;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
}

strong, b {
	font-weight: bold;
}

[style="color:red;"] {
	background: hsl(0, 100%, 40%)!important;
    font-weight: bold;
    color: white!important;
    padding: 2px 5px;
    line-height: 10px;
    border-radius: 3px;
    white-space: nowrap;
}

.aantal a,
.OVL a,
.project a,
.netwerk a,
.VRI a,
.EWOVL a,
.EWVRI a {
	color: inherit;
	font-weight: normal;
}

.datum,
.laatst-gewijzigd,
.laatste-vervanging,
.gewijzigd-door,
.checkbox {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	width: 10px;
	accent-color: black;
}
td.gewijzigd-door,
td.laatste-vervanging,
td.laatst-gewijzigd {
	color: inherit;
}
.gebruikers, .log, .archiveren, .bewerken {
	padding-right: 1.5rem;
}
td a {
    color: inherit;
    font-weight: 400;
    text-decoration: underline;
}
a {
	cursor: pointer;
    outline: 0;
    color: inherit;
    text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

/* form */
form div {
    clear: both;
    padding: 0.25rem 0;
    margin-bottom: 0;
}

select {
	max-width: 100%;
}

/* footer */
#footer {
	padding: 1rem 0 3rem;
}
#footer .wrapper div {
    font-size: 14px;
    padding: 0;
    line-height: 1.75em;
    text-align: left;
}

.mobnav, #mobnavclose {
	display: none!important;
}
td.number {
	text-align: right;
}

@media only screen and (max-width: 800px) {
	body {
		line-height: 1.5em;
	}
	.wrapper {
		padding: 0 1.5rem;
	}
	table:not(.dashboard) thead {
		display: none;
	}
	.panel {
		display: block;
		width: 100%!important;
	}
	
	td.mobile.number {
		padding-right: 1.5em;
	}
	div#objecten th, div.objecten td {
		display: none;
	}
	div#objecten .objectnr {
		display: table-cell;
	}
	table#childlocaties th, table#childlocaties td{
		display: none;
	}
	table#childlocaties .locatie,
	table#childlocaties .objecten {
		display: table-cell;
	}
	
	
	.bordertop {
		border-top: none!important;
	}
	.mobnav {
		display: block!important;
		float: right;
	    font-size: 25px!important;
	    padding: 13px 0!important;
	}
	#mobnav {
		transition: transform 0.5s ease 0.1s;
		transform: translate(0, -100vh);
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		overflow: auto;
		z-index: 100;
		background: #2f2f37;
		box-shadow: 0 -1em 2em rgba(0,0,0,0.2);
		padding: 2rem 0 5rem;
	}
	#mobnav:target {
		transform: translate(0, 0vh);
	}
	#mobnav a {
		text-align: left;
		display: block;
		padding: 0.5rem 2rem;
		margin: 0;
		border-radius: 0;
		background: #2f2f37;
		color: white;
		font-size: 20px;
	}
	
	.toolthumbnail {
		width: 100%!important;
		margin: 10px 0!important;
	}
}

.leaflet-touch .leaflet-bar, .leaflet-touch .leaflet-control-layers {
    border: 1px solid #ced4da!important;
    box-shadow: none!important;
	border-radius: 4px!important;
}
body {
	position: relative;
  	min-height: 100vh;
	padding-bottom: 6em; 
}
#footer {
	position: absolute;
    width: 100%;
    bottom: 0;
}

/**/

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
* {
	-webkit-font-smoothing: antialiased;
/* 	font-family: "Figtree"!important; */
	font-family: Arial,sans-serif !important;
}

body {
	color: rgb(52, 55, 65);
	font-weight: 500;
	line-height: 26px;
}
#content:not(.middle) {
	background-color: #EFEFEF;
	min-height: 100vh!important;
    background-size: 400% 400%;
    animation: gradient 8s ease infinite;
    background-position: 50% 50%;
}


.overlay {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 10000;
    right: 0;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter */
    backdrop-filter: blur(2px);
    display: none;
    background: rgba(0,0,0,0.2);
}
.modal {
    background: white;
    width: 80vw;
    bottom: 0;
    height: 80vh;
    margin: 0 10vw;
    position: absolute;
    border: 1px solid silver;
    border-radius: 4px 4px;
    border-bottom: 0;
    box-shadow: 0 -0.5em 2em rgb(0 0 0 / 15%);
}
.modal iframe {
	width: 100%;
	height: 100%;
}
th {
	background: none;
}
td {
	border-color: #EFEFEF;
}
tr:hover td,
tr.selected td {
	background: wheat;
}

.block tr.highlight.yellow td {
	background: yellow;
}
.block tr.highlight.red td {
	background: red;
	color: white;
}
.block tr.highlight.orange td {
	background: wheat;
	color: red;
}

.block .block {
	margin: 0;
	padding: 0;
	box-shadow: none;
}
.block td.m {
	width: 5px;
}
.block td {
	padding: 0.5em;
}
.block td:last-child,
.block th:last-child {
	padding-right: 1.5em;
}
.block tr:last-child td:first-child,
.block tr:last-child td.product,
.block tr:last-child td.objectnr {
	border-radius: 0 0 0 0.5em;
	padding-bottom: 0.75em;
}
.block tr:last-child td:last-child {
	border-radius: 0 0 0.5em 0;
	padding-bottom: 0.75em;
}
.block.dashboard thead {
	display: none;
}
.block thead {
    background: white;
    border-bottom: 2px solid #EFEFEF;
    box-shadow: 0 2px 0 #EFEFEF;
}
.block h3 {
	margin: 0 0 0.5em 0;
	padding: 0 1em;
	border-bottom: 1px solid #EFEFEF;
    padding-bottom: 0.75em;
    margin: 0!important;
    font-size: 1.25em;
}
.block h4 {
	margin: 0 0 0.5em 0;
	padding: 0 1em;
	border-bottom: 1px solid #EFEFEF;
    padding-bottom: 0.75em;
    margin: 0;
}
.block:not(.dashboard) h4 {
	padding: 1em;
}
.block p {
	padding: 1.5em;
}
.wrapper {
	padding: 0 1em!important ;
}
h3 input {
	color: inherit;
	padding: 0.33em;
	font-size: 12px;
}
.legend {
	background: white;
    padding: 0.75em;
    border-radius: 3px;
    box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.1);
}
.legend .circle {
	background: red;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: -1px;
    border: 1px solid black;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* loader */
.loading {
	padding: 1em 1.5em;
}
.loading div.text {
    display: inline-block;
    background-color: #444;
    height: 12px;
    border-radius: 100px;
    margin: 0.5em 0;
    min-width: 100px;
    opacity: .1;
    animation: fading 1.5s infinite;
}
.loading div.text.line {
	width: 100%;
 	max-width: 100%;
}
@keyframes fading {
	0% {opacity: .1}
	50% {opacity: .2}
	100% {opacity: .1}
}

.block #zoeken {
	border: 0;
	font-size: 15px!important;
	padding: 0.75em;
	width: 100%;
	background: none;
}

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

form div.col {
    float: none;
    width: 100%;
    clear: none;
    padding: 0.5em 1.5em;
}
form div.col strong {
	display: block;
}
form h4 {
	padding: 1rem 1.5rem!important
}
form input[type=button], form input[type=submit] {
	float: none;
    margin: 0;
    font-weight: bold;
    padding: 0.25em 1em;
    margin-right: 0.5rem;
}

.leaflet-popup .button {
	background: black;
	color: white;
	text-decoration: none;
	padding: 0.1em 0.4em;
    margin: 0.2em 0.2em 0.2em 0;
    display: inline-block;
    border-radius: 4px;
}

.leaflet-popup a {
	color: black;
	text-decoration: underline;
}
.leaflet-popup a.button {
	background: black;
	color: white;
	display: inline-block;
	text-decoration: none;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	font-weight: normal;
	letter-spacing: -0.05rem;
}

.leaflet-popup div.tab {
    margin: 0 -1.65em 1em;
    padding: 1em 1em 0.25em;
    background: #EFEFEF!important;
    margin-top: -2em;
    border-radius: 5px 5px 0 0;
}
.leaflet-popup a.tab {
    margin: 0 0.5em 0 0;
    padding: 0.25em 0.5em;
    border-bottom: 0;
    border-radius: 0.5em 0.5em 0 0;
    background: #EEE;
    text-decoration: none;
    color: black;
    display: inline-block;
    margin-bottom: -3px;
    border-bottom: 1px solid #EFEFEF;
}
.leaflet-popup a.tab.active {
	background: white;
	border-bottom: 1px solid white;
	box-shadow: 0px -3px 4px silver;
}
.leaflet-popup a.inpopup.hightlight {
	background: orange;
	color: white;
	border-radius: 0.5em;
	padding: 0.25em;
	font-size: 10px;
	text-decoration: none;
	margin-right: 1em;
    padding: 0.25em 0.75em 0.1em 0.75em;
}

.leaflet-popup-content table th,
.leaflet-popup-content table td {
	padding: 0!important;
}
.leaflet-popup-content table tr:hover {
	background: none;
}
.leaflet-popup-content {
}
.leaflet-popup-close-button {
	color: black!important;
    font-size: 20px;
    margin-top: -4px;
}
.grid .top .map {
	width: 100%;
}
.grid .row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 1em;
}
.grid .column.map{

}
.grid .column .map {
	height: 600px;
}
.grid .block {
	margin: 0;
	break-inside: avoid;
	margin-bottom: 1em;
	
}
.grid div.top .map {
	column-span: all;
}
.grid .map {
	height: 400px;
}
.grid .search {
	column-span: all;
}
.block.map {
	padding: 0;
}
.block.dashboard:not(.map) form {
	padding: 1em 1em;
}
.block.dashboard:not(.map) form [type=submit] {
	padding: 0.25em 1em;
    margin: 1em 0;
}
#map {
	border-radius: 0.5em;
}
.block:not(.map,.search) {
	padding: 1em 0 0 0!important;
}
h3 .edit {
	border: 0;
}
h3 img {
/* 	position: absolute; */
	height: 1.25em;
	vertical-align: text-bottom;
/* 	margin-left: -1.5em; */
}
h3 {
/* 	padding-left: 2.5em!important; */
}
.block.dashboard p {
	padding: 0.5em 1em;
}
.block.countdown {
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	color: white;
}
/*
.block.dashboard.beheeropmaat {
	background-image: url('/public/iconen/beheeropmaat.back.svg');
	background-size: 200px;
}
.block.dashboard.datakwaliteit {
	background-image: url('/public/iconen/datakwaliteit.back.svg');
	background-repeat: no-repeat;
	background-size: 200px;
	background-position: right bottom;
}
*/

/**/
footer {
		display: flex;
		color: white;
		padding: 1.5rem;
		margin-top: 4rem;
		background-color: black;
		margin: 0;
		border-radius: 0;
	    font-size: 0.75rem;
	    line-height: 1.5rem;
	    color: #BBB;
	    flex-shrink: 0;
	}
	footer,
	div#navigation {
		box-shadow: 0 1.25em 1em rgba(0 0 0/15%);
	}
	
	div#navigation {
		background: black;
		margin: 0;
		border-radius: 0;
		width: 100%;
	}
	div#navigation .wrapper {
		padding: 0 1.5em 0 0!important;
	}
	footer div {
		flex-basis: 100%;
		align-self: flex-end;
		margin-bottom: 0;
	}
	footer h4 {
		font-size: 1.25rem;
		margin: 0;
		color: #BBB;
		border: 0;
		padding: 0;
	}
	footer small {
		font-weight: normal;
		display: block;
		font-size: 0.9rem;
		line-height: 1.5rem;
	}
	footer a {
		text-decoration: none;
		color: #BBB;
		float: none;
		margin: 0;
		padding: 0;
		font-weight: bold;
		background: none;
		font-size: inherit;
	}
	footer a:hover {
		color: #f98a08;
	}
	html, body {
		padding-bottom: 0;
		background: #EBEBEB!important;
		min-height: 100%;
	}
	body {
		display: flex;
		flex-direction: column;
		background: #EBEBEB;
    }
	.wrapper {
		width: 100%!important;
		padding: 0 1.5em!important;
	}
	.content {
		background-color: none!important;
		background: none!important;
	}
	.block h3 {
		font-weight: normal!important;
	}
	
	/* quick fix style */
	div#navigation h1 {
		background: none;
	}
	div#navigation ul {
		margin-left: 98px;
	}
	div#navigation ul li a {
	    font-size: 14px;
	    font-weight: normal;
	    padding: 1rem 0 1rem;
	}
	#content:not(.middle) {
		min-height: calc(100vh - 10rem)!important;
	}
	.crumble {
		margin: 0;
		padding: 0;
	}
	.dashboard.map #map {
		width: 100%;
		height: 100%;
	}
	#map {
		height: 400px;
	}
	
	div#navigation ul ul li a {
		font-size: 13px;
	}
	div#navigation h1 a {
		padding: 22px 19px 10px 20px;
		line-height: 2rem;
	}
	
	#navigation i {
	    font-size: 18px;
	    margin: -0.25rem 0.25rem;
	}
	.block.bookmarks {
		padding: 0.75rem 1rem!important;
	}
	.block.bookmarks .button {
		background: black;
		color: white;
		border-radius: 4px;
		text-decoration: none;
		padding: 0.25rem 0.5rem;
		margin-right: 0.25rem;
		white-space: nowrap;
	}
	.bigblur {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.75);
		z-index: 2000;
	}
	.launch {
	    position: fixed;
	    background: black;
	    z-index: 1000;
	    top: 100px;
	    width: 800px;
	    margin-left: -400px;
	    left: 50vw;
	    padding: 3em;
	    border-radius: 0.5em;
	    color: white;
	    box-shadow: 0 0 1em rgba(0,0,0,0.15);
	}
	.launch h1 {
		margin-bottom: 1em;
	}
	.launch img {
		margin-right: -10em;
	}
	.my-div-icon nobr p {
		width:100px;
		margin-left:-48px;
		font-size:10px;
		text-align:center;
		padding:0;
	}
	.my-div-icon:hover nobr p {
		background: rgba(255,255,255,1);
		z-index: 1000;
	}
	.vri_lus {
		width: 20px;
	    height: 20px;
	    margin: -2px 0 0 -7px;
	    z-index: 5;
	}

#malfunction .ref nobr, #malfunction .omschrijving {
    display: inline-block;
    word-break: break-word;
    min-width: 100px;
    width: 100%;
}

:root {
  --border-color: #DEDEDE;
  --border-radius: 4px;
  --font-size: 13px;
  --primary-color: #333333;
  --input-color: hsl(220,50%,90%); /* #f1f3f4; */
  --brand-color: #294D9D;
  --brand-color-light: hsl(32, 95%, 93%);
  --brand-color-dark: hsl(32, 95%, 50%);
  --normal: 400;
  --bold: 800;
  --hover: #DFE4F0;
  --border-color: hsl(220,50%,94%); /* #f1f3f4; */
  --block-header: hsl(220,50%,94%); /* #f1f3f4; */
  
  --nav-height: 
  
/*   dark blue hsl(220,56.4%,36.9%) */
}

@media screen and (prefers-color-scheme: dark), screen and (prefers-contrast: more) {
 
}

@media screen and (prefers-contrast: more) {
  /* Increased Contrast Mode styles go here */
}

body {
	font-size: 11px;
	line-height: 1.5em;
	background: white!important;
	
}
.ui-datepicker {
	z-index: 1000!important;
}
.label {
    background: hsl(32, 95%, 50%);
    color: white;
    padding: 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    opacity: 0.7;
    font-weight:bold;
}
.objectnr {
	white-space: nowrap;
}
div#navigation {
	background: #2f2f37;
	border-bottom: 1px solid var(--input-color);
}
div#navigation li {
	padding-left: 0.5em;
}
div#navigation li a {
	font-size: 13px;
	padding-left: 0.25em;
	text-transform: capitalize;
    font-weight: 800;
}
div#navigation li.right {
    float: right;
    padding-left: 0;
    padding-right: 0.25em;
}
div#navigation li li a {
	font-weight: normal
}
div#navigation a {
    line-height: 12px;
    display: block;
    margin-top: -10px;
}

div#navigation li ul {
	display:none;
	
}

div#navigation ul {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
}
div#navigation li.grow {
	flex-grow: 1;
}



h4 {
	color: #2f2f37;
	margin-bottom: 0;
}
h3 {
	color: #2f2f37;
	margin-bottom: 0;
}
summary {
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin: 0!important;
    font-size: 1.1em;
    background: var(--block-header);
    font-weight: bold!important;
    position: sticky!important;
    top: 4.5rem;
    z-index: 2;
}
summary a, summary button, h3 button {
	border: 2px solid var(--brand-color);
    color: white!important;
    background-color: var(--brand-color)!important;
    text-shadow: none;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
    float: right;
    padding: 0.2rem 0.5rem;
    line-height: 1rem;
}

h3, h4, h5 {
	font-weight: var(--bold)!important;
}
h3 a,
input[type=button],
input[type=submit],
a.link {
	transition: none!important;
    background: #2f2f37;
}
button#cboxClose {
	background: #2f2f37;
    font-weight: var(--bold)!important;
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 11px;
    padding: 3px 5px;
}

.fa, .fas {
    font-family: "Font Awesome 5 Free"!important;
    font-weight: 900!important;
}
body, td, th {
	font-size: 13px!important
}
th, .link, .button, input[type=submit] {
	font-weight: bold;
}
h3 a {
	font-size: 12px;
	font-weight: bold;
}
strong {
    font-weight: var(--bold)!important;
}
#content {
    background-color: white;
    display: flex;
    margin-top: 0;
}
#footer {
	margin: 0 0 0 0;
}

@media(hover: hover) {
	div#navigation li:hover ul {
			display:block;
			position:absolute;
			margin-top:15px!important;
			padding-bottom: 0.5rem;
			margin-left:-52px!important;
			left:46px;
			top:15px;
			z-index:200;
			border:none;
			border-radius: 0 0 0.5rem 0.5rem;
			flex-direction: column;
			box-shadow: 0 0.5em 1em rgba(0,0,0,0.1);
			width: auto!important;
		    display: block;
		}
		div#navigation li:hover ul {
		padding: 0 1rem 0.75rem!important;
		border-radius: 4px;
	}
	div#navigation li:hover ul {
		display:block;
		position:absolute;
		margin-top:15px!important;
		padding-bottom: 0.5rem;
		margin-left:-64px!important;
		left:46px;
		top:15px;
		z-index:200;
		border:none;
		border-radius: 0 0 0.5rem 0.5rem;
		flex-direction: column;
		box-shadow: none!important;
		width: auto!important;
	    display: block;
	}
	div#navigation li:hover ul {
	    position:absolute;
		background-color: white!important;
		padding-bottom: 0.5rem;
		margin-left:-64px!important;
		left:46px;
		top:38px!important;
		z-index:200;
		border:none;
		border-radius: 0!important;
		flex-direction: column;
		box-shadow: none!important;
		width: auto!important;
		padding: 0 1.5rem 1rem 1.5rem!important;
		display: block;
		border: 1px solid var(--border-color)!important;
		border-top: 0!important;
	}
	div#navigation ul a {
		padding: 1.1rem 0.rem!important;
	}
	div#navigation li:hover > a {
		color: var(--brand-color)!important;
	}
}

div#navigation ul ul li {
	padding:0;
	margin:0;
	display:block;
	width: 100%;
}
div#navigation ul ul li.bordertop {
	border-top: 1px solid var(--brand-color)!important;
	margin-top: 0.5rem;
	padding-top: 0rem;
	margin-bottom: 0;
}

div#navigation ul ul li a {
	display: block;
	padding: 0!important;
	margin:0;
	height:auto;
	color:#fff;
	line-height:28px;
	white-space: nowrap;
	width: auto!important;
	display: block;
}
div#navigation ul ul li a:hover{
	text-decoration:none
}
div#navigation div ul li a:hover{
	color:#f98a08
}
div#navigation div ul li a:hover span {
	color: white;
}

th.rotate {
    height: 221px;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

*, *:before, *:after {
	transition:none!important;
}

h3 {
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
	margin-top: 1rem;
	margin-bottom: 0;
}
h3 a, h3 input {
	margin: 0 0.25em;
}

th.rotate {
    height: 226px!important;
    white-space: nowrap;
    padding: 0.5rem;
}

@media print {
   #navigation, #footer {
      visibility: hidden;
   }
}
div#navigation {
	height: auto;
	min-height: 54px
}
div#navigation ul li a {
	font-size: 13px;
}
#navigation a.selected {
	color: #f98a08;
}



.wrapper {
	padding: 0 2em;
	width: 94%!important;
	left: 0!important;
	margin: 0 auto;
	margin-left: auto!important;
}
div#navigation h1 {
	background: #f98a08;
    border: 0;
    width: auto;
    padding: 0px; 
    top: -16px;
    box-shadow: none;
}
div#navigation h1:hover {
	background: none;
    border: 0px solid #f98a08;
    width: auto;
    padding: 0;
    top: -16px;
}
div#navigation h1:hover img {
	transform: scale(1.05)
}
div#navigation h1 a {
	padding: 20px 16px 10px 16px;
}
div#navigation h1 a {
	padding: 22px 16px 10px 16px;
}

input[type=password], input[type=text] {
    font-size: 13px;
    padding: 4px;
    line-height: 10px;
    border: 1px solid #bbb;
    text-decoration: none;
    color: #333;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
}

.headerSortDown, .tablesorter-headerSortDown, .tablesorter-headerDesc,
.headerSortUp, .tablesorter-headerSortUp, .tablesorter-headerAsc {
    background-color: hsl(30deg,100%,75%)!important;
    color: #2f2f37;
}
th {
	color: #2f2f37;
}
table thead th {
	white-space: nowrap;
}
h3 {
	font-size: 20px;
}
h3 a, h3 span {
	font-weight: bold;
}

.block h3 a.active, .block h3 a:hover, .block a.link:hover, .block button:hover {
    background-color: #2f2f37!important;
	color: white!important;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
}

strong, b {
	font-weight: bold;
}

[style="color:red;"] {
	background: hsl(0, 100%, 40%)!important;
    font-weight: bold;
    color: white!important;
    padding: 2px 5px;
    line-height: 10px;
    border-radius: 3px;
    white-space: nowrap;
}

.aantal a,
.OVL a,
.project a,
.netwerk a,
.VRI a,
.EWOVL a,
.EWVRI a {
	color: inherit;
	font-weight: normal;
}

.datum,
.laatst-gewijzigd,
.laatste-vervanging,
.gewijzigd-door,
.checkbox {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	width: 10px;
	accent-color: black;
}
td.gewijzigd-door,
td.laatste-vervanging,
td.laatst-gewijzigd {
	color: inherit;
}
.gebruikers, .log, .archiveren, .bewerken {
	padding-right: 1.5rem;
}
td a {
    color: inherit;
    font-weight: 400;
    text-decoration: underline;
}
a {
	cursor: pointer;
    outline: 0;
    color: inherit;
    text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

/* form */
form div {
    clear: both;
    padding: 0.25rem 0;
    margin-bottom: 0;
}

select {
	max-width: 100%;
}

/* footer */
#footer {
	padding: 1rem 0 3rem;
}
#footer .wrapper div {
    font-size: 14px;
    padding: 0;
    line-height: 1.75em;
    text-align: left;
}

.mobnav, #mobnavclose {
	display: none!important;
}
td.number {
	text-align: right;
}

@media only screen and (max-width: 1000px) {
	body {
		line-height: 1.5em;
	}
	.wrapper {
		padding: 0 1.5rem;
	}
	table:not(.dashboard) thead {
		display: none;
	}
	.panel {
		display: block;
		width: 100%!important;
	}
	
	td.mobile.number {
		padding-right: 1.5em;
	}
	div#objecten th, div.objecten td {
		display: none;
	}
	div#objecten .objectnr {
		display: table-cell;
	}
	table#childlocaties th, table#childlocaties td{
		display: none;
	}
	table#childlocaties .locatie,
	table#childlocaties .objecten {
		display: table-cell;
	}
	
/*
	table:not(.dashboard) td {
		display: block;
		width: 100%!important;
	}
	table:not(.dashboard) th, table:not(.dashboard) td {
	}
	table:not(.dashboard) tr {
		border-bottom: 2px solid silver;
	}
	table:not(.dashboard) td[data-label] {
		border-bottom: 1px dotted silver;
		
	}
	table:not(.dashboard) td[data-label]:not(table:not(.dashboard) td[data-label="omschrijving"]):before {
		content: attr(data-label) ": ";
		font-weight: bold;
	}
	table:not(.dashboard) td:empty {
    	display: none;
	}
*/
	

	.bordertop {
		border-top: none!important;
	}
	.mobnav {
		display: block!important;
		float: right;
	    font-size: 25px!important;
	    padding: 13px 0!important;
	}
	#mobnav {
		transition: transform 0.5s ease 0.1s;
		transform: translate(0, -100vh);
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		overflow: auto;
		z-index: 100;
		background: #2f2f37;
		box-shadow: none!important;
		padding: 2rem 0 5rem;
	}
	#mobnav:target {
		transform: translate(0, 0vh);
	}
	#mobnav a {
		text-align: left;
		display: block;
		padding: 0.5rem 2rem;
		margin: 0;
		border-radius: 0;
		background: #2f2f37;
		color: white;
		font-size: 20px;
	}
	
	.toolthumbnail {
		width: 100%!important;
		margin: 10px 0!important;
	}
}



div.nen3140 {
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.25);
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1010;
	backdrop-filter: blur(2px);
}
div.nen3140 .popup {
	background: white;
	box-shadow: none;
	border: 1px solid silver;
	border-radius: 4px;
	padding: 0 2em 2em 2em;
	min-width: 500px;
	min-height: 250px;
}
.popup a {
	float: left;
	background: white;
    color: #2f2f37;
    border: 2px solid #2f2f37;
    text-shadow: none;
    text-decoration: none;
    padding: 0.25em 1em;
    border-radius: 4px;
    margin-right: 1em;
}

th.approved, th.id, th.highlight, th.highlighttype,
td.approved, td.id, td.highlight, td.highlighttype {
	display: none;
}
tr.tablesorter-filter-row input {
	width: 100%;
}

.header,
.tablesorter-header {
	/* black (unsorted) double arrow */
	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
	background-repeat: no-repeat;
	background-position: center right;
    cursor: pointer;
	white-space: nowrap;
}
.headerSortUp,
.tablesorter-headerSortUp,
.tablesorter-headerAsc:not(td) {
	background-color: #ffad00;
	background-repeat: no-repeat;
	background-position: center right;
	/* black asc arrow */
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
.headerSortDown,
.tablesorter-headerSortDown,
.tablesorter-headerDesc:not(td) {
	background-color: #ffad00;
	/* black desc arrow */
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
thead .sorter-false {
	background-image: none;
	cursor: default;
/* 	padding: 4px; */
}

.leaflet-touch .leaflet-bar, .leaflet-touch .leaflet-control-layers {
    border: 1px solid #ced4da!important;
    box-shadow: none!important;
	border-radius: 4px!important;
}
body {
	position: relative;
  	min-height: 100vh;
	padding-bottom: 6em; 
}
#footer {
	position: absolute;
    width: 100%;
    bottom: 0;
}

/**/

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
*, body {
	-webkit-font-smoothing: antialiased;
	outline: none;
}

body {
	color: rgb(52, 55, 65);
	line-height: 26px;
}
#content:not(.middle) {
	background-color: white!important;
	min-height: 100vh!important;
    background-size: 400% 400%;
    animation: gradient 8s ease infinite;
    background-position: 50% 50%;
}

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 10000;
    right: 0;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter */
    backdrop-filter: blur(2px);
    display: none;
    background: rgba(0,0,0,0.2);
}
.modal {
    background: white;
    width: 80vw;
    bottom: 0;
    height: 80vh;
    margin: 0 10vw;
    position: absolute;
    border: 1px solid silver;
    border-radius: 4px 4px;
    border-bottom: 0;
    box-shadow: none!important;
}
.modal iframe {
	width: 100%;
	height: 100%;
}
th {
	background: none;
}
td {
	border-color: var(--border-color);
}
tr:hover td,
tr.selected td {
	background: var(--hover);
}

.block tr.highlight.yellow td {
	background: rgba(255, 199, 44, 0.5)!important;
}
.block tr.highlight.yellow:hover td {
	background: rgba(255, 199, 44, 0.85)!important;
}
.block tr.highlight.red td {
	background: red;
	color: white;
}
.block tr.highlight.orange td {
	background: var(--hover);
	color: red;
}

td.\- {
    width: 50px;
}

.block {
	background: white;
	padding: 0 0 0 0;
	border-radius: 0.5em;
	margin: 0.5rem 0;
	box-shadow: none!important;
}
.block:hover {
	box-shadow: none!important;
}
.block td:first-child,
.block th:first-child,
.block td.objectnr,
.block th.objectnr,
.block td.oude-product,
.block th.oude-product,
.block td.pos,
.block th.pos
{
	padding-left: 1.5em!important;
}

.block tr:last-child td {
	border-bottom: 0px!important;
}

.block td, .block th {
	padding: 0.5em;
}
.block th {
	color: black;
	font-weight: bold;
	text-transform: capitalize;
}
.block td:last-child,
.block th:last-child {
	padding-right: 1.5em;
}
.block tr:last-child td:first-child,
.block tr:last-child td.product,
.block tr:last-child td.objectnr {
	border-radius: 0!important;
	padding-bottom: 0.75em;
}
.block tr:last-child td:last-child {
	border-radius: 0!important;
	padding-bottom: 0.75em;
}
.block.dashboard thead {
	display: none;
}
.block thead {
    background: white;
    border-bottom: 2px solid var(--border-color);
}

.block h3:not(.normal) {
	margin: 0 0 0.5em 0;
	padding: 0.5rem 1.25rem;
	border-bottom: 1px solid var(--border-color);
    margin: 0!important;
    font-size: 1.1em;
    background: var(--block-header);
    
    font-weight: bold!important;
	position: sticky!important;
    top: 4.5rem;
    z-index: 3;
}
.block h4 {
	margin: 0 0 0.5em 0;
	padding: 0 1em;
	border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75em;
    margin: 0;
}
.block:not(.dashboard) h4 {
	padding: 1em;
}
.block p {
	padding: 1.5em;
}
.wrapper {
	padding: 0 1em!important ;
}
h3 input {
	color: inherit;
	padding: 0.33em;
	font-size: 12px;
}
.legend {
	background: white;
    padding: 0.75em;
    border-radius: 3px;
    box-shadow: none!important;
}
.legend .circle {
	background: red;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: -1px;
    border: 1px solid black;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* loader */
.loading {
	padding: 1em 1.5em;
}
.loading div.text {
    display: inline-block;
    background-color: #444;
    height: 12px;
    border-radius: 100px;
    margin: 0.5em 0;
    min-width: 100px;
    opacity: .1;
    animation: fading 1.5s infinite;
}
.loading div.text.line {
	width: 100%;
 	max-width: 100%;
}
@keyframes fading {
	0% {opacity: .1}
	50% {opacity: .2}
	100% {opacity: .1}
}

.block #zoeken {
	border: 0;
	font-size: 15px!important;
	padding: 0.75em;
	width: 100%;
	background: none;
}

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

form div.col {
    float: none;
    width: 100%;
    clear: none;
    padding: 0.5em 1.5em;
}
form div.col strong {
	display: block;
}
form h4 {
	padding: 1rem 1.5rem!important
}
form input[type=button], form input[type=submit] {
	float: none;
    margin: 0;
    font-weight: bold;
    padding: 0.25em 1em;
    margin-right: 0.5rem;
}

.leaflet-popup .button {
	background: black;
	color: white;
	text-decoration: none;
	padding: 0.1em 0.4em;
    margin: 0.2em 0.2em 0.2em 0;
    display: inline-block;
    border-radius: 4px;
}

.leaflet-popup a {
	color: black;
	text-decoration: underline;
}
.leaflet-popup a.button {
	background: black;
	color: white;
	display: inline-block;
	text-decoration: none;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	font-weight: normal;
	letter-spacing: -0.05rem;
}

.leaflet-popup div.tab {
    margin: 0 -1.65em 1em;
    padding: 1em 1em 0.25em;
    background: var(--border-color)!important;
    margin-top: -2em;
    border-radius: 5px 5px 0 0;
}
.leaflet-popup a.tab {
    margin: 0 0.5em 0 0;
    padding: 0.25em 0.5em;
    border-bottom: 0;
    border-radius: 0.5em 0.5em 0 0;
    background: #EEE;
    text-decoration: none;
    color: black;
    display: inline-block;
    margin-bottom: -3px;
    border-bottom: 1px solid var(--border-color);
}
.leaflet-popup a.tab.active {
	background: white;
	border-bottom: 1px solid white;
	box-shadow: none!important;
}
.leaflet-popup a.inpopup.hightlight {
	background: orange;
	color: white;
	border-radius: 0.5em;
	padding: 0.25em;
	font-size: 10px;
	text-decoration: none;
	margin-right: 1em;
    padding: 0.25em 0.75em 0.1em 0.75em;
}

.leaflet-popup-content table th,
.leaflet-popup-content table td {
	padding: 0!important;
}
.leaflet-popup-content table tr:hover {
	background: none;
}
.leaflet-popup-content {
}
.leaflet-popup-close-button {
	color: black!important;
    font-size: 20px;
    margin-top: -4px;
}
.grid .top .map {
	width: 100%;
}
.grid .row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 1em;
}
.grid .column.map{

}
.grid .column .map {
	height: 600px;
}
.grid .block {
	margin: 0;
	break-inside: avoid;
	margin-bottom: 1em;
	
}
.grid div.top .map {
	column-span: all;
}
.grid .map {
	height: 400px;
}
.grid .search {
	column-span: all;
}
.block.map {
	padding: 0;
}
.block.dashboard:not(.map) form {
	padding: 1em 1em;
}
.block.dashboard:not(.map) form [type=submit] {
	padding: 0.25em 1em;
    margin: 1em 0;
}
#map {
	border-radius: 0.5em;
}
.block:not(.map,.search) {
	padding: 0!important;
}
h3 .edit {
	border: 0;
}
h3 img {
	height: 1.25em;
	vertical-align: text-bottom;
}
.block.dashboard p {
	padding: 0.5em 1em;
}
.block.countdown {
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	color: white;
}

/**/
footer {
		display: flex;
		color: white;
		padding: 1.5rem;
		margin-top: 4rem;
		background-color: black;
		margin: 0;
	    border-radius: 0;
	    font-size: 0.75rem;
	    line-height: 1.5rem;
	    color: #BBB;
	    flex-shrink: 0;
	}
	footer,
	div#navigation {
		box-shadow: none;
	}
	
	div#navigation {
		background: black;
		margin: 0 1rem;
		border-radius: 0 0 0.5rem 0.5rem;
		width: 100vw;
	}
	div#navigation .wrapper {
		padding: 0 1.5em 0 0!important;
	}
	footer div {
		flex-basis: 100%;
		align-self: flex-end;
		margin-bottom: 0;
	}
	footer h4 {
		font-size: 1.25rem;
		margin: 0;
		color: #BBB;
		border: 0;
		padding: 0;
	}
	footer small {
		font-weight: normal;
		display: block;
		font-size: 0.9rem;
		line-height: 1.5rem;
		color: #FFC72C;
	}
	footer a {
		text-decoration: none;
		float: none;
		margin: 0;
		padding: 0;
		font-weight: bold;
		background: none;
		font-size: inherit;
		color: white!important;
	}
	footer a:hover {
		color: #f98a08;
	}
	html, body {
		padding-bottom: 0;
		background: #EBEBEB!important;
		min-height: 100%;
	}
	body {
		display: flex;
		flex-direction: column;
		background: #EBEBEB;
    }
	.wrapper {
		width: 100%!important;
		padding: 0 1.5em!important;
	}
	.content {
		background-color: none!important;
		background: none!important;
	}
	
	/* quick fix style */
	div#navigation h1 {
		background: none;
	}
	div#navigation ul li a {
	    font-size: 14px;
	    font-weight: normal;
	}
	#content:not(.middle) {
		min-height: calc(100vh - 10rem)!important;
	}
	.crumble {
		margin: 0;
		padding: 0;
	}
	.dashboard.map #map {
		width: 100%;
		height: 100%;
	}
	#map {
		height: 400px;
	}
	
	div#navigation ul ul li a {
		font-size: 13px;
	}
	div#navigation h1 a {
		padding: 22px 19px 10px 20px;
		line-height: 2rem;
	}
	
	#navigation i {
	    font-size: 18px;
	    margin: -0.25rem 0.25rem;
	}
	.block.bookmarks {
		padding: 0.75rem 1rem!important;
	}
	.block.bookmarks .button {
		background: black;
		color: white;
		border-radius: 4px;
		text-decoration: none;
		padding: 0.25rem 0.5rem;
		margin-right: 0.25rem;
		white-space: nowrap;
	}
	.bigblur {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.75);
		z-index: 2000;
	}
	.launch {
	    position: fixed;
	    background: black;
	    z-index: 1000;
	    top: 100px;
	    width: 800px;
	    margin-left: -400px;
	    left: 50vw;
	    padding: 3em;
	    border-radius: 0.5em;
	    color: white;
	    box-shadow: none!important;
	}
	.launch h1 {
		margin-bottom: 1em;
	}
	.launch img {
		margin-right: -10em;
	}
	.my-div-icon nobr p {
		width:100px;
		margin-left:-48px;
		font-size:10px;
		text-align:center;
		padding:0;
	}
	.my-div-icon:hover nobr p {
		background: rgba(255,255,255,1);
		z-index: 1000;
	}
	.vri_lus {
		width: 20px;
	    height: 20px;
	    margin: -2px 0 0 -7px;
	    z-index: 5;
	}
	
.modules {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    grid-gap: 1em;
    padding: 2em 1em 1em;
}
.module {
	text-align: center;
	text-decoration: none;
}
.module .icon {
	background: url('/public/iconen/tegel.svg') no-repeat center center;
	color: #294D9D;
	border-radius: 8px;
	font-size: 43px;
	width: 92px;
	margin: auto;
	height: 92px;
	line-height: 92px;
	padding: 0;
}
.module img {
	display: block;
}
.module:hover .icon {
	color: #294D9D;
}
i:hover {
    color: #294D9D;
}
[tooltip]:hover:before {
    content: attr(tooltip);
    position: absolute;
	font-size: 12px;
	font-weight: normal;
	background: rgba(0 0 0/80%);
	padding: 0.25rem 0.5rem;
	z-index: 5;
	width: 200px;
	margin: 80px 0 0 -40px;
	color: white;
	border-radius: 4px;
	white-space: pre-wrap;
	line-height: 1.25rem;
	text-align: left;
}

body {
	background-image: none!important;
	background-position: top center!important;
	background-repeat: no-repeat!important;
	background-size: 100%!important;
}

#content:not(.middle) {
	background-color: hsl(220,56.4%,97%)!important;
}

h3 a, 
input[type=button], 
input[type=submit],
a.link {
	background: var(--brand-color)!important;
}

.block h3 a.active, 
.block h3 a:hover, 
.block a.link:hover, 
.block button:hover {
	background-color: var(--brand-color)!important;
}

.block h3 a, .block a.link, .block button {
	background-color: white!important;
    text-shadow: none;
	text-decoration: none;
	border-radius: 3px;
	font-weight: normal;
}

.block h3 a, .block a.link, .block button {
	border: 1px solid var(--brand-color);
    color: var(--brand-color) !important;
    padding: 6px 6px 6.5px;
}

footer {
	background-color: var(--brand-color)!important;
	color: white;
}

.block {
	box-shadow: none!important;
	border-radius: 4px!important;
	background: white!important;
	border: 2px solid var(--border-color);
}
.block tr {
	background-color: white!important;
}

/* make crumble as block */
.crumble {
	margin: 1em 0 0 0;
	padding: 8px 0;
	color: #999999;
	font-size: 12px;
}
.crumble li {
	display: inline;
	margin-right: 8px;
}
.crumble li a {
	color: #000000;
	text-decoration: none;
}
.crumble li a:hover {
	text-decoration: underline;
}

.crumble {
	background: var(--border-color);
	border-radius: 4px;
	border: 1px solid var(--border-color);
	display: flex;
	margin-bottom: 1rem;
	margin-top: 1rem;
    padding: 0.25rem 1rem;
}
.crumble li {
	padding: 0;
    font-size: 13px;
    white-space: nowrap;
}
.crumble {
	color: #2f2f37;
	overflow-x: auto;
}
.crumble a {
	text-decoration: underline!important;
}

#mapcontainer {
	box-shadow: none!important;
}

a.calamity {
	background:red!important;
	border-radius:4px!important;
	padding: 0 0.75rem 0 0!important;
	margin: 6px 0px 0 0!important;
	color:white!important;
}

table caption {
	display: none;
}
input {
	accent-color: black;
}

.mobnav {
	color: black!important;
}

.block table thead {
	position: sticky!important;
    top: 7rem;
    z-index: 1;
}
.block table.logtable thead {
    top: 0rem;
    z-index: 1;
}

/* add padding to cells to prevent sort arrow overlap */
th:not(.sorter-false) .tablesorter-header-inner {
	padding-right: 0.75rem;
}
/* make sorte-false cells as small as possible */
th.sorter-false {
    width: 10px;
}

element.style {
    user-select: none;
}

.tablescroll {
	overflow: none!important;
}

.context li i {
	float: right;
	margin: 0.25rem;
	display: none;
}

/* hide on mobile */
@media only screen and (max-width: 768px) {
	td.W, 
	td.levensduur, 
	td.prijs, 
	td.productopties, 
	td.gebruik, 
	td.gewijzigd,
	td.laatst-gewijzigd,
	td.gewijzigd-door,
	td.gebruik,
	td.laatste-vervanging,
	td.in-beheer,
	td.eigenaar,
	td.netleverancier,
	td.bemeterd,
	td.doc,
	td.door, 
	td.documenten {
		display:none
	}
	
	flex-direction: column
	
	.block td:first-child, 
	.block th:first-child, 
	.block td.product, 
	.block th.product, 
	.block td.objectnr, 
	.block th.objectnr, 
	.block td.oude-product, 
	.block th.oude-product, 
	.block td.pos, 
	.block th.pos {
		padding-left: 0.5rem!important;
	}
	.wrapper {
		padding: 0 1em!important;
	}
	h1 a img {
		height: 2rem;
		width: auto;
	}
	div#navigation {
		min-height: 3.5rem!important;
	}
	#content:not(.middle) {
		min-height: calc(100vh - 12rem)!important;
	}
	.block h3:not(.normal) {
		top: 3.5rem;
	}
	body, td, th {
		font-size: 14px!important;
		
	}
}

/* navigation */
div.context ul {
    margin: 0;
    padding: 0;
    display: none;
    list-style: none;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 1rem rgba(0,0,0,0.5);
    box-shadow: 0 1.25em 1em rgb(0 0 0 / 30%);
    width: auto;
    padding: 0.35rem;
}
div.context ul a {
    padding: 0.15rem 0.75rem;
    white-space: nowrap;
    display: block;
    text-decoration: none;
}
div.context ul a[href="#"]{
    color: silver;
    cursor: not-allowed;
}
div.context ul a:hover {
	background: wheat;
	border-radius: 4px;
}
div.context ul a[href="#"]:hover {
    font-weight: normal;
    background: none;
}
div.context li.bt {
    border-top: 1px solid #DDD;
    margin-top: 6px;
    padding-top: 6px;
}
@media (hover: hover) {
	div.context:hover ul {
	    display: flex;
	    flex-direction: column;
	    position: absolute;
	    margin-top: -1.6rem;
	    right: 2rem;
	    float: right;
	    z-index: 100;
	}
}

/* navigation */
div#navigation {
	background: #2f2f37;
}
div#navigation li {
	padding-left: 0.5em;
}
div#navigation li a {
	font-size: 14px;
	padding-left: 0.25em;
	text-transform: capitalize;
    font-weight: 800;
}
div#navigation li.right {
    float: right;
    padding-left: 0;
    padding-right: 0.25em;
}
div#navigation li li a {
	font-weight: normal
}
div#navigation a {
    line-height: 12px;
    display: block;
    padding: 1em 0;
    margin-top: -10px;
}

div#navigation li ul {
	display:none;	
}

div#navigation ul {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
}
div#navigation li.grow {
	flex-grow: 1;
}

div#navigation {
	background: white!important;
	border-radius: 0!important;
	margin: 0!important;
	width: 100%!important;
	min-height: 74px!important;
}
div#navigation ul {
	margin-left: 5rem;
}
div#navigation ul li a {
	line-height: 41px!important;
    margin-top: -16px;
}
div#navigation ul li ul li a {
	margin-top: 0;
	line-height: 1rem!important;
}
div#navigation li * {
	color: black!important;
}
div#navigation li.selected a.selected {
	color: var(--brand-color)!important;
	font-weight: bold;
}

div.context ul a:hover {
	background: var(--hover)!important;
}

div#navigation ul ul li.bordertop {
    border-top: 1px solid #DDD!important;
	margin-top: 0;
    padding-top: 0.5rem;
}

div#navigation li li a {
	padding: 0.25rem;
}
div#navigation img.icon {
    vertical-align: middle;
}
div#navigation select {
	margin-top: 12px;
}



div#navigation ul ul {
	margin: 0;
	padding: 0;
    
}
div#navigation ul ul li {
	padding:0;
	margin:0;
	display:block;
	width: 100%;
}
div#navigation ul ul li.bordertop {
	border-top: 1px solid rgba(255,255,255,0.25);
	margin-top: 0.5rem;
	padding-top: 0.25rem;
	margin-bottom: 0.5rem;
}

div#navigation ul ul li a {
	display: block;
	padding: 0 1rem;
	margin:0;
	height:auto;
	color:#fff;
	line-height:28px;
	white-space: nowrap;
	width: auto!important;
	display: block;
}
div#navigation ul ul li a:hover{
	text-decoration:none
}
div#navigation div ul li a:hover{
	color:#f98a08
}
div#navigation div ul li a:hover span {
	color: white;
}
/* navigation */

/* improve mobile menu */
@media only screen and (max-width: 800px) {
	div#navigation {
		min-height: 3.5rem !important;
		ul {
			display: none;
		}
	}
	
	/* navigation */
	div#navigation li {
    	padding-left: 0;
    	display: contents;
	}
	div#navigation ul {
	    margin-left: 0;
	    display: none;
	    padding: 3.5rem 0 0 0 !important;
	    margin: 1rem !important;
	    position: fixed;
	    top: 0;
	    left: 0;
	    background: white;   
	}
	div#navigation ul a {
		padding: 1rem;
	}
	div#navigation:target .mobnav,
	.nomobile{
		display: none!important;
	}
	div#navigation:target #mobnavclose {
		display: block!important;
		position: absolute;
		right: 1.5em;
		top: -0.25em;
		font-size: 20px;
		color: black;
	}
	
	div#navigation:target ul {
		display: block;
		padding: 3.5rem 0 0 0 !important;
		overflow: scroll;
		margin: 0rem !important;
        width: 100%;
        z-index: -1;
	}
	div#navigation:target ul ul {
		display: none;
		height: auto;
		overflow: hidden;
/* 		display: block!important; */
		position: revert;
		padding: 0 2rem !important;
	}
	div#navigation:target ul a {
		font-size: 14px;
		padding: 0.5rem 1.25rem;
	}
}
/* improve mobile menu */

.withselection {
	display: none;
	background: hsl(42, 98%, 90%);
	padding: 0.5rem 1rem 1rem;
	border-radius: 3px;
	font-weight: bold;
	margin-bottom: 1rem;
	border: 1px solid hsl(42, 98%, 75%);
}
.withselection select {
	width: 100%;
	padding: 0.25rem;
	border-radius: 4px;
}
#objecten:has([type=checkbox]:checked) .withselection,
.wrapper:has([type=checkbox]:checked) .withselection {
	display: block
}

th.t, td.t {
    width: 10px;
}
div.context ul {
    margin: 0;
    padding: 0;
    display: none;
    list-style: none;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 1rem rgba(0,0,0,0.5);
    box-shadow: 0 1.25em 1em rgb(0 0 0 / 30%);
    width: auto;
    padding: 0.35rem;
}
div.context ul a {
    padding: 0.15rem 0.75rem;
    white-space: nowrap;
    display: block;
    text-decoration: none;
}
div.context ul a[href="#"]{
    color: silver;
    cursor: not-allowed;
}
div.context ul a:hover {
	background: wheat;
	border-radius: 4px;
}
div.context ul a[href="#"]:hover {
    font-weight: normal;
    background: none;
}
div.context li.bt {
    border-top: 1px solid #DDD;
    margin-top: 6px;
    padding-top: 6px;
}
@media (hover: hover) {
    div.context:hover ul {
	    display: flex;
	    flex-direction: column;
	    position: absolute;
	    margin-top: -1.6rem;
	    right: 2rem;
	    float: right;
	    z-index: 100;
    }
    div.context li a.cancel {
	    color: red;
	    display: none;
    }
}
@media (hover: none) {
    div.context ul {
	    position: fixed;
	    left: 1rem;
	    right: 1rem;
	    bottom: 1rem;
	    z-index: 100;
    }
    div.context ul li {
	    font-size: 1rem;
	    padding: 0.5rem 1rem 0.5rem 1rem
    }
    div.context li a.cancel {
	    color: red;
	    display: block;
    }
}

dialog#context:open {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 1rem;
    background: none;
}
dialog#context ul {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    background: white;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 4px;
}
dialog#context ul li {
    padding: 1rem;
}
dialog#context ul li.bt {
    border-top: 1px solid silver;
}
dialog#context a {
    text-decoration: none;
}
dialog#context a.cancel {
    color: red;
}

dialog#context ul a[href="#"]{
    color: silver;
    cursor: not-allowed;
}

th,
td.t i {
   color: grey; 
}

body.compact tr td {
    padding: 0.25rem !important;
}
body.wide tr td {
    padding: 0.75rem !important;
}

a.continue.locatielink {
    display: block;
}
td.omschrijving i {
	display: block;
	margin-top: 1rem;
}

table td b:hover:before {
	content: '';
	position: absolute;
	width: 0; 
	height: 0; 
	border-left: 0.5rem solid transparent;
	border-right: 0.5rem solid transparent;
	border-bottom: 0.5rem solid rgba(0 0 0/80%);
	margin-top: 1rem;
	margin-left: -1px;
}
table td b:hover:after {
	position: absolute;
	font-size: 12px;
	font-weight: normal;
	background: rgba(0 0 0/80%);
	padding: 0.25rem 0.5rem;
	z-index: 5;
	width: 200px;
	margin: 1.5rem 0 0 -124px;
	color: white;
	border-radius: 4px;
	white-space: pre-wrap;
	line-height: 1.25rem;
	text-align: left;
}
.sweet_loader {
	width: 140px;
	height: 140px;
	margin: 0 auto;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-name: ro;
	transform-origin: 50% 50%;
	transform: rotate(0) translate(0,0);
}
@keyframes ro {
	100% {
		transform: rotate(-360deg) translate(0,0);
	}
}

.swal2-popup {
	font-size: inherit;
}
.swal2-title {
	font-size: normal;
}
.swal2-styled.swal2-confirm {
	background-color: black;
	outline: none;
}

tr {
	border-left: 3px solid transparent
}

tbody tr:hover {
	border-left: 3px solid silver;
}
tr:has(input[type="checkbox"]:checked){
	border-left: 3px solid var(--brand-color)
}

/* debug timer */
.Timing {
	position:fixed;
	bottom:0;
	right:2rem;
	border-radius: 4px 4px 0 0;
	max-height:200px;
	width:400px;
	background:white;
	overflow:auto;
	padding:0.5rem 1rem;
	z-index:1000;
	display:none;
}

.tablesearch {
	color: inherit;
    font-size: 13px;
    padding: 4px;
    float: right;
}
.onmap {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyIDJDOC4xMyAyIDUgNS4xMyA1IDljMCA1LjI1IDcgMTMgNyAxM3M3LTcuNzUgNy0xM2MwLTMuODctMy4xMy03LTctN3pNNyA5YzAtMi43NiAyLjI0LTUgNS01czUgMi4yNCA1IDVjMCAyLjg4LTIuODggNy4xOS01IDkuODhDOS45MiAxNi4yMSA3IDExLjg1IDcgOXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjkiIHI9IjIuNSIvPjwvc3ZnPg==);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	height:1.5rem;
	width: 1rem;
	vertical-align: bottom;
}


/* style details */
details ::marker {
  font-size: 1.2em;
  border: 1px solid red;
}


#filepreview {
	max-width: 300px;
    height: 300px;
    padding: 0.5rem;
    background: rgba(0,0,0,0.5);
    position: absolute;
    color: white;
}
#filepreview:after {
	position: absolute;
	font-size: 12px;
	font-weight: normal;
	background: rgba(0 0 0/80%);
	padding: 0.25rem 0.5rem;
	z-index: 5;
	width: 200px;
	margin: 1.5rem 0 0 -124px;
	color: white;
	border-radius: var(--radius);
	white-space: pre-wrap;
	line-height: 1.25rem;
	text-align: left;
}
.object-fit-cover {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


td[data-label="Type"],
td[data-label="Plaatsdatum"],
td[data-label="Vervangingsdatum"],
td[data-label="Info"]
{
    white-space: nowrap;
}

/* message */
.message {
	background: rgba(250, 221, 159);
    color: #000;
    border: 1px solid rgba(255, 199, 44, 1);
    padding: 0.75rem 1.25rem !important;
}
#selection.message {
    position: sticky;
    top: 5rem;
    z-index: 10;
}

@media only screen and (max-width: 800px) {
	div#navigation ul ul {
		border: 1px solid red !important;
		display: none!important;
	}
}

/* tagging */
span.tag {
    border: 0;
    border-radius: 3px;
    background: #3abff0;
    padding: 4px 8px;
    color: #1F388C;
    font-size: 11px;
}
span.tag.red {
    background: orangered;
    color: white;
}
span.tag.yellow {
    background: #ffc72c;
    color: #1F388C;
}