﻿#chartPctStatistics canvas,#chartPctStatistics canvas, #chartRaceStatistics canvas, #chartSchoolCharacteristics canvas{
    display: block;
    width: 100%;
    visibility: hidden;
}
#chartStudentEnrolled, #chartPctStatistics, #chartRaceStatistics, #chartSchoolCharacteristics {
     position:relative;
     width:100%;
}

#chartStudentEnrolled svg ,#chartPctStatistics svg,#chartRaceStatistics svg,#chartSchoolCharacteristics svg{
     position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 1rem;
    font-family: OpenSans, sans-serif;
}

@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/opensans-bold-webfont.woff');
    font-weight: bold;
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('../fonts/opensans-light-webfont.woff');
    font-weight: lighter;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/opensans-regular-webfont.woff');
    font-weight: normal;
}


/*STUDENT CHARACTERISTICS*/
circle1 {
  fill: #0C2268;
}
.circle2 {
  fill: #B8A693;
}
.circle1 {
  fill: #0C2268;
}
.circle3 {
  fill: #ff0000; 
  /*TODO dummy */
}

.circletext {
  fill: #fff;
  text-anchor: middle;
  font-family: OpenSans, sans-serif;
  font: bold 20px OpenSans, sans-serif;
  
}
.statetext1{
fill: #0C2268;
 text-anchor: start;
  font: bold 28px OpenSans, sans-serif;
}
.statetext2{
fill: #B8A693;
 text-anchor: start;
  font: bold 28px OpenSans, sans-serif;
}

.statetext3{
fill: #ff0000;
 text-anchor: start;
  font: bold 28px OpenSans, sans-serif;
  /*TODO dummy */
}



.bar {
  fill: #0C2268;
}
.bar2 {
  fill: #B8A693;
}

.bar:hover {
  fill: brown;
}
.bar2:hover {
  fill: brown;
}
.bartext,.bartext2{
  font: 13px OpenSans, sans-serif;
  fill:#808184;
}
.title {
  font: bold 16px OpenSans, sans-serif;
}

.axis {
  font: 13px sans-serif;
  fill:#808184;
}

.axis path,
.axis line {
  fill: none;
  stroke: #808184;
  shape-rendering: crispEdges;
}

#chartTooltip {   
		position: absolute;           
		text-align: center;
		padding: 20px;             
		margin: 10px;
		font: 13px OpenSans, sans-serif;        
		background: lightsteelblue;   
		border: 1px;      
		border-radius: 2px;           
		pointer-events: none; 
        top:0;        
	}
	#chartTooltip h4{
		margin:0;
		font-size:14px;
        color:white;
	}
	#chartTooltip{
		background:rgba(0,0,0,0.9);
		border:1px solid grey;
		border-radius:5px;
		font-size:13px;
		width:auto;
		padding:4px;
		color:white;
		opacity:0;
	}
	#chartTooltip table{
		table-layout:fixed;
	}
	#chartTooltip tr td{
		padding:2px;
		margin:0;
	}
	#chartTooltip tr td:nth-child(1){
		width:50px;
	}
	#chartTooltip tr td:nth-child(2){
		text-align:center;
	}
