body { font-family: 'Didact Gothic' }
@page { size: A4 }
.seat { float: left; word-break: break-word; height: 18mm; padding: 1mm; border: 1px solid #000; position: relative; overflow: hidden }
.rowend { clear: both }
.id { position: absolute; bottom: 1mm; right: 1mm; background: #FFF; padding: .5mm }
.placeid { width: 24mm; height: 6mm; font-size: 4mm; float: left; text-align: center; border: 1px solid #000 }
.legend { background-color: #000; color: #FFF; vertical-align: middle; text-align: center; height: 18mm; border: 1px solid #FFF }
.seat span { display: block; line-height: 1.1 }
.legend span { line-height: 18mm; font-size: 3mm }
.wide span { text-align: center }

#upload { position: absolute; left: 30%; top: 20%; width: 40%; height: 60% }
#upload { border: 1px solid #000; border-radius: 10px; background-color: #FFF }
#upload { display: grid; grid-template-rows: 1fr .5fr .5fr; grid-gap: 1rem }
#upload input, #upload label { width: 90%; height: 90%; margin: auto; padding: 1rem; text-align: center }
#upload label { border: 1px solid #000; border-radius: 5px; background-color: #000; color: #FFF; cursor: pointer }
#upload label:hover { background-color: #FFF; color: #000 }
#upload object { width: 100%; max-height: 50vh }

.logo { width: 18mm; position: absolute; left: 10mm; top: 10mm }
.logo object { width: 100% }
.logo span { font-size: 5mm; margin-bottom: 5mm }
.title, .seats, .logo { float: left }
.seats { margin-left: 18mm }
.stage { float: left; text-align: center; background-color: #000; color: #FFF }
.title { width: 100mm }
.stage { width: 158mm }

.empty { color: #999; border-color: #000 #DDD }
.rempty { position: absolute; top: 0; bottom: 0; width: 22mm; border-right: 1px solid #DDD }
.rempty div { position: absolute; right: 1mm; bottom: 1mm }
.rempty span { position: absolute; left: 1mm; right: 1mm; top: 1mm; min-height: 5mm }
.rempty span:hover { color: #FFF; background-color: #000 }

.controls { display: none }
.nlseat:hover .controls { display: block }
.controls { position: absolute; left: 0; bottom: 0 }
.controls button { border: 1px solid #000; height: 6mm; width: 6mm; border-radius: 3mm; background: #FFF; color: #000; margin-left: 1mm }
.active, .controls button:hover { background-color: #000; color: #FFF }

.bgpicker { display: block; margin-top: 10mm }
.bgpicker div { width: 16mm; height: 16mm; border: 1px solid #000 }
.bgpicker input { display: none }
.bgpicker span { font-size: 3mm }
.bgpicker div span { font-size: 10mm; text-align: center; vertical-align: middle; display: block }

.free { position: absolute; left: 1mm; bottom: 1mm; font-size: 6mm }
.x { border-color: #FFF }

.cross {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='1'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='1'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
}