svg {fill: none; stroke:none; stroke-width:1px; stroke-linecap:round; stroke-linejoin:round;
  font: normal 10px Arial,sans-serif; alignment-baseline: central; text-anchor: middle; }
svg .thin { stroke-width:0.5px; }
svg .thick, .wide { stroke-width:2px; }
svg .dash,  #footprint > path,  #marker > path { stroke-dasharray:3 5; }
svg     #footprint, svg     #marker { display:none; }
svg.gln #footprint, svg.gln #marker { display:block; }
svg .transp { opacity: .67; }

/* Colors ------------------------------------------------------------------ */
svg .white { stroke:#aaa; }
svg .black { stroke:#222; }
svg .gray  { stroke:#aaa; }
svg .red   { stroke:#f44; }
svg .green { stroke:#2f4; }
svg .darkgreen { stroke: green; }
svg .blue  { stroke:#a1a1ff; }
svg .lightblue { stroke:#aaa; }
svg .yellow, svg .lightyellow { stroke:#cc2; }
svg .brown { stroke: #a66; }

svg .white.fill,  svg .white  .fill { fill:white }
svg .black.fill,  svg .black  .fill { fill:#444; }
svg .gray.fill,   svg .gray   .fill { fill:#eee; }
svg .red.fill,    svg .red    .fill { fill:#fcc; }
svg .green.fill,  svg .green  .fill { fill:#afc; }
svg .darkgreen.fill, svg .darkgreen .fill { fill: #7da; }
svg .blue.fill,   svg .blue   .fill { fill:#e5e5ff; }
svg .yellow.fill, svg .yellow .fill { fill:#ff4; }
svg .lightblue.fill,   svg .lightblue   .fill { fill:#f8f8ff; }
svg .lightyellow.fill, svg .lightyellow .fill { fill:#ffc; }
svg .brown.fill, svg .brown .fill { fill: #c99; }

svg.bw ellipse,
  svg.bw .red > path, svg.bw .green > path, svg.bw .darkgreen > path, svg.bw .blue > path, svg.bw .lightblue > path,
  svg.bw .yellow > path, svg.bw .lightyellow > path, svg.bw .brown > path { stroke:#aaa; }
svg.bw .red > path.fill, svg.bw .green > path.fill, svg.bw .darkgreen > path.fill,
  svg.bw .blue > path.fill, svg.bw .lightblue > path.fill,
  svg.bw .yellow > path.fill, svg.bw .lightyellow > path.fill, svg.bw .brown > path.fill { fill:#eee; }

/* Materials --------------------------------------------------------------- */
svg .window { fill:#fff; }
svg .glass  { fill:#fff8; }
svg .porcelain { fill: #f8f8fd80; stroke: #aaa; }

svg .blue   .glass, svg .blue.glass  { fill:#e5e5ff60; }
svg .red    .glass, svg .red.glass   { fill:#fcc6; }
svg .green  .glass, svg .green.glass { fill:#cfc6; }
svg .yellow .glass, svg .yellow.glass { fill:#ff46; }

svg    .wall { stroke:#aaa }
svg    .wall.fill, svg    .wall .fill { fill:#ffd }
svg.bw .wall.fill, svg.bw .wall .fill { fill:#f4f4f4 }

svg    .floor { stroke:#aaa; fill:#ffe; }
svg.bw .floor { fill:#fcfcfc; }

svg    .furn { stroke:#db4 }
svg.bw .furn { stroke:#aaa }
svg    .furn.fill, svg .furn .fill { fill:#fffcf8 }
svg.bw .furn.fill, svg.bw .furn .fill { fill:#f4f4f4 }
svg    .ash { stroke:#da8 }
svg    .ash.fill, svg .ash .fill { fill:#fff8e0 }
svg.bw .ash { stroke:#aaa }
svg.bw .ash.fill, svg.bw .ash .fill { fill:#fafafa }
svg    .oak { stroke:#c90 }
svg.bw .oak { stroke:#aaa }
svg    .oak.fill, svg .oak .fill { fill:#fec }
svg.bw .oak.fill, svg.bw .oak .fill { fill:#e8e8e8 }

svg    .cuir { stroke:#a80 }
svg.bw .cuir { stroke:#888 }
svg    .cuir.fill, svg    .cuir .fill { fill:#fdb }
svg.bw .cuir.fill, svg.bw .cuir .fill { fill:#eee }

svg    .bricks { fill: url(#bricks); stroke: #aaa; }
svg    #bricks > rect { fill: #fff; }
svg    #bricks > path { stroke: #aaa; stroke-width: 0.2px; }

svg    .tiles { fill: url(#tile); opacity:66%; }
svg    #tile > rect { fill: #ffd0aa; }
svg    #tile > path { stroke: #aaa; stroke-width: 0.4px; }
svg.bw #tile > rect { fill:#f8f8f8; }

svg    .av { stroke: #888; }
svg    .av.fill, svg .av .fill { fill: #bbb; }
svg.bw .av { stroke: #aaa; }
svg.bw .av.fill, svg .av .fill { fill: #ccc; }

svg    .plinth { fill:#fdc; stroke: #aaa }
svg.bw .plinth { fill:#eee }

/* Elements ---------------------------------------------------------------- */

/* -- Light elements -- */
svg:not(.power)   g.pwr.hidden, 
  svg:not(.light) g.light.hidden:not(.select), svg:not(.light) g.light:not(.select) .hidden,
  svg:not(.lan)   g.lan.hidden { display: none; }
svg.power         g.pwr.hidden,
  svg.light       g.light.hidden, svg.light g.light .hidden,
  svg.lan         g.lan.hidden { opacity: .8; }
svg       g.light .halo { stroke: none; fill:none; }

svg       g.light.spot > ellipse, svg g.light.spot > circle { stroke: #aaa; stroke-width:0.35px; fill:white; }
svg       g.light.spot > ellipse:first-child, svg g.light.spot > circle:first-child { stroke-width:0.67px; fill:#f8f8f8 !important; }

svg       g.light.bulb > circle:not(.halo) { stroke: #aaa; stroke-width:0.67px; fill: #fff8; }
svg.light g.light.bulb > circle, svg g.light.bulb:hover > circle, svg g.light.bulb.select > circle { fill:#ff8; }

svg       g.light.led > path { stroke: white; stroke-width:4px; filter: drop-shadow(0px 0px 0.5px #000); }
svg.light g.light.led > path,       svg g.light.led:hover > path,       svg g.light.led.select > path { stroke: #ff8; filter: drop-shadow(0px 0px 0.5px #000) drop-shadow(0px -2px 4px #ff0); }
svg.light g.light.led > path.down,  svg g.light.led:hover > path.down,  svg g.light.led.select > path.down  { filter: drop-shadow(0px 0px 0.5px #000) drop-shadow(0px 2px 4px #ff0); }
svg.light g.light.led > path.green, svg g.light.led:hover > path.green, svg g.light.led.select > path.green { stroke: #cfa; filter: drop-shadow(0px 0px 0.5px #000) drop-shadow(0px 2px 4px #af8); }
svg.light g.light.led > path.red,   svg g.light.led:hover > path.red,   svg g.light.led.select > path.red   { stroke: #fca; filter: drop-shadow(0px 0px 0.5px #000) drop-shadow(0px -2px 4px #fa8); }
svg       g.light.led > path.hidden { stroke-dasharray: 3px 5px; }

/* active highlight, hover highlight */
svg.light g.light > circle.ah,  svg g.light.select > circle.ah,  svg g.light:hover > circle.ah,
svg.light g.light > ellipse.ah, svg g.light.select > ellipse.ah, svg g.light:hover > ellipse.ah { fill:#ff8; }
svg       g.light > path.ah { stroke:#aaa; }
svg.light g.light > path.ah,    svg g.light.select > path.ah,   svg g.light:hover > path.ah   { stroke:#aa0; }
svg       g.light:hover > .hh { stroke:#cc0; stroke-width:1.5px; filter: drop-shadow(1px 1px 2px #dd88); }
svg.light g.light .halo, svg g.light:hover .halo, svg g.light.select .halo { fill: #ff48; stroke: none; filter: blur(5px); }
svg.light g.light .halo.green, svg g.light:hover .halo.green, svg g.light.select .halo.green { fill: #af88; }
svg.light g.light .halo.red,   svg g.light:hover .halo.red,   svg g.light.select .halo.red   { fill: #fa86; }

/* -- Light elements -- */
svg g.pwr, svg g.lan { stroke:#aaa; stroke-width:0.35px; }
svg g.pwr > :first-child, svg g.lan > :first-child { stroke-width:0.67px; fill:#f8f8f8; }

svg.power g.pwr > :first-child, svg g.pwr.select > :first-child { stroke:#f44; fill:#fdd; }
svg g.pwr:hover > :first-child { stroke:#f44; filter: drop-shadow(1px 1px 2px #f005); }

svg.power g.pwr.switch  path, svg g.pwr.switch.select path { stroke:#f44; }

svg       g.pwr.socket  circle      { fill:#aaa; }
svg       g.pwr.socket  circle.fill { fill:#eee; }
svg.power g.pwr.socket  circle,      svg g.pwr.socket.select circle { stroke:#f44; fill:#f44; }
svg.power g.pwr.socket  circle.fill, svg g.pwr.socket.select circle.fill { fill:#fbb; }

svg.power g.pwr.pir > path,             svg g.pwr.pir.select > path { stroke:#b4b; }
svg.power g.pwr.pir > path:first-child, svg g.pwr.pir.select > path:first-child { fill:#faf; }
svg       g.pwr.pir:hover > path { stroke:#b4b; filter: drop-shadow(1px 1px 2px #b4b8); }

svg       g.pwr.water > path { fill:#eee; }
svg.power g.pwr.water > *,      svg g.pwr.water.select > * { stroke:#05a; }
svg.power g.pwr.water > circle, svg g.pwr.water.select > circle { fill:#def; }
svg.power g.pwr.water > .hot,  svg g.pwr.water.select > .hot  { fill:#e88; stroke:#a55; }
svg.power g.pwr.water > .cold, svg g.pwr.water.select > .cold { fill:#49e; stroke:#05a; }
svg g.pwr.water:hover > circle { stroke:#05a; filter: drop-shadow(1px 1px 2px #05a5); }


/* -- LAN elements -- */
svg g.lan:hover > :first-child { stroke:#0c0; filter: drop-shadow(1px 1px 2px #0c06); }
svg     g.lan > * { stroke: #aaa; fill: #fff; }
svg.lan g.lan > *, svg g.lan.select > * { stroke: #0c0; fill: #dfd; }


/* Dimensions -------------------------------------------------------------- */
svg .dim { display: none; }
svg.dim .dim { display: inline; }

g.dim > path { stroke:#666; stroke-width:0.3px;
  stroke-miterlimit: 0.5; stroke-dasharray: 4 2; stroke-dashoffset: 0;
  marker-start:url(#grayarrow); marker-end:url(#grayarrow); }
g.dim > path.single { marker-start:none !important; }
g.dim > path.none { marker-start:none !important; marker-end:none !important;}
g.dim > path.cote { stroke-dasharray: 2 2; marker-start:none !important; marker-end:none !important; }
g.dim > text { font-size:9px; fill: #666; stroke: none; font-style: italic; dominant-baseline: unset; }

g:hover > g.dim > path { stroke: #f00; marker-start:url(#redarrow); marker-end:url(#redarrow); }
g:hover > g.dim > text { fill: #f00; font-weight: bold; font-size:11px; }

@media print {
  svg.bw .wall.fill, svg.bw .wall .fill { fill: none !important; }
}