body { font-family: "Open Sans", sans-serif; color: #111;}
blockquote { padding: 0.4rem; background-color: #f0f0f0; border: solid 1px #e0e0e0; font-family: monospace; margin: 0 0 0.8em 0; }
blockquote p:last-child { margin-bottom: 0;}
img {border: 0;}
dt { font-weight: bold;}
dd { margin: 0 0 1em 2em;}
ul { list-style: disc outside none; margin: 0 0 0.8em 2em;}
li { line-height: 1.5em;}
ol { list-style: decimal outside none; margin: 0 0 0.8em 2em;}
li ol { margin-bottom: 0;}
li ul { margin-bottom: 0;}
p { margin: 0 0 0.8em 0; line-height: 1.5em;}
h1 {margin: 0 0 1em 0; font-weight: bold; font-size: 200%; line-height: 140%; color: #00843d;}
h2 {margin: 1em 0 0.5em 0; font-weight: bold; font-size: 150%; color: #333; line-height: 140%;}
h3 {font-weight: bold; margin-bottom: 0.5em; font-size: 100%;}
em {font-style: italic;}
strong {font-weight: bold;}
a { color: #111;}
.link { color: #111; text-decoration: underline; cursor: pointer;}

@media print {
    body { font-size: 10pt; }
}

@media (min-width: 1024px) {
    body { font-size: 12pt; display: grid; grid-template-columns: 286px auto; background: url(/static/img/body-bg.png) left repeat-y;}
    main { max-width: 900px; padding: 18px;}
    nav { /*background-color: rgb(0, 132, 61);*/ background-color: #f0f0f0; color: #777; padding: 18px;}
    nav h1 { font-size: 100%; margin: 24px 0 0 0; padding: 6px; border-top: solid 2px #777; text-transform: uppercase;}
    nav ul { list-style-type: none; margin: 0; pading: 0; border-top: solid 2px #777;}
    nav ul li { margin: 0; padding: 6px; border-bottom: solid 1px #aaa;}
    nav ul li a { text-decoration: none; color: #777;}
    nav ul li a:hover { text-decoration: underline;}
    .hamburger-button { display: none;}
    .hamburger-menu-item { display: none;}
    #user-menu {font-size: 80%; position: absolute; left: 18px; bottom: 18px; margin: 0;}
}
@media (max-width: 1023px) {
    body { font-size: 12pt;}
    nav { background-color: #f0f0f0; padding: 9px;}
    nav h1 { display: none; }
    nav ul { list-style-type: none; margin: 9px 0 0 0; pading: 0; border-top: solid 2px #777;}
    nav ul li { margin: 0; padding: 12px; border-bottom: solid 1px #aaa;}
    nav ul li a { text-decoration: none; color: #777; font-size: 18pt;}
    nav ul li a:hover { text-decoration: underline;}
    .hamburger-button { float: right; margin: 9px; cursor: pointer;}
    #hamburger-button-close { display: none;}
    #menu { display: none;}
    main { padding: 18px;}
    #user-menu {display: none;}
}

@media (min-width: 768px) {
.page-actions {
    float: right;
    padding-top: 8px;
}

}
@media (max-width: 767px) {
.page-actions {
    margin-bottom: 12px;
}
}

.button {
    display: inline-block; color: #000; padding: 5px; cursor: pointer;
    background: #f0f0f0; border: solid 1px #bbb; border-radius: 2px;
    text-decoration: none;
}
.disabled-button {
    display: inline-block; color: #bbb; padding: 5px; cursor: default;
    background: #f0f0f0; border: solid 1px #bbb; border-radius: 2px;
    text-decoration: none;
}
.button-main {
    display: inline-block; padding: 5px; cursor: pointer;
    border: solid 1px #00843d; border-radius: 2px;
    text-decoration: none;
    background-color: #e9ff9a; color: #000;
}

@media (min-width: 768px) {
table.listing { border-collapse: collapse; width: 100%;}
table.listing tr {}
table.listing tr th { border-top: solid 1px #999; border-bottom: solid 1px #999; padding: 6px; text-align: left; background-color: #f0f0f0;}
table.listing tr td { border-top: dotted 1px #ddd; border-bottom: dotted 1px #ddd; padding: 6px; line-height: 140%;}
table.listing tr td.help { color: #aaa;}
table.listing tr td.help a { color: #aaa;}
table.listing tr td .button { padding: 2px; }
table.listing tr:hover { background-color: #e0f29f; }

td.frontpage-listing-my-project-tasks-column-project { width: 12em;}
td.frontpage-listing-my-project-tasks-column-date-deadline { width: 6em;}
}
@media (max-width: 767px) {
table.listing { border-collapse: collapse; width: 100%;}
table.listing tr { display: flex; flex-direction: column; border-top: dotted 1px #ddd; border-bottom: dotted 1px #ddd;}
table.listing tr th { border-top: solid 1px #999; border-bottom: solid 1px #999; padding: 6px; text-align: left; background-color: #f0f0f0;}
table.listing tr td {  padding: 6px; line-height: 140%;}
table.listing tr td.help { color: #aaa;}
table.listing tr td.help a { color: #aaa;}
table.listing tr td .button { padding: 2px; }
table.listing tr:hover { background-color: #e0f29f; }
}


@media (min-width: 768px) {
table.details { border-collapse: collapse; width: 100%;}
table.details tr th { border: dotted 1px #ddd; border-left: 0; width: 250px; font-weight: normal; text-align: right; padding: 6px; color: #666;}
table.details tr td { border: dotted 1px #ddd; border-right: 0; padding: 6px;}
table.details tr:hover { background-color: /*#e0f29f*/ #ffffb7; }
}
@media (max-width: 767px) {
table.details { width: 100%; border-top: dotted 1px #ddd;}
table.details tr { width: 100%; display: flex; flex-direction: column; align-items: stretch; background-color: transparent; border-bottom: dotted 1px #ddd;}
table.details tr th { display: block; font-weight: normal; text-align: left; padding: 6px; color: #666; font-weight: 200;}
table.details tr td { display: block;  padding: 6px;}

}


@media (min-width: 768px) {
table.details-form { border-collapse: collapse; width: 100%;}
table.details-form tr th { border: dotted 1px #ddd; border-left: 0; width: 250px; font-weight: normal; text-align: right; padding: 6px; color: #666;}
table.details-form tr td { border: dotted 1px #ddd; border-right: 0; padding: 0px;}
table.details-form tr td.cell-form-field-hint { padding: 6px; color: #999; width: 150px;}
}
@media (max-width: 767px) {
table.details-form { width: 100%; border-top: dotted 1px #ddd;}
table.details-form tr { width: 100%; display: flex; flex-direction: column; align-items: stretch; background-color: transparent; border-bottom: dotted 1px #ddd;}
table.details-form tr th { display: block; font-weight: normal; text-align: left; padding: 6px; color: #666;}
table.details-form tr td { display: block; }
table.details-form tr td.cell-form-field-hint { text-align: right; color: #999; padding: 6px;}
}

table.details-form tr td.cell-view-field { padding: 6px;}
table.details-form tr td textarea{ height: 120px; border: 0; background-color: #e0f8ff; padding: 0 6px; width: 90%; font-size: 100%; font-family: "Open Sans", sans-serif;}
table.details-form tr td input[type='text']{ border: 0; background-color: #e0f8ff; padding: 0 6px; width: 90%; font-size: 100%; font-family: "Open Sans", sans-serif;}
table.details-form tr td input[type='date']{ border: 0; background-color: #e0f8ff; padding: 0 6px; width: 90%; font-size: 100%; font-family: "Open Sans", sans-serif;}
table.details-form tr td input[type='password']{ border: 0; background-color: #e0f8ff; padding: 0 6px; width: 90%; font-size: 100%; font-family: "Open Sans", sans-serif;}
table.details-form tr td select.full { border: 0; background-color: #e0f8ff; padding: 0 6px; width: 90%; font-size: 100%; font-family: "Open Sans", sans-serif;}
table.details-form tr td select.part { border: 0; background-color: #e0f8ff; padding: 0 6px; font-size: 100%; font-family: "Open Sans", sans-serif;}
table.details-form tr:hover { background-color: /*#e0f29f*/ #ffffb7; }

.details-form-textarea label { margin: 12px 0 0 0;}
.details-form-textarea label { font-weight: normal; padding: 6px; color: #666; display: block;}
.details-form-textarea textarea { height: 120px; border: 0; background-color: #e0f8ff; padding: 0 6px; width: 100%; font-size: 100%; font-family: "Open Sans", sans-serif;}

.form-buttons { margin-top: 32px; text-align:center;}

table.details-form tr td.cell-form-field { background-color: #e0f8ff;}

table.details-form tr th.cell-form-field-with-error { color: red}

.form-errors { color: red; border-top: dotted 1px red; border-bottom: dotted 1px red; margin: 0 0 24px 0; padding: 0;}
.form-errors ul { margin: 24px 36px;}

@media screen {
    .widget { background-color: #fafafa; border-left: solid 12px #f0f0f0; padding: 1em; margin: 0 0 1em 0; }
    .widget h2 { margin: 0 0 0.5em 0;}
    .widget-title { font-size: 120%; font-weight: bold; margin: 0 0 1em 0; color: #555;}
    .widget-important { border-left: solid 12px #0080f2!important; }
    .widget-success { border-left: solid 12px #72fb00!important; background: #d7fbba;}
    .widget-selected { border-left: solid 12px #72fb00!important; }
    .widget-failure { border-left: solid 12px #ff0000!important; }
    .widget-error { border-left: solid 12px #ff0000!important; }
    .widget-warning { border-left: solid 12px #ff0000!important;}
    .widget-task { border-left: solid 12px /*#72fb00*/ yellow!important; background: /*#f0fee4*/ #ffffe0;}
    .widget-task .selected-row { background-color: #ffffff;}
    .widget-buttons { text-align: right;}
    .widget-top-buttons { float: right; text-align: right; margin-bottom: 1em;}
    .widget-wire { background-color: #fdfdfd; border-top: solid 1px #f0f0f0; border-right: solid 1px #f0f0f0; border-bottom: solid 1px #f0f0f0;}
    .widget-placeholder { background-color: #fff; padding: 1em; margin: 0 0 1em 0; border: dotted 1px #ddd; text-align: center; border-left: solid 12px #f0f0f0;}
}

@media screen {
    .notebook {}
    ul.notebook-tabs { border-bottom: solid 1px #015d54; margin: 0!important; padding: 0; list-style-type: 0;}
    ul.notebook-tabs-smaller { font-size: 80%;}
    li.notebook-tab {
        display: inline-block;
        margin: 0; padding: 0.4em;
        color: #015d54;
        cursor: pointer;
    }
    li.notebook-selected-tab { background: #015d54; color: #fff; border: solid 1px #015d54; border-top-right-radius: 7px; border-top-left-radius: 7px;}
    ul.notebook-tabs li a { color: #fff; text-decoration: none;}
    .notebook-page { padding: 1em 0 0 0;}
}
@media print {
    ul.notebook-tabs { display: none;}
}

.empty-listing { font-style: italic; color: #777; border-top: dotted 1px #ddd; border-bottom: dotted 1px #ddd; text-align: center;}
ul.project-notes { margin: 0; padding: 0; list-style-type: none; border-top: dotted 1px #ddd;}
ul.project-notes li { border-bottom: dotted 1px #ddd; padding: 8px;}
ul.project-notes li.confidential { background-color: #ffffe6;}
ul.project-notes .project-note-meta { color: #555; font-style: italic; text-align: right; margin-top: 6px; font-size: 80%;}

.color-code-ok {}
.color-code-warning { background-color: #ffff80;}
.color-code-error { background-color: lightsalmon;}
.color-code-error-with-reason { background-color: thistle;}

.button-menu-trigger {
    font-weight: normal; padding: 0; margin: 0; padding: 5px 15px 5px 5px; display: inline-block;
    background: #f0f0f0 url(/static/img/dropdown-link-inline-menu.png) right center no-repeat;
    cursor: pointer; border: solid 1px #bbb;
    border-top-left-radius: 2px; -moz-border-radius-topleft: 2px;
    border-top-right-radius: 2px; -moz-border-radius-topright: 2px;
    border-bottom-left-radius: 2px; -moz-border-radius-bottomleft: 2px;
    border-bottom-right-radius: 2px; -moz-border-radius-bottomright: 2px;
}

.button-menu { padding: 0; margin: 0; position: absolute; top: 0; background: #f0f0f0; box-shadow: 0 0 2px 2px #ddd; display: none;}
.button-menu ul { padding: 0  0.4em; margin: 0; list-style-type: none; border: solid 1px #bbb;}
.button-menu ul li { padding: 0.2em 0.4em; margin: 0; border-bottom: dotted 1px #aaa; cursor: pointer;}
.button-menu ul li a { text-decoration: none;}

@media print {
    .no-print, .no-print *
    {
        display: none !important;
    }
}

@media screen {
    .no-screen, .no-screen *
    {
        display: none !important;
    }
}

.project-notes-widget-note {
    margin: 0; padding: 8px; border-top: dotted 1px #ddd;
}
.project-notes-widget-has-hidden-notes { text-align: right; font-weight: bold; font-size: 80%; margin-bottom: 0.5rem;}
.project-notes-widget-confidential-note { background-color: #ffffe6;}
.project-notes-widget-note-text { padding-left: 48px; line-height: 1.5em;}
.project-notes-widget-about-note { color: #555; margin-bottom: 6px;}
.half-button { color: #555; font-size: 80%; cursor: pointer; border-bottom: dotted 1px #555; text-decoration: none;}
.half-button-100 { color: #555; cursor: pointer; border-bottom: dotted 1px #555; text-decoration: none;}

.listing-bottom-buttons {
    text-align: center;
    padding: 0;
    margin: 0.3em 0;
}

.info-flair {display: inline-block; padding: 0 4px; border-radius: 4px; cursor: auto; background-color: lavender;}
.info-flair-small {display: inline-block; font-size: 80%; padding: 0 4px; border-radius: 4px; cursor: auto; background-color: lavender;}
.info-flair-blocked {display: inline-block; padding: 0 4px; border-radius: 4px; cursor: auto; border: solid 1px darkslategray; background-color: transparent; color: darkslategray;}
.info-flair-task-touched {display: inline-block; padding: 0 4px; border-radius: 4px; border: solid 1px darkslategray; cursor: auto; background-color: transparent; color: darkslategray;}
.info-flair-task-completed {display: inline-block; padding: 0 4px; border-radius: 4px; border: solid 1px darkslategray; cursor: auto; background-color: darkslategray; color: white;}
.info-flair-review-requested {display: inline-block; padding: 0 4px; border-radius: 4px; cursor: auto; background-color: gold; color: black;font-size: 80%;}

div.breadcrumbs {
    padding: 0; margin: 0 0 1rem 0;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    font-size: 0.8rem;
}
div.breadcrumbs > ul {
    display: inline-block;
    list-style-type: none; padding: 0; margin: 0;
}
div.breadcrumbs > ul > li {
    padding: 0; margin: 0; display: inline-block;
}
div.breadcrumbs > ul > li::after {
    content: " /";
}
div.breadcrumbs > ul > li:last-child::after {
    content: "";
}

.user-buttons {display: flex; align-items: center;}
.user-buttons span:first-child {flex-grow: 1;}