.map {
	width: 100%;
	height: 100%;
	background-color: skyblue;
}
	.map h2 {
		margin: 10px 0;
		font-size: 16px;
	}
	.map p {
		margin: .15rem 0 !important;
	}

	.tile-controls {
		position: absolute;
		z-index: 500;
		top: 10px;
		right: 56px;
		display: flex;
		overflow-y: auto;
		max-height: 40vh;
	}
	
	.tile-control {
		flex: 1;
		white-space: nowrap;
		background-color: white;
		border: 2px solid rgba(0,0,0,.25);
		border-left-width: 0;
		border-right-width: 1px;
		color: black; /* override wordpress */
		font-family: Roboto, Arial, sans-serif;
		font-size: 18px;
		padding: .25rem .5rem;
	}
		.tile-control:first-child {
			border-radius: 4px 0 0 4px;
			border-left-width: 2px;
		}
		.tile-control:last-child {
			border-radius: 0 4px 4px 0;
			border-right-width: 2px
		}
		.tile-control:hover {
			background: #eee !important; /* override wordpress */
		}
		.tile-control:focus,
		.tile-control:active {
				background: #ccc !important; /* override wordpress */
		}
	
.custom-controls {
	position: absolute;
	z-index: 500;
	top: 10px;
	left: 10px;
}
	/*Try to make it looks like a esri button*/
	.custom-control {
		float: left;
		margin-right: 10px;
	}

	/* Try to make it looks like a esri button: --- */
		.custom-control .btn {
			display: table-cell;
			padding: 4px 10px;
			min-width: 35px;
			border-radius: 3px;
			border: 2px solid rgba(0, 0, 0, 0.2);
			background: rgb(255, 255, 255) padding-box;
			cursor: pointer;
		}
		.custom-control .btn,
		.custom-control .dropdown-menu > li > a {
			font-family: Arial, sans-serif;
			font-size: 14px;
			font-weight: 400;
			color: rgb(86,86,86);
		}
	/* End --- */

	.custom-control .btn .option-icon {
		display: none;
	}

	.custom-control .btn:hover {
		background-color: #ddd;
	}

	.custom-control--info .btn {
		border-color: #1677df;
		background: #1677df;
		color: white;
	}

	.custom-controls--bl {
		bottom: 10px;
		left: 10px;
		top: auto;
		right: auto;
	}

@media (orientation: portrait) and (max-width: 1024px) {
	.custom-control--legend {
		display: none;
	}
	.custom-control .btn .control-label {
		display: none;
	}
	.custom-control .btn .option-icon {
		display: inline-block;
	}
}


/* Map legend: ----------- */

.map-legend {
	position: fixed;
	z-index: 11;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	background-color: rgba(0,0,0,.5);
}
	.map-legend__content {
		padding: 30px 30px 0 0;
		box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
		animation: drop-in .3s ease;
		background: white;
	}
.map-legend .table-responsive {
	padding: 1rem;
	max-height: 100%;
	overflow-y: auto;
}
.map-legend .table > thead > tr > th,
.map-legend .table > tbody > tr > th,
.map-legend .table > tfoot > tr > th,
.map-legend .table > thead > tr > td,
.map-legend .table > tbody > tr > td,
.map-legend .table > tfoot > tr > td {
	vertical-align: middle;
}

.map-legend .no-border {
	border-top: none !important;
}
.map-legend .no-top-border {
	border: none !important;
}

.circle-marker {
	display: inline-block;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .5);
	opacity: .75;
}

.streetview-mode .custom-controls {
	display: none;
}

@keyframes drop-in {
	from { transform: translateY(-1rem); }
	to   { transform: translateY(0);     }
}


/* Fix broken cursor on leaflet controls */

.leaflet-control {
	cursor: pointer;
}