html,
body {
    height: 100%;
    font-size: 100%;
}

body {
    background-color: #F6F6F6;
    font-size: 80%;
}

* {
    /*border: none !important;*/
}

body:not(.editing) .project-delete,
body:not(.editing) .task-delete-wrapper,
body:not(.editing) .detail-delete,
body:not(.editing) .project-close {
    display: none;
}

.project-close,
.project-delete {
    float: left;
}

.project-close * {
    text-transform: capitalize !important;
}

.project-data {
    display: inline-block;
    margin: 0;
    padding: 0;
    min-width: 360px;
}

.project-data a.visible {
    color: #006699;
}

.project-data-form {
    display: none;
    margin: 0;
    padding: 0;
    min-width: 360px;
}

body.editing .project-data {
    display: none;
}

body.editing .project-data-form {
    display: inline-block;
}

.visibility-hidden {
    visibility: hidden;
}

#projects-container {
    width: auto;
    height: auto;
}

@media (min-width: 960px) {
    .sidebar {
        position: fixed !important;
        height: 100%;
        z-index: 80;
        overflow: auto;
        /*resize: horizontal;*/
        border: 0 solid #CCCCCC;
    }

    .sidebar * {
        resize: none;
    }

    .sidebar:not(:hover) a {
        color: inherit !important;
        background-color: inherit !important;
        border-color: inherit !important;
    }

    .sidebar:not(:hover) .badge {
        background-color: #CCCCCC !important;
    }

    .sidebar:not(:hover) li.sorted a::before {
        background-color: #DDDDDD !important;
        border-right: 1px solid #CCCCCC !important;
    }

    #projects {
        right: 0;
        resize: none;
        width: 140px;
        padding: 0 0 2em 0;
        border-left-width: 1px;
    }

    #projects {
        /*float: left;*/
        /*height: 100vh;*/
    }

    #person {
        width: 220px;
        padding: 0 0 2em 0;
        border-right-width: 1px;
    }

    #person > ul {
        padding-bottom: 1px;
        overflow: hidden;
        /*resize: vertical;*/
    }

    body > form {
        height: 100%;
    }

    #contents {  /* TODO */
        position: relative;
        margin-left: 220px;
        margin-right: 140px;
        padding-bottom: 8em;
        height: 100%;
        overflow-x: auto;
    }

    .page-header {
        position: fixed;
        width: calc(100% - 220px - 140px);
        z-index: 50;
        opacity: 0.9;
    }

    .admin-link {
        float: right;
        margin-left: 4em;
        margin-right: 20px;
    }

    .padder {  /* TODO */
        height: 5.4em;
    }
}

@media (min-width: 1400px) {
    .department-information {
        position: fixed;
        /*left: calc(100% + 2em);*/
        /*left: calc(100% + 2em);*/
        top: 68px;
        left: 1030px;
        /*right: 175px;*/
        width: calc(100vw - 1200px);
        max-width: 600px;
    }

    .department-information textarea {
        /*margin-top: 58px !important;*/
        margin-top: 0 !important;
    }

    .department-information .week-input {
        left: 0 !important;
        /*left: auto !important;*/
        /*right: 0 !important;*/
        top: calc(100% + 6px) !important;
    }
}

@media (max-width: 960px) {
    .page-header {
        border-top: 1px solid #999999;
    }

    #projects {
        /*margin: 0 4em 0 4em;*/
        margin: 2em 0 2em 0;
        border-top: 1px solid #CCCCCC;
    }

    #projects > ul.all-projects:not(.filtered) {
        display: none;
        /*max-height: 10em;*/
        /*overflow: auto;*/
        /*border-top: 1px solid #999999;*/
        /*border-bottom: 1px solid #999999;*/
    }

    body:not(.user-person) #person > ul#user-tasks {
        display: none;
    }

    .admin-link {
        float: right;
    }
}

@media print {
    #person {
        display: none;
    }

    #projects {
        display: none;
    }

    .page-header button,
    .page-header .directory,
    .page-header .admin-link {
        display: none;
    }

    #projectinfo {
        overflow: visible;
    }

    .properties .ellipsis {
        display: none !important;
    }

    .property-formset {
        display: block !important;
    }

    /*#projectinfo div.ui-accordion-content {*/
        /*display: block !important;*/
        /*height: auto !important;*/
        /*/!*overflow: visible;*/
        /*/!* TODO overflow *!/*/
    /*}*/

    .taskinfo {
        float: left;
    }

    input,
    textarea,
    select {
        border: 1px solid #999999 !important;
        /*border: none !important;*/
        border-radius: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    a::after {
        content: '' !important;
    }
}

.sidebar {
    background-color: #EEEEEE;
}

.sidebar * {
    border-color: #CCCCCC;
}

#projects * {
    resize: none;
}

#projects .task- {
    color: #666666;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9em;
}

.sidebar li {
    margin: 0;
    padding: 0;
}

.sidebar li a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    margin-bottom: -1px;
    padding: 0.2em 0.6em;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    /*color: #333333;*/
}

.sidebar a.user-person:hover,
.sidebar a.user-person:focus,
.sidebar a.user-person:active,
.sidebar a.department:hover,
.sidebar a.department:focus,
.sidebar a.department:active {
    /*padding: 1px 4px;*/
    border-radius: 1px;
    box-shadow: 0 0 0 3px #333333;
}

.sidebar a.user-person {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar a.logout {
    display: inline-block;
    float: right;
    margin-left: 0.2em;
    border: none;
    font-size: 0.8em;
    font-weight: normal;
}

#person {
    /*float: right;*/
    /*right: 0;*/
    /*height: 100vh;*/
}

#department-links {
    display: table;
    width: 100%;
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
    border-spacing: 0 1em;
}

#department-links > * {
    display: table-row;
    background-color: #E9E9E9;
}

#department-links > * > * {
    display: table-cell;
    border-width: 1px 0;
    border-style: solid;
}

#department-links > * > *:first-child {
    padding: 0.3em;
    background-color: #DDDDDD;
}

.badge {
    background-color: #666666;
    border-radius: 4px;
    font-size: 0.9em;
    line-height: 1.1em;
    /*letter-spacing: 0.1em;*/
}

#person ul .badge,
ul.person-tasks .badge,
.task-link .badge { /* TODO selectors */
    float: right;
    position: relative;
    margin-left: 0.2em;
}

.page-header {
    margin: 0 0 0.5em 0;
    padding: 1.2em 2em 0.8em 2em;
    background-color: #FFFFFF;
    border-color: #CCCCCC;
}

h1 {
    display: inline;
    margin: 0.4em 0 0 0;
    padding: 0;
    font-size: 1.6em;
}

h1 a {
    color: inherit;
}

.page-header button,
.page-header select,
.page-header input {
    margin-top: -0.2em;
}

.page-header button {
    /*margin-left: 2em;*/
    margin-right: 1em;
}

#projectinfo {
    margin: 0 2em;
    max-width: 60em;
    /*padding: 0.6em;*/
    /*background-color: #F0F0F0;*/
    /*border: 1px solid #CCCCCC;*/
    /*border-radius: 4px;*/
}

#projectinfo h3 {
    font-size: 1.2em;
    font-weight: bold;
}

#projectinfo label {
    min-width: 18em;
    padding-right: 0.6em;
    text-align: right;
}

.messages {
    margin: 0 2em;
    max-width: 60em;
    padding: 0;
    /*display: none;*/
    list-style: none;
}

.messages p {
    margin: 0;
}

.messages .error {
    margin: 0.2em 0;
    padding: 0.2em 0.4em;
    font-weight: bold;
    color: #990000;
    background-color: #FFCCCC;
}

.nav-tabs a {
    color: #999999 !important;
}

.nav-tabs .populated a {
    font-weight: bold;
    color: #000000 !important;
}

.nav-tabs a:hover {
    color: #003366 !important;
    transition: 0.2s;
}

.tasks {
    margin: 0 2em;
    max-width: 60em;
    list-style: none;
}

.tasks:not(.delete) .task-delete,
.tasks:not(.delete) .detail-delete {
    /*display: none;*/
}

.task {
    position: relative;
    margin-bottom: 1em !important;
    /*padding: 0.4em 0;*/
    padding: 0.6em 0.2em;
    background-color: #FFFFFF;
    /*border: 1px solid #CCCCCC;*/
    border-radius: 2px;

    /*min-height: 200px !important;*/
    /*max-height: 200px !important;*/
    /*overflow: hidden !important;*/
}

.task-placeholder {
    height: 12em;
    opacity: 0.2;
    background-color: #FFFFFF;
    border-radius: 4px;
}

.task-type {
    display: none;
}

.task-name {
    margin-bottom: 0.8em;
    padding-left: 0.2em;
    font-weight: bold;
}

.task.task- {
    /*opacity: 0.8;*/
    background-color: #EEEEEE;
}

.task.task- .task-type {
    display: block;
}

.task:last-child {
    margin-bottom: 0;
}

.taskinfo {
    margin-bottom: 2em !important;
}

.task > div {
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
}

.taskinfo label {
    padding-left: 0.3em;
    min-width: 5em;
    max-width: 5em;
    /*text-align: right;*/
    /*font-weight: normal;*/
    font-size: 0.8em;
    /*overflow-x: hidden;*/
    /*text-overflow: ellipsis;*/
    /*margin: 0;*/
}

.taskinfo input,
.taskinfo button,
.taskinfo select,
.task select {
    margin-bottom: 0.4em;
    border: none;
}

.taskinfo input:not([type=checkbox]),
.taskinfo select {
    min-width: 14em;
    max-width: 14em;
}

.taskinfo input[type=time] {
    /* TODO only for IL */
    /*display: none;*/
}

.taskinfo input[type=number] {
    min-width: unset !important;
    max-width: 6em !important;
    /*width: 4em !important;*/
}

.taskinfo select {
    width: 100%;
}

.taskinfo .person .form-control-static {
    font-size: 0.9em;
    font-weight: bold;
}

.task > .checkbox-done {
    position: absolute;
    bottom: 0;
    padding: 0.2em 0.6em 0 0.4em;
}

.task.done {
    opacity: 0.8;
    background-image: repeating-linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.02) 6px,
            rgba(255, 255, 255, 0.02) 6px,
            rgba(255, 255, 255, 0.02) 12px
    );
}

.task.done.show {
    /*opacity: 0.8;*/
}

.task.done .task-name {
    /*text-decoration: underline;*/
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
}

.task.done.show .task-name {
    background-color: rgba(255, 255, 255, 0.3);
}

.task.done:not(.show) .task-addition,
.task.done:not(.show) .task-person,
.task.done:not(.show) .task-priority,
.task.done:not(.show) .task-due,
.task.done:not(.show) .task-due-flexible {
    display: none;
}

.task.done:not(.show) .detail-type:not(.always-visible) {
    display: none;
}

.task.done .detail-add {
    display: none;
}

/*.task .task-due {*/
    /*position: relative;*/
    /*z-index: 100;*/
/*}*/

.task.extra {
    /*display: none;*/
    opacity: 0.2;
}

.task-delete {
    background-color: #FFCCCC;
    box-shadow: 0 0 0 4px #FFCCCC;
}

.task-name {
    font-weight: bold;
    /*height: 2em;*/
    /*padding: 0.2em 0.6em;*/
    /*border: 1px solid #999999;*/
    /*border-radius: 2px;*/
    /*style="padding-bottom: 100%; margin-bottom: -100%"*/
}

.tasks.sortable .task-name {
    cursor: move;
}

.taskinfo .selectpicker {
    width: 100%;
}

.task-add,
.task-copy {
    margin: 0 2em 1em 2em;
    font-weight: bold;
    border: none;
}

body:not(.editing) .task-copy {
    display: none;
}

.assignments {
    margin: 0.8em 0.2em;
    padding: 0;
    list-style: none;
    font-weight: bold;
}

.assignments li {

}

@media (min-width: 768px) {
    .task {
        padding-left: 6px;
    }

    .taskinfo {
        float: left;
    }
}

@media (max-width: 768px) {
    .task {
        padding-bottom: 32px;
    }
}

.detail-type {
    margin-bottom: 0.6em;
    padding: 0 0.4em 0.4em 0.4em;
    /*border: 1px solid;*/
    border-radius: 2px;
    background-color: #FFFFFF;
    border-color: #CCCCCC;
}

.detail-type-name {
    margin: 0;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    /*color: #666666;*/
}

.task.task- .detail-type {
    display: none;
}

.task.task- .detail-add {
    display: none;
}

.detail-type:not(:hover) .detail-add {
    visibility: hidden;
}

.detail-type .detail-add {
    float: right;
    margin: 0.3em 0 0.1em 0;
    padding: 0.2em 0.3em;
    font-size: 1em;
    line-height: 0.9em;
    font-weight: bold;
    color: #666666;
    opacity: 0.5;
    border-radius: 4px;
    border: none;
}

.detail-type .detail-checkbox {
    min-width: 2.4em;
}

.detail-type .detail-checkbox label {
    display: none;
    /*visibility: hidden;*/
}

.detail-type-checkable .detail-checkbox label {
    display: block;
    /*visibility: visible;*/
    cursor: pointer;
}

.detail-type:last-child {
    margin-bottom: 0;
}

.details {
    min-height: 0.6em;
    margin-bottom: 0;
}

.detail {
    margin-top: 0.4em;
}

.detail * {
    border: none;
}

.detail:first-child {
    /*margin-top: 0;*/
}

.detail.extra {
    /*display: none;*/
    opacity: 0.1;
}

.detail textarea {
    /*background-color: #EEEEEE;*/
    overflow-x: hidden;
    overflow-y: auto;
}

.detail-type-checkable .detail.checked {
    opacity: 0.8;
}

.detail-type-checkable .detail.checked textarea {
    background-color: #EEEEEE;
}

.detail-type-noncheckable .detail * * {
    /*background-color: #FFFFFF;*/
}

.detail-checkbox {
    padding: 0;
}

.detail:not(:hover) .detail-handle {
    /*display: none;*/
}

.detail-done:not(old) {
    display: none;
    margin: 0;
}

.detail-done:not(old) + label {
    margin: 0;
    padding: 0.2em 0.4em;
    color: #CCCCCC;
    font-size: 1.4em;
}

.detail-done:not(old) + label:before {
    /*content: "✗";*/
    content: "?";
}
.detail-done:not(old):checked + label {
    color: #556655;
}

.detail-done:not(old):checked + label:before {
    content: "✓";
}

.detail-handle {
    font-size: 1.11em;
    color: #999999;
    cursor: move;
}

.detail-type-noncheckable .detail-checkbox:before {
    content: "!";
    font-size: 1.4em;
    font-weight: bold;
    color: #BBBBBB;
}

.detail-delete {
    border-left: none;
    background-color: #FFCCCC !important;
}

.detail textarea {
    resize: vertical;
}

.detail-placeholder {
    opacity: 0.2;
    background-color: #FFFFFF;
    border-radius: 4px;
}

.errorlist {
    margin: 0.2em 0;
    padding: 0.2em 0.4em;
    list-style: none;
    font-weight: bold;
    color: #990000;
    background-color: #FFCCCC;
}

.errorlist li {
    margin: 0;
    padding: 0;
}

.bootstrap-select * {
    text-overflow: ellipsis;
}

.clients ul {
    display: inline-block;
    margin-left: 2em;
    padding: 0;
    list-style: none;
    background-color: #EEEEEE;
}

.clients ul li a {
    display: block;
    /*margin: 0.2em;*/
    padding: 0.4em 0.6em;
    color: #333333;
}

.clients ul li a:hover {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #333366;
}

div.department {  /* TODO better selectors */
    margin: 0 2em;
    /*max-width: 60em;*/
    /*max-width: 80em;*/
    font-size: 0.9em;
}

div.department ul.people {
    margin: 0;
    /*margin-top: 4em;*/
    padding: 0;
}

.projects,
div.department ul.people > li {
    float: left;
    /*display: block;*/
    /*margin: 0 2em 2em 0;*/
    margin: 0 1em 1em 0;
    padding: 0;
    width: 20em;
    background-color: #F0F0F0;
    border: 1px solid #AAAAAA;
    border-radius: 4px;
    list-style: none;
}

div.department ul.people > li > a {
    text-decoration: none;
}

.projects > span.header,
div.department ul.people > li span.header {
    display: block;
    padding: 0.6em 0.8em;
    color: #666666;
    background-color: #E9E9E9;
    font-weight: bold;
    border-bottom: 1px solid #AAAAAA;
    border-radius: 4px 4px 0 0;
}

div.department ul.people > li > a span.header {
    color: #000000;
    background-color: #DDDDDD;
}

div.department ul.people > li > a:hover span.header,
div.department ul.people > li > a:focus span.header,
div.department ul.people > li > a:active span.header {
    background-color: #CCCCCC;
}

div.department ul.person-tasks {
    margin: 0;
    padding: 0;
    /*height: 28em;*/
    /*overflow-y: auto;*/
    overflow-y: scroll;
    /*resize: vertical;*/
}

div.department .section-header {
    /*margin-top: -1px;*/
    padding: 0 0.4em;
    font-size: 0.7em;
    text-transform: uppercase;
    /*letter-spacing: 0.1em;*/
    color: #777777;
    background-color: #BBBBBB;
    border-top: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
}

div.department ul.person-tasks.sorted,
div.department ul.person-tasks.unsorted {
    height: 14em;
    padding-bottom: 2em;
}

li.sorted > a {
    position: relative;
    padding-left: 2em !important;
}

li.sorted > a::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin-right: 0.2em;
    padding: 0.1em;
    width: 1.8em;
    text-align: center;
    font-size: 0.8em;
    line-height: 2.2em;
    background-color: rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

li.sorted > a::before { content: "…"; }
li.sorted:nth-child(1) > a::before { content: "1"; }
li.sorted:nth-child(2) > a::before { content: "2"; }
li.sorted:nth-child(3) > a::before { content: "3"; }
li.sorted:nth-child(4) > a::before { content: "4"; }
li.sorted:nth-child(5) > a::before { content: "5"; }
li.sorted:nth-child(6) > a::before { content: "6"; }
li.sorted:nth-child(7) > a::before { content: "7"; }
li.sorted:nth-child(8) > a::before { content: "8"; }
li.sorted:nth-child(9) > a::before { content: "9"; }
li.sorted:nth-child(10) > a::before { content: "10"; }
li.sorted:nth-child(11) > a::before { content: "11"; }
li.sorted:nth-child(12) > a::before { content: "12"; }
li.sorted:nth-child(13) > a::before { content: "13"; }
li.sorted:nth-child(14) > a::before { content: "14"; }
li.sorted:nth-child(15) > a::before { content: "15"; }
li.sorted:nth-child(16) > a::before { content: "16"; }
li.sorted:nth-child(17) > a::before { content: "17"; }
li.sorted:nth-child(18) > a::before { content: "18"; }
li.sorted:nth-child(19) > a::before { content: "19"; }
li.sorted:nth-child(20) > a::before { content: "20"; }

div.department ul.person-tasks.unsorted {
    /*height: 14em;*/
}

div.department ul.people > li[data-person-id=''] {
    /*width: 30em;*/
    /*width: 24em;*/
}

div.department ul.people > li[data-person-id=''] ul.person-tasks {
    /*height: 60em;*/
    height: 100em;
}

div.department ul.person-tasks > li {
    /*display: block;*/
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

div.department ul.person-tasks > li > a,
.task-link { /* TODO selectors */
    display: block;
    margin: -1px 0 0 0;
    padding: 0.2em 0.6em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid;
    border-bottom: 1px solid;
    text-decoration: none;
}

.task-link:hover,
.task-link:focus,
.task-link:active {
    text-decoration: none;
}

div.department > ul > li > ul > li > a:hover,
div.department > ul > li > ul > li > a:focus,
div.department > ul > li > ul > li > a:active {
    font-weight: bold !important;
}

.person button {
    margin: 0.4em 0 0 0;
    padding: 0.2em 0.8em;
    font-size: 0.9em;
    border: none;
}

.person button.active {
    /*background-color: #b8d4e6;*/
    /*background-color: #e6c797;*/
    background-color: #FFFFFF;
    color: #333333;
}

.task-link {
    margin: -1px 0 0 0;
    padding: 0.2em 0.6em;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid;
}

li > .task-link {
    border-width: 1px 0;
}

li {
    list-style: none;
}

body > li > a {
    display: block !important;
    border: 1px solid red !important;
    /*width: 20em;*/
}

/*.ui-draggable-dragging {*/
    /*display: none;*/
/*}*/

.person.dropping {
    background-color: #FFF9EE !important;
    transition: 0.2s;
}

.person.dropping span.header {
    color: #441100 !important;
    background-color: #FFEECC !important;
    transition: 0.2s;
}

body:not(.editing) .task-up,
body:not(.editing) .task-down {
    visibility: hidden;
}

div.person {
    margin: 0 2em;
}

div.person > ul {
    margin: 0;
    padding: 0;
}

div.person > ul > li {
    list-style: none;
}

div.person > ul > li > a {
    display: inline-block;
    margin-top: -1px;
    padding: 0.2em 0.6em;
    width: 40em;

    border: 1px solid;
    text-decoration: none;
}

div.person > ul > li > a > span {
    display: inline-block;
}

div.person > ul > li > a > .name {
    width: 25em;
}

div.person > ul > li > a > .due {
    float: right;
    width: 10em;
    text-align: right;
}

div.person > ul > li > a > .priority {
    width: 3em;
    text-align: right;
}

.ui-datepicker {
    z-index: 100 !important;
}

.task-due-badge {
    background-color: #666688 !important;
}

.task-priority-badge {
    background-color: #886666 !important;
}

.different-department > a {
    opacity: 0.8;
    /*border-left: 4px solid;*/
    /*border-right: 4px solid;*/

    /*color: #333333 !important;*/
    /*border-color: #BBBBBB !important;*/
    background-image: repeating-linear-gradient(
            135deg,
            /*90deg,*/
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 4px
    );
}

.projects ul {
    margin: 0;
    padding: 0;
}

.projects .week-header {
    display: block;
    margin-top: -1px;
    padding: 0.2em 0.4em;
    color: #333333;
    background-color: #BBBBBB;
    border-top: 1px solid #AAAAAA;
    font-size: 0.9em;
}

.projects .week-header.current-week {
    color: #FFFFFF;
    background-color: #777777;
    border-color: #666666;
}

.projects > ul > li > ul {
    padding-bottom: 2.4em;
}

.properties {
    margin: 1em 0;
}

.properties h3 {
    /*display: inline-block;*/
    margin: 0 0 0.4em 0;
    padding: 0.4em;
    border-radius: 4px;
}

.properties.folded h3:hover {
    color: #003366;
    /*text-decoration: underline;*/
    /*background-color: #E0E9EF;*/
    background-color: #EEEEEE;
    cursor: pointer;
    transition: 0.2s background-color;
}

.properties:not(.folded) .ellipsis {
    display: none;
}

.properties.folded .property-formset {
    display: none;
}

.property-form {
    margin: 0 !important;
}

/*.property-form:hover {*/
    /*background-color: #ECF0FF;*/
    /*outline: 1px solid #D9E0F0;*/
    /*/!*background-color: #E3E3EF;*!/*/
    /*/!*outline: 1px solid #C3C3CF;*!/*/
/*}*/

/*.property-form:hover input {*/
    /*background-color: #F9FAFF;*/
/*}*/

body:not(.editing) .property-form.was-empty {
    display: none;
}

.property-form.was-empty {
    opacity: 0.2 !important;
}

.property-form.empty {
    opacity: 0.6;
}

.property-form span {
    display: inline-block;
    vertical-align: middle;
}

@media(min-width: 600px) {
    .property-form span:nth-child(1),
    .property-form span:nth-child(2) {
        width: 6%;
    }

    .property-form span:nth-child(3) {
        width: 25%;
    }
}

.property-option1,
.property-option2 {
    visibility: hidden;
    margin: 0 0 0 1em !important;
}

.property-form.has-option1 .property-option1,
.property-form.has-option2 .property-option2 {
    visibility: visible;
}

.property-list {
    display: table;
    width: 100%;
}

.property-list > div {
    display: table-row;
}

.property-list > div > span {
    display: table-cell;
    padding: 0 0.2em;
    text-align: center;
}

.property-list > div:first-child > span {
    min-width: 2em;
    padding: 0 0.6em;
}

.information {
    display: table;
    width: 100%;
    height: 1px;
}

.information div {
    margin: 0 !important;
}

.information > div {
    display: table-row;
}

.information > div > div {
    display: table-cell;
    height: 100%;
    vertical-align: top;
}

.information > div > div:first-child {
    width: 40%;
}

.information > div > div:not(:last-child) {
    border-right: 2em solid transparent;
}

.information textarea {
    width: 100% !important;
}

.general-information {
    height: 100%;
}

.general-information textarea {
    height: 100%;
    min-height: 100% !important;
    resize: none;
}

.department-information {
    margin: 0 !important;
    padding: 0 !important;
}

.department-information textarea {
    margin-top: 2em;
    /*min-height: 6em;*/
    resize: none;
}

.department-information .week-wrapper {
    position: relative;
}

.department-information .week-input {
    position: absolute;
    left: calc(100% + 6px);
}

.department-information .week-input input {
    display: none;
}

.ui-weekpicker .ui-datepicker-week-col {
    cursor: pointer;
}

.department-information .week-display {
    padding: 4px 6px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    color: #999999;
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    cursor: pointer;
}

.department-information .week-display.set {
    color: #666666;
}

.department-information .week-display:hover {
    background-color: #DDDDDD;
}

abbr {
    border: none !important;
    text-decoration: none !important;
}

.project-list [data-status='quoted'] {
    background-image: repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 6px,
            rgba(255, 255, 255, 0.1) 6px,
            rgba(255, 255, 255, 0.1) 12px
    );
}

.project-list [data-status='halted'] {
    background-image: repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 6px,
            rgba(255, 255, 255, 0.1) 6px,
            rgba(255, 255, 255, 0.1) 12px
    );
}

.project-list [data-status='closed'] {
    background-image: repeating-linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 6px,
            rgba(255, 255, 255, 0.1) 6px,
            rgba(255, 255, 255, 0.1) 12px
    );
}

#projects > ul.all-projects:not(.filtered) [data-status='closed'],
#projects > ul.all-projects:not(.filtered) .all-done,
#projects > ul.all-projects:not(.filtered) .project-different-department {
    display: none;
}

.task-link-placeholder {
    min-height: 2em;
    /*background-color: #E7DCA5;*/
    background-color: #FFFFFF;
    border-width: 1px 0;
    border-style: solid;
    /*border-color: #D7CC95;*/
    border-color: #EEEEEE;
}

/*[data-upcoming='true'] > a {*/
    /*font-weight: bold;*/
    /*border-left: 0.8em solid;*/
/*}*/

.person.only-upcoming li:not([data-upcoming='true']) {
    /* display: none; would make jQuery sortable lag */
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

#all-projects {
    display: inline-block;
    padding-left: 2em;
}

#all-projects a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    margin-bottom: -1px;
    padding: 0.2em 0.6em;
    border: 1px solid #CCCCCC;
}

#all-projects a.task- {
    color: #333333;
}

#all-projects a.task-:hover {
    color: #FFFFFF;
    background-color: #006699;
    border-color: #003366;
}

#all-projects a:hover,
#all-projects a:focus,
#all-projects a:active {
    text-decoration: none;
}

.task-edit-badge {
    position: absolute !important;
    /*right: -1em;*/
    z-index: 45;
    top: 0;
    right: 0;
    bottom: 1px;
    /*height: 100%;*/
    /*right: 0.6em;*/
    /*bottom: 0.3em;*/
    opacity: 0.4;
    line-height: 1.6em;
    vertical-align: bottom;
    /*background-color: #111111;*/
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    border-radius: 0 !important;
}

.task-edit-badge:hover {
    opacity: 0.8;
}

li:not(:hover) > .task-edit-badge {
    display: none;
}

.task-edit {
    display: none;
    z-index: 40;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: -1px;
    /*margin-top: 0;*/
    /*padding: 0.2em;*/
    padding: 0.4em 0.6em;
    min-width: 100%;
    white-space: nowrap;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.8);
}

.task-edit input,
.task-edit select {
    margin-bottom: 4px !important;
}

.department-overview > ul > li:nth-last-child(-n+3) .task-edit { /* TODO better selectors */
    left: auto;
    right: 0;
}

/*.task-edit .datepicker {*/
    /*max-width: 10em;*/
/*}*/

.task-edit label {
    font-weight: normal;
}

/*.person-tasks > .done .task-link {*/
.task-link.done  {
    /*text-decoration: line-through;*/
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 6px,
        rgba(255, 255, 255, 0.1) 6px,
        rgba(255, 255, 255, 0.1) 12px
    );
}

/*.person-tasks > .done .task-link .task-due-badge {*/
.task-link.done .task-due-badge,
.task-link.done .task-person-badge,
.task-box.done .task-due-badge,
.task-box.done .task-person-badge {
    display: none;
}