body, html {
    margin: 0;  padding: 0;
    height: 100%;
    text-size-adjust: none;
}
body {
    background-image: linear-gradient(rgba(160,150,150, 1), rgba(90,90,100, 1));
    font-family: sans-serif;
}
.centered-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}
.login-box {
    background-color: #fff;
    padding: 1.5em;
    border: 1px solid black;
}
.login-box * {
    margin: 0; padding: 0;
}
.login-box h1 {
    text-align: center;
    font-size: 125%;
    margin-bottom: 0.33em;
}
.login-box input {
    font-size: 0.8em;
    box-sizing: border-box;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 0.6em;
    width: 18em;
    border: 1px solid #00000080;
}
.login-box input[type="submit"] {
    background-color: #333;
    color: #fff;
}
.login-box input[type="submit"]:hover {
    background-color: #444;
}
.login-box input[type="submit"]:active {
    background-color: #2a2a2a;
}
.login-box input[type="submit"]:disabled {
    background-color: #808080;
    color: #bbb;
}

.login-error {
    border: 1px solid #800000;
    background-color:#ff8080;
    color: #400000;
    padding:0.6em;
    font-size:0.8em;
    margin-bottom:0.5em;
    box-sizing: border-box;
    max-width: 18em;
    text-align: center;
}

body, html {
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

body.cab {
    display: grid;
    color: #000;
    grid: "a b" 1fr / 0fr;
}

:root {
    --bc: #888;
}

.panel {
    display:flex;
    flex-direction: column;
    font-size: 1.5em;
    background-color: #c0c0c0;
    border-right: 1px solid var(--bc);
    color: #000;
}

.panel a {
    color: inherit;
    text-decoration: inherit;
}

.panel-buttons > a {
    padding:0.5em;
    padding-left:1em;
    font-size: 0.8em;
}

.panel-buttons > a:hover {
    background-color: #00000010;
}

.panel-top {
    margin-bottom: 1.5em;
    background: linear-gradient(#fff,#c0c0c0);
}
.panel-buttons {
    display: flex;
    flex-direction: column;
}
.panel-logo {
    display: flex;
    flex-direction: column;
    padding: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: 10em;
    height: min-content;
    text-align: center;
}
.panel-logo > img {
    width:100%;
}

.content {
    flex-grow: 1;
    font-size: 1.1em;
    padding:2em;
    background-color: #fff;
}
.content > div {
    max-width: 72em;
}

.panel-mobile-check-label {
    display:none;
    padding:0.5em;
    cursor: pointer;
    user-select:none;
}

.exam-answer {
    color: #0808ff;
}

.exam-user-ansc0 {
    color: #ff0000;
}

.exam-user-ansc {
    color: #009fff;
}

.answerlist label input {
  display: none;
}
li::marker {
  font-weight: bold;
}
.answerlist label:has(input:checked) li::marker {
  font-style: italic;
  color: #804000;
}
.answerlist label {
  cursor: pointer;
}
.exam-up-display0 {
    color: #ff0000;
}
.exam-up-display1 {
    color: #00a000;
}

table, tr, td, th {
    border: 1px solid black;
    border-collapse: collapse;
}
td, th {
    padding:0.25em;
}

.exam-answer-marker {
    font-size: 0.1px;
    float:left;
}

@media (width < 72em) {
  .panel-mobile-check-label {
      display:block;
  }
    body.cab {
        display: flex;
        flex-direction: column;
    }
    .panel-top {
        margin-bottom: 0;
        display: flex;
    }
    .panel-logo {
        display: flex;
        flex-direction: row;
        padding: 0.5em;
        gap: 0.5em;
    }
    .panel-logo > img {
        height:1.5em;
        width: auto;
    }
    .panel {
        display: flex;
        border-right: 0;
        border-bottom: 1px solid var(--bc);
    }
    body:not(:has(#panel-mobile-check:checked)) .panel-buttons {
        display:none;
    }
}