/*
-------------------------------------------------------------------------------------------------

    Stylesheet imported in base.html

-------------------------------------------------------------------------------------------------
*/

/*
-------------------------------------------------------------------------------------------------
    Color-Definitions

    background-color -> bcolor
    font-color -> fcolor

    calculate filters for colors with https://angel-rs.github.io/css-color-filter-generator/
-------------------------------------------------------------------------------------------------
*/
:root {
    --body-bcolor: #ccc;
    --body-fcolor: #111;
    --body-wrapper-bcolor: #f4f5f6;
    --body-wrapper-fcolor: #111;
    --header-bcolor: #fff;
    --header-fcolor: #333;
    --footer-bcolor: #fff;
    --footer-fcolor: #333;


    --link-fcolor: #9e2438;
    --link-fcolor-filter: brightness(0) saturate(100%) invert(16%) sepia(94%) saturate(2137%) hue-rotate(332deg) brightness(94%) contrast(90%);
    --link-fcolor-action: #9e2438;
    --link-fcolor-action-filter: brightness(0) saturate(100%) invert(16%) sepia(94%) saturate(2137%) hue-rotate(332deg) brightness(94%) contrast(90%);
    --btn-bcolor: ;
    --btn-fcolor: ;
    --btn-bcolor-action: ;
    --btn-fcolor-action: ;
    --btn-primary-bcolor: #1c418a;
    --btn-primary-fcolor: #fff;
    --btn-primary-bcolor-action: #9e2438;
    --btn-primary-fcolor-action: #fff;
    --btn-secondary-bcolor: transparent;
    --btn-secondary-fcolor: #1c418a;
    --btn-secondary-bcolor-action: #1c418a;
    --btn-secondary-fcolor-action: #fff;
    --btn-warning-bcolor: ;
    --btn-warning-fcolor: ;
    --btn-warning-bcolor-action: ;
    --btn-warning-fcolor-action: ;

    --input-bcolor: #fff;
    --input-fcolor: #111;
    --input-border-color: #ccc;
    --input-border-color-filter: invert(80%);
    --input-border-color-action: #1c418a;
    --input-shadow-color-focus: #1c418a55;
    --input-border-color-invalid: #9e2438;
    --input-border-color-action-invalid: #9e2438;
    --input-shadow-color-focus-invalid: #9e243855;

    --label-fcolor: #111;
    --helptext-bcolor: #ddd;
    --helptext-fcolor: #111;
    

    --dropdown-bcolor: #fff;
    --dropdown-fcolor: #111;
    --dropdown-bcolor-active: #1c418a;
    --dropdown-fcolor-active: #fff;
    --dropdown-shadow-color: #999;

    --errorlist-bcolor: #f88;
    --errorlist-fcolor: #111;

    --messages-bcolor: #ddd;
    --messages-fcolor: #111;
    --messages-success-bcolor: #87d25c;
    --messages-warning-bcolor: #ffcb00;
    --messages-error-bcolor: #f06b6b;

    --table-header-bcolor: #1c418a;
    --table-header-fcolor: #fff;
    --table-even-bcolor: #f4f5f6;
    --table-odd-bcolor: #fff;
    --table-divider-color: #ddd;

    --nav-main-hover-bcolor: #1c418a;
    --nav-main-hover-fcolor: #fff;
}

/*
-------------------------------------------------------------------------------------------------
    
    General elements

-------------------------------------------------------------------------------------------------
*/

/*
-------------------------------------------------------------------------------------------------
    basic stuff
-------------------------------------------------------------------------------------------------
*/ 

/* basic classes */

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

/* headlines */

h1, h2 {
    margin: 1.25rem 0;
    line-height: 1.2;
}

h3, h4, h5 {
    margin: 0 0 .5rem 0;
    line-height: 1.2;
}

h1 {
    font-size: 2rem;
    font-weight: 600;
}

h2 {
    font-size: 1.6rem;
    font-weight: 600;
}

h3 {
    font-size: 1.4rem;
    font-weight: 600;
}

h4 {
    font-size: 1.2rem;
    font-weight: 600;
}

h5 {
    font-size: 1.1rem;
}

/*
-------------------------------------------------------------------------------------------------
    Hyperlinks
-------------------------------------------------------------------------------------------------
*/ 

a, a:visited {
    color: var(--link-fcolor);
    text-decoration: none;
    font-weight: 500;
}

a:hover, a:focus {
    color: var(--link-fcolor-action);
    text-decoration: underline;
}

/* class thicken -> link will get bolder on hover */

a.thicken::after {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    content: attr(title);
    font-weight: 600;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

a.thicken:hover, a.thicken:focus {
    font-weight: 600;
    text-decoration: none;
}

/*
-------------------------------------------------------------------------------------------------
    Buttons
-------------------------------------------------------------------------------------------------
*/ 
/* There are four types of buttons: standard, primary, secondary and warning */
/* All buttons need the standard class */

.btn, .btn:visited {
    display: block;
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;

    margin: 1rem 0 1rem 0;
    border: 0;
    padding: .5rem 1rem;

    background-color: var(--btn-bcolor);
    color: var(--btn-fcolor);

    font-size: 1rem;
    font-weight: normal;
    text-decoration: none;

    white-space: normal;
}

.btn.btn-inline-block {
    display: inline-block;
    padding: .1rem 1rem .2rem 1rem;
    margin: 0 .25rem;
}
.btn.btn-right {
    float: right;
}

.btn:focus, .btn:hover {
    background-color: var(--btn-bcolor-action);
    color: var(--btn-fcolor-action);

    cursor: pointer;

    text-decoration: none;
}

.btn.btn-primary, .btn.btn-primary:visited {
    background-color: var(--btn-primary-bcolor);
    color: var(--btn-primary-fcolor);
}

.btn.btn-primary:focus, .btn.btn-primary:hover {
    background-color: var(--btn-primary-bcolor-action);
    color: var(--btn-primary-fcolor-action);
}

.btn.btn-secondary, .btn.btn-secondary:visited {
    border-radius: .75rem;

    background-color: var(--btn-secondary-bcolor);
    color: var(--btn-secondary-fcolor);

    font-weight: 600;
}

.btn.btn.btn-secondary.selected, .btn-secondary:focus, .btn.btn-secondary:hover {
    background-color: var(--btn-secondary-bcolor-action);
    color: var(--btn-secondary-fcolor-action);
}

.btn.btn-warning, .btn.btn-warning:visited {
    background-color: var(--btn-warning-bcolor);
    color: var(--btn-warning-fcolor);
}

.btn.btn-warning:focus, .btn.btn-warning:hover {
    background-color: var(--btn-warning-bcolor-action);
    color: var(--btn-warning-fcolor-action);
}

/*
-------------------------------------------------------------------------------------------------
    Forms and co
-------------------------------------------------------------------------------------------------
*/ 

input {
    text-decoration: none;
    font-size: 1rem;

    box-shadow: none;
    text-shadow: none;
    outline: none;

    font-family: inherit;
}

/* text fields */

input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    display: block;

    width: 100%;
    max-width: 500px;
    box-sizing: border-box;

    margin: .25rem 0 .5rem 0;
    padding: .5rem .75rem;

    border: 1px solid var(--input-border-color);
    border-radius: .2rem;

    background-color: var(--input-bcolor);
    color: var(--input-fcolor);

    font-family: inherit;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus,
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, select:hover {
    border: 1px solid var(--input-border-color-action);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus {
    box-shadow: 0 0 0 3px var(--input-shadow-color-focus);
}

input[type="text"]:invalid, input[type="email"]:invalid, input[type="password"]:invalid, input[type="number"]:invalid {
    border: 1px solid var(--input-border-color-invalid);
}

input[type="text"]:focus:invalid, input[type="email"]:focus:invalid, input[type="password"]:focus:invalid, input[type="number"]:focus:invalid,
input[type="text"]:hover:invalid, input[type="email"]:hover:invalid, input[type="password"]:hover:invalid, input[type="number"]:hover:invalid {
    border: 1px solid var(--input-border-color-action-invalid);
}

input[type="text"]:focus:invalid, input[type="email"]:focus:invalid, input[type="password"]:focus:invalid, input[type="number"]:focus:invalid {
    box-shadow: 0 0 0 3px var(--input-shadow-color-focus-invalid);
}

/* remove spinner crap from number field */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

/* checkbox -> before is switch, after is background border*/

input[type="checkbox"] {
    display: inline-block;
    -webkit-appearance: none;
    position: relative;

    width: 2.1rem;
    height: 1.4rem;

    margin: .25rem .5rem;
    border: none;
    padding: 0;

    vertical-align: middle;
}

input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    background-image: url(../icons/switch_modern_background.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    filter: var(--input-border-color-filter);
}

input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    background-image: url(../icons/switch_modern_left.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    filter: var(--input-border-color-filter);
}

input[type="checkbox"]:checked::before {
    background-image: url(../icons/switch_modern_right.svg);

    filter: var(--link-fcolor-filter);
}

/* special styling of select fields */
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: 1rem;
}

select::-ms-expand {
    display: none;
}

select option{
    background-color: var(--input-bcolor);
    color: var(--input-fcolor);
}

/* labels */

label {
    color: var(--label-fcolor);
}

/* styling of helptext */
span.helptext {
    display: block;

    max-width: 500px;
    box-sizing: border-box;

    margin: 0 0 .75rem 0;
    border: 0 solid var(--helptext-bcolor);
    border-radius: .2rem;
    padding: .5rem 1rem;

    background-color: var(--helptext-bcolor);
    color: var(--helptext-fcolor);
}

/* styling of errorlist */

ul.errorlist {
    display: block;

    margin: 1rem 0;
    border: 0;
    padding: 1rem 1.5rem;

    background-color: var(--errorlist-bcolor);
    color: var(--errorlist-fcolor);
    list-style-type: none;
}

ul.errorlist > li {
    display: block;
    
    margin: 0;
    border: 0;
    padding: .25rem 0;
}

/* How-to sections */
div.how-to {
    display: block;

    margin: 1rem 0;
    padding: 1rem 1.5rem;

    background-color: var(--helptext-bcolor);
    color: var(--helptext-fcolor);
}

/*
-------------------------------------------------------------------------------------------------
    Styling of Drop-Downs
-------------------------------------------------------------------------------------------------
*/ 

div.drop-down {
    display: none;
    min-width: 150px;

    background-color: var(--dropdown-bcolor);
    box-shadow: 0 5px 15px var(--dropdown-shadow-color);

    color: var(--dropdown-fcolor);
    font-size: 1rem;
    position: relative;
}

div.drop-down.active {
    display: block;
}

div.drop-down .drop-down-element, div.drop-down .drop-down-element:visited {
    display: block;
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    border: 0;
    padding: .5rem 1rem;

    color: var(--dropdown-fcolor);
    text-decoration: none;
    outline: none;
    white-space: nowrap;
}


div.drop-down .drop-down-element:focus, div.drop-down .drop-down-element:hover {
    background-color: var(--dropdown-bcolor-active);
    color: var(--dropdown-fcolor-active);
}

/*
-------------------------------------------------------------------------------------------------
    Tables
-------------------------------------------------------------------------------------------------
*/

/* general stuff */

table{
    margin: 1rem 0 2rem 0;
}

.table-container {
    margin: 1rem 0 2rem 0;
    overflow-x: scroll;
}

.table-container > table {
    margin: 0;
}

.table-striped {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.table-striped tr {
    display: flex;
}

.table-striped thead tr {
    color: #ffffff;
}

.table-striped th, .table-striped td {
    flex: 1;
    padding: 0.7em 1em;
    align-content: center;
}

/* striped table */
.table-striped th {
    background-color: var(--table-header-bcolor);
    color : var(--table-header-fcolor);
}

.table-striped tr {
    background-color: var(--table-odd-bcolor);
    border-bottom: 1px solid var(--table-divider-color);
}

.table-striped tr:nth-of-type(even) {
    background-color: var(--table-even-bcolor);
}

.table-striped tbody tr:last-of-type {
    border-bottom: 2px solid var(--table-header-bcolor);
}

/*
-------------------------------------------------------------------------------------------------
    
    Static parts of the website

-------------------------------------------------------------------------------------------------
*/ 

/*
-------------------------------------------------------------------------------------------------
    Body/Header/Footer
-------------------------------------------------------------------------------------------------
*/
body {
    display: flex;
    flex-direction: column;

    min-height: 100vh;
    width: auto;

    margin: 0;
    border: 0;
    padding: 0;

    background-color: var(--body-bcolor);
    color: var(--body-fcolor);

    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

div#body-wrapper {
    display: block;
    flex: 1;

    width: calc(100% - 10rem);
    box-sizing: border-box;

    margin: 0 auto;
    border: 0;
    padding: 2rem 3rem;

    background-color: var(--body-wrapper-bcolor);
    color: var(--body-wrapper-fcolor);

}

@media (max-width: 1000px){
    div#body-wrapper {
        width: calc(100% - 5rem);
    }
}

@media (max-width: 500px){
    div#body-wrapper {
        width: calc(100% - 2.5rem);
        padding: 2rem;
    }
}
@media (max-width: 1000px){
    header#mainheader {
        padding: 16px 20px;
    }
}

/* Header */

header#mainheader {
    padding: 0;
    margin: 0;
    background-color: var(--header-bcolor);
    color: var(--header-fcolor);

    font-size: 1.5rem;

    display: flex;
}


/* Footer */
footer#mainfooter {
    display: flex;
    flex-direction: row;

    padding: 1.5rem 2.5rem;

    background-color: var(--footer-bcolor);
    color: var(--footer-fcolor);
}

footer#mainfooter > div {
    padding: 0rem 1rem;
}

div#right-footer{
    display: flex;
    flex-direction: row;
    margin: 0 0 0 auto;
}

footer#mainfooter a, footer#mainfooter > a:visited {
    color: var(--footer-fcolor);
}

footer#mainfooter a:focus, footer#mainfooter > a:hover {
    color: var(--footer-fcolor);
}

/*
-------------------------------------------------------------------------------------------------
    main navigation
-------------------------------------------------------------------------------------------------
*/

header#mainheader div#nav-main {
    display: flex;
    
    height: 76px;
    max-width: calc(100% - 4.5rem - 30px);
    padding: 0 1rem;
    margin: 0 auto 0 0;

    background-color: var(--header-bcolor);
}

div#nav-main > div.drop-down {
    display: flex;

    min-width: unset;
    background-color: inherit;
    box-shadow: unset;
    color: initial;
    font-size: inherit;
    position: unset;
}

div#nav-main .nav-main-element {
    display: block;
    padding: 1.25rem 1rem;
}

div#nav-main a.nav-main-element, div#nav-main a.nav-main-element:visited{
    display: block;

    color: var(--header-fcolor);
    text-decoration: none;
    font-weight: 500;
}

div#nav-main a.nav-main-element:hover, div#nav-main a.nav-main-element:focus{
    color: var(--nav-main-hover-fcolor);
    text-decoration: none;
    background-color: var(--nav-main-hover-bcolor);
}


/* Styling of logo at the left */
a#nav-main-logo {
    display: block;
    
    width: 8rem;
    height: 100%;

    margin: 0 1rem;
    
    background-image: url("../serveronly/Logo.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


/* Styling of menu drop-downs */

div.nav-drop-down {
    display: block;
    position: relative;
}

div.nav-drop-down .toggle {
    cursor: pointer;
}

div.nav-drop-down .drop-down {
    position: absolute;
    left: 0;
}


/* user menu */
div#nav-user {
    display: block;
    position: relative;

    padding: 0;
    margin: auto 1rem auto 0;
}

div#nav-user-drop-down {
    position: absolute;
    top: 58px;
    right: 0px;
}



/* user menu toggle */
a#nav-user-toggle, a#nav-user-toggle:visited {
    display: block;

    width: 2.5rem;
    height: 2.5rem;

    margin: auto 1rem;

    background-image: url("../icons/user_logged_out.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.7;

    cursor: pointer;
}

a#nav-user-toggle.logged-in {
    background-image: url("../icons/user_logged_in.png");
}

a#nav-user-toggle:focus, a#nav-user-toggle:hover, a#nav-user-toggle.active {
    opacity: 1;
}

a#nav-user-toggle::after {
    display: inline-block;
    margin-left: 1.65em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid #333;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

a#nav-user-toggle.logged-in::after {
    border-top-color: #1c418a;
}

/* mobile burger menu */

a#nav-main-mobile-toggle {
    display: none;

    height: 40px;
    width: 40px;

    margin: auto 1rem auto 0;

    flex-shrink: 0;
    flex-grow: 0;

    border-width: 0;

    opacity: 0.7;
    background-image: url("../icons/menu-burger.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

a#nav-main-mobile-toggle:hover{
    opacity: 1;
}

a#nav-main-mobile-toggle.active{
    opacity: 0.9;
}

a#nav-main-mobile-toggle:focus{
    outline: 0;
}

@media (max-width: 940px) {
    a#nav-main-mobile-toggle {
        display: block;
    }

    div#nav-main .drop-down {
        position: unset;
        top: unset;
        left: unset;
        margin-left: 2rem;
        box-shadow: unset;
    }

    div#nav-main > div.drop-down {
        display: none;

        position: absolute;
        top: 76px;
        left: 0px;

        width: 100vw;

        margin: 0;

        flex-shrink: 0;
        flex-grow: 0;

        background-color: var(--header-bcolor);
        box-shadow: unset;
        
        color: var(--header-fcolor);
        font-size: 1rem;
    }

    div#nav-main div.drop-down.active {
        display: block;
    }
}

/* Go Back in upper right corner */
p.nav-go-back {
    float: right;
    margin-left: 1rem;
}

@media (max-width: 600px) {
    p.nav-go-back {
        float: none;
        display: block;
        margin-left: 0;
    }
}

/*
-------------------------------------------------------------------------------------------------
    messages implementation
-------------------------------------------------------------------------------------------------
*/

ul.messages {
    display: block;

    margin: 0 0 1rem 0;
    border: 0;
    padding: 0;

    color: var(--messages-fcolor);
    list-style-type: none;
}

ul.messages > li {
    display: block;
    
    margin: 0;
    border: 0;
    padding: .5rem 1rem;

    background-color: var(--messages-bcolor);
    font-weight: 600;
}

ul.messages > li.success {
    background-color: var(--messages-success-bcolor);
}

ul.messages > li.warning {
    background-color: var(--messages-warning-bcolor);
}

ul.messages > li.error {
    background-color: var(--messages-error-bcolor);
}


/*
-------------------------------------------------------------------------------------------------
    
    special stuff for special views

-------------------------------------------------------------------------------------------------
*/

/*
-------------------------------------------------------------------------------------------------
    slot display
-------------------------------------------------------------------------------------------------
*/

div.moderation-overview-container {
    display: flex;
    flex-wrap: wrap;
}

div.moderation-venue-card {
    min-width: 16rem;
    flex: 1;

    margin: 1rem .75rem;
}

div.moderation-venue-card h4, div.moderation-venue-card h5 {
    text-align: center;
}


div.moderation-slot {
    display: block;

    margin: 1rem 0;
    padding: 1rem;
    border-radius: 1rem;
    box-sizing: border-box;
}

div.moderation-slot p {
    margin: .25rem 0;
}

div.moderation-slot p.reschedule a {
    margin-bottom: 0;
}

div.moderation-slot-unassigned {
    background-color: #9e2438bb;
}

div.moderation-slot-1 {
    background-color: #7c7b;
}

div.moderation-slot-2 {
    background-color: #EF7F1Abb;
}

div.moderation-slot-3 {
    background-color: #1c418abb;
}

div.moderation-slot-4 {
    background-color: #9e2438bb;
}

@media (max-width: 370px) {
    div.moderation-slot p b {
        display: block;
    }

    div.moderation-venue-card {
        min-width: unset;
    }
}

/*
-------------------------------------------------------------------------------------------------
    grade table
-------------------------------------------------------------------------------------------------
*/

div#table-container {
    position: relative;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
    display: block;
}

table#grade-table {
    margin: 0;
    padding: 0;
}

table#grade-table tr {
    display: table-row;
}

table#grade-table th, table#grade-table td {
    white-space: nowrap;
    text-align: center;
}

table#grade-table thead tr:nth-child(3) th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}

table#grade-table thead tr:nth-child(1) th:first-child,
table#grade-table thead tr:nth-child(2) th:first-child,
table#grade-table thead tr:nth-child(3) th:first-child {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
}


table#grade-table td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;

    text-align: left;
    background-color: inherit;
}

table#grade-table td span.decrease {
    color: #900;
}

table#grade-table td span.increase {
    color: #060;
}

table#grade-table td.sum span {
    font-weight: 700;
}

table#grade-table td.student {
    font-weight: 700;
}

/* styling of submission spacer */
table#grade-table td.submission-spacer,
table#grade-table th.submission-spacer {
    background-color: var(--table-divider-color);
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

table#grade-table td.submission-spacer.submission,
table#grade-table td.submission-spacer.no-submission,
table#grade-table td.submission-spacer.pending-submission {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

table#grade-table td.submission-spacer.submission a.submission-link {
    display: block;
    width: 1.8rem;
    height: 1.8rem;

    margin: 0 auto;

    background-image: url("../icons/document.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    filter: var(--link-fcolor-filter);
}

table#grade-table td.submission-spacer.pending-submission > span {
    display: block;
    width: 1.5rem;
    height: 1.5rem;

    margin: 0 auto;

    background-image: url("../icons/hourglass.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    opacity: 0.7;
}

table#grade-table td.submission-spacer.no-submission > span {
    display: block;
    width: 1.8rem;
    height: 1.8rem;

    margin: 0 auto;

    background-image: url("../icons/no_document_black.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    opacity: 0.7;
}


/*
--------------------------------------------------------------------------------------------------
    styling of the student grade table
--------------------------------------------------------------------------------------------------
*/

table.student-grade-table tr.problem th {
    background-color: var(--table-divider-color);
    color: var(--body-fcolor);
}

table.student-grade-table th span,
table.student-grade-table td span{
    display: block;
}

table.student-grade-table tr th:nth-child(2),
table.student-grade-table tr td:nth-child(2),
table.student-grade-table tr th:nth-child(3),
table.student-grade-table tr td:nth-child(3) {
    max-width: 4rem;
}
table.student-grade-table tr th:nth-child(2),
table.student-grade-table tr td:nth-child(2) {
    text-align: right;
}
table.student-grade-table tr th:nth-child(3),
table.student-grade-table tr td:nth-child(3) {
    text-align: left;

}

/* 
--------------------------------------------------------------------------------------------------
    popup grade change form
--------------------------------------------------------------------------------------------------
*/

div#screencrasher {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 10000000;
    opacity: 0.5;
    background-color: #000;
}

div#popup-container {
    display: none;
    overflow: auto;

    position: fixed;
    top: 75px;
    right: 15%;
    z-index: 10000001;

    width: 70%;
    max-height: calc(100% - 150px);
    box-sizing: border-box;

    border-radius: .5rem;

    padding: 2rem 2rem;

    background-color: #fff;
}

@media (max-width: 650px) {
    div#popup-container {
        top: 75px;
        right: 0;
        width: 100%;
        max-height: calc(100% - 75px);
    }
}

div#popup-container table.grade-edit-table {
    width: 100%;
    margin-bottom: 0;
}

div#popup-container table.grade-edit-table input {
    max-width: none;
    min-width: 75px;
}

div#popup-container table.grade-edit-table input[type="number"] {
    text-align: right;
}

div#popup-container table.grade-edit-table h5 {
    margin: 0;
}

div#popup-container table.grade-edit-table div.change-log-spacer {
    margin-bottom: 1.5rem;
}

/* 
--------------------------------------------------------------------------------------------------
    event list on welcome page
--------------------------------------------------------------------------------------------------
*/
div.event-list-item {
    display: block;
    background-color: var(--body-bcolor);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;;
    clear: both;
    overflow: hidden;
}

div.event-list-item p {
    margin: 0;
}

div.event-list-item a.btn.btn-primary {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

div.event-list-item p.public-request {
    padding-top: 0.01rem;
    clear: both;
}

@media (min-width: 800px) {
    div.event-list-item div p {
        float: left;
    }
    div.event-list-item a.btn.btn-primary.schedule {
        float: right;
    }
    div.event-list-item div a.btn.btn-primary.schedule {
        margin-top: 0;
    }
}