@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,400italic,600,600italic,300,300italic,800,800italic);
.crispy {
 shape-rendering:crispEdges !important;
}


.optimizeQuality {
 shape-rendering:optimizeQuality !important;
}
.geometricPrecision {
shape-rendering:geometricPrecision !important;
}
.fontAxis {
font-size:15px;
       font-family:'Open Sans', sans-serif;
     font-weight: 600;
}
.font-10 {
font-size:10px;
      font-family:'Open Sans', sans-serif;
     font-weight: 600;
}
.font-11 {
font-size:11px;
      font-family:'Open Sans', sans-serif;
     font-weight: 600;
}
.font-12 {
font-size:12px;
      font-family:'Open Sans', sans-serif;
     font-weight: 600;
}
.font-13 {
font-size:13px;
       font-family:'Open Sans', sans-serif;
     font-weight: 600;
}
.font-14 {
font-size:14px;
       font-family:'Open Sans', sans-serif;
     font-weight: 600;
}
.font-15 {
font-size:15px;
       font-family:'Open Sans', sans-serif;
     font-weight: 600;
}

.bold {
     font-weight: bold !important;
}

/* CHART BACKGROUND  ******************************************************************************************/

/* LINES *******************************
<svg height="80" width="300">
  <g class="graphLine">
    <path stroke-dasharray="5,3" d="M5 20 l215 0" />  
  </g>  
</svg>
*/

.graphLine{
    fill:none !important;
    stroke: #dedede !important;    
        
    stroke-width: 1 !important;
    shape-rendering:crispEdges !important;
}

/* BACKGROUND ********************************/
.graphBG{
    background-color: #f3f3f3;
    fill: #f3f3f3;
    shape-rendering:crispEdges;
     stroke: #333;    
    stroke-width: 1;
}


/* END CHART BACKGROUND  ******************************************************************************************/

/**OVERLAY TRANSPARENCY */

.transparency_overlay{
        opacity:0.75;
        fill-opacity:0.75;
        }
/**END HOVER TRANSPARENCY */

/* BOTTOM TIME RANGE BUTTONS ******************************************************************************************/

.buttonBG {
    background-color: #efefef;
    fill: #efefef;
    stroke-width: 0.5;
    stroke: #333;
}

.buttonText {
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 600;
}
/*

 <svg width="100%" height="100%" style="position:absolute;top:0;left:0">
                    <g class="yearChanges" transform="translate(15,500)">

                        <text text-anchor="start" class="buttonText" width="60" height="25" y="14" x="7">Years:</text>
                        <g transform="translate(60,0)">
                            <g class="numYears" data-start="1928" data-end="end" data-max="400">
                                <rect class="buttonBG" width="25" height="18" y="0" x="0" rx="8" ry="8"></rect>
                                <text text-anchor="middle" class="buttonText" width="25" height="25" y="14" x="12.5">87</text>
                            </g>
                            <g class="numYears" data-start="1965" data-end="end" transform="translate(30,0)" data-max="300">
                                <rect class="buttonBG" width="25" height="18" y="0" x="0" rx="8" ry="8"></rect>
                                <text text-anchor="middle" class="buttonText" width="25" height="25" y="14" x="12.5">50</text>
                            </g>
                            <g class="numYears" data-start="1975" data-end="end" transform="translate(60,0)" data-max="200">
                                <rect class="buttonBG" width="25" height="18" y="0" x="0" rx="8" ry="8"></rect>
                                <text text-anchor="middle" class="buttonText" width="25" height="25" y="14" x="12.5">40</text>
                            </g>
                            <g class="numYears" data-start="1985" data-end="end" transform="translate(90,0)" data-max="150">
                                <rect class="buttonBG" width="25" height="18" y="0" x="0" rx="8" ry="8"></rect>
                                <text text-anchor="middle" class="buttonText" width="25" height="25" y="14" x="12.5">30</text>
                            </g>
                            <g class="numYears" data-start="1995" data-end="end" transform="translate(120,0)" data-max="100">
                                <rect class="buttonBG" width="25" height="18" y="0" x="0" rx="8" ry="8"></rect>
                                <text text-anchor="middle" class="buttonText" width="25" height="25" y="14" x="12.5">20</text>
                            </g>
                            <g class="numYears" data-start="2005" data-end="end" transform="translate(150,0)" data-max="50">
                                <rect class="buttonBG" width="25" height="18" y="0" x="0" rx="8" ry="8"></rect>
                                <text text-anchor="middle" class="buttonText" width="25" height="25" y="14" x="12.5">10</text>
                            </g>
                            <g class="numYears" data-start="2010" data-end="end" transform="translate(180,0)" data-max="50">
                                <rect class="buttonBG" width="25" height="18" y="0" x="0" rx="8" ry="8"></rect>
                                <text text-anchor="middle" class="buttonText" width="25" height="25" y="14" x="12.5">5</text>
                            </g>
                            <g class="numYears" data-start="2012" data-end="end" transform="translate(210,0)" data-max="50">
                                <rect class="buttonBG" width="25" height="18" y="0" x="0" rx="8" ry="8"></rect>
                                <text text-anchor="middle" class="buttonText" width="25" height="25" y="14" x="12.5">3</text>
                            </g>
                        </g>
                    </g>
                </g>
 </svg>



*/

/* END BOTTOM TIME RANGE BUTTONS ******************************************************************************************/