.the-map {
  background-color: white;
  background-image: url("empty_tile1.png");
}

.walls-layer {
  filter: initial;
}

.floor-cell {
  border-color: transparent;
  image-rendering: pixelated;
  background-clip: border-box;
  margin: -1px;
}

.menu-item .floor-cell {
  background-color: white;
}
/*
.floor-cell-primary {
  background: white;
}

.floor-cell-vertical {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAYCAYAAADZEIyjAAAAIElEQVQoU2NkQAKuk/b9353nxAgSAhMwMCoxGiSkJQYAXaVgGb3d82UAAAAASUVORK5CYII=") 1px 1px white;
}

.floor-cell-horizontal {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAGCAYAAADZq14TAAAAIklEQVQoU2NkoDFgpLH5DLS3wHXSvv+09AXtfUBL14PMBgDw9gKb12UDQgAAAABJRU5ErkJggg==") 1px 1px white;
}

.floor-cell-corner {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAI0lEQVQYV2NkQAKuk/b9353nxAgSAhMwQJwESBWyLhibdKMAhkoWm9xUiqQAAAAASUVORK5CYII=") 1px 1px white;
}
*/
.wall-cell {
  background-color: #4592be;
  background-image: none;
  border-color: #4592be;
  box-shadow: 0 0 0 0.3px #4592be;
}

.wall-cell-adding, wall-cell-editing {
  background-color: #7cb2d1;
}

.wall-cell-removing {
  background-color: #82a7bc;
}

.oval-wall-cell {
  margin: -0.5px;
}

.door-cell {
  background-color: rgb(255, 255, 255);
}

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

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

.window-cell {
  background-color: rgb(255, 255, 255);
}

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

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

.image-blue {
  fill: #4592be;
}

.shape-blue {
  stroke: #4592be;
}

.marked-door-cell {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle cx='50%' cy='50%' r='2' stroke-width='1' stroke='%234592be' fill='%234592be' /></svg>") white;
}

.secret-door-cell, .hidden-secret-door-cell {
  border-style: none;
}

.secret-door-cell-vertical, .hidden-secret-door-cell-vertical {
  margin: 3px -1px 4px -1px;
  border-color: white;
  border-radius: unset;
}

.secret-door-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='100%' stroke-width='1' stroke='%234592be' /><text x='50%' y='50%' dominant-baseline='central' text-anchor='middle' font-size='16' fill='%234592be'>S</text></svg>") white;
}

.hidden-secret-door-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='100%' stroke-width='1' stroke='%234592be' /><text x='50%' y='50%' dominant-baseline='central' text-anchor='middle' font-size='16' fill='mediumvioletred'>S</text></svg>") white;
}

.secret-door-cell-horizontal, .hidden-secret-door-cell-horizontal {
  margin: -2px 4px -2px 3px;
  border-color: white;
  border-radius: unset;
}

.secret-door-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='100%' y2='50%' stroke-width='1' stroke='%234592be' /><text x='50%' y='50%' dominant-baseline='central' text-anchor='middle' font-size='15' fill='%234592be'>S</text></svg>") white;
}

.hidden-secret-door-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='100%' y2='50%' stroke-width='1' stroke='%234592be' /><text x='50%' y='50%' dominant-baseline='central' text-anchor='middle' font-size='15' fill='mediumvioletred'>S</text></svg>") white;
}

.door-cell-adding, .window-cell-adding {
  opacity: 0.8;
}

.door-cell-removing, .window-cell-removing {
  opacity: 0.6;
}

.separator-cell {
  border-width: 2px;
  border-color: #4592be;
}

.double-door-cell-horizontal {
  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='100%' stroke-width='2' stroke='%234592be' /></svg>") rgb(255, 250, 240);
}

.double-door-cell-vertical {
  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='100%' y2='50%' stroke-width='2' stroke='%234592be' /></svg>") rgb(255, 250, 240);
}

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

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

.bars-cell-horizontal {
  margin-top: -0.5px;
  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='%234592be' stroke-width='1' fill='%234592be' /></svg>") repeat-x;
}

.bars-cell-vertical {
  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='%234592be' stroke-width='1' fill='%234592be' /></svg>") repeat-y;
}

.fence-cell-horizontal {
  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' stroke='%234592be' /><circle cx='4' cy='3' r='2' stroke='%234592be' stroke-width='1' fill='%234592be' /></svg>") repeat-x;
}

.fence-cell-vertical {
  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' stroke='%234592be' /><circle cx='3' cy='4' r='2' stroke='%234592be' stroke-width='1' fill='%234592be' /></svg>") repeat-y;
}

.curtain-cell-vertical {
  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='%234592be' stroke-width='2' fill='transparent'/></svg>") repeat-y;
}

.curtain-cell-horizontal {
  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='%234592be' stroke-width='2' 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='15%' y2='50%' stroke='%234592be' stroke-width='3'/><line x1='15%' y1='0%' x2='15%' y2='100%' stroke='%234592be' stroke-width='2'/><line x1='85%' y1='0%' x2='85%' y2='100%' stroke='%234592be' stroke-width='2'/><line x1='85%' y1='50%' x2='100%' y2='50%' stroke='%234592be' 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='15%' stroke='%234592be' stroke-width='3'/><line x1='0%' y1='15%' x2='100%' y2='15%' stroke='%234592be' stroke-width='2'/><line x1='0%' y1='85%' x2='100%' y2='85%' stroke='%234592be' stroke-width='2'/><line x1='50%' y1='85%' x2='50%' y2='100%' stroke='%234592be' stroke-width='3'/></svg>") repeat-x;
}

.stairs-cell-horizontal {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='100%'><line x1='3.4' y1='0' x2='3.4' y2='100%' stroke='%234592be' stroke-width='2' /></svg>") white;
}

.stairs-cell-vertical {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='6'><line x1='0' y1='3.4' x2='100%' y2='3.4' stroke='%234592be' stroke-width='2' /></svg>") white;
}

.stairs-cell-spiral {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><style>path, line {stroke: %234592be; stroke-width: 1.5; fill: transparent; vector-effect: non-scaling-stroke;}</style><circle cx='50' cy='50' r='50' fill='white'/><path d='M 50 5 A 45 45 0 1 0 95 50'/> <line x1='50' y1='50' x2='50' y2='5'/> <line x1='50' y1='50' x2='50' y2='5' transform='rotate(90 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(135 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(180 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(225 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(270 50 50)'/><line x1='50' y1='50' x2='50' y2='5' transform='rotate(315 50 50)'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

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

.pit-cell {
  stroke: #61a4cc;
  background-color: transparent;
  margin: 0;
}

.pit-top, .pit-left {
  fill: rgb(149, 196, 222);
}

.pit-right, .pit-bottom {
  fill: #e5f2f9;
}

.passage-cell-dashed-over-floor {
  stroke: #4592be;
}

.passage-cell-dashed-over-wall {
  stroke: white;
}
