/*
# text colors
links: #2229ff
green accent: #3bcc07
orange accent: #ff5f11

# monochrome
light: #fffffc
med-light: #e5e5e2;
med: #bfbfbd;
med-dark: #7f7f7e;
dark: #40403f;

# highlights
light blue: #2efff7
mid blue: #1f8aw8
mid green: #1fe874
bright green: #3cff1c

# background colors
light blue: #dcfaff
dark blue: #bdcce8
violet: #d7d0ff
dark green: #bde8d8
mid green: #caffce
off-white green: #f6fffd
*/

/* CSS Reset
   http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* end of CSS Reset */

/* some basic styles */
h1, h2, h3, h4 {
    padding: 0.2em;
}
h1 {
    font-size: 1.5em;
}
h2 {
    font-size: 1.3em;
}
h3 {
    font-size: 1.2em;
    font-family: Arial, sans-serif;
}
h4 {
    font-size: 1.1em;
}
a {
    color: #2229ff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* page layout */

div.page {
    min-width: 34em;
}
header {
    width: 100%;
    z-index: 100;
    background: #333;
    background: #189cc4;
}

header .title {
    font: 40px Helvetica, sans-serif;
    color: #189cc4;
    color:  #fff;
    padding: 0 .6em 0 .2em;
    line-height: 1em;
}
header .title img {
    padding: .1em 0 0;
}
header a:hover
{
    text-decoration: none;
}

div.body {
    min-height: 400px;
    width: 100%;
    padding: 0 0.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.sidebar {
    width: 10em;
    float: right;
}
div.sidebar, div.contents {
    vertical-align: top;
}
div.sidebar .section {
    margin: 0 0 .8em;
}
div.sidebar .indent {
    margin-left: .5em;
}
div.sidebar button {
    margin: .5em 0 .2em;
}
div.contents {
    margin-right: 10.5em;
    padding: 10px 10px;
    border-right: solid #777 1px;
    min-height: 400px;
}


footer 
{
    border-top: solid #999 1px;
    padding: .2em .4em;
    text-align:right;
    color: #666;
    clear: both;
    font-size: 12px;
}
#page_title {
    margin-bottom: .3em;
}

/* menu */
nav.menu  {
    float: right;
    margin: .75em 1em 0;
    font: 16pt Helvetica, sans-serif;
}
nav.menu ul {
    list-style: none;
}
nav.menu li {
    display: inline-block;
}
nav.menu li a {
    display: inline-block;
    font: 16px Arial,serif menu;
    padding: 0 .6em;
    text-decoration: none;
    color: #fff;
    line-height: 44px;
}
nav.menu li a:hover, nav.menu li a:active,
nav.menu li.current a,
nav.menu li.master a:hover, nav.menu li.master a:active {
    color: #fff;
}
nav.menu li.current a,
nav.menu li.current a:hover  {
    color: #ddd;
}
nav.menu li a:hover {
    color: #006;
}
nav.menu li a:active {
    color: #006;
}
nav.menu li.master {
    margin-left: 3em;
}
nav.menu li.master a {
    color: #3bcc07;
}
nav.menu li.master a:hover, nav.menu li.master a:active {
    color: #ddd;
}

/* misc */
.esc-separator {
    background-color: #d6d6d6;
    border-style: none;
    font-size: 0;
    height: 1px;
    margin: -1px 0;
    position: relative;
}
.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

table.browse th, table.browse td {
    min-width: 10em;
    text-align: center;
    padding: .2em;
}

#message-outer {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

#message-inner {
  background: #fefefe;
  border: .15em #000 solid;
  border-radius: 0.5em;
  margin-top: 3em;
  padding: 1em;
  font-size: 16pt;
  text-align: center;
  transform: rotate(0deg);
}
#message-inner .close {
  position: absolute;
  top: -.5em;
  right: -.5em;
  padding: 0 .2em .1em;
  margin: 0;
  line-height: 1em;
  font-size: 14pt;
  font-weight: bold;
  background: #ddd;
  border: .1em solid black;
  border-radius: .2em;
  cursor: pointer;
}

.status_graphs {
    text-align: center;
}
.status_graphs .stackedarea-legend li {
    display: inline-block;
    margin: .2em;
}
.status_graphs .stackedarea-legend li>span {
    height: .8em;
    width: .8em;
    display: inline-block;
    vertical-align: middle;
    margin-right: .2em;
}
#active_tasks, #completed_tasks {
    width: 550px;
    height: 150px;
    margin-bottom: 1em;
}

.dataset .settings {
    margin-left: .3em;
    margin-bottom: .5em;
    font-size: 1.05em;
}
.dataset .browse .entry {
    margin: 1em 0;
}
.dataset .browse .entry .header {
    background-color: #e5e5e2;
    padding: .2em;
    margin-bottom: .2em;
    text-align: center;
    font-family: sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .2em 2em;
}
.dataset .browse .entry .header > div {
    min-width: 8em;
}
.dataset .browse .entry .header > div:first-child {
    text-align: left;
}
.dataset .browse .entry .header > div:last-child {
    text-align: right;
}
.dataset .browse .entry .user-group > span {
    min-width: 8em;
    display: inline-block;
}
.dataset .browse .entry .user-group > span.username {
    text-align: right;
}
.dataset .browse .entry .user-group > span.group {
    text-align: left;
}
@media screen and (max-width: 900px) {
    .dataset .browse .entry .user-group {
        order: 10;
        width: 100%;
    }
}
.dataset .browse .entry .status {
    text-transform: uppercase;
}
.filters select {
    width: 9.5em;
}

table.key_value td {
    margin-top: .2em;
    border: 0;
}
table.key_value td.key:after {
    content: ":";
}
table.key_value td.value {
}

div.task_details {
    background: lightgreen;
    margin-bottom: 40px;
}
div.task_details div.key_value {
    padding: 2px 4px;
}
div.task_details div.key_value div {
    display: inline-block;
}
div.task_details div.key_value div:nth-of-type(1) {
    width: 150px;
}
div.task_stats {
    margin-bottom: 40px;
}
div.task_stats p.stat_name {
    font-weight: bold;
}
div.task_stats div.stat_body {
    background: lightblue;
    padding: .3em;
    margin: .5em 0;
    font-size: .6em;
    line-height: 1.1em;
    word-wrap: break-word;
}

section.logs {
    margin-top: 2em;
}
div.logs {
    margin-bottom: 2em;
}
div.logs span.log_name, div.logs span.log_link {
    font-weight: bold;
}
div.logs span.log_link, div.logs span.log_extra {
    margin-left: 1em;
}
div.logs div.log_body {
    background: pink;
    padding: .3em;
    margin: .5em 0;
    font-size: .6em;
    line-height: 1.1em;
    word-wrap: break-word;
}

.content_box
{
    margin: 20px 20px 20px 0;
    background-color: #ddd;
}
.content_box .header
{
    background-color: #fff;
    font-size:18px;
    padding: 5px;
}
.content_box .content
{
    padding: 10px;
}
.code
{
     white-space: pre; font-family: monospace;
     padding: 10px;
}

.box_menu
{
    color: #16a854;
    float: right;
    padding: 5px;
    margin:-5px;
}
.box_menu:hover
{
    color: #fff;
    background-color: #16a854;
    text-decoration: none;
}
.inactive .box_menu
{
    color: #fff;
    background-color: #aaa
}
.inactive .box_menu:hover
{
    color: #fff;
    background-color: #aaa
}

.task_completion table, .task_completion tr
{
    border: 1px solid #777;
}
.task_completion th, .task_completion td
{
    padding: 5px 10px;
    text-align: center;
}
.task_completion th
{
    font-weight: bold;
}
.task_completion
{
    margin-top: 15px
}
.task_completion td:first-child {
    text-align: left;
}
.task_completion table:last-child td:last-child {
    text-align: right;
}

.task_table tr:nth-child(even)
{
    background-color: #ddd;
}
.task_table td, .task_table th
{
    padding: 5px 10px;
}

div.action {
    padding: 1em;
}
div.action button {
    margin: .1em .5em;
}

button.set_status {
    border: none;
    background: none;
    color: #2229ff;
    cursor: pointer;
}