/*
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.hiplot {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}
.hiplot {
  font-family: Ubuntu, Tahoma, Helvetica, sans-serif;
  background: #f7f7f7;
  color: #404040;
}
.hiplot a {
  text-decoration: none;
}
.wrap {
  padding: 0 3.5%;
}
.parallel-plot-chart svg {
  font-family: Ubuntu, Tahoma, Helvetica, sans-serif;
}
.parallel-plot-chart canvas, .parallel-plot-chart svg {
  position: absolute;
  top: 0;
  left: 0;
}
.parallel-plot-chart {
  position: relative;
}
.hiplot .brush rect.extent {
  fill: rgba(100,100,100,0.15);
  stroke: #fff;
}
.hiplot .brush:hover rect.extent {
  stroke: #222;
  stroke-dasharray: 5,5;
}
.hiplot .brush rect.extent:hover {
  stroke-dasharray: none;
}
.resize rect {
  fill: none;
}
.background {
  fill: none;
}
.axis line, .axis path {
  fill: none;
  stroke: #777;
  stroke-width: 1;
}
.axis :global(.tick) {
  width: 200px;
}
.axis text {
  fill: #111;
  text-anchor: right;
  font-size: 13px;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
.axis .tickSelected {
  font-size: 16px;
  font-weight: bold;
}
.axisLabelText {
  white-space: nowrap;
}
.axis .label {
  cursor: move;
  font-size: 16px;
}
.quarter, .third, .half {
  float: left;
}
.quarter {
  width: 23%;
  margin: 0 1%;
}
.third {
  width: 31.3%;
  margin: 0 1%;
}
.half {
  width: 48%;
  margin: 0 1%;
}
.hiplot h3 {
  margin: 12px 0 9px;
}
.hiplot h3 small {
  color: #888;
  font-weight: normal;
}
.hiplot p {
  margin: 0.6em 0;
}
.hiplot small {
  line-height: 1.2em;
}


.renderedBar,
.selectedBar {
  width:0%;
  font-weight: bold;
  height: 100%;
}
.renderedBar {
  background: #3d9aff;
  border-right: 1px solid #666;
}
.selectedBar {
  background: rgba(171, 171, 171, 0.5);
  border-right: 1px solid #999;
}
.fillbar {
  height: 2px;
  line-height: 2px;
  width: 100%;
}
.little-box {
  width: 268px;
  float: left;
}
.controls {
  float: right;
  height: 24px;
  line-height: 24px;
}
.header button {
  border-color: black !important;
}
.header button:disabled{
  border: solid 1px transparent !important;
}

/* Scrollbars */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #ddd;
  border-radius: 12px;
}

::-webkit-scrollbar-thumb {
  background: #b5b5b5;
  border-radius: 12px;
}


.plotxy-graph-svg :global(.tick) line {
  color: #9a9a9a26;
}
.distr-graph-svg :global(.tick) line {
  color: #9a9a9a26;
}

.min-height-100 {
  min-height: 100vh;
}

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

.colorBlock {
  height: 10px;
  width: 10px;
  display: inline-block;
}

/* Tooltips when hovering column labels */
.tooltipContainer {
  display: inline-block;
}

.tooltipBot {
  top: 100%;
  left: 0%;
}
/* Tooltip text */
.tooltipContainer .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipContainer:hover .tooltiptext {
  visibility: visible;
}


/* Histogram */
.histSelected line {
  stroke: black;
  stroke-width: 2;
}
.histAll rect {
  fill: rgb(148, 103, 189);
}


.runsSelectionTextarea {
  width:  100%;
  height:  50px;
  font-family:monospace;
  font-size: 12pt;
  resize: none;
  overflow: hidden;
}

.hasFocus {
  height: 25px !important;
}

.header {
  border-bottom: 1px solid rgba(100,100,100,0.35);
  background: #e2e2e2;
  padding: 6px 24px 4px;
  line-height: 24px;
}
.header h1 {
  display: inline-block;
  margin: 0px 14px 0 0;
}
.header button {
  vertical-align: top;
}

.controlGroup {
  margin-left: 5px;
  margin-right: 5px;
}


/* dark theme */

.dark .header {
  background: #040404;
  color: #f3f3f3;
}

.dark {
  background: #131313;
  color: #e3e3e3;
}
.dark a {
  color: #5ae;
}
.dark .background {
  fill: none;
}
.dark .brush rect.extent {
  fill: rgba(100,100,100,0.15);
  stroke: #ddd;
}
.dark ::-webkit-scrollbar-track {
  background: #222;
}
.dark ::-webkit-scrollbar-thumb {
  background: #444;
}
.dark .axis text {
  fill: #f2f2f2;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000, -1px 0 0 #000;
}
.dark .axis text.label {
  fill: #ddd;
}
.dark .axis line, .dark .axis path {
  stroke: #777;
}
.dark .header button:enabled {
  border-color: white !important;
}
.dark .histSelected line {
  stroke: white;
  stroke-width: 2;
}
.dark .histAll rect {
  fill:rgb(99, 80, 117);
}