/* Embed Echoes UI inside a page block without full-screen takeover */
html,
body {
  height: auto !important;
  overflow: visible !important;
}

body>header,
body>footer,
#content>header,
#content>footer,
.powered-by {
  display: revert !important;
}

#Echoes-root {
  position: relative !important;
  inset: auto !important;
  display: block;
  box-sizing: border-box;
  height: 78vh;
  min-height: 760px;
  max-height: 980px;
  width: 100% !important;
  max-width: 100% !important;
  margin: 24px 0;
  left: auto;
  transform: none;
  z-index: 0 !important;
  isolation: isolate;
  contain: layout paint;
  overflow: hidden;
  background: #dbeafe;
}

#Echoes-map-wrap {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 1;
}

#map {
  position: absolute;
  inset: 0;
}

#Echoes-root .leaflet-container {
  background: #dbeafe;
}

/* Keep overlays inside the block instead of the viewport */
#Echoes-root #filter-wrapper,
#Echoes-root #spatial-wrapper,
#Echoes-root #legend-wrapper,
#Echoes-root #timeline-wrapper,
#Echoes-root #heatmap-dialog,
#Echoes-root #detail-overlay,
#Echoes-root #info-note-overlay,
#Echoes-root #settings-overlay,
#Echoes-root #period-info-modal {
  position: absolute !important;
}

#Echoes-root #heatmap-dialog,
#Echoes-root #detail-overlay,
#Echoes-root #info-note-overlay,
#Echoes-root #settings-overlay,
#Echoes-root #period-info-modal {
  inset: 0 !important;
}

/* Keep map UI stacked within the block only */
#Echoes-root #filter-wrapper,
#Echoes-root #spatial-wrapper,
#Echoes-root #legend-wrapper,
#Echoes-root #timeline-wrapper {
  z-index: 20 !important;
}

#Echoes-root #map-style-control,
#Echoes-root .leaflet-control-container {
  z-index: 24000 !important;
}

#Echoes-root #detail-overlay,
#Echoes-root #heatmap-dialog,
#Echoes-root #info-note-overlay,
#Echoes-root #settings-overlay,
#Echoes-root #period-info-modal {
  z-index: 30000 !important;
}

@media (max-width: 1280px) {
  #Echoes-root {
    height: 72vh;
    min-height: 680px;
  }
}

@media (max-width: 980px) {
  #Echoes-root {
    width: 100%;
    max-width: 100%;
    min-height: 620px;
  }
}

/* Block global theme hover styles from overriding map elements */
#Echoes-root a:not([class*="leaflet"]):hover,
#Echoes-root button:not([class*="leaflet"]):hover,
#Echoes-root tr:not([class*="leaflet"]):hover,
#Echoes-root td:not([class*="leaflet"]):hover,
#Echoes-root th:not([class*="leaflet"]):hover,
#Echoes-root input:not([class*="leaflet"]):hover,
#Echoes-root select:not([class*="leaflet"]):hover,
#Echoes-root textarea:not([class*="leaflet"]):hover {
  background-color: transparent;
  color: inherit;
  border-color: transparent;
  box-shadow: none;
  transform: none;
  text-decoration: none;
}

/* Force remove black hover from theme on data table buttons */
#data-table-close:hover,
#data-table-download:hover {
  background-color: #e2e8f0 !important;
}

#data-table-close:hover svg,
#data-table-download:hover img {
  background-color: transparent !important;
  fill: currentColor !important;
}