#title {    
    font-size: 2vmax;
    margin-top: 30px;  
    font-family: 'Roboto'';
    text-align: center;
} 

body {
    min-width: 1000px;
}
 
.bar {
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 14px sans-serif;
}


.axis path,
.axis line {
  fill: none; 
  stroke: #000;
  shape-rendering: crispEdges;
}

  .y.axis path, .x.axis path {
/*   display: none; */
}


#graph {
  width: 100%;
  height: 100%;
  position: relative;
}

#circleButtons {
    float: left;
}

#year {
    float: left;
}

.yearText:hover {
       font-weight: bold;
}

.yearText:active {
       font-weight: bold;
       color: yellow;
}


.itemBTN:hover {
    font-weight: bold;
}

#itemButtons {
    float: left;
}

.grid .tick {
    stroke: #E8E8E8;
}

.grid path {
      stroke-width: 0;
}

g.grid line {
    stroke: #E8E8E8;
}




#companyButtonGroup  {
  padding: 5px;
 margin: 5px;
 margin-left: 10px; 
 margin-right: 10px;

}


#employeeButtonGroup {
 padding: 5px;
 margin: 5px;
 margin-left: 13px; 
 margin-right: 10px;
}

#percentageCompanyBarTitle {
    margin-left: 30px;
    margin-bottom: -20px;
}

#percentageCompanyBarNotes {
    margin-left: 30px;
    font-size: 12px;
}

.sortButton {
    height: 10px;
/*  border-radius: 3px; */
    margin-top: 3px;

}

.buttonDiv {
    float: left;
    margin: 3px;
}

.employeeButtonDiv {
    float: left;
    margin-right: 6px;
}

#buttonGroup {
 font-size: 1.2vmax;
 margin-left: 15vmax;
}

#buttonGroups {
    float: left;
    text-align: center;
    margin-bottom: 20px;
}

/* .buttonGroupTitle { 
    margin-right: 0px; 
    margin-top: 18px; 
}  */

#buttonGroupsTitles { 
    float: left;
    font-size: 1.3vmax;
}


.explainDiv {
     margin: auto;
    width: 70%; 
    float: left;
    margin-left: 15vmax;
}

.explain {
    font-size: 2vmax;
     text-align: center;
 }


#titleBar {
    text-align: center;
}

.mainButtons {
    margin: 20px;
    font-size: 1.5vmax;
    text-align: center; 
    
}