
ul.plot-container.group-by-number {
    list-style-type: none!important;
}


ul.plot-container.group-by-number li {background:none!important;width:30%;}

.column-chart,
.bar-chart,
.scatter-plot {
  position: relative;
  min-width: 100px;
  min-height: 250px;
  padding: 0;
  margin: 0;
  margin-bottom:25px;
  width:70%;
  
  margin: 0 auto;
}
.column-chart .chart-column,
.bar-chart .chart-row,
.column-chart [data-cp-size],
.bar-chart [data-cp-size],
.plot-container > * > * {
  list-style: none;
  border: 1px solid #ffffff;
}
.column-chart .plot-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
 
  padding: 0;
  margin: 0;
  min-height: 100px;
}
.column-chart.stacked > * > * {
  height: 100%;
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}





.column-chart.stacked p {transform: scaleY(1);}

.column-chart.stacked ul li > p {transform: scaleY(-1);}

.column-chart.stacked > .col .span_4_of_12 {transform: scaleY(1);}


.column-chart.stacked .group-by-number [data-cp-size] {
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
.column-chart .chart-column,
.column-chart [data-cp-size],
.column-chart.stacked > * > * {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-align-self: flex-end;
  align-self: flex-end;
  font-size:18px;
  padding-top:20px;

}


@keyframes example {
0% {height: 0;}
100% {height:100%;}
}


.column-chart .chart-column,
.bar-chart .chart-row,
.column-chart [data-cp-size],
.bar-chart [data-cp-size] {
  background: #3498db;
  color: #ffffff;
  box-sizing: border-box;
}
.bar-chart {
  clear: both;
}
.bar-chart .plot-container {
  flex-direction: row;
  padding: 0;
  margin: 0;
  width: 100%;
}
.bar-chart .chart-row,
.bar-chart [data-cp-size] {
  min-height: 8px;
}
.bar-chart.stacked > * > * {
  display: flex;
}
.bar-chart.stacked .group-by-number [data-cp-size] {
  display: inline-block;
}
.scatter-plot .plot-container {
  position: absolute;
  top: 12px;
  left: 0;
  right: 12px;
  bottom: 0;
  margin: 0;
  padding: 0;
}
.scatter-plot .chart-dot,
.scatter-plot .chart-dot,
.scatter-plot [data-cp-x],
.scatter-plot [data-cp-y] {
  position: absolute;
  height: 0;
  width: 0;
  list-style: none;
  overflow: hidden;
  border: 6px solid #3498db;
  border-radius: 100%;
}


.column-chart .plot-container [data-cp-size="47"] {
    height: 47%;
}


.column-chart .plot-container [data-cp-size="20"] {
  height: 20%;

}

@keyframes twenty {
0% {height: 0;}
100% {height:20%;}
}

.column-chart .plot-container [data-cp-size="34"] {
  height: 34%;

}





div [data-cp-size="34"].revealOnScroll.animated {
height: 34%;
animation-name: thirtyfour!important;
animation-duration: 2s!important;
}


@keyframes thirtyfour {
0% {height: 0;}
100% {height:34%;}
}


div [data-cp-size="53"].revealOnScroll.animated  {
  height: 53%;
animation-name: fiftythree;
    animation-duration: 2s;
}


div [data-cp-size="80"].revealOnScroll.animated  {
  height: 80%;
animation-name: eighty;
    animation-duration: 2s;
}




@keyframes fiftythree {
0% {height: 0;}
100% {height:53%;}
}


.column-chart .plot-container [data-cp-size="66"] {
  height: 66%;
}

.column-chart .plot-container [data-cp-size="80"] {
  height: 80%;

}


.column-chart .plot-container .animated [data-cp-size="80"] {
  height: 80%;
animation-name: eighty;
    animation-duration: 2s;
}


@keyframes eighty {
0% {height: 0;}
100% {height:80%;}
}






@keyframes fiftythree {
0% {height: 0;}
100% {height:53%;}
}


.column-chart .plot-container [data-cp-size="100"] {
  height: 100%;
}

.group-by-gender .male {
  background: #3498db;
  color: #ffffff;
}
.group-by-gender .female {
  background: #ff6699;
  color: #ffffff;
}
.group-by-number [data-group="0"] {
  background: #3498db;
  color: #ffffff;
}
.group-by-number [data-group="1"] {
  background: #ff6699;
  color: #ffffff;
}
.group-by-number [data-group="2"] {
  background: #93b881;
  color: #ffffff;
}
.group-by-number [data-group="3"] {
  background: #e09e87;
  color: #ffffff;
}
.group-by-number [data-group="4"] {
  background: #a22041;
  color: #ffffff;
}
.group-by-number [data-group="5"] {
  background: #95879c;
  color: #ffffff;
}
