html, body { margin:0; padding:0; height:100%; font-family: Arial, sans-serif; }
#map { width:100%; height:100%; }

/* info box */
#info{
  position:absolute;
  top:20px; right:20px;
  background:white;
  padding:12px 14px;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  z-index:1000;
  font-size:14px;
  min-width: 220px;
}

/* layer panel */
#layer-panel{
  position:absolute;
  left:20px; bottom:20px;
  background:white;
  padding:12px 14px;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  z-index:1000;
  font-size:14px;
  line-height: 1.6;
}
#layer-panel strong{ display:block; margin-bottom:6px; }
#layer-panel label{ cursor:pointer; user-select:none; }
#layer-panel input{ transform: translateY(1px); margin-right:6px; }

#measure-panel{
  position:absolute;
  right:20px;
  bottom:20px;
  background:white;
  padding:12px 14px;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  z-index:1200;
  font-size:14px;
}

#measure-panel button{
  margin:4px 0;
  width:100%;
  cursor:pointer;
}

.plant-marker {
  width: 10px;
  height: 10px;
  background: #27ae60;
  border: 2px solid white;
  border-radius: 50%;
}