html, body { height: 100%; }
body { margin: 0; font: 13px monospace; background: #181818; color: #ddd;
       display: flex; height: 100vh; overflow: hidden; }

#side { flex: 0 0 auto; width: 250px; min-width: 150px; max-width: 700px;
        resize: horizontal; overflow-y: auto; overflow-x: hidden;
        padding: 10px; height: 100%; box-sizing: border-box;
        border-right: 1px solid #333; }
#side.collapsed { display: none; }
#tabs { margin-bottom: 6px; }
.tab { background: #222; color: #aaa; border: 1px solid #444; padding: 3px 8px;
       cursor: pointer; }
.tab.sel { background: #345; color: #fff; }
#sport { width: 100%; margin: 4px 0 8px; background: #222; color: #ddd;
         border: 1px solid #444; }
#userbox { margin: 0 0 8px; color: #8ac; }
#userbox button { background: #222; color: #aaa; border: 1px solid #444;
                  cursor: pointer; float: right; }

#loginbox { margin: 18vh auto 0; width: 240px; }
#loginbox h2 { color: #8ac; font-weight: normal; }
#loginbox input { display: block; width: 100%; margin: 6px 0; padding: 5px;
                  background: #222; color: #ddd; border: 1px solid #444;
                  box-sizing: border-box; font: inherit; }
#loginbox button { width: 100%; margin-top: 6px; padding: 5px; background: #345;
                   color: #fff; border: 1px solid #444; cursor: pointer;
                   font: inherit; }
#loginerr { color: #a55; margin-top: 8px; min-height: 16px; }

#main { flex: 1 1 auto; min-width: 0; padding: 8px; box-sizing: border-box;
        display: flex; flex-direction: column; overflow: hidden; }
#stage { position: relative; flex: 1 1 auto; min-height: 0; }
canvas { background: #000; cursor: crosshair; }
#vid { background: #000; }
.hidden { display: none !important; }

.qitem { padding: 1px 4px; cursor: pointer; white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis; }
.qitem.sel { background: #334; }
.done { color: #5a5; } .rej { color: #a55; } .skp { color: #886; }
.dup { color: #568; }

#status { margin: 2px 0 4px; min-height: 16px; white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; }
#toolbar { flex: 0 0 auto; }
#toolbar button { margin-right: 6px; }
#modehelp { color: #888; }
#legend { margin: 4px 0; flex: 0 0 auto; line-height: 1.5; }
#legend .kpname { display: inline-block; white-space: nowrap; padding: 1px 4px;
                  cursor: pointer; }
#legend .kpname.sel { background: #334; }
.v2 { color: #7f7; } .v1 { color: #fc6; } .v0 { color: #f66; }

#timeline { flex: 0 0 auto; height: 26px; background: #111; position: relative;
            margin: 4px 0; border: 1px solid #333; cursor: pointer; }
.tick { position: absolute; top: 0; width: 2px; height: 100%; }
.tick.pre { background: #666; }
.tick.cursor { background: #fff; width: 1px; }
.tick.ev-forehand { background: #4f4; } .tick.ev-backhand { background: #48f; }
.tick.ev-serve { background: #ff4; }  .tick.ev-volley { background: #f4f; }
.tick.ev-overhead { background: #f84; } .tick.ev-other { background: #0cc; }

#events { flex: 0 0 auto; max-height: 74px; overflow-y: auto; margin: 2px 0; }
.evitem { padding: 1px 4px; cursor: pointer; display: inline-block; margin-right: 6px; }
.evitem.sel { background: #334; }