
<style>

.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}


// Para mostrar tooltip em grafico de linha é muito complicado pegar o ponto,
// entao o que se recomenda no d3js eh desenhar circulos em cada ponto da linha e
// mostrar o tooltip a partir do circulo.
.circle {
    fill: white;
    stroke: steelblue;
    stroke-width: 1.5px;
}

.bar {
  fill: steelblue;
}

.svg_colab_exterior_div{
  border:2px solid #E0E0E0 
}

#outer_pizza{
	position:relative;
	border:2px solid #E0E0E0 ;
	display: inline-block;
	width: 100%;
}

#svg_pizza_financeiro_div{
	/*position: absolute;*/
	/*bottom: 2px;*/
  /*border:2px solid #E0E0E0 ;*/
	display: inline-block;
	float:left;
  position: relative;	
}




#table_pizza{
	position: absolute;
	bottom: 2px;
	display: inline-block;
	
	/*border:2px solid black ;*/
}

tr.border_bottom td {
  border-bottom:1pt solid black;
}

#svg_pizza_cx_totalizacao_div{
  /*border:2px solid #E0E0E0 ;*/
  text-align: center
}

/* 
 #svg_barchart_financeiro_div, #svg_barchart_100pct_div, #stacked_area_financeiro_div, #svg_linhas_vigentes_div, #svg_barras_historico_div{
  */


.svg_divs {
  border:2px solid #E0E0E0 ;
	margin-top: 40px ;
	margin-bottom: 40px;
}

.grid .tick {
    stroke: black;
    /*stroke-opacity: 0.5;*/
    shape-rendering: crispEdges;
}
.tick line {
  stroke: black;
}

.grid_over {
    stroke: black;
    stroke-opacity: 0.3;
    shape-rendering: crispEdges;
}


.grid path {
          stroke-width: 1;
          stroke-opacity: 0.2;
}

.area { fill: #4ca3bd; }


.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

/*.axis--x path {*/
/*  display: none;*/
/*}*/

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.y .tick line { stroke: #ddd; }
.x .tick line { stroke: #ddd; }
</style>

