.doughnut-chart-wrapper {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding-bottom: 100%; }
  .doughnut-chart-wrapper * {
    box-sizing: border-box; }
  .doughnut-chart-wrapper svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }
  .doughnut-chart-wrapper circle {
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg); }
  .doughnut-chart-wrapper .circle-bg {
    stroke: #e4e4e4; }
  .doughnut-chart-wrapper .circle-animation {
    stroke: #3498db; }
    .doughnut-chart-wrapper .circle-animation.doughnut-allow-animation {
      stroke: #3498db;
      -webkit-transition: stroke-dashoffset 1s linear;
      transition: stroke-dashoffset 1s linear; }

.dough-text-suffix {
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  color: #666; }
  .dough-text-suffix .dough-text, .dough-text-suffix .dough-suffix {
    vertical-align: top; }
  .dough-text-suffix .dough-text {
    font-weight: 700;
    font-size: 44px; }
  .dough-text-suffix .dough-suffix {
    font-weight: 400;
    font-size: 20px;
    position: relative;
    top: 9px; }

.doughnut-item {
  max-width: 100%;
  width: 600px;
  height: 600px; }