#edition .waypoints-section {
  display: flex;
  flex-direction: column;
}

#edition .waypoint-card {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 30px;
  align-items: center;
  padding: 0 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  cursor: grab;
}

#edition .waypoint-card:active {
  cursor: grabbing;
}

#edition .drag-handle {
  color: #888;
  user-select: none;
}

#edition .waypoint-id {
  font-weight: 500;
  line-height: 1;
  color: black;
}

#edition .waypoint-card .remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  width: 30px;
  height: 30px;
  color: #666;
  text-align: center;
}
#edition .waypoint-card .remove::before {
  display: none;
}




#edition .distance-card {
  text-align: center;
  padding: 2px;
  color: #999;
  font-size: 11px;
}

#edition .total-distance-card {
  text-align: center;
  padding: 4px;
  margin-top: 4px;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  border-top: 1px solid #e0e0e0;
}

#edition .distance-arrow {
  font-size: 16px;
}