.verification-input-wrapper {
  --gap: 1rem;
  --color: rgba(159, 159, 159, 1);
  width: min(100%, 454px);
  display: flex;
  gap: var(--gap);
}

.verification-input-wrapper input {
  --height: 68px;

  border-radius: 8px;
  color: var(--color);
  border: 1.5px solid currentColor;
  min-height: var(--height);
  background-color: transparent;
  text-align: center;
  font-size: 28px;
  border-width: 2px;
}

.verification-input-wrapper input:valid {
  background-image: none !important;
}

.verification-item {
  display: none;
}
.verification-item.active {
  display: flex;
}

@media (max-width: 320px) {
  .verification-input-wrapper {
    --gap: 0.2rem;
  }
  .verification-input-wrapper input {
    --height: max-content;
  }
  .form-control {
    padding:0px!important
  }
}


.base-timer {
  position: relative;
  height: 150px;
  width: 150px;
}

/* https://css-tricks.com/how-to-create-an-animated-countdown-timer-with-html-css-and-javascript/ */
/* Removes SVG styling that would hide the time label */
.base-timer__circle {
  fill: none;
  stroke: none;
}

/* The SVG path that displays the timer's progress */
.base-timer__path-elapsed {
  stroke-width: 5px;
  stroke: rgba(206, 212, 218, 1);
}

.base-timer__path-remaining {
  /* Just as thick as the original ring */
  stroke-width: 5px;

  /* Rounds the line endings to create a seamless circle */
  stroke-linecap: round;

  /* Makes sure the animation starts at the top of the circle */
  transform: rotate(90deg);
  transform-origin: center;

  /* One second aligns with the speed of the countdown timer */
  transition: 1s linear all;

  /* Allows the ring to change color when the color value updates */
  stroke: var(--color-navy-200);
}

.base-timer__svg {
  /* Flips the svg and makes the animation to move left-to-right */
  transform: scaleX(-1);
}

.base-timer__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 28px;
  font-weight: 500;
  color: rgba(7, 7, 7, 1);
}