:root{
  --lake-outline:#0165fc;
  --river-outline:#2ecc71;
  --marker-edge:rgba(24,34,29,.78);
}

.marker-pin{
  position:relative;
  width:15px;
  height:15px;
  border:1px solid var(--marker-edge);
  border-radius:50%;
  box-shadow:0 0 0 1px #fff,0 1px 3px rgba(0,0,0,.34);
  opacity:.94;
}

.marker-pin::after{
  content:"";
  position:absolute;
  top:-3px;
  right:-4px;
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid var(--lake-outline);
  filter:drop-shadow(0 0 0.5px #fff) drop-shadow(0 0 0.5px var(--marker-edge));
}

.marker-pin.water-lake::after{
  border-left-color:var(--lake-outline);
}

.marker-pin.water-river::after{
  border-left-color:var(--river-outline);
}

.legend .lake-key,
.legend .river-key{
  position:relative;
  border:1px solid var(--marker-edge);
  background:var(--unknown-stock);
  box-shadow:0 0 0 1px #fff;
  overflow:visible;
}

.legend .lake-key::after,
.legend .river-key::after{
  content:"";
  position:absolute;
  top:-3px;
  right:-4px;
  width:0;
  height:0;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-left:5px solid var(--lake-outline);
  filter:drop-shadow(0 0 0.5px #fff) drop-shadow(0 0 0.5px var(--marker-edge));
}

.legend .lake-key::after{
  border-left-color:var(--lake-outline);
}

.legend .river-key::after{
  border-left-color:var(--river-outline);
}