* {
  margin: 0;
  padding: 0;
}

.svg-box {
  display: inline-block;
  position: relative;
  width: 150px;
}

.green-stroke {
  stroke: #6fffe9;
}

.red-stroke {
  stroke: #FF6245;
}

.yellow-stroke {
  stroke: #FFC107;
}

/*------- circular ---------*/

.circular circle.path {
  stroke-dasharray: 330;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}

.circular.green-stroke circle.path {
  animation: 0.7s draw-circle ease-out, 0.7s fill-green-circle 1.5s both;
}

.circular.red-stroke circle.path {
  animation: 0.7s draw-circle ease-out, 0.7s fill-red-circle 1.5s both;
}

.circular.yellow-stroke circle.path {
  animation: 0.7s draw-circle ease-out, 0.7s fill-yellow-circle 1.5s both;
}

/*------- Checkmark ---------*/

.checkmark {
  stroke-width: 6.25;
  stroke-linecap: round;
  position: absolute;
  top: 56px;
  left: 49px;
  width: 52px;
  height: 40px;
}

.checkmark path {
  animation: 0.7s draw-check ease-out, 0.7s draw-white-line 1.5s both;
}

@keyframes draw-circle {
  0% {
    stroke-dasharray: 0, 330;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  80% {
    stroke-dasharray: 330, 330;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

@keyframes fill-green-circle {
  from {
    fill: #0b132b;
  }

  to {
    stroke: #6fffe9;
    fill: #6fffe9;
    opacity: 1.0;
  }
}

@keyframes fill-red-circle {
  from {
    fill: #0b132b;
  }

  to {
    stroke: #FF6245;
    fill: #FF6245;
    opacity: 1.0;
  }
}

@keyframes fill-yellow-circle {
  from {
    fill: #0b132b;
  }

  to {
    stroke: #FFC107;
    fill: #FFC107;
    opacity: 1.0;
  }
}

@keyframes draw-check {
  0% {
    stroke-dasharray: 49, 80;
    stroke-dashoffset: 48;
    opacity: 0;
  }

  50% {
    stroke-dasharray: 49, 80;
    stroke-dashoffset: 48;
    opacity: 1;
  }

  100% {
    stroke-dasharray: 130, 80;
    stroke-dashoffset: 48;
  }
}

/*---------- Cross ----------*/

.cross {
  stroke-width: 6.25;
  stroke-linecap: round;
  position: absolute;
  top: 54px;
  left: 54px;
  width: 40px;
  height: 40px;
}

.cross .first-line {
  animation: 0.7s draw-first-line ease-out, 0.7s draw-white-line 1.5s forwards;
}

.cross .second-line {
  animation: 0.7s draw-second-line ease-out, 0.7s draw-white-line 1.5s forwards;
}

@keyframes draw-first-line {
  0% {
    stroke-dasharray: 0, 56;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 0, 56;
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dasharray: 56, 330;
    stroke-dashoffset: 0;
  }
}

@keyframes draw-second-line {
  0% {
    stroke-dasharray: 0, 55;
    stroke-dashoffset: 1;
  }

  50% {
    stroke-dasharray: 55, 0;
    stroke-dashoffset: 1;
  }

  100% {
    stroke-dasharray: 55, 0;
    stroke-dashoffset: 1;
  }
}

@keyframes draw-white-line {
  100% {
    stroke: #0b132b;
  }
}

@keyframes draw-white-dot {
  100% {
    fill: #0b132b;
  }
}

.alert-sign {
  stroke-width: 6.25;
  stroke-linecap: round;
  position: absolute;
  top: 40px;
  left: 68px;
  width: 15px;
  height: 70px;
  animation: 0.7s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275), 0.7s draw-white-line 1.5s forwards;
}

.alert-sign .dot {
  stroke: none;
  fill: #FFC107;
  animation: 0.7s draw-white-dot 1.5s both;
}

@keyframes alert-sign-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}