.map-wrapper {
  position: relative;
}

.mapContainer {
  height: 540px;
  flex-grow: 1;
}
@media (min-width: 1200px) {
  .mapContainer {
    height: 60vh;
  }
}

#map,
#parcelMap {
  background: #ccc;
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}
@media (min-width: 1400px) {
  .map-layout--compact #map,
  .map-layout--compact #parcelMap {
    height: auto !important;
  }
}
@media (min-width: 1400px) {
  .map-layout--expanded #map,
  .map-layout--expanded #parcelMap {
    resize: vertical;
  }
}

#map[data-empty]::before,
#parcelMap[data-empty]::before {
  transition: all 1s ease;
  content: "";
  position: absolute;
}

#map[data-empty=false]::before,
#parcelMap[data-empty=false]::before {
  pointer-events: all;
  top: 50%;
  left: 0;
  bottom: 50%;
  right: 0;
}

#map[data-empty=true]::before,
#parcelMap[data-empty=true]::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

#map[data-empty=true]::after,
#parcelMap[data-empty=true]::after {
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem 3rem;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  line-height: 1;
  z-index: 2;
  font-weight: 700;
  box-shadow: var(--bs-box-shadow-sm);
}

#map[data-empty=true] #viewDiv,
#parcelMap[data-empty=true] #parcelViewDiv {
  filter: saturate(0);
  pointer-events: none;
}

#map > .containerSurround,
#parcelMap > .containerSurround {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.searchDiv {
  border: 1px solid var(--bs-brand-platinum);
}

#mapSearch {
  position: relative;
  z-index: var(--z-index-map-search);
}

#mapSearchToggleBtn {
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: var(--z-index-map-toggle-btn);
}
#mapSearchToggleBtn ~ #map .esri-ui-top-left {
  top: 3rem;
}

#mapSizeToggleBtn {
  display: none;
}
@media (min-width: 1400px) {
  #mapSizeToggleBtn {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: var(--z-index-map-toggle-btn);
  }
}
#mapSizeToggleBtn i {
  display: none;
}
#mapSizeToggleBtn.is-compact i:first-child {
  display: block;
}
#mapSizeToggleBtn.is-expanded i:last-child {
  display: block;
}

.map-layout {
  display: flex;
  flex-direction: column;
}

.map-layout__item--visual {
  order: -1;
  margin-bottom: 2rem;
}
.map-layout__item--visual .mapContainer {
  transition: height 300ms ease;
}
@media (min-width: 1200px) {
  .map-layout--compact .map-layout__item--visual .mapContainer {
    height: 400px;
  }
}
@media (min-width: 1400px) {
  .map-layout--compact .map-layout__item--visual .mapContainer {
    height: 550px;
  }
}