* {
    margin: 0;
    padding: 0;
}

.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }

body {
    background-color: white;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11pt;
}

input, select, option {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11pt;    
}

select, option {
    height: 90%;
}

a {
    color: #9A1426;
    text-decoration: none;
    transition: text-shadow .2s;
}

a:visited {
    color: #9A1426;
}

a:hover {
    text-shadow: 0 0 .65px #9A1426, 0 0 .65px #9A1426;
    text-decoration: underline;
}

#header {


    display: flex;
    justify-content: space-between;

    background: linear-gradient(to bottom, rgb(240, 240, 240) 0%, white 100%);
    height: 91.367px;
    padding: 5px 10px 5px 5px;
    border-bottom: 2px solid #9A1426;

    img {
        align-self: center;
        margin-top: 5px;
        width: 252px;
        min-width: 252px;
    }

    
    div {
        text-align: center;
        align-self: center;
        min-width: 470px;

        h1 {
            font-size: 30pt;
            font-weight: bold;
            margin-top: 13px;
        }

        nav {
            ul {
                list-style-type: none;
            }

            li {
                display: inline-block;
                margin-right: 5px;
                padding: 0 10px 0 10px;
            }

            a {
                font-size: 11.5pt;
            }

            .logout a {
                margin-left: 50px;
            }
        }
    }

    

    section#updater_status {
        
        font-size: 85%;
        width: 252px;
        min-width: 252px;
        line-height: 100%;
        align-self: flex-end;

        span {
            font-weight: 600;
        }
    }
}


#content {
    min-height: 75vh;
    padding: 15px 15px 15px 15px;
    background: linear-gradient(to bottom, rgb(245, 245, 245) 0%, white 80px);
}

#content header {
    text-align: center;
}

table.overview, table.organizations, table.groups {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;

    th, td {
        border: 1px solid black;
        padding-left: 5px;
        padding-right: 5px;
    }

    td {
        vertical-align: top;
    }

    td.download {
        vertical-align: middle;
    }

    td.upload {
        vertical-align: middle;
        text-align: center;
    }

    tr:not(.header):hover {
        background-color: rgb(245, 245, 245);
    }
}

table.overview {
    th, td {
        font-family: monospace;
        font-size: 9pt;
    }

    td {
        cursor: default;
        user-select: none;
    }
}


table.organizations, table.groups {
    select {
        border: 0;
        background: none;
        display: none;
    }

    .select {
        min-width: 100px;
    }

    span {
        display: inline;
        padding-right: 40px;
    }



    tr:hover select {
        display: inline;
    }

    tr:hover span {
        display: none;
    }
}


table th.section_seperator, table td.section_seperator, table td.state_created.without_aat {
    border-left: 4px solid black;
}


table th.state_seperator, table td.state_seperator, table td.state_closed.without_aat {
    border-left: 3px solid black;
}

table th.aat_seperator, table td.aat_seperator {
    border-left: 2px solid black;
}

table td {
    white-space: nowrap;
}


.box {
    width: 750px;

    border-radius: 10px;

    margin-top: 15px;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;

    display: grid;

    gap: 8px;

    transition: outline-width .3s ease, scale .4s ease, filter .4s ease;
    filter: drop-shadow(rgb(220, 220, 220) 0px 0px);
    scale: 1;
}

.box.ticket {
    
    grid-template-areas:
        "id creator creator created"
        ". organization group ."
        "title title title title"
        "tasks tasks tasks tasks"
        "timetable timetable timetable timetable"
        "time owner owner closed";
    grid-template-columns: min-content auto auto min-content;
    

    background-color: rgba(255, 200, 200);
    outline: 2px solid rgb(200, 50, 50);

    

    input[type="date"] {
        visibility: hidden;
        width: 23px;
    }

    input[type="date"]::-webkit-inner-spin-button,
    input[type="date"]::-webkit-calendar-picker-indicator {
        margin:0;
    }
    input[type="date"]::-webkit-datetime-edit {
        display:none;
    }
}

.box.times_overview {

    grid-template-areas:
        "title title title title title"
        ". label_hours label_tickets label_creators details"
        "total_title total_hours total_tickets total_creators details"
        "with_aat_title with_aat_hours with_aat_tickets with_aat_creators details"
        "without_aat_title without_aat_hours without_aat_tickets without_aat_creators details"
        ". . . . details";
    grid-template-columns: min-content min-content min-content min-content auto ;

    background-color: rgb(247, 206, 158);
    outline: 2px solid rgb(100, 100, 100);
}

.box.times_overview div {
    white-space: nowrap;
    cursor: default;
}

.box.times_overview .title {
    grid-area: title;
    font-size: 150%;
    text-align: center;
    font-weight: bold;
}

.box.times_overview .label_hours {
    grid-area: label_hours;
    text-align: center;
}
.box.times_overview .label_tickets {
    grid-area: label_tickets;
    text-align: center;
}
.box.times_overview .label_creators {
    grid-area: label_creators;
    text-align: center;
}

.box.times_overview .total_title {
    grid-area: total_title;
    text-align: right;
    margin-left: 5px;
}

.box.times_overview .total_hours {
    grid-area: total_hours;
}
.box.times_overview .total_tickets {
    grid-area: total_tickets;
}
.box.times_overview .total_creators {
    grid-area: total_creators;
}
.box.times_overview .with_aat_title {
    grid-area: with_aat_title;
    text-align: right;
    margin-left: 5px;
}
.box.times_overview .with_aat_hours {
    grid-area: with_aat_hours;
}
.box.times_overview .with_aat_tickets {
    grid-area: with_aat_tickets;
}
.box.times_overview .with_aat_creators {
    grid-area: with_aat_creators;
}


.box.times_overview .without_aat_title {
    grid-area: without_aat_title;
    text-align: right;
    margin-left: 5px;
}
.box.times_overview .without_aat_hours {
    grid-area: without_aat_hours;
}
.box.times_overview .without_aat_tickets {
    grid-area: without_aat_tickets;
}
.box.times_overview .without_aat_creators {
    grid-area: without_aat_creators;
}

.box.times_overview .details {
    grid-area: details;
    background-color: rgb(250, 211, 149);
    /*
    max-height: 200px;
    overflow-y: scroll;
    */
    margin: 5px;
    padding: 0;
    --border-color: rgb(150, 150, 150);

    table {
        border-collapse: collapse;
        border: 0px solid black;
        width: 100%;

        tr:hover {
            background-color: rgb(255, 231, 179);
        }

        tr:first-child:hover {
            background-color: transparent;
        }

        th.sorted::after {
            position: absolute;
            margin-left: -0.5em;
            margin-top: 1px;
        }

        th.editor.sorted::after {
            content: " ⬇️";
        }
        th.editor:not(.sorted) {
            cursor: s-resize;
        }

        th.hours.sorted::after {
            content: " ⬆️";
        }
        th.hours:not(.sorted) {
            cursor: n-resize;
        }

        th.ticket_count.sorted::after {
            content: " ⬆️";
        }
        th.ticket_count:not(.sorted) {
            cursor: n-resize;
        }

        th.hours_ticketamt.sorted::after {
            content: " ⬆️";
        }
        th.hours_ticketamt:not(.sorted) {
            cursor: n-resize;
        }

        th {
            user-select: none;
            -webkit-user-select: none;
            position: relative;
        }

        td, th {
            padding-left: 5px;
            padding-right: 5px;
            border-left: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color)
        }

        td {
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        tr:last-child td {
            border-bottom: 0;
        }

        td:first-child, th:first-child {
            border-left: 0;
        }

        td:last-child, th:last-child {
            border-right: 0;

        }
        
    }
}


.box.ticket.closed {
    background-color: rgba(230, 255, 230);
    outline: 2px solid rgb(50, 200, 50);
}

.box:hover {
    outline-width: 3px;
    scale: 1.025;
    filter: drop-shadow(rgb(220, 220, 220) 5px 5px);
}

.box.ticket:hover {
    input[type="date"] {
        visibility: visible;
    }
}

.box div {
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    filter: drop-shadow(rgba(50, 50, 50, 0.2) 2px 2px);
    transition: filter 0.4s ease;
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

.box div.label {
    background-color: transparent;
}

.box:hover div {
    filter: drop-shadow(rgba(50, 50, 50, 0.2) 4px 4px);
}

.box.ticket .id {
    grid-area: id;
    text-align: center;
}

.box.ticket .creator {
    grid-area: creator;
}

.box.ticket .created {
    grid-area: created;
    text-align: right;
    white-space: nowrap;
}

.box.ticket .organization {
    grid-area: organization;
    text-align: left;
    white-space: nowrap;
}

.box.ticket .group {
    grid-area: group;
    text-align: left;
    white-space: nowrap;
}

.box.ticket .title {
    grid-area: title;
    text-align: left;
    font-weight: bold;
}

.box.ticket .tasks {
    grid-area: tasks;
    text-align: left;
}

.box.ticket .tasks ul {
    margin-left: 15px;
    list-style-type: disc;
    list-style-position: inside;
}

.box.ticket .timetable {
    grid-area: timetable;
    text-align: left;
}

.box.ticket .timetable table {
    margin-left: 15px;

    th {
        font-weight: normal;
        padding-right: 15px;
    }
    
}




.box.ticket .time {
    grid-area: time;
    text-align: left;
    white-space: nowrap;
}

.box.ticket .owner {
    grid-area: owner;
}

.box.ticket .closed {
    grid-area: closed;
    text-align: right;
    white-space: nowrap;
}

.box.ticket .state {
    grid-area: closed;
    text-align: center;
    white-space: nowrap;
}

#screen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background-color: rgba(0, 0, 0, 0.5);

    cursor: wait;
}

.remove-scrolling { 
  height: 100%; 
  overflow: hidden; 
} 


.center {
    text-align: center;
}


span.error {
    color: red;
}