html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

.leaflet-control-scale {
	
	padding-bottom: 3.5px;
	padding-top: 3px;
	padding-left: 3px;
	padding-right: 3px;
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
}

.leaflet-control-attribution{
	
	padding-bottom: 3px;
	padding-top: 3px;
	padding-left: 3px;
	padding-right: 3px;
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
}

.leaflet-control-attr-scale.leaflet-control {
	margin-right: 1px;
	margin-bottom: 0px;
}

.leaflet-bottom.leaflet-right{
	display: flex
}

/* Zoom control with home button */
.leaflet-bar a {
	background-color: #fff; 
	border-bottom: 1px solid #ccc; 
	color: #444; 
	display: block; 
	height: 50px; 
	width: 26px; 
	line-height: 1.70 !important; 
	text-align: center; 
	text-decoration: none; 
	font: bold 18px 'Lucida Console', Monaco, monospace; }

/* Layers opacity sliders */
div.layer-opacity-slider-container {
	accent-color: #707073;
}

.leaflet-control-layers-selector {
	accent-color: #707073;
	}

input[type="range"].layer-opacity-slider {
	width: 200px;
	color: #FFFFFF;
}

/* Hide leyers control icon */
#hide-layers-control-icon {
	cursor: pointer;
	padding-right: 0px;
}

.leaflet-control-layers:hover { 
	background-color: #F4F4F4;
}

.leaflet-control-layers-expanded:hover {
	background-color: #FFFFFF;
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	min-width: 180px;
}

div.leaflet-popup .leaflet-popup-close-button {
	padding: 6px 6px 0 0;
}


	/* SIDEBAR */

/* .rounded-rect
{
	background: white;
	border-radius: 10px;
	box-shadow: 0 0 50px -25px black;
}

.flex-center {
	position: absolute;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-direction: column;

}

.flex-center.left {
	left: 0px;
}

.title {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
}

.label {
	padding: 5px;
	font-size: 14px;
}

.sidebar-content {
	position: absolute;
	width: 95%;
	height: 99%;
	font-size: 16px;
}

.sidebar-toggle {
	position: absolute;
	width: 1.3em;
	height: 1.3em;
	overflow: visible;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidebar-toggle.left {
	right: -1.0em;
	font-size: 30px;
}

.sidebar-toggle:hover {
	color: #45565b;
	cursor: pointer;
}

.sidebar {
	transition: transform 1s;
	z-index: 1;
	width: 300px;
	height: 100%;
}

/*
The sidebar styling has them "expanded" by default, we use CSS transforms to push them offscreen
The toggleSidebar() function removes this class from the element in order to expand it.
*/
/* .left.collapsed {
	transform: translateX(-295px);
}
 */
	/* SIDEBAR END */