diff --git a/css/style.css b/css/style.css
index 2d4d335..4fad220 100644
--- a/css/style.css
+++ b/css/style.css
@@ -131,6 +131,10 @@ body > hr {
     pointer-events: none;
 }
 
+#map .map-hilight-area:not(.active) {
+	opacity: 0;
+}
+
 /* SAERCH FORM */
 
 #search-section {
diff --git a/js/components/feature-legend.js b/js/components/feature-legend.js
index 03ddb78..8967d62 100644
--- a/js/components/feature-legend.js
+++ b/js/components/feature-legend.js
@@ -17,6 +17,8 @@ TEMPLATE.innerHTML = `
 	justify-content: center;
 	align-items: center;
 
+	background-color: color-mix(in srgb, var(--background-color, transparent), transparent 50%);
+
 	box-sizing: border-box;
 	border: solid 1px transparent;
 }
@@ -56,7 +58,7 @@ export class FeatureLegendElement extends HTMLElement {
 		container.hidden = !this.feature
 		if(this.feature){
 			let symbol = this.feature.mapSymbol
-			container.style.backgroundColor = symbol.backgroundColor || "transparent"
+			container.style.setProperty("--background-color", symbol.backgroundColor || "transparent");
 			container.style.backgroundImage = symbol.backgroundUrl ? `url(${symbol.backgroundUrl})` : "none"
 			container.style.borderColor = symbol.borderColor || "transparent"
 			if(symbol.markerUrl){