.otp-bio.p-20 {
  padding: 20px; }
.otp-bio .otp-image img {
  width: 80px;
  height: auto; }
.otp-bio .otp-image p {
  margin: 28px 0; }
.otp-bio .timer {
  margin-top: 8px; }
  .otp-bio .timer span, .otp-bio .timer a {
    font-size: 15px; }
  .otp-bio .timer a {
    color: blue; }
.otp-bio .verify-otp {
  display: flex;
  align-items: center;
  margin-top: 32px; }
  .otp-bio .verify-otp a {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid grey; }
    .otp-bio .verify-otp a img {
      width: 32px;
      height: 32px; }
  .otp-bio .verify-otp button {
    margin-left: 16px; }
.otp-bio .mob-box {
  display: flex; }
  .otp-bio .mob-box .code {
    height: 46px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid #ced4da;
    border-right: none; }
  .otp-bio .mob-box .form-control {
    border-top-left-radius: 0;
    border-bottom-right-radius: 0; }
.otp-bio .otp-box {
  position: relative;
  margin-top: -12px;
  width: 300px; }
  .otp-bio .otp-box .form-control {
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    opacity: 0; }
  .otp-bio .otp-box label {
    margin-top: 6px;
    margin-bottom: 0 !important;
    font-size: 12px !important; }
.otp-bio .reset-otpbox {
  display: flex;
  width: 300px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; }
.otp-bio .userInput {
  display: flex;
  margin: 0 -10px; }
  .otp-bio .userInput span, .otp-bio .userInput input {
    margin: 0 5px;
    height: 50px;
    width: 50px;
    border: none;
    border-radius: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background-color: #fff;
    position: relative;
    color: #000 !important;
    border: 2px solid  #C8C8C8; }
    .otp-bio .userInput span.active, .otp-bio .userInput input.active {
      border: 1px solid blue;
      height: 52px;
      width: 52px; }
      .otp-bio .userInput span.active:after, .otp-bio .userInput input.active:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 25px;
        background: #000;
        animation: blinker 1s linear infinite; }
    .otp-bio .userInput span.no:after, .otp-bio .userInput input.no:after {
      display: none; }
  .otp-bio .userInput.userInput span, .otp-bio .userInput.userInput input {
    width: 25%; }
    .otp-bio .userInput.userInput span.active, .otp-bio .userInput.userInput input.active {
      width: 25%; }
@keyframes animate {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }
@keyframes blinker {
  50% {
    opacity: 0; } }

/*# sourceMappingURL=otp.css.map */