body { padding: 0; margin: 0; font-family: sans-serif; }
a { color: #000; text-decoration: none; }
a:hover { color: #00f; }
a.playing { color: #a00 !important; }

div#menubar {
    background: #f8f8f8;
    padding: 4pt;
    margin: 0;
    border-bottom: solid 1px #aaa;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4pt;
}
div#menubar .right { font-size: 90%; }
div#menubar .right > * { margin-left: 10pt; }
div#menubar .right form { display: inline; }
div#menubar .right button { border: none; background: none; padding: 0; font: inherit; cursor: pointer; }
div#menubar .right button:hover { color: #00f; }
div#menubar a.nav { padding: 0 4pt; }
form { padding: 0; margin: 0; }
.js .nojs { display: none; }

/* Login, password and TOTP pages */
div.box { max-width: 24em; margin: 3em auto; padding: 0 10pt; }
div.box h1 { font-size: 120%; }
div.box h2 { font-size: 110%; margin: 1em 0; }
div.box label { display: block; margin-bottom: 1em; }
div.box label input:not([type=checkbox]) { display: block; width: 100%; box-sizing: border-box; padding: 4pt; margin-top: 2pt; font-size: 110%; }
div.box label.check { font-size: 95%; }
div.box button { padding: 4pt 12pt; font-size: 105%; }
div.box ol li { margin-bottom: 0.8em; }
div.box canvas { display: block; margin: 0.5em 0; max-width: 100%; image-rendering: pixelated; }
code.secret { display: block; margin: 0.4em 0; font-size: 110%; word-break: break-all; }
p.error { color: #a00; }
p.ok { color: #060; }
p.hint { font-size: 90%; margin-top: 2em; }
p.hint a { text-decoration: underline; }

/* Archive (legacy look) */
div#days { padding: 10pt; }
div.day h2 { margin: 0; padding: 0; border-bottom: solid 1px black; font-size: 130%; }
div.day { margin-bottom: 20pt; }
div.day span.norec { font-style: italic; color: #444; }
div.timetable span { margin-right: 10pt; }