dashboard.css

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: rgb(47, 47, 47);
  color: #cccccc;
}
div {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 10px;
}
h2 {
  font-size: 1.0em;
  margin-top: 0.1em;
  margin-bottom: 0.3em;
}
h3 {
  font-size: 0.9em;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}
h4 {
  font-size: 0.8em;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}
br.clear {
  clear: both;
}

div.stack_legend_h3 {
  float: left;
  font-size: 0.6em;
  margin: 5px 10px 0 30px;
}
div.stack_legend_h4 {
  float: left;
  font-size: 0.6em;
  margin: 5px 10px 0 34px;
}

span.fiq_col_legend {
  background-color: #865bff;
  color: #865bff;
  font-size: 0.6em;
  padding: 0 3px 0 3px;
}

span.norm1_col_legend {
  background-color: #82c0ff;
  color: #82c0ff;
  font-size: 0.6em;
  padding: 0 3px 0 3px;
}

span.norm2_col_legend {
  background-color: #5b87ff;
  color: #5b87ff;
  font-size: 0.6em;
  padding: 0 3px 0 3px;
}

span.limit_1_legend {
  background-color: #ffc447;
  color: #ffc447;
  font-size: 0.6em;
  padding: 0 3px 0 3px;
}

span.limit_2_legend {
  background-color: #fd464b;
  color: #fd464b;
  font-size: 0.6em;
  padding: 0 3px 0 3px;
  margin-left: 5px;
}


circle {
  /*fill: #D88F00;*/
  /*fill: #5B87FF;*/
}

.first_series_heading {
  color: #5b87ff;
}
.second_series_heading {
  color: #ffc447;
}
.third_series_heading {
  color: #865bff;
}

.axis path,
.axis line {
  fill: none;
  stroke: #cccccc;
  shape-rendering: crispEdges;
  pointer-events: none;
}

.axis text {
  font-family: sans-serif;
  font-size: 12px;
  fill: #cccccc;
  pointer-events: none;
}

.axis_label {
  font-family: sans-serif;
  font-size: 10px;
  fill: #cccccc;
  text-anchor: middle;
  text-anchor: end;
  pointer-events: none;
}
.axis_label_x {
  font-family: sans-serif;
  font-size: 10px;
  fill: #cccccc;
  text-anchor: middle;
  text-anchor: end;
  pointer-events: none;
}

.line {
  fill: none;
  stroke-width: 0.8px;
  stroke: lightgrey;
}
.ucl_line {
  fill: none;
  stroke: orange;
}

.box {
  font: 10px sans-serif;
  fill: #5b87ff;
}

.box line,
.box rect,
.box circle {
  fill: #ffffff;
  stroke: #000000;
  stroke: #5b87ff;
  stroke-width: 1.5px;
}

.box .center {
  stroke-dasharray: 3,3;
}

.box .outlier {
  fill: none;
  stroke: #cccccc;
}

.box2 {
  font: 10px sans-serif;
  fill: #ffc447;
}

.box2 line,
.box2 rect,
.box2 circle {
  fill: #ffffff;
  stroke: #ffc447;
  stroke-width: 1.5px;
}

.box2 .center {
  stroke-dasharray: 3,3;
}

.box2 .outlier {
  fill: none;
  stroke: #cccccc;
}

.box2 text {
  fill: #ffc447;
}

.box3 {
  font: 10px sans-serif;
  fill: #865bff;
}

.box3 line,
.box3 rect,
.box3 circle {
  fill: #ffffff;
  stroke: #865bff;
  stroke-width: 1.5px;
}

.box3 .center {
  stroke-dasharray: 3,3;
}

.box3 .outlier {
  fill: none;
  stroke: #cccccc;
}

.box3 text {
  fill: #865bff;
}


/*add the remaining box3 styles*/

#header_title {
  float: left;
}
#starts {
  float: right;
  margin-right: 30px;
}
#title {
  margin-bottom: 0;
  margin-top: 5px;
  font-size: 1.7em;
}
#date {
  font-size: 1.3em;
  font-weight: bold;
}

.times_panel {
  float: left;
}
.barchart_panel {
  float: left;
}
.barchart_panel svg {
  margin-top: 25px;
}
.barchart_panel h2 {
  /*margin-bottom: 35px;  */
}
.barchart_panel rect {
  fill: #5b87ff;
}
.barchart_panel .major text {
  font-family: sans-serif;
  font-size: 10px;
  fill: #cccccc;
}
.bar_label {
  font-family: sans-serif;
  font-size: 10pt;
  fill: white;
}
#ongoing_bc {
  float: left;
}
#ongoing_bc_plot {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 19px; /*= height of h4*/
  margin-left: 0;
  background-image:         linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:      -o-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:    -moz-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:     -ms-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.18, rgb(21,21,21)),
  color-stop(0.59, rgb(93,93,93))
  );
}
#ongoing_bc_plot svg {
  font: 10px sans-serif;
  fill: #ffffff;
  shape-rendering: crispEdges;
}

#ongoing_bc_plot svg text {
  pointer-events: none;
}

#fs_prog_bc h2 {
  margin-bottom: 5px;
}
#fs_prog_bc p {
  margin-top: 5px;
}

#total_rc,
#rec_ctrl_rc,
#lib_prep_rc,
#seq_rc,
#fs_ws_rc,
#data_del_rc {
  float: left;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 10px;
  background-image:         linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:      -o-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:    -moz-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:     -ms-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.18, rgb(21,21,21)),
  color-stop(0.59, rgb(93,93,93))
  );
}

.boxplot_panel {
  float: left;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  background-image:         linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:      -o-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:    -moz-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:     -ms-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.18, rgb(21,21,21)),
  color-stop(0.59, rgb(93,93,93))
  );
}

#barchart {
  float: left;
  margin-top: 0;
  margin-bottom: 30px;
  margin-left: 30px;
  padding-left: 10px;
}

#tooltip1,
#tooltip2,
#tooltip3 {
  text-anchor: left;
  font-family: sans-serif;
  font-size: 11px;
  fill: #cccccc;
}

/*Trying alternative tooltip strategy for panels*/
div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 38px;
  padding: 2px;
  font: 11px sans-serif;
  color: #ffffff;
  background: lightsteelblue;
  border: 0;
  border-radius: 8px;
  pointer-events: none;
}

.line_label {
  text-anchor: left;
  font-family: sans-serif;
  font-size: 11px;
  fill: teal;
  fill: #cccccc;
}

/*Queue stacked bar panels*/
#queue {
  float: left;
  margin-left: 10px;
  margin-right: 0;
}
#load_charts {
  float: left;
  margin-left: 0;
  background-image:         linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:      -o-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:    -moz-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:     -ms-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.18, rgb(21,21,21)),
  color-stop(0.59, rgb(93,93,93))
  );
}
#queue svg {
  font: 10px sans-serif;
  fill: #cccccc;
  shape-rendering: crispEdges;
}
/*#queue svg #tooltipA, #tooltipB {*/
svg #tooltipA,
#tooltipB {
  fill: #333333;
  stroke: none;
}
#queue_lp_load {
  float: left;
  margin-top: 0;
}
#queue_sample_load_lp {
  float: left;
  margin-top: 0;
  margin-left: 0;
}
#queue_fl_load {
  float: left;
  margin-top: 0;
  margin-right: 10px;
  margin-left: 5px;
  padding-left: 5px;
  border-left-width: 1px;
  border-left-color: white;
  border-left-style: solid;
}

#queue_lane_load_lp,
#queue_lane_load_fl {
  float: left;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

#ongoing {
  float: left;
}
#ongoing_load_charts {
  float: left;
  margin-left: 0;
  background-image:         linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:      -o-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:    -moz-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image:     -ms-linear-gradient(bottom, rgb(21,21,21) 18%, rgb(93,93,93) 59%);
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.18, rgb(21,21,21)),
  color-stop(0.59, rgb(93,93,93))
  );
}
#ongoing svg {
  font: 10px sans-serif;
  fill: #cccccc;
  shape-rendering: crispEdges;
}

#libprep_load {
  float: left;
  margin-top: 0;
}
#libprep_sample_load,
#libprep_lane_load {
  float: left;
  margin-top: 0;
  margin-left: 0;
}

#seq_load {
  float: left;
  margin-left: 5px;
  padding-left: 5px;
  border-left-width: 1px;
  border-left-color: white;
  border-left-style: solid;
}
#seq_load_stack {
  float: left;
  margin-top: 0;
  margin-left: 0;
  margin-right: 10px;
}