/*
 * cssCharts v0.1.0
 * jquery plugin to create donut and bar charts with css
 * https://github.com/sultantarimo
 *
 * (c)2015 Sultan Tarimo - sultantarimo@me.com
 * Released under the MIT license
 */

.chart *, .chart{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
.chart{
  width:auto;
  height:200px;
  display:block;
  margin:0 auto;
  position:relative;
  font-family:sans-serif;
  font-size:14px;
}

/* bar chart */

.bar-chart {
  display: table;
  table-layout: fixed;
  width: auto;
  height: 100%;
  margin: 0 auto;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.06) 2%, rgba(0, 0, 0, 0) 2%);
  background-size: 100% 33px;
  background-position: left top;
  padding-top: 26px;
}
.bar-chart ul {
  margin-left: 34px;
  float: right;
  display: block;
  height:100%;
}

.bar-chart li {
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  height: 100px;
}

.bar-chart span {
  margin: 0 6px;
  display: block;
  background: rgb(248,66,6);
  width: 34px;
  position:relative;

  -webkit-animation: drawBar 0.3s ease-in-out;
  -moz-animation: drawBar 0.3s ease-in-out;
  animation: drawBar 0.3s ease-in-out;
}
.bar-chart li:nth-child(2n+1) span{background-color:rgb(136,136,136);}

.bar-chart ul:last-of-type li:last-child span{margin-right:0px;}
.bar-chart ul:first-of-type li:first-child span{margin-left:0px;}
.bar-chart ul:last-of-type {margin-left: 0px;}
.bar-chart.left-bar ul:last-of-type {margin-right: 0px;}

.bar-chart.left-bar ul{margin-right: 34px;float:left;margin-left:0px;}

.bar-chart span:before {
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  display: block;
  text-align: center;
  content: attr(title);
  word-wrap: break-word;
  font-size: 11px;
  width: 100%;
}

@-webkit-keyframes drawBar {0% {height: 0;}}
@-moz-keyframes drawBar {0% {height: 0;}}
@keyframes drawBar {0% {height: 0;}}

/* donut chart */

.chart.donut{
  width:200px;
  height:200px;
}

.donut-chart{
  width:100%;height:100%;
  position:relative;overflow:hidden;
}

.donut-chart:after{
  content:"";
  position: absolute;
  width: 56%;
  height: 56%;
  background: rgb(248,248,248);
  left: 50%;
  top: 50%;
  z-index: 400;
  margin: 0 auto;

  -webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.35);
  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.35);

  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;

  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.donut-chart h2{
  text-align:center;
  position: absolute;
  line-height: 140%;
  width: 100%;
  margin-top:-30px;
  top:50%;
  z-index:500;

  font-size:26px;
  font-weight:400;
  color:rgb(0,0,0);
}

.donut-chart h2 span{
  display:block;
  width:100%;
  font-size:14px;
  color:rgb(142,143,143);
  margin-top:-10px;
}

.donut-chart .spinner{
  z-index: 200;
  border-right: none;

  -webkit-border-radius: 100% 0 0 100% / 50% 0 0 50%;
  -moz-border-radius: 100% 0 0 100% / 50% 0 0 50%;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);

  -webkit-animation: rotateDonut 0.3s ease-in-out;
  -moz-animation: rotateDonut 0.3s ease-in-out;
  animation: rotateDonut 0.3s ease-in-out;
}
@-webkit-keyframes rotateDonut {0% {transform: rotate(0deg);}}
@-moz-keyframes rotateDonut {0% {transform: rotate(0deg);}}
@keyframes rotateDonut {0% {transform: rotate(0deg);}}

.donut-chart .spinner.temp{display:none;}

.donut-chart .pie {
  width: 50%;
  height: 100%;
  position: absolute;
  background: rgb(195,218,191);

  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.donut-chart .mask{
  background:rgb(248,248,248);
  z-index: 400;
  margin-left: -1px;
}

.pie-chart:before{
  display:none;
}

li span:before {
  transition: all 100ms ease-in-out;
}
li:hover span:before {
  transform: scale(1.4);
  font-weight: bold;
}

/* line chart */

.chart.line{width:auto;height:auto;margin:0 auto;}
.chart .line-chart{width:600px;height:600px;margin:100px auto;display:block;position:relative;}
.line-chart:before{content:"";display:block;position:absolute;left:0px;bottom:0px;height:100%;width:1px;background:rgba(0,0,0,0.1);padding-top:10px;}
.line-chart:after{content:"";display:block;position:absolute;left:0px;bottom:0px;width:100%;height:1px;background:rgba(0,0,0,0.1);padding-right:10px;}

.line-chart li{display:block;height:1px;background:red;float:left;position:relative;transform-origin: bottom left;position:absolute;
  -webkit-animation: draw 0.3s ease-in-out;
    -moz-animation: draw 0.3s ease-in-out;
    animation: draw 0.3s ease-in-out;
}
.line-chart li:before{content:"";position:absolute;left:-4px;bottom:-4px;width:6px;height:6px;border-radius:50%;display:block;background:#FFF;border:2px solid red;}

.line-chart li:first-child{margin-left:0px;}
.line-chart li:last-child:after{content:"";position:absolute;right:-4px;top:-4px;width:6px;height:6px;border-radius:50%;display:block;background:#FFF;border:2px solid red;}

@-webkit-keyframes drawLine {0% {width: 0;}}
@-moz-keyframes drawLine {0% {width: 0;}}
@keyframes drawLine {0% {width: 0;}}