.the-map {
  background-color: white;
  background-image: none;
}

.walls-layer {
  filter: drop-shadow(3px 0px 0px #444444) drop-shadow(-3px 0px 0px #444444)
      drop-shadow(0px 3px 0px #444444) drop-shadow(0px -3px 0px #444444);
}

.floor-cell {
  background-color: white;
}

.wall-cell-adding, wall-cell-editing {
  opacity: 0.8;
}

.wall-cell-removing {
  opacity: 0.6;
}

.door-cell {
  background-color: rgb(255, 255, 255);
  border-style: solid;
  border-width: 3px;
  border-color: rgb(100, 100, 100)
}

.secret-door-cell {
  border-style: dashed;
}

.door-cell-horizontal {
  margin: -5px 3px -5px 3px;
}

.door-cell-vertical {
  margin: 3px -5px 3px -5px;
}

.double-door-cell-horizontal {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='50%' y1='0' x2='50%' y2='100%' stroke-width='3' stroke='rgb(100, 100, 100)' /></svg>");
}

.double-door-cell-vertical {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='3' stroke='rgb(100, 100, 100)' /></svg>");
}

.window-cell {
  background-color: rgb(255, 255, 255);
  border-width: 3px;
}

.window-cell-horizontal {
  margin: -2px 3px -2px 3px;
}

.window-cell-vertical {
  margin: 3px -2px 3px -2px;
}

.door-cell-adding, .window-cell-adding {
  background-color: lightgray;
}

.door-cell-removing, .window-cell-removing {
  background-color: lightgray;
  border-color: darkgray;
}

.bars-cell-horizontal {
  margin-right: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='3' r='2' stroke='rgb(80, 80, 80)' stroke-width='1' fill='rgb(80, 80, 80)' /></svg>") repeat-x;
}

.bars-cell-vertical {
  margin-bottom: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='3' cy='4' r='2' stroke='rgb(80, 80, 80)' stroke-width='1' fill='rgb(80, 80, 80)' /></svg>") repeat-y;
}

.fence-cell-horizontal {
  margin-right: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><line x1='0' y1='3' x2='100%' y2='3' stroke-width='2.5' stroke='rgb(100, 100, 100)' /><circle cx='4' cy='3' r='2' stroke='rgb(80, 80, 80)' stroke-width='1' fill='rgb(80, 80, 80)' /></svg>") repeat-x;
}

.fence-cell-vertical {
  margin-bottom: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><line x1='3' y1='0' x2='3' y2='100%' stroke-width='2.5' stroke='rgb(100, 100, 100)' /><circle cx='3' cy='4' r='2' stroke='rgb(80, 80, 80)' stroke-width='1' fill='rgb(80, 80, 80)' /></svg>") repeat-y;
}

.curtain-cell-vertical {
  margin-bottom: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='16'><path d='M 1 0 C 1 3 5 3 5 8 S 1 11 1 16' stroke='rgb(100, 100, 100)' stroke-width='3' fill='transparent'/></svg>") repeat-y;
}

.curtain-cell-horizontal {
  margin-right: 1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='7'><path d='M 0 1 C 3 1 3 5 8 5 S 11 1 16 1' stroke='rgb(100, 100, 100)' stroke-width='3' fill='transparent'/></svg>") repeat-x;
}

.archway-cell-horizontal {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0%' y1='50%' x2='20%' y2='50%' stroke='rgb(80, 80, 80)' stroke-width='3'/><line x1='20%' y1='0%' x2='20%' y2='100%' stroke='rgb(80, 80, 80)' stroke-width='2'/><line x1='80%' y1='0%' x2='80%' y2='100%' stroke='rgb(80, 80, 80)' stroke-width='2'/><line x1='80%' y1='50%' x2='100%' y2='50%' stroke='rgb(80, 80, 80)' stroke-width='3'/></svg>") repeat-x;
}

.archway-cell-vertical {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='50%' y1='0%' x2='50%' y2='20%' stroke='rgb(80, 80, 80)' stroke-width='3'/><line x1='0%' y1='20%' x2='100%' y2='20%' stroke='rgb(80, 80, 80)' stroke-width='2'/><line x1='0%' y1='80%' x2='100%' y2='80%' stroke='rgb(80, 80, 80)' stroke-width='2'/><line x1='50%' y1='80%' x2='50%' y2='100%' stroke='rgb(80, 80, 80)' stroke-width='3'/></svg>") repeat-x;
}

.shape-cell-vertical, .shape-cell-horizontal {
  margin: -1px -1px -1px -1px;
}

.shape-cell-primary, .shape-cell-vertical, .shape-cell-horizontal {
  stroke-width: 3;
}

.text-cell {
  text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
}

.stairs-cell {
  margin: 0;
}

.pit-cell {
  stroke: #aaaaaa;
  stroke-width: 2;
  background-color: transparent;
}

.pit-top, .pit-left {
  fill: #d2d1d1;
}

.pit-right, .pit-bottom {
  fill: white;
}

.passage-cell {
  stroke-width: 3;
}

.passage-cell-dashed-over-floor, .passage-cell-dashed-over-wall {
  stroke: black;
}

.wall-cover {
  background-color: white;
}

.wall-cover-boundary {
  border-radius: 50%;
  box-shadow: 0 0 15px 20px white;
}

/* Should be commented out */
.wall-cover-inner {
  border: 5px solid white;
}

.has-wall-cover {
  background-image: unset;
  background-color: white;
}
