.mapblock {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	max-height: 100%;
	& .loadingshadow {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, .5);
		z-index: 1000;
		&.active {
			display: block;
		}
	}
	& #map {
		display: block;
		width: 100%;
		height: 500px;
		max-height: 100%;
		max-width: 100%;
		border: 1px solid #000;

		& gmp-advanced-marker {
			cursor: pointer;
		}
		& .info-content {
			display: block;
			padding: 0 1em 1em 1em;
			& .info-name {
				font-weight: bold;
				font-size: 1.5em;
				margin-bottom: .5em;
			}
			& .info-address, & .info-directions {
				margin-bottom: 1em;
				font-size: 1.2em;
			}
		}
	}
	& >:not(#map) * {
		font-family: 'Manrope', Arial, sans-serif;
		font-size: 18px;
		line-height: 1.5;
	}
	& .searchblock {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-gap: 10px;
		margin: 2em 0;
		& input, & button {
			padding: .5em 1em;
			border: 1px solid #000;
			border-radius: 8px;
		}
		& input {
			&::placeholder {
				font-style: italic;
				font-weight: normal;
				opacity: .5;
			}
		}
		& button {
			cursor: pointer;
			color: #fff;
			background-color: #3c7bc9;
			&:hover {
				background-color: #558dd1;
			}
		}
	}
	& .searchinfo {
		display: block;
		margin: 1em 0;
		& .noresults {
			border: 1px solid #ccc;
			background-color: #ffffcc;
			border-radius: 8px;
			padding: .5em 1em;
			color: #000;
			font-style: italic;
			font-weight: normal;
		}
		&.hidden {
			display: none;
		}
	}
	& .searchresults {
		display: block;
		border: 1px solid #ccc;
		border-radius: 8px;
		padding: .5em 1em;
		color: #000;
		&.hidden {
			display: none;
		}
		& .resultsheader {
			font-weight: bold;
			margin-bottom: 1em;
			padding-bottom: .5em;
			border-bottom: 1px solid #000;
		}
		& .resultscontainer {
			max-height: 300px;
			overflow-y: scroll;
			-ms-overflow-style: -ms-autohiding-scrollbar;
			& .result {
				padding: .5em;
				border-bottom: 1px solid #000;
				&:hover {
					background-color: #ffffcc;
				}
				&:last-child {
					border-bottom: 0 none;
				}
				& .result-name {
					font-weight: bold;
				}
			}
		}
	}
}

@media (max-width: 450px) {
	.mapblock {
		& .searchblock {
			grid-template-columns: 1fr;
		}
	}
}