.countdown {
  position: relative;
  width: 150px;
  height: 150px;
  margin: auto; }
  .countdown .countdown-number {
    position: absolute;
    top: 50px;
    width: 100%;
    color: #3a93e1;
    font-family: Anjoman-Regular;
    font-size: 25px;
    text-align: center; }
    .countdown .countdown-number .m, .countdown .countdown-number .s, .countdown .countdown-number .colon {
      text-align: center; }
  .countdown svg.otp {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    transform: rotateY(-180deg) rotateZ(-90deg); }
    .countdown svg.otp circle {
      stroke-dasharray: 352px;
      stroke-dashoffset: 0px;
      stroke-width: 10px;
      stroke: #3a93e1;
      fill: none; }
    .countdown svg.otp .over {
      stroke-linecap: round;
      position: relative;
      z-index: 2; }
    .countdown svg.otp .bellow {
      stroke-dasharray: 420px !important;
      stroke-dashoffset: 0px;
      stroke-width: 17px;
      position: relative;
      z-index: -1;
      stroke: #8fc3f1; }

.animation {
  animation: countdown linear forwards; }

@keyframes countdown {
  from {
    stroke-dashoffset: 0px; }
  to {
    stroke-dashoffset: 352px; } }