/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 .gritChart-tooltip, .tooltip {
      position      : fixed;
      text-align    : center;
      max-width     : 170px;
      max-height    : 130px;
      padding       : 8px;
      border        : none;
      border-radius : 6px;
      margin-top    : -30px;
      font          : 10px sans-serif;
      background    : rgba(0,0,0,0.75);
      color         : white;
      pointer-events: none;
	  font-size: 14px;
  }
.gritChartHorizontal .gritChartBarGroup { margin-bottom: 10px; }
.gritChartHorizontal .gritChartsXaxis { margin-top:-8px; }
.gritChartHorizontal .gritChartBar { margin-bottom: 1px; }

.gritChartBar-ValueLabel, .gritChartBar-ValueLabel p {
	font-size: 8px; font-family: Arial, Helvetica, sans-serif !important; font-weight: bold; color: #FFFFFF;
	word-break: normal;
    word-wrap: normal;
}

.gritChartBarGroupVerticalSpacing, 
.gritChartVertical .gritChartBarGroupVertical, .gritChartVertical .gritChartVertBarGroup-Label { margin-left: 5px;}

.gritChartBarGroupVertical .gritChartBar-ValueLabel p {
	font-size: 8px; font-family: Arial, Helvetica, sans-serif !important; font-weight: bold; color: #888888;
}

.gritChartBarGroup-Label, .gritChartBarGroup-Label p {
	font-size: 10px; line-height: 1; font-family: Arial, Helvetica, sans-serif !important;
	vertical-align: bottom;
	color: #999999;
}
.gritChartHorizontalStacked .gritChartBarGroup-Label {padding-left: 5px;padding-top: 3px;}
.gritChartBarGroup-Label p { /*position: absolute; bottom: 0;*/ width: 100%;  }

.gritChartWrapper svg { overflow: visible !important; }

.gritChartTitle { font-family: ProximaNova-Semibold, sans-serif !important; text-transform: uppercase; color: #728da0; font-size: 16px;line-height: 14px; margin-bottom: 10px; font-weight: 600; }

.gritChartVertBarGroup-LabelRotated {
	-webkit-backface-visibility: hidden;
	writing-mode: vertical-rl;
	max-height: 150px;
	text-align: right;
	margin-top: 5px;
	transform: rotate(180deg) ;
	-webkit-transform: rotate(180deg) ;
    -moz-transform: rotate(180deg) ;
    -ms-transform: rotate(180deg) ;
    -o-transform: rotate(180deg) ;
	-webkit-transform-origin: 50%  50%;
	line-height: 1;
}

.gritChartLegend-Item { font-family: Arial, Helvetica, sans-serif !important; font-size: 9px; font-weight: bold; color: #777777; margin-top:3px; margin-right: 10px; }
.gritChartLegend-Item-Symbol { display: relative; float: left; }
.gritChartLegend-Item-Label { white-space: nowrap; padding-right: 10px;}

.gritChartLabels-xAxis { margin-top:5px; }

.gritChartsXaxis { width:100%; margin-bottom: 1px; line-height:1; }

.gritChartYaxis svg { height:100%; }

.gritCharts-TickAxis svg.gritTick text { font-size: 8px; }

.gritChartAxisBar {
	fill: #999999 !important;
	background-color: #999999 !important; 
}

svg.gritTick text { fill: #bbb !important; }

svg.gritTick line { stroke: #999999 !important; }

	.gritChartsXaxis svg svg.gritTick text { fill: #bbb !important; }
	.gritChartsXaxiss svg svg.gritTickEven text { fill: #bbb !important; }
	.gritChartsXaxis svg svg.gritTickOdd text { fill: #bbb !important; }
@media only screen and (min-width: 701px) {
	.gritChartsXaxis svg svg.gritTick text { fill: #bbb !important; }
	.gritChartsXaxis svg svg.gritTickEven text { fill: #bbb !important; }
	.gritChartsXaxis svg svg.gritTickOdd text { fill: #bbb !important; }
}

@media only screen and (max-width: 700px) {
  .gritChartsXaxis svg svg.gritTickEven { display:block !important; }
  .gritChartsXaxis svg svg.gritTickOdd { display:block !important; }
  .gritChartsXaxis svg svg.gritTick { display:none; }
}
@media only screen and (max-width: 500px) {
  .gritChartsXaxis svg svg.gritTickEven { display:block !important; }
  .gritChartsXaxis svg svg.gritTickOdd { display:none !important; }
  .gritChartsXaxis svg svg.gritTick { display:none; }
}