.jeomap {
	--jeo-attribution-offset: 0px;
	background-color: rgba(128, 128, 128, 0.1);
	position: relative;
	width: 100%;
	height: 600px;

	nav {
		position: absolute;
		top: 10px;
		inset-inline-end: 10px;
		z-index: 1;
		width: 170px;

		a {
			--jeo-layer-control-size: 16px;
			--jeo-layer-control-gap: 14px;
			color: #404040;
			display: flex;
			align-items: flex-start;
			gap: var(--jeo-layer-control-gap);
			margin: 0;
			padding: 7px 10px;
			font-size: 13px;
			line-height: 1.35;
			text-decoration: none;
			margin-top: 0px;
			background: white;
			position: relative;
			border-bottom: 1px solid #b0b2b4;


			&:before {
				content: "";
				flex: 0 0 var(--jeo-layer-control-size);
				width: var(--jeo-layer-control-size);
				height: var(--jeo-layer-control-size);
				border: 2px solid;
				display: inline-block;
				border-radius: 2px;
				margin-top: 1px;
				box-sizing: border-box;
			}

			&:hover {
				background-color: #f8f8f8;
				color: #404040;
			}
		}

		a.swappable:before {
			border-radius: 50px;
		}

		a.swappable.active:after {
			content: "";
			background-size: 18px;
			background-repeat: no-repeat;
			background-color: #195f93;
			border-radius: 50%;
			inset-inline-start: 14px;
			position: absolute;
			top: 12px;
			width: 8px;
			height: 8px;
		}

		a.active:after {
			content: "";
			background-image: url("data:image/svg+xml;charset=utf-8,<svg width='18' height='18' version='1.1' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><path d='m18 4.796q0 .46452-.32516.7897l-9.9872 9.9872q-.32517.32516-.7897.32516-.46452 0-.7897-.32516l-5.7831-5.7831q-.32516-.32516-.32516-.7897 0-.46452.32516-.7897l1.5793-1.5793q.32517-.32516.7897-.32516.46452 0 .7897.32516l3.4142 3.4258 7.618-7.6298q.32516-.32516.7897-.32516.46454 0 .7897.32516l1.5793 1.5793q.32516.32516.32516.7897' fill='%23195f93'/></svg>");
			background-size: contain;
			inset-inline-start: 12px;
			top: 9px;
			position: absolute;
			width: 14px;
			height: 14px;
		}

		.layers-wrapper {
			// ini checkbox in layer section inside map
			a:before {
				min-width: 16px;
			}

			.layer-name {
				flex: 1 1 auto;
				display: block;
				overflow-wrap: break-word;
				min-width: 0;
				font-family: var(--jeo-font);
			}
		}

		.arrow-icon {
			width: 14px;
			height: 9px;
			background: url("data:image/svg+xml;charset=utf-8,<svg width='12' height='12' version='1.1' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'><path d='m.32981 9.2403a1.1277 1.1277 0 001.5939 0l4.09-4.09 4.0899 4.09a1.1277 1.1277 0 001.5939-1.5939l-4.8868-4.8868a1.1277 1.1277 0 00-1.5939 0l-4.8868 4.8868a1.1277 1.1277 0 000 1.5939'/></svg>");
			background-size: cover;
			background-position: center;
			filter: brightness(0) invert(1);
			cursor: pointer;

			&.active {
				transform: rotate(180deg);
			}
		}

		.text-icon {
			display: flex;
			align-items: center;

			.layer-icon {
				width: 14px;
				height: 16px;
				background-image: url("data:image/svg+xml;charset=utf-8,<svg width='512' height='512' version='1.1' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='m256 18.285-256 116.57 256 118.86 256-118.86-256-116.57zm-169.91 199.35-86.092 38.365 256 116.57 256-116.57-86.32-38.32-169.56 77.863-170.02-77.908zm335.98 119.17-166.4 75.713-165.5-75.656-90.172 40.285 256 116.57 256-116.57-89.932-40.342z'/></svg>");
				background-size: cover;
				background-position: center;
				filter: brightness(0) invert(1);
				cursor: pointer;
				margin-inline-end: 12px;
			}
		}
	}

	.marker {
		cursor: pointer;

		&:hover {
			filter: brightness(85%);
		}
	}

	.marker-active {
		filter: brightness(110%);
	}

	nav.layers-selection {
		max-width: 220px;
		min-width: 220px;
		transition: all .2s ease-in-out;

		.layers-wrapper {
			max-height: 250px;
			overflow-x: auto;

			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-button {
				width: 0px;
				height: 0px;
			}

			&::-webkit-scrollbar-thumb {
				background: #ddd;
				border: 0px none white;
				border-radius: 3px;

				&:hover {
					background: #b1b1b1;
				}

				&:active {
					background: #b1b1b1;
				}
			}

			&::-webkit-scrollbar-track {
				background: #eee;
				border: 0px none #ffffff;
				border-radius: 0px;

				&:hover {
					background: rgba(0, 0, 0, 0.05);
				}

				&:active {
					background: #eee;
				}
			}

			&::-webkit-scrollbar-corner {
				background: transparent;
			}
		}
	}

	.hideable-content {
		max-height: 192px;
		overflow-x: auto;

		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-button {
			width: 0px;
			height: 0px;
		}

		&::-webkit-scrollbar-thumb {
			background: #ddd;
			border: 0px none white;
			border-radius: 3px;

			&:hover {
				background: #b1b1b1;
			}

			&:active {
				background: #b1b1b1;
			}
		}

		&::-webkit-scrollbar-track {
			background: #eee;
			border: 0px none #ffffff;
			border-radius: 0px;

			&:hover {
				background: rgba(0, 0, 0, 0.05);
			}

			&:active {
				background: #eee;
			}
		}

		&::-webkit-scrollbar-corner {
			background: transparent;
		}
	}

	.legend-container .text-icon {
		display: flex;
		align-items: center;
	}

	.text-icon {

		.legend-icon {
			width: 14px;
			height: 16px;
			background-size: cover;
			background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='list' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-list fa-w-16 fa-3x'%3E%3Cpath fill='%23333' d='M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' class=''%3E%3C/path%3E%3C/svg%3E");
			background-position: center;
			cursor: pointer;
			margin-inline-end: 12px;
			filter: brightness(0) invert(1);
		}

		.info-icon {
			width: 16px;
			height: 16px;
			background-size: cover;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M11 10h2v7h-2zm0-3h2v2h-2z'/%3E%3Cpath fill='%23333' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16z'/%3E%3C/svg%3E");
			background-position: center;
			cursor: pointer;
			margin-inline-end: 12px;
			filter: brightness(0) invert(1);
		}
	}

	div.more-info-overlayer {
		box-sizing: border-box;
		margin-top: 50px;
		position: absolute;
		width: calc(100% - 250px);
		height: calc(100% - 70px);
		max-width: calc(100% - 20px);
		max-height: calc(100% - 70px);
		background-color: white;
		z-index: 10;
		top: 10px;
		inset-inline-start: 10px;
		display: none;
		overflow-y: auto;
		padding: 0 20px 20px;

		.jeomap {
			display: none;
		}
	}

	& > div > a.more-info-close {
		position: absolute;
		top: 10px;
		inset-inline-end: 10px;
		z-index: 11;
		cursor: pointer;
	}

	div.legend-container {
		background: #fff;
		position: absolute;
		bottom: calc(var(--jeo-attribution-offset, 0px) + 22px);
		inset-inline-end: 10px;
		z-index: 1;
		display: block;
		margin: 0;
		max-width: 220px;
		min-width: 220px;
		max-height: 230px;

		.legends-wrapper {
			display: block;
			margin: 0px 0px 0px 20px;
			padding-top: 25px;
			padding-inline-end: 28px;

			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-button {
				width: 0px;
				height: 0px;
			}

			&::-webkit-scrollbar-thumb {
				background: #ddd;
				border: 0px none white;
				border-radius: 3px;

				&:hover {
					background: #b1b1b1;
				}

				&:active {
					background: #b1b1b1;
				}
			}

			&::-webkit-scrollbar-track {
				background: #eee;
				border: 0px none #ffffff;
				border-radius: 0px;

				&:hover {
					background: rgba(0, 0, 0, 0.05);
				}

				&:active {
					background: #eee;
				}
			}

			&::-webkit-scrollbar-corner {
				background: transparent;
			}

			h4 {
				margin: 15px 0;
				font-size: 2.2rem;
			}
		}

		.legends-title {
			background: #191e23;
			padding: 9px 10px;
			color: white;
			font-size: 16px;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: var(--jeo-font);
		}

		.more-info-title {
			cursor: pointer;
			display: none;
		}

		i.arrow-icon {
			width: 14px;
			height: 9px;
			background: url("data:image/svg+xml;charset=utf-8,<svg width='12' height='12' version='1.1' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'><path d='m.32981 9.2403a1.1277 1.1277 0 001.5939 0l4.09-4.09 4.0899 4.09a1.1277 1.1277 0 001.5939-1.5939l-4.8868-4.8868a1.1277 1.1277 0 00-1.5939 0l-4.8868 4.8868a1.1277 1.1277 0 000 1.5939'/></svg>");
			background-size: cover;
			background-position: center;
			filter: brightness(0) invert(1);
			cursor: pointer;

			&.active {
				transform: rotate(180deg);
			}
		}

		a.more-info-button {
			background: var(--jeo_more-bkg-color);
			color: var(--jeo_more-color);
			margin: 20px auto 20px auto;
			padding: 3px;
			border-radius: 5px;
			text-decoration: none;
			text-align: center;
			cursor: pointer;
			width: calc(100% - 40px);
			display: block;
			font-weight: bold;
			transition: all .1s ease-in-out;
			text-transform: uppercase;

			&:hover {
				background-color: var(--jeo_more-bkg-color-darker-15);
				color: var(--jeo_more-color);
				transition: all .1s ease-in-out;
			}
		}
	}

	:is(.mapboxgl-popup-close-button, .maplibregl-popup-close-button) {
		position: absolute;
		inset-inline-end: 6px;
		top: 6px;
		border-radius: 0px;
		cursor: pointer;
		width: 22px;
		height: 22px;
		display: block;
		padding: 0px;
		font-size: 18px;
		background: var(--jeo_close-bkg-color);
		color: var(--jeo_close-color);

		&:hover {
			text-decoration: none;
			background-color: var(--jeo_more-bkg-color-darker-15);
		}

		span {
			font-size: 24px;
			font-weight: 100;
			line-height: 18px;
		}
	}

	.popup {
		margin-top: 5rem;
		min-width: 200px;

		h1 {
			font-size: 3rem;
			margin: 0 0 0.5em;

			a {
				color: inherit;
				text-decoration: none;
			}
		}

		.popup__date {
			color: gray;
		}
	}

	:is(.mapboxgl-ctrl-fullscreen, .maplibregl-ctrl-fullscreen) {
		background-color: white !important;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E");

		&:hover {
			opacity: 0.7;
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E");
		}

		&:focus {
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E");
		}
	}

	:is(.mapboxgl-ctrl-zoom-in, .maplibregl-ctrl-zoom-in) {
		background-color: white !important;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");

		&:hover {
			opacity: 0.7;
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
		}

		&:focus {
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
		}
	}

	:is(.mapboxgl-ctrl-zoom-out, .maplibregl-ctrl-zoom-out) {
		background-color: white !important;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");

		&:hover {
			opacity: 0.7;
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");
		}

		&:focus {
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");
		}
	}

	.layers-wrapper a {
		text-decoration: none !important;
	}

	.legends-wrapper {

		.legend-single-title {
			margin-bottom: 15px;
			font-size: 16px;
			color: #333;
			font-weight: bold;
			display: block;
			font-family: var(--jeo-font);
		}
	}

	:is(.mapboxgl-ctrl-attrib, .maplibregl-ctrl-attrib) {
		background: #ffffff80;
		border-radius: 0;
		box-shadow: none;
		max-width: none;
		padding: 0;
	}

		:is(.mapboxgl-ctrl-bottom-right, .maplibregl-ctrl-bottom-right) {
			inset-inline-end: 0;
			bottom: 0;
			padding: 0;
			display: flex;
			align-items: flex-end;
		}

		.mapboxgl-ctrl-bottom-right {
			max-width: calc(100% - 120px);
		}

		:is(.mapboxgl-ctrl-bottom-right, .maplibregl-ctrl-bottom-right) > :is(.mapboxgl-ctrl, .maplibregl-ctrl) {
			margin: 0;
		}

		.mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib {
			max-width: 100%;
		}

	.mapboxgl-control-container .mapboxgl-ctrl-attrib-inner,
	.maplibregl-control-container .maplibregl-ctrl-attrib-inner {
		font-size: 11px;
		line-height: 1.35;
		padding: 4px 8px;
		white-space: normal;
		color: rgba(0, 0, 0, .78);

		a[href] {
			color: rgba(0, 0, 0, .78);
			text-underline-offset: 2px;
		}
	}

	:is(.mapboxgl-ctrl-attrib, .maplibregl-ctrl-attrib) {
		box-sizing: border-box;
	}

	.maplibregl-ctrl-attrib-button {
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}
	}

	.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner,
	.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
		box-sizing: border-box;
		padding-inline-end: 32px;
	}

	.mapboxgl-ctrl-attrib.mapboxgl-compact-show {

		.mapboxgl-ctrl-attrib-inner {
			visibility: visible;
		}
	}

		.maplibregl-ctrl-attrib.maplibregl-compact-show {

			.maplibregl-ctrl-attrib-inner {
				visibility: visible;
				display: block;
			}
		}

	.mapboxgl-ctrl-attrib.mapboxgl-compact, .maplibregl-ctrl-attrib.maplibregl-compact {
		min-height: 24px;
	}
}

#discovery {
	.legend-container {
		.text-icon {
			display: flex;
			align-items: center;
		}
	}

	.text-icon {
		.legend-icon {
			width: 14px;
			height: 16px;
			background-size: cover;
			background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='list' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-list fa-w-16 fa-3x'%3E%3Cpath fill='%23333' d='M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' class=''%3E%3C/path%3E%3C/svg%3E");
			background-position: center;
			cursor: pointer;
			margin-inline-end: 12px;
			filter: brightness(0) invert(1);
		}
	}

	.legends-wrapper {
		.legend-single-title {
			margin-bottom: 15px;
			font-size: 16px;
			color: #333;
			font-weight: bold;
			display: block;
			font-family: var(--jeo-font);
		}
	}
}

.legends-wrapper > div {
	margin-bottom: 27px;
}

.jeomap:is(.mapboxgl-map, .maplibregl-map) {

	.more-info-overlayer h2 {
		font-family: var(--jeo-font);
	}

	.map-content-layers-list h3 {
		font-family: var(--jeo-font);
		font-weight: normal;
	}

	p {
		font-family: var(--jeo-font);
	}

	:is(.mapboxgl-popup, .maplibregl-popup):not(:last-child) {
		display: none;
	}
}

:is(.mapboxgl-popup .mapboxgl-popup-content, .maplibregl-popup .maplibregl-popup-content) {
	background-color: white;
	border-radius: 5px;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);

	h2 {
		font-family: var(--jeo-font);
	}

	&:not(.jeo-popup__mouseover) {

		h3 {
			margin-top: 1.2rem;
		}
	}
}

// Interaction - onClick
:is(.mapboxgl-popup-content, .maplibregl-popup-content) {

	h3, p {
		color: #111 !important;
		font-size: 16px;
	}

	h3 {
		font-family: var(--jeo-font);
		font-weight: 700;
		line-height: 1.3;
		margin: 0 0 .45rem;
	}

	p {
		font-family: var(--jeo-font);
		line-height: 1.4;
		margin: 0;
	}

	p + p {
		margin-top: .35rem;
	}

	strong {
		font-weight: 700;
	}
}

:is(.mapboxgl-popup.mapboxgl-popup-anchor-bottom, .maplibregl-popup.maplibregl-popup-anchor-bottom) {

	&:not(.jeo-popup__mouseover) {
		margin-top: -28px;
	}
}

:is(.mapboxgl-popup.mapboxgl-popup-anchor-top, .maplibregl-popup.maplibregl-popup-anchor-top) {

	&:not(.jeo-popup__mouseover) {
		margin-top: 28px;
	}
}

.map-content-layers-list {
	font-size: 16px;
	line-height: 25px;
	font-family: var(--jeo-font);

	a.download-source {
		font-family: var(--jeo-font);
		background: #fff;
		border: 1px solid rgba(0, 0, 0, 0.4);
		color: #404040;
		margin-top: 8px;
		padding: 4px 10px;
		text-decoration: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		text-align: center;
		cursor: pointer;
		display: inline-block;
		font-size: 16px;
		font-weight: bold;
		transition: all .2s ease-in-out;

		&:hover {
			background: rgba(0, 0, 0, 0.05);
			transition: all .2s ease-in-out;
		}
	}

	h3 {
		font-family: var(--jeo-font);
	}
}

.layer-selection-title {

	.legends-title {
		background: #191e23;
		font-size: 16px;
		color: white;
		font-weight: 600;
		padding: 9px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: var(--jeo-font);
	}
}

.entry-content {

	.more-info-overlayer {

		h2 {
			margin-top: 1.3em;
			margin-bottom: 10px;
		}

		p {
			font-size: 14px;
			font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
		}
	}

	.map-content-layers-list {

		h3 {
			margin-top: 25px;
			margin-bottom: 10px;
			font-family: var(--jeo-font);
		}
	}

	.legend-container p {
		font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	}
}

.more-info-overlayer h2 {
	font-family: var(--jeo-font);
}

.popup.popup-wmt {
	margin-top: 0rem !important;

	& + .popup.popup-wmt {
		border-top: 1px solid rgba( 0, 0, 0, 0.12 );
		margin-top: 14px !important;
		padding-top: 14px;
	}
}

.jeo-popup-navigator {
	min-width: 220px;
	max-width: 280px;
}

.jeo-popup-navigator__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	margin-top: -8px;
	padding-bottom: 10px;
	padding-inline-end: 32px;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}

.jeo-popup-navigator__header-copy {
	min-width: 0;
}

.jeo-popup-navigator__counter {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #555d65;
}

.jeo-popup-navigator__meta {
	margin-top: 2px;
	font-size: 11px;
	color: #767676;
}

.jeo-popup-navigator__controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.jeo-popup-navigator__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid #dcdcde;
	border-radius: 999px;
	background: #f6f7f7;
	color: #1d2327;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;

	svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	&:hover:not(:disabled) {
		background: #fff;
		border-color: #195f93;
		color: #195f93;
	}

	&:disabled {
		opacity: 0.45;
		cursor: default;
	}
}

.jeo-popup-navigator__viewport {
	position: relative;
	overflow: hidden;
}

.jeo-popup-navigator__frame {
	width: 100%;
	transition: transform 220ms ease, opacity 220ms ease;
	opacity: 0;
	transform: translateX( 0 );
}

.jeo-popup-navigator__frame.is-current {
	position: relative;
	inset: auto;
	opacity: 1;
	transform: translateX( 0 );
}

.jeo-popup-navigator__frame.is-exiting-next,
.jeo-popup-navigator__frame.is-exiting-previous {
	position: relative;
}

.jeo-popup-navigator__frame.is-entering-previous {
	opacity: 0;
	transform: translateX( -24px );
}

.jeo-popup-navigator__frame.is-entering-next {
	opacity: 0;
	transform: translateX( 24px );
}

.jeo-popup-navigator__frame.is-active {
	opacity: 1;
	transform: translateX( 0 );
}

.jeo-popup-navigator__frame.is-exiting-next {
	opacity: 0;
	transform: translateX( -24px );
}

.jeo-popup-navigator__frame.is-exiting-previous {
	opacity: 0;
	transform: translateX( 24px );
}

.popup {

	h2 {
		margin: 10px 0 0 0;
		line-height: 20px;

		&:before {
			background: #767676;
			content: '';
			display: block;
			height: 0px;
			margin: 0rem 0;
			width: 1em;
		}

		a {
			font-size: 16px;
			font-weight: 900;
			text-decoration: none !important;
			color: #555d65;
			line-height: 16px;
		}
	}

	h1:not(.site-title):before {
		background: #767676;
		content: '';
		display: block;
		height: 0px;
		margin: 0rem 0;
		width: 1em;

	}
}

.single-map {

	div.jeomap {
		margin: 20px auto;
	}
}

.jeo-popup__mouseover {
	font-size: 16px;
	transform: none !important;
	inset-inline-start: 5px;
	inset-inline-end: auto;
	top: 110px !important;
	max-width: min(300px, calc(100vw - 24px));
	padding: 5px;
	pointer-events: none;

	* {
		font-size: 16px;
	}

	:is(.mapboxgl-popup-tip, .maplibregl-popup-tip) {
		display: none !important;
	}
}

.mapboxgl-popup.jeo-popup__mouseover {
	top: 122px !important;
}

#embed-container {

	div.jeomap {
		float: inline-start;
	}
}

#embed-post-preview {
	float: inline-end;
	height: 100%;
	padding: 0 10px 10px;
}

.embed-footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 35px;
	background: #242424;
	padding: 5px;
	inset-inline-start: 0px;
	display: flex;
	justify-content: center;
	align-items: center;

	a {
		line-height: 0;
	}

	img {
		height: 30px;
	}

	&.discovery {
		inset-inline-start: 0;
		bottom: 0;
	}
}

// Bar scale legend

.barscale-left-label {
	float: inline-start;
}

.barscale-right-label {
	float: inline-end;
}

.barscale-scale-container {
	height: 20px;
	width: 100%;
}

.barscale-color {
	height: 20px;
	float: inline-start;
	border-bottom: 1px solid #00000029;
}

.barscale-labels-container {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 14px;
	position: relative;
	color: #555D66;
}

.dynamic-label {
	position: absolute;
	top: 20px;
}

// Simple color legend

.simple-color-item-box {
	width: 21px;
	min-width: 21px;
	height: 21px;
	margin-inline-end: 16px;
	float: inline-start;
	border-radius: 3px;
	border: 1px solid #8080801f;
}

.simple-color-item {
	margin-bottom: 9px;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #555D66;
	font-family: var(--jeo-font);
}

// Icons legend

.icons-item-img {
	max-width: 22px;
	max-height: 22px;
	margin-inline-end: 15px;
	float: inline-start;
}

.icons-item {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #555D66;
	font-family: var(--jeo-font);
}

// Circles legend

.circles-scale-container {
	width: 100%;
	display: flex;
	flex-flow: column;

	.circle-item {
		display: flex;
		align-items: center;
		margin-bottom: 18px;
		color: #555D66;

		&:last-child {
			margin-bottom: 0px;
		}

		p {
			margin: 0px;
			font-size: 14px;
		}
	}
}

.circle-wrapper {
	display: flex;
	justify-content: center;
	margin-inline-end: 10px;
}

.circle-shape {
	border-radius: 50%;
	border: 2px solid #191E23;
}

:is(.mapboxgl-ctrl-shrink, .maplibregl-ctrl-shrink) {
	background-color: white !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E");

	&:hover {
		opacity: 0.7;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E");
	}

	&:focus {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E");
	}
}

:is(
	.mapboxgl-ctrl-fullscreen,
	.mapboxgl-ctrl-zoom-in,
	.mapboxgl-ctrl-zoom-out,
	.mapboxgl-ctrl-shrink,
	.maplibregl-ctrl-fullscreen,
	.maplibregl-ctrl-zoom-in,
	.maplibregl-ctrl-zoom-out,
	.maplibregl-ctrl-shrink
) {
	background-image: none !important;

	&:hover,
	&:focus {
		background-image: none !important;
	}
}

.editor-styles-wrapper {
	ul {
		list-style-type: none !important;
		margin-bottom: 2px;
		padding-inline-start: 0;
		margin-inline-start: 0;
	}

	ol {
		margin-bottom: 2px;
		padding-inline-start: 0;
		margin-inline-start: 0;
	}
}

.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).jeo-without-layers {
	height: auto;
	width: auto;
}

.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignleft,
.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignright {
	--jeo-aligned-map-width: 420px;
	--jeo-aligned-map-aspect-ratio: 8 / 9;
	aspect-ratio: var( --jeo-aligned-map-aspect-ratio );
	box-sizing: border-box;
	display: block;
	height: auto;
	max-width: min( 50%, calc( 100vw - 2rem ) );
	min-width: 0;
	width: min( var( --jeo-aligned-map-width ), 50%, calc( 100vw - 2rem ) );
}

.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignleft {
	float: left;
	margin-left: 0;
	margin-right: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignright {
	float: right;
	margin-right: 0;
	margin-left: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignleft:fullscreen,
.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignright:fullscreen,
.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignleft:-webkit-full-screen,
.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignright:-webkit-full-screen,
.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignleft.mapboxgl-pseudo-fullscreen,
.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignright.mapboxgl-pseudo-fullscreen,
.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignleft.maplibregl-pseudo-fullscreen,
.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignright.maplibregl-pseudo-fullscreen {
	aspect-ratio: auto;
	display: block;
	float: none;
	height: 100%;
	margin: 0;
	max-width: none;
	width: 100%;
}

.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignleft div.more-info-overlayer,
.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignright div.more-info-overlayer {
	inset-inline-end: 10px;
	max-width: none;
	width: auto;
}

@media (max-width: 782px) {
	.jeomap.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignleft,
	.jeomap.jeomap:is(.wp-block-jeo-map, .wp-block-jeo-onetime-map).alignright {
		display: block;
		float: none;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}
}

p.jeomap-no-layers__text {
	font-size: 16px;
	border: 1px solid #e3dfdf;
	padding: 5px;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact {
	.mapboxgl-ctrl-attrib-button {
		appearance: none;
		background-color: #ffffff80;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 20px 20px;
		border: 0;
		border-radius: 50%;
		box-sizing: border-box;
		color: transparent;
		cursor: pointer;
		display: block;
		font-size: 0;
		height: 24px;
		line-height: 0;
		margin: 0;
		min-height: 0;
		min-width: 0;
		padding: 0;
		vertical-align: initial;
		visibility: visible;
		width: 24px;
	}

	&.mapboxgl-compact-show {
		.mapboxgl-ctrl-attrib-button {
			background-color: #0000000d;
		}
	}
}

.maplibregl-ctrl-attrib.maplibregl-compact {
	.maplibregl-ctrl-attrib-button {
		visibility: visible;
	}
}

div.jeomap.alignwide {
	width: auto;
}

.jeomap.jeo-small-controls {
	nav.layers-selection.hidden {
		max-width: 40px;
		min-width: 40px;
		transition: all .2s ease-in-out;

		.layer-selection-title {
			.legends-title {
				padding: 12px 10px;
				justify-content: center;

				.text {
					display: none;
				}
			}

			.arrow-icon {
				display: none;
			}
		}

		.text-icon {
			.layer-icon {
				margin-inline-end: 0;
			}
		}
	}

	.legend-container .more-info-title {
		display: flex;
	}

	.legend-container.hidden {
		min-width: 40px;
		max-width: 40px;
		transition: all .2s ease-in-out;

		.legends-title {
			padding: 12px 10px;

			.text {
				display: none;
			}

			.arrow-icon {
				display: none;
			}

			.legend-icon,
			.info-icon {
				margin-inline-end: 0;
			}
		}
	}
}

@media (max-width: 800px) {
	.jeomap {
		nav.layers-selection.hidden {
			max-width: 40px;
			min-width: 40px;
			transition: all .2s ease-in-out;

			.layer-selection-title {

				.legends-title {
					padding: 12px 10px;
					justify-content: center;

					.text {
						display: none;
					}
				}

				.arrow-icon {
					display: none;
				}
			}

			.text-icon {

				.layer-icon {
					margin-inline-end: 0;
				}
			}
		}

		.legend-container {
			max-height: 230px;
			transition: all .2s ease-in-out;

			.more-info-title {
				display: flex;
			}

			&.hidden {
				min-width: 40px;
				max-width: 40px;
				transition: all .2s ease-in-out;

				.legends-title {
					padding: 12px 10px;

					.text-icon {
						.text {
							display: none;
						}
					}

					.arrow-icon {
						display: none;
					}

					.legend-icon,
					.info-icon {
						margin-inline-end: 0;
					}
				}
			}
		}

		div.more-info-overlayer {
			inset-inline-start: 10px;
			inset-inline-end: 10px;
			top: 60px;
			bottom: 10px;
			margin-top: 0;
			width: auto;
			height: auto;
			max-width: none;
			max-height: none;
			padding: 0 14px 14px;
		}
	}
}