@-webkit-keyframes checkmark {
  0% {
    stroke-dashoffset: 100px
  }

  100% {
    stroke-dashoffset: 200px
  }
}

@-ms-keyframes checkmark {
  0% {
    stroke-dashoffset: 100px
  }

  100% {
    stroke-dashoffset: 200px
  }
}

@keyframes checkmark {
  0% {
    stroke-dashoffset: 100px
  }

  100% {
    stroke-dashoffset: 0px
  }
}

@-webkit-keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 480px
  }

  100% {
    stroke-dashoffset: 960px;

  }
}

@-ms-keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 240px
  }

  100% {
    stroke-dashoffset: 480px
  }
}

@keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 480px
  }

  100% {
    stroke-dashoffset: 960px
  }
}

@keyframes colored-circle {
  0% {
    opacity: 0
  }

  100% {
    opacity: 100
  }
}

.svg-icon-checkmark svg polyline {
  -webkit-animation: checkmark 0.30s ease-in-out 0.9s backwards;
  animation: checkmark 0.30s ease-in-out 0.9s backwards
}

.svg-icon-checkmark svg g {
  stroke: $success;
}
.svg-icon-checkmark svg circle {
  -webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
  animation: checkmark-circle 0.8s ease-in-out backwards;
}

.svg-icon-checkmark svg circle#colored {
  -webkit-animation: colored-circle 0.8s ease-in-out 0.9s backwards;
  animation: colored-circle 0.8s ease-in-out 0.9s backwards;
  fill: $success;
}