/*html, body {margin:0;padding:0;height:100%;}*/

body {
  /*display: flex;
  flex-direction: column;*/
}

div {
  position: relative;
  float: left;
}

svg {
  position: relative;
  float: left;
}

.topContainer {
    width: 55%;
    height: 50%;
}

.middleContainer {
    width: 55%;
    height: 50%;
}

.treeMap{
    width: 100%;
    height: 100%;
}

.parallelCoordinatesChart {
  width: 100%;
  height: 90%;
}

#candlestickChart {
  width: 45%;
  height: 50%;
  position: relative;
}

#differenceChart {
  width:45%;
  height:50%;
  position: relative;
}



/* Difference Chart */

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

.x.axis path {
  display: none;
}

.area.above {
  fill: rgb(255, 0, 0);
}

.area.below {
  fill: rgb(145,207,96);
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}



/* Treemap */

text {
  pointer-events: none;
}
.grandparent text {
  font-weight: bold;
}
rect.parent,
.grandparent rect {
  stroke-width: 3px;
}
.grandparent:hover rect {
  fill: grey;
}
.children rect.parent,
.grandparent rect {
  cursor: pointer;
}
.children rect.child {
  opacity: 0;
}
.children:hover rect.child {
  opacity: 1;
  stroke-width: 1px;
}
.children:hover rect.parent {
  opacity: 0;
}
.form-group {
    text-align:left;
}
.foreignobj {
  cursor: pointer;
}
.textdiv {
    font-family: "Open Sans",Helvetica,Arial,sans-serif;
    font-size: 14px;
    padding: 7px;
    overflow:none;
}
.textdiv .title {
    font-size: 102%;
    font-weight: bold;
    margin-top: 8px;
    font-size:11px !important;
}
.textdiv p{
    line-height: 13px;
    margin:0 0 4px !important;
    padding:0px;
    font-size:10px !important;
}




/* candlestick chart */

.axis text {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    fill: black;
}

.upGreenArrow{
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 4.5px 12px 4.5px;
   border-color: transparent transparent #00ff00 transparent;
}

.downRedArrow{
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 12px 4.5px 0 4.5px;
   border-color: #ff0000 transparent transparent transparent;
}

.upArrow{
  position: relative;
  top: -15px;
  left: -10px;
  width:0;
  height:0;
  border: 6px solid transparent;
  border-bottom-color: #00ff00;
}
.upArrow:after{
  position: absolute;
  content: '';
  top: 20px;
  left: -3px;
  width: 6px;
  height: 10px;
  background: #00ff00;
}

.downArrow{
  position: relative;
  top: 18px;
  left: -10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #ff0000;
}
.downArrow:after{
  position: absolute;
  content: '';
  top: -15px;
  left: -3px;
  width: 6px;
  height: 10px;
  background: #ff0000;
}


/* tooltip */
#tooltip {
  position: absolute;
  width: auto;
  height: auto;
  padding: 10px;
  background-color: black;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
}

#tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: white
}

#Date, #Stock, #CompName, #SectorName {
  font-weight: bold;
}