.fence-map-rapad-path {
	stroke: var(--clr-earth-dk);
	stroke-width: 1px;
	fill: var(--clr-grass-ml);
	fill-opacity: 0.4;
}

.fence-map-properties-path {
	stroke: var(--clr-earth-dk);
	stroke-width: 1px;
	fill: var(--clr-mustard-mid);
	fill-opacity: 0.5;
}
.fence-map-fences-path {
	stroke: var(--clr-clay-mid);
	stroke-width: 1.5px;
	fill: none;
}

.fence-map-fences-path.selected-fence {
	stroke: var(--clr-clay-mid);
	stroke-width: 5px;
}

#mapReduce {
	position: absolute;
	top: 10px;
	left: 60px;
	width: 40px;
	height: 40px;
	z-index: 29000;
	cursor: pointer;
	display: none;
}

.leaflet-pane > svg path {
	pointer-events: all;
}

#mapTooltipDiv {
	position: absolute;
	text-align: left;
	white-space: normal;
	padding: 6px;
	background-color: white;
	border: 4px solid currentColor;
	border-radius: 6px;
	width: max-content;
	font-size: 16px;
	font-style: normal;
	z-index: 900;
	line-height: 1;
	color: var(--clr-water-md);
}

.mapTooltipDivRight:after,
.mapTooltipDivRight:before,
.mapTooltipDivLeft:after,
.mapTooltipDivLeft:before {
	content: "";
	position: absolute;
	width: 0px;
	height: 0px;
	top: 50%;
	pointer-events: none;
}

.mapTooltipDivRight:after {
	border-top: 10px solid transparent;
	border-right: 10px solid white;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
	margin-top: -10px;
	right: 100%;
}

.mapTooltipDivRight:before {
	border-top: 16px solid transparent;
	border-right: 16px solid currentColor;
	border-bottom: 16px solid transparent;
	border-left: 16px solid transparent;
	margin-top: -16px;
	right: 100%;
}

.mapTooltipDivLeft:after {
	border-top: 10px solid transparent;
	border-left: 10px solid white;
	border-bottom: 10px solid transparent;
	border-right: 10px solid transparent;
	margin-top: -10px;
	right: -8%;
}

.mapTooltipDivLeft:before {
	border-top: 16px solid transparent;
	border-left: 16px solid currentColor;
	border-bottom: 16px solid transparent;
	border-right: 16px solid transparent;
	margin-top: -16px;
	right: -14%;
}

.mapTooltipDivDown:after,
.mapTooltipDivDown:before {
	content: "";
	position: absolute;
	width: 0px;
	height: 0px;
	top: 100%;
	pointer-events: none;
}

.mapTooltipDivDown:after {
	border-bottom: 10px solid transparent;
	border-top: 10px solid white;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	margin-top: 0px;
	right: 48%;
}

.mapTooltipDivDown:before {
	border-bottom: 16px solid transparent;
	border-top: 16px solid currentColor;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	margin-top: 0px;
	right: 45.7%;
}

/* The container div */
.mapTooltipDamaged {
}

/* The text "Damaged fence: " */
.mapTooltipDamagedText {
}

/* The length of the damaged fence */
.mapTooltipDamagedLength {
	font-weight: 700;
}

/* The "Click to zoom" text */
.mapTooltipClick {
	font-size: 0.875rem;
	margin-top: 0.5rem;
}