/*Basics*/

body {
	height: 100%;
	width: 100%;
	position: absolute;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	z-index: -1;
	font-family: 'Old Standard TT', serif;
}


/* sidebar */

.infotop {
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	padding-top: 70px;
	padding-left: 20px;
	padding-right: 20px;
}

.infobot {
	position: absolute;
	bottom: 0;
	left: 0;
	background: transparent;
	padding-bottom: 40px;
	padding-left: 20px;
}

h1 {
	font-size: 5vh;
	font-weight: 300;
	margin: 0;
	padding-bottom: 20px;
}

h2 {
	font-size: 3vh;
	font-weight: 300;
	margin: 0;
	padding-bottom: 5px;
}

p {
	font-size: 2vh;
	margin: 0;
	padding-bottom: 20px;
}

h3 {
	font-size: 2vh;
	font-weight: 100;
	font-size: 12px;
	margin: 0;
}


/*sidebar*/

#sidebar-wrapper {
	position: absolute;
	top: 0;
	min-height: 100vh;
	margin-left: -100%;
	-webkit-transition: margin .25s ease-out;
	-moz-transition: margin .25s ease-out;
	-o-transition: margin .25s ease-out;
	transition: margin .25s ease-out;
	width: 100%;
	background: #f5f5f5eb;
	color: black;
	z-index: 2;
}

#sidebar-wrapper.toggled {
	margin-left: 0;
	z-index: 2;
}

@media (min-width: 1240px) {
	#sidebar-wrapper {
		width: 50%;
		margin-left: 0;
		z-index: 2;
	}
	#sidebar-wrapper.toggled {
		margin-left: -50%;
		z-index: 2;
	}
}


/*icon menu*/

.container {
	display: inline-block;
	cursor: pointer;
	position: absolute;
	margin: 20px;
	top: 0;
	z-index: 3;
	background: transparent;
	width: auto;
	border: 0px solid white;
}

.bar1,
.bar2,
.bar3 {
	width: 35px;
	height: 4px;
	background-color: #000000;
	margin: 7px 0;
	transition: 0.4s;
}

.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-8px, 6px);
	transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
	opacity: 0;
}

.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -7px);
}

.back .bar1 {
	-webkit-transform: rotate(0deg) translate(0px);
	transform: rotate(0deg) translate(0px);
}

.back .bar2 {
	opacity: 100;
}

.back .bar3 {
	-webkit-transform: rotate(0deg) translate(0px);
	transform: rotate(0deg) translate(0px);
}

@media (min-width: 1240px) {
	.bar1 {
		-webkit-transform: rotate(-45deg) translate(-8px, 6px);
		transform: rotate(-45deg) translate(-9px, 6px);
	}
	.bar2 {
		opacity: 0;
	}
	.bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -8px);
		transform: rotate(45deg) translate(-8px, -7px);
	}
}

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


/* Cursors and pointer */

.leaflet-container.cell-cursor-enabled {
	cursor: crosshair;
}

.leaflet-overlay-pane path,
.leaflet-marker-icon {
	cursor: pointer;
}


/* popup */

.leaflet-popup-content-wrapper {
	font-family: 'Old Standard TT', serif;
	border-radius: 0px;
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
	border-radius: 0px;
}

.leaflet-popup-tip-container {}

.leaflet-popup-content {
	margin: 20px 20px;
	line-height: 1.9;
}

.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 1px;
	left: 0;
	padding: 3px;
	text-align: center;
	width: 14px;
	height: 14px;
	font-family: 'Old Standard TT', serif;
	color: #000000;
	text-decoration: none;
	background: transparent;
}


/*attribution*/

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 0px;
	margin-top: 20px;
}

.leaflet-container a {
	color: #000000;
	background-color: transparent;
}


/* zoom custom */

.leaflet-bar a:first-child {
	border-radius: 0px;
	width: 40px;
	font-size: 50px;
	font-weight: 100;
	height: 40px;
	border: 0px;
}

.leaflet-bar a:last-child {
	border-radius: 0px;
	width: 40px;
	font-size: 50px;
	font-weight: 100;
	height: 40px;
	border: 0px;
}

.leaflet-bar a:hover {
	background-color: transparent;
}

.leaflet-bar a.leaflet-disabled {
	cursor: crosshair;
	background-color: transparent;
	color: #bbb;
}


/* table */

table {
	width: 100%;
	table-layout: fixed;
	border: 0px;
	border-top: black solid 2px;
	border-bottom: black solid 2px;
}

table,
th,
td {
	border-collapse: collapse;
	font-size: 9px;
	line-height: 15px;
}

th,
td {
	padding: 1px;
	padding-bottom: 10px;
	text-align: left;
}

.col1 {
	width: 100px;
}

.colcheck {
	width: 15px;
}

.coltext {
	width: auto;
}

@media (min-width: 625px) {
	table,
	th,
	td {
		border-collapse: collapse;
		font-size: 13px;
		line-height: 25px;
	}
	th,
	td {
		padding: 5px;
		text-align: left;
	}
	.col1 {
		width: 200px;
	}
	.colcheck {
		width: 32px;
	}
	.coltext {
		width: auto;
	}
}


/* slider */

#allSliders {
	display: block;
	width: 100%;
}

.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 1px;
	background: grey;
	outline: none;
	opacity: 1;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 4px;
	height: 15px;
	background: black;
	cursor: pointer;
}


/* checkbox */


/* The container */

.containerch {
	display: block;
	position: relative;
	padding-left: 0px;
	margin-bottom: 0px;
	cursor: pointer;
	font-size: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* Hide the browser's default checkbox */

input {
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}


/* Create a custom checkbox */

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 12px;
	width: 12px;
	background-color: #DCDCDC;
}


/* On mouse-over, add a grey background color */

.containerch:hover input~.checkmark {
	background-color: #A0A0A0;
}


/* When the checkbox is checked, add a blue background */

.containerch input:checked~.checkmark {
	background-color: "";
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}


/* Show the checkmark when checked */

.containerch input:checked~.checkmark:after {
	display: block;
}


/* Style the checkmark/indicator */

.containerch .checkmark:after {
	left: 4px;
	top: 1px;
	width: 3px;
	height: 7px;
	border: solid black;
	border-width: 0 1px 1px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

@media (min-width: 625px) {
	/* Create a custom checkbox */
	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 17px;
		width: 17px;
		background-color: #DCDCDC;
	}
	/* On mouse-over, add a grey background color */
	.containerch:hover input~.checkmark {
		background-color: #A0A0A0;
	}
	/* When the checkbox is checked, add a blue background */
	.containerch input:checked~.checkmark {
		background-color: "";
	}
	/* Create the checkmark/indicator (hidden when not checked) */
	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}
	/* Show the checkmark when checked */
	.containerch input:checked~.checkmark:after {
		display: block;
	}
	/* Style the checkmark/indicator */
	.containerch .checkmark:after {
		left: 6px;
		top: 2px;
		width: 4px;
		height: 10px;
		border: solid black;
		border-width: 0 2px 2px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}