@import url("../map.css");

.menuField {
  margin-top: 12px;
}

.menuField label {
  display: block;
  font-size: 13px;
  color: var(--text-subtitle-color);
  margin-bottom: 4px;
}

.menuField select {
  width: 100%;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
}

#statusToast {
  max-width: min(560px, calc(100vw - 32px));
}

.rangeLimits {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  margin-bottom: 6px;
  font-size: 11px;
  opacity: 0.9;
}

.doubleRange {
  position: relative;
  height: 26px;
}

.doubleRange input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
  pointer-events: none;
}

.doubleRange input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
}

.doubleRange input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
}

.scenarioPopup {
  width: min(80vw, 820px);
}

#scenarioModal {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(90vw, 960px);
  max-height: min(84vh, 840px);
  z-index: 2100;
}

#scenarioModal .content {
  max-height: calc(min(84vh, 840px) - 44px);
  overflow: auto;
}

.scenarioPopupFrame {
  width: 100%;
  height: min(70vh, 700px);
  border: 0;
  border-radius: 8px;
}

.legendItemText {
  font-size: 8px !important;
}