body {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 10pt;
}

#header-errors-div {
    background-color: hotpink;
}

.exception-message-summary {
    background-color: lightpink;
}

span.inline {
    display: inline-block;
}

table.table-wide1600 {
    width: 1600px;
}

table.table-thin {
    width: 300px;
}

table {
    text-align: left;
    white-space: nowrap;
}

table th {
    background-color: lightgrey;
}

.table-fix-header thead th {
    position: sticky;
    top: 0;
}

table tbody tr:hover {
    background-color: #d1d1d1 !important;
}

table tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}

.hidden {
    display: none !important;
}
/* shown gets added to an element with hidden to "counteract/reverse" the hidden marker */
.hidden.shown {
    display: inherit !important;
}

.template {
    display: none !important;
}

.is-hot {
    background-color: #9fff9f;
}

.status-RUNNING {
    background-color: greenyellow;
}
.status-ORPHANED {
    background-color: hotpink;
}
.status-RUNNING-FAILURES {
    background-color: #edff24;
}
.status-ORPHANED-FAILURES {
    background-color: #ff4879;
}
.status-WAITING-FAILURES {
    background-color: rgba(160, 16, 47, 0.89);
}
.status-FAILURES {
    background-color: red;
}
.status-SUPERCEDED {
    background-color: #628927;
}
.status-CANCELLED {
    background-color: pink;
}
.status-OWNED {
    background-color: #c8fbc5;
}
.status-COMPLETE {
    background-color: green;
    color: white
}
.status-FAILED {
    background-color: red;
}
.status-STARTING {
    background-color: yellow;
}
.status-ASSAY_RUNS_FOLDED {
    background-color: lightgoldenrodyellow;
}
.status-QUEUED {
    background-color: #aad62f;
}
.status-NO_INSTANCE {
    background-color: lightsteelblue;
}
.status-AWAITING_TASK_SUBMISSION {
    background-color: darkgreen;
}
.status-ALIVE {
    background-color: limegreen;
}

.status--UNNEEDED {
    background-color: palegreen;
    color: black;
}

.status--AVAILABLE {
    background-color: green;
    color: white;
}
.status--HOLIDAY {
    background-color: #004300;
    color: white;
}
.status--WEEKEND {
    background-color: #004300;
    color: white;
}
.status--DISABLED {
    background-color: #004300;
    color: white;
}
.status--STARTED {
    background-color: blue;
    color: white;
}
.status--POLLING {
    background-color: cornflowerblue;
    color: black;
}
.status--RUNNING {
    background-color: #62edbf;
    color: black;
}
.status--RERUN {
    background-color: #edeb57;
    color: black;
}
.status--FAILED {
    background-color: red;
    color: black;
}
.status--COMPLETE {
    background-color: lawngreen;
    color: black;
}
.status--INCOMPLETE {
    background-color: red;
    color: black;
}
.status--CHECK_FAILED {
    background-color: red;
    color: black;
}
.status--OVERDUE {
    background-color: red;
    color: black;
}
.status--MISSING_ERROR {
    background-color: red;
    color: black;
}
.status--PRIOR_MISSING_ERROR {
    background-color: red;
    color: white;
}
.status--MISSING_CLEARED {
    background-color: blue;
    color: white;
}
.status--STARTED {
    background-color: blue;
    color: white;
}

.duration-minute { background-color: lightgreen }
.duration-hour { background-color: lightgoldenrodyellow }
.duration-day { background-color: red }

.input {
    width: 99%;
}

label > input {
    vertical-align: middle;
}

.nowrap {
    white-space: nowrap;
}
.wrap-normal {
    white-space: normal;
}
.data-missing { background-color: pink; }
.data-exists { background-color: lightgreen; }

.shadowed {
    background-color: whitesmoke;
}

.shadowed-darker {
    background-color: #c4c4c4;
}

.shadowed-darkest {
    background-color: #a1a1a1;
}

.inline-editor {
    width: 30em;
    height: 2em;
    margin: 0;
}

.fake-button {
    display: inline-block;
    background: #ddd;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

button {
    height: fit-content;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: whitesmoke;
}

.btn {
    height: fit-content;
    font-size: 12px;
    padding: 0px 0px;
    border-radius: 4px;
}

.popper-content {
    background-color: whitesmoke;
    margin: 10px;
}
.panel {
    background-color: whitesmoke;
    padding: 4px;
}

.error {
    background-color: hotpink;
}

.error-light {
    background-color: lightpink;
}

.notice {
    background-color: palegoldenrod;
}

th.prelim {
    background-color: #fff8dc !important;
}

.prelim {
    background-color: #fff8ed;
}

.loading {
    background-color: darksalmon;
}

/* added by table sorting/filtering */
.sort-field-on[sort-field-value]  {
     background-color: #97ffee;
 }
/* added by table sorting/filtering */
[sort-field-value] {
    background-color: #b5b5b5;
    cursor: pointer;
    padding-left: 2px;
    padding-right: 2px;
}

.inset-30px { padding: 30px; }
.inset-10px { padding: 10px; } /* padding insets the content on the background (inside the border */
.inset-3px { padding: 3px; } /* padding insets the content on the background (inside the border */
.framed-10px { margin: 10px; } /* margin creates a "frame" around the border and anything else in the element */

/* added by table sorting/filtering */
[sort-field-value]:hover {background-color: #ababab;}
.sort-field-on[sort-field-value]:hover { background-color: #61a5c2; }

.font-fixed {
    font-family: monospace;
}

.smaller {
    font-size: 0.8em;
}
.bigger {
    font-size: 1.2em;
}
.bolder {
    font-weight: bold;
}
.boldest {
    font-weight: bolder;
}
.bordered {
    border: 1px solid black;
}
.bordered-faintly {
    border: 1px solid lightgrey;
}
.right {
     text-align: right;
     padding-right: 7px;
 }
.center {
     text-align: center;
 }
.pre-with-wrapping {
    white-space: pre-wrap;
    margin-top: 0;
    margin-bottom: 0;
}

.pre-adjusted {
    margin-top: 0;
    margin-bottom: 0;
}

[data-freeze=on] {
    background-color: darkred;
}

.fit-contents-width {
    width: fit-content;
}

.fit-container-width {
    width: 100%;
}

.fit-container-height {
    height: 100%;
}

.fit-screen-height {
    height: 100vw;
}

.fit-screen-width {
    width: 95vw;
}

.fit-screen-width {
    width: 95vw;
}

.fit-contents-height {
    height: fit-content;
}

.fit-page-width {
    width: 95%;
}

.cell-header {
    background-color: lightgrey;
    font-weight: bolder;
}

.fragment-header {
    background-color: darkgrey;
    font-weight: bolder;
    font-size: larger;
    padding: 3px;
}

.space-out + .space-out { margin-left: 1rem }

[data-sort-unimplemented] {
    background-color: lightpink;
}

.flexible-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flexible-row-bottoms {
    align-items: flex-end;
}
.flexible-row-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.flexible-row-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.flexible-row-centered {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.flexible-column {
     display: flex;
     flex-direction: column;
}
.flexible-column-reverse {
    display: flex;
    flex-direction: column-reverse;
}


/* only works with flexible-row and column variants  (align-items is the "off-axis" alignment of a flex container) */
.off-axis-centered { align-items: center; }
.off-axis-bottom-right { align-items: flex-end; }
.off-axis-top-left { align-items: flex-start; }

.off-axis-item-centered { align-self: center; }
.off-axis-item-bottom-right { align-self: flex-end; }
.off-axis-item-top-left { align-self: flex-start; }

.space-out-row > * + * {
    margin-left: 5px;
}
.compact-row > * + * {
    margin-left: 4px;
}
 .space-out-column > * + * {
     margin-top: 5px;
 }

.space-out-row-more > * + * {
    margin-left: 15px;
}

.edged5 {
    padding-left: 5px;
    padding-right: 5px;
}

.width5 { width: 5px; }
.width20 { width: 20px; }
.width100 { width: 100px; }

.height3 { height: 3px; }
.height10 { height: 10px; }
.height30 { height: 30px; }
.height100 { height: 100px; }

.level-1 { z-index: 2 }
.level-2 { z-index: 4 }


.flexible-spacer {
    flex-grow: 1;
    min-height: 1em;
}

.vertical-scroll {
    max-height: 550px;
    overflow: auto;
    overflow-y: scroll;
}

.scroller-panel {
    overflow: auto;
}

.scroll-horizontal {
    overflow: auto;
    overflow-x: scroll;
}