:root {
  --bpui-color-brand: #d11149;
  --bpui-color-accent: #e6c229;
  --bpui-color-gray-0: #f6f7f7;
  --bpui-color-gray-2: #f0f0f1;
  --bpui-color-gray-5: #dcdcde;
  --bpui-color-gray-10: #c3c4c7;
  --bpui-color-gray-20: #a7aaad;
  --bpui-color-gray-30: #8c8f94;
  --bpui-color-gray-40: #787c82;
  --bpui-color-gray-50: #646970;
  --bpui-color-gray-60: #50575e;
  --bpui-color-gray-70: #3c434a;
  --bpui-color-gray-80: #2c3338;
  --bpui-color-gray-90: #1d2327;
  --bpui-color-gray-100: #101517;
  --bpui-space-0: 0;
  --bpui-space-1: 0.25rem;
  --bpui-space-2: 0.5rem;
  --bpui-space-3: 0.75rem;
  --bpui-space-4: 1rem;
  --bpui-space-5: 1.25rem;
  --bpui-space-6: 1.5rem;
  --bpui-space-8: 2rem;
  --bpui-space-10: 2.5rem;
  --bpui-space-12: 3rem;
  --bpui-space-16: 4rem;
  --bpui-space-20: 5rem;
  --bpui-space-24: 6rem;
  --bpui-space-28: 7rem;
  --bpui-space-32: 8rem;
  --bpui-space-40: 10rem;
  --bpui-space-48: 12rem;
  --bpui-space-56: 14rem;
  --bpui-space-64: 16rem;
  --bpui-space-px: 1px;
  --bpui-space-half: 0.125rem;
  --bpui-max-width-xs: 32ch;
  --bpui-max-width-sm: 40ch;
  --bpui-max-width-md: 60ch;
  --bpui-max-width-lg: 70ch;
  --bpui-max-width-xl: 85ch;
  --bpui-max-width-page: 80rem;
  --bpui-leading-none: 1;
  --bpui-leading-tight: 1.1;
  --bpui-leading-medium: 1.2;
  --bpui-leading-base: 1.55;
  --bpui-leading-loose: 1.8;
  --bpui-tracking-tight: -0.05em;
  --bpui-tracking-base: auto;
  --bpui-tracking-wide: 0.05em;
  --bpui-tracking-loose: 0.1em;
  --bpui-radius-base: 0.25rem;
  --bpui-radius-full: 99999px;
  --bpui-shadow-sm: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
  	0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
  --bpui-shadow-default: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
  	0 0.2rem 0.4rem rgba(0, 0, 0, 0.05), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05);
  --bpui-shadow-lg: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05),
  	0 0.4rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.6rem 1rem rgba(0, 0, 0, 0.05);
  --bpui-shadow-xl: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05),
  	0 0.6rem 0.8rem rgba(0, 0, 0, 0.05), 0 0.8rem 1.2rem rgba(0, 0, 0, 0.05),
  	0 1rem 1.6rem rgba(0, 0, 0, 0.05);
  --bpui-shadow-2xl: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.05),
  	0 0.8rem 1rem rgba(0, 0, 0, 0.05), 0 1rem 1.4rem rgba(0, 0, 0, 0.05),
  	0 1.2rem 2rem rgba(0, 0, 0, 0.05), 0 1.4rem 2.2rem rgba(0, 0, 0, 0.05);
}

.bpui-container {
  background-color: white;
  border-radius: var(--bpui-radius-base);
  box-shadow: var(--bpui-shadow-xl);
  margin-right: var(--bpui-space-5);
  margin-top: var(--bpui-space-5);
  max-width: 820px;
}
.bpui-container__inner {
  padding: var(--bpui-space-6) var(--bpui-space-8);
}

.bpui-form > * + * {
  margin-top: var(--bpui-space-3);
}

.bpui-form__footer {
  border-top: 2px solid var(--bpui-color-gray-2);
  padding-top: var(--bpui-space-4);
  margin-top: var(--bpui-space-4);
}

@media (min-width: 768px) {
  .bpui-form-field {
    display: grid;
    grid-template-columns: 1fr 16rem;
    gap: var(--bpui-space-3);
  }
  .bpui-form-field label {
    font-weight: 700;
  }
  .bpui-form-field p {
    color: var(--bpui-bpui-color-gray-40);
    margin: 0;
    margin-top: var(--bpui-space-1);
  }
  .bpui-form-field__input {
    align-items: flex-start;
    display: flex;
    justify-content: flex-end;
  }
}