.leaflet-ruler {
  background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 16 16 4l2 2L6 18z' fill='none' stroke='%23333' stroke-width='2'/%3E%3Cpath d='m7 13 2 2M10 10l2 2M13 7l2 2' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  cursor: pointer;
  height: 30px;
  width: 30px;
}

.leaflet-ruler-clicked {
  background-color: #d9edf7;
}

.result-tooltip,
.moving-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #777;
  border-radius: 3px;
  color: #222;
  font-size: 11px;
  line-height: 1.25;
  padding: 3px 5px;
}

.ruler-labels {
  color: #555;
  padding-right: 6px;
  white-space: nowrap;
}

.ruler-values {
  color: #111;
  white-space: nowrap;
}