html {
    font-size: 100%;
}

body {
    font-size: 1em;
    line-height: 1.5em;
    font-family: "Lucida Grande", "Arial", sans-serif;
    height: 100%;
    min-width: 960px;
}

h1 {
    font-family: "Garamond", sans-serif;
    color: #53637D;
    text-align: left;
    font-weight: bold;
}

h2 {
    font-family: "Garamond", serif;
    font-size: 1.5em;
    line-height: 2em;
    font-weight: bold;
}

h3 {
    font-weight: bold;
    margin-left: 1em;
}

p {
    padding: 0.75em 0;
}

code {
    font-family: monospace;
}

pre {
    border-left: 2px solid #53637D;
    padding-left: 0.25em;
    font-family: monospace;
    min-height: 1.5em;
}

a {
    cursor: pointer;
}

strong, .bold {
    font-weight: bold;
}

.login_error {
    color: #F31313;
}

#global {
    margin: 0;
}

a, a:visited {
    color: #426DC9;
}

hr {
    height: 0;
    border: none;
    border-top: 1px dashed grey;
}

.hr {
    text-align: center;
    color: #53637D;
    text-shadow: white 0 1px 1px;
    padding: 0.75em 0;
    clear: both;
}

.hr:before {
    content: "\273B\273B\273B";
}

.displayed {
    display: block;
}

input, textarea {
    border: 1px solid #53637D;
    border-radius: 4px;
}

table input[type=text], table textarea {
    min-width: 25em;
    width: 100%;
}

input:focus, textarea:focus {
    border: 1px solid #FFD69C;
}

ul.normal_list {
    list-style: disc;
    list-style-position: inside;
    padding-left: 0.5em;
}

.inline {
    display: inline;
}



/* LEFT */

#sidebar {
    text-align: right;
    position: fixed;
    padding: 0 1em;
    width: 234px;
    background-color: #EAEEF3;
    text-shadow: white 0.0625em 0.0625em 0.0625em;
    height: 100%;
    border-right: 2px solid #E4E5E8;
    overflow-y: auto;
}

#sidebar_header {
    margin-bottom: 15px;
}

#sidebar h1 {
    font-size: 1.5em;
    margin-top: 15px;
}

#sidebar h1.parent::before {
   content: "• ";
}

#sidebar h1.child {
    margin-top: 0px;
}

#sidebar h1.child::before {
    content: "└─ ";
}

#sidebar .sidebar_left {
    text-align: left;
    width: 54px;
    float: left;
}

#sidebar .sidebar_right {
    width: 180px;
    text-align: right;
    float: right;
}

#sidebar a {
    text-decoration: none;
}

.menu_link {
    border-radius: 10px 0 0 10px;
    padding: 0 1em;
    margin-right: -1em;
}

#sidebar a:hover, #sidebar a:focus {
    background-color: white;
    outline: 0;
}

.footer {
    font-size: 0.875em;
    text-align: left;
    clear: both;
}

.unread {
    display: inline-block;
    font-size: 0.75em;
    text-align: center;
    border-radius: 1em;
    width: 2em;
    background-color: #F31313;
    text-shadow: none;
}

.secret_notice {
    font-size: 0.8em;
    line-height: 1.125em;
    text-align: center;
    margin: 20px auto 20px;
    color: red;
}

.login_notice {
    font-size: 0.8em;
    line-height: 1.125em;
    text-align: left;
    width: 200px;
    margin-left: 15px;
    margin-top: 15px;
}

.cr_notice {
    font-size: 0.6em;
    line-height: 1.125em;
    text-align: center;
    position: fixed;
    bottom: 1.5em;
    width: 200px;
    margin-left: 15px;
}



/* BORDER */

#border {
    border-left: 2px solid #DADEE3;
    border-right: 2px solid #CACED3;
    width: 0px;
    height: 100%;
    position: fixed;
    margin-left: 266px;
}

#subpage_border {
    border-left: 2px solid #DADEE3;
    border-right: 2px solid #CACED3;
    width: 0px;
    height: 100%;
    position: fixed;
    left:0;
    top:0;
    margin-left:341px;
}



/* RIGHT */

#core {
    margin-left: 270px;
    margin-bottom: 1em;
    padding: 0 1em;
}

#core h1 {
    font-size: 2.5em;
    line-height: 1.8em;
    margin-bottom: 0.6em;
}


#subpage {
    position: fixed;
    left: 345px;
    top: 0px;
    bottom: 0px;
    display: none;
    margin-bottom: 1em;
    padding: 1.5em 1em 0 1em;
    z-index: 10;
}

#subpage_background {
    position: fixed;
    left: 345px;
    top:0px;
    bottom: 0px;
    right: 0px;
    background: white;
    z-index: -1;
}

#subpage_content {
    background:white;
    overflow: auto;
    z-index: 2;
    height: 100%;
}

#subpage h1 {
    font-size: 2.5em;
    line-height: 1.8em;
    margin-bottom: 0.6em;
}



/* TOGGLING */

#core h2 {
    color: #53637D;
    text-align: left;
    font-size: 1.5em;
    padding-left: 1em;
}

.toggling_on, .toggling_off {
    cursor: pointer;
}

.toggling_on:before {
    content: "\25BE\0000a0";
}

.toggling_off:before {
    content: "\25B8\0000a0";
}

.toggled_div {
    display: hidden;
}





/* TABLE */

table {
    font-size: 0.875em;
    margin-top: -0.072em;
}

table th {
    font-weight: bold;
    vertical-align: bottom;
    text-align: center;
    padding: 0.858em 0.5em;
    border-bottom: 0.072em solid #53637D;
}

table td {
    font-size: 0.875em;
    padding: 0 0.5em;
    vertical-align: top;
    width: 1px;
    white-space: nowrap;
}

table.nested th, table.nested td {
    font-size: 0.858em;
    padding: 0 0.25em;
}

table.bordered {
    border-radius: 0.5em 0.5em 0 0;
}

table.bordered td, table.bordered th {
    border-right: 1px solid #53637D;
}

table.bordered td:last-child, table.bordered th:last-child {
    border-right: 0;
}

table.bordered thead th {
    background-color: white;
}

table.bordered tbody tr:nth-child(even) {
    background-color: white;
}

table.bordered tbody tr:nth-child(odd) {
    background-color: #EAEEF3;
}

table.TaskTypeOptions {
    border: 1px solid gray;
    margin: 5px 0px;
}

table td.wrapping-options {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

table td.wrapping-options label {
    margin-right: 15px;
}

table td.partial::after {
    content: "*";
}

table.sortable th {
    white-space: nowrap;
}

th .column-sort {
    text-decoration: none;
    margin-left: 8px;
}

/* TODO */

.reply_question {
    display: none;
}

.reply_question_quick_answer {
  display: block;
  margin-left: 15px;
  font-style: italic;
  text-decoration: underline;
}

.reply_question textarea {
    width: 100%;
}





/* NOTIFICATIONS */

#notifications {
    margin: 0 auto;
    padding: 1em 0 0.5em;
}

#notifications .notification {
    text-align: left;
    margin-bottom: 0.572em;
    font-size: 0.875em;
    border-radius: 0.5em;
    background-color: #FEF7CB;
    border: 0.143em solid #FFE475;
    box-shadow: black 0.072em 0.072em 0.144em;
}

#notifications .notification_msg {
    padding: 0.429em;
}

#notifications .notification_close {
    float: right;
    cursor: pointer;
    background-color: #FFE475;
    border-radius: 0 0 0 0.5em;
    border-left: 0.143em solid #FFE475;
    border-bottom: 0.143em solid #FFE475;
    margin-bottom: -0.143em;
    width: 2em;
    text-align: center;
    padding: 0;
    font-weight: bold;
}

#notifications .notification_close:hover {
    background-color: #FEF7CB;
}

#notifications .notification_subject {
    font-weight: bold;
}

.preserve_line_breaks {
    white-space: pre-line;
}





/* COMMUNICATIONS */

.notifications .notification {
    text-align: left;
    margin-bottom: 0.572em;
    font-size: 0.875em;
    border-radius: 0.5em;
    background-color: #FEF7CB;
    border: 0.143em solid #FFE475;
    box-shadow: black 0.072em 0.072em 0.144em;
}

.notifications .communication {
    background-color: #EAEEF3;
    border: 0.143em solid #53637D;
}

.notifications .notification_msg {
    padding: 0.429em;
}

.notifications .notification_close {
    float: right;
    cursor: pointer;
    background-color: #FFE475;
    border-radius: 0 0 0 0.5em;
    border-left: 0.143em solid #FFE475;
    border-bottom: 0.143em solid #FFE475;
    margin-bottom: -0.143em;
    width: 2em;
    text-align: center;
    padding: 0;
    font-weight: bold;
}

.notifications .notification_close:hover {
    background-color: #FEF7CB;
}

.notifications .notification_subject {
    font-weight: bold;
}

.notifications .notification_timestamp {
    float: right;
    padding-right: 0.5em;
}

.notifications .announcement_remove {
    float: right;
    margin-bottom: -0.143em;
    width: 6em;
    text-align: center;
    padding: 0;
    font-weight: bold;
}


/* DIFFERENT COLORS... */

body.admin h1,
body.admin .hr,
body.admin #core h2 {
    color: #637D53;
}

body.admin pre {
    border-left: 2px solid #637D53;
}

body.admin a,
body.admin a:visited {
    color: #6DC942;
}

body.admin input,
body.admin textarea {
    border: 1px solid #637D53;
}

body.admin input:focus,
body.admin textarea:focus {
    border: 1px solid #FFD69C   ;
}

body.admin #sidebar {
    background-color: #EEF3EA;
    border-right: 2px solid #E5E8E4;
}

body.admin #border {
    border-left: 2px solid #DEE3DA;
    border-right: 2px solid #CED3CA;
}

body.admin #subpage_border {
    border-left: 2px solid #DEE3DA;
    border-right: 2px solid #CED3CA;
}

body.admin table th {
    border-bottom: 0.072em solid #637D53;
}

body.admin table.bordered td,
body.admin table.bordered th {
    border-right: 1px solid #637D53;
}

body.admin table.bordered td:last-child,
body.admin table.bordered th:last-child {
    border-right: 0;
}

body.admin table.bordered tbody tr:nth-child(even) {
    background-color: white;
}

body.admin table.bordered tbody tr:nth-child(odd) {
    background-color: #EEF3EA;
}

body.admin div.task_dataset {
    padding-left: 1em;
    padding-right: 1em;
    border: 1px solid #CED3CA;
}

body.admin #notifications .notification {
    background-color: #F7CBFE;
    border: 0.143em solid #E475FF;
}

body.admin #notifications .notification_close {
    background-color: #E475FF;
    border-left: 0.143em solid #E475FF;
    border-bottom: 0.143em solid #E475FF;
}

body.admin #notifications .notification_close:hover {
    background-color: #F7CBFE;
}

body.admin .notifications .notification {
    background-color: #F7CBFE;
    border: 0.143em solid #E475FF;
}

body.admin .notifications .communication {
    background-color: #EEF3EA;
    border: 0.143em solid #637D53;
}

body.admin .notifications .ignored {
    background-color: white;
    border: 0.143em solid #CCCCCC;
    color: #AAAAAA;
    box-shadow: none;
}

body.admin .notifications .answered {
    background-color: #DDDDDD;
    border: 0.143em solid #555555;
}

body.admin .notifications .claim_reply {
    float: right;
    padding-right: 0.5em;
}

body.admin .notifications .ignore_reply {
    float: right;
    padding-right: 0.5em;
}

body.admin .notifications .notification_admin_owner {
    font-style: italic;
}

body.admin .notifications .notification_close {
    background-color: #E475FF;
    border-left: 0.143em solid #E475FF;
    border-bottom: 0.143em solid #E475FF;
}

body.admin .notifications .notification_close:hover {
    background-color: #F7CBFE;
}



/* LOGIN PAGE */
#login-content {
    padding: 20px;
    width: 400px;
}

#login-content h1 {
    font-size: 24px;
}

#login-content h4 {
    font-size: 18px;
    font-weight: bold;
    padding: 15px 0;
}

#login-content .alert {
    color: red;
}

#login-content .section {
    padding: 10px;
}

#login-content .section:last-child {
    float: right;
    clear: both;
}

#login-content form label {
    display: flex;
}

#login-content form label span {
    flex-grow: 1;
    display: flex;
}

#login-content form label input {
    width: 200px;
}



/* HACKS */
table.jqplot-table-legend {
    width: auto;
}



/* OTHERS */
span.info {
    color: #6DC942;
    font-size: smaller;
    background-color: #EEF3EA;
    display: inline-block;
    border-radius: 10px;
    width: 16px;
    height: 16px;
    text-align: center;
    font-weight: bold;
    margin: 0 8px;
    line-height: 18px;
}
span.info::after {
    content: "?";
}

a.button-link {
    text-decoration: none;
    margin-right: 25px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #6DC942;
}

a.button-link:hover {
    background-color: #EEF3EA;
}