.chart { list-style: none; }
 

.barCont .bg.blue1, .bg.blue1 { background: #367DCF; }
.barCont:hover .bg.blue1, .bg.blue1:hover { background: #2668B5; }

.barCont .bg.green1, .bg.green1 { background: linear-gradient(to right, #b6e026 0%,#abdc28 100%); }
.barCont:hover .bg.green1, .bg.green1 { background: linear-gradient(to right, #8fc400 0%,#8fc400 100%); }

.barCont .bg.green2, .bg.green2 { background: #97CC3B; }
.barCont:hover .bg.green2, .bg.green2 { background: #8ABD33; }

.barCont .bg.green3, .bg.green3 { background: #C0D67E; }
.barCont:hover .bg.green3, .bg.green3 { background: #AEC46A; }

.barCont .bg.red1, .bg.red1 { background:  #EB484B; }
.barCont:hover .bg.red1, .bg.red1:hover { background:  #B32A3E; }

.barCont .bg.grey1, .bg.grey1 { background:  #999; }
.barCont:hover .bg.grey1, .bg.grey1:hover { background:  #777; }

.bg.dg_blue { background: repeating-linear-gradient(  -45deg,  #1B9BE0,  #1B9BE0 10px,  #3AABE9 10px,  #3AABE9 20px); }
.barCont:hover .bg.dg_blue, .bg.dg_blue:hover {   background: repeating-linear-gradient(  -45deg,  #1694D7,  #1694D7 10px,  #1B9BE0 10px,  #1B9BE0 20px);   }

.bg.dg_red { background: repeating-linear-gradient(  -45deg,  #e00,  #e00 10px,  crimson 10px,  crimson 20px); }
.barCont:hover .bg.dg_red, .bg.dg_red:hover {   background: repeating-linear-gradient(  -45deg,  #1694D7,  #1694D7 10px,  #1B9BE0 10px,  #1B9BE0 20px);   }

.bg.dg_pink { background: repeating-linear-gradient(  -45deg,  #F16C9A,  #F16C9A 10px,  #E06791 10px,  #E06791 20px); }
.barCont:hover .bg.dg_pink, .bg.dg_pink:hover {   opacity: 0.8;  }

.bg.grey { background: #bbb; }
.barCont:hover .bg.grey, .bg.grey:hover {   opacity: 0.8;  }


/* LEGEND */
.legend  {  list-style: none; overflow: hidden;  }
.legend li {  overflow: hidden;    }
.legend.v1 li { float: left; padding-right: 11px;  }
.legend li span { display: block; float: left;  font-size: 11px; color: #333; }
.legend li span.clr { display: inline-block; width: 8px; height: 8px; margin-right: 2px; margin-top: 3px;  }


/* barchart_simple */
.barchart_simple .label { font-size: 12px; background: #fff; }
.barchart_simple .barCont {  float: left;  position: relative; text-align: center;  }
.barchart_simple .bgCont {  background: #E6F0F5; position: relative;  }
.barchart_simple .barCont:hover .bgCont { background: #DAE7ED;  }
.barchart_simple .bg { position: relative; width: 100%;  }
 
/* barchart horizontal */
.bc_horiz_v1 { list-style: none; width: 100%;  }
.bc_horiz_v1 li.data { overflow: hidden; border-top: 1px solid #eee; padding: 4px 2px; width: 100%; }
.bc_horiz_v1 li.data:hover { background: #E9F0F5; }
.bc_horiz_v1 li.thead { font-weight: bold;  }

.bc_horiz_v1 li div.rnk { float: left;  width: 5%; text-align: center;  }
.bc_horiz_v1 li div.label { float: left;  width: 36%; text-align: right;  }
.bc_horiz_v1 li div.label .flag.before { display: none;  }
.bc_horiz_v1 li div.value { float: left; width: 12%; text-align: center;  }
.bc_horiz_v1 li div.bar { float: left; width: 47%;   overflow: hidden;  }
.bc_horiz_v1 li div.bar span.bg { display: block; height: 14px; background: #9ACD32; float: left;  }
.bc_horiz_v1 li div.bar span.val { display: block; float: left; font-size: 11px; padding-left: 3px; display: none;  }
.bc_horiz_v1 li:hover div.bar span.bg { background: #76A31A;  }

@media screen and (max-width: 500px){
  .bc_horiz_v1 li div.rnk { height: 30px; line-height: 30px; width: 10%;  }
  .bc_horiz_v1 li div.label {  width: 90%;  text-align: left; padding-bottom: 3px;   }
  .bc_horiz_v1 li div.label .flag.after { display: none;  }
  .bc_horiz_v1 li div.label .flag.before { display: inline-block; }
  .bc_horiz_v1 li div.value {  display: none;  }
  .bc_horiz_v1 li div.bar { width: 90%;   }
  .bc_horiz_v1 li div.bar span.val { display: block;  }
}

.bc_horiz_v2 { list-style: none; width: 100%;  }
.bc_horiz_v2 li { overflow: hidden; margin-bottom: 2px; }
.bc_horiz_v2 li div { float: left;  }
.bc_horiz_v2 li div.label { color: #fff; width: 40px; line-height: 20px; height: 20px;  padding: 0 5px; }
.bc_horiz_v2 li div.bar { width: calc(100% - 90px); }
.bc_horiz_v2 li:nth-child(odd) div.label { background: #3D3D3D; }
.bc_horiz_v2 li:nth-child(even) div.label { background: #575757; }
.bc_horiz_v2 li div.bar span.bg { display: block; height: 20px;  }
.bc_horiz_v2 li:nth-child(odd) div.bar span.bg { background: #9BD61C; }
.bc_horiz_v2 li:nth-child(even) div.bar span.bg { background: #89BF15; }
.bc_horiz_v2 li:hover div.bar span.bg { background: #78A811; }
.bc_horiz_v2.red li:nth-child(odd) div.bar span.bg { background: #E74C3C; }
.bc_horiz_v2.red li:nth-child(even) div.bar span.bg { background: #ED7669; }
.bc_horiz_v2 li div.bar span.val_in { display: block; float: right; color: #000; line-height: 20px; font-weight: bold; font-size: 11px; padding-right: 5px;  }
.bc_horiz_v2 li div.bar span.val_out { display: none; }

/* bc_horiz_v3 */
.bc_horiz_v3 { list-style: none; width: 100%;  }
.bc_horiz_v3 li { overflow: hidden; margin-bottom: 2px; }
.bc_horiz_v3 li div { float: left;  }
.bc_horiz_v3 li div.label {   }
.bc_horiz_v3 li div.bar {  }

 
/* linechart */
.linechart_v1 { width: 100%; position: relative; }
.linechart_v1 svg { width:100%;   height:100%; margin: 0;z-index: 3; position: absolute; }
.linechart_v1 div.point { position: absolute; z-index: 5; width: 6px; height:6px;  border: 2px solid #A1D250; border-radius: 50%; background: #fff; }
.linechart_v1 div.value { position: absolute; z-index: 7; width: 30px; font-size: 10px;   text-align: center;   }
.linechart_v1 div.vert_line { position: absolute; z-index: 4; width: 1px;  background: #fff; }
.linechart_v1 div.label { position: absolute; z-index: 4;   background: #fff;  height: 20px; width: 20px;  text-align: center; }

/* donut chart */
.donut-chart svg text {  

}


.chart-text {
  font: 16px/1.4em  Arial, sans-serif;
  font-weight: bold;
  letter-spacing: -0.5px;
  fill: #000;
  -moz-transform: translateY(0.45em);
  -ms-transform: translateY(0.45em);
  -webkit-transform: translateY(0.45em);
  transform: translateY(0.45em);
}
.chart-percentage {
  font-size: 10px;
  line-height: 1;
  text-anchor: middle;
  -moz-transform: translateY(-0.35em);
  -ms-transform: translateY(-0.35em);
  -webkit-transform: translateY(-0.35em);
  transform: translateY(-0.35em);
}
 
/* 3dstack */
.stack3d { list-style: none; }
.stack3d li { width: 80px;   background: #fff; position: relative;  }
.stack3d li div.top { background: #ED8080; position: absolute;  border-radius: 50%; height: 40px; width: 80px;  top: 0; }
.stack3d li div.front { background: #FC4949; position: absolute;  top: 20px; height: 60px; width: 80px; }
.stack3d li div.bottom { background: #FC4949; border-radius: 50%; height: 40px; width: 80px; position: absolute;  top: 60px;   }
.stack3d li div.label { left: 90px; top: 0;  position: absolute;  color: #000; display:table-cell; vertical-align:middle; }


.stack3d.w80 li div.top, .stack3d.w80 li div.front, .stack3d.w80 li div.bottom {  width: 80px;  } 
.stack3d.w80 li div.top, .stack3d.w80 li div.bottom {  height: 20px;   }
.stack3d.w80 li div.front {   top: 10px; }

.stack3d li.green div.top { background: #CCED6B; }
.stack3d li.green div.front, .stack3d li.green div.bottom { background: #AEDF21; }
.stack3d li.red div.top { background: #FF5265; }
.stack3d li.red div.front, .stack3d li.red div.bottom { background: #E42F43; }
.stack3d li.blue div.top { background: #4FCBFF; }
.stack3d li.blue div.front, .stack3d li.blue div.bottom { background: #21AEE9; }

/* piechart */
.piechart_label { font-weight: bold; text-align: center; font-size: 12px;  }
 
/* running pnt score */
.runningPntScore { border: 1px solid #ddd; border-radius: 3px; padding: 10px; display: inline-block; position: relative; height; 120px; margin-top: 4px;  }
.runningPntScore .tag { position: absolute; height: 12px;    z-index: 8; font-size: 10px; text-align: right; background: #fff; width: 22px; padding-right: 2px;  }
.runningPntScore .line { position: absolute; height: 1px; width: calc(100% - 20px); border-top: 1px dashed #ddd; z-index: 7;   } 
.runningPntScore .yearlabel { position: absolute;  text-align: center; font-size: 11px; font-weight: bold; }
.runningPntScore .bgCont { float: left;  border-right: 1px solid #F2F2F2; position: relative; padding-bottom: 0px; width: 54px; }
.runningPntScore .bgContUnit {   float: left;   position: relative; z-index: 10; width: 8.333%;  height: 120px; }  /* background: #EC3838; */
.runningPntScore .bgCont:hover { background: #EBF1F5;  }
.runningPntScore .bg {   left: 0; height: 100px; }
@media screen and (max-width: 800px){ 
   .runningPntScore .bgCont.odd  .yearlabel { display: none;  }
}

/* Deviation from avg */
.devFromAvg {  }
.devFromAvgUl { list-style: none; }
.devFromAvgUl li { overflow: hidden;   }
.devFromAvgUl li div  { height: 16px; float: left;   }
.devFromAvgUl li div.neg { width: calc(50% - 1px); border-right: 1px solid #333;    }
.devFromAvgUl li div.pos { width: 50%;      }
.devFromAvgUl li div.neg div.bar {  float: right; background: crimson;  }
.devFromAvgUl li div.pos div.bar { float: left;  background: yellowgreen;    }
.devFromAvgUl li:hover {   }
.devFromAvgUl li div div.bar { height: 12px;  }
.devFromAvgUl li:hover div.neg div.bar {  float: right; background: #ED2D53;  }
.devFromAvgUl li:hover div.pos div.bar { float: left;  background: #AEDE4E;    }
.devFromAvgUl li div div.value { float: right; font-size: 11px; color: #333; padding: 0 11px;  }
.devFromAvgUl li div.neg div.value, .devFromAvgUl li div.neg a.label {  float: right;    }
.devFromAvgUl li div.pos div.value, .devFromAvgUl li div.pos a.label { float: left;     }
.devFromAvgUl li div  a.label { display: block;  font-size: 11px; }


 /* table_chart */
 .table_chart { border-collapse: collapse; width: 100%; }
 .table_chart td { border: 0; border-top: 1px solid #ddd; padding: 2px;   }

/* PercBar */
.PercBar { border: 1px solid #ddd; width: 200px; overflow: hidden; }
.PercBar .bg { float: left;  }
.PercBar span.in { float: right; color: #fff; font-weight: bold; padding-right: 4px;   }
.PercBar span.out {  color: #000; font-weight: bold; padding-left: 4px; float: left;   }