.pixflow-2fa-challenge {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(440px, calc(100vw - 20px));
  max-width: none;
  max-height: calc(100dvh - 20px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.pixflow-2fa-challenge::backdrop,
.pixflow-2fa-form-setup::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.pixflow-2fa-challenge.is-preview[open]:not(:modal) {
  z-index: 100000;
}

.pixflow-2fa-challenge.is-preview[open]:not(:modal) > .pixflow-2fa-challenge__panel {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
}

.pixflow-2fa-challenge__panel {
  display: grid;
  gap: 10px;
  width: 100%;
  max-height: calc(100dvh - 20px);
  margin-inline: auto;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  background: #fff;
  overflow: auto;
}

.pixflow-2fa-challenge[hidden],
.pixflow-2fa-challenge [hidden] {
  display: none !important;
}

.pixflow-2fa-challenge__heading,
.pixflow-2fa-challenge__description,
.pixflow-2fa-challenge__hint {
  margin: 0;
}

.pixflow-2fa-challenge__hint.is-error {
  color: #9d1c1c;
}

.pixflow-2fa-email-resend {
  margin: 0;
  text-align: center;
}

.pixflow-2fa-email-resend button {
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.pixflow-2fa-email-resend button:disabled {
  color: currentColor;
  text-decoration: none;
  cursor: default;
  opacity: 1;
}

.pixflow-2fa-challenge__label {
  display: grid;
  gap: 4px;
}

.pixflow-2fa-challenge__screen {
  display: grid;
  gap: 10px;
}

.pixflow-2fa-challenge__methods {
  display: grid;
  gap: 10px;
}

.pixflow-2fa-challenge__methods .bricks-button {
  justify-content: center;
  width: 100%;
}

.pixflow-2fa-challenge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pixflow-2fa-challenge__actions .bricks-button {
  flex: 1 1 auto;
}

.pixflow-2fa-challenge [data-pixflow-2fa-recovery-code] {
  width: 100%;
}

.brxe-pixflow-two-factor-setup__panel {
  display: grid;
  gap: 10px;
  padding: 20px;
  background: #fff;
}

.brxe-pixflow-two-factor-setup__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pixflow-2fa-inline-setup[hidden] {
  display: none !important;
}

.pixflow-2fa-form-setup {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(680px, calc(100vw - 20px));
  max-width: none;
  max-height: calc(100dvh - 20px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.pixflow-2fa-form-setup > .brxe-pixflow-two-factor-setup__panel {
  width: 100%;
  max-height: calc(100dvh - 20px);
  overflow: auto;
}

.pixflow-2fa-form-setup[data-pf2fa-builder-preview][open]:not(:modal) {
  z-index: 100000;
}

.pixflow-2fa-form-setup[data-pf2fa-builder-preview][open]:not(:modal) > .brxe-pixflow-two-factor-setup__panel,
.pixflow-2fa-form-setup[data-pf2fa-builder-preview][open]:not(:modal) .brxe-pixflow-two-factor-setup__enrollment-dialog.is-in-form-flow > .brxe-pixflow-two-factor-setup__enrollment-panel {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
}

.pixflow-2fa-form-setup .brxe-pixflow-two-factor-setup__enrollment-dialog.is-in-form-flow {
  position: static;
  display: block;
  width: 100%;
  max-height: none;
  margin: 0;
  overflow: visible;
  transform: none;
}

.pixflow-2fa-form-setup .brxe-pixflow-two-factor-setup__enrollment-dialog.is-in-form-flow > .brxe-pixflow-two-factor-setup__enrollment-panel {
  width: 100%;
  max-height: calc(100dvh - 20px);
}

.brxe-pixflow-two-factor-setup [hidden] {
  display: none !important;
}

.brxe-pixflow-two-factor-setup__heading,
.brxe-pixflow-two-factor-setup__description,
.brxe-pixflow-two-factor-setup__method h3,
.brxe-pixflow-two-factor-setup__method p {
  margin: 0;
}

.brxe-pixflow-two-factor-setup__status,
.brxe-pixflow-two-factor-setup__setup {
  padding: 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
}

.brxe-pixflow-two-factor-setup__setup.is-error {
  color: #9d1c1c;
  background: #fff0f0;
}

.brxe-pixflow-two-factor-setup__method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: 10px;
  border-block-end: 1px solid var(--bricks-border-color);
}

.brxe-pixflow-two-factor-setup__method:last-of-type {
  border-block-end: none;
}

.brxe-pixflow-two-factor-setup__method > div {
  max-width: min(600px, 70%);
}

.brxe-pixflow-two-factor-setup__passkeys {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.brxe-pixflow-two-factor-setup__passkey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brxe-pixflow-two-factor-setup__passkey button {
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  text-decoration: underline;
  cursor: pointer;
}

.brxe-pixflow-two-factor-setup__method.is-active h3::after {
  content: "Active";
  display: inline-block;
  margin-inline-start: 6px;
  padding: 0.15em 0.5em;
  border-radius: 100px;
  color: #176b3a;
  background: #e7f7ed;
  font-size: 0.65em;
  vertical-align: middle;
}

.brxe-pixflow-two-factor-setup__setup {
  display: grid;
  gap: 8px;
  overflow-wrap: anywhere;
}

.brxe-pixflow-two-factor-setup__setup[hidden] {
  display: none;
}

.brxe-pixflow-two-factor-setup__qr {
  width: min(200px, 100%);
  margin: 10px 0;
  padding: 20px;
  background: #fff;
  color: #000;
  overflow: hidden;
}

.brxe-pixflow-two-factor-setup__qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.brxe-pixflow-two-factor-setup__qr.is-error {
  color: #9d1c1c;
}

.brxe-pixflow-two-factor-setup__manual {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.brxe-pixflow-two-factor-setup__manual p {
  margin: 0;
}

.brxe-pixflow-two-factor-setup__manual code {
  overflow-wrap: anywhere;
}

.brxe-pixflow-two-factor-setup__enrollment-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  width: auto;
  max-width: none;
  max-height: calc(100dvh - 20px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.brxe-pixflow-two-factor-setup__enrollment-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.brxe-pixflow-two-factor-setup__enrollment-dialog[data-pf2fa-builder-preview]:not([data-pf2fa-builder-preview="account"])[open]:not(:modal) {
  z-index: 100000;
}

.brxe-pixflow-two-factor-setup__enrollment-dialog[data-pf2fa-builder-preview]:not([data-pf2fa-builder-preview="account"])[open]:not(:modal) > .brxe-pixflow-two-factor-setup__enrollment-panel {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
}

.brxe-pixflow-two-factor-setup__enrollment-panel {
  --pf2fa-accent: #5c3fd7;
  position: relative;
  display: grid;
  gap: clamp(15px, 4vw, 30px);
  width: min(440px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  margin-inline: auto;
  padding: clamp(15px, 5vw, 30px);
  background: #fff;
  overflow: auto;
}

.brxe-pixflow-two-factor-setup__enrollment-close {
  position: absolute;
  z-index: 1;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  place-items: center;
  cursor: pointer;
}

.brxe-pixflow-two-factor-setup__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 15px;
  list-style: none;
}

.brxe-pixflow-two-factor-setup__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #718096;
}

.brxe-pixflow-two-factor-setup__step > .brxe-pixflow-two-factor-setup__step-number {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  width: 22.5px;
  height: 22.5px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  place-items: center;
}

.brxe-pixflow-two-factor-setup__step > strong {
  font-size: 14px;
}

.brxe-pixflow-two-factor-setup__step-number::before {
  content: attr(data-step-number);
}

.brxe-pixflow-two-factor-setup__step-done {
  display: none;
  width: 1em;
  height: 1em;
  line-height: 1;
  place-items: center;
}

.brxe-pixflow-two-factor-setup__step-done i,
.brxe-pixflow-two-factor-setup__step-done svg,
.brxe-pixflow-two-factor-setup__step-done-icon {
  display: block;
  width: 1em;
  height: 1em;
  font-size: 1em;
}

.brxe-pixflow-two-factor-setup__step.is-active,
.brxe-pixflow-two-factor-setup__step.is-complete {
  color: var(--pf2fa-accent);
}

.brxe-pixflow-two-factor-setup__step.is-active > .brxe-pixflow-two-factor-setup__step-number,
.brxe-pixflow-two-factor-setup__step.is-complete > .brxe-pixflow-two-factor-setup__step-number {
  border-color: var(--pf2fa-accent);
  background: var(--pf2fa-accent);
  color: #fff;
}

.brxe-pixflow-two-factor-setup__step.is-complete .brxe-pixflow-two-factor-setup__step-number::before {
  content: none;
}

.brxe-pixflow-two-factor-setup__step.is-complete .brxe-pixflow-two-factor-setup__step-done {
  display: grid;
}

.brxe-pixflow-two-factor-setup__enrollment-stage {
  display: grid;
  justify-items: center;
  gap: 15px;
  text-align: center;
}

.brxe-pixflow-two-factor-setup__passkey-label {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: start;
}

.brxe-pixflow-two-factor-setup__passkey-label input {
  width: 100%;
}

.brxe-pixflow-two-factor-setup__method-back {
  justify-self: center;
}

.brxe-pixflow-two-factor-setup__enrollment-copy {
  display: grid;
  gap: 6px;
}

.brxe-pixflow-two-factor-setup__enrollment-stage h3,
.brxe-pixflow-two-factor-setup__enrollment-stage p {
  margin: 0;
}

.brxe-pixflow-two-factor-setup__enrollment-error {
  padding: 8px 10px;
  border: 1px solid #d92d20;
  border-radius: 4px;
  background: #fff1f0;
  color: #8a1c13;
  text-align: center;
}

.brxe-pixflow-two-factor-setup__manual {
  width: 100%;
}

.brxe-pixflow-two-factor-setup__setup-key {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: #fff;
  text-align: start;
}

.brxe-pixflow-two-factor-setup__setup-key code {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 1;
  border-inline-end: 1px solid var(--bricks-border-color);
}

.brxe-pixflow-two-factor-setup__copy-key {
  position: relative;
  display: grid;
  align-self: stretch;
  width: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  place-items: center;
  cursor: pointer;
}

.brxe-pixflow-two-factor-setup__copy-key span {
  position: absolute;
  inset-block-end: calc(100% + 4.5px);
  inset-inline-start: 50%;
  padding: 3px 5px;
  border-radius: 2.5px;
  background: #111;
  color: #fff;
  font-size: 7.5px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.brxe-pixflow-two-factor-setup__copy-key:hover span,
.brxe-pixflow-two-factor-setup__copy-key:focus-visible span,
.brxe-pixflow-two-factor-setup__copy-key[data-tooltip="Copied"] span {
  opacity: 1;
}

.brxe-pixflow-two-factor-setup__code-field {
  display: grid;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.brxe-pixflow-two-factor-setup__code-field legend {
  margin-inline: auto;
  padding-bottom: 20px;
  color: #718096;
}

.brxe-pixflow-two-factor-setup__code-inputs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(4px, 2vw, 9px);
  width: min(300px, 100%);
  margin-inline: auto;
}

.brxe-pixflow-two-factor-setup__code-inputs input {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  font-size: clamp(12.5px, 4vw, 20px);
  text-align: center;
}

.brxe-pixflow-two-factor-setup__code-inputs input:focus {
  border-color: var(--pf2fa-code-focus, var(--pf2fa-accent));
  box-shadow: 0 0 0 1px var(--pf2fa-code-focus, var(--pf2fa-accent));
  outline: none;
}

.brxe-pixflow-two-factor-setup__enrollment-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7.5px;
  width: 100%;
}

.brxe-pixflow-two-factor-setup__codes {
  columns: 2;
  padding: 15px 20px 15px 35px;
  background-color: #fff;
  gap: 50px;
  font-size: 16px;
}

.brxe-pixflow-two-factor-setup__code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7.5px;
}

.brxe-pixflow-two-factor-setup__dialog {
  max-width: min(400px, calc(100vw - 20px));
  padding: 30px;
  border: 0;
  border-radius: 5px;
}

.brxe-pixflow-two-factor-setup__dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.brxe-pixflow-two-factor-setup__dialog[data-pf2fa-builder-preview="authorization"][open]:not(:modal) {
  position: fixed;
  z-index: 100000;
  inset: 50% auto auto 50%;
  margin: 0;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
}

.brxe-pixflow-two-factor-setup__dialog form {
  display: grid;
  gap: 10px;
}

.brxe-pixflow-two-factor-setup__dialog [data-pf2fa-authorization] {
  margin: 10px 0;
}

.brxe-pixflow-two-factor-setup__dialog-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 600px) {
  .brxe-pixflow-two-factor-setup__method {
    align-items: stretch;
    flex-direction: column;
  }

  .brxe-pixflow-two-factor-setup__method > div {
    max-width: none;
  }

  .brxe-pixflow-two-factor-setup__codes {
    columns: 1;
  }

  .brxe-pixflow-two-factor-setup__steps {
    gap: 4px;
  }

  .brxe-pixflow-two-factor-setup__step {
    align-items: flex-start;
    flex-direction: column;
    font-size: 8px;
  }
}