body {
    padding: 20px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.fa-input {
    font-family: FontAwesome, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.grid-container {
    width: 100%;
    float: left;
    clear: left;
    min-width: 1200px;
}

.grid-container.spacer {
    margin-bottom: 40px;
}

.grid-header {
    width: 16%;
    height: 170px;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: whitesmoke;
    margin-right: 0.5%;
    margin-bottom: 10px;
    float: left;
    min-width: 244px;
}

.grid-header > div {
    padding-top: 5px;
    padding-left: 5px;
}

.grid-header > div textarea {
    width: 80%;
    margin-bottom: 5px;
    min-width: 160px;
}

.grid-info {
    width: 16%;
    height: 400px;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: whitesmoke;
    float: left;
    margin-right: 0.5%;
    margin-bottom: 5px;
    min-width: 244px;
}

.grid-info > div {
    padding-top: 5px;
    padding-left: 5px;
}

.grid {
    width: 95%;
    height: 600px;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #ddd;
    margin: 10px 0;
    border: 10px solid #ddd;
    clear: both;
}

.grid > div {
    background-color: #fff;
    position: absolute;
}

.grid-info > div {
    background-color: #fff;
    position: absolute;
}

.action_button {
    display: inline-block;
    width: 110px;
    padding: 1px;
}

.action_toogle:hover {
    font-weight: bold;
    color: blueviolet;
}

.clear {
    clear: both;
}

div.tree_header_tile {
    background-color: lightsalmon;
}

div.process_header_tile_off {
    background-color: lightgray;
}

div.process_header_tile_on {
    background-color: lightsalmon;
}

div.process_header_tile_off .fa-ul, div.process_header_tile_on .fa-ul {
    margin-bottom: 2px;
}

div.process_info_tile {
    background-color: #ffbb88;
}

div.table_layout {
    display: table;
}

div.table_layout_element {
    display: table-cell;
    vertical-align: top;
}

div.tile_component {
    float: left;
}

div.is_selected_timeperiod {
    border: 2px dotted darkorange;
}

div.is_next_timeperiod {
    border: 2px solid darkred;
}

div.state_embryo {
    background-color: #D5F5FF;
}

div.state_embryo div {
    color: #000000;
}

div.state_in_progress {
    background-color: #C3FDB8;
}

div.state_in_progress div {
    color: #000000;
}

div.state_processed {
    background-color: #15C200;
}

div.state_processed div {
    color: #000000;
}

div.state_final_run {
    background-color: #ADFF2F;
}

div.state_final_run div {
    color: #000000;
}

div.state_skipped {
    background-color: #FF4500;
}

div.state_skipped div {
    color: #000000;
}

div.state_noop {
    background-color: #FFFFAA;
}

div.state_noop div {
    color: #000000;
}

div.state_inconsistent {
    background-color: #d28aff;
}

div.state_inactive {
    background-color: lightgray;
}
