:root { --c-main: #0078c8; --c-dark: #00518C; --c-light: #80bce4; }
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; padding-bottom: 60px; }
body, input, select, textarea, button { font-family: 'Roboto', sans-serif; }
.material-symbols-outlined { font-size: inherit; }
x-h, x-c, x-t, x-ctrls { display: block; }

#top-bar { background: var(--c-main); color: white; height: 40px; display: flex; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
    #top-bar > .left { display: flex; align-items: center; margin-left: 10px; position: relative; }
        #top-bar > .left > .school { font-weight: bold; font-size: 18px; background: var(--c-dark); border-radius: 5px; padding: 5px 20px; cursor: pointer; margin-right: 20px; }
        #top-bar > .left > .other-schools { left: 0; }
        #top-bar > .left .link { text-decoration: none; height: 100%; display: flex; align-items: center; color: black; font-weight: bold; padding: 0 10px; color: white; border-top: solid 2px transparent; border-bottom: solid 2px transparent; cursor: pointer; position: relative; }
            #top-bar > .left .link.active { cursor: default; border-bottom-color: var(--c-light); }
            #top-bar > .left .link:not(.active):hover { background: var(--c-dark); color: white; }
            #top-bar > .left .link > x-num { top: 5px; right: 0; }
        #top-bar > .left > .link-w { height: 100%; }
        #top-bar > .left x-num { position: absolute; background: #abab00; width: 14px; height: 14px; display: flex; justify-content: center; align-items: center; border-radius: 99px; font-size: 10px; color: white; }

    #top-bar > .right { display: flex; align-items: center; margin-right: 10px; position: relative; }
        #top-bar > .right > .initials { background: var(--c-dark); border-radius: 100%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; font-size: 14px; }
        #top-bar > .right > .user-menu { right: 0; }

    #top-bar .menu { display: none; position: absolute; background: white; top: 45px; border: solid 1px #aaa; box-shadow: 0 0 4px #aaa; z-index: 10; width: max-content; }
        #top-bar .menu > .i { padding: 8px 15px; background: white; text-decoration: none; color: black; display: block; position: relative; }
            #top-bar .menu > .i:not(.no-select):hover { background: #eee; cursor: pointer; }
            #top-bar .menu > .i:not(:first-child) { border-top: solid 1px #ccc; }
            #top-bar .menu > .i.active { font-weight: bold; }
            #top-bar .menu > .i > x-num { right: 2px; top: 2px; }
        #top-bar .menu.show { display: block; }

.c-width { width: 900px; margin: 0 auto; }
.ac-buster { position: absolute; left: -10000px; }
.m-t-40 { margin-top: 40px; }
.err-msg { color: red; font-size: 14px; margin-bottom: 20px; }
label > input[type="checkbox"] { vertical-align: -2px; }

.btn-primary, .btn-default, .btn-dark { border: none; color: white; font-weight: bold; font-size: 16px; padding: 6px 15px; cursor: pointer; text-decoration: none; display: inline-block; }
    .btn-primary:hover, .btn-default:hover, .btn-dark:hover { opacity: .8; }
    .btn-primary[disabled], .btn-default[disabled], .btn-dark[disabled] { cursor: not-allowed; opacity: .5; }
.btn-primary { background: var(--c-main); }
.btn-default { background: #777; }
.btn-dark { background: var(--c-dark); }
.btn-sm { font-size: 14px; padding: 5px 12px; }
.btn-icon { font-size: 20px; padding: 3px 10px 1px; }
.btn-primary:active, .btn-default:active, .btn-dark:active { box-shadow: 0 0 4px inset; }
.btn-primary.material-symbols-outlined, .btn-default.material-symbols-outlined, .btn-dark.material-symbols-outlined { font-weight: normal; }

.std-form > .field { margin-bottom: 20px }
    .std-form > .field > label { font-size: 12px; display: block; color: #777; margin-bottom: 2px; }
    .std-form > .field > input, .std-form > .field > select { font-size: 16px; border: solid 1px #aaa; padding: 4px 10px; }

.grid { display: grid; align-items: center; }
    .grid > .row { display: contents; }
        .grid > .row > div { padding: 4px 10px 4px 0; }
        .grid > .row > .num { text-align: right; }
        .grid > .row.h, .grid > .row > .h { font-weight: bold }
    .grid a:not(.btn-icon) { color: var(--c-dark); }
    .grid > .row > .green { background: #B7E1CD; }
    .grid > .row > .pink { background: #f1c0c0; }

.dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
    .dialog > .c { background: white; padding: 20px 40px; }