.mh-map {
	--marker-size: 20px;
	position: relative;
	background: var(--color-white);
	padding: 10px;
	border-radius: 5px;
}

	.mh-map-content-wrapper {
		position: relative;
	}

		.mh-map-content {
			width: calc(65% - 10px);
			position: relative;
			left: 0;
			top: 0;
			z-index: 5;
			padding-bottom: 10px;
		}

			.mh-map .mh-map-image {
				display: block;
				width: 100%;
				height: auto;
				position: relative;
				z-index: -1;
			}

			.mh-map .mh-map-marker {
				position: absolute;
				left: 50%;
				top: 50%;
				width: var(--marker-size);
				height: var(--marker-size);
				border-radius: 50%;
				background: var(--color-secondary);
				box-shadow: 0 0 10px rgba(0,0,0,.3);
				box-sizing: border-box;
				z-index: 5;
				cursor: pointer;

				-moz-transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}

				.mh-map .mh-map-marker:hover {
					background: var(--color-black);
				}

				.mh-map .mh-map-marker-selected,
				.mh-map .mh-map-marker-selected:hover {
					background: var(--color-main);
				}

		.mh-map-list {
			position: absolute;
			right: 0;
			top: 0;
			width: calc(35% - 10px);
			overflow-x: hidden;
			max-height: 100%;
			overflow-y: auto;
			background: var(--color-white);
			scroll-behavior: smooth;
		}

			.mh-map-list .mh-map-list-elements {
				padding: 10px;
			}
			
				.mh-map-list .mh-map-list-element {
					border: 2px solid var(--color-grey-light);
					box-sizing: border-box;
					border-radius: 5px;
				}
				
				.mh-map-list .mh-map-list-element .toggle-content {
					padding-left: 15px !important;
					padding-right: 15px !important;
				}

				.mh-map-list .mh-map-list-element + .mh-map-list-element {
					margin-top: 10px;
				}

				.mh-map-list .mh-map-list-title {
					font-weight: var(--font-default-weight-bold);
					padding-right: 20px;
					position: relative;
					background: var(--color-grey-light);
					padding: 15px;
				}
				
					.mh-map-list .mh-map-list-title:after {
						content: "";
						display: block;
						position: absolute;
						right: 10px;
						top: 50%;
						width: 15px;
						height: 20px;
						margin-top: -10px;
						background: url(arrow-down.svg) no-repeat center center / contain;
					}

						.mh-map-list .mh-map-list-element.open .mh-map-list-title:after {
							background-image: url(arrow-up.svg);
						}

		@media ( max-width: 740px ) {

			.mh-map .mh-map-content {
				width: 100%;
			}

			.mh-map .mh-map-list {
				width: 100%;
				position: static;
				height: 200px;
			}

		}

		@media ( max-width: 540px ) {

			.mh-map {
				--marker-size: 10px;
			}

			.mh-map .mh-map-marker:after {
				content: "";
				display: block;
				position: absolute;
				left: -100%;
				top: -100%;
				width: 300%;
				height: 300%;
			}

		}

	.mh-map .mh-map-meta {
		opacity: 0.6;
		border-top: 1px solid #ccc;
		margin-top: 0;
		padding-top: 5px;
	}

.mh-map-edit.mh-map {
	max-width: 600px;
	padding: 0;
}

	.mh-map-edit .mh-map-image {
		pointer-events: none;
	}

	.mh-map-edit .mh-map-content {
		width: 100%;
	}

	.mh-map-edit .mh-map-marker {
		background: #999 !important;
		border-color: #999;
		pointer-events: none;
	}

		.mh-map-edit .mh-map-marker-edit {
			background: #f00 !important;
			border-color: #f00;
		}

body.wp-admin .acf-field-660e9972a9ef6,
body.wp-admin .acf-field-660e9989a9ef7 {
	display: none;
}