/*
 * Estilo propio del divisor de leaflet-side-by-side.js — combina el
 * layout.css original del paquete (posicionamiento, obligatorio y no
 * cosmético — el z-index compartido entre .leaflet-sbs-divider y
 * .leaflet-sbs-range es lo que original mente evita que el handle quede
 * por debajo del track) con el vidrio + verde CONAF del resto de la
 * plataforma en vez del range.css original (que usaba un ícono png).
 */
.leaflet-sbs {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: 999;
  pointer-events: none;
}

.leaflet-sbs-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  /* El JS fija `left` en el punto de corte del clip (borde izquierdo de la
     línea). Sin compensar, la línea de 2px queda íntegra a la derecha del
     corte. margin-left:-1px la centra sobre el corte real (y bajo el handle). */
  margin-left: -1px;
  background: #2c6239;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
  pointer-events: none;
  z-index: 999;
}

.leaflet-sbs-range {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%; left: 0; width: 100%;
  transform: translateY(-50%);
  height: 0; margin: 0; padding: 0; border: 0;
  background: transparent;
  pointer-events: none;
  cursor: ew-resize;
  z-index: 999;
}
.leaflet-sbs-range:focus { outline: none; }
.leaflet-sbs-range::-moz-focus-outer { border: 0; }

.leaflet-sbs-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background-color: #1a3422;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 7l-5 5 5 5V7zM16 7v10l5-5-5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px -4px rgba(26, 52, 34, .55);
  cursor: ew-resize;
  pointer-events: auto;
}
.leaflet-sbs-range::-moz-range-thumb {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background-color: #1a3422;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 7l-5 5 5 5V7zM16 7v10l5-5-5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px -4px rgba(26, 52, 34, .55);
  cursor: ew-resize;
  pointer-events: auto;
}
.leaflet-sbs-range::-ms-thumb {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background-color: #1a3422;
  border: 2px solid #fff;
  cursor: ew-resize;
  pointer-events: auto;
}
.leaflet-sbs-range::-moz-range-track { opacity: 0; }
.leaflet-sbs-range::-ms-track { opacity: 0; }
.leaflet-sbs-range::-ms-fill-lower { background: transparent; }
.leaflet-sbs-range::-ms-fill-upper { background: transparent; }
.leaflet-sbs-range::-ms-tooltip { display: none; }