body { display: flex }
.cp { font-family: monospace; font-size: smaller }

div#tooltip { display: none; position: absolute; border: solid 1px black; background: white; padding: 0.5em; font-size: smaller; }
div#tooltip span.hdr { font-weight: 600 }
div#tooltip div.sep { border-top: solid 1px black; margin-top: 0.1em; padding-top: 0.1em }
.planerm li { font-family: monospace; font-size: smaller; }
div.sticktop { position: sticky; top: 0; }
div.stickbottom { position: sticky; bottom: 0 }
path { stroke-width: 1px; stroke: black; fill: white }
.shadow path { filter: drop-shadow(2px 2px 2px gray); }

/* statuses */

span.publ { background: #BBDDFF }
g.publ path, g.publ rect { fill: #BBDDFF }

span.publ.rtl { background: #CCCCFF }
g.publ.rtl path, g.publ.rtl rect { fill: #CCCCFF }

span.acpt { color: #007F0A; }
g.acpt text { fill: #007F0A; }
g.acpt path, g.acpt rect { fill: white }

span.prov { color: #007F0A; }
g.prov text { fill: #007F0A; }
g.prov path, g.prov rect { fill: white }

span.rdmp { color: #0000DD; }
g.rdmp text { fill: #0000DD; }
g.rdmp path, g.rdmp rect { fill: white }

span.tent { color: #DD0000 }
g.tent text { fill: #DD0000 }
g.tent path, g.tent rect { filter: none; opacity: 0.66 }
g.tent.rtl path, g.tent.rtl rect { filter: none; opacity: 0.33 }

span.free { color: #000000 }
g.free text { fill: #000000 }
g.free path, g.free rect { fill: white; stroke: none; filter: none; opacity: 0.66 }
g.free.rtl path, g.free.rtl rect { opacity: 0.33 }

/* flags */

span.ctrl { background: #F0F0F0 }
g.ctrl path, g.ctrl rect { fill: #F0F0F0 }

span.nc { background: #F0F0F0 }
g.nc path, g.nc rect { fill: #F0F0F0 }

span.rtl { background: #FFFFCC }
g.rtl path, g.rtl rect { fill: #FFFFCC }

svg { display: block }
svg a:hover text { text-decoration: underline }

#conventions { margin-top: 1em }

#sidenav { position: fixed; top: 1em; left: 1em }
#sidenav a { text-decoration: none }

@media (max-width: 1400px) {
    #sidenav { position: static }
    #sidenav div { display: inline }
    #sidenav div:nth-child(n+2)::before { content: '•' }
    .cps { display: none }
}

@media (max-width: 2000px) {
    .exp { display: none }
}