html, body {
			width: 100%;
			height: 100%;
			margin: 0;		
		}
		#map{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			background-color: #d5e8eb;
		}		
        .svg-icon {
            filter: drop-shadow(1px 2px 2px grey);
			width: 20px;
        }

		/* Sidebar show/hide button */
		.sidebutton{
			position: absolute;
			left: 9px;
			top: 9px;
			background: #ffffff;
			padding: 6px;
			border-radius: 2px;
			outline: none;
			border: 1px solid #858585;
			z-index: 999;
			cursor: pointer;
		}
		.sidebutton span{
			height: 3px;
			width: 15px;
			display: block;
			margin: 3px;
			background: #434040;
		}

		.hides {
			background: #ffffff00;
			border: none;
		}
		.hides span {
			background: #ffffff;
		}

		/* Sidebar */
		.infoBox {
			position: absolute;
		    top: 0;
		    display: none;
			background-color: white;
			width: 20em;
			transition: 0.4s;
			max-height: 98%;
			overflow-y: auto;
			z-index: 999;
			font-family: 'Calibri', tahoma, verdana;
			margin: 7px;
			border: 1px solid #ababab;
			-webkit-box-shadow:  2px 2px 10px 2px rgb(99 99 99 / 38%);
			-moz-box-shadow:  2px 2px 10px 2px rgb(99 99 99 / 38%);
			box-shadow:  2px 2px 10px 2px rgb(99 99 99 / 38%);
		}		
		.show{
		   display: block;
		}
		.infoBox::-webkit-scrollbar {
			width: 5px;
		}
		.infoBox::-webkit-scrollbar-track {
			background: #f1f1f1;
		}
		.infoBox::-webkit-scrollbar-thumb {
			background: #bec4c4;
		}
		.infoBox::-webkit-scrollbar-thumb:hover {
			background: #555;
		}	
		.filter-title {
			background-color: #004652;
			padding: 0.32em;
			color: white;
			text-transform: uppercase;
			display: block;
			text-align: right;
			margin-bottom: 5px;
			font-size: 14px;
    		font-family: 'Calibri', tahoma, verdana;
            cursor: pointer;
		}
        .filter-title:hover {
			background-color: #127c8e;
		}
        .filter-title:after {
            content: '\2212';
            color: white;
            font-weight: bold;
            float: right;
            margin-left: 10px;
        }
        .activeft:after {
         content: "\002B";
        }
        #start-filter {
			height: 28px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
		}
		.inputs input {
			margin: 0;
		}
		.inputs {
            display: block;
			padding-bottom: 0em;
            max-height: 1000px;
            transition: max-height 0.3s ease-out;
            overflow: hidden;
		}
		.inputs label {
            display: block;
            font-size: 14px;
            font-weight: normal;
			display: flex;
			padding: 0.1em 0.5em;
			margin: 0;
            line-height: 1.2;
		}
		.inputs .cat-text {
			padding-left: 6px;
		}
		.inputs div {
			display: flex;
			align-items: center;
			margin: 0px 4px;
		}
		.inputs input[type="checkbox"] {
			accent-color: #127c8e;
		}

		/* Popups*/
		.leaflet-popup-content-wrapper {
			padding: 0px;
			pointer-events: all;
			border-radius: 4px;
		}
		.leaflet-popup-content {
			padding: 0px 0px 0px;
			margin: 0;
			line-height: inherit;
			width: 28em !important;
		}
		.popup-box {
            font-family: 'Calibri', tahoma, verdana;
            width: 28em;
			line-height: 1.3;
			padding-bottom: 0.1em;
		}
		.info-box {
			max-height: 75vh;
			overflow-y: auto;
		}
		.info-box::-webkit-scrollbar {
			width: 5px;
		}
		.infoinfo-boxBox::-webkit-scrollbar-track {
			background: #f1f1f1;
		}
		.info-box::-webkit-scrollbar-thumb {
			background: #bec4c4;
		}
		.info-box::-webkit-scrollbar-thumb:hover {
			background: #555;
		}	
		.box-title {
			background-color: #004652;
			padding: 0.5em;
			font-size: 1.1em;
			text-transform: uppercase;
			color: white;
		}
		.box-item {
			font-family: 'Calibri', tahoma, verdana;
			padding: 0.2em 0.4em 0.2em 0.4em;
			color: black;
			font-size: 13px;
		}
		.box-item b {
			background: #1154634f;
			border-radius: 2px;
			padding: 0 2px;
			margin-right: 4px;
		}
		.leaflet-container a.leaflet-popup-close-button {
			color: white;
		}

		/* Map Controls */
		.leaflet-container {
    		font-size: 12px;
		}
		.leaflet-bar a {border-bottom: 1px solid #858585;}
		.leaflet-touch .leaflet-bar {
			border: 1px solid rgb(133 133 133);
		}
		.leaflet-touch .leaflet-bar a:first-child {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
		}
		.leaflet-touch .leaflet-bar a:last-child {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
		}
		a:focus, a:hover {
			text-decoration: none;
		}

		/* clusters */
		.marker-cluster {
			width: 30px !important;
			height: 30px !important;
		}
		.marker-cluster div {
			width: 24px;
			height: 24px;
			margin-left: 3px;
    		margin-top: 3px;
		}
		.marker-cluster-small {
			background-color: #0768794f;
		}
		.marker-cluster-small div {
			background-color: #006f83d8;
		}
		.marker-cluster span {
			color: white;
			line-height: 25px;
		}

        .map-attribution {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 999;
            font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
            font-size: 12px;
            max-width: 50%;
            background: #fdfdfdb0;
        }
        .map-attribution a {
            color: #0078A8;
            text-decoration: none;
        }
        .map-attribution a:visited {
            color: #0078A8;
        }
        .map-about {
            text-align: center;
            padding: 3px;
            background: #585858;
            color: white;
            cursor: pointer;
        }
        .map-about:hover {
            background: #7e7e7e;
        }
        .map-modal {
            display: none;
        }
        .ui-dialog {
            z-index: 999;
            font-size: 13px;
            width: fit-content !important;
            max-width: 40%;
            top: 20% !important;
            left: 30% !important;
            font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
            line-height: 1.4;
        }
        .ui-dialog a {
            color: #0078A8;
            text-decoration: none;
        }
        .ui-dialog a:visited {
            color: #0078A8;
        }
        .ui-widget-header {
            background: #004652;
        }

		/* export button */
        .export-control {
			cursor: pointer;
			position: absolute;
			top: 5em;
			right: 9px;
			border: 1px solid #919192;
			border-radius: 5px;
			background-color: #ffffff;
			width: 1.95em;
			height: 1.95em;
			z-index: 999;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
        }

		.info-box div[title=""] {  display: none !important;  }
		.info-box div[title="N/A"] {  display: none !important;  }
		.info-box div[title="undefined"] {  display: none !important;  }
		.info-box div[title=" "] {  display: none !important;  }
		@media only screen and (max-width: 768px) {
			.infoBox {width: 18em; max-height: 120vw;}
			.sidebutton {padding: 5px;}
			.filter-title {font-size: 0.7em;}	
			.inputs {padding-bottom: 0;}
			.inputs label {font-size: 8pt;}
			.box-item {font-size: 12px;}
			.box-name {font-size: 1.1em;}
			.leaflet-popup-content {width: 22em !important;}
			.popup-box {width: 22em;}
            .svg-icon {height: 18px;}	
            .leaflet-container .leaflet-control-attribution {max-width: 50%; text-align: right;    line-height: 1;}
            .map-attribution {    line-height: 1;}
            .ui-dialog {
                font-size: 12px;
                max-width: 60%;
                left: 20% !important;
                line-height: 1.2;
            }
		}