#codigo1,
#codigo2,
#codigo3,
#codigo4,
#codigo5,
#codigo6 {
    width: 70px;
    height: 70px;
    text-align: center;
    font-size: 20px;
    border: 2px solid rgb(148, 148, 148);
    border-radius: 8px;
}

#codigo1:focus,
#codigo2:focus,
#codigo3:focus,
#codigo4:focus,
#codigo5:focus,
#codigo6:focus {
    border: 2px solid rgb(49, 255, 159);
    /* Borda vermelha ao focar */
    outline: none;
    /* Remove o estilo de borda de foco padrão */
}



  /* HTML: <div class="loader"></div> */
.loader {
    width: 90px;
    height: 14px;
    box-shadow: 0 3px 0 #fff;
    position: relative;
    clip-path: inset(-40px 0 -5px)
  }
  .loader:before {
    content: "";
    position: absolute;
    inset: auto calc(50% - 17px) 0;
    height: 50px;
    --g:no-repeat linear-gradient(#ccc 0 0);
    background: var(--g),var(--g),var(--g),var(--g);
    background-size: 16px 14px;
    animation:
      l7-1 2s infinite linear,
      l7-2 2s infinite linear;
  }
  @keyframes l7-1 {
    0%,
    100%  {background-position: 0 -50px,100% -50px}
    17.5% {background-position: 0 100%,100% -50px,0 -50px,100% -50px}
    35%   {background-position: 0 100%,100% 100% ,0 -50px,100% -50px}
    52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% -50px}
    70%,
    98%  {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% calc(100% - 16px)}
  }
  @keyframes l7-2 {
    0%,70% {transform:translate(0)}
    100%  {transform:translate(200%)}
  }