.two-factor-popup {
  .auth-input {
    border: .03em solid $nepal-grey;
    padding: .45em;
    margin: 0 1em 0 0;
    color: #666;
    font-size: .8em;
    background-color: #fff;
    width: 30%;
    text-align: center;
  }
}

@media (min-width: 991px) {
  .backup-codes-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;

    .backup-codes {
      padding: 10px;
      border: 1px solid lightgrey;
      border-radius: .25rem;
    }
  }
}

@media (min-width: 768px) {
  #two-factor {

    .container {
      .row {
        .col {
          .backup-code-warning {
            width: fit-content;
            margin-left: 1.5rem;
          }

          .qr-code-container {
            display: flex;
            padding: .25rem 1.5rem .5rem 1.5rem;
            position: relative;
            width: 100%;
          }

          .qr-code {
            display: flex;
          }

          .auth-input {
            border: .03em solid $nepal-grey;
            padding: .45em;
            margin: 0 1em 0 0;
            color: #666;
            font-size: .8em;
            background-color: #fff;
            width: 30%;
            text-align: center;
          }

          .qr-code-label {
            font-size: 95%;
            font-weight: 500;
          }
        }

      }
    }

    @media (max-width: 991px) {
      .backup-codes-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        .backup-codes {
          padding: 10px;
          border: 1px solid lightgrey;
          border-radius: .25rem;
        }
      }
    }

    .copy-button {
      margin-left: 1.5rem;
      width: fit-content;
    }
  }
}

@media(min-width: 375px) and (max-width: 767px) {
  #two-factor {

    .container {
      .row {
        .col {
          .backup-code-warning {
            margin-left: 1.5rem;
            margin-right: 2rem;
          }

          .qr-code-container {
            display: flex;
            flex-direction: column;
            padding: .25rem 1.5rem .5rem 1.5rem;
            position: relative;
            width: 100%;

            .auth-input {
              border: .03em solid $nepal-grey;
              padding: .75rem .5rem;
              margin: 0 1em 0 0;
              color: #666;
              font-size: .8em;
              background-color: #fff;
              width: 75%;
              text-align: center;
            }

            .qr-code {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding-bottom: .25rem;
            }

            .qr-code-label {
              font-size: 80%;
              font-weight: 400;
            }
          }
        }

      }
    }

    .backup-codes-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;

      .backup-codes {
        padding: 5px;
        border: 1px solid lightgrey;
        border-radius: .25rem;
      }
    }

    .copy-button {
      margin-left: 1.5rem;
      margin-bottom: .5rem;
      width: fit-content;
    }
  }
}

@media(max-width: 374px) {
  #two-factor {

    .container {
      .row {
        .col {
          .backup-code-warning {
            margin-left: 1.5rem;
            margin-right: 2rem;
          }

          .qr-code-container {
            display: flex;
            flex-direction: column;
            padding: .25rem 1.5rem .5rem 1.5rem;
            position: relative;
            width: 100%;

            .auth-input {
              border: .03em solid $nepal-grey;
              padding: .75rem .5rem;
              margin: 0 1em 0 0;
              color: #666;
              font-size: .8em;
              background-color: #fff;
              width: 75%;
              text-align: center;
            }

            .qr-code {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding-bottom: .25rem;
            }

            .qr-code-label {
              font-size: 80%;
              font-weight: 400;
            }
          }
        }

      }
    }

    .backup-codes-container {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;

      .backup-codes {
        padding: 5px;
        border: 1px solid lightgrey;
        border-radius: .25rem;
      }
    }

    .copy-button {
      margin-left: 1.5rem;
      margin-bottom: .5rem;
      width: fit-content;
    }
  }
}
