html, body {
  padding: 0;
  margin: 0;
}
svg {
  background: #404040;
  display: inline-block;
}
#panel {
  position: absolute;
  left: 660px;
  top: 0;
  width: 300px;
  height: 500px;
  background: rgba(255, 255, 255, 0.75);
  vertical-align: top;
  padding: 12px;
  box-sizing: border-box;
  color: #333;
  overflow-y: auto;
}
#panel header {
  font-size: 20px;
  font-weight: bold;
  color: black;
  margin-bottom: 12px;
}
#sea_pattern {
  opacity: 0.07;
  fill: url(#sea);
}
.link {
  stroke: orange;
  vector-effect: non-scaling-stroke;
  display: none;
}
.node {
  fill: #DDD;
  stroke: #777;
  vector-effect: non-scaling-stroke;
  display: none;
}
.deep_cell {
  fill: #484444;
}
.shallow_cell {
  fill: #755;
}
.land_cell {
  fill: #f4a582;
  stroke: #977;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.land_cell:hover {
  fill: #ff7777;
  cursor: pointer;
}
.selected.land_cell {
  fill: #DDD;
}
.selected.land_cell:hover {
  fill: white;
}
.relation {
  stroke: white;
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  fill: none;
  pointer-events: none;
}