.balloon,
.point {
  background-color: #fefefe;
}
.point,
.preview-point {
  position: absolute;
  box-sizing: border-box;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.balloon,
.info {
  font-size: 12px;
}
.point {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #171b26;
  border-radius: 50%;
}
.balloon {
  position: absolute;
  padding: 4px;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow:
    0 2px 4px 0 rgba(95, 105, 131, 0.2),
    0 0 2px 0 rgba(95, 105, 131, 0.08);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-direction: column;
  z-index: 10;
}
.hide {
  display: none;
}
.preview-point {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #666;
}
.info {
  display: inline-block;
  padding: 8px;
}