@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/google/Roboto/Roboto-Light.ttf');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/google/Roboto/Roboto-Regular.ttf');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/google/Roboto/Roboto-Medium.ttf');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/google/Roboto/Roboto-Bold.ttf');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/google/Roboto/Roboto-Black.ttf');
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/google/Roboto_Mono/RobotoMono-Light.ttf');
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/google/Roboto_Mono/RobotoMono-Regular.ttf');
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/google/Roboto_Mono/RobotoMono-Medium.ttf');
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/google/Roboto_Mono/RobotoMono-Bold.ttf');
}

@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/google/Roboto_Slab/RobotoSlab-Thin.ttf');
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/google/Roboto_Slab/RobotoSlab-Light.ttf');
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/google/Roboto_Slab/RobotoSlab-Regular.ttf');
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/google/Roboto_Slab/RobotoSlab-Bold.ttf');
}


body {
    overflow-y: scroll;
    font-family: 'Roboto', sans-serif;
}

#top {
    width: 100%;
}
#top h1 {
    width: 100%;
    text-align: center;
    color: black;
    
}

/* #logout { */
/*     position: fixed; */
/*     top: 1rem; */
/*     right: 1rem; */
/*     padding: 0.7rem; */
/*     background-color: rgb(153,153,153); */
/*     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);      */
/* } */

#next:link,
#next:visited,
#next:active,
#next:hover,
#prev:link,
#prev:visited,
#prev:active,
#prev:hover {
    color: rgb(153,0,0);
    text-decoration: none;
    font-weight: bold;
    float:right;
    outline : none;
    outline: 0;
}

#next, #prev {
/* text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */
}

#next:hover, #prev:hover {
    /* text-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); */
}

#next:active, #prev:active {
    /* text-shadow: 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
}

#week {
    display: inline-block;
    margin: 0px 1rem;
    font-weight: bold;
    float:right;
}
#shiftweek {
    margin: 0 auto;
}

#menu {
    width: 100%;
    height: 3rem;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background: white;
    z-index: 1000;
    line-height: 2.5rem;
    vertical-align: bottom;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}
#menu a {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;    
}

#menu a:link,
#menu a:visited,
#menu a:active,
#menu a:hover {
    color: rgb(0,0,0);
    font-weight: bold;
    text-decoration: none;
    outline : none;
}
#menu a:hover {
    text-decoration: underline;
}

.login div p {
    text-align: center;
}
.login input {
    margin: 0 auto;
    display: block;
}
#loginStatus {
    color: rgb(153,0,0);
    text-align:center;
}

#list {
    margin: 3rem auto;
    list-style: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: grid;
    grid-gap: 0px;
    grid-auto-flow: col dense;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0,0,0,0.1);
    z-index: 0;
    background-color: transparent;
}


textarea.task {
    width:calc(100% - 0.4rem);
    height:calc(100% - 0.4rem);
    text-align: center;
    cursor: move;
    border-radius: 0.5rem;
    border-color: grey;
    border-width: 1px;
    border-style: solid;
    z-index: 10;
    padding: 0.3rem;
    margin: 0.2rem;
    box-sizing: border-box;
    position:relative;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    overflow: hidden;
    font-weight: bold;
    resize: none;
    font-family: inherit;
    font-size: inherit;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
textarea.task p {
    margin: 0;
    height: 100%;
}

div.gridcell {
    width:100%;
    height:100%;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0,0,0,0.4);
    background-color: white;
    z-index: -1;
}

div.gridcell:before {
    display: inline-block;
    content: attr(data-content);
    position: relative;
    left: -5.5rem;
    text-align: right;
    vertical-align: top;
    width: 5rem;
}

div.headline {
    z-index: 1;
    width:100%;
    height:1rem;
    text-align: center;
    position: relative;
    display: inline-block;
}

[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
}

.default {
    background-color: rgb(230,230,230);
}
.writing {
    background-color: rgb(51,102,204);
}
.developing{
    background-color: rgb(153,0,0);
}
.meeting{
    background-color: rgb(255,153,0);
}
.deadline {
    background-color: black;
    color: white;
}

.hidden {
    display: none;
}
#context {
    margin: 0.2rem;
    padding: 0.5rem;
    position: absolute;
    list-style: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 0.5rem;
    border-color: grey;
    border-width: 1px;
    border-style: solid;
    background-color: white;
    z-index: 100;
    cursor: context-menu;
}
#context li {
    margin: 0.5rem;
    padding: 0.1rem;
    cursor: pointer;
}
#context li div {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    display: inline-block;
    position: relative;
}

#context li p {
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

#papertop {
    padding: 0.5rem;
    margin: 1rem auto;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background-color: white;
}
.paper {
    padding: 0.5rem;
    margin: 1rem auto;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background-color: white;
    border-radius: 0.2rem;
}

input {
    outline : none;
}

.paper_journal {
    font-style: italic;
}

.paper_date {
    background:rgba(0,0,0,0);
    border: none;
    margin: 1em 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    color: black;
}

.ticket, .repo {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 0.2rem;
    width: 50rem;
    margin: 1rem auto;
    padding: 1rem;
    overflow:hidden;
    user-select: none;
    -moz-user-select: none;
    cursor: pointer;
    position: relative;
}

#modal_list {
    width: 55rem;
    margin: 1rem auto;
}
.ticket_show {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 0.2rem;
    width: 55rem;
    margin: 1rem auto;
    padding: 1rem;
    background-color: white;
    position: relative;
    box-sizing: border-box;
}

.ticket_title, .repo_name {
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0;
    margin-bottom: 0.5rem;
}

.ticket_content p, .repo_description p {
    display: inline-block;
    font-size: 0.9rem;
    padding: 0;
    margin: 0;
    line-height: 1.5rem;
}

.ticket_content p:nth-child(1) {
    width: 20%;    
}
.ticket_content p:nth-child(2) {
    width: 50%;
}
.ticket_content p:nth-child(3) {
    width: 30%;
    text-align: right;
    font-size: 1.5rem;
}

.repo_description p:nth-child(1){
    width: 100%;
    border: none;
    font-family: 'Roboto Slab', serif;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    cursor: inherit;
}

.repo_description p:nth-child(3), .repo_description p:nth-child(4){
    width: 100%;
    border: none;
    font-family: 'Roboto Slab', serif;
    font-size: 0.8rem;
    cursor: inherit;
				  }

.repo_description p:nth-child(3){
    margin-bottom: 0.5rem;
}

.repo_description input:nth-child(4), .repo_description input:nth-child(5){
    width: 50%;
    font-size: 0.6rem;
    border-left: none;
    border-bottom: none;
    border-right: none;
    border-top: solid grey 1px;
    font-family: 'Roboto Slab', serif;
    cursor: copy;
}
.repo_description input:nth-child(5) {
    text-align: right;
}

.repo_description p:nth-child(2) {
    width: 2rem;
    font-size: 2rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
}



.ticketCreate, .repoCreate {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 0.2rem;
    width: 50rem;
    margin: 0 auto;
    padding: 1rem;
    overflow:hidden;
}

.ticketSearch, .repoSearch {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 0.2rem;
    width: 50rem;
    margin: 1rem auto;
    padding: 1rem;
    overflow:hidden;
}

.ticketCreate input, .ticketSearch .input, .repoCreate input, .repoSearch .input {
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid rgb(153,153,153);
    background: white;
    color: black;
   font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    padding: 0.2rem;
    border-radius: 0.2rem;
}

.ticketCreate div, .repoCreate div {
 width: 100%;
 margin-bottom: 1rem;
}

#ticket_date {
    width: 10rem;
    margin: 0;
    margin-left: 1rem;
    border: none; /* 0px solid black; */
    background: white;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: normal;
}

.ticketCreate textarea, .modal textarea, .repoCreate textarea {
    width: 100%;
    height: auto;
    border: 1px solid rgb(153,153,153);
    background: white;
    color: black;
   font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    padding: 0.2rem;
    overflow: hidden;
    border-radius: 0.2rem;
    resize: none;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.modal p, .modal label, .modal input {
    margin-bottom: 1rem;
}

.login input {
    width: 20rem;
    margin-bottom: 1rem;
    border: 1px solid rgb(153,153,153);
    background: white;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    padding: 0.2rem;
    border-radius: 0.2rem;
}

button {
    margin: 0 auto;
    display: block;
    border: 1px solid rgb(153,153,153);
    background: white;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    padding: 0.5rem;
    border-radius: 0.2rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    outline: 0;
}

button:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    outline: 0;
}

button:active {
    box-shadow: 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    outline: 0;
}

button:focus {
    outline: 0;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(153,153,153,0.9);
    z-index: 1000;
    overflow-y: scroll;
}

.modal .ticket_closed {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    border: 3px solid black;
    cursor: pointer;
}

.modal .ticket_closed p {
    margin: 0;
    padding: 0;
    margin: 0 auto;
    font-size: 1.8rem;
    width: 2rem;
    text-align: center;
}

.modal .comment_date {
    font-size: 0.8rem;
    margin: 0;
    color: rgb(153,153,153);
    text-align: right;
    width: 100%;
}