.bk-login-config-totp-alert {
  padding-top: 8px;
}

.bk-login-config-totp-title {
  margin-bottom: 16px;
  color: var(--brown-brown900, #502314);

  /* Header Four */
  font-family: Flame;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
}

.bk-login-config-totp-list {
  --totp-list-padding-left: 20px;
  margin: 0 0 24px;
  padding-left: var(--totp-list-padding-left);

  color: var(--brown-brown900, #502314);

  /* Copy One */
  font-family: Rotonda;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */

  .bk-link {
    display: block;
    margin-bottom: 8px;
  }
}

.bk-login-totp-manual-code {
  border-radius: 28px;
  color: var(--brown-brown900, #502314);
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 28px;
  border: 2px solid var(--brown-brown600, #d7c7b4);

  /* Copy One */
  font-family: Rotonda;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}

.bk-totp-secret-qr-code {
  margin: 16px auto 0;
  padding: 8px;
  width: fit-content;
  border-radius: 28px;
  background: #fff;

  img {
    display: block;
  }
}

.bk-login-config-totp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bk-login-config-totp-form-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 16px;

  .bk-btn {
    max-width: 240px;
  }
}

.bk-login-config-totp-variants-list {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: calc(-1 * var(--totp-list-padding-left));
}

.bk-login-config-totp-variants-list .bk-login-config-totp-variant-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bk-login-config-totp-variants-list
  .bk-login-config-totp-variant-link.only-mobile-variant {
  display: none;

  @media (width < 1024px) {
    display: flex;
  }
}

.bk-login-config-totp-variants-list .bk-login-config-totp-variants-scan-qr {
  border-radius: 28px;
  border: 2px solid var(--brown-brown600, #d7c7b4);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.bk-login-totp-qr-url {
  display: none !important;
}

@media (width <= 545px) {
  .bk-login-config-totp-variants-list {
    margin-left: calc(-1 * var(--totp-list-padding-left));
  }

  .bk-login-config-totp-variants-list .bk-login-config-totp-variant-link {
    font-size: 14px;
    line-height: 18px;
  }

  .bk-login-config-totp-form-actions {
    .bk-btn {
      max-width: 100%;
    }
  }

  .bk-login-config-totp-variants-scan-qr {
    display: none !important;
  }

  .bk-login-totp-qr-url {
    display: flex !important;
  }
}