.circular-progressbar {
  width: 100%; }
  .circular-progressbar.primary .path {
    stroke: #3cafda; }
  .circular-progressbar.primary .text {
    fill: #3cafda; }
  .circular-progressbar.success .path {
    stroke: #55c58f; }
  .circular-progressbar.success .text {
    fill: #55c58f; }
  .circular-progressbar.warning .path {
    stroke: #f3bc27; }
  .circular-progressbar.warning .text {
    fill: #f3bc27; }
  .circular-progressbar.danger .path {
    stroke: #dd3b4c; }
  .circular-progressbar.danger .text {
    fill: #dd3b4c; }
  .circular-progressbar .path {
    stroke-linecap: butt;
    transition: stroke-dashoffset .5s ease 0s; }
  .circular-progressbar .trail {
    stroke: #e6e9ee;
    box-shadow: inset 0 0 3px #000; }
  .circular-progressbar .text {
    fill: #3cafda;
    font-size: 20px;
    dominant-baseline: middle;
    text-anchor: middle; }
  .circular-progressbar .label {
    fill: #9daab1;
    font-size: 10px;
    dominant-baseline: middle;
    text-anchor: middle; }