html, body {
    margin: 0;
    font-size: 0;
    font-family: verdana, sans-serif;
    min-width: max-content;
    width: 100%;
    background-color: #141416;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    height: 100%;
}

body.without-left-menu {
    background-color: #282a31;
    height: unset;
}


/* Header */
header {
    width: 100%;
    min-width: max-content;
    min-height: 90px;
    background-color: rgb(27, 28, 30);
    position: relative;
    z-index: 1;
}

header div#header-content {
    position: sticky;
    left: 0;
    width: 97.5vw;
    min-height: 90px;
    overflow: hidden;
}

header div#header-top-logo {
    position: relative;
    float: left;
    padding-top: 21px;
    margin-left: 32px;
    line-height: 20px;
}

header div#header-top-logo img {
    width: 155px;
    height: 39px;
}

header h2 {
    display: block;
    color: white;
    position: absolute;
    bottom: -8px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 45px;
    font-size: 16px;
    text-shadow: 2px 2px 6px rgb(198, 255, 202);
    white-space: nowrap;
}

header h2 > a {
    color: white;
    text-decoration: none;
}

header div#header-content-right {
    float: right;
}

header div#header-right-buttons {
    margin-left: 8px;
    float: left;
}

header div#header-language-switcher {
    margin-left: 14px;
    padding-top: 36px;
    float: left;
}

header div#header-language-switcher select {
    width:100%;
    padding-right: 0px;
    background: none;
    outline: none;
    border: medium;
    font-family: arial, sans-serif;
    color: white;
    font-size: 14px;
    text-align-last: right;
}

header div#header-language-switcher select option {
    color: initial;
}

header nav {
    float: left;
    padding-top: 37px;
    margin-right: 8px;
    font-family: arial, sans-serif;
}

header nav a:nth-child(-n+3) {
    display: none;
}

header nav a {
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
    color: white;
    transition: color 0.3s ease 0s;
    text-decoration: none;
    font-size: 14px;
}

header nav a.picked {
    color: #f29b1a;
}

header nav a:hover {
    color: #f29b1a;
}

header div#header-panel-button {
    float: left;
}

header div#header-panel-button a {
    display: flex;
    align-items: center;
    margin-top: 21px;
    margin-right: 8px;
    min-width: 68px;
    height: 22px;
    border-radius: 5px;
    padding: 12px 16px 13px 16px;
    border: 1px solid white;
    transition: background-color 0.3s ease 0s, border 0.3s ease 0s;
    white-space: nowrap;
    text-decoration: none;
}

header div#header-panel-button a img {
    display: inline-block;
    width: 22px;
    height: 22px;
    transition: filter 0.3s ease 0s;
}

header div#header-panel-button a:hover img {
    filter: brightness(0%);
}

header div#header-panel-button a span {
    display: inline-block;
    color: white;
    font-size: 14px;
    margin-left: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    transition: color 0.3s ease 0s;
}

header div#header-panel-button a:hover {
    background-color: rgb(126, 198, 90);
    border-color: rgb(126, 198, 90);
}

header div#header-panel-button a:hover span {
    color: black;
}

header div#header-logout-button {
    float: left;
}

header div#header-logout-button a {
    display: inline-block;
    margin-top: 21px;
    padding: 13px 17px 14px;
    background-color: rgb(232, 74, 67);
    border-radius: 5px;
    width: 22px;
    height: 22px;
}

header div#header-logout-button a:hover {
    filter: brightness(115%);
}
header div#header-logout-button a:hover img {
    filter: brightness(0%);
}

/* Central */
body > div#central {
    display: flex;
    min-height: calc(100% - 95px);
    border-top: #282a31 5px solid;
}

body > div#central > div#middle {
    margin-left: auto;
    margin-right: auto;
    min-width: calc(100% - 326px);
}

/* Left Menu */
body > div#central > div#left-menu {
    width: 325px;
    background-color: #282a31;
    border-right: 1px solid #141416;
}

@media (pointer: fine) {  /* Styles only for computers (not mobile phones) */
    body > div#central > div#left-menu > div#left-menu-content {  /* Disable scrolling left menu */
        position: sticky;
        top: 0;
        bottom: 0;
        overflow: auto;
        max-height: 100vh;
    }
}

div#left-menu-content ol, div#left-menu-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

div#left-menu-content ul li a {
    text-align: left;
    font-size: 13px;
}

div#left-menu-content ol li a {
    text-align: left;
    font-size: 13px;
}

div#left-menu-content ol {
    margin-top: 20px;
    margin-left: 30px;
}

div#left-menu-content ul {
    margin-left: 5px;
}


div#left-menu-content li {
    width: calc(100% - 20px);
    margin-right: 10px;
}

div#left-menu-content li a {
    display: inline-block;
    width: 100%;
    margin-top: 7px;
    padding: 5px 5px;
    border-radius: 5px;
    border: 1px solid rgb(20, 20, 22);
    font-weight: bold;
    color: #ccc;
    text-decoration: none;
    transition: border-color 0.3s ease 0s;
}

div#left-menu-content li.picked a {
    color: rgb(242, 155, 26);
}

div#left-menu-content li a:hover {
    border-color: rgb(242, 155, 26);
}

div#left-menu-content ol li > a > div {
    display: flex;
    align-items: center;
}

div#left-menu-content div.icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin-right: 8px;
    overflow: hidden;
}

div#left-menu-content ol li a div.icon > img {
    float: left;
    width: 48px;
    height: 48px;
    transform-origin: top left;
    transform: scale(0.5);
}

/* Main Content */
body > div#central > div#middle main {
    margin-top: 10px;
    margin-left: 10px;
    width: max(600px, 97vw - 326px);
    min-width: fit-content;

    font-size: 13px;
    line-height: 1.6;
    color: white;
}

main a {
    color: #ccc;
    transition: color 0.3s ease 0s;
}

main a:hover {
    color: rgb(242, 155, 26);
}

/* Paragraph */
main > p {
    margin-left: 30px;
}

main > p > a {
    text-decoration: underline;
}

/* Header h3 */
main h3 {
    display: inline;
    margin-left: 40px;

    font-weight: bold;
    font-size: 13px;
    color: whitesmoke;
}

main h3 a {
    text-decoration: underline;
    color: #ccc;
}

/* Table */
main table {
    width: min(97%, 97vw - 326px);
    margin: 10px auto 15px;
    text-align: center;
}

main table th {
    border: 1px solid #3f3f3f;
    padding: 4px;

    background-color: #6778b2;
    font-weight: bold;
    color: whitesmoke;
}

main table th a {
    display: inline-block;
    width: 100%;

    background-color: inherit;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    color: inherit;
}

main table td {
    position: relative;
    border: 1px solid #666666;
    padding-left: 4px;
    padding-right: 4px;
    transition: border-color 0.3s ease 0s;
}

main table td a {
    display: block;
    width: 100%;
    text-decoration: none;
    font-weight: normal;
    color: #ccc;
    transition: color 0.3s ease 0s;
}

main table td a:after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 0;
}

main table td label:after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 0;
}

main table td:hover {
    border-color: rgb(242, 155, 26);
}

main table td a:hover {
    color: rgb(242, 155, 26);
}

main table tr:nth-child(even) td {
    background-color: #282a31;
}

main table tr:nth-child(odd) td {
    background-color: #141416;
}

/* Table info */
main table.info {
    width: 30%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 15px;
    white-space: nowrap;
    text-align: left;
    background-color: unset;
}

main table.info tr td {
    border: 0 solid;
    padding: 0;
    background-color: unset;
}

/* Table list */
main table.list th {
    font-size: 13px;
}

main table.list th a {
    font-size: inherit;
    color: #f29b1a;
}

main table.list th a:hover {
    text-decoration: underline;
}

main table.list tr td {
    text-align: left;
}

main table.list tr td.picked {
    font-weight: bold;
}

/* Big list */
main div.big-list {
    width: 70%;
    min-width: fit-content;
    margin: auto;
}

main table.big-list {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    border-spacing: 0 10px;
    white-space: nowrap;
}

main table.big-list > caption {
    text-align: left;
    font-size: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
}

main table.big-list tr td {
    padding: 0;
    font-size: 13px;
    background-color: inherit;
}

main table.big-list td div.big-list-flex {
    display: flex;
    align-items: stretch;
    height: 45px;
}

main table.big-list td div.big-list-flex > div {
    display: flex;
    align-items: center;
    position: relative;
}

main table.big-list td div.big-list-flex div.name {
    flex-grow: 1;
}

main div.big-list div.modify > a {
    padding-left: 17px;
}

main table.big-list td a {
    padding: 5px 15px;
    color: white;
}

main table.big-list td a:hover {
    color: rgb(242, 155, 26);
}

main div.big-list > p {
    text-align: right;
    margin-right: 0;
    padding-right: 5px;
    font-size: 13px;
}

/* Manage school */
main div#manage-school {
    display: flex;
    margin: auto;
    width: min(calc(100vw - 50px), 1024px);
}

main h3.manage-school {
    display: block;
    text-align: center;
    font-size: 15px;
    margin-left: 0;
    margin-right: 0;
}

main div#manage-school table caption {
    color: white;
    font-weight: bold;
    font-size: 15px;
}

main div#manage-school > div {
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
}

main div#manage-school table tr td:hover {
    border-color: #666666;
}

main div#manage-school p {
    text-align: right;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 13px;
}

main div#manage-school p span.name {
    white-space: nowrap;
}

/* Icons */
main div.big-list div.delete, main div#manage-school div.delete,
main div.big-list div.modify, main div#manage-school div.modify,
main div.big-list div.manage, main div#manage-school div.manage {
    white-space: nowrap;
}

main div.big-list div.manage > a:before {
    display: inline-block;
    content: "⚙️";
    transform: scale(1.3) translate(-3px, 0px);
    color: gray;
}

main div.big-list div.modify > a:before {
    display: inline-block;
    content: "✎";
    transform: rotateZ(90deg) scale(1.3) translate(0.5px, 2px);
    color: yellow;
}

main div.big-list div.delete > a:before, main div#manage-school div.delete > a:before {
    display: inline-block;
    content: "❌";
    transform: translate(-2px, 0px);
    color: red;
}

main div.big-list p.create > a:before, main div#manage-school p.create > a:before {
    display: inline-block;
    content: "➕";
    color: transparent;
    text-shadow: 0 0 0 green;
    transform: scale(1.2) translate(-2px, 0px);
}

/* Score colors */
main table tbody tr td.color-green {
    background-color: #7ec65a;
}

main table tbody tr td.color-yellow {
    background-color: #fae94f;
}

main table tbody tr td.color-red {
    background-color: #e84a43;
}

main td.color-green a, main td.color-yellow a, main td.color-red a {
    color: black;
}

/* Submissions */
main table.list.submissions {
    max-width: calc(80vw - 20px);
    margin-left: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
}

main table.list.submissions tr td {
    text-align: center;
}

main table.list.submissions tr .tag {
    display: none;
}

/* Other lists */
main table.list.courses tr td:nth-child(2) {
    white-space: nowrap;
}

/* Student report */
main div.student-report {
    width: min(97%, 97vw - 326px);
    max-width: calc(80vw - 20px);
    min-width: fit-content;
    margin-left: 10px;
    padding-bottom: 10px;
}

main div.student-report table.student-report-lesson {
    width: 100%;
    margin-top: 5px;
    border-spacing: 1px;
}

main div.student-report table.student-report-lesson tr:nth-child(2) th a {
    background-color: inherit;
}

main div.student-report.full-course table tr a {
    font-size: 11px;
}

/* Submission page */
main > div.submission-page table.list.submissions {
    width: 604px;
    margin-left: 8px;
    white-space: nowrap;
}

main > div.submission-page table.list.submissions tr td:nth-child(1) {
    width: 40px;
}

main > div.submission-page table.list.submissions tr td:nth-child(2) {
    width: 100px;
}

main > div.submission-page table.list.submissions tr td:nth-child(3) {
    width: 200px;
}

main > div.submission-page table.list.submissions tr.picked td a {
    font-weight: bold;
}

main > div.submission-page > h3 {
    margin-left: 20px;
}

main div.highlight table.highlighttable {
    width: 600px;
    margin-left: 10px;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: left;
}

main div.highlight table.highlighttable td {
    position: unset;
}

main div.highlight table.highlighttable td:hover {
    border-color: #666666;
}

main div.highlight table.highlighttable td.linenos {
    width: 15px;
}

main div.highlight table.highlighttable td.code {
    padding-left: 5px;
}

main div.tests-results {
    width: 604px;
    margin-left: 8px;
}

main div.tests-results table.tests-results {
    width: 100%;
}

main div.compile-error pre {
    width: 300px;
    min-width: fit-content;
    padding: 15px 10px 0 5px;
    background-color: white;
    color: black;
}

main div.tests-results table.tests-results tr td.with-test-details {
    position: relative;
    cursor: default;
    text-decoration: underline;
    color: #ddd;
}

main div.tests-results table.tests-results tr td.with-test-details div.test-details {
    position: absolute;
    bottom: 10px;
    left: 100px;
    z-index: 1;
    padding: 10px 10px 10px 5px;
    max-width: calc(100vw - 600px);
    overflow: auto;
    visibility: hidden;
    border-radius: 15px;

    white-space: pre;
    font-size: 13px;
    font-family: monospace;
    background-color: white;
    color: black;
}

main div.tests-results table.tests-results tr:hover td.with-test-details div.test-details {
    visibility: visible;
}

main div.tests-results p {
    font-size: 13px;
    font-weight: bold;
}

/* Scoreboard */
main a.compress {
    margin-left: 50px;
    font-size: 13px;
    font-weight: bold;
}

main table.scoreboard {
    margin: 5px auto;
    text-align: center;
}

main table.scoreboard tr.first-header th {
    position: sticky;
    top: 0;
    z-index: 1;
}

main table.scoreboard tr.zero-header th {
    border: 0;
}

main table.scoreboard th {
    font-weight: bold;
    background-color: #6778b2;
    color: whitesmoke;
}

main table.scoreboard tr.zero-header th a {
    position: relative;
    bottom: 1px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    background-color: #6778b2;
    color: whitesmoke;
}

main table.scoreboard tr.first-header th a {
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    background-color: #6778b2;
    color: whitesmoke;
}

main table.scoreboard td {
    border: 1px solid #666666;
    white-space: nowrap;
}

main table.scoreboard td.worsened > a {
    color: red;
}

main table.scoreboard td > a {
    text-decoration: none;
    color: #ccc;
    font-weight: normal;
}

main table.scoreboard td:hover {
    border-color: rgb(242, 155, 26);
}

main table.scoreboard td > a:hover {
    color: rgb(242, 155, 26);
}

main > table.scoreboard > tbody > tr > th.separator,
main > table.scoreboard > tbody > tr > td.separator {
    width: 3px;
    max-width: 3px;
    border: 0 solid white;
    padding: 0;
    background-color: black;
}

main table.scoreboard tr.zero-header th:nth-child(-n+2) , main table.scoreboard tr.zero-header th:last-child {
    visibility: hidden;
}

main table.scoreboard tr td.student_name {
    text-align: left;
    /*position: sticky;
    left: 0px;
    background-image: linear-gradient(90deg, rgba(51,51,51,0.5) 0%, rgba(51,51,51,0.5) 100%);*/
}

main table.scoreboard tr td.student_name a {
    font-weight: bold;
}

main table.scoreboard tr > td:last-child {
    font-weight: bold;
}

main table.scoreboard tr.summary-row {
    display: none;
    font-weight: bold;
    font-size: 9px;
}

/* Login */
main div.login, main table.login {
    width: 400px;
    min-width: min-content;
    margin-left: auto;
    margin-right: auto;
}

main div.login table.login tr td:hover {
    border-color: #666666;
}

main div.login h3 {
    display: block;
    margin: 0;
    text-align: center;
    font-size: 15px;
}

main div.login p.back {
    margin-top: 0;
    margin-bottom: 0;
}

main div.login p.back a {
    text-decoration: none;
}

main table.login tr td:nth-child(1) {
    white-space: nowrap;
}

main table.login td input[type=text], main table.login td input[type=password] {
    width: calc(100% - 10px);
}

main table.login td input[type=submit] {
    cursor: pointer;
    margin: 3px;
}

main p.login-error {
    margin-left: unset;
    text-align: center;
    color: red;
}

/* Add students */
main div.add-students.login, main div.add-students.login table.login {
    width: 700px;
}

main div.add-students.login table.login tr td:nth-child(1):hover {
    border-color: rgb(242, 155, 26);
}

/* Pagination */
main p.pagination a {
    font-weight: normal;
}

main p.pagination a.picked {
    text-shadow: 1px 0px 0px white;
}