.tl-container {
    position: relative;
}

/*set the containers for the two charts that make up the table lens.*/
.tl-container .container_chart1 {
  position: absolute;
  left: 0px;
  width: 400px;
  top: 120px;
}
.tl-container .container_chart2{
  position: absolute;
  left: 500px;
  width: 400px;
  top: 120px;
}


/*set the container for the hover tooltip.*/
.tl-container div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 215px;					
    height: 105px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: white;	
    border: solid;
    border-width: 1px;	
    border-color: black;	
    border-radius: 5px;			
    pointer-events: none;
    z-index:5;			
}

.tl-titles {
  display: table-cell; vertical-align: middle;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-size:14;
  color: #2c3e50;
  height:60px;
}

/*set the container for the strip plots.*/
.tl-container .container_stripPlot1 {
  position: absolute;
  left: 0px;
  width: 400px;
  margin-bottom:0px;
  padding-bottom:0px;
  margin-top:10px;
  padding-top:10px;
}

.tl-container .container_stripPlot2{
  position: absolute;
  left: 500px;
  width: 400px;
  margin-bottom:0px;
  padding-bottom:0px;
  margin-top:10px;
  padding-top:10px;
}

/*css for the strip plot axis.*/
.tl-container .axis path,
.tl-container .axis line {
    fill: none;
    stroke: none;
    shape-rendering: crispEdges;
}

.tl-container .axis text {
    font-family: sans-serif;
    font-size: 11px;
}