.success-checkmark {
  display: block;
  height: 20px;
  width: 20px;
  color: #17cd00; /* SVG path use currentColor to inherit this */
}

.success-checkmark-md {
  display: block;
  height: 40px;
  width: 40px;
  color: #00a700; /* SVG path use currentColor to inherit this */
}

.success-checkmark-lg {
  display: block;
  height: 80px;
  width: 80px;
  color: #00a700; /* SVG path use currentColor to inherit this */
}

.circle {
  stroke-dasharray: 76;
  stroke-dashoffset: 76;
  animation: draw 0.5s forwards;
}

.tick {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: draw 0.5s forwards 0.5s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}