> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supercycle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Identity verification

> Verify customers' identities with face-matching liveness checks against government-issued IDs before they rent

export const adminRiskScope = () => ({
  AdminCustomerRisk,
  AdminWindow,
  BorderBox,
  FIcon,
  Knob,
  PBadge,
  PBlockStack,
  PBox,
  PButton,
  PCard,
  PIcon,
  PIndexTable,
  PInlineStack,
  PLayout,
  PLink,
  PPage,
  PSection,
  PSelect,
  PText,
  PTextField,
  RIcon,
  RiskCustomerPage,
  RiskModal,
  RiskRow,
  RiskSettings,
  RiskTermsCard,
  RiskToggleCard,
  SaveBar,
  SettingSection,
  SettingsPage
});

export const AdminCustomerRisk = ({feature}) => {
  const {AdminWindow, PButton, RiskCustomerPage, RiskRow} = adminRiskScope();
  const idFlow = feature === "identityVerification";
  const [requested, setRequested] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const request = () => {
    setRequested(true);
    setToast("ID verification requested");
  };
  stepsRef.current = () => idFlow ? [{
    to: w => w.querySelector('[data-tour="request-id"]'),
    click: request,
    hold: 3200
  }] : [];
  resetRef.current = () => {
    setRequested(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  const idRow = !idFlow ? <RiskRow icon="checkCircle" tone="Success" title="Identity verified" subtitle="Id number" /> : requested ? <RiskRow icon="clock" tone="Subdued" title="Identity verification requested" subtitle="Pending" /> : <RiskRow icon="minusCircle" tone="Subdued" title="Identity verification not requested" action={<PButton size="Slim" onClick={request} tour="request-id">Request ID verification</PButton>} />;
  return <AdminWindow windowRef={idFlow ? windowRef : undefined} cursor={idFlow ? cursor : undefined} bind={idFlow ? bind : undefined} url="admin.shopify.com/store/summit/apps/supercycle/customers/renton-mcborrow" toast={toast}>
      <style>{RISK_CSS}</style>
      <RiskCustomerPage idRow={idRow} />
    </AdminWindow>;
};

export const AdminCustomerRiskIdCheck = () => {
  const {AdminCustomerRisk} = adminRiskScope();
  return <AdminCustomerRisk feature="identityVerification" />;
};

export const RiskCustomerPage = ({idRow}) => {
  const {BorderBox, PBlockStack, PButton, PCard, PIndexTable, PLayout, PPage, PSection, PText, RiskRow} = adminRiskScope();
  return <PPage title="Renton McBorrow" actions={[<PButton>View in Shopify</PButton>]}>
      <PLayout>
        <PSection>
          <PBlockStack gap="300">
            <PCard>
              <PBlockStack gap="300">
                <PBlockStack gap="050"><PText variant="headingSm">Cycles</PText><PText tone="subdued">Every cycle on this customer's account.</PText></PBlockStack>
                <BorderBox padding="0"><PIndexTable headings={["Cycle", "Product", "Status", "Return by"]} rows={riskCycles().map(r => r.map((c, i) => typeof c === "string" ? <PText key={i}>{c}</PText> : c))} /></BorderBox>
              </PBlockStack>
            </PCard>
            <PCard>
              <PBlockStack gap="300">
                <PText variant="headingSm">Memberships</PText>
                <PText tone="subdued">No active memberships.</PText>
              </PBlockStack>
            </PCard>
          </PBlockStack>
        </PSection>
        <PSection variant="oneThird">
          <PBlockStack gap="300">
            <PCard>
              <PBlockStack gap="200">
                <PText variant="headingSm">Customer</PText>
                <PBlockStack gap="050"><PText>Renton McBorrow</PText><PText tone="subdued">Customer since March 2026</PText><PText tone="subdued">2 orders</PText></PBlockStack>
              </PBlockStack>
            </PCard>
            <PCard>
              <PBlockStack gap="200">
                <PText variant="headingSm">Risk</PText>
                <div>
                  {idRow}
                  <RiskRow icon="checkCircle" tone="Success" title="Vaulted credit card" subtitle="Visa ending in 4242" />
                </div>
              </PBlockStack>
            </PCard>
          </PBlockStack>
        </PSection>
      </PLayout>
    </PPage>;
};

export const riskCycles = () => {
  const {PBadge} = adminRiskScope();
  return [["SC-1042", "Coastal Breeze Top", <PBadge tone="Success">With customer</PBadge>, "Sep 18, 2026"], ["SC-0987", "Moonlit Cardigan", <PBadge>Complete</PBadge>, "Jul 2, 2026"]];
};

export const RiskRow = ({icon, tone, title, subtitle, action}) => {
  const {PBlockStack, PBox, PIcon, PText, RIcon} = adminRiskScope();
  return <div className="sca-risk-row">
      <RIcon name={icon} tone={tone} />
      <div className="sca-risk-row-text">
        <PBlockStack gap="0"><PText>{title}</PText>{subtitle && <PText tone="subdued" variant="bodySm">{subtitle}</PText>}</PBlockStack>
        {action && <PBox paddingBlockStart="200">{action}</PBox>}
      </div>
      {!action && <PIcon name="chevronRight" tone="Subdued" />}
    </div>;
};

export const AdminAddTerms = () => {
  const {AdminWindow, PTextField, RiskModal, RiskSettings, RiskTermsCard, SettingsPage} = adminRiskScope();
  const [terms, setTerms] = useState(RISK_TERMS);
  const [modal, setModal] = useState(false);
  const [fields, setFields] = useState({
    title: "",
    url: ""
  });
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const open = () => {
    setFields({
      title: "",
      url: ""
    });
    setModal(true);
  };
  const add = () => setFields(f => {
    setTerms(t => [...t, {
      id: Date.now(),
      title: f.title || "Untitled",
      created: "Today",
      options: 0
    }]);
    setModal(false);
    setToast("Terms saved");
    return f;
  });
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="terms-add"]'),
    click: open,
    hold: 900
  }, {
    to: w => w.querySelector("#terms-title"),
    click: () => {},
    type: () => [v => setFields(f => ({
      ...f,
      title: v
    })), "Damage policy"],
    hold: 400
  }, {
    to: w => w.querySelector("#terms-url"),
    click: () => {},
    type: () => [v => setFields(f => ({
      ...f,
      url: v
    })), "/pages/damage-policy"],
    hold: 600
  }, {
    to: w => w.querySelector('[data-tour="terms-save"]'),
    click: add,
    hold: 2800
  }];
  resetRef.current = () => {
    setTerms(RISK_TERMS);
    setModal(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/settings/risk" toast={toast} modal={<RiskModal open={modal} title="Add terms" onClose={() => setModal(false)} primary={add} primaryLabel="Save" primaryTour="terms-save">
        <PTextField id="terms-title" label="Title" placeholder="Rental terms" value={fields.title} onChange={v => setFields(f => ({
    ...f,
    title: v
  }))} helpText="The link text customers see on the acceptance row." />
        <PTextField id="terms-url" label="URL" placeholder="/pages/rental-terms" value={fields.url} onChange={v => setFields(f => ({
    ...f,
    url: v
  }))} helpText="A full URL, a store-relative path, or a bare domain." />
      </RiskModal>}>
      <style>{FEES_CSS}</style><style>{RISK_CSS}</style>
      <SettingsPage selected="risk">
        <RiskSettings vaulting onVaulting={() => {}} deposits={false} onDeposits={() => {}} terms={<RiskTermsCard enabled onChange={() => {}} terms={terms} onAdd={open} />} />
      </SettingsPage>
    </AdminWindow>;
};

export const RiskTermsCard = ({enabled, onChange, terms, onAdd}) => {
  const {BorderBox, PBlockStack, PButton, PIndexTable, PInlineStack, PLink, PText, RiskToggleCard} = adminRiskScope();
  return <RiskToggleCard title="Terms and conditions" description="Require customers to accept your terms before they rent." enabled={enabled} onChange={onChange} tour="risk-terms">
      <PBlockStack gap="300">
        <BorderBox padding="0">
          <PIndexTable headings={["Terms", "Created", "Options"]} emptyState="No terms added" rows={terms.map(t => [<PText><PLink monochrome removeUnderline>{t.title}</PLink></PText>, <PText>{t.created}</PText>, <PText>{t.options}</PText>])} />
        </BorderBox>
        <PInlineStack align="end"><PButton onClick={onAdd} tour="terms-add">Add terms</PButton></PInlineStack>
      </PBlockStack>
    </RiskToggleCard>;
};

export const RISK_TERMS = [{
  id: 1,
  title: "Rental terms",
  created: "Aug 5, 2026",
  options: 3
}];

export const AdminDepositsSettings = () => {
  const {AdminWindow, BorderBox, PBlockStack, PButton, PIndexTable, PInlineStack, PText, PTextField, RiskModal, RiskSettings, SaveBar, SettingsPage} = adminRiskScope();
  const [product, setProduct] = useState(false);
  const [modal, setModal] = useState(false);
  const [title, setTitle] = useState("Deposit");
  const [prices, setPrices] = useState([]);
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const create = () => {
    setProduct(true);
    setModal(false);
    setToast("Deposit product created");
  };
  const addPrice = () => {
    setPrices(p => [...p, {
      id: Date.now(),
      amount: ""
    }]);
    setDirty(true);
  };
  const setLast = v => setPrices(p => p.map((x, i) => i === p.length - 1 ? {
    ...x,
    amount: v
  } : x));
  const save = () => {
    setDirty(false);
    setToast("Settings saved successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="deposit-setup"]'),
    click: () => setModal(true),
    hold: 1200
  }, {
    to: w => w.querySelector('[data-tour="deposit-create"]'),
    click: create,
    hold: 1400
  }, {
    to: w => w.querySelector('[data-tour="deposit-add-price"]'),
    click: addPrice,
    hold: 600
  }, {
    to: w => {
      const f = w.querySelectorAll('[id^="deposit-price-"]');
      return f[f.length - 1];
    },
    click: () => {},
    type: () => [setLast, "150.00"],
    hold: 700
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    setProduct(false);
    setModal(false);
    setTitle("Deposit");
    setPrices([]);
    setDirty(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  const body = product ? <PBlockStack gap="300">
      <PBlockStack gap="050"><PText>Deposit prices</PText><PText tone="subdued">Each price becomes a variant on the Deposit product in Shopify.</PText></PBlockStack>
      <BorderBox padding="0">
        <PIndexTable headings={["Price", ""]} emptyState="No deposit prices" rows={prices.map(p => [<PTextField id={"deposit-price-" + p.id} label="Price" labelHidden prefix="£" placeholder="0.00" value={p.amount} onChange={v => {
    setPrices(ps => ps.map(x => x.id === p.id ? {
      ...x,
      amount: v
    } : x));
    setDirty(true);
  }} />, <PInlineStack align="end"><PButton iconOnly icon="delete" tone="Critical" ariaLabel="Remove price" onClick={() => {
    setPrices(ps => ps.filter(x => x.id !== p.id));
    setDirty(true);
  }} /></PInlineStack>])} />
      </BorderBox>
      <PInlineStack align="end"><PButton onClick={addPrice} tour="deposit-add-price">Add price</PButton></PInlineStack>
    </PBlockStack> : <PInlineStack align="space-between" blockAlign="center" gap="400">
      <PText tone="subdued">Create a product in Shopify to use for deposits. This product will be used to secure bookings and protect against cancellations.</PText>
      <PButton variant="Primary" onClick={() => setModal(true)} tour="deposit-setup">Set up</PButton>
    </PInlineStack>;
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/settings/risk" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setPrices([]);
    setDirty(false);
  }} onSave={save} />} modal={<RiskModal open={modal} title="Set up deposit product" onClose={() => setModal(false)} primary={create} primaryLabel="Create product" primaryTour="deposit-create">
        <PTextField id="deposit-title" label="Title" value={title} onChange={setTitle} helpText="The product title customers see in the cart and at checkout." />
      </RiskModal>}>
      <style>{FEES_CSS}</style><style>{RISK_CSS}</style>
      <SettingsPage selected="risk"><RiskSettings vaulting={false} onVaulting={() => {}} deposits onDeposits={() => {}} depositsBody={body} /></SettingsPage>
    </AdminWindow>;
};

export const AdminRiskSettings = ({feature = "cardVaulting"}) => {
  const {AdminWindow, PText, RiskSettings, SaveBar, SettingsPage} = adminRiskScope();
  const [vaulting, setVaulting] = useState(false);
  const [deposits, setDeposits] = useState(false);
  const [dirty, setDirty] = useState(false);
  const [spot, setSpot] = useState(null);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const save = () => {
    setDirty(false);
    setToast("Settings saved successfully");
  };
  const reset = () => {
    setVaulting(false);
    setDeposits(false);
    setDirty(false);
    setSpot(null);
    setToast(null);
  };
  stepsRef.current = () => feature === "identityVerification" ? [{
    to: w => w.querySelector('[data-tour="risk-upgrade"]'),
    pre: () => setSpot("identityVerification"),
    hold: 3600
  }] : [{
    to: w => w.querySelector(feature === "deposits" ? '[data-tour="risk-deposits"]' : '[data-tour="risk-card-vaulting"]'),
    click: () => {
      (feature === "deposits" ? setDeposits : setVaulting)(true);
      setDirty(true);
    },
    hold: 1500
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = reset;
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/settings/risk" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setVaulting(false);
    setDeposits(false);
    setDirty(false);
  }} onSave={save} />}>
      <style>{FEES_CSS}</style><style>{RISK_CSS}</style>
      <SettingsPage selected="risk">
        <RiskSettings vaulting={vaulting} onVaulting={v => {
    setVaulting(v);
    setDirty(true);
  }} deposits={deposits} onDeposits={v => {
    setDeposits(v);
    setDirty(true);
  }} spot={spot} depositsBody={<PText tone="subdued">Create a product in Shopify to use for deposits. This product will be used to secure bookings and protect against cancellations.</PText>} />
      </SettingsPage>
    </AdminWindow>;
};

export const RiskSettings = ({vaulting, onVaulting, deposits, onDeposits, spot, depositsBody, terms}) => {
  const {PBlockStack, PButton, PPage, PSelect, PTextField, RiskToggleCard, SettingSection} = adminRiskScope();
  return <div className="settings-page-content">
      <PPage title="Risk">
        <PBlockStack gap="400">
          <SettingSection title="Dunning" description="Configure how Supercycle should handle failed subscription charges.">
            <div className="Polaris-InlineGrid" style={{
    "--pc-inline-grid-grid-template-columns-xs": "repeat(2, minmax(0, 1fr))",
    "--pc-inline-grid-gap-xs": sp(400)
  }}>
              <PTextField id="dunning-retries" label="Maximum retries" value="6" onChange={() => {}} />
              <PTextField id="dunning-interval" label="Time between retries" value="1" onChange={() => {}} connectedRight={<PSelect id="dunning-unit" label="Time between retries unit" options={["Days"]} />} />
            </div>
          </SettingSection>
          <RiskToggleCard title="Card vaulting" description="Save a customer's payment method to enable you to charge that card." enabled={vaulting} onChange={onVaulting} tour="risk-card-vaulting" spot={spot === "cardVaulting"} />
          <RiskToggleCard title="Deposits" description="Use deposits to secure bookings and protect against cancellations." enabled={deposits} onChange={onDeposits} tour="risk-deposits" spot={spot === "deposits"}>
            {depositsBody}
          </RiskToggleCard>
          <RiskToggleCard title="Identity verification" description="Verify customer identity before allowing them to rent items." spot={spot === "identityVerification"} action={<PButton icon="lock" tour="risk-upgrade">Upgrade</PButton>} />
          {terms}
        </PBlockStack>
      </PPage>
    </div>;
};

export const RiskModal = ({open, title, onClose, primary, primaryLabel, primaryTour, children}) => {
  const {PBlockStack, PBox, PButton, PInlineStack, PText} = adminRiskScope();
  if (!open) return null;
  return <>
      <div className="Polaris-Backdrop" onClick={onClose} />
      <div className="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
        <div><div role="dialog" aria-modal="true" aria-labelledby="risk-modal-title" tabIndex={-1} className="Polaris-Modal-Dialog Polaris-Modal-Dialog--entered"><div className="Polaris-Modal-Dialog__Modal">
          <PBox background="bg-surface-tertiary" borderColor="border" borderBlockEndWidth="025" padding="400">
            <div className="Polaris-InlineGrid" style={{
    "--pc-inline-grid-grid-template-columns-xs": "1fr auto",
    "--pc-inline-grid-gap-xs": sp(400)
  }}>
              <PInlineStack gap="400" blockAlign="center"><PText variant="headingMd" as="h2" id="risk-modal-title" className="Polaris-Text--break">{title}</PText></PInlineStack>
              <PButton variant="Tertiary" iconOnly icon="x" ariaLabel="Close" onClick={onClose} />
            </div>
          </PBox>
          <div className="Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Modal__Body" data-polaris-scrollable="true">
            <div className="Polaris-Modal-Section"><PBox as="section" padding="400"><PBlockStack gap="400">{children}</PBlockStack></PBox></div>
          </div>
          <PInlineStack gap="400" blockAlign="center"><PBox borderColor="border" borderBlockStartWidth="025" padding="400" width="100%">
            <PInlineStack align="space-between" blockAlign="center" gap="400">
              <div className="Polaris-Box" />
              <PInlineStack gap="200"><PButton onClick={onClose}>Cancel</PButton><PButton variant="Primary" onClick={primary} tour={primaryTour}>{primaryLabel}</PButton></PInlineStack>
            </PInlineStack>
          </PBox></PInlineStack>
        </div></div></div>
      </div>
    </>;
};

export const RiskToggleCard = ({title, description, enabled, onChange, action, tour, spot, children}) => {
  const {FIcon, Knob, PBlockStack, PBox, PButton, PCard, PInlineStack, PText} = adminRiskScope();
  return <div className={spot ? "sca-risk-spot" : undefined} data-tour={tour ? tour + "-card" : undefined}>
      <PCard padding="0">
        <PBox paddingBlock="300" paddingInline="400">
          <PInlineStack blockAlign="center" align="space-between" gap="300" wrap={false}>
            <div style={{
    flex: 1,
    minWidth: 0
  }}>
              <PBlockStack gap="050">
                <PInlineStack gap="100" blockAlign="center">
                  <PText variant="headingSm">{title}</PText>
                  <PButton variant="Plain" iconOnly ariaLabel="Learn more"><FIcon name="info" /></PButton>
                </PInlineStack>
                <PText tone="subdued">{description}</PText>
              </PBlockStack>
            </div>
            {action ? action : <div data-tour={tour}><Knob selected={enabled} onClick={() => onChange && onChange(!enabled)} ariaLabel={title} /></div>}
          </PInlineStack>
        </PBox>
        {children && enabled && <PBox padding="400" paddingBlockStart="0">{children}</PBox>}
      </PCard>
    </div>;
};

export const RISK_CSS = `
  .sca .Polaris-Icon--toneSuccess svg { fill: var(--p-color-icon-success); }
  .sca .Polaris-Icon--toneCaution svg { fill: var(--p-color-icon-caution); }
  .sca .sca-risk-row { display: flex; align-items: center; gap: var(--p-space-300); padding: var(--p-space-200) 0; cursor: pointer; }
  .sca .sca-risk-row + .sca-risk-row { border-top: var(--p-border-width-025) solid var(--p-color-border-secondary); }
  .sca .sca-risk-row .sca-risk-row-text { flex: 1; min-width: 0; }
  .sca .sca-risk-spot { outline: 2px solid var(--p-color-border-focus); outline-offset: 2px; border-radius: var(--p-border-radius-200); transition: outline-color 150ms ease; }
`;

export const RIcon = ({name, tone}) => {
  const {PIcon} = adminRiskScope();
  return <PIcon paths={RISK_ICONS[name]} tone={tone} />;
};

export const RISK_ICONS = {
  checkCircle: [{
    d: "M13.28 9.03a.75.75 0 0 0-1.06-1.06l-2.97 2.97-1.22-1.22a.75.75 0 0 0-1.06 1.06l1.75 1.75a.75.75 0 0 0 1.06 0l3.5-3.5Z"
  }, {
    fr: true,
    d: "M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0-1.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z"
  }],
  clock: [{
    d: "M10.75 6.75a.75.75 0 0 0-1.5 0v3.5c0 .199.079.39.22.53l2 2a.75.75 0 1 0 1.06-1.06l-1.78-1.78v-3.19Z"
  }, {
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
  }],
  minusCircle: [{
    d: "M6.75 9.25a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Z"
  }, {
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
  }]
};

export const adminFixedFeesScope = () => ({
  AdminWindow,
  BorderBox,
  CalendarMethodSettings,
  CalendarSettings,
  FIcon,
  Knob,
  MethodsPage,
  PBlockStack,
  PBox,
  PButton,
  PCard,
  PDivider,
  PIcon,
  PIndexTable,
  PInlineStack,
  PLayout,
  PPage,
  PSection,
  PText,
  PTextField,
  SaveBar,
  SettingSection,
  SettingToggle,
  SettingsPage,
  VerticalTabs
});

export const COASTAL_OPTIONS = [{
  name: "4 days",
  days: 4,
  price: 30
}, {
  name: "7 days",
  days: 7,
  price: 45
}, {
  name: "14 days",
  days: 14,
  price: 70
}];

export const SETTINGS_TABS = [["methods", "Methods", "transaction"], ["channels", "Channels", "store"], ["risk", "Risk", "personLock"], ["logistics", "Logistics and locations", "delivery"], ["portal", "Customer accounts", "person"], ["custom-data", "Custom data", "metafields"], ["languages", "Languages", "language"], ["emails", "Emails", "email"], ["integrations", "Integrations", "code"], ["plan", "Plan", "plan"], ["features", "Beta features", "toggleOn"]];

export const FEES_CSS = `
  /* assets/VerticalTabs.scss */
  .sca .VerticalTabs .VerticalTabs__Item { cursor: pointer; }
  .sca .VerticalTabs .VerticalTabs__Item:hover { background-color: var(--p-color-bg-surface-secondary-hover); }
  .sca .VerticalTabs .VerticalTabs__Item__Pip { opacity: 0; display: block; position: absolute; top: 0.6rem; bottom: 0.6rem; left: 0; width: 0.1875rem; background-color: var(--p-color-bg-fill-brand-selected); border-top-right-radius: var(--p-border-radius-100); border-bottom-right-radius: var(--p-border-radius-100); }
  .sca .VerticalTabs .VerticalTabs__Item--Active .VerticalTabs__Item__Pip { opacity: 1; }
  /* assets/Settings.scss */
  .sca .settings-page-content > .Polaris-Page { padding: 0; }
  .sca .settings-page-content > .Polaris-Page > .Polaris-Box { padding-top: 0; padding-bottom: var(--p-space-300); }
`;

export const FEE_ICONS = {
  transaction: [{
    d: "M4.5 4.75a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-6.75h6.94l-.72.72a.75.75 0 1 0 1.06 1.06l2-2a.75.75 0 0 0 0-1.06l-2-2a.75.75 0 1 0-1.06 1.06l.72.72h-6.94v-2.25Z"
  }, {
    d: "M17 4.75a.75.75 0 0 0-1.5 0v7.25h-6.94l.72-.72a.75.75 0 1 0-1.06-1.06l-2 2a.75.75 0 0 0 0 1.06l2 2a.75.75 0 0 0 1.06-1.06l-.72-.72h6.94v1.75a.75.75 0 0 0 1.5 0v-10.5Z"
  }],
  store: [{
    fr: true,
    d: "M13.257 3h-6.514a1.25 1.25 0 0 0-.983.478l-2.386 3.037a1.75 1.75 0 0 0-.374 1.08v.655a2.75 2.75 0 0 0 1.5 2.45v4.55c0 .966.784 1.75 1.75 1.75h7.5a1.75 1.75 0 0 0 1.75-1.75v-4.55a2.75 2.75 0 0 0 1.5-2.45v-.481c0-.504-.17-.994-.48-1.39l-2.28-2.901a1.25 1.25 0 0 0-.983-.478Zm-.257 12.5h.75a.25.25 0 0 0 .25-.25v-4.25a2.742 2.742 0 0 1-2-.863 2.742 2.742 0 0 1-2 .863 2.742 2.742 0 0 1-2-.863 2.742 2.742 0 0 1-2 .863v4.25c0 .138.112.25.25.25h3.75v-2.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v2.5Zm-7-6h-.25c-.69 0-1.25-.56-1.25-1.25v-.654a.25.25 0 0 1 .053-.155l2.312-2.941h6.27l2.205 2.805a.75.75 0 0 1 .16.464v.481c0 .69-.56 1.25-1.25 1.25h-.25c-.69 0-1.25-.56-1.25-1.25v-.5a.75.75 0 0 0-1.5 0v.5a1.25 1.25 0 1 1-2.5 0v-.5a.75.75 0 0 0-1.5 0v.5c0 .69-.56 1.25-1.25 1.25Z"
  }],
  personLock: [{
    fr: true,
    d: "M8 4.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-3.5 2a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm10.25 3a.75.75 0 0 1 .75.75v1.75h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1v-1.75a2.25 2.25 0 0 0-4.5 0 .75.75 0 0 0 1.5 0 .75.75 0 0 1 .75-.75Zm-2.25 4v2h4v-2h-4Zm-7.193-.153a5.24 5.24 0 0 0-1.718 2.16h5.724a.75.75 0 1 1 0 1.5h-5.93c-.407 0-.804-.167-1.073-.478a1.263 1.263 0 0 1-.24-1.243c.322-.96 1.094-2.246 2.361-3.157 1.298-.932 3.084-1.445 5.33-.854a.75.75 0 1 1-.382 1.45c-1.798-.473-3.126-.058-4.072.622Z"
  }],
  delivery: [{
    fr: true,
    d: "M4 5.25a.75.75 0 0 1 .75-.75h6.991a2.75 2.75 0 0 1 2.645 1.995l.427 1.494a.25.25 0 0 0 .18.173l1.681.421a1.75 1.75 0 0 1 1.326 1.698v1.219a1.75 1.75 0 0 1-1.032 1.597 2.5 2.5 0 1 1-4.955.153h-3.025a2.5 2.5 0 1 1-4.78-.75h-.458a.75.75 0 0 1 0-1.5h2.5c.03 0 .06.002.088.005a2.493 2.493 0 0 1 1.947.745h4.43a2.493 2.493 0 0 1 1.785-.75c.698 0 1.33.286 1.783.748a.25.25 0 0 0 .217-.248v-1.22a.25.25 0 0 0-.19-.242l-1.682-.42a1.75 1.75 0 0 1-1.258-1.217l-.427-1.494a1.25 1.25 0 0 0-1.202-.907h-6.991a.75.75 0 0 1-.75-.75Zm2.5 9.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
  }, {
    d: "M3.25 8a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5h-5Z"
  }],
  person: [{
    fr: true,
    d: "M10 3a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm-2 3.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"
  }, {
    fr: true,
    d: "M15.484 14.227a6.274 6.274 0 0 0-10.968 0l-.437.786a1.338 1.338 0 0 0 1.17 1.987h9.502a1.338 1.338 0 0 0 1.17-1.987l-.437-.786Zm-9.657.728a4.773 4.773 0 0 1 8.346 0l.302.545h-8.95l.302-.545Z"
  }],
  metafields: [{
    d: "M6.25 9.5c-.414 0-.75.336-.75.75s.336.75.75.75h7.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.5Z"
  }, {
    fr: true,
    d: "M6.5 4c-1.105 0-2 .895-2 2v.505l-.083.036c-1.011.433-1.667 1.428-1.667 2.528v4.181c0 1.519 1.231 2.75 2.75 2.75h9c1.519 0 2.75-1.231 2.75-2.75v-4.181c0-1.1-.656-2.095-1.667-2.528l-.083-.036v-.505c0-1.105-.895-2-2-2h-.5c-1.105 0-2 .895-2 2h-2c0-1.105-.895-2-2-2h-.5Zm-.5 2c0-.276.224-.5.5-.5h.5c.276 0 .5.224.5.5v.75c0 .414.336.75.75.75h3.5c.414 0 .75-.336.75-.75v-.75c0-.276.224-.5.5-.5h.5c.276 0 .5.224.5.5v1c0 .3.179.571.455.69l.537.23c.46.197.758.649.758 1.149v4.181c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25v-4.181c0-.5.298-.952.758-1.15l.537-.23c.276-.118.455-.389.455-.689v-1Z"
  }],
  language: [{
    fr: true,
    d: "M7.705 5.494a.75.75 0 0 0-1.41 0l-2 5.5a.75.75 0 1 0 1.41.512l.187-.514a.743.743 0 0 0 .108.008h2.111l.184.506a.75.75 0 1 0 1.41-.512l-2-5.5Zm-.705 2.45.566 1.556h-1.132l.566-1.555Z"
  }, {
    fr: true,
    d: "M15.25 8.25h-.1a6.831 6.831 0 0 1-.495 1.84 5.808 5.808 0 0 1-.795 1.334c.295.164.631.3 1.016.4a.75.75 0 0 1-.377 1.452 5.665 5.665 0 0 1-1.78-.793 5.666 5.666 0 0 1-1.78.793.75.75 0 1 1-.377-1.452c.385-.1.721-.236 1.016-.4a5.808 5.808 0 0 1-.794-1.334 6.831 6.831 0 0 1-.496-1.84h-.038a.75.75 0 1 1 0-1.5h1.75v-.75a.75.75 0 0 1 1.5 0v.75h1.75a.75.75 0 0 1 0 1.5Zm-3.447 0c.053.331.157.779.359 1.248.136.318.316.644.557.952.24-.308.42-.634.557-.952a5.38 5.38 0 0 0 .359-1.248h-1.832Z"
  }, {
    fr: true,
    d: "M14.5 15.75h-3.879l-1.56 1.56a1.5 1.5 0 0 1-2.561-1.06v-.5h-1a3.5 3.5 0 0 1-3.5-3.5v-6a3.5 3.5 0 0 1 3.5-3.5h9a3.5 3.5 0 0 1 3.5 3.5v6a3.5 3.5 0 0 1-3.5 3.5Zm-6.5.5 2-2h4.5a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-9a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2.5v2Z"
  }],
  email: [{
    fr: true,
    d: "M5.75 4.5c-1.519 0-2.75 1.231-2.75 2.75v5.5c0 1.519 1.231 2.75 2.75 2.75h8.5c1.519 0 2.75-1.231 2.75-2.75v-5.5c0-1.519-1.231-2.75-2.75-2.75h-8.5Zm-1.25 2.75c0-.69.56-1.25 1.25-1.25h8.5c.69 0 1.25.56 1.25 1.25v5.5c0 .69-.56 1.25-1.25 1.25h-8.5c-.69 0-1.25-.56-1.25-1.25v-5.5Zm2.067.32c-.375-.175-.821-.013-.997.363-.175.375-.013.821.363.997l3.538 1.651c.335.156.723.156 1.058 0l3.538-1.651c.376-.176.538-.622.363-.997-.175-.376-.622-.538-.997-.363l-3.433 1.602-3.433-1.602Z"
  }],
  code: [{
    d: "M12.221 4.956a.75.75 0 0 0-1.442-.412l-3 10.5a.75.75 0 1 0 1.442.412l3-10.5Z"
  }, {
    d: "M7.03 6.22a.75.75 0 0 1 0 1.06l-2.72 2.72 2.72 2.72a.75.75 0 0 1-1.06 1.06l-3.25-3.25a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
  }, {
    d: "M12.97 13.78a.75.75 0 0 1 0-1.06l2.72-2.72-2.72-2.72a.75.75 0 0 1 1.06-1.06l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0Z"
  }],
  plan: [{
    d: "m14.208 4.688 1.533-2.3a.25.25 0 0 0-.208-.388h-3.066a.25.25 0 0 0-.208.389l1.533 2.299a.25.25 0 0 0 .416 0Z"
  }, {
    fr: true,
    d: "M11.25 7c0-.69.56-1.25 1.25-1.25h3.25c.69 0 1.25.56 1.25 1.25v8.75c0 .69-.56 1.25-1.25 1.25h-11.5c-.69 0-1.25-.56-1.25-1.25v-2.75c0-.69.56-1.25 1.25-1.25h2.75v-1.75c0-.69.56-1.25 1.25-1.25h3v-1.75Zm2.25 2.5v-2.25h2v8.25h-10.25v-2.25h3.25a.75.75 0 0 0 .75-.75v-2.25h3.5a.75.75 0 0 0 .75-.75Z"
  }],
  toggleOn: [{
    d: "M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
  }, {
    fr: true,
    d: "M8 4.5a5.5 5.5 0 1 0 0 11h4a5.5 5.5 0 1 0 0-11h-4Zm-4 5.5a4 4 0 0 1 4-4h4a4 4 0 0 1 0 8h-4a4 4 0 0 1-4-4Z"
  }],
  calendarCheck: [{
    fr: true,
    d: "M7.75 3.5a.75.75 0 0 0-1.5 0v.407a3.075 3.075 0 0 0-.702.252 3.75 3.75 0 0 0-1.64 1.639c-.226.444-.32.924-.365 1.47-.043.531-.043 1.187-.043 2v1.513c0 .79 0 1.428.041 1.944.042.532.131 1 .346 1.434a3.75 3.75 0 0 0 1.704 1.704c.435.215.902.304 1.434.346.517.041 1.154.041 1.944.041h.031a.75.75 0 0 0 0-1.5c-.829 0-1.406 0-1.856-.036-.442-.035-.696-.1-.89-.196a2.25 2.25 0 0 1-1.022-1.023c-.095-.193-.16-.447-.196-.889-.035-.45-.036-1.027-.036-1.856v-1.25h10v1.5a.75.75 0 0 0 1.5 0v-1.732c0-.813 0-1.469-.043-2-.045-.546-.14-1.026-.366-1.47a3.75 3.75 0 0 0-1.639-1.64 3.076 3.076 0 0 0-.702-.251v-.407a.75.75 0 0 0-1.5 0v.259c-.373-.009-.794-.009-1.268-.009h-1.964c-.474 0-.895 0-1.268.009v-.259Zm7.241 4.5a10.674 10.674 0 0 0-.03-.61c-.037-.453-.106-.714-.206-.911a2.25 2.25 0 0 0-.984-.984c-.197-.1-.458-.17-.912-.207-.462-.037-1.056-.038-1.909-.038h-1.9c-.852 0-1.447 0-1.91.038-.453.037-.714.107-.911.207a2.25 2.25 0 0 0-.984.984c-.1.197-.17.458-.207.912-.014.18-.023.38-.03.609h9.983Z"
  }, {
    d: "M17.28 12.72a.75.75 0 0 1 0 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.75-1.75a.75.75 0 1 1 1.06-1.06l1.22 1.22 2.97-2.97a.75.75 0 0 1 1.06 0Z"
  }],
  emailFollowUp: [{
    d: "M3 7.25a2.75 2.75 0 0 1 2.75-2.75h8.5a2.75 2.75 0 0 1 2.75 2.75v2.5a.75.75 0 0 1-1.5 0v-2.5c0-.69-.56-1.25-1.25-1.25h-8.5c-.69 0-1.25.56-1.25 1.25v5.5c0 .69.56 1.25 1.25 1.25h4.25a.75.75 0 0 1 0 1.5h-4.25a2.75 2.75 0 0 1-2.75-2.75v-5.5Z"
  }, {
    d: "M11.75 14.25a.75.75 0 0 1 .75-.75h2.94l-.72-.72a.75.75 0 1 1 1.06-1.06l2 2a.75.75 0 0 1 0 1.06l-2 2a.75.75 0 1 1-1.06-1.06l.72-.72h-2.94a.75.75 0 0 1-.75-.75Z"
  }, {
    d: "M6.567 7.57a.75.75 0 0 0-.634 1.36l3.538 1.651a1.25 1.25 0 0 0 1.058 0l3.538-1.651a.75.75 0 0 0-.634-1.36l-3.433 1.603-3.433-1.602Z"
  }],
  info: [{
    d: "M10 14a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-.75.75Z"
  }, {
    d: "M9 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
  }, {
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
  }]
};

export const FIcon = ({name, tone}) => {
  const {PIcon} = adminFixedFeesScope();
  return <PIcon paths={FEE_ICONS[name]} tone={tone} />;
};

export const SettingToggle = ({title, description, icon, enabled, onChange, children}) => {
  const {BorderBox, FIcon, Knob, PBlockStack, PBox, PDivider, PInlineStack, PText} = adminFixedFeesScope();
  return <BorderBox padding="0">
      <PBlockStack gap="0">
        <div style={{
    width: "100%",
    height: "100%",
    padding: "var(--p-space-300)"
  }}>
          <PInlineStack blockAlign="center" gap="300" wrap={false}>
            {icon && <div className="Polaris-Box"><FIcon name={icon} tone="Subdued" /></div>}
            <div style={{
    flex: 1,
    minWidth: 0
  }}>
              <PBlockStack><PText>{title}</PText><PText variant="bodyMd" tone="subdued">{description}</PText></PBlockStack>
            </div>
            <Knob selected={enabled} onClick={() => onChange && onChange(!enabled)} ariaLabel={title} />
          </PInlineStack>
        </div>
        {children && enabled && <><PDivider /><PBox padding="300">{children}</PBox></>}
      </PBlockStack>
    </BorderBox>;
};

export const SettingSection = ({title, description, learnMore, children}) => {
  const {FIcon, PBlockStack, PBox, PButton, PCard, PInlineStack, PText} = adminFixedFeesScope();
  return <PCard padding="0">
      <PBox paddingBlock="300" paddingInline="400">
        <PInlineStack blockAlign="center" align="space-between" gap="300" wrap={false}>
          <PInlineStack gap="200" blockAlign="center" align="start">
            <PBox paddingBlock="100">
              <PBlockStack gap="050">
                <PInlineStack gap="150" blockAlign="baseline">
                  <PInlineStack gap="100" blockAlign="center">
                    <PText variant="headingSm" truncate>{title}</PText>
                    {learnMore && <PButton variant="Plain" iconOnly ariaLabel="Learn more"><FIcon name="info" /></PButton>}
                  </PInlineStack>
                </PInlineStack>
                {description && <PText tone="subdued">{description}</PText>}
              </PBlockStack>
            </PBox>
          </PInlineStack>
        </PInlineStack>
      </PBox>
      {children && <PBox padding="400" paddingBlockStart="0">{children}</PBox>}
    </PCard>;
};

export const VerticalTabs = ({selected}) => {
  const {FIcon, PBlockStack, PBox, PCard, PDivider, PInlineStack, PText} = adminFixedFeesScope();
  return <div className="VerticalTabs">
      <PCard padding="0">
        <PBox padding="400"><PInlineStack blockAlign="center" gap="300"><PText variant="headingMd">Settings</PText></PInlineStack></PBox>
        {SETTINGS_TABS.map(([id, label, icon]) => {
    const active = id === selected;
    return <div key={id}>
              <PDivider />
              <div className={"VerticalTabs__Item" + (active ? " VerticalTabs__Item--Active" : "")}>
                <PBox padding="300" paddingInlineStart="400" style={{
      position: "relative",
      "--pc-box-color": active ? "var(--p-color-text-primary)" : "var(--p-color-text)"
    }}>
                  <div className="VerticalTabs__Item__Pip" />
                  <PInlineStack gap="300" align="start" blockAlign="center" wrap={false}>
                    <div className="Polaris-Box"><FIcon name={icon} /></div>
                    <div style={{
      flex: 1
    }}><PBlockStack gap="0"><PText fontWeight="medium">{label}</PText></PBlockStack></div>
                  </PInlineStack>
                </PBox>
              </div>
            </div>;
  })}
      </PCard>
    </div>;
};

export const SettingsPage = ({selected, children}) => {
  const {PBox, PLayout, PSection, VerticalTabs} = adminFixedFeesScope();
  return <div className="Polaris-Page">
      <PBox style={{
    "--pc-box-padding-block-start-xs": sp(400),
    "--pc-box-padding-block-start-md": sp(600),
    "--pc-box-padding-block-end-xs": sp(400),
    "--pc-box-padding-block-end-md": sp(600),
    "--pc-box-padding-inline-start-xs": sp(400),
    "--pc-box-padding-inline-start-sm": sp(0),
    "--pc-box-padding-inline-end-xs": sp(400),
    "--pc-box-padding-inline-end-sm": sp(0)
  }} />
      <PLayout>
        <PSection variant="oneThird"><VerticalTabs selected={selected} /></PSection>
        <PSection>{children}</PSection>
      </PLayout>
    </div>;
};

export const CalendarMethodSettings = ({fees, onFeeChange, onAddFee, onRemoveFee, fixedDates, onFixedDates, reminder, onReminder}) => {
  const {BorderBox, PBlockStack, PBox, PButton, PIndexTable, PInlineStack, PPage, PTextField, SettingSection, SettingToggle} = adminFixedFeesScope();
  return <div className="settings-page-content">
      <PPage title="Calendar method" actions={[<PButton>Learn more</PButton>]}>
        <PBlockStack gap="400">
          <SettingSection title="Fixed dates">
            <SettingToggle title="Fix all cycles in an order to the same dates" description="A single shipping fee will apply to all cycles for that order." icon="calendarCheck" enabled={fixedDates} onChange={onFixedDates} />
          </SettingSection>
          <SettingSection title="Fixed fees" description="Define fees that are added to every booking." learnMore>
            <BorderBox padding="0">
              <PIndexTable headings={["Name", "Amount", ""]} emptyState="No fixed fees" rows={fees.map((f, i) => [<PTextField id={"fee-name-" + f.id} label="Name" labelHidden value={f.name} placeholder="Cleaning fee" onChange={v => onFeeChange(f.id, "name", v)} />, <PTextField id={"fee-amount-" + f.id} label="Amount" labelHidden prefix="£" value={f.amount} placeholder="0.00" onChange={v => onFeeChange(f.id, "amount", v)} />, <PInlineStack align="end"><PButton iconOnly icon="delete" tone="Critical" ariaLabel="Remove fixed fee" onClick={() => onRemoveFee(f.id)} /></PInlineStack>])} />
            </BorderBox>
            <PBox paddingBlockStart="400"><PInlineStack align="end"><PButton onClick={onAddFee} tour="add-fee">Add fixed fee</PButton></PInlineStack></PBox>
          </SettingSection>
          <SettingSection title="Emails" description="Configure reminder emails sent to your customers">
            <SettingToggle title="Return item reminder" description="Send a reminder email to customers before their items are due to be returned." icon="emailFollowUp" enabled={reminder} onChange={onReminder}>
              <PTextField id="reminder-days" label="Days in advance" value="2" onChange={() => {}} />
            </SettingToggle>
          </SettingSection>
        </PBlockStack>
      </PPage>
    </div>;
};

export const AdminExcludeFixedFee = () => {
  const {AdminWindow, CalendarSettings, MethodsPage, SaveBar} = adminFixedFeesScope();
  const initial = {
    "fee-cleaning": "20.00",
    "fee-insurance": "5.00"
  };
  const [values, setValues] = useState(initial);
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const save = () => {
    setDirty(false);
    setToast("Saved successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector("#fee-cleaning"),
    click: () => {
      setValues(v => ({
        ...v,
        "fee-cleaning": ""
      }));
      setDirty(true);
    },
    type: () => [t => setValues(v => ({
      ...v,
      "fee-cleaning": t
    })), "0.00"],
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    setValues(initial);
    setDirty(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  const fees = [{
    id: "fee-cleaning",
    label: "Cleaning fee",
    value: values["fee-cleaning"],
    placeholder: "20.00"
  }, {
    id: "fee-insurance",
    label: "Insurance",
    value: values["fee-insurance"],
    placeholder: "12.00"
  }];
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/products/horizon-blazer/methods/calendar" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setValues(initial);
    setDirty(false);
  }} onSave={save} />}>
      <style>{FEES_CSS}</style>
      <MethodsPage title="Horizon Blazer methods" activeKeys={["membership", "calendar", "subscription", "resale"]} settings={<CalendarSettings enabled options={COASTAL_OPTIONS} onAddOption={() => {}} onToggle={() => {}} fees={fees} onFeeChange={(id, v) => {
    setValues(s => ({
      ...s,
      [id]: v
    }));
    setDirty(true);
  }} />} />
    </AdminWindow>;
};

export const AdminCreateFixedFee = () => {
  const {AdminWindow, CalendarMethodSettings, SaveBar, SettingsPage} = adminFixedFeesScope();
  const initial = [{
    id: 1,
    name: "Cleaning fee",
    amount: "20.00"
  }];
  const [fees, setFees] = useState(initial);
  const [dirty, setDirty] = useState(false);
  const [fixedDates, setFixedDates] = useState(false);
  const [reminder, setReminder] = useState(true);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const edit = (id, key, v) => {
    setFees(fs => fs.map(f => f.id === id ? {
      ...f,
      [key]: v
    } : f));
    setDirty(true);
  };
  const add = () => {
    setFees(fs => [...fs, {
      id: Date.now(),
      name: "",
      amount: ""
    }]);
    setDirty(true);
  };
  const remove = id => {
    setFees(fs => fs.filter(f => f.id !== id));
    setDirty(true);
  };
  const save = () => {
    setDirty(false);
    setToast("Settings saved successfully");
  };
  const lastId = () => fees[fees.length - 1] && fees[fees.length - 1].id;
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="add-fee"]'),
    click: add,
    hold: 700
  }, {
    to: w => {
      const rows = w.querySelectorAll('[id^="fee-name-"]');
      return rows[rows.length - 1];
    },
    click: () => {},
    type: () => [v => setFees(fs => fs.map((f, i) => i === fs.length - 1 ? {
      ...f,
      name: v
    } : f)), "Insurance"],
    hold: 400
  }, {
    to: w => {
      const rows = w.querySelectorAll('[id^="fee-amount-"]');
      return rows[rows.length - 1];
    },
    click: () => {},
    type: () => [v => setFees(fs => fs.map((f, i) => i === fs.length - 1 ? {
      ...f,
      amount: v
    } : f)), "12.00"],
    hold: 700
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    setFees(initial);
    setDirty(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/settings/methods/calendar" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setFees(initial);
    setDirty(false);
  }} onSave={save} />}>
      <style>{FEES_CSS}</style>
      <SettingsPage selected="methods">
        <CalendarMethodSettings fees={fees} onFeeChange={edit} onAddFee={add} onRemoveFee={remove} fixedDates={fixedDates} onFixedDates={v => {
    setFixedDates(v);
    setDirty(true);
  }} reminder={reminder} onReminder={v => {
    setReminder(v);
    setDirty(true);
  }} />
      </SettingsPage>
    </AdminWindow>;
};

export const AdminFixedFeesOnProduct = () => {
  const {AdminWindow, CalendarSettings, MethodsPage} = adminFixedFeesScope();
  return <AdminWindow url="admin.shopify.com/store/summit/apps/supercycle/products/coastal-breeze-top/methods/calendar">
      <style>{FEES_CSS}</style>
      <MethodsPage title="Coastal Breeze Top methods" activeKeys={["membership", "calendar", "subscription", "resale"]} settings={<CalendarSettings enabled options={COASTAL_OPTIONS} onAddOption={() => {}} onToggle={() => {}} fees={[{
    id: "fee-cleaning",
    label: "Cleaning fee",
    value: "20.00",
    placeholder: "20.00"
  }, {
    id: "fee-insurance",
    label: "Insurance",
    value: "12.00",
    placeholder: "12.00"
  }]} />} />
    </AdminWindow>;
};

export const adminCalendarSetupScope = () => ({
  AdminWindow,
  AvailabilityCard,
  BooleanTitle,
  BorderBox,
  CalendarSettings,
  HeaderCard,
  InventoryCard,
  Knob,
  MethodsCard,
  MethodsPage,
  OptionModal,
  PBadge,
  PBlockStack,
  PBox,
  PButton,
  PCard,
  PDataTable,
  PDivider,
  PIcon,
  PIndexTable,
  PInlineStack,
  PLayout,
  PLink,
  PPage,
  PSection,
  PSelect,
  PTabs,
  PText,
  PTextField,
  RentalMethod,
  SaveBar,
  SettingToggleCard,
  StatsCard,
  SupercycleMark,
  ToggleSection,
  TourCursor
});

export const DEFAULT_FEES = [{
  id: "fee-dry-cleaning",
  label: "Dry Cleaning",
  value: "",
  placeholder: "15.00"
}];

export const ToggleSection = ({icon, title, enabled, onToggle}) => {
  const {Knob, PBox, PButton, PIcon, PInlineStack, PText} = adminCalendarSetupScope();
  return <div className="Polaris-Modal-Section">
      <section className="Polaris-Box" style={{
    "--pc-box-background": "var(--p-color-bg-surface-tertiary)",
    "--pc-box-padding-block-start-xs": sp(0),
    "--pc-box-padding-block-end-xs": sp(0),
    "--pc-box-padding-inline-start-xs": sp(0),
    "--pc-box-padding-inline-end-xs": sp(0)
  }}>
        <div style={{
    cursor: "pointer"
  }}>
          <PBox padding="400">
            <PInlineStack gap="200" align="space-between">
              <PInlineStack gap="200" blockAlign="center"><div className="Polaris-Box"><PIcon name={icon} /></div><PText>{title}</PText></PInlineStack>
              <div style={{
    flex: 1
  }} />
              <Knob selected={enabled} onClick={onToggle} ariaLabel={title} />
              <PButton variant="Tertiary" iconOnly icon="caretDown" ariaLabel={"Expand " + title} />
            </PInlineStack>
          </PBox>
        </div>
      </section>
    </div>;
};

export const Knob = ({selected, onClick, ariaLabel}) => <button className={"Knob-track" + (selected ? " on" : "")} aria-label={ariaLabel} role="switch" type="button" aria-checked={selected ? "true" : "false"} onClick={e => {
  e.stopPropagation();
  onClick && onClick();
}}>
    <div className={"Knob" + (selected ? " on" : "")} />
  </button>;

export const BALL_GOWN_OPTIONS = [{
  name: "4 days",
  days: 4,
  price: 155.99
}, {
  name: "7 days",
  days: 7,
  price: 217.99
}, {
  name: "14 days",
  days: 14,
  price: 327.99
}];

export const MethodsPage = ({title, activeKeys, settings, selectedKey = "calendar"}) => {
  const {MethodsCard, PBlockStack, PLayout, PPage, PSection} = adminCalendarSetupScope();
  return <PPage title={title}>
      <PLayout>
        <PSection variant="oneThird"><PBlockStack gap="300"><MethodsCard activeKeys={activeKeys} selectedKey={selectedKey} /></PBlockStack></PSection>
        <PSection>{settings}</PSection>
      </PLayout>
    </PPage>;
};

export const sleep = ms => new Promise(r => setTimeout(r, ms));

export const useTour = (windowRef, stepsRef, resetRef) => {
  const [cursor, setCursor] = useState({
    x: 60,
    y: 60,
    visible: false,
    down: false,
    ripple: 0
  });
  const paused = useRef(false);
  const alive = useRef(true);
  useEffect(() => {
    alive.current = true;
    if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return undefined;
    const run = async () => {
      await sleep(1500);
      while (alive.current) {
        let restart = false;
        const steps = stepsRef.current();
        for (const step of steps) {
          let wasPaused = false;
          while (paused.current && alive.current) {
            wasPaused = true;
            await sleep(200);
          }
          if (!alive.current) return;
          if (wasPaused) {
            restart = true;
            break;
          }
          const el = step.to && windowRef.current && step.to(windowRef.current);
          if (el) {
            const wr = windowRef.current.getBoundingClientRect();
            const r = el.getBoundingClientRect();
            setCursor(c => ({
              ...c,
              visible: true,
              x: r.left + r.width / 2 - wr.left,
              y: r.top + r.height / 2 - wr.top
            }));
            await sleep(780);
            if (!alive.current) return;
            step.pre && step.pre();
            if (step.pre) await sleep(220);
          }
          if (step.click) {
            setCursor(c => ({
              ...c,
              down: true,
              ripple: c.ripple + 1
            }));
            await sleep(140);
            setCursor(c => ({
              ...c,
              down: false
            }));
            step.click();
          }
          if (step.type) {
            const [set, text] = step.type();
            for (let i = 1; i <= text.length; i++) {
              set(text.slice(0, i));
              await sleep(85);
              if (!alive.current) return;
            }
          }
          await sleep(step.hold ?? 900);
        }
        if (!alive.current) return;
        if (!restart) {
          setCursor(c => ({
            ...c,
            visible: false
          }));
          await sleep(700);
        }
        resetRef.current();
        await sleep(restart ? 400 : 1100);
      }
    };
    run();
    return () => {
      alive.current = false;
    };
  }, []);
  const bind = {
    onMouseEnter: () => {
      paused.current = true;
    },
    onMouseLeave: () => {
      paused.current = false;
    }
  };
  return {
    cursor,
    bind
  };
};

export const TourCursor = ({cursor}) => <div className={"sca-cursor" + (cursor.down ? " is-down" : "")} style={{
  transform: "translate(" + cursor.x + "px, " + cursor.y + "px)",
  opacity: cursor.visible ? 1 : 0
}} aria-hidden="true">
    <span key={cursor.ripple} className={"sca-ripple" + (cursor.ripple ? " go" : "")} />
    <svg viewBox="0 0 18 22"><path d="M2 1.5v16.2l4.4-4.1 3.1 6.9 2.6-1.2-3-6.6h6.3z" fill="#fff" stroke="#111" strokeWidth="1.3" strokeLinejoin="round" /></svg>
  </div>;

export const boxStyle = p => {
  const s = {};
  const set = (k, v) => {
    if (v !== undefined && v !== null) s["--pc-box-" + k] = v;
  };
  const pad = (side, v) => set("padding-" + side + "-xs", sp(v));
  if (p.padding !== undefined) ["block-start", "block-end", "inline-start", "inline-end"].forEach(k => pad(k, p.padding));
  if (p.paddingBlock !== undefined) ["block-start", "block-end"].forEach(k => pad(k, p.paddingBlock));
  if (p.paddingInline !== undefined) ["inline-start", "inline-end"].forEach(k => pad(k, p.paddingInline));
  if (p.paddingBlockStart !== undefined) pad("block-start", p.paddingBlockStart);
  if (p.paddingBlockEnd !== undefined) pad("block-end", p.paddingBlockEnd);
  if (p.paddingInlineStart !== undefined) pad("inline-start", p.paddingInlineStart);
  if (p.paddingInlineEnd !== undefined) pad("inline-end", p.paddingInlineEnd);
  set("background", p.background && "var(--p-color-" + p.background + ")");
  set("border-color", p.borderColor && "var(--p-color-" + p.borderColor + ")");
  set("border-style", p.borderColor && "solid");
  set("border-width", p.borderWidth && "var(--p-border-width-" + p.borderWidth + ")");
  set("border-block-start-width", p.borderBlockStartWidth && "var(--p-border-width-" + p.borderBlockStartWidth + ")");
  set("border-block-end-width", p.borderBlockEndWidth && "var(--p-border-width-" + p.borderBlockEndWidth + ")");
  set("border-radius", p.borderRadius && "var(--p-border-radius-" + p.borderRadius + ")");
  set("width", p.width);
  set("min-width", p.minWidth);
  set("max-width", p.maxWidth);
  set("min-height", p.minHeight);
  set("overflow-x", p.overflowX);
  set("overflow-y", p.overflowY);
  return {
    ...s,
    ...p.style || ({})
  };
};

export const sp = n => "var(--p-space-" + n + ")";

export const ADMIN_CSS = `
  .sca { width: 100%; min-width: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  .sca *, .sca *::before, .sca *::after { box-sizing: border-box; }
  .sca-window { position: relative; width: 100%; min-width: 0; max-width: 640px; height: auto; max-height: 520px; margin: 0 auto; display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; touch-action: pan-y;
    box-shadow: 0 0 0 1px rgba(11,13,24,.06), 0 1px 2px rgba(11,13,24,.024), 0 3px 6px rgba(11,13,24,.03), 0 8px 14px rgba(11,13,24,.035), 0 16px 28px rgba(11,13,24,.04); }
  /* Polaris' title metadata slot isn't in polaris-css.jsx; it sits inline with
     the h1 with a small gap, which is all the rule does. */
  .sca .Polaris-Header-Title__TitleWrapper { display: flex; align-items: center; gap: var(--p-space-200); flex-wrap: wrap; }
  .sca .Polaris-Header-Title__TitleMetadata { display: inline-flex; align-items: center; }
  /* Mintlify rewrites native <table> in MDX and adds its own utilities:
     my-[1em] and py-[1em] for rhythm, a negative -mx to bleed to the page edge,
     and an oversized width to match. It also hoists the className onto a wrapper
     div, so this can't be qualified with a table element selector. Inside a
     render every one of those is wrong; the margin and padding showed as an empty
     band under the bulk bar whenever a selection replaced the header row. */
  .sca-polaris .Polaris-IndexTable__Table,
  .sca-polaris .Polaris-DataTable__Table { margin: 0; padding: 0; width: 100%; max-width: 100%; }
  .sca-titlebar { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #ebebeb; background: #fff; font-size: 12px; }
  .sca-dot { width: 9px; height: 9px; border-radius: 50%; background: #e3e3e3; }
  .sca-url { margin: 0 auto; min-width: 0; max-width: calc(100% - 48px); font-size: 11px; color: #85817a; background: #f3f2ee; border-radius: 6px; padding: 3px 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sca-page { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; background: #f1f1f1; scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent; }
  .sca-page::-webkit-scrollbar { width: 6px; }
  .sca-page::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 3px; }
  /* Drawn at 1066px (the 640px frame at the old 0.6 zoom) and scaled to the
     column. container-name: scr is what polaris-css.jsx's @container queries
     measure, so a phone viewport cannot switch the page to a mobile layout. */
  .sca-zoom { display: flex; flex-direction: column; container-type: inline-size; container-name: scr; }
  /* Touch: the window is a picture of the desktop admin. Don't capture the
     page scroll the way a nested overflow:auto region would. */
  @media (pointer: coarse) { .sca-page { overflow: hidden; overscroll-behavior: auto; } }
  .sca-polaris { background: var(--p-color-bg); min-height: 100%; }
  .sca-polaris .Polaris-Page { padding-bottom: var(--p-space-400); }
  /* Shopify top bar with the App Bridge contextual save bar */
  .sca-topbar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 6px 12px; background: #1a1a1a; color: #e3e3e3; font-size: 12px; min-height: 36px; }
  .sca-topbar-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; color: #fff; }
  .sca-topbar-logo .sc-bag { width: 16px; height: 16px; border-radius: 4px; background: #95bf47; display: grid; place-items: center; color: #fff; }
  .sca-topbar-logo .sc-bag svg { width: 11px; height: 11px; }
  .sca-topbar-store { display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px; color: #e3e3e3; font-weight: 550; }
  .sca-topbar-store .sc-av { width: 16px; height: 16px; border-radius: 50%; background: #08b27d; display: grid; place-items: center; color: #f7f5ec; }
  .sca-savebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 4px 3px 12px; background: #303030; border-radius: 10px; min-width: 260px; }
  .sca-savebar-msg { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; white-space: nowrap; }
  .sca-savebar-msg svg { width: 16px; height: 16px; flex: none; }
  .sca-sbtn { font: inherit; height: 26px; padding: 0 12px; border-radius: 8px; border: 0; font-size: 12px; font-weight: 550; cursor: pointer; }
  .sca-sbtn-dark { background: #4a4a4a; color: #e3e3e3; } .sca-sbtn-dark:hover { background: #616161; }
  .sca-sbtn-light { background: #fff; color: #303030; } .sca-sbtn-light:hover { background: #f1f1f1; }
  /* Shopify admin's embedded-app title bar */
  .sca-appbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e3e3e3; background: #f1f1f1; font-size: 14px; }
  .sca-appbar-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: #303030; }
  .sca-applogo { width: 20px; height: 20px; display: block; }
  .sca-appbar .Polaris-Icon { color: #4a4a4a; }
  /* App-specific styles from web/frontend/src/assets/App.scss */
  .sca-polaris .RentalMethod { cursor: pointer; }
  .sca-polaris .RentalMethod > .Polaris-Box { transition: all var(--p-motion-duration-500) var(--p-motion-ease-out); background-color: var(--p-color-bg-surface); border: var(--p-border-width-025) solid var(--p-color-border); border-radius: var(--p-border-radius-200); position: relative; }
  .sca-polaris .RentalMethod .VerticalTabs__Item__Pip { opacity: 0; display: block; position: absolute; top: 0.8rem; bottom: 0.8rem; left: 0; width: 0.1875rem; background-color: var(--p-color-bg-fill-brand-selected); border-top-right-radius: var(--p-border-radius-100); border-bottom-right-radius: var(--p-border-radius-100); }
  .sca-polaris .RentalMethod:hover > .Polaris-Box, .sca-polaris .RentalMethod.hover > .Polaris-Box { color: var(--p-color-text-primary-hover); border-color: var(--p-color-border-hover); background-color: var(--p-color-bg-surface-hover); }
  .sca-polaris .RentalMethod.active > .Polaris-Box { color: var(--p-color-text-primary-selected); border-color: var(--p-color-border-selected); background-color: var(--p-color-bg-surface-selected); }
  /* Knob toggle, from components/Knob.module.css */
  .sca .Knob-track { --track-height: 1.25rem; position: relative; height: var(--track-height); width: 2rem; flex: none; background: var(--p-color-icon-secondary); padding: 0.25rem; box-shadow: inset 0 0.0625rem 0.25rem rgba(0,0,0,.05); border: none; border-radius: 0.375rem; cursor: pointer; outline: none; transition: background var(--p-motion-duration-50) var(--p-motion-ease); }
  .sca .Knob-track:hover { background: rgba(97,97,97,1); }
  .sca .Knob-track.on { background: var(--p-color-bg-inverse); }
  .sca .Knob-track.on:hover { background: rgba(48,48,48,1); }
  .sca .Knob { height: 0.75rem; width: 0.75rem; border-radius: 0.1875rem; background: var(--p-color-bg-surface); transition: transform var(--p-motion-duration-50) var(--p-motion-ease); }
  .sca .Knob.on { transform: translate(100%); }
  /* Overlays (Modal, Toast) live in the window, not the viewport. Overlay
     scale uses transform so layout and paint share one coordinate space;
     CSS zoom plus a compensated min-height mixed the two and clipped dialogs.
     Modal max-height is the overlay, never the docs viewport. */
  .sca-overlay { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
  .sca-overlay .sca-zoom { position: absolute; top: 0; left: 0; min-height: 0; display: block; transform-origin: top left; }
  .sca .sca-polaris .Polaris-Backdrop { position: absolute; }
  .sca .sca-polaris .Polaris-Modal-Dialog__Container { position: absolute; inset: 0; justify-content: center; }
  .sca .sca-polaris .Polaris-Modal-Dialog__Modal { position: relative; bottom: auto; left: auto; right: auto; width: 100%; max-width: 38.75rem; margin: 0 auto; border-radius: var(--p-border-radius-400); max-height: calc(100% - 3.75rem); }
  .sca .sca-polaris .Polaris-Modal__Body, .sca .sca-polaris .Polaris-Modal__NoScrollBody { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .sca .sca-polaris .Polaris-Frame-ToastManager { position: absolute; top: auto; left: 0; right: 0; bottom: var(--p-space-800); height: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; pointer-events: none; }
  .sca .sca-polaris .Polaris-Frame-ToastManager__ToastWrapper { position: relative; inset: auto; transform: none; translate: none; margin: 0; pointer-events: auto; }
  /* Guided cursor: glides to the control, presses, ripples */
  .sca-cursor { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; transition: transform 700ms cubic-bezier(.22,.8,.26,1), opacity 300ms ease; will-change: transform; }
  .sca-cursor svg { display: block; width: 18px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); transition: transform 120ms ease; transform-origin: 2px 2px; }
  .sca-cursor.is-down svg { transform: scale(.82); }
  .sca-ripple { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #202603; opacity: 0; }
  .sca-ripple.go { animation: sca-ripple 520ms ease-out; }
  @keyframes sca-ripple { 0% { transform: scale(.3); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
`;

export const ICONS = {
  passkey: [{
    fr: true,
    d: "M5.5 6.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5-1.567 3.5-3.5 3.5-3.5-1.567-3.5-3.5Zm3.5-2c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2Z"
  }, {
    d: "M9 12.5c-1.734 0-3.33.94-4.173 2.455l-.302.545h5.725c.414 0 .75.336.75.75s-.336.75-.75.75h-6.001c-1.02 0-1.665-1.096-1.17-1.987l.437-.786c1.106-1.992 3.206-3.227 5.484-3.227.414 0 .75.336.75.75s-.336.75-.75.75Z"
  }, {
    d: "M15.5 11.375c0 .483-.392.875-.875.875s-.875-.392-.875-.875.392-.875.875-.875.875.392.875.875Z"
  }, {
    fr: true,
    d: "M11.25 11.376c0-1.865 1.511-3.376 3.376-3.376 1.864 0 3.376 1.511 3.376 3.376v.726c0 .731-.365 1.377-.923 1.766.05.353-.002.713-.145 1.036.295.752.117 1.65-.542 2.226l-.397.347c-.915.798-2.324.604-2.989-.412l-.326-.498c-.213-.325-.326-.706-.326-1.095v-1.492c-.659-.367-1.104-1.07-1.104-1.879v-.725Zm2.41 1.457c-.074-.051-.163-.081-.26-.081-.359 0-.65-.291-.65-.65v-.726c0-1.036.84-1.876 1.876-1.876s1.876.84 1.876 1.876v.726c0 .359-.291.65-.65.65h-.247c-.106 0-.205.034-.285.092-.114.082-.19.212-.201.361l-.001.015v.02c0 .112.038.222.11.309l.282.345c.164.2.087.502-.153.6l-.003.001c-.193.08-.274.288-.22.466.02.07.062.135.125.187l.133.109c.014.01.026.021.038.033.196.196.19.523-.025.71l-.397.347c-.16.14-.383.158-.559.067-.01-.005-.021-.011-.031-.018l-.005-.002c-.034-.022-.065-.047-.094-.077l-.006-.007c-.019-.02-.036-.042-.052-.066l-.326-.498c-.053-.082-.082-.177-.082-.274v-2.267c0-.154-.076-.29-.194-.372Z"
  }],
  calendarTime: [{
    fr: true,
    d: "M6 2.25c.414 0 .75.336.75.75v.528c.487-.028 1.07-.028 1.768-.028h2.482v-.5c0-.414.336-.75.75-.75s.75.336.75.75v.604c1.296.347 2.25 1.53 2.25 2.936 0 .835-.678 1.513-1.513 1.513h-8.733c-.004.288-.004.617-.004.997v2.468c0 1.233 1 2.232 2.232 2.232.414 0 .75.336.75.75s-.336.75-.75.75c-2.061 0-3.732-1.67-3.732-3.732v-2.5c0-.813 0-1.469.043-2 .045-.546.14-1.026.366-1.47.36-.706.933-1.28 1.639-1.64.066-.033.134-.064.202-.093v-.815c0-.414.336-.75.75-.75Zm7.237 4.303h-8.61c.033-.13.072-.234.118-.324.216-.424.56-.768.984-.984.197-.1.458-.17.912-.207.462-.037 1.057-.038 1.909-.038h3.16c.85 0 1.54.69 1.54 1.54v.005l-.004.004-.004.003h-.005Z"
  }, {
    d: "M14.25 12c0-.414-.336-.75-.75-.75s-.75.336-.75.75v1.293c0 .331.132.65.366.884l.854.853c.293.293.767.293 1.06 0 .293-.293.293-.767 0-1.06l-.78-.78v-1.19Z"
  }, {
    fr: true,
    d: "M13.5 18c2.485 0 4.5-2.015 4.5-4.5s-2.015-4.5-4.5-4.5-4.5 2.015-4.5 4.5 2.015 4.5 4.5 4.5Zm0-1.5c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3Z"
  }],
  refresh: [{
    d: "M3.5 9.25a.75.75 0 0 0 1.5 0 3 3 0 0 1 3-3h6.566l-1.123 1.248a.75.75 0 1 0 1.114 1.004l2.25-2.5a.75.75 0 0 0-.027-1.032l-2.25-2.25a.75.75 0 1 0-1.06 1.06l.97.97h-6.44a4.5 4.5 0 0 0-4.5 4.5Z"
  }, {
    d: "M16.5 10.75a.75.75 0 0 0-1.5 0 3 3 0 0 1-3 3h-6.566l1.123-1.248a.75.75 0 1 0-1.114-1.004l-2.25 2.5a.75.75 0 0 0 .027 1.032l2.25 2.25a.75.75 0 0 0 1.06-1.06l-.97-.97h6.44a4.5 4.5 0 0 0 4.5-4.5Z"
  }],
  bill: [{
    fr: true,
    d: "M5.5 3.5a2 2 0 0 0-2 2v3.75c0 .414.336.75.75.75h2v5.769a.85.85 0 0 0 1.433.618l1.442-1.357 1.611 1.516a.75.75 0 0 0 1.028 0l1.611-1.516 1.442 1.357a.85.85 0 0 0 1.433-.618v-10.269a2 2 0 0 0-2-2h-8.494l.005.017a2.02 2.02 0 0 0-.261-.017Zm-.5 2a.5.5 0 0 1 1 0v3h-1v-3Zm2.75-.48-.006-.02h6.506a.5.5 0 0 1 .5.5v8.764l-.69-.649a1 1 0 0 0-1.37 0l-1.44 1.355-1.44-1.355a1 1 0 0 0-1.37 0l-.69.65v-9.245Zm2 1.48a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Zm-.75 3.75a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1-.75-.75Z"
  }],
  payoutDollar: [{
    d: "M10 4.5c-3.038 0-5.5 2.462-5.5 5.5 0 .915.223 1.777.617 2.534.191.368.048.82-.32 1.012-.367.19-.82.048-1.01-.32-.503-.966-.787-2.064-.787-3.226 0-3.866 3.134-7 7-7s7 3.134 7 7c0 1.162-.284 2.26-.786 3.226-.192.368-.644.51-1.012.32-.367-.191-.51-.644-.32-1.012.395-.757.618-1.619.618-2.534 0-3.038-2.462-5.5-5.5-5.5Z"
  }, {
    d: "M16.5 15.5c.414 0 .75.336.75.75s-.336.75-.75.75h-13c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h13Z"
  }, {
    d: "M10.9 11.375c0 .276-.224.5-.5.5h-2.25c-.415 0-.75.336-.75.75s.335.75.75.75h.5c0 .414.335.75.75.75.414 0 .75-.336.75-.75h.25c1.104 0 2-.895 2-2s-.896-2-2-2h-1c-.277 0-.5-.224-.5-.5s.223-.5.5-.5h2.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-1v-.25c0-.414-.336-.75-.75-.75-.415 0-.75.336-.75.75v.265c-.987.123-1.75.965-1.75 1.985 0 1.105.895 2 2 2h1c.276 0 .5.224.5.5Z"
  }],
  chevronRight: [{
    fr: true,
    d: "M7.72 14.53a.75.75 0 0 1 0-1.06l3.47-3.47-3.47-3.47a.75.75 0 0 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0Z"
  }],
  chevronLeft: [{
    fr: true,
    d: "M12.28 5.47a.75.75 0 0 1 0 1.06L8.81 10l3.47 3.47a.75.75 0 1 1-1.06 1.06l-4-4a.75.75 0 0 1 0-1.06l4-4a.75.75 0 0 1 1.06 0Z"
  }],
  chevronDown: [{
    fr: true,
    d: "M5.72 8.47a.75.75 0 0 1 1.06 0l3.47 3.47 3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"
  }],
  arrowLeft: [{
    fr: true,
    d: "M16.5 10a.75.75 0 0 1-.75.75h-9.69l2.72 2.72a.75.75 0 0 1-1.06 1.06l-4-4a.75.75 0 0 1 0-1.06l4-4a.75.75 0 1 1 1.06 1.06l-2.72 2.72h9.69a.75.75 0 0 1 .75.75Z"
  }],
  delete: [{
    d: "M11.5 8.25a.75.75 0 0 1 .75.75v4.25a.75.75 0 0 1-1.5 0v-4.25a.75.75 0 0 1 .75-.75Z"
  }, {
    d: "M9.25 9a.75.75 0 0 0-1.5 0v4.25a.75.75 0 0 0 1.5 0v-4.25Z"
  }, {
    fr: true,
    d: "M7.25 5.25a2.75 2.75 0 0 1 5.5 0h3a.75.75 0 0 1 0 1.5h-.75v5.45c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311c-.642.327-1.482.327-3.162.327h-.4c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311c-.327-.642-.327-1.482-.327-3.162v-5.45h-.75a.75.75 0 0 1 0-1.5h3Zm1.5 0a1.25 1.25 0 1 1 2.5 0h-2.5Zm-2.25 1.5h7v5.45c0 .865-.001 1.423-.036 1.848-.033.408-.09.559-.128.633a1.5 1.5 0 0 1-.655.655c-.074.038-.225.095-.633.128-.425.035-.983.036-1.848.036h-.4c-.865 0-1.423-.001-1.848-.036-.408-.033-.559-.09-.633-.128a1.5 1.5 0 0 1-.656-.655c-.037-.074-.094-.225-.127-.633-.035-.425-.036-.983-.036-1.848v-5.45Z"
  }],
  x: [{
    d: "M13.97 15.03a.75.75 0 1 0 1.06-1.06l-3.97-3.97 3.97-3.97a.75.75 0 0 0-1.06-1.06l-3.97 3.97-3.97-3.97a.75.75 0 0 0-1.06 1.06l3.97 3.97-3.97 3.97a.75.75 0 1 0 1.06 1.06l3.97-3.97 3.97 3.97Z"
  }],
  xSmall: [{
    d: "M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z"
  }],
  select: [{
    d: "M10.884 4.323a1.25 1.25 0 0 0-1.768 0l-2.646 2.647a.75.75 0 0 0 1.06 1.06l2.47-2.47 2.47 2.47a.75.75 0 1 0 1.06-1.06l-2.646-2.647Z"
  }, {
    d: "m13.53 13.03-2.646 2.647a1.25 1.25 0 0 1-1.768 0l-2.646-2.647a.75.75 0 0 1 1.06-1.06l2.47 2.47 2.47-2.47a.75.75 0 0 1 1.06 1.06Z"
  }],
  menuHorizontal: [{
    d: "M6 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
  }, {
    d: "M11.5 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
  }, {
    d: "M17 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
  }],
  alertCircle: [{
    d: "M10 6a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Z"
  }, {
    d: "M11 13a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
  }, {
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
  }],
  note: [{
    d: "M6.55 7.25a.7.7 0 0 1 .7-.7h5.5a.7.7 0 0 1 0 1.4h-5.5a.7.7 0 0 1-.7-.7Z"
  }, {
    d: "M7 9.05a.7.7 0 0 0 0 1.4h2.25a.7.7 0 1 0 0-1.4h-2.25Z"
  }, {
    fr: true,
    d: "M3.5 6.25a2.75 2.75 0 0 1 2.75-2.75h7.5a2.75 2.75 0 0 1 2.75 2.75v5.5a.75.75 0 0 1-.22.53l-4 4a.75.75 0 0 1-.53.22h-5.5a2.75 2.75 0 0 1-2.75-2.75v-7.5Zm2.75-1.25c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25h4.75v-2.25c0-.966.784-1.75 1.75-1.75h2.25v-4.75c0-.69-.56-1.25-1.25-1.25h-7.5Zm7.69 7.5h-1.19a.25.25 0 0 0-.25.25v1.19l1.44-1.44Z"
  }],
  lock: [{
    d: "M10.75 13.05a1.5 1.5 0 1 0-1.5 0v.45a.75.75 0 0 0 1.5 0v-.45Z"
  }, {
    fr: true,
    d: "M6.25 7.095v-.345a3.75 3.75 0 1 1 7.5 0v.345a3.001 3.001 0 0 1 2.25 2.905v4a3 3 0 0 1-3 3h-6a3 3 0 0 1-3-3v-4a3 3 0 0 1 2.25-2.905Zm1.5-.345a2.25 2.25 0 0 1 4.5 0v.25h-4.5v-.25Zm-2.25 3.25a1.5 1.5 0 0 1 1.5-1.5h6a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5v-4Z"
  }],
  person: [{
    fr: true,
    d: "M10 3a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm-2 3.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"
  }, {
    fr: true,
    d: "M15.484 14.227a6.274 6.274 0 0 0-10.968 0l-.437.786a1.338 1.338 0 0 0 1.17 1.987h9.502a1.338 1.338 0 0 0 1.17-1.987l-.437-.786Zm-9.657.728a4.773 4.773 0 0 1 8.346 0l.302.545h-8.95l.302-.545Z"
  }],
  globe: [{
    fr: true,
    d: "M3 10a7 7 0 1 1 14 0 7 7 0 0 1-14 0Zm7-5.5a5.497 5.497 0 0 0-4.737 2.703l2 1.999c.472.472.737 1.113.737 1.78v.518a.5.5 0 0 0 .5.5 2 2 0 0 1 2 2v1.478a5.504 5.504 0 0 0 4.52-3.228h-1.02a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 0-.75-.75h-2.5a1.755 1.755 0 0 1-1.07-3.144l.463-.356a.393.393 0 0 0 .152-.312v-.04c0-.885.62-1.624 1.449-1.808a5.531 5.531 0 0 0-.994-.09Zm2.875.81a1.85 1.85 0 0 1-1.477.735.352.352 0 0 0-.353.353v.04c0 .587-.271 1.14-.736 1.499l-.462.356a.256.256 0 0 0 .153.457h2.5a2.25 2.25 0 0 1 2.236 2h.713a5.497 5.497 0 0 0-2.574-5.44Zm-8.375 4.69c0-.443.052-.875.152-1.288l1.55 1.55c.19.191.298.45.298.72v.518a2 2 0 0 0 2 2 .5.5 0 0 1 .5.5v1.41a5.502 5.502 0 0 1-4.5-5.41Z"
  }],
  checkbox: [{
    d: "M13.28 8.78a.75.75 0 0 0-1.06-1.06l-2.97 2.97-1.22-1.22a.75.75 0 0 0-1.06 1.06l1.75 1.75a.75.75 0 0 0 1.06 0l3.5-3.5Z"
  }, {
    fr: true,
    d: "M6.25 3.5a2.75 2.75 0 0 0-2.75 2.75v7.5a2.75 2.75 0 0 0 2.75 2.75h7.5a2.75 2.75 0 0 0 2.75-2.75v-7.5a2.75 2.75 0 0 0-2.75-2.75h-7.5Zm-1.25 2.75c0-.69.56-1.25 1.25-1.25h7.5c.69 0 1.25.56 1.25 1.25v7.5c0 .69-.56 1.25-1.25 1.25h-7.5c-.69 0-1.25-.56-1.25-1.25v-7.5Z"
  }],
  catalog: [{
    fr: true,
    d: "M14.772 9c-.63 0-1.232.254-1.669.704l-2.628 2.709c-.642.661-.632 1.712.023 2.361l1.79 1.777c.595.59 1.557.6 2.164.02l2.933-2.802c.393-.376.615-.894.615-1.436v-1.34c0-1.1-.899-1.993-2.008-1.993h-1.22Zm.978 3c.414 0 .75-.336.75-.75s-.336-.75-.75-.75-.75.336-.75.75.336.75.75.75Z"
  }, {
    d: "M4.95 6.7c0-1.27 1.03-2.3 2.3-2.3h5.55c1.27 0 2.3 1.03 2.3 2.3v.4c0 .387.313.7.7.7.387 0 .7-.313.7-.7v-.4c0-2.043-1.656-3.7-3.7-3.7h-5.55c-2.043 0-3.7 1.657-3.7 3.7v6.55c0 2.044 1.657 3.7 3.7 3.7h1.75c.387 0 .7-.313.7-.7 0-.386-.313-.7-.7-.7h-1.75c-1.27 0-2.3-1.03-2.3-2.3v-6.55Z"
  }, {
    d: "M7 7c0-.414.336-.75.75-.75h4.5c.414 0 .75.336.75.75s-.336.75-.75.75h-4.5c-.414 0-.75-.336-.75-.75Z"
  }, {
    d: "M7 10c0-.414.336-.75.75-.75h2c.414 0 .75.336.75.75s-.336.75-.75.75h-2c-.414 0-.75-.336-.75-.75Z"
  }],
  caretDown: [{
    fr: true,
    d: "M6.24 8.2a.75.75 0 0 1 1.06.04l2.7 2.908 2.7-2.908a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 0 1 .04-1.06Z"
  }],
  caretUp: [{
    fr: true,
    d: "M6.24 11.8a.75.75 0 0 0 1.06-.04l2.7-2.908 2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 0 0 .04 1.06Z"
  }],
  filter: [{
    d: "M3 6a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5h-12.5a.75.75 0 0 1-.75-.75Z"
  }, {
    d: "M6.75 14a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
  }, {
    d: "M5.5 9.25a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5h-9Z"
  }]
};

export const METHODS = [{
  key: "membership",
  title: "Membership",
  description: "Swap items within a plan.",
  icon: "passkey"
}, {
  key: "calendar",
  title: "Calendar",
  description: "Rent for set dates.",
  icon: "calendarTime"
}, {
  key: "subscription",
  title: "Subscription",
  description: "Recurring payments until return.",
  icon: "refresh"
}, {
  key: "resale",
  title: "Resale",
  description: "Purchase item from any condition.",
  icon: "bill"
}, {
  key: "tradein",
  title: "Trade-In",
  description: "Store credit for owned items.",
  icon: "payoutDollar"
}];

export const SupercycleMark = ({size = 12}) => <svg viewBox="20.19 33.55 194.46 168.09" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M201.77,131.22l12.66-25.31c.54-1.08.1-2.38-.97-2.92-.3-.15-.63-.23-.97-.23h-10.93c-1.03,0-1.91-.73-2.1-1.74-9.13-45.49-53.4-74.97-98.89-65.84-29.17,5.85-53.06,26.69-62.83,54.79-.39,1.15.24,2.4,1.39,2.79.22.07.46.11.69.11h46.71c1.08-.01,2.03-.74,2.31-1.79,4.06-13.6,16.57-22.92,30.76-22.93,16.99,0,30.9,15.45,32.06,32.33.05,1.2-.88,2.22-2.08,2.27-.04,0-.08,0-.12,0h-18.92c-1.2,0-2.18.97-2.18,2.18,0,.34.08.67.23.97l12.66,25.31c.37.74,1.12,1.2,1.95,1.2h56.63c.82,0,1.58-.47,1.95-1.2" />
    <path d="M33.08,103.96l-12.66,25.31c-.54,1.08-.1,2.38.97,2.92.3.15.63.23.97.23h10.93c1.03,0,1.91.73,2.1,1.74,9.13,45.49,53.41,74.96,98.9,65.83,29.16-5.85,53.05-26.69,62.82-54.78.39-1.15-.24-2.4-1.39-2.79-.22-.07-.46-.11-.69-.11h-46.71c-1.08.01-2.03.74-2.31,1.79-4.06,13.6-16.57,22.92-30.76,22.93-16.99,0-30.9-15.45-32.06-32.33-.05-1.2.88-2.22,2.08-2.27.04,0,.08,0,.12,0h18.92c1.2,0,2.18-.97,2.18-2.18,0-.34-.08-.67-.23-.97l-12.66-25.31c-.37-.74-1.12-1.2-1.95-1.2h-56.63c-.82,0-1.58.47-1.95,1.2" />
  </svg>;

export const PTabs = ({tabs, selected, right}) => {
  const {PBox, PInlineStack} = adminCalendarSetupScope();
  return <div className="Polaris-Tabs__Outer">
      <PBox style={{
    "--pc-box-padding-block-start-md": sp(200),
    "--pc-box-padding-block-end-md": sp(200),
    "--pc-box-padding-inline-start-md": sp(200),
    "--pc-box-padding-inline-end-md": sp(200)
  }}>
        <PInlineStack align="space-between" blockAlign="center" wrap={false}>
          <div className="Polaris-Tabs__Wrapper"><div className="Polaris-Tabs__ButtonWrapper">
            <ul className="Polaris-Tabs" data-tabs-focus-catchment="true">
              {tabs.map((t, i) => <li key={t} className="Polaris-Tabs__TabContainer" role="presentation">
                  <button className={"Polaris-Tabs__Tab" + (i === selected ? " Polaris-Tabs__Tab--active" : "")} role="tab" type="button" aria-selected={i === selected}>
                    <PInlineStack align="center" blockAlign="center" gap="200" wrap={false}><span className="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium">{t}</span></PInlineStack>
                  </button>
                </li>)}
            </ul>
          </div></div>
          {right}
        </PInlineStack>
      </PBox>
    </div>;
};

export const PDataTable = ({headings, numeric, totals, rows}) => {
  const cell = extra => ["Polaris-DataTable__Cell", "Polaris-DataTable__Cell--verticalAlignMiddle", ...extra].filter(Boolean).join(" ");
  return <div className="Polaris-DataTable Polaris-DataTable__ShowTotals">
      <div className="Polaris-DataTable__ScrollContainer">
        <table className="Polaris-DataTable__Table">
          <thead>
            <tr>{headings.map((h, i) => <th key={i} data-polaris-header-cell="true" className={cell(["Polaris-DataTable__Cell--header", numeric[i] && "Polaris-DataTable__Cell--numeric"])} scope="col">{h}</th>)}</tr>
            {totals && <tr>{totals.map((t, i) => i === 0 ? <th key={i} className={cell(["Polaris-DataTable__Cell--firstColumn", "Polaris-DataTable__Cell--total"])} scope="row">{t}</th> : <td key={i} className={cell(["Polaris-DataTable__Cell--total", numeric[i] && "Polaris-DataTable__Cell--numeric"])}>{t}</td>)}</tr>}
          </thead>
          <tbody>
            {rows.map((r, ri) => <tr key={ri} className="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                {r.map((c, i) => i === 0 ? <th key={i} className={cell(["Polaris-DataTable__Cell--firstColumn"])} scope="row">{c}</th> : <td key={i} className={cell([numeric[i] && "Polaris-DataTable__Cell--numeric"])}>{c}</td>)}
              </tr>)}
          </tbody>
        </table>
      </div>
    </div>;
};

export const PIndexTable = ({headings, rows, onRowClick, emptyState}) => {
  const {PBox, PText} = adminCalendarSetupScope();
  return <div className="Polaris-IndexTable">
      <div className="Polaris-IndexTable__IndexTableWrapper">
        {rows.length === 0 ? <PBox padding="400"><PText tone="subdued" alignment="center">{emptyState}</PText></PBox> : <div className="Polaris-IndexTable-ScrollContainer">
            <table className="Polaris-IndexTable__Table Polaris-IndexTable__Table--unselectable Polaris-IndexTable__Table--sticky">
              <thead>
                <tr>
                  {headings.map((h, i) => <th key={h} className={["Polaris-IndexTable__TableHeading", i === 0 && "Polaris-IndexTable__TableHeading--second", i === headings.length - 1 && "Polaris-IndexTable__TableHeading--last", "Polaris-IndexTable__TableHeading--unselectable"].filter(Boolean).join(" ")} data-index-table-heading="true">
                      <div style={{
    "--pc-index-table-heading-extra-padding-right": 0
  }}><span className="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium">{h}</span></div>
                    </th>)}
                </tr>
              </thead>
              <tbody>
                {rows.map((r, ri) => <tr key={ri} className="Polaris-IndexTable__TableRow" onClick={() => onRowClick && onRowClick(ri)} style={onRowClick ? {
    cursor: "pointer"
  } : undefined}>
                    {r.map((c, ci) => <td key={ci} className="Polaris-IndexTable__TableCell">{c}</td>)}
                  </tr>)}
              </tbody>
            </table>
          </div>}
      </div>
    </div>;
};

export const PSelect = ({id, label, options, value, onChange}) => {
  const {PIcon} = adminCalendarSetupScope();
  return <div className="Polaris-Labelled--hidden">
      <div className="Polaris-Labelled__LabelWrapper"><div className="Polaris-Label"><label id={id + "Label"} htmlFor={id} className="Polaris-Label__Text"><span className="Polaris-Text--root Polaris-Text--bodyMd">{label}</span></label></div></div>
      <div className="Polaris-Select">
        <select id={id} className="Polaris-Select__Input" aria-invalid="false" value={value ?? options[0]} onChange={e => onChange && onChange(e.target.value)}>{options.map(o => <option key={o} value={o}>{o}</option>)}</select>
        <div className="Polaris-Select__Content" aria-hidden="true"><span className="Polaris-Select__SelectedOption">{value ?? options[0]}</span><span className="Polaris-Select__Icon"><PIcon name="select" /></span></div>
        <div className="Polaris-Select__Backdrop" />
      </div>
    </div>;
};

export const PTextField = ({id, label, labelHidden, prefix, suffix, value, placeholder, onChange, connectedRight, helpText, disabled, tour}) => {
  const hasValue = value !== undefined && value !== null && value !== "";
  return <div className={labelHidden ? "Polaris-Labelled--hidden" : ""} data-tour={tour}>
      <div className="Polaris-Labelled__LabelWrapper">
        <div className="Polaris-Label">
          <label id={id + "Label"} htmlFor={id} className="Polaris-Label__Text"><span className="Polaris-Text--root Polaris-Text--bodyMd">{label}</span></label>
        </div>
      </div>
      <div className="Polaris-Connected">
        <div className="Polaris-Connected__Item Polaris-Connected__Item--primary">
          <div className={"Polaris-TextField" + (hasValue ? " Polaris-TextField--hasValue" : "") + (disabled ? " Polaris-TextField--disabled" : "")}>
            {prefix && <div className="Polaris-TextField__Prefix" id={id + "-Prefix"}><span className="Polaris-Text--root Polaris-Text--bodyMd">{prefix}</span></div>}
            <input id={id} className={"Polaris-TextField__Input" + (suffix ? " Polaris-TextField__Input--suffixed" : "")} type="text" inputMode="decimal" autoComplete="off" placeholder={placeholder} value={value ?? ""} onChange={e => onChange && onChange(e.target.value)} readOnly={!onChange} disabled={disabled} aria-labelledby={id + "Label"} aria-invalid="false" />
            {suffix && <div className="Polaris-TextField__Suffix" id={id + "-Suffix"}><span className="Polaris-Text--root Polaris-Text--bodyMd">{suffix}</span></div>}
            <div className="Polaris-TextField__Backdrop" />
          </div>
        </div>
        {connectedRight && <div className="Polaris-Connected__Item">{connectedRight}</div>}
      </div>
      {helpText && <div className="Polaris-Labelled__HelpText" id={id + "HelpText"}><span className="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--break Polaris-Text--subdued">{helpText}</span></div>}
    </div>;
};

export const PLink = ({children, monochrome, removeUnderline, onClick}) => <a className={["Polaris-Link", monochrome && "Polaris-Link--monochrome", removeUnderline && "Polaris-Link--removeUnderline"].filter(Boolean).join(" ")} href="#" onClick={e => {
  e.preventDefault();
  onClick && onClick();
}} data-polaris-unstyled="true">{children}</a>;

export const PDivider = () => <hr className="Polaris-Divider" style={{
  borderBlockStart: "var(--p-border-width-025) solid var(--p-color-border-secondary)"
}} />;

export const PIcon = ({name, tone, paths}) => <span className={"Polaris-Icon" + (tone ? " Polaris-Icon--tone" + tone : "")}>
    <svg viewBox="0 0 20 20" className="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
      {(paths || ICONS[name] || []).map((p, i) => <path key={i} d={p.d} fillRule={p.fr ? "evenodd" : undefined} />)}
    </svg>
  </span>;

export const PBadge = ({tone, children}) => <span className={"Polaris-Badge" + (tone ? " Polaris-Badge--tone" + tone : "")}>
    {tone === "Success" && <span className="Polaris-Text--root Polaris-Text--visuallyHidden">Success</span>}
    <span className="Polaris-Text--root Polaris-Text--bodySm">{children}</span>
  </span>;

export const PButton = ({children, variant = "Secondary", size = "Medium", tone, icon, disclosure, iconOnly, fullWidth, textAlign = "Center", onClick, ariaLabel, role, ariaChecked, id, pressed, tour}) => {
  const {PIcon} = adminCalendarSetupScope();
  const cls = ["Polaris-Button", "Polaris-Button--pressable", "Polaris-Button--variant" + variant, "Polaris-Button--size" + size, "Polaris-Button--textAlign" + textAlign, fullWidth && "Polaris-Button--fullWidth", iconOnly && "Polaris-Button--iconOnly", icon && !iconOnly && "Polaris-Button--iconWithText", disclosure && "Polaris-Button--disclosure", tone && "Polaris-Button--tone" + tone, pressed && "Polaris-Button--pressed"].filter(Boolean).join(" ");
  const textCls = variant === "Primary" ? "Polaris-Text--root Polaris-Text--bodySm Polaris-Text--semibold" : variant === "Plain" ? "Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--regular" : "Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium";
  return <button type="button" className={cls} onClick={onClick} aria-label={ariaLabel} role={role} aria-checked={ariaChecked} id={id} aria-pressed={pressed} data-tour={tour}>
      {icon && <span className="Polaris-Button__Icon"><PIcon name={icon} /></span>}
      {children !== undefined && children !== null && <span className={textCls}>{children}</span>}
      {disclosure && <span className="Polaris-Button__Icon"><PIcon name="chevronDown" /></span>}
    </button>;
};

export const PText = ({variant, tone, fontWeight, as, truncate, alignment, children, id, className = ""}) => {
  const Tag = as || "p";
  const cls = ["Polaris-Text--root", variant && "Polaris-Text--" + variant, fontWeight && "Polaris-Text--" + fontWeight, tone && "Polaris-Text--" + tone, truncate && "Polaris-Text--block Polaris-Text--truncate", alignment && "Polaris-Text--" + alignment, className].filter(Boolean).join(" ");
  return <Tag className={cls} id={id}>{children}</Tag>;
};

export const PInlineStack = ({gap, align, blockAlign, wrap = true, children}) => {
  const s = {};
  if (align) s["--pc-inline-stack-align"] = align;
  if (blockAlign) s["--pc-inline-stack-block-align"] = blockAlign;
  s["--pc-inline-stack-wrap"] = wrap ? "wrap" : "nowrap";
  if (gap) s["--pc-inline-stack-gap-xs"] = sp(gap);
  s["--pc-inline-stack-flex-direction-xs"] = "row";
  return <div className="Polaris-InlineStack" style={s}>{children}</div>;
};

export const PBlockStack = ({gap, inlineAlign, role, children}) => {
  const s = {
    "--pc-block-stack-order": "column"
  };
  if (gap) s["--pc-block-stack-gap-xs"] = sp(gap);
  if (inlineAlign) s["--pc-block-stack-inline-align"] = inlineAlign;
  return <div className="Polaris-BlockStack" style={s} role={role}>{children}</div>;
};

export const PBox = p => {
  const Tag = p.as || "div";
  return <Tag className={"Polaris-Box" + (p.className ? " " + p.className : "")} style={boxStyle(p)}>{p.children}</Tag>;
};

export const PCard = ({padding = "400", children}) => {
  const {PBox} = adminCalendarSetupScope();
  return <div className="Polaris-ShadowBevel" style={{
    "--pc-shadow-bevel-z-index": 32,
    "--pc-shadow-bevel-content-xs": '""',
    "--pc-shadow-bevel-box-shadow-xs": "var(--p-shadow-100)",
    "--pc-shadow-bevel-border-radius-xs": "var(--p-border-radius-0)",
    "--pc-shadow-bevel-border-radius-sm": "var(--p-border-radius-300)"
  }}>
      <PBox background="bg-surface" minHeight="100%" overflowX="clip" overflowY="clip" padding={padding}>{children}</PBox>
    </div>;
};

export const PSection = ({variant, children}) => <div className={"Polaris-Layout__Section" + (variant ? " Polaris-Layout__Section--" + variant : "")}>{children}</div>;

export const PLayout = ({children}) => <div className="Polaris-Layout">{children}</div>;

export const PPage = ({title, titleMetadata, subtitle, actions, children}) => {
  const {PBox, PButton, PText} = adminCalendarSetupScope();
  return <div className="Polaris-Page">
      <PBox style={{
    "--pc-box-padding-block-start-xs": sp(400),
    "--pc-box-padding-block-start-md": sp(600),
    "--pc-box-padding-block-end-xs": sp(400),
    "--pc-box-padding-block-end-md": sp(600),
    "--pc-box-padding-inline-start-xs": sp(400),
    "--pc-box-padding-inline-start-sm": sp(0),
    "--pc-box-padding-inline-end-xs": sp(400),
    "--pc-box-padding-inline-end-sm": sp(0),
    position: "relative"
  }}>
        <div className={"Polaris-Page-Header--mediumTitle" + (actions ? "" : " Polaris-Page-Header--isSingleRow")}>
          <div className="Polaris-Page-Header__Row">
            <div className="Polaris-Page-Header__BreadcrumbWrapper">
              <PBox className="Polaris-Box--printHidden" maxWidth="100%" paddingInlineEnd="100"><PButton iconOnly icon="arrowLeft" ariaLabel="Back" /></PBox>
            </div>
            <div className={"Polaris-Page-Header__TitleWrapper" + (actions ? "" : " Polaris-Page-Header__TitleWrapperExpand")}>
              <div className="Polaris-Header-Title__TitleWrapper">
                <h1 className="Polaris-Header-Title"><span className="Polaris-Text--root Polaris-Text--headingLg Polaris-Text--bold">{title}</span></h1>
                {titleMetadata && <div className="Polaris-Header-Title__TitleMetadata">{titleMetadata}</div>}
              </div>
              {subtitle && <div className="Polaris-Header-Title__SubTitle"><PText variant="bodySm" tone="subdued">{subtitle}</PText></div>}
            </div>
            {actions && <div className="Polaris-Page-Header__RightAlign">
                <div className="Polaris-ActionMenu"><div className="Polaris-ActionMenu-Actions__ActionsLayoutOuter"><div className="Polaris-ActionMenu-Actions__ActionsLayout">
                  {actions.map((a, i) => <div key={i} className="Polaris-ActionMenu-SecondaryAction">{a}</div>)}
                </div></div></div>
              </div>}
          </div>
        </div>
      </PBox>
      <div>{children}</div>
    </div>;
};

export const BorderBox = ({children, padding = "300"}) => {
  const {PBox} = adminCalendarSetupScope();
  return <div className="BorderBox"><PBox borderColor="border" borderWidth="025" borderRadius="200" padding={padding} overflowY="hidden" overflowX="hidden">{children}</PBox></div>;
};

export const BooleanTitle = ({enabled, children}) => {
  const {PInlineStack, PText} = adminCalendarSetupScope();
  return <PInlineStack gap="200" blockAlign="center">
      <div className={"Polaris-Badge-Pip " + (enabled ? "Polaris-Badge-Pip--toneSuccess Polaris-Badge-Pip--progressComplete" : "Polaris-Badge-Pip--toneNeutral Polaris-Badge-Pip--progressIncomplete")} />
      <PText as="span">{children}</PText>
    </PInlineStack>;
};

export const SettingToggleCard = ({label, description, enabled, onToggle}) => {
  const {PBadge, PBlockStack, PBox, PButton, PCard, PInlineStack, PText} = adminCalendarSetupScope();
  return <PCard>
      <PBlockStack gap="400">
        <PBox width="100%">
          <PInlineStack gap="12" align="space-between" blockAlign="start" wrap={false}>
            <PInlineStack gap="200" wrap={false}>
              <PInlineStack gap="200" align="start" blockAlign="baseline">
                <label htmlFor="setting-toggle"><PText variant="headingMd" as="h6">{label}</PText></label>
                <PInlineStack gap="200" align="center" blockAlign="center"><PBadge tone={enabled ? "Success" : undefined}>{enabled ? "Active" : "Inactive"}</PBadge></PInlineStack>
              </PInlineStack>
            </PInlineStack>
            <PBox minWidth="fit-content"><PInlineStack align="end"><PButton size="Slim" role="switch" id="setting-toggle" ariaChecked={enabled ? "true" : "false"} onClick={onToggle} tour="toggle">{enabled ? "Turn off" : "Turn on"}</PButton></PInlineStack></PBox>
          </PInlineStack>
        </PBox>
        <PText variant="bodyMd" tone="subdued">{description}</PText>
      </PBlockStack>
    </PCard>;
};

export const HeaderCard = ({title, description, action, children}) => {
  const {PBlockStack, PBox, PButton, PCard, PDivider, PInlineStack, PText} = adminCalendarSetupScope();
  return <PCard padding="0">
      <PBox padding="400">
        <PBlockStack gap="050">
          <PInlineStack align="space-between"><PText variant="headingSm">{title}</PText>{action && <PButton variant="Plain">{action}</PButton>}</PInlineStack>
          {description && <PText tone="subdued" variant="bodyMd">{description}</PText>}
        </PBlockStack>
      </PBox>
      <PDivider />
      <PBox padding="400">{children}</PBox>
    </PCard>;
};

export const InventoryCard = () => {
  const {BorderBox, PBlockStack, PBox, PButton, PCard, PDataTable, PInlineStack, PLink, PTabs, PText} = adminCalendarSetupScope();
  const variant = (title, sku) => <PLink monochrome removeUnderline>
      <PInlineStack gap="200" blockAlign="center" align="start" wrap={false}>
        <span className="Polaris-Thumbnail Polaris-Thumbnail--sizeExtraSmall"><span style={{
    display: "block",
    width: "100%",
    height: "100%",
    background: "var(--p-color-bg-fill-tertiary)",
    borderRadius: "var(--p-border-radius-100)"
  }} /></span>
        <PBlockStack><PText variant="bodyMd" truncate>{title}</PText><PText variant="bodyXs" tone="subdued">{sku}</PText></PBlockStack>
      </PInlineStack>
    </PLink>;
  return <PCard>
      <PBox paddingBlockEnd="400"><PBlockStack gap="050"><PText variant="headingSm">Inventory</PText></PBlockStack></PBox>
      <BorderBox padding="0">
        <PTabs tabs={["Active", "Draft", "All"]} selected={0} right={<PBox paddingInlineEnd="200"><PButton iconOnly icon="filter" ariaLabel="Filter" /></PBox>} />
        <PDataTable headings={["Variant", "Uncommitted", "On hand", "On order", <b>Total</b>]} numeric={[false, true, true, true, true]} totals={["Ball Gown", 27, 27, 1, 28]} rows={[[variant("6 / Midnight Blue", "ball-gown-6-blue"), 6, 6, 0, <b>6</b>], [variant("8 / Midnight Blue", "ball-gown-8-blue"), 7, 7, 1, <b>8</b>], [variant("10 / Midnight Blue", "ball-gown-10-blue"), 7, 7, 0, <b>7</b>], [variant("12 / Midnight Blue", "ball-gown-12-blue"), 7, 7, 0, <b>7</b>]]} />
      </BorderBox>
      <PBox paddingBlockStart="300"><PInlineStack gap="200" align="end"><PButton>View inventory</PButton><PButton>Add inventory</PButton></PInlineStack></PBox>
    </PCard>;
};

export const AvailabilityCard = () => {
  const {HeaderCard, PBlockStack, PInlineStack, PText} = adminCalendarSetupScope();
  const weeks = 35, size = 12, gap = 4, labelW = 30, top = 20;
  const months = ["Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar"];
  const booked = {
    "1-4": "#1dd099",
    "2-4": "#8ee8cc",
    "0-12": "#c4f3e5",
    "3-20": "#8ee8cc",
    "1-21": "#1dd099",
    "2-21": "#1dd099"
  };
  const today = "3-1";
  const w = labelW + weeks * (size + gap), hgt = top + 7 * (size + gap);
  return <HeaderCard title="Availability" description="View upcoming availability of this product" action="View cycles">
      <PBlockStack gap="500">
        <PInlineStack align="space-between" blockAlign="center"><PText variant="bodySm" fontWeight="medium">Next 8 months</PText></PInlineStack>
        <article className="react-activity-calendar" style={{
    fontFamily: "var(--p-font-family-sans)",
    fontWeight: "var(--p-font-weight-regular)",
    color: "var(--p-color-text)",
    fontSize: 12
  }}>
          <div style={{
    overflowX: "auto"
  }}>
            <svg width={w} height={hgt} viewBox={"0 0 " + w + " " + hgt} style={{
    display: "block",
    maxWidth: "100%"
  }}>
              {months.map((m, i) => <text key={m} x={labelW + Math.round(i * (weeks / months.length)) * (size + gap)} y={12} fill="currentColor">{m}</text>)}
              {["Tue", "Thu", "Sat"].map((d, i) => <text key={d} x={0} y={top + (1 + i * 2) * (size + gap) + size - 2} fill="currentColor">{d}</text>)}
              {Array.from({
    length: weeks
  }, (_, x) => Array.from({
    length: 7
  }, (_, y) => {
    const k = y + "-" + x;
    const isToday = k === today;
    return <rect key={k} x={labelW + x * (size + gap)} y={top + y * (size + gap)} width={size} height={size} rx="2" ry="2" fill={isToday ? "white" : booked[k] || "hsl(0, 0%, 92%)"} style={isToday ? {
      stroke: "var(--p-color-border-emphasis-active)",
      strokeWidth: "1.5px"
    } : undefined} />;
  }))}
            </svg>
          </div>
          <footer style={{
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 8,
    color: "var(--p-color-text)"
  }}>
            <div>1 cycles</div>
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: 3
  }}>
              <span style={{
    marginRight: 4
  }}>No cycles</span>
              {["hsl(0, 0%, 92%)", "#c4f3e5", "#8ee8cc", "#53dcb2", "#1dd099"].map(c => <svg key={c} width={size} height={size}><rect width={size} height={size} rx="2" ry="2" fill={c} /></svg>)}
              <span style={{
    marginLeft: 4
  }}>Fully booked</span>
            </div>
          </footer>
        </article>
      </PBlockStack>
    </HeaderCard>;
};

export const StatsCard = ({stats}) => {
  const {PBlockStack, PBox, PButton, PCard, PText} = adminCalendarSetupScope();
  return <PCard padding="0">
      <PBox paddingBlock="200">
        <div style={{
    display: "flex"
  }}>
          {stats.map((s, i) => <div key={s.label} style={{
    flex: 1,
    display: "flex",
    flexWrap: "wrap",
    flexDirection: "column",
    borderRight: i !== stats.length - 1 ? "1px solid var(--p-color-border)" : "none"
  }}>
              <PBox paddingInline="200">
                <PButton variant="Tertiary" textAlign="Left" fullWidth>
                  <PBlockStack><PText variant="bodySm">{s.label}</PText><PText variant="bodyLg" fontWeight="medium">{s.value}</PText></PBlockStack>
                </PButton>
              </PBox>
            </div>)}
        </div>
      </PBox>
    </PCard>;
};

export const RentalMethod = ({m, active, hover, onClick}) => {
  const {PBlockStack, PBox, PIcon, PInlineStack, PText} = adminCalendarSetupScope();
  return <div className={["RentalMethod", active && "active", hover && "hover", "enabled"].filter(Boolean).join(" ")} onClick={onClick} role="button" tabIndex={0} data-method={m.key}>
      <PBox paddingBlock="200" paddingInline="300">
        <div className="VerticalTabs__Item__Pip" />
        <PInlineStack gap="200" align="space-between" blockAlign="center" wrap={false}>
          <PInlineStack gap="200" align="center" blockAlign="center" wrap={false}>
            <div><PIcon name={m.icon} /></div>
            <PBlockStack><PText>{m.title}</PText><PText tone="subdued" variant="bodySm">{m.description}</PText></PBlockStack>
          </PInlineStack>
          <div><PIcon name="chevronRight" tone="Base" /></div>
        </PInlineStack>
      </PBox>
    </div>;
};

export const MethodsCard = ({activeKeys, selectedKey, hoverKey, heading}) => {
  const {BooleanTitle, PBlockStack, PCard, PText, RentalMethod} = adminCalendarSetupScope();
  const active = METHODS.filter(m => activeKeys.includes(m.key));
  const inactive = METHODS.filter(m => !activeKeys.includes(m.key));
  return <PCard>
      <PBlockStack gap="300">
        {heading && <PText variant="headingSm">{heading}</PText>}
        <BooleanTitle enabled>Active</BooleanTitle>
        {active.length ? active.map(m => <RentalMethod key={m.key} m={m} active={m.key === selectedKey} hover={m.key === hoverKey} />) : <PText tone="subdued">No active methods</PText>}
        <BooleanTitle>Inactive</BooleanTitle>
        {inactive.length ? inactive.map(m => <RentalMethod key={m.key} m={m} active={m.key === selectedKey} hover={m.key === hoverKey} />) : <PText tone="subdued">No inactive methods</PText>}
      </PBlockStack>
    </PCard>;
};

export const OptionModal = ({open, onClose, onAdd, fields, setFields}) => {
  const {PBlockStack, PBox, PButton, PInlineStack, PSelect, PText, PTextField, ToggleSection} = adminCalendarSetupScope();
  const [toggles, setToggles] = useState({});
  if (!open) return null;
  const {name, price, days} = fields;
  const setName = v => setFields(f => ({
    ...f,
    name: v
  }));
  const setPrice = v => setFields(f => ({
    ...f,
    price: v
  }));
  const setDays = v => setFields(f => ({
    ...f,
    days: v
  }));
  const n = parseInt(days, 10) || 1;
  const placeholder = n + (n > 1 ? " days" : " day");
  const add = () => onAdd({
    name: name.trim() || placeholder,
    days: n,
    price: parseFloat(price) || 0
  });
  const sections = [{
    title: "Contract",
    icon: "note"
  }, {
    title: "Deposit",
    icon: "lock"
  }, {
    title: "Require ID verification",
    icon: "person"
  }, {
    title: "Apply to specific markets",
    icon: "globe"
  }, {
    title: "Apply to specific variants",
    icon: "checkbox"
  }, {
    title: "Apply to specific item conditions",
    icon: "catalog"
  }];
  return <>
      <div className="Polaris-Backdrop" onClick={onClose} />
      <div className="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
        <div>
          <div role="dialog" aria-modal="true" aria-labelledby="option-modal-title" tabIndex={-1} className="Polaris-Modal-Dialog Polaris-Modal-Dialog--entered">
            <div className="Polaris-Modal-Dialog__Modal">
              <PBox background="bg-surface-tertiary" borderColor="border" borderBlockEndWidth="025" padding="400">
                <div className="Polaris-InlineGrid" style={{
    "--pc-inline-grid-grid-template-columns-xs": "1fr auto",
    "--pc-inline-grid-gap-xs": sp(400)
  }}>
                  <PInlineStack gap="400" blockAlign="center"><PText variant="headingMd" as="h2" id="option-modal-title" className="Polaris-Text--break">Add new option</PText></PInlineStack>
                  <PButton variant="Tertiary" iconOnly icon="x" ariaLabel="Close" onClick={onClose} />
                </div>
              </PBox>
              <div className="Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Modal__Body" data-polaris-scrollable="true">
                <div className="Polaris-Modal-Section">
                  <PBox as="section" padding="400">
                    <PBlockStack gap="400">
                      <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="opt-name" label="Name" placeholder={placeholder} value={name} onChange={setName} /></div>
                      <PBlockStack gap="200" role="group">
                        <PInlineStack gap="300">
                          <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="opt-price" label="Checkout price" prefix="£" placeholder="0.00" value={price} onChange={setPrice} /></div>
                          <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped">
                            <PTextField id="opt-days" label="Duration" placeholder="0" value={days} onChange={setDays} connectedRight={<PSelect id="opt-interval" label="Interval" options={[n === 1 ? "Day" : "Days"]} />} />
                          </div>
                        </PInlineStack>
                      </PBlockStack>
                    </PBlockStack>
                  </PBox>
                </div>
                {sections.map(sec => <ToggleSection key={sec.title} icon={sec.icon} title={sec.title} enabled={!!toggles[sec.title]} onToggle={() => setToggles(t => ({
    ...t,
    [sec.title]: !t[sec.title]
  }))} />)}
              </div>
              <PInlineStack gap="400" blockAlign="center">
                <PBox borderColor="border" borderBlockStartWidth="025" padding="400" width="100%">
                  <PInlineStack align="space-between" blockAlign="center" gap="400">
                    <div className="Polaris-Box" />
                    <PInlineStack gap="200"><PButton onClick={onClose}>Cancel</PButton><PButton variant="Primary" onClick={add} tour="modal-add">Add</PButton></PInlineStack>
                  </PInlineStack>
                </PBox>
              </PInlineStack>
            </div>
          </div>
        </div>
      </div>
    </>;
};

export const CalendarSettings = ({enabled, onToggle, options, onAddOption, onRowClick, fees = DEFAULT_FEES, onFeeChange}) => {
  const {BorderBox, HeaderCard, PBlockStack, PButton, PCard, PIndexTable, PInlineStack, PSelect, PText, PTextField, SettingToggleCard} = adminCalendarSetupScope();
  return <PBlockStack gap="300">
      <SettingToggleCard label="Calendar" description="Allow customers to rent this product for a specific period of time." enabled={enabled} onToggle={onToggle} />
      <PCard>
        <PBlockStack gap="300">
          <PBlockStack gap="050"><PText variant="headingSm">Options</PText><PText tone="subdued">Offer customers different rental lengths for this product.</PText></PBlockStack>
          <BorderBox padding="0">
            <PIndexTable headings={["Name", "Duration", "Checkout price", "Contract", "Deposit", "Applies to"]} onRowClick={onRowClick} emptyState="No calendar options" rows={options.map(o => [<PText>{o.name}</PText>, <PText>{o.days} {o.days === 1 ? "day" : "days"}</PText>, <PText>£{o.price.toFixed(2)}</PText>, null, null, <PText tone="subdued">All</PText>])} />
          </BorderBox>
          <PInlineStack gap="200" align="end"><PButton variant="Primary" onClick={onAddOption} tour="add-option">Add option</PButton></PInlineStack>
        </PBlockStack>
      </PCard>
      <HeaderCard title="Fixed fees" description="Fixed fees are added to the cost of the rental period and form part of the full price of the rental shown to the customer. Fixed fees set to 0 won't be shown to the customer." action="Manage fixed fees">
        <PBlockStack gap="400" inlineAlign="stretch">
          {fees.map(f => <PTextField key={f.id} id={f.id} label={f.label} prefix="£" placeholder={f.placeholder} value={f.value} onChange={v => onFeeChange && onFeeChange(f.id, v)} />)}
        </PBlockStack>
      </HeaderCard>
      <HeaderCard title="Custom restock time" description="Setting this will override your store's default restock time for this product.">
        <PTextField id="restock" label="Custom restock duration" placeholder="Use store default" value="" onChange={() => {}} connectedRight={<PSelect id="restock-unit" label="Custom restock duration unit" options={["Day/s"]} />} />
      </HeaderCard>
      <div />
    </PBlockStack>;
};

export const useToast = () => {
  const [toast, setToast] = useState(null);
  useEffect(() => {
    if (!toast) return undefined;
    const id = setTimeout(() => setToast(null), 2500);
    return () => clearTimeout(id);
  }, [toast]);
  return [toast, setToast];
};

export const SaveBar = ({onDiscard, onSave}) => {
  const {PIcon} = adminCalendarSetupScope();
  return <div className="sca-savebar">
      <span className="sca-savebar-msg"><PIcon name="alertCircle" /> Unsaved changes</span>
      <span style={{
    display: "inline-flex",
    gap: 8
  }}>
        <button type="button" className="sca-sbtn sca-sbtn-dark" onClick={onDiscard}>Discard</button>
        <button type="button" className="sca-sbtn sca-sbtn-light" onClick={onSave} data-tour="save">Save</button>
      </span>
    </div>;
};

export const AdminWindow = ({url, children, saveBar, toast, modal, windowRef, cursor, bind}) => {
  const {PIcon, PInlineStack, SupercycleMark, TourCursor} = adminCalendarSetupScope();
  const ownRef = useRef(null);
  const boxRef = windowRef || ownRef;
  const [zoom, setZoom] = useState(0.6);
  useEffect(() => {
    const el = boxRef.current;
    if (!el || typeof ResizeObserver === "undefined") return undefined;
    const fit = () => setZoom(Math.max(0.2, Math.min(1, el.clientWidth / 1066)));
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(el);
    return () => ro.disconnect();
  }, [windowRef]);
  const zoomStyle = {
    zoom,
    width: 1066
  };
  const overlayZoomStyle = {
    width: 1066,
    height: 100 / zoom + "%",
    transform: "scale(" + zoom + ")"
  };
  return <div className="not-prose sca">
      <style>{POLARIS_CSS}</style>
      <style>{ADMIN_CSS}</style>
      <div className="sca-window" ref={boxRef} {...bind || ({})}>
        <div className="sca-titlebar"><span className="sca-dot" /><span className="sca-dot" /><span className="sca-dot" /><span className="sca-url">{url}</span></div>
        <div className="sca-page">
          <div className="sca-zoom" style={zoomStyle}>
            {saveBar && <div className="sca-topbar">
                <span className="sca-topbar-logo"><span className="sc-bag"><svg viewBox="0 0 20 20" fill="currentColor"><path d="M13.4 5.2c-.2-.1-.6 0-.6 0s-.9-1-1.2-1.3c-.4-.4-1.1-.3-1.4-.2 0 0-.1 0-.2.1-.3-.9-.8-1.7-1.8-1.7C5.9 2.1 4.6 5 4.2 6.5l-1.5.5c-.5.1-.5.2-.6.6L1 16.2l9.2 1.7 5-1.1L13.4 5.2z" /></svg></span>Shopify</span>
                {saveBar}
                <span className="sca-topbar-store"><span className="sc-av"><SupercycleMark size={11} /></span>Supercycle Demo</span>
              </div>}
            <div className="sca-polaris">
              <div className="sca-appbar">
                <span className="sca-appbar-name"><img className="sca-applogo" src="/images/logo/logomark-dark.svg" alt="" width="20" height="20" />Supercycle</span>
                <PIcon name="menuHorizontal" />
              </div>
              {children}
            </div>
          </div>
        </div>
        {(modal || toast) && <div className="sca-overlay"><div className="sca-zoom" style={overlayZoomStyle}><div className="sca-polaris" style={{
    background: "transparent",
    position: "absolute",
    inset: 0
  }}>
            {modal}
            {toast && <div className="Polaris-Frame-ToastManager" aria-live="polite">
                <div className="Polaris-Frame-ToastManager__ToastWrapper Polaris-Frame-ToastManager--toastWrapperEnterDone" style={{
    "--pc-frame-toast-manager-translate-y-in": "0px",
    "--pc-frame-toast-manager-translate-y-out": "150px",
    "--pc-frame-toast-manager-scale-in": "1"
  }}>
                  <div className="Polaris-Frame-Toast" aria-live="assertive">
                    <PInlineStack gap="400" blockAlign="center"><span className="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--medium">{toast}</span></PInlineStack>
                    <button type="button" className="Polaris-Frame-Toast__CloseButton"><PIcon name="xSmall" tone="Inherit" /></button>
                  </div>
                </div>
              </div>}
          </div></div></div>}
        {cursor && <TourCursor cursor={cursor} />}
      </div>
    </div>;
};

export const AdminCalendarTurnOn = () => {
  const {AdminWindow, CalendarSettings, MethodsPage, SaveBar} = adminCalendarSetupScope();
  const [enabled, setEnabled] = useState(false);
  const [saved, setSaved] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const dirty = enabled !== saved;
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="toggle"]'),
    click: () => setEnabled(true),
    hold: 1500
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: () => {
      setSaved(true);
      setToast("Saved successfully");
    },
    hold: 2600
  }];
  resetRef.current = () => {
    setEnabled(false);
    setSaved(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/products/coffee-machine/methods/calendar" saveBar={dirty && <SaveBar onDiscard={() => setEnabled(saved)} onSave={() => {
    setSaved(enabled);
    setToast("Saved successfully");
  }} />} toast={toast}>
      <MethodsPage title="Coffee Machine methods" activeKeys={enabled ? ["calendar", "subscription", "resale"] : ["subscription", "resale"]} settings={<CalendarSettings enabled={enabled} options={[{
    name: "3 days",
    days: 3,
    price: 25
  }]} onAddOption={() => {}} onToggle={() => setEnabled(!enabled)} />} />
    </AdminWindow>;
};

export const AdminCalendarOptions = () => {
  const {AdminWindow, CalendarSettings, MethodsPage, OptionModal, SaveBar} = adminCalendarSetupScope();
  const [options, setOptions] = useState(BALL_GOWN_OPTIONS);
  const [modal, setModal] = useState(false);
  const [fields, setFields] = useState({
    name: "",
    price: "",
    days: "1"
  });
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const openModal = () => {
    setFields({
      name: "",
      price: "",
      days: "1"
    });
    setModal(true);
  };
  const addOption = o => {
    setOptions(os => [...os, o]);
    setDirty(true);
    setModal(false);
  };
  const addFromFields = () => setFields(f => {
    const n = parseInt(f.days, 10) || 1;
    addOption({
      name: f.name.trim() || n + (n > 1 ? " days" : " day"),
      days: n,
      price: parseFloat(f.price) || 0
    });
    return f;
  });
  const save = () => {
    setDirty(false);
    setToast("Saved successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="add-option"]'),
    click: openModal,
    hold: 900
  }, {
    to: w => w.querySelector("#opt-price"),
    click: () => {},
    type: () => [v => setFields(f => ({
      ...f,
      price: v
    })), "467.99"],
    hold: 500
  }, {
    to: w => w.querySelector("#opt-days"),
    click: () => setFields(f => ({
      ...f,
      days: ""
    })),
    type: () => [v => setFields(f => ({
      ...f,
      days: v
    })), "30"],
    hold: 600
  }, {
    to: w => w.querySelector('[data-tour="modal-add"]'),
    click: addFromFields,
    hold: 1400
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2400
  }];
  resetRef.current = () => {
    setOptions(BALL_GOWN_OPTIONS);
    setDirty(false);
    setModal(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/products/ball-gown/methods/calendar" saveBar={dirty && <SaveBar onDiscard={() => {
    setOptions(BALL_GOWN_OPTIONS);
    setDirty(false);
  }} onSave={save} />} toast={toast} modal={<OptionModal open={modal} onClose={() => setModal(false)} onAdd={addOption} fields={fields} setFields={setFields} />}>
      <MethodsPage title="Ball Gown methods" activeKeys={["membership", "calendar", "resale"]} settings={<CalendarSettings enabled options={options} onAddOption={openModal} onToggle={() => {}} />} />
    </AdminWindow>;
};

export const AdminProductMethods = () => {
  const {AdminWindow, AvailabilityCard, CalendarSettings, InventoryCard, MethodsCard, MethodsPage, PBlockStack, PButton, PLayout, PPage, PSection, StatsCard} = adminCalendarSetupScope();
  const [view, setView] = useState("product");
  const [hover, setHover] = useState(false);
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-method="calendar"]'),
    pre: () => setHover(true),
    click: () => setView("methods"),
    hold: 3200
  }];
  resetRef.current = () => {
    setView("product");
    setHover(false);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  const active = ["membership", "calendar", "resale"];
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url={"admin.shopify.com/store/summit/apps/supercycle/products/ball-gown" + (view === "methods" ? "/methods/calendar" : "")}>
      {view === "product" ? <PPage title="Ball Gown" actions={[<PButton>View</PButton>, <PButton>Edit</PButton>, <PButton icon="delete" tone="Critical">Remove</PButton>, <PButton disclosure>More actions</PButton>]}>
          <PLayout>
            <PSection variant="fullWidth"><StatsCard stats={[{
    label: "Upcoming cycles",
    value: 0
  }, {
    label: "Active cycles",
    value: 1
  }, {
    label: "Complete cycles",
    value: 1
  }]} /></PSection>
            <PSection><PBlockStack gap="300"><AvailabilityCard /><InventoryCard /><div className="Polaris-Box" /></PBlockStack></PSection>
            <PSection variant="oneThird"><PBlockStack gap="300"><MethodsCard heading="Methods" activeKeys={active} hoverKey={hover ? "calendar" : undefined} /></PBlockStack></PSection>
          </PLayout>
        </PPage> : <MethodsPage title="Ball Gown methods" activeKeys={active} settings={<CalendarSettings enabled options={BALL_GOWN_OPTIONS} onAddOption={() => {}} onToggle={() => {}} />} />}
    </AdminWindow>;
};

export const POLARIS_CSS = ".sca-polaris{--p-border-radius-0:0rem;--p-border-radius-050:0.125rem;--p-border-radius-100:0.25rem;--p-border-radius-150:0.375rem;--p-border-radius-200:0.5rem;--p-border-radius-300:0.75rem;--p-border-radius-400:1rem;--p-border-radius-500:1.25rem;--p-border-radius-750:1.875rem;--p-border-radius-full:624.9375rem;--p-border-width-0:0rem;--p-border-width-0165:0.04125rem;--p-border-width-025:0.0625rem;--p-border-width-050:0.125rem;--p-border-width-100:0.25rem;--p-breakpoints-xs:0rem;--p-breakpoints-sm:30.625rem;--p-breakpoints-md:48rem;--p-breakpoints-lg:65rem;--p-breakpoints-xl:90rem;color-scheme:light;--p-color-bg:rgba(241, 241, 241, 1);--p-color-bg-inverse:rgba(26, 26, 26, 1);--p-color-bg-surface:rgba(255, 255, 255, 1);--p-color-bg-surface-hover:rgba(247, 247, 247, 1);--p-color-bg-surface-active:rgba(243, 243, 243, 1);--p-color-bg-surface-selected:rgba(241, 241, 241, 1);--p-color-bg-surface-disabled:rgba(0, 0, 0, 0.05);--p-color-bg-surface-secondary:rgba(247, 247, 247, 1);--p-color-bg-surface-secondary-hover:rgba(241, 241, 241, 1);--p-color-bg-surface-secondary-active:rgba(235, 235, 235, 1);--p-color-bg-surface-secondary-selected:rgba(235, 235, 235, 1);--p-color-bg-surface-tertiary:rgba(243, 243, 243, 1);--p-color-bg-surface-tertiary-hover:rgba(235, 235, 235, 1);--p-color-bg-surface-tertiary-active:rgba(227, 227, 227, 1);--p-color-bg-surface-brand:rgba(227, 227, 227, 1);--p-color-bg-surface-brand-hover:rgba(235, 235, 235, 1);--p-color-bg-surface-brand-active:rgba(241, 241, 241, 1);--p-color-bg-surface-brand-selected:rgba(241, 241, 241, 1);--p-color-bg-surface-info:rgba(234, 244, 255, 1);--p-color-bg-surface-info-hover:rgba(224, 240, 255, 1);--p-color-bg-surface-info-active:rgba(202, 230, 255, 1);--p-color-bg-surface-success:rgba(205, 254, 212, 1);--p-color-bg-surface-success-hover:rgba(175, 254, 191, 1);--p-color-bg-surface-success-active:rgba(146, 252, 172, 1);--p-color-bg-surface-caution:rgba(255, 248, 219, 1);--p-color-bg-surface-caution-hover:rgba(255, 244, 191, 1);--p-color-bg-surface-caution-active:rgba(255, 239, 157, 1);--p-color-bg-surface-warning:rgba(255, 241, 227, 1);--p-color-bg-surface-warning-hover:rgba(255, 235, 213, 1);--p-color-bg-surface-warning-active:rgba(255, 228, 198, 1);--p-color-bg-surface-critical:rgba(254, 232, 235, 1);--p-color-bg-surface-critical-hover:rgba(254, 225, 230, 1);--p-color-bg-surface-critical-active:rgba(254, 217, 223, 1);--p-color-bg-surface-emphasis:rgba(240, 242, 255, 1);--p-color-bg-surface-emphasis-hover:rgba(234, 237, 255, 1);--p-color-bg-surface-emphasis-active:rgba(226, 231, 255, 1);--p-color-bg-surface-magic:rgba(248, 247, 255, 1);--p-color-bg-surface-magic-hover:rgba(243, 241, 255, 1);--p-color-bg-surface-magic-active:rgba(233, 229, 255, 1);--p-color-bg-surface-inverse:rgba(48, 48, 48, 1);--p-color-bg-surface-transparent:rgba(0, 0, 0, 0);--p-color-bg-fill:rgba(255, 255, 255, 1);--p-color-bg-fill-hover:rgba(250, 250, 250, 1);--p-color-bg-fill-active:rgba(247, 247, 247, 1);--p-color-bg-fill-selected:rgba(204, 204, 204, 1);--p-color-bg-fill-disabled:rgba(0, 0, 0, 0.05);--p-color-bg-fill-secondary:rgba(241, 241, 241, 1);--p-color-bg-fill-secondary-hover:rgba(235, 235, 235, 1);--p-color-bg-fill-secondary-active:rgba(227, 227, 227, 1);--p-color-bg-fill-secondary-selected:rgba(227, 227, 227, 1);--p-color-bg-fill-tertiary:rgba(227, 227, 227, 1);--p-color-bg-fill-tertiary-hover:rgba(212, 212, 212, 1);--p-color-bg-fill-tertiary-active:rgba(204, 204, 204, 1);--p-color-bg-fill-brand:rgba(48, 48, 48, 1);--p-color-bg-fill-brand-hover:rgba(26, 26, 26, 1);--p-color-bg-fill-brand-active:rgba(26, 26, 26, 1);--p-color-bg-fill-brand-selected:rgba(48, 48, 48, 1);--p-color-bg-fill-brand-disabled:rgba(0, 0, 0, 0.17);--p-color-bg-fill-info:rgba(145, 208, 255, 1);--p-color-bg-fill-info-hover:rgba(81, 192, 255, 1);--p-color-bg-fill-info-active:rgba(0, 148, 213, 1);--p-color-bg-fill-info-secondary:rgba(213, 235, 255, 1);--p-color-bg-fill-success:rgba(4, 123, 93, 1);--p-color-bg-fill-success-hover:rgba(3, 94, 76, 1);--p-color-bg-fill-success-active:rgba(1, 75, 64, 1);--p-color-bg-fill-success-secondary:rgba(175, 254, 191, 1);--p-color-bg-fill-warning:rgba(255, 184, 0, 1);--p-color-bg-fill-warning-hover:rgba(229, 165, 0, 1);--p-color-bg-fill-warning-active:rgba(178, 132, 0, 1);--p-color-bg-fill-warning-secondary:rgba(255, 214, 164, 1);--p-color-bg-fill-caution:rgba(255, 230, 0, 1);--p-color-bg-fill-caution-hover:rgba(234, 211, 0, 1);--p-color-bg-fill-caution-active:rgba(225, 203, 0, 1);--p-color-bg-fill-caution-secondary:rgba(255, 235, 120, 1);--p-color-bg-fill-critical:rgba(199, 10, 36, 1);--p-color-bg-fill-critical-hover:rgba(163, 10, 36, 1);--p-color-bg-fill-critical-active:rgba(142, 11, 33, 1);--p-color-bg-fill-critical-selected:rgba(142, 11, 33, 1);--p-color-bg-fill-critical-secondary:rgba(254, 209, 215, 1);--p-color-bg-fill-emphasis:rgba(0, 91, 211, 1);--p-color-bg-fill-emphasis-hover:rgba(0, 66, 153, 1);--p-color-bg-fill-emphasis-active:rgba(0, 46, 106, 1);--p-color-bg-fill-magic:rgba(128, 81, 255, 1);--p-color-bg-fill-magic-secondary:rgba(233, 229, 255, 1);--p-color-bg-fill-magic-secondary-hover:rgba(228, 222, 255, 1);--p-color-bg-fill-magic-secondary-active:rgba(223, 217, 255, 1);--p-color-bg-fill-inverse:rgba(48, 48, 48, 1);--p-color-bg-fill-inverse-hover:rgba(74, 74, 74, 1);--p-color-bg-fill-inverse-active:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent:rgba(0, 0, 0, 0.02);--p-color-bg-fill-transparent-hover:rgba(0, 0, 0, 0.05);--p-color-bg-fill-transparent-active:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-selected:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-secondary:rgba(0, 0, 0, 0.06);--p-color-bg-fill-transparent-secondary-hover:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-secondary-active:rgba(0, 0, 0, 0.11);--p-color-text:rgba(48, 48, 48, 1);--p-color-text-secondary:rgba(97, 97, 97, 1);--p-color-text-disabled:rgba(181, 181, 181, 1);--p-color-text-link:rgba(0, 91, 211, 1);--p-color-text-link-hover:rgba(0, 66, 153, 1);--p-color-text-link-active:rgba(0, 46, 106, 1);--p-color-text-brand:rgba(74, 74, 74, 1);--p-color-text-brand-hover:rgba(48, 48, 48, 1);--p-color-text-brand-on-bg-fill:rgba(255, 255, 255, 1);--p-color-text-brand-on-bg-fill-hover:rgba(227, 227, 227, 1);--p-color-text-brand-on-bg-fill-active:rgba(204, 204, 204, 1);--p-color-text-brand-on-bg-fill-disabled:rgba(255, 255, 255, 1);--p-color-text-info:rgba(0, 58, 90, 1);--p-color-text-info-hover:rgba(0, 58, 90, 1);--p-color-text-info-active:rgba(0, 33, 51, 1);--p-color-text-info-secondary:rgba(0, 124, 180, 1);--p-color-text-info-on-bg-fill:rgba(0, 33, 51, 1);--p-color-text-success:rgba(1, 75, 64, 1);--p-color-text-success-hover:rgba(7, 54, 48, 1);--p-color-text-success-active:rgba(2, 38, 34, 1);--p-color-text-success-secondary:rgba(4, 123, 93, 1);--p-color-text-success-on-bg-fill:rgba(250, 255, 251, 1);--p-color-text-caution:rgba(79, 71, 0, 1);--p-color-text-caution-hover:rgba(51, 46, 0, 1);--p-color-text-caution-active:rgba(31, 28, 0, 1);--p-color-text-caution-secondary:rgba(130, 117, 0, 1);--p-color-text-caution-on-bg-fill:rgba(51, 46, 0, 1);--p-color-text-warning:rgba(94, 66, 0, 1);--p-color-text-warning-hover:rgba(65, 45, 0, 1);--p-color-text-warning-active:rgba(37, 26, 0, 1);--p-color-text-warning-secondary:rgba(149, 111, 0, 1);--p-color-text-warning-on-bg-fill:rgba(37, 26, 0, 1);--p-color-text-critical:rgba(142, 11, 33, 1);--p-color-text-critical-hover:rgba(95, 7, 22, 1);--p-color-text-critical-active:rgba(47, 4, 11, 1);--p-color-text-critical-secondary:rgba(199, 10, 36, 1);--p-color-text-critical-on-bg-fill:rgba(255, 250, 251, 1);--p-color-text-emphasis:rgba(0, 91, 211, 1);--p-color-text-emphasis-hover:rgba(0, 66, 153, 1);--p-color-text-emphasis-active:rgba(0, 46, 106, 1);--p-color-text-emphasis-on-bg-fill:rgba(252, 253, 255, 1);--p-color-text-emphasis-on-bg-fill-hover:rgba(226, 231, 255, 1);--p-color-text-emphasis-on-bg-fill-active:rgba(213, 220, 255, 1);--p-color-text-magic:rgba(87, 0, 209, 1);--p-color-text-magic-secondary:rgba(113, 38, 255, 1);--p-color-text-magic-on-bg-fill:rgba(253, 253, 255, 1);--p-color-text-inverse:rgba(227, 227, 227, 1);--p-color-text-inverse-secondary:rgba(181, 181, 181, 1);--p-color-text-link-inverse:rgba(197, 208, 255, 1);--p-color-border:rgba(227, 227, 227, 1);--p-color-border-hover:rgba(204, 204, 204, 1);--p-color-border-disabled:rgba(235, 235, 235, 1);--p-color-border-secondary:rgba(235, 235, 235, 1);--p-color-border-tertiary:rgba(204, 204, 204, 1);--p-color-border-focus:rgba(0, 91, 211, 1);--p-color-border-brand:rgba(227, 227, 227, 1);--p-color-border-info:rgba(168, 216, 255, 1);--p-color-border-success:rgba(146, 252, 172, 1);--p-color-border-caution:rgba(255, 235, 120, 1);--p-color-border-warning:rgba(255, 200, 121, 1);--p-color-border-critical:rgba(254, 193, 199, 1);--p-color-border-critical-secondary:rgba(142, 11, 33, 1);--p-color-border-emphasis:rgba(0, 91, 211, 1);--p-color-border-emphasis-hover:rgba(0, 66, 153, 1);--p-color-border-emphasis-active:rgba(0, 46, 106, 1);--p-color-border-magic:rgba(228, 222, 255, 1);--p-color-border-magic-secondary:rgba(148, 116, 255, 1);--p-color-border-magic-secondary-hover:rgba(128, 81, 255, 1);--p-color-border-inverse:rgba(97, 97, 97, 1);--p-color-border-inverse-hover:rgba(204, 204, 204, 1);--p-color-border-inverse-active:rgba(227, 227, 227, 1);--p-color-tooltip-tail-down-border:rgba(212, 212, 212, 1);--p-color-tooltip-tail-up-border:rgba(227, 227, 227, 1);--p-color-icon:rgba(74, 74, 74, 1);--p-color-icon-hover:rgba(48, 48, 48, 1);--p-color-icon-active:rgba(26, 26, 26, 1);--p-color-icon-disabled:rgba(204, 204, 204, 1);--p-color-icon-secondary:rgba(138, 138, 138, 1);--p-color-icon-secondary-hover:rgba(97, 97, 97, 1);--p-color-icon-secondary-active:rgba(74, 74, 74, 1);--p-color-icon-brand:rgba(26, 26, 26, 1);--p-color-icon-info:rgba(0, 148, 213, 1);--p-color-icon-success:rgba(4, 123, 93, 1);--p-color-icon-caution:rgba(153, 138, 0, 1);--p-color-icon-warning:rgba(178, 132, 0, 1);--p-color-icon-critical:rgba(226, 44, 56, 1);--p-color-icon-emphasis:rgba(0, 91, 211, 1);--p-color-icon-emphasis-hover:rgba(0, 66, 153, 1);--p-color-icon-emphasis-active:rgba(0, 46, 106, 1);--p-color-icon-magic:rgba(128, 81, 255, 1);--p-color-icon-inverse:rgba(227, 227, 227, 1);--p-color-avatar-bg-fill:rgba(181, 181, 181, 1);--p-color-avatar-five-bg-fill:rgba(253, 75, 146, 1);--p-color-avatar-five-text-on-bg-fill:rgba(255, 246, 248, 1);--p-color-avatar-four-bg-fill:rgba(81, 192, 255, 1);--p-color-avatar-four-text-on-bg-fill:rgba(0, 33, 51, 1);--p-color-avatar-one-bg-fill:rgba(197, 48, 197, 1);--p-color-avatar-one-text-on-bg-fill:rgba(253, 239, 253, 1);--p-color-avatar-seven-bg-fill:rgba(148, 116, 255, 1);--p-color-avatar-seven-text-on-bg-fill:rgba(248, 247, 255, 1);--p-color-avatar-six-bg-fill:rgba(37, 232, 43, 1);--p-color-avatar-six-text-on-bg-fill:rgba(3, 61, 5, 1);--p-color-avatar-text-on-bg-fill:rgba(255, 255, 255, 1);--p-color-avatar-three-bg-fill:rgba(44, 224, 212, 1);--p-color-avatar-three-text-on-bg-fill:rgba(3, 60, 57, 1);--p-color-avatar-two-bg-fill:rgba(82, 244, 144, 1);--p-color-avatar-two-text-on-bg-fill:rgba(1, 75, 64, 1);--p-color-backdrop-bg:rgba(0, 0, 0, 0.71);--p-color-button-gradient-bg-fill:linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%);--p-color-checkbox-bg-surface-disabled:rgba(0, 0, 0, 0.08);--p-color-checkbox-icon-disabled:rgba(255, 255, 255, 1);--p-color-input-bg-surface:rgba(253, 253, 253, 1);--p-color-input-bg-surface-hover:rgba(250, 250, 250, 1);--p-color-input-bg-surface-active:rgba(247, 247, 247, 1);--p-color-input-border:rgba(138, 138, 138, 1);--p-color-input-border-hover:rgba(97, 97, 97, 1);--p-color-input-border-active:rgba(26, 26, 26, 1);--p-color-nav-bg:rgba(235, 235, 235, 1);--p-color-nav-bg-surface:rgba(0, 0, 0, 0.02);--p-color-nav-bg-surface-hover:rgba(241, 241, 241, 1);--p-color-nav-bg-surface-active:rgba(250, 250, 250, 1);--p-color-nav-bg-surface-selected:rgba(250, 250, 250, 1);--p-color-radio-button-bg-surface-disabled:rgba(0, 0, 0, 0.08);--p-color-radio-button-icon-disabled:rgba(255, 255, 255, 1);--p-color-video-thumbnail-play-button-bg-fill-hover:rgba(0, 0, 0, 0.81);--p-color-video-thumbnail-play-button-bg-fill:rgba(0, 0, 0, 0.71);--p-color-video-thumbnail-play-button-text-on-bg-fill:rgba(255, 255, 255, 1);--p-color-scrollbar-thumb-bg-hover:rgba(138, 138, 138, 1);--p-color-scrollbar-thumb-bg:rgba(181, 181, 181, 1);--p-font-family-sans:'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;--p-font-family-mono:ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;--p-font-size-275:0.6875rem;--p-font-size-300:0.75rem;--p-font-size-325:0.8125rem;--p-font-size-350:0.875rem;--p-font-size-400:1rem;--p-font-size-450:1.125rem;--p-font-size-500:1.25rem;--p-font-size-550:1.375rem;--p-font-size-600:1.5rem;--p-font-size-750:1.875rem;--p-font-size-800:2rem;--p-font-size-900:2.25rem;--p-font-size-1000:2.5rem;--p-font-weight-regular:450;--p-font-weight-medium:550;--p-font-weight-semibold:650;--p-font-weight-bold:700;--p-font-letter-spacing-densest:-0.03375rem;--p-font-letter-spacing-denser:-0.01875rem;--p-font-letter-spacing-dense:-0.0125rem;--p-font-letter-spacing-normal:0rem;--p-font-line-height-300:0.75rem;--p-font-line-height-400:1rem;--p-font-line-height-500:1.25rem;--p-font-line-height-600:1.5rem;--p-font-line-height-700:1.75rem;--p-font-line-height-800:2rem;--p-font-line-height-1000:2.5rem;--p-font-line-height-1200:3rem;--p-height-0:0rem;--p-height-025:0.0625rem;--p-height-050:0.125rem;--p-height-100:0.25rem;--p-height-150:0.375rem;--p-height-200:0.5rem;--p-height-300:0.75rem;--p-height-400:1rem;--p-height-500:1.25rem;--p-height-600:1.5rem;--p-height-700:1.75rem;--p-height-800:2rem;--p-height-900:2.25rem;--p-height-1000:2.5rem;--p-height-1200:3rem;--p-height-1600:4rem;--p-height-2000:5rem;--p-height-2400:6rem;--p-height-2800:7rem;--p-height-3200:8rem;--p-motion-duration-0:0ms;--p-motion-duration-50:50ms;--p-motion-duration-100:100ms;--p-motion-duration-150:150ms;--p-motion-duration-200:200ms;--p-motion-duration-250:250ms;--p-motion-duration-300:300ms;--p-motion-duration-350:350ms;--p-motion-duration-400:400ms;--p-motion-duration-450:450ms;--p-motion-duration-500:500ms;--p-motion-duration-5000:5000ms;--p-motion-ease:cubic-bezier(0.25, 0.1, 0.25, 1);--p-motion-ease-in:cubic-bezier(0.42, 0, 1, 1);--p-motion-ease-out:cubic-bezier(0.19, 0.91, 0.38, 1);--p-motion-ease-in-out:cubic-bezier(0.42, 0, 0.58, 1);--p-motion-linear:cubic-bezier(0, 0, 1, 1);--p-motion-keyframes-bounce:p-motion-keyframes-bounce;--p-motion-keyframes-fade-in:p-motion-keyframes-fade-in;--p-motion-keyframes-pulse:p-motion-keyframes-pulse;--p-motion-keyframes-spin:p-motion-keyframes-spin;--p-motion-keyframes-appear-above:p-motion-keyframes-appear-above;--p-motion-keyframes-appear-below:p-motion-keyframes-appear-below;--p-shadow-0:none;--p-shadow-100:0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07);--p-shadow-200:0rem 0.1875rem 0.0625rem -0.0625rem rgba(26, 26, 26, 0.07);--p-shadow-300:0rem 0.25rem 0.375rem -0.125rem rgba(26, 26, 26, 0.20);--p-shadow-400:0rem 0.5rem 1rem -0.25rem rgba(26, 26, 26, 0.22);--p-shadow-500:0rem 0.75rem 1.25rem -0.5rem rgba(26, 26, 26, 0.24);--p-shadow-600:0rem 1.25rem 1.25rem -0.5rem rgba(26, 26, 26, 0.28);--p-shadow-bevel-100:0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, -0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, 0rem -0.0625rem 0rem 0rem rgba(0, 0, 0, 0.17) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.5) inset;--p-shadow-inset-100:0rem 0.0625rem 0.125rem 0rem rgba(26, 26, 26, 0.15) inset, 0rem 0.0625rem 0.0625rem 0rem rgba(26, 26, 26, 0.15) inset;--p-shadow-inset-200:0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.20) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset, -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset;--p-shadow-button:0rem -0.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.1) inset, 0rem 0.03125rem 0rem 0.09375rem #FFF inset;--p-shadow-button-hover:0rem 0.0625rem 0rem 0rem #EBEBEB inset, -0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0rem -0.0625rem 0rem 0rem #CCC inset;--p-shadow-button-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset;--p-shadow-button-primary:0rem -0.0625rem 0rem 0.0625rem rgba(0, 0, 0, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(48, 48, 48, 1) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.25) inset;--p-shadow-button-primary-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.24) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.0625rem 0rem 0rem #000 inset, 0rem -0.0625rem 0rem 0.0625rem #1A1A1A;--p-shadow-button-primary-inset:0rem 0.1875rem 0rem 0rem rgb(0, 0, 0) inset;--p-shadow-button-primary-critical:0rem -0.0625rem 0rem 0.0625rem rgba(142, 31, 11, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(181, 38, 11, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.349) inset;--p-shadow-button-primary-critical-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset;--p-shadow-button-primary-critical-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;--p-shadow-button-primary-success:0rem -0.0625rem 0rem 0.0625rem rgba(12, 81, 50, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(19, 111, 69, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.251) inset;--p-shadow-button-primary-success-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset;--p-shadow-button-primary-success-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;--p-shadow-border-inset:0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.08) inset;--p-space-0:0rem;--p-space-025:0.0625rem;--p-space-050:0.125rem;--p-space-100:0.25rem;--p-space-150:0.375rem;--p-space-200:0.5rem;--p-space-300:0.75rem;--p-space-400:1rem;--p-space-500:1.25rem;--p-space-600:1.5rem;--p-space-800:2rem;--p-space-1000:2.5rem;--p-space-1200:3rem;--p-space-1600:4rem;--p-space-2000:5rem;--p-space-2400:6rem;--p-space-2800:7rem;--p-space-3200:8rem;--p-space-button-group-gap:var(--p-space-200);--p-space-card-gap:var(--p-space-400);--p-space-card-padding:var(--p-space-400);--p-space-table-cell-padding:var(--p-space-150);--p-text-heading-3xl-font-family:var(--p-font-family-sans);--p-text-heading-3xl-font-size:var(--p-font-size-900);--p-text-heading-3xl-font-weight:var(--p-font-weight-bold);--p-text-heading-3xl-font-letter-spacing:var(--p-font-letter-spacing-densest);--p-text-heading-3xl-font-line-height:var(--p-font-line-height-1200);--p-text-heading-2xl-font-family:var(--p-font-family-sans);--p-text-heading-2xl-font-size:var(--p-font-size-750);--p-text-heading-2xl-font-weight:var(--p-font-weight-bold);--p-text-heading-2xl-font-letter-spacing:var(--p-font-letter-spacing-denser);--p-text-heading-2xl-font-line-height:var(--p-font-line-height-1000);--p-text-heading-xl-font-family:var(--p-font-family-sans);--p-text-heading-xl-font-size:var(--p-font-size-600);--p-text-heading-xl-font-weight:var(--p-font-weight-bold);--p-text-heading-xl-font-letter-spacing:var(--p-font-letter-spacing-dense);--p-text-heading-xl-font-line-height:var(--p-font-line-height-800);--p-text-heading-lg-font-family:var(--p-font-family-sans);--p-text-heading-lg-font-size:var(--p-font-size-500);--p-text-heading-lg-font-weight:var(--p-font-weight-semibold);--p-text-heading-lg-font-letter-spacing:var(--p-font-letter-spacing-dense);--p-text-heading-lg-font-line-height:var(--p-font-line-height-600);--p-text-heading-md-font-family:var(--p-font-family-sans);--p-text-heading-md-font-size:var(--p-font-size-350);--p-text-heading-md-font-weight:var(--p-font-weight-semibold);--p-text-heading-md-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-md-font-line-height:var(--p-font-line-height-500);--p-text-heading-sm-font-family:var(--p-font-family-sans);--p-text-heading-sm-font-size:var(--p-font-size-325);--p-text-heading-sm-font-weight:var(--p-font-weight-semibold);--p-text-heading-sm-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-sm-font-line-height:var(--p-font-line-height-500);--p-text-heading-xs-font-family:var(--p-font-family-sans);--p-text-heading-xs-font-size:var(--p-font-size-300);--p-text-heading-xs-font-weight:var(--p-font-weight-semibold);--p-text-heading-xs-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-xs-font-line-height:var(--p-font-line-height-400);--p-text-body-lg-font-family:var(--p-font-family-sans);--p-text-body-lg-font-size:var(--p-font-size-350);--p-text-body-lg-font-weight:var(--p-font-weight-regular);--p-text-body-lg-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-lg-font-line-height:var(--p-font-line-height-500);--p-text-body-md-font-family:var(--p-font-family-sans);--p-text-body-md-font-size:var(--p-font-size-325);--p-text-body-md-font-weight:var(--p-font-weight-regular);--p-text-body-md-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-md-font-line-height:var(--p-font-line-height-500);--p-text-body-sm-font-family:var(--p-font-family-sans);--p-text-body-sm-font-size:var(--p-font-size-300);--p-text-body-sm-font-weight:var(--p-font-weight-regular);--p-text-body-sm-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-sm-font-line-height:var(--p-font-line-height-400);--p-text-body-xs-font-family:var(--p-font-family-sans);--p-text-body-xs-font-size:var(--p-font-size-275);--p-text-body-xs-font-weight:var(--p-font-weight-regular);--p-text-body-xs-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-xs-font-line-height:var(--p-font-line-height-300);--p-width-0:0rem;--p-width-025:0.0625rem;--p-width-050:0.125rem;--p-width-100:0.25rem;--p-width-150:0.375rem;--p-width-200:0.5rem;--p-width-300:0.75rem;--p-width-400:1rem;--p-width-500:1.25rem;--p-width-600:1.5rem;--p-width-700:1.75rem;--p-width-800:2rem;--p-width-900:2.25rem;--p-width-1000:2.5rem;--p-width-1200:3rem;--p-width-1600:4rem;--p-width-2000:5rem;--p-width-2400:6rem;--p-width-2800:7rem;--p-width-3200:8rem;--p-z-index-0:auto;--p-z-index-1:100;--p-z-index-2:400;--p-z-index-3:510;--p-z-index-4:512;--p-z-index-5:513;--p-z-index-6:514;--p-z-index-7:515;--p-z-index-8:516;--p-z-index-9:517;--p-z-index-10:518;--p-z-index-11:519;--p-z-index-12:520;}\n\n.sca-polaris .p-theme-light-mobile{--p-color-button-gradient-bg-fill:none;--p-shadow-100:none;--p-shadow-bevel-100:none;--p-shadow-button:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-hover:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-inset:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-primary:none;--p-shadow-button-primary-hover:none;--p-shadow-button-primary-inset:none;--p-shadow-button-primary-critical:none;--p-shadow-button-primary-critical-hover:none;--p-shadow-button-primary-critical-inset:none;--p-shadow-button-primary-success:none;--p-shadow-button-primary-success-hover:none;--p-shadow-button-primary-success-inset:none;--p-space-card-gap:var(--p-space-200);--p-text-heading-2xl-font-size:var(--p-font-size-800);--p-text-heading-xl-font-size:var(--p-font-size-550);--p-text-heading-xl-font-line-height:var(--p-font-line-height-700);--p-text-heading-lg-font-size:var(--p-font-size-450);--p-text-heading-md-font-size:var(--p-font-size-400);--p-text-heading-sm-font-size:var(--p-font-size-350);--p-text-body-lg-font-size:var(--p-font-size-450);--p-text-body-lg-font-line-height:var(--p-font-line-height-700);--p-text-body-md-font-size:var(--p-font-size-400);--p-text-body-md-font-line-height:var(--p-font-line-height-600);--p-text-body-sm-font-size:var(--p-font-size-350);--p-text-body-sm-font-line-height:var(--p-font-line-height-500);--p-text-body-xs-font-size:var(--p-font-size-300);--p-text-body-xs-font-line-height:var(--p-font-line-height-400);}\n\n.sca-polaris .p-theme-light-high-contrast-experimental{--p-color-text:rgba(26, 26, 26, 1);--p-color-text-secondary:rgba(26, 26, 26, 1);--p-color-text-brand:rgba(26, 26, 26, 1);--p-color-icon-secondary:rgba(74, 74, 74, 1);--p-color-border:rgba(138, 138, 138, 1);--p-color-input-border:rgba(74, 74, 74, 1);--p-color-border-secondary:rgba(138, 138, 138, 1);--p-color-bg-surface-secondary:rgba(241, 241, 241, 1);--p-shadow-bevel-100:0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07), 0rem 0.0625rem 0rem 0rem rgba(208, 208, 208, 0.40) inset, 0.0625rem 0rem 0rem 0rem #CCC inset, -0.0625rem 0rem 0rem 0rem #CCC inset, 0rem -0.0625rem 0rem 0rem #999 inset;}\n\n.sca-polaris .p-theme-dark-experimental{color-scheme:dark;--p-color-bg:rgba(26, 26, 26, 1);--p-color-bg-surface:rgba(48, 48, 48, 1);--p-color-bg-fill:rgba(48, 48, 48, 1);--p-color-icon:rgba(227, 227, 227, 1);--p-color-icon-secondary:rgba(181, 181, 181, 1);--p-color-icon-disabled:rgba(74, 74, 74, 1);--p-color-text:rgba(227, 227, 227, 1);--p-color-text-secondary:rgba(181, 181, 181, 1);--p-color-text-disabled:rgba(74, 74, 74, 1);--p-color-bg-surface-secondary-active:rgba(255, 255, 255, 0.14);--p-color-bg-surface-secondary-hover:rgba(255, 255, 255, 0.06);--p-color-bg-fill-transparent:rgba(255, 255, 255, 0.11);--p-color-bg-fill-brand:rgba(255, 255, 255, 1);--p-color-text-brand-on-bg-fill:rgba(48, 48, 48, 1);--p-color-bg-surface-hover:rgba(74, 74, 74, 1);--p-color-bg-fill-hover:rgba(255, 255, 255, 0.05);--p-color-bg-fill-transparent-hover:rgba(255, 255, 255, 0.14);--p-color-bg-fill-brand-hover:rgba(243, 243, 243, 1);--p-color-bg-surface-selected:rgba(97, 97, 97, 1);--p-color-bg-fill-selected:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent-selected:rgba(255, 255, 255, 0.22);--p-color-bg-fill-brand-selected:rgba(212, 212, 212, 1);--p-color-bg-surface-active:rgba(97, 97, 97, 1);--p-color-bg-fill-active:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent-active:rgba(255, 255, 255, 0.17);--p-color-bg-fill-brand-active:rgba(247, 247, 247, 1);--p-color-bg-fill-secondary:rgba(255, 255, 255, 0.08);--p-color-bg-fill-secondary-hover:rgba(255, 255, 255, 0.11);--p-color-bg-fill-secondary-selected:rgba(255, 255, 255, 0.17);--p-color-bg-surface-brand-selected:rgba(74, 74, 74, 1);--p-color-border-secondary:rgba(74, 74, 74, 1);--p-color-bg-surface-tertiary:rgba(255, 255, 255, 0.08);--p-color-icon-brand:rgba(74, 74, 74, 1);--p-color-bg-fill-disabled:rgba(255, 255, 255, 0.05);--p-color-text-brand-on-bg-fill-disabled:rgba(138, 138, 138, 1);--p-color-bg-fill-brand-disabled:rgba(255, 255, 255, 0.22);--p-color-bg-fill-tertiary:rgba(48, 48, 48, 1);--p-color-tooltip-tail-down-border:rgba(60, 60, 60, 1);--p-color-tooltip-tail-up-border:rgba(71, 71, 71, 1);--p-shadow-bevel-100:0.0625rem 0rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, -0.0625rem 0rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, 0rem -0.0625rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.16) inset;}\n\n.sca-polaris{\n  --polaris-version-number:'13.9.5';\n\n  --pg-navigation-width:15rem;\n  --pg-dangerous-magic-space-4:1rem;\n  --pg-dangerous-magic-space-5:1.25rem;\n  --pg-dangerous-magic-space-8:2rem;\n\n  --pg-layout-width-primary-min:30rem;\n  --pg-layout-width-primary-max:41.375rem;\n  --pg-layout-width-secondary-min:15rem;\n  --pg-layout-width-secondary-max:20rem;\n  --pg-layout-width-one-half-width-base:28.125rem;\n  --pg-layout-width-one-third-width-base:15rem;\n  --pg-layout-width-nav-base:var(--pg-navigation-width);\n  --pg-layout-width-page-content-partially-condensed:28.125rem;\n  --pg-layout-width-inner-spacing-base:var(--pg-dangerous-magic-space-4);\n  --pg-layout-width-outer-spacing-min:var(--pg-dangerous-magic-space-5);\n  --pg-layout-width-outer-spacing-max:var(--pg-dangerous-magic-space-8);\n  --pg-layout-relative-size:2;\n\n  --pg-dismiss-icon-size:2rem;\n\n  --pg-top-bar-height:3.5rem;\n\n  --pg-mobile-nav-width:calc(100vw - var(--pg-dismiss-icon-size) - var(--pg-dangerous-magic-space-8));\n\n  --pg-control-height:2rem;\n  --pg-control-vertical-padding:calc((2.25rem - var(--p-font-line-height-600) - var(--p-space-050))/2);\n}\n\n.sca-polaris,\n.sca-polaris{\n  font-size:var(--p-font-size-325);\n  line-height:var(--p-font-line-height-500);\n  font-weight:var(--p-font-weight-regular);\n  font-feature-settings:'calt' 0;\n  letter-spacing:initial;\n  color:var(--p-color-text);\n  -webkit-tap-highlight-color:transparent;\n}\n\n.sca-polaris,\n.sca-polaris,\n.sca-polaris button{\n  font-family:var(--p-font-family-sans);\n}\n\n.sca-polaris{\n  position:relative;\n  font-size:100%;\n  -webkit-font-smoothing:antialiased;\n  -moz-osx-font-smoothing:grayscale;\n\n  -webkit-text-size-adjust:100%;\n\n     -moz-text-size-adjust:100%;\n\n          text-size-adjust:100%;\n  text-rendering:optimizeLegibility;\n  scrollbar-width:thin;\n  scrollbar-color:var(--p-color-bg) var(--p-color-bg);\n  transition:scrollbar-color var(--p-motion-duration-100) var(--p-motion-ease-in);\n}\n\n.sca-polaris::-webkit-scrollbar{\n    width:0.6875rem;\n    background-color:var(--p-color-bg);\n  }\n\n.sca-polaris::-webkit-scrollbar-thumb{\n    background-color:var(--p-color-bg);\n    border:var(--p-border-width-050) solid transparent;\n    border-radius:var(--p-border-radius-300);\n    background-clip:content-box;\n  }\n\n.sca-polaris:hover{\n    scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) var(--p-color-bg);\n  }\n\n.sca-polaris:hover::-webkit-scrollbar-thumb{\n      background-color:var(--p-color-scrollbar-thumb-bg-hover);\n    }\n\n@supports (font: -apple-system-body){\n  @container scr (max-width: 30.6225em) {\n    .sca-polaris{\n      font:-apple-system-body;\n    }\n  }\n}\n\n.sca-polaris{\n  min-height:100%;\n  margin:0;\n  padding:0;\n  background-color:rgba(241, 242, 244, 1);\n  scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) transparent;\n}\n\n@media print{\n\n.sca-polaris{\n    background-color:transparent !important;\n}\n  }\n\n.sca-polaris *,\n.sca-polaris *::before,\n.sca-polaris *::after{\n  box-sizing:border-box;\n}\n\n.sca-polaris h1,\n.sca-polaris h2,\n.sca-polaris h3,\n.sca-polaris h4,\n.sca-polaris h5,\n.sca-polaris h6,\n.sca-polaris p{\n  margin:0;\n  font-size:1em;\n  font-weight:var(--p-font-weight-regular);\n}\n\n.sca-polaris button::-moz-focus-inner,\n.sca-polaris [type='button']::-moz-focus-inner,\n.sca-polaris [type='reset']::-moz-focus-inner,\n.sca-polaris [type='submit']::-moz-focus-inner{\n  border-style:none;\n}\n\n.sca-polaris[class~='Polaris-Safari-16-Font-Optical-Sizing-Patch']{\n  font-variation-settings:'opsz' 14;\n}\n\n\n.sca-polaris .Polaris-Text--root{\n  margin:0;\n  text-align:inherit;\n}\n\n.sca-polaris .Polaris-Text--block{\n  display:block;\n}\n\n.sca-polaris .Polaris-Text--truncate{\n  overflow:hidden;\n  white-space:nowrap;\n  text-overflow:ellipsis;\n}\n\n.sca-polaris .Polaris-Text--visuallyHidden{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n.sca-polaris .Polaris-Text--start{\n  text-align:start;\n}\n\n.sca-polaris .Polaris-Text--center{\n  text-align:center;\n}\n\n.sca-polaris .Polaris-Text--end{\n  text-align:end;\n}\n\n.sca-polaris .Polaris-Text--justify{\n  text-align:justify;\n}\n\n.sca-polaris .Polaris-Text--base{\n  color:var(--p-color-text);\n}\n\n.sca-polaris .Polaris-Text--inherit{\n  color:inherit;\n}\n\n.sca-polaris .Polaris-Text--disabled{\n  color:var(--p-color-text-disabled);\n}\n\n.sca-polaris .Polaris-Text--success{\n  color:var(--p-color-text-success);\n}\n\n.sca-polaris .Polaris-Text--critical{\n  color:var(--p-color-text-critical);\n}\n\n.sca-polaris .Polaris-Text--caution{\n  color:var(--p-color-text-caution);\n}\n\n.sca-polaris .Polaris-Text--subdued{\n  color:var(--p-color-text-secondary);\n}\n\n.sca-polaris .Polaris-Text--magic{\n  color:var(--p-color-text-magic);\n}\n\n.sca-polaris .Polaris-Text__magic--subdued{\n  color:var(--p-color-text-magic-secondary);\n}\n\n.sca-polaris .Polaris-Text__text--inverse{\n  color:var(--p-color-text-inverse);\n}\n\n.sca-polaris .Polaris-Text--textInverseSecondary{\n  color:var(--p-color-text-inverse-secondary);\n}\n\n.sca-polaris .Polaris-Text--headingXs{\n  font-size:var(--p-text-heading-xs-font-size);\n  font-weight:var(--p-text-heading-xs-font-weight);\n  letter-spacing:var(--p-text-heading-xs-font-letter-spacing);\n  line-height:var(--p-text-heading-xs-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--headingSm{\n  font-size:var(--p-text-heading-sm-font-size);\n  font-weight:var(--p-text-heading-sm-font-weight);\n  letter-spacing:var(--p-text-heading-sm-font-letter-spacing);\n  line-height:var(--p-text-heading-sm-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--headingMd{\n  font-size:var(--p-text-heading-md-font-size);\n  font-weight:var(--p-text-heading-md-font-weight);\n  letter-spacing:var(--p-text-heading-md-font-letter-spacing);\n  line-height:var(--p-text-heading-md-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--headingLg{\n  font-size:var(--p-text-heading-lg-font-size);\n  font-weight:var(--p-text-heading-lg-font-weight);\n  letter-spacing:var(--p-text-heading-lg-font-letter-spacing);\n  line-height:var(--p-text-heading-lg-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--headingXl{\n  font-size:var(--p-font-size-500);\n  font-weight:var(--p-font-weight-semibold);\n  letter-spacing:var(--p-font-letter-spacing-dense);\n  line-height:var(--p-font-line-height-600);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Text--headingXl{\n    font-size:var(--p-text-heading-xl-font-size);\n    font-weight:var(--p-text-heading-xl-font-weight);\n    letter-spacing:var(--p-text-heading-xl-font-letter-spacing);\n    line-height:var(--p-text-heading-xl-font-line-height);\n}\n  }\n\n.sca-polaris .Polaris-Text--heading2xl{\n  font-size:var(--p-font-size-600);\n  font-weight:var(--p-font-weight-bold);\n  letter-spacing:var(--p-font-letter-spacing-dense);\n  line-height:var(--p-font-line-height-800);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Text--heading2xl{\n    font-size:var(--p-text-heading-2xl-font-size);\n    font-weight:var(--p-text-heading-2xl-font-weight);\n    letter-spacing:var(--p-text-heading-2xl-font-letter-spacing);\n    line-height:var(--p-text-heading-2xl-font-line-height);\n}\n  }\n\n.sca-polaris .Polaris-Text--heading3xl{\n  font-size:var(--p-font-size-750);\n  font-weight:var(--p-font-weight-bold);\n  letter-spacing:var(--p-font-letter-spacing-denser);\n  line-height:var(--p-font-line-height-1000);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Text--heading3xl{\n    font-size:var(--p-text-heading-3xl-font-size);\n    font-weight:var(--p-text-heading-3xl-font-weight);\n    letter-spacing:var(--p-text-heading-3xl-font-letter-spacing);\n    line-height:var(--p-text-heading-3xl-font-line-height);\n}\n  }\n\n.sca-polaris .Polaris-Text--bodyXs{\n  font-size:var(--p-text-body-xs-font-size);\n  font-weight:var(--p-text-body-xs-font-weight);\n  letter-spacing:var(--p-text-body-xs-font-letter-spacing);\n  line-height:var(--p-text-body-xs-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--bodySm{\n  font-size:var(--p-text-body-sm-font-size);\n  font-weight:var(--p-text-body-sm-font-weight);\n  letter-spacing:var(--p-text-body-sm-font-letter-spacing);\n  line-height:var(--p-text-body-sm-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--bodyMd{\n  font-size:var(--p-text-body-md-font-size);\n  font-weight:var(--p-text-body-sm-font-weight);\n  letter-spacing:var(--p-text-body-md-font-letter-spacing);\n  line-height:var(--p-text-body-md-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--bodyLg{\n  font-size:var(--p-text-body-lg-font-size);\n  font-weight:var(--p-text-body-sm-font-weight);\n  letter-spacing:var(--p-text-body-lg-font-letter-spacing);\n  line-height:var(--p-text-body-lg-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--regular{\n  font-weight:var(--p-font-weight-regular);\n}\n\n.sca-polaris .Polaris-Text--medium{\n  font-weight:var(--p-font-weight-medium);\n}\n\n.sca-polaris .Polaris-Text--semibold{\n  font-weight:var(--p-font-weight-semibold);\n}\n\n.sca-polaris .Polaris-Text--bold{\n  font-weight:var(--p-font-weight-bold);\n}\n\n.sca-polaris .Polaris-Text--break{\n  overflow-wrap:anywhere;\n  word-break:normal;\n}\n\n.sca-polaris .Polaris-Text--numeric{\n  font-variant-numeric:tabular-nums lining-nums;\n}\n\n.sca-polaris .Polaris-Text__line--through{\n  -webkit-text-decoration-line:line-through;\n          text-decoration-line:line-through;\n}\n\n\n.sca-polaris .Polaris-Icon{\n  display:block;\n  height:1.25rem;\n  width:1.25rem;\n\n  max-height:100%;\n  max-width:100%;\n  margin:auto;\n}\n\n.sca-polaris .Polaris-Icon svg{\n  fill:currentColor;\n}\n\n.sca-polaris .Polaris-Icon--toneInherit svg{\n  color:inherit;\n}\n\n.sca-polaris .Polaris-Icon--toneBase svg{\n  color:var(--p-color-icon);\n}\n\n.sca-polaris .Polaris-Icon--toneSubdued svg{\n  color:var(--p-color-icon-secondary);\n}\n\n.sca-polaris .Polaris-Icon__Svg,\n.sca-polaris .Polaris-Icon__Img{\n  position:relative;\n  display:block;\n  width:100%;\n  max-width:100%;\n  max-height:100%;\n}\n\n.sca-polaris .Polaris-Icon__Placeholder{\n  padding-bottom:100%;\n  background:var(--p-color-bg-fill-tertiary);\n  border-radius:var(--p-border-radius-100);\n}\n\n\n.sca-polaris .Polaris-Button{\n  --pc-button-gap:var(--p-space-050);\n  --pc-button-bg:transparent;\n  --pc-button-bg_hover:var(--pc-button-bg);\n  --pc-button-bg_active:var(--pc-button-bg);\n  --pc-button-bg_pressed:var(--pc-button-bg_active);\n  --pc-button-bg_disabled:var(--p-color-bg-fill-disabled);\n  --pc-button-color:inherit;\n  --pc-button-color_hover:var(--pc-button-color);\n  --pc-button-color_active:var(--pc-button-color);\n  --pc-button-color_pressed:var(--pc-button-color_active);\n  --pc-button-color_disabled:var(--p-color-text-disabled);\n  --pc-button-box-shadow:transparent;\n  --pc-button-box-shadow_hover:var(--pc-button-box-shadow);\n  --pc-button-box-shadow_active:var(--pc-button-box-shadow);\n  --pc-button-box-shadow_pressed:var(--pc-button-box-shadow_active);\n  --pc-button-box-shadow_disabled:var(--pc-button-box-shadow);\n  --pc-button-icon-fill:currentColor;\n  --pc-button-icon-fill_hover:var(--pc-button-icon-fill);\n  --pc-button-icon-fill_active:var(--pc-button-icon-fill);\n  --pc-button-icon-fill_pressed:var(--pc-button-icon-fill_active);\n  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);\n  all:unset;\n  position:relative;\n  box-sizing:border-box;\n  display:inline-flex;\n  align-items:center;\n  gap:var(--pc-button-gap);\n  padding:var(--pc-button-padding-block) var(--pc-button-padding-inline);\n  background:var(--pc-button-bg);\n  border:none;\n  border-radius:var(--p-border-radius-200);\n  box-shadow:var(--pc-button-box-shadow);\n  color:var(--pc-button-color);\n  cursor:pointer;\n  -webkit-user-select:none;\n          user-select:none;\n  touch-action:manipulation;\n  -webkit-tap-highlight-color:transparent;\n}\n\n.sca-polaris .Polaris-Button.Polaris-Button svg{\n  fill:var(--pc-button-icon-fill);\n}\n\n.sca-polaris .Polaris-Button.Polaris-Button:hover svg{\n  fill:var(--pc-button-icon-fill_hover);\n}\n\n.sca-polaris .Polaris-Button.Polaris-Button:active,\n.sca-polaris .Polaris-Button.Polaris-Button[data-state='open'] svg{\n  fill:var(--pc-button-icon-fill_active);\n}\n\n.sca-polaris .Polaris-Button.Polaris-Button:disabled,\n.sca-polaris .Polaris-Button.Polaris-Button[disabled],\n.sca-polaris .Polaris-Button--disabled.Polaris-Button--disabled svg{\n  fill:var(--pc-button-icon-fill_disabled);\n}\n\n.sca-polaris .Polaris-Button--pressed.Polaris-Button--pressed,\n.sca-polaris .Polaris-Button--pressed.Polaris-Button--pressed:hover,\n.sca-polaris .Polaris-Button--pressed.Polaris-Button--pressed:active,\n.sca-polaris .Polaris-Button--pressed.Polaris-Button--pressed:focus-visible svg{\n  fill:var(--pc-button-icon-fill_pressed);\n}\n\n.sca-polaris .Polaris-Button:hover{\n  background:var(--pc-button-bg_hover);\n  color:var(--pc-button-color_hover);\n  box-shadow:var(--pc-button-box-shadow_hover);\n}\n\n.sca-polaris .Polaris-Button:active,\n.sca-polaris .Polaris-Button[data-state='open']{\n  background:var(--pc-button-bg_active);\n  color:var(--pc-button-color_active);\n  box-shadow:var(--pc-button-box-shadow_active);\n}\n\n.sca-polaris .Polaris-Button:focus-visible{\n  background:var(--pc-button-bg_hover);\n  color:var(--pc-button-color_hover);\n  outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n  outline-offset:var(--p-space-025);\n}\n\n.sca-polaris .Polaris-Button:focus-visible::after{\n    content:none;\n  }\n\n.sca-polaris .Polaris-Button:disabled,\n.sca-polaris .Polaris-Button[disabled],\n.sca-polaris .Polaris-Button--disabled{\n  background:var(--pc-button-bg_disabled);\n  color:var(--pc-button-color_disabled);\n  box-shadow:none;\n  -webkit-user-select:none;\n          user-select:none;\n  pointer-events:none;\n}\n\n.sca-polaris .Polaris-Button--pressed,\n.sca-polaris .Polaris-Button--pressed:hover,\n.sca-polaris .Polaris-Button--pressed:active,\n.sca-polaris .Polaris-Button--pressed:focus-visible{\n  background:var(--pc-button-bg_pressed);\n  color:var(--pc-button-color_pressed);\n  box-shadow:var(--pc-button-box-shadow_pressed);\n}\n\n.sca-polaris .Polaris-Button--variantPrimary{\n  --pc-button-bg-gradient:var(--p-color-button-gradient-bg-fill);\n  --pc-button-box-shadow:var(--p-shadow-button-primary);\n  --pc-button-box-shadow_active:var(--p-shadow-button-primary-inset);\n  --pc-button-bg:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);\n  --pc-button-bg_hover:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover);\n  --pc-button-bg_active:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active);\n  --pc-button-bg_disabled:var(--p-color-bg-fill-brand-disabled);\n  --pc-button-color:var(--p-color-text-brand-on-bg-fill);\n  --pc-button-color_disabled:var(--p-color-text-brand-on-bg-fill-disabled);\n  --pc-button-icon-fill:var(--p-color-text-brand-on-bg-fill);\n  --pc-button-icon-fill_disabled:var(--p-color-text-brand-on-bg-fill-disabled);\n}\n\n.sca-polaris .Polaris-Button--variantSecondary{\n  --pc-button-box-shadow:var(--p-shadow-button);\n  --pc-button-box-shadow_active:var(--p-shadow-button-inset);\n  --pc-button-bg:var(--p-color-bg-fill);\n  --pc-button-bg_hover:var(--p-color-bg-fill-hover);\n  --pc-button-bg_active:var(--p-color-bg-fill-active);\n  --pc-button-bg_pressed:var(--p-color-bg-fill-selected);\n  --pc-button-color:var(--p-color-text);\n  --pc-button-icon-fill:var(--p-color-icon);\n}\n\n.sca-polaris .Polaris-Button--variantTertiary{\n  --pc-button-bg_hover:var(--p-color-bg-fill-transparent-hover);\n  --pc-button-bg_active:var(--p-color-bg-fill-transparent-active);\n  --pc-button-bg_pressed:var(--p-color-bg-fill-selected);\n  --pc-button-bg_disabled:transparent;\n  --pc-button-color:var(--p-color-text);\n  --pc-button-icon-fill:var(--p-color-icon);\n}\n\n.sca-polaris .Polaris-Button--variantPlain{\n  --pc-button-color:var(--p-color-text-link);\n  --pc-button-color_hover:var(--p-color-text-link-hover);\n  --pc-button-color_active:var(--p-color-text-link-active);\n}\n\n.sca-polaris .Polaris-Button--variantPlain:is(:hover, :active, :focus-visible):not(.Polaris-Button--removeUnderline){\n  text-decoration:underline;\n}\n\n.sca-polaris .Polaris-Button--variantPlain{\n  --pc-button-bg_disabled:transparent;\n  margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1);\n}\n\n.sca-polaris .Polaris-Button--variantPlain:focus-visible{\n  border-radius:var(--p-border-radius-300);\n  outline-offset:calc(var(--pc-button-padding-block)*-1);\n}\n\n.sca-polaris .Polaris-Button--toneSuccess:is(.Polaris-Button--variantSecondary, .Polaris-Button--variantTertiary, .Polaris-Button--variantPlain){\n  --pc-button-color:var(--p-color-text-success);\n  --pc-button-color_hover:var(--p-color-text-success-hover);\n  --pc-button-color_active:var(--p-color-text-success-active);\n  --pc-button-icon-fill:currentColor;\n}\n\n.sca-polaris .Polaris-Button--toneCritical:is(.Polaris-Button--variantSecondary, .Polaris-Button--variantTertiary, .Polaris-Button--variantPlain){\n  --pc-button-color:var(--p-color-text-critical);\n  --pc-button-color_hover:var(--p-color-text-critical-hover);\n  --pc-button-color_active:var(--p-color-text-critical-active);\n  --pc-button-icon-fill:currentColor;\n}\n\n.sca-polaris .Polaris-Button--toneSuccess:is(.Polaris-Button--variantPrimary){\n  --pc-button-box-shadow:var(--p-shadow-button-primary-success);\n  --pc-button-box-shadow_active:var(--p-shadow-button-primary-success-inset);\n  --pc-button-bg:var(--p-color-bg-fill-success);\n  --pc-button-bg_hover:var(--p-color-bg-fill-success-hover);\n  --pc-button-bg_active:var(--p-color-bg-fill-success-active);\n  --pc-button-bg_pressed:var(--p-color-bg-fill-success-selected);\n}\n\n.sca-polaris .Polaris-Button--toneCritical:is(.Polaris-Button--variantPrimary){\n  --pc-button-box-shadow:var(--p-shadow-button-primary-critical);\n  --pc-button-box-shadow_active:var(--p-shadow-button-primary-critical-inset);\n  --pc-button-bg:var(--p-color-bg-fill-critical);\n  --pc-button-bg_hover:var(--p-color-bg-fill-critical-hover);\n  --pc-button-bg_active:var(--p-color-bg-fill-critical-active);\n  --pc-button-bg_pressed:var(--p-color-bg-fill-critical-selected);\n}\n\n.sca-polaris .Polaris-Button--sizeMicro{\n  --pc-button-padding-block:var(--p-space-100);\n  --pc-button-padding-inline:var(--p-space-200);\n  min-height:var(--p-height-700);\n  min-width:var(--p-width-700);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Button--sizeMicro{\n    min-height:var(--p-height-600);\n    min-width:var(--p-width-600);\n}\n  }\n\n.sca-polaris .Polaris-Button--sizeSlim,\n.sca-polaris .Polaris-Button--sizeMedium{\n  --pc-button-padding-block:var(--p-space-150);\n  --pc-button-padding-inline:var(--p-space-300);\n  min-height:var(--p-height-800);\n  min-width:var(--p-width-800);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Button--sizeSlim,\n.sca-polaris .Polaris-Button--sizeMedium{\n    min-height:var(--p-height-700);\n    min-width:var(--p-width-700);\n}\n  }\n\n.sca-polaris .Polaris-Button--sizeLarge{\n  --pc-button-padding-block:var(--p-space-150);\n  --pc-button-padding-inline:var(--p-space-300);\n  min-height:var(--p-height-900);\n  min-width:var(--p-height-900);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Button--sizeLarge{\n    min-height:var(--p-height-800);\n    min-width:var(--p-width-800);\n}\n  }\n\n.sca-polaris .Polaris-Button--textAlignCenter{\n  justify-content:center;\n  text-align:center;\n}\n\n.sca-polaris .Polaris-Button--textAlignStart,\n.sca-polaris .Polaris-Button--textAlignLeft{\n  justify-content:start;\n  text-align:start;\n}\n\n.sca-polaris .Polaris-Button--textAlignEnd,\n.sca-polaris .Polaris-Button--textAlignRight{\n  justify-content:end;\n  text-align:end;\n}\n\n.sca-polaris .Polaris-Button--fullWidth{\n  width:100%;\n}\n\n.sca-polaris .Polaris-Button--iconOnly{\n  --pc-button-padding-block:var(--p-space-100);\n  --pc-button-padding-inline:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Button--iconOnly:is(.Polaris-Button--sizeLarge){\n  --pc-button-padding-block:var(--p-space-150);\n  --pc-button-padding-inline:var(--p-space-150);\n}\n\n.sca-polaris .Polaris-Button--iconOnly:is(.Polaris-Button--sizeMicro){\n  --pc-button-padding-block:var(--p-space-050);\n  --pc-button-padding-inline:var(--p-space-050);\n}\n\n.sca-polaris .Polaris-Button--iconOnly:is(.Polaris-Button--variantTertiary){\n  margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1);\n}\n\n.sca-polaris .Polaris-Button--iconOnly:is(.Polaris-Button--variantTertiary, .Polaris-Button--variantPlain):not(.Polaris-Button--toneCritical){\n  --pc-button-icon-fill:var(--p-color-icon-secondary);\n  --pc-button-icon-fill_hover:var(--p-color-icon-secondary-hover);\n  --pc-button-icon-fill_active:var(--p-color-icon-secondary-active);\n  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);\n}\n\n.sca-polaris .Polaris-Button--disclosure:is(.Polaris-Button--textAlignStart, .Polaris-Button--textAlignLeft){\n  justify-content:space-between;\n}\n\n.sca-polaris .Polaris-Button--hidden{\n  visibility:hidden;\n}\n\n.sca-polaris .Polaris-Button__Icon{\n  margin:calc(var(--p-space-050)*-1) 0;\n}\n\n.sca-polaris [data-buttongroup-variant='segmented']\n  > *:not(:first-child)\n  .Polaris-Button:is(.Polaris-Button--variantPrimary){\n  margin-left:calc(var(--p-space-025)*-1);\n}\n\n.sca-polaris [data-buttongroup-variant='segmented'] > *:not(:first-child) .Polaris-Button{\n  border-top-left-radius:var(--p-border-radius-0);\n  border-bottom-left-radius:var(--p-border-radius-0);\n}\n\n.sca-polaris [data-buttongroup-variant='segmented'] > *:not(:last-child) .Polaris-Button{\n  border-top-right-radius:var(--p-border-radius-0);\n  border-bottom-right-radius:var(--p-border-radius-0);\n}\n\n.sca-polaris [data-buttongroup-full-width='true'] .Polaris-Button{\n  width:100%;\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris [data-buttongroup-full-width='true'] .Polaris-Button{\n    white-space:nowrap;\n}\n  }\n\n.sca-polaris [data-buttongroup-connected-top='true'] > *:first-child .Polaris-Button{\n  border-top-left-radius:var(--p-border-radius-0);\n}\n\n.sca-polaris [data-buttongroup-connected-top='true'] > *:last-child .Polaris-Button{\n  border-top-right-radius:var(--p-border-radius-0);\n}\n\n\n.sca-polaris .Polaris-Box--listReset{\n  list-style-type:none;\n  margin-block-start:0;\n  margin-block-end:0;\n  outline:none;\n  padding-inline-start:0;\n}\n\n.sca-polaris .Polaris-Box{\n  --pc-box-padding-block-end-xs: initial;\n  --pc-box-padding-block-end-sm: initial;\n  --pc-box-padding-block-end-md: initial;\n  --pc-box-padding-block-end-lg: initial;\n  --pc-box-padding-block-end-xl: initial;\n  padding-block-end: var(--pc-box-padding-block-end-xs);\n  --pc-box-padding-block-start-xs: initial;\n  --pc-box-padding-block-start-sm: initial;\n  --pc-box-padding-block-start-md: initial;\n  --pc-box-padding-block-start-lg: initial;\n  --pc-box-padding-block-start-xl: initial;\n  padding-block-start: var(--pc-box-padding-block-start-xs);\n  --pc-box-padding-inline-start-xs: initial;\n  --pc-box-padding-inline-start-sm: initial;\n  --pc-box-padding-inline-start-md: initial;\n  --pc-box-padding-inline-start-lg: initial;\n  --pc-box-padding-inline-start-xl: initial;\n  padding-inline-start: var(--pc-box-padding-inline-start-xs);\n  --pc-box-padding-inline-end-xs: initial;\n  --pc-box-padding-inline-end-sm: initial;\n  --pc-box-padding-inline-end-md: initial;\n  --pc-box-padding-inline-end-lg: initial;\n  --pc-box-padding-inline-end-xl: initial;\n  padding-inline-end: var(--pc-box-padding-inline-end-xs);\n  --pc-box-shadow:initial;\n  --pc-box-background:initial;\n  --pc-box-border-radius:initial;\n  --pc-box-border-end-start-radius:var(--pc-box-border-radius);\n  --pc-box-border-end-end-radius:var(--pc-box-border-radius);\n  --pc-box-border-start-start-radius:var(--pc-box-border-radius);\n  --pc-box-border-start-end-radius:var(--pc-box-border-radius);\n  --pc-box-color:initial;\n  --pc-box-min-height:initial;\n  --pc-box-min-width:initial;\n  --pc-box-max-width:initial;\n  --pc-box-outline-color:initial;\n  --pc-box-outline-style:initial;\n  --pc-box-outline-width:initial;\n  --pc-box-overflow-x:initial;\n  --pc-box-overflow-y:initial;\n  --pc-box-width:initial;\n  --pc-box-border-style:initial;\n  --pc-box-border-color:initial;\n  --pc-box-border-width:0;\n  --pc-box-border-block-start-width:var(--pc-box-border-width);\n  --pc-box-border-block-end-width:var(--pc-box-border-width);\n  --pc-box-border-inline-start-width:var(--pc-box-border-width);\n  --pc-box-border-inline-end-width:var(--pc-box-border-width);\n  --pc-box-inset-block-start:initial;\n  --pc-box-inset-block-end:initial;\n  --pc-box-inset-inline-start:initial;\n  --pc-box-inset-inline-end:initial;\n  inset-block-start:var(--pc-box-inset-block-start);\n  inset-block-end:var(--pc-box-inset-block-end);\n  inset-inline-start:var(--pc-box-inset-inline-start);\n  inset-inline-end:var(--pc-box-inset-inline-end);\n  background-color:var(--pc-box-background);\n  box-shadow:var(--pc-box-shadow);\n  border-end-start-radius:var(--pc-box-border-end-start-radius);\n  border-end-end-radius:var(--pc-box-border-end-end-radius);\n  border-start-start-radius:var(--pc-box-border-start-start-radius);\n  border-start-end-radius:var(--pc-box-border-start-end-radius);\n  border-color:var(--pc-box-border-color);\n  border-style:var(--pc-box-border-style);\n  border-block-start-width:var(--pc-box-border-block-start-width);\n  border-block-end-width:var(--pc-box-border-block-end-width);\n  border-inline-start-width:var(--pc-box-border-inline-start-width);\n  border-inline-end-width:var(--pc-box-border-inline-end-width);\n  color:var(--pc-box-color);\n  min-height:var(--pc-box-min-height);\n  min-width:var(--pc-box-min-width);\n  max-width:var(--pc-box-max-width);\n  outline-color:var(--pc-box-outline-color);\n  outline-style:var(--pc-box-outline-style);\n  outline-width:var(--pc-box-outline-width);\n  overflow-x:var(--pc-box-overflow-x);\n  overflow-y:var(--pc-box-overflow-y);\n  width:var(--pc-box-width);\n  -webkit-overflow-scrolling:touch;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-end: var(\n        --pc-box-padding-block-end-sm,\n        var(--pc-box-padding-block-end-xs)\n      );\n}\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-end: var(\n        --pc-box-padding-block-end-md,\n        var(\n          --pc-box-padding-block-end-sm,\n          var(--pc-box-padding-block-end-xs)\n        )\n      );\n}\n}\n\n@container scr (min-width: 65em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-end: var(\n        --pc-box-padding-block-end-lg,\n        var(\n          --pc-box-padding-block-end-md,\n          var(\n            --pc-box-padding-block-end-sm,\n            var(--pc-box-padding-block-end-xs)\n          )\n        )\n      );\n}\n}\n\n@container scr (min-width: 90em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-end: var(\n        --pc-box-padding-block-end-xl,\n        var(\n          --pc-box-padding-block-end-lg,\n          var(\n            --pc-box-padding-block-end-md,\n            var(\n              --pc-box-padding-block-end-sm,\n              var(--pc-box-padding-block-end-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-start: var(\n        --pc-box-padding-block-start-sm,\n        var(--pc-box-padding-block-start-xs)\n      );\n}\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-start: var(\n        --pc-box-padding-block-start-md,\n        var(\n          --pc-box-padding-block-start-sm,\n          var(--pc-box-padding-block-start-xs)\n        )\n      );\n}\n}\n\n@container scr (min-width: 65em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-start: var(\n        --pc-box-padding-block-start-lg,\n        var(\n          --pc-box-padding-block-start-md,\n          var(\n            --pc-box-padding-block-start-sm,\n            var(--pc-box-padding-block-start-xs)\n          )\n        )\n      );\n}\n}\n\n@container scr (min-width: 90em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-start: var(\n        --pc-box-padding-block-start-xl,\n        var(\n          --pc-box-padding-block-start-lg,\n          var(\n            --pc-box-padding-block-start-md,\n            var(\n              --pc-box-padding-block-start-sm,\n              var(--pc-box-padding-block-start-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-start: var(\n        --pc-box-padding-inline-start-sm,\n        var(--pc-box-padding-inline-start-xs)\n      );\n}\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-start: var(\n        --pc-box-padding-inline-start-md,\n        var(\n          --pc-box-padding-inline-start-sm,\n          var(--pc-box-padding-inline-start-xs)\n        )\n      );\n}\n}\n\n@container scr (min-width: 65em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-start: var(\n        --pc-box-padding-inline-start-lg,\n        var(\n          --pc-box-padding-inline-start-md,\n          var(\n            --pc-box-padding-inline-start-sm,\n            var(--pc-box-padding-inline-start-xs)\n          )\n        )\n      );\n}\n}\n\n@container scr (min-width: 90em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-start: var(\n        --pc-box-padding-inline-start-xl,\n        var(\n          --pc-box-padding-inline-start-lg,\n          var(\n            --pc-box-padding-inline-start-md,\n            var(\n              --pc-box-padding-inline-start-sm,\n              var(--pc-box-padding-inline-start-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-end: var(\n        --pc-box-padding-inline-end-sm,\n        var(--pc-box-padding-inline-end-xs)\n      );\n}\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-end: var(\n        --pc-box-padding-inline-end-md,\n        var(\n          --pc-box-padding-inline-end-sm,\n          var(--pc-box-padding-inline-end-xs)\n        )\n      );\n}\n}\n\n@container scr (min-width: 65em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-end: var(\n        --pc-box-padding-inline-end-lg,\n        var(\n          --pc-box-padding-inline-end-md,\n          var(\n            --pc-box-padding-inline-end-sm,\n            var(--pc-box-padding-inline-end-xs)\n          )\n        )\n      );\n}\n}\n\n@container scr (min-width: 90em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-end: var(\n        --pc-box-padding-inline-end-xl,\n        var(\n          --pc-box-padding-inline-end-lg,\n          var(\n            --pc-box-padding-inline-end-md,\n            var(\n              --pc-box-padding-inline-end-sm,\n              var(--pc-box-padding-inline-end-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n.sca-polaris .Polaris-Box--visuallyHidden{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n@media print{\n\n.sca-polaris .Polaris-Box--printHidden{\n    display:none !important;\n}\n  }\n\n\n.sca-polaris .Polaris-ShadowBevel{\n  overflow:clip;\n  z-index:0;\n\n  --pc-shadow-bevel-z-index: initial;\n\n  --pc-shadow-bevel-box-shadow-xs: initial;\n\n  --pc-shadow-bevel-box-shadow-sm: initial;\n\n  --pc-shadow-bevel-box-shadow-md: initial;\n\n  --pc-shadow-bevel-box-shadow-lg: initial;\n\n  --pc-shadow-bevel-box-shadow-xl: initial;\n\n  --pc-shadow-bevel-box-shadow: var(--pc-shadow-bevel-box-shadow-xs);\n  --pc-shadow-bevel-border-radius-xs: initial;\n  --pc-shadow-bevel-border-radius-sm: initial;\n  --pc-shadow-bevel-border-radius-md: initial;\n  --pc-shadow-bevel-border-radius-lg: initial;\n  --pc-shadow-bevel-border-radius-xl: initial;\n  --pc-shadow-bevel-border-radius: var(--pc-shadow-bevel-border-radius-xs);\n  --pc-shadow-bevel-content-xs: initial;\n  --pc-shadow-bevel-content-sm: initial;\n  --pc-shadow-bevel-content-md: initial;\n  --pc-shadow-bevel-content-lg: initial;\n  --pc-shadow-bevel-content-xl: initial;\n  --pc-shadow-bevel-content: var(--pc-shadow-bevel-content-xs);\n\n  position: relative;\n\n  box-shadow: var(--pc-shadow-bevel-box-shadow);\n\n  border-radius: var(--pc-shadow-bevel-border-radius);\n}\n@container scr (min-width: 30.625em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-box-shadow: var(\n        --pc-shadow-bevel-box-shadow-sm,\n        var(--pc-shadow-bevel-box-shadow-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-box-shadow: var(\n        --pc-shadow-bevel-box-shadow-md,\n        var(\n          --pc-shadow-bevel-box-shadow-sm,\n          var(--pc-shadow-bevel-box-shadow-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-box-shadow: var(\n        --pc-shadow-bevel-box-shadow-lg,\n        var(\n          --pc-shadow-bevel-box-shadow-md,\n          var(\n            --pc-shadow-bevel-box-shadow-sm,\n            var(--pc-shadow-bevel-box-shadow-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-box-shadow: var(\n        --pc-shadow-bevel-box-shadow-xl,\n        var(\n          --pc-shadow-bevel-box-shadow-lg,\n          var(\n            --pc-shadow-bevel-box-shadow-md,\n            var(\n              --pc-shadow-bevel-box-shadow-sm,\n              var(--pc-shadow-bevel-box-shadow-xs)\n            )\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 30.625em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-border-radius: var(\n        --pc-shadow-bevel-border-radius-sm,\n        var(--pc-shadow-bevel-border-radius-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-border-radius: var(\n        --pc-shadow-bevel-border-radius-md,\n        var(\n          --pc-shadow-bevel-border-radius-sm,\n          var(--pc-shadow-bevel-border-radius-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-border-radius: var(\n        --pc-shadow-bevel-border-radius-lg,\n        var(\n          --pc-shadow-bevel-border-radius-md,\n          var(\n            --pc-shadow-bevel-border-radius-sm,\n            var(--pc-shadow-bevel-border-radius-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-border-radius: var(\n        --pc-shadow-bevel-border-radius-xl,\n        var(\n          --pc-shadow-bevel-border-radius-lg,\n          var(\n            --pc-shadow-bevel-border-radius-md,\n            var(\n              --pc-shadow-bevel-border-radius-sm,\n              var(--pc-shadow-bevel-border-radius-xs)\n            )\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 30.625em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-content: var(\n        --pc-shadow-bevel-content-sm,\n        var(--pc-shadow-bevel-content-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-content: var(\n        --pc-shadow-bevel-content-md,\n        var(\n          --pc-shadow-bevel-content-sm,\n          var(--pc-shadow-bevel-content-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-content: var(\n        --pc-shadow-bevel-content-lg,\n        var(\n          --pc-shadow-bevel-content-md,\n          var(\n            --pc-shadow-bevel-content-sm,\n            var(--pc-shadow-bevel-content-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-content: var(\n        --pc-shadow-bevel-content-xl,\n        var(\n          --pc-shadow-bevel-content-lg,\n          var(\n            --pc-shadow-bevel-content-md,\n            var(\n              --pc-shadow-bevel-content-sm,\n              var(--pc-shadow-bevel-content-xs)\n            )\n          )\n        )\n      );\n}\n}\n.sca-polaris .Polaris-ShadowBevel::before {\n  content: var(--pc-shadow-bevel-content);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: var(--pc-shadow-bevel-z-index);\n  box-shadow: var(--p-shadow-bevel-100);\n  border-radius: var(--pc-shadow-bevel-border-radius);\n  pointer-events: none;\n  mix-blend-mode: luminosity;\n}\n\n\n.sca-polaris .Polaris-InlineStack{\n  --pc-inline-stack-gap-xs: initial;\n  --pc-inline-stack-gap-sm: initial;\n  --pc-inline-stack-gap-md: initial;\n  --pc-inline-stack-gap-lg: initial;\n  --pc-inline-stack-gap-xl: initial;\n  gap: var(--pc-inline-stack-gap-xs);\n  --pc-inline-stack-flex-direction-xs: initial;\n  --pc-inline-stack-flex-direction-sm: initial;\n  --pc-inline-stack-flex-direction-md: initial;\n  --pc-inline-stack-flex-direction-lg: initial;\n  --pc-inline-stack-flex-direction-xl: initial;\n  flex-direction: var(--pc-inline-stack-flex-direction-xs);\n  display:flex;\n  flex-wrap:var(--pc-inline-stack-wrap);\n  align-items:var(--pc-inline-stack-block-align);\n  justify-content:var(--pc-inline-stack-align);\n}\n@container scr (min-width: 30.625em) {\n  .sca-polaris .Polaris-InlineStack{\n    gap: var(\n        --pc-inline-stack-gap-sm,\n        var(--pc-inline-stack-gap-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n  .sca-polaris .Polaris-InlineStack{\n    gap: var(\n        --pc-inline-stack-gap-md,\n        var(\n          --pc-inline-stack-gap-sm,\n          var(--pc-inline-stack-gap-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n  .sca-polaris .Polaris-InlineStack{\n    gap: var(\n        --pc-inline-stack-gap-lg,\n        var(\n          --pc-inline-stack-gap-md,\n          var(\n            --pc-inline-stack-gap-sm,\n            var(--pc-inline-stack-gap-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n  .sca-polaris .Polaris-InlineStack{\n    gap: var(\n        --pc-inline-stack-gap-xl,\n        var(\n          --pc-inline-stack-gap-lg,\n          var(\n            --pc-inline-stack-gap-md,\n            var(\n              --pc-inline-stack-gap-sm,\n              var(--pc-inline-stack-gap-xs)\n            )\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 30.625em) {\n  .sca-polaris .Polaris-InlineStack{\n    flex-direction: var(\n        --pc-inline-stack-flex-direction-sm,\n        var(--pc-inline-stack-flex-direction-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n  .sca-polaris .Polaris-InlineStack{\n    flex-direction: var(\n        --pc-inline-stack-flex-direction-md,\n        var(\n          --pc-inline-stack-flex-direction-sm,\n          var(--pc-inline-stack-flex-direction-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n  .sca-polaris .Polaris-InlineStack{\n    flex-direction: var(\n        --pc-inline-stack-flex-direction-lg,\n        var(\n          --pc-inline-stack-flex-direction-md,\n          var(\n            --pc-inline-stack-flex-direction-sm,\n            var(--pc-inline-stack-flex-direction-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n  .sca-polaris .Polaris-InlineStack{\n    flex-direction: var(\n        --pc-inline-stack-flex-direction-xl,\n        var(\n          --pc-inline-stack-flex-direction-lg,\n          var(\n            --pc-inline-stack-flex-direction-md,\n            var(\n              --pc-inline-stack-flex-direction-sm,\n              var(--pc-inline-stack-flex-direction-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n\n.sca-polaris .Polaris-BlockStack{\n  --pc-block-stack-gap-xs: initial;\n  --pc-block-stack-gap-sm: initial;\n  --pc-block-stack-gap-md: initial;\n  --pc-block-stack-gap-lg: initial;\n  --pc-block-stack-gap-xl: initial;\n  gap: var(--pc-block-stack-gap-xs);\n  --pc-block-stack-align:initial;\n  --pc-block-stack-inline-align:initial;\n  --pc-block-stack-order:initial;\n  display:flex;\n  flex-direction:var(--pc-block-stack-order);\n  align-items:var(--pc-block-stack-inline-align);\n  justify-content:var(--pc-block-stack-align);\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-BlockStack{\n    gap: var(\n        --pc-block-stack-gap-sm,\n        var(--pc-block-stack-gap-xs)\n      );\n}\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-BlockStack{\n    gap: var(\n        --pc-block-stack-gap-md,\n        var(\n          --pc-block-stack-gap-sm,\n          var(--pc-block-stack-gap-xs)\n        )\n      );\n}\n}\n\n@container scr (min-width: 65em) {\n\n.sca-polaris .Polaris-BlockStack{\n    gap: var(\n        --pc-block-stack-gap-lg,\n        var(\n          --pc-block-stack-gap-md,\n          var(\n            --pc-block-stack-gap-sm,\n            var(--pc-block-stack-gap-xs)\n          )\n        )\n      );\n}\n}\n\n@container scr (min-width: 90em) {\n\n.sca-polaris .Polaris-BlockStack{\n    gap: var(\n        --pc-block-stack-gap-xl,\n        var(\n          --pc-block-stack-gap-lg,\n          var(\n            --pc-block-stack-gap-md,\n            var(\n              --pc-block-stack-gap-sm,\n              var(--pc-block-stack-gap-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n.sca-polaris .Polaris-BlockStack--listReset{\n  list-style-type:none;\n  margin-block-start:0;\n  margin-block-end:0;\n  padding-inline-start:0;\n}\n\n.sca-polaris .Polaris-BlockStack--fieldsetReset{\n  border:none;\n  margin:0;\n  padding:0;\n}\n\n\n.sca-polaris .Polaris-Label{\n  -webkit-tap-highlight-color:transparent;\n}\n\n.sca-polaris .Polaris-Label--hidden{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n.sca-polaris .Polaris-Label__Text{\n  display:block;\n  flex:1 1 auto;\n  color:currentColor;\n  -webkit-tap-highlight-color:transparent;\n}\n\n.sca-polaris .Polaris-Label__RequiredIndicator::after{\n  content:'*';\n  color:var(--p-color-text-critical);\n  margin-left:var(--p-space-100);\n}\n\n\n.sca-polaris .Polaris-Labelled--hidden > .Polaris-Labelled__LabelWrapper{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n.sca-polaris .Polaris-Labelled--disabled > .Polaris-Labelled__LabelWrapper{\n  color:var(--p-color-text-disabled);\n}\n\n.sca-polaris .Polaris-Labelled--disabled > .Polaris-Labelled__HelpText > span{\n  color:var(--p-color-text-disabled);\n}\n\n.sca-polaris .Polaris-Labelled--readOnly > .Polaris-Labelled__LabelWrapper{\n  color:var(--p-color-text-secondary);\n}\n\n.sca-polaris .Polaris-Labelled__LabelWrapper{\n  word-wrap:break-word;\n  word-break:break-word;\n  overflow-wrap:break-word;\n  display:flex;\n  flex-wrap:wrap;\n  justify-content:space-between;\n  align-items:baseline;\n  margin-bottom:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Labelled__HelpText{\n  margin-top:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Labelled__Error{\n  word-wrap:break-word;\n  word-break:break-word;\n  overflow-wrap:break-word;\n  margin-top:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Labelled__Action{\n  flex:0 0 auto;\n}\n\n\n.sca-polaris .Polaris-Connected{\n  --pc-connected-item:10;\n  --pc-connected-primary:20;\n  --pc-connected-focused:30;\n  position:relative;\n  display:flex;\n  align-items:center;\n}\n\n.sca-polaris .Polaris-Connected__Item{\n  position:relative;\n  z-index:var(--pc-connected-item);\n  flex:0 0 auto;\n}\n\n.sca-polaris .Polaris-Connected__Item:not(:first-child){\n    margin-left:var(--p-space-100);\n  }\n\n.sca-polaris .Polaris-Connected__Item--primary{\n  z-index:var(--pc-connected-primary);\n  flex:1 1 auto;\n}\n\n.sca-polaris .Polaris-Connected__Item--focused{\n  z-index:var(--pc-connected-focused);\n}\n\n\n.sca-polaris .Polaris-TextField{\n  --pc-text-field-contents:20;\n  --pc-text-field-backdrop:10;\n  font-size:var(--p-font-size-325);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-500);\n  border:none;\n  letter-spacing:initial;\n  position:relative;\n  display:flex;\n  align-items:center;\n  color:var(--p-color-text);\n  cursor:text;\n}\n\n.sca-polaris .Polaris-TextField svg{\n    fill:var(--p-color-icon-secondary);\n  }\n\n.sca-polaris .Polaris-TextField:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly)\n    > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop{\n      border-color:var(--p-color-input-border-hover);\n      background-color:var(--p-color-input-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-TextField--multiline{\n  padding:0;\n  flex-wrap:wrap;\n}\n\n.sca-polaris .Polaris-TextField--multiline > .Polaris-TextField__Input{\n    overflow:auto;\n    padding-left:var(--p-space-300);\n    padding-right:var(--p-space-300);\n    resize:none;\n  }\n\n.sca-polaris .Polaris-TextField--hasValue{\n  color:var(--p-color-text);\n}\n\n.sca-polaris .Polaris-TextField--focus > .Polaris-TextField__Input,\n.sca-polaris .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper,\n.sca-polaris .Polaris-TextField:focus-within > .Polaris-TextField__Input,\n.sca-polaris .Polaris-TextField__Input:focus-visible{\n  outline:none;\n}\n\n.sca-polaris .Polaris-TextField--focus > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop, .sca-polaris .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop, .sca-polaris .Polaris-TextField:focus-within > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop, .sca-polaris .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{\n    border-color:var(--p-color-input-border-active);\n    border-width:var(--p-border-width-025);\n    background-color:var(--p-color-input-bg-surface-active);\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n    outline-offset:var(--p-space-025);\n  }\n\n.sca-polaris .Polaris-TextField--focus > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .sca-polaris .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop::after, .sca-polaris .Polaris-TextField:focus-within > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .sca-polaris .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop::after{\n    content:none;\n  }\n\n.sca-polaris .Polaris-TextField--error .Polaris-TextField__Input:hover ~ .Polaris-TextField__Backdrop,\n  .sca-polaris .Polaris-TextField--error .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{\n    border-color:var(--p-color-border-critical-secondary);\n    background-color:var(--p-color-bg-surface-critical);\n  }\n\n.sca-polaris .Polaris-TextField--error .Polaris-TextField__Input:active ~ .Polaris-TextField__Backdrop,\n  .sca-polaris .Polaris-TextField--error .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{\n    border-width:var(--p-border-width-025);\n  }\n\n.sca-polaris .Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop,\n  .sca-polaris .Polaris-TextField--error > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop{\n    background-color:var(--p-color-bg-surface-critical);\n    border-color:var(--p-color-border-critical-secondary);\n  }\n\n.sca-polaris .Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .sca-polaris .Polaris-TextField--error > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop::after{\n      border-color:var(--p-color-border-focus);\n    }\n\n.sca-polaris .Polaris-TextField--readOnly.Polaris-TextField--readOnly > .Polaris-TextField__Input{\n    color:var(--p-color-text-secondary);\n  }\n\n.sca-polaris .Polaris-TextField--readOnly.Polaris-TextField--readOnly > .Polaris-TextField__Backdrop{\n    background-color:var(--p-color-bg-surface-disabled);\n    border-color:transparent;\n  }\n\n.sca-polaris .Polaris-TextField--readOnly.Polaris-TextField--readOnly.Polaris-TextField--focus > .Polaris-TextField__Backdrop{\n      background-color:var(--p-color-bg-surface-disabled);\n      border-color:transparent;\n    }\n\n.sca-polaris .Polaris-TextField--toneMagic .Polaris-TextField__Prefix,\n  .sca-polaris .Polaris-TextField--toneMagic .Polaris-TextField__Suffix{\n    color:var(--p-color-text-magic-secondary);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic > .Polaris-TextField__Input{\n    color:var(--p-color-text-magic);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic > .Polaris-TextField__Backdrop{\n    background-color:var(--p-color-bg-surface-magic);\n    border-color:var(--p-color-border-magic-secondary);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic svg{\n    fill:var(--p-color-icon-magic);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly)\n    > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop{\n      background-color:var(--p-color-bg-surface-magic-hover);\n      border-color:var(--p-color-border-magic-secondary-hover);\n    }\n\n.sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField--focus > .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField:focus-within > .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField__Input:focus-visible{\n    color:var(--p-color-text);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField--focus .Polaris-TextField__Prefix,\n    .sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField--focus .Polaris-TextField__Suffix{\n      color:var(--p-color-text-secondary);\n    }\n\n.sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField--focus svg{\n      fill:var(--p-color-icon-secondary);\n    }\n\n.sca-polaris .Polaris-TextField--disabled{\n  color:var(--p-color-text-disabled);\n  cursor:initial;\n}\n\n.sca-polaris .Polaris-TextField--disabled > .Polaris-TextField__Backdrop{\n    border:none;\n    background-color:var(--p-color-bg-surface-disabled);\n  }\n\n.sca-polaris .Polaris-TextField--disabled svg{\n    fill:var(--p-color-icon-disabled);\n  }\n\n.sca-polaris .Polaris-TextField__InputAndSuffixWrapper{\n  display:flex;\n  align-items:center;\n  flex:1 1;\n  width:100%;\n}\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapper{\n  position:relative;\n  display:inline-grid;\n  align-items:center;\n}\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapper::after{\n    content:attr(data-auto-size-value);\n    visibility:hidden;\n    white-space:pre-wrap;\n    max-height:var(--pg-control-height);\n  }\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapper::after,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapper input,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapper textarea{\n    width:auto;\n    min-width:1em;\n    grid-area:1 / 2;\n    padding:0 var(--p-space-300);\n    font-size:var(--p-font-size-400);\n    font-weight:var(--p-font-weight-regular);\n    line-height:var(--p-font-line-height-600);\n  }\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapper::after,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapper input,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapper textarea{\n      font-size:var(--p-font-size-325);\n      line-height:var(--p-font-line-height-500);\n  }\n    }\n\n.sca-polaris .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper .Polaris-TextField__AutoSizeWrapper::after,\n  .sca-polaris .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper input,\n  .sca-polaris .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper textarea{\n    padding-left:0;\n  }\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapperWithSuffix::after,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapperWithSuffix input,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapperWithSuffix textarea{\n    padding-right:0;\n  }\n\n.sca-polaris .Polaris-TextField__Input{\n  font-size:var(--p-font-size-400);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-600);\n  letter-spacing:initial;\n  position:relative;\n  z-index:var(--pc-text-field-contents);\n  display:flex;\n  flex:1 1;\n  width:100%;\n  min-width:0;\n  min-height:var(--pg-control-height);\n  padding:var(--p-space-150) var(--p-space-300);\n  background:none;\n  border:none;\n  font-family:var(--p-font-family-sans);\n  -webkit-appearance:none;\n          appearance:none;\n  caret-color:var(--p-color-text);\n  color:var(--p-color-text);\n  align-items:center;\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-TextField__Input{\n    font-size:var(--p-font-size-325);\n    line-height:var(--p-font-line-height-500);\n}\n  }\n\n.sca-polaris .Polaris-TextField__Prefix + .Polaris-TextField__Input{\n    padding-left:0;\n  }\n\n.sca-polaris .Polaris-TextField__Input:disabled{\n    opacity:1;\n    background:none;\n    color:var(--p-color-text-disabled);\n    -webkit-text-fill-color:var(--p-color-text-disabled);\n  }\n\n.sca-polaris .Polaris-TextField__Input:invalid{\n    box-shadow:none;\n  }\n\n.sca-polaris .Polaris-TextField__Input::placeholder{\n    color:var(--p-color-text-secondary);\n  }\n\n.sca-polaris .Polaris-TextField__Input[type='number']{\n    -webkit-appearance:textfield;\n            appearance:textfield;\n  }\n\n.sca-polaris .Polaris-TextField__Input[type='number']::-webkit-outer-spin-button,\n    .sca-polaris .Polaris-TextField__Input[type='number']::-webkit-inner-spin-button{\n      -webkit-appearance:none;\n              appearance:none;\n      margin:0;\n    }\n\n.sca-polaris .Polaris-TextField__Input:-webkit-autofill{\n    border-radius:var(--p-border-radius-100);\n  }\n\n.sca-polaris .Polaris-TextField__Input.Polaris-TextField--suggestion::selection{\n      color:var(--p-color-text-disabled);\n      background:transparent;\n    }\n\n.sca-polaris .Polaris-TextField--borderless .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--borderless .Polaris-TextField__Backdrop{\n    border:none;\n    min-height:var(--p-space-800);\n  }\n\n.sca-polaris .Polaris-TextField--slim .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--slim .Polaris-TextField__Backdrop{\n    min-height:1.75rem;\n    padding-block:var(--p-space-050);\n  }\n\n.sca-polaris .Polaris-TextField--slim.Polaris-TextField--borderless.Polaris-TextField--slim.Polaris-TextField--borderless .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--slim.Polaris-TextField--borderless.Polaris-TextField--slim.Polaris-TextField--borderless .Polaris-TextField__Backdrop{\n    outline-offset:0;\n  }\n\n.sca-polaris .Polaris-TextField__Input--hasClearButton[type='search']::-webkit-search-cancel-button{\n      -webkit-appearance:none;\n              appearance:none;\n    }\n\n.sca-polaris .Polaris-TextField__Input--suffixed{\n  padding-right:0;\n}\n\n.sca-polaris .Polaris-TextField__Input--alignRight{\n  text-align:right;\n}\n\n.sca-polaris .Polaris-TextField__Input--alignLeft{\n  text-align:left;\n}\n\n.sca-polaris .Polaris-TextField__Input--alignCenter{\n  text-align:center;\n}\n\n.sca-polaris .Polaris-TextField__Input--autoSize{\n  flex:initial;\n  width:auto;\n}\n\n.sca-polaris .Polaris-TextField__Backdrop{\n  position: relative;\n  position:absolute;\n  z-index:var(--pc-text-field-backdrop);\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  background-color:var(--p-color-input-bg-surface);\n  border:var(--p-border-width-0165) solid var(--p-color-input-border);\n  border-top-color:#898f94;\n  border-radius:var(--p-border-radius-200);\n  pointer-events:none;\n}\n\n.sca-polaris .Polaris-TextField__Backdrop::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: -0.125rem;\n  right: -0.125rem;\n  bottom: -0.125rem;\n  left: -0.125rem;\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-100);\n}\n\n.sca-polaris .Polaris-TextField__Prefix,\n.sca-polaris .Polaris-TextField__Suffix{\n  position:relative;\n  z-index:var(--pc-text-field-contents);\n  flex:0 0 auto;\n  color:var(--p-color-text-secondary);\n  -webkit-user-select:none;\n          user-select:none;\n}\n\n.sca-polaris .Polaris-TextField__Prefix{\n  margin-left:var(--p-space-300);\n  margin-right:var(--p-space-150);\n}\n\n.sca-polaris .Polaris-TextField__PrefixIcon{\n  margin-left:var(--p-space-200);\n  margin-right:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-TextField__Suffix{\n  margin-left:var(--p-space-100);\n  margin-right:var(--p-space-300);\n}\n\n.sca-polaris .Polaris-TextField__Loading{\n  z-index:var(--pc-text-field-contents);\n  margin-right:var(--p-space-300);\n}\n\n.sca-polaris .Polaris-TextField__Loading svg{\n    display:block;\n  }\n\n.sca-polaris .Polaris-TextField__AlignFieldBottom{\n  align-self:flex-end;\n  width:100%;\n  padding-bottom:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-TextField__DummyInput{\n  font-size:var(--p-font-size-325);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-500);\n  border:none;\n  letter-spacing:initial;\n  padding:var(--pg-control-vertical-padding) var(--p-space-300);\n  word-wrap:break-word;\n  word-break:break-word;\n  overflow-wrap:break-word;\n  white-space:pre-wrap;\n}\n\n.sca-polaris .Polaris-TextField--monospaced{\n  font-family:var(--p-font-family-mono);\n}\n\n\n.sca-polaris .Polaris-Scrollable{\n  --pc-scrollable-shadow-size:var(--p-space-500);\n  --pc-scrollable-shadow-color:rgba(0, 0, 0, 0.15);\n  --pc-scrollable-shadow-bottom:0 var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-color);\n  --pc-scrollable-shadow-top:0 calc(var(--pc-scrollable-shadow-size)*-1) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-color);\n  --pc-scrollable-max-height:none;\n  -webkit-overflow-scrolling:touch;\n  position:relative;\n  max-height:var(--pc-scrollable-max-height);\n  overflow-x:hidden;\n  overflow-y:hidden;\n  isolation:isolate;\n}\n\n.sca-polaris .Polaris-Scrollable:focus{\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n    outline-offset:var(--p-space-050);\n  }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before,\n    .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::before,\n    .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::after,\n    .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{\n      content:'';\n      position:sticky;\n\n      left:0;\n      display:block;\n      pointer-events:none;\n      height:var(--p-space-0);\n      width:100%;\n      z-index:32;\n    }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before, .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::before{\n      top:0;\n    }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::after, .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{\n      bottom:0;\n    }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before{\n    box-shadow:var(--pc-scrollable-shadow-top);\n  }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{\n    box-shadow:var(--pc-scrollable-shadow-bottom);\n  }\n\n.sca-polaris .Polaris-Scrollable--horizontal{\n  overflow-x:auto;\n}\n\n.sca-polaris .Polaris-Scrollable--vertical{\n  overflow-y:auto;\n}\n\n.sca-polaris .Polaris-Scrollable--scrollbarWidthThin{\n  scrollbar-width:thin;\n}\n\n.sca-polaris .Polaris-Scrollable--scrollbarWidthNone{\n  scrollbar-width:none;\n}\n\n.sca-polaris .Polaris-Scrollable--scrollbarWidthAuto{\n  scrollbar-width:auto;\n}\n\n.sca-polaris .Polaris-Scrollable--scrollbarGutterStable{\n  scrollbar-gutter:stable;\n}\n\n.sca-polaris .Polaris-Scrollable__scrollbarGutterStableboth--edges{\n  scrollbar-gutter:stable both-edges;\n}\n\n\n.sca-polaris .Polaris-Badge{\n  --pc-badge-horizontal-padding:var(--p-space-200);\n  --pc-badge-vertical-padding:var(--p-space-050);\n  display:inline-flex;\n  align-items:center;\n  padding:var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);\n  background-color:var(--p-color-bg-fill-transparent-secondary);\n  border-radius:var(--p-border-radius-200);\n  color:var(--p-color-text-secondary);\n  font-weight:var(--p-font-weight-medium);\n}\n\n.sca-polaris .Polaris-Badge svg{\n    fill:var(--p-color-text-secondary);\n  }\n\n@media print{\n\n.sca-polaris .Polaris-Badge{\n    border:solid var(--p-border-width-025) var(--p-color-border);\n}\n  }\n\n.sca-polaris .Polaris-Badge--toneSuccess{\n  background-color:var(--p-color-bg-fill-success-secondary);\n  color:var(--p-color-text-success);\n}\n\n.sca-polaris .Polaris-Badge--toneSuccess svg{\n    fill:var(--p-color-icon-success);\n  }\n\n.sca-polaris .Polaris-Badge--toneWarning{\n  background-color:var(--p-color-bg-fill-warning-secondary);\n  color:var(--p-color-text-warning);\n}\n\n.sca-polaris .Polaris-Badge--toneWarning svg{\n    fill:var(--p-color-icon-warning);\n  }\n\n.sca-polaris .Polaris-Badge__Icon{\n  margin:calc(var(--p-space-050)*-1) 0 calc(var(--p-space-050)*-1) calc(var(--p-space-200)*-1);\n}\n\n.sca-polaris .Polaris-Badge__Icon svg{\n    display:inline-block;\n    vertical-align:top;\n  }\n\n.sca-polaris .Polaris-Badge__Icon + *{\n    margin-left:0;\n  }\n\n.sca-polaris .Polaris-Badge__PipContainer{\n  display:grid;\n  align-items:center;\n  margin-left:calc(var(--p-space-050)*-1);\n  margin-right:var(--p-space-100);\n}\n\n\n.sca-polaris .Polaris-Badge-Pip{\n  --pc-pip-size:var(--p-space-200);\n  --pc-pip-color:var(--p-color-text-secondary);\n  --pc-border-width:0.07813rem;\n  display:inline-block;\n  color:var(--pc-pip-color);\n  height:var(--pc-pip-size);\n  width:var(--pc-pip-size);\n  border:var(--p-border-width-050) solid var(--pc-pip-color);\n  flex-shrink:0;\n  border-radius:0.1875rem;\n  border-width:var(--pc-border-width);\n}\n\n.sca-polaris .Polaris-Badge-Pip--toneSuccess{\n  --pc-pip-color:var(--p-color-icon-success);\n}\n\n.sca-polaris .Polaris-Badge-Pip--toneWarning{\n  --pc-pip-color:var(--p-color-icon-warning);\n}\n\n.sca-polaris .Polaris-Badge-Pip--progressIncomplete{\n  background:transparent;\n}\n\n.sca-polaris .Polaris-Badge-Pip--progressPartiallyComplete{\n  background:linear-gradient(\n    to top,\n    currentColor,\n    currentColor 50%,\n    transparent 50%,\n    transparent\n  );\n}\n\n.sca-polaris .Polaris-Badge-Pip--progressPartiallyComplete.Polaris-Badge-Pip{\n    background:none;\n    position:relative;\n    overflow:hidden;\n  }\n\n.sca-polaris .Polaris-Badge-Pip--progressPartiallyComplete.Polaris-Badge-Pip::after{\n      content:'';\n      position:absolute;\n      top:calc(var(--pc-border-width)*-1);\n      left:calc(var(--pc-border-width)*-1);\n      width:0.25rem;\n      height:0.5rem;\n      margin:0 0.1275rem;\n      border-right:var(--pc-border-width) solid currentColor;\n      border-left:var(--pc-border-width) solid currentColor;\n      font-size:0;\n      transform:rotate(-45deg);\n    }\n\n@media print{\n\n.sca-polaris .Polaris-Badge-Pip--progressPartiallyComplete{\n    background:none;\n    box-shadow:0 -6.375rem 0 -6.25rem currentColor inset;\n}\n  }\n\n.sca-polaris .Polaris-Badge-Pip--progressComplete{\n  background:currentColor;\n}\n\n@media print{\n\n.sca-polaris .Polaris-Badge-Pip--progressComplete{\n    background:none;\n    box-shadow:0 0 0 6.25rem currentColor inset;\n}\n  }\n\n.sca-polaris [data-polaris-tooltip-activator]{\n  outline:0;\n  position: relative;\n}\n\n.sca-polaris [data-polaris-tooltip-activator]::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: -0.0625rem;\n  right: -0.0625rem;\n  bottom: -0.0625rem;\n  left: -0.0625rem;\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-100);\n}\n\n.sca-polaris [data-polaris-tooltip-activator]:focus-visible::after {\n  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);\n  outline: var(--p-border-width-025) solid transparent;\n}\n\n\n.sca-polaris .Polaris-ActionMenu-SecondaryAction{\n  --pc-secondary-action-button-spacing:var(--p-space-300);\n}\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a,\n  .sca-polaris .Polaris-ActionMenu-SecondaryAction button{\n    position: relative;\n    --pc-button-padding-block:var(--p-space-100);\n    --pc-button-padding-inline:var(--p-space-300);\n    background:var(--p-color-bg-fill-tertiary) !important;\n    box-shadow:none !important;\n    border:none;\n    border-radius:var(--p-border-radius-200) !important;\n    min-height:1.75rem;\n  }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a::after, .sca-polaris .Polaris-ActionMenu-SecondaryAction button::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: -0.125rem;\n  right: -0.125rem;\n  bottom: -0.125rem;\n  left: -0.125rem;\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-100);\n}\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a:is(:hover, :focus), .sca-polaris .Polaris-ActionMenu-SecondaryAction button:is(:hover, :focus){\n      background-color:var(--p-color-bg-fill-tertiary-hover) !important;\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a:active,\n    .sca-polaris .Polaris-ActionMenu-SecondaryAction button:active,\n    .sca-polaris .Polaris-ActionMenu-SecondaryAction a[aria-expanded='true'],\n    .sca-polaris .Polaris-ActionMenu-SecondaryAction button[aria-expanded='true']{\n      background-color:var(--p-color-bg-fill-tertiary-active) !important;\n      box-shadow:var(--p-shadow-inset-200) !important;\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a:focus-visible, .sca-polaris .Polaris-ActionMenu-SecondaryAction button:focus-visible{\n      outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n      outline-offset:var(--p-space-050);\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a:focus-visible::after, .sca-polaris .Polaris-ActionMenu-SecondaryAction button:focus-visible::after{\n    content:none;\n  }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a[aria-disabled='true'], .sca-polaris .Polaris-ActionMenu-SecondaryAction button[aria-disabled='true']{\n      background-color:var(--p-color-bg-fill-disabled) !important;\n    }\n@container scr (min-width: 48em) {\n  .sca-polaris .Polaris-ActionMenu-SecondaryAction a,\n  .sca-polaris .Polaris-ActionMenu-SecondaryAction button{\n      border:none !important;\n      position: relative;\n  }\n      .sca-polaris .Polaris-ActionMenu-SecondaryAction a::after, .sca-polaris .Polaris-ActionMenu-SecondaryAction button::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    top: -0.0625rem;\n    right: -0.0625rem;\n    bottom: -0.0625rem;\n    left: -0.0625rem;\n    display: block;\n    pointer-events: none;\n    box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);\n    border-radius: var(--p-border-radius-100);\n  }\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a,\n    .sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button{\n      color:var(--p-color-text-critical) !important;\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a svg, .sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button svg{\n        fill:var(--p-color-text-critical);\n      }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a:is(:hover, :focus), .sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button:is(:hover, :focus){\n        background-color:var(--p-color-bg-fill-tertiary-hover) !important;\n      }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a:active, .sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button:active{\n        background-color:var(--p-color-bg-fill-tertiary-active) !important;\n      }\n\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayoutOuter{\n  position:relative;\n  width:100%;\n}\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayout{\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  justify-content:flex-end;\n  flex:1 1 auto;\n  gap:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayout > *{\n    flex:0 0 auto;\n  }\n\n.sca-polaris .Polaris-ActionMenu-Actions--actionsLayoutMeasuring{\n  visibility:hidden;\n  height:0;\n}\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayoutMeasurer{\n  position:absolute;\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  justify-content:flex-end;\n  flex:1 1 auto;\n  gap:0;\n  padding:0;\n  visibility:hidden;\n  height:0;\n}\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayoutMeasurer > *{\n    flex:0 0 auto;\n  }\n\n\n.sca-polaris .Polaris-ActionMenu{\n  width:100%;\n  display:flex;\n  justify-content:flex-end;\n}\n@media print{\n  .sca-polaris .Polaris-ActionMenu{\n    display:none !important;\n}\n  }\n\n\n.sca-polaris .Polaris-Choice{\n  --pc-choice-space-0:0rem;\n  --pc-choice-bleed-block-start-xs: initial;\n  --pc-choice-bleed-block-start-sm: initial;\n  --pc-choice-bleed-block-start-md: initial;\n  --pc-choice-bleed-block-start-lg: initial;\n  --pc-choice-bleed-block-start-xl: initial;\n  --pc-choice-bleed-block-start: var(--pc-choice-bleed-block-start-xs);\n  --pc-choice-bleed-block-end-xs: initial;\n  --pc-choice-bleed-block-end-sm: initial;\n  --pc-choice-bleed-block-end-md: initial;\n  --pc-choice-bleed-block-end-lg: initial;\n  --pc-choice-bleed-block-end-xl: initial;\n  --pc-choice-bleed-block-end: var(--pc-choice-bleed-block-end-xs);\n  --pc-choice-bleed-inline-start-xs: initial;\n  --pc-choice-bleed-inline-start-sm: initial;\n  --pc-choice-bleed-inline-start-md: initial;\n  --pc-choice-bleed-inline-start-lg: initial;\n  --pc-choice-bleed-inline-start-xl: initial;\n  --pc-choice-bleed-inline-start: var(--pc-choice-bleed-inline-start-xs);\n  --pc-choice-bleed-inline-end-xs: initial;\n  --pc-choice-bleed-inline-end-sm: initial;\n  --pc-choice-bleed-inline-end-md: initial;\n  --pc-choice-bleed-inline-end-lg: initial;\n  --pc-choice-bleed-inline-end-xl: initial;\n  --pc-choice-bleed-inline-end: var(--pc-choice-bleed-inline-end-xs);\n  --pc-choice-fill-xs: initial;\n  --pc-choice-fill-sm: initial;\n  --pc-choice-fill-md: initial;\n  --pc-choice-fill-lg: initial;\n  --pc-choice-fill-xl: initial;\n  --pc-choice-fill: var(--pc-choice-fill-xs);\n  display:inline-flex;\n  align-items:center;\n  justify-content:flex-start;\n  cursor:pointer;\n  padding-block-start:calc(var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + var(--p-space-100));\n  padding-block-end:calc(var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)) + var(--p-space-100));\n  padding-inline-start:var(\n    --pc-choice-bleed-inline-start,\n    var(--pc-choice-space-0)\n  );\n  padding-inline-end:var(\n    --pc-choice-bleed-inline-end,\n    var(--pc-choice-space-0)\n  );\n  margin-block-start:calc(var(--pc-choice-bleed-block-start, var(--pc-choice-space-0))*-1);\n  margin-block-end:calc(var(--pc-choice-bleed-block-end, var(--pc-choice-space-0))*-1);\n  margin-inline-start:calc(var(--pc-choice-bleed-inline-start, var(--pc-choice-space-0))*-1);\n  margin-inline-end:calc(var(--pc-choice-bleed-inline-end, var(--pc-choice-space-0))*-1);\n  inline-size:calc(var(--pc-choice-fill, auto) + var(--pc-choice-bleed-inline-start, var(--pc-choice-space-0)) + var(--pc-choice-bleed-inline-end, var(--pc-choice-space-0)));\n  block-size:calc(var(--pc-choice-fill, auto) + var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)));\n}\n@container scr (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-start: var(\n        --pc-choice-bleed-block-start-sm,\n        var(--pc-choice-bleed-block-start-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-start: var(\n        --pc-choice-bleed-block-start-md,\n        var(\n          --pc-choice-bleed-block-start-sm,\n          var(--pc-choice-bleed-block-start-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-start: var(\n        --pc-choice-bleed-block-start-lg,\n        var(\n          --pc-choice-bleed-block-start-md,\n          var(\n            --pc-choice-bleed-block-start-sm,\n            var(--pc-choice-bleed-block-start-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-start: var(\n        --pc-choice-bleed-block-start-xl,\n        var(\n          --pc-choice-bleed-block-start-lg,\n          var(\n            --pc-choice-bleed-block-start-md,\n            var(\n              --pc-choice-bleed-block-start-sm,\n              var(--pc-choice-bleed-block-start-xs)\n            )\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-end: var(\n        --pc-choice-bleed-block-end-sm,\n        var(--pc-choice-bleed-block-end-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-end: var(\n        --pc-choice-bleed-block-end-md,\n        var(\n          --pc-choice-bleed-block-end-sm,\n          var(--pc-choice-bleed-block-end-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-end: var(\n        --pc-choice-bleed-block-end-lg,\n        var(\n          --pc-choice-bleed-block-end-md,\n          var(\n            --pc-choice-bleed-block-end-sm,\n            var(--pc-choice-bleed-block-end-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-end: var(\n        --pc-choice-bleed-block-end-xl,\n        var(\n          --pc-choice-bleed-block-end-lg,\n          var(\n            --pc-choice-bleed-block-end-md,\n            var(\n              --pc-choice-bleed-block-end-sm,\n              var(--pc-choice-bleed-block-end-xs)\n            )\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-start: var(\n        --pc-choice-bleed-inline-start-sm,\n        var(--pc-choice-bleed-inline-start-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-start: var(\n        --pc-choice-bleed-inline-start-md,\n        var(\n          --pc-choice-bleed-inline-start-sm,\n          var(--pc-choice-bleed-inline-start-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-start: var(\n        --pc-choice-bleed-inline-start-lg,\n        var(\n          --pc-choice-bleed-inline-start-md,\n          var(\n            --pc-choice-bleed-inline-start-sm,\n            var(--pc-choice-bleed-inline-start-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-start: var(\n        --pc-choice-bleed-inline-start-xl,\n        var(\n          --pc-choice-bleed-inline-start-lg,\n          var(\n            --pc-choice-bleed-inline-start-md,\n            var(\n              --pc-choice-bleed-inline-start-sm,\n              var(--pc-choice-bleed-inline-start-xs)\n            )\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-end: var(\n        --pc-choice-bleed-inline-end-sm,\n        var(--pc-choice-bleed-inline-end-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-end: var(\n        --pc-choice-bleed-inline-end-md,\n        var(\n          --pc-choice-bleed-inline-end-sm,\n          var(--pc-choice-bleed-inline-end-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-end: var(\n        --pc-choice-bleed-inline-end-lg,\n        var(\n          --pc-choice-bleed-inline-end-md,\n          var(\n            --pc-choice-bleed-inline-end-sm,\n            var(--pc-choice-bleed-inline-end-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-end: var(\n        --pc-choice-bleed-inline-end-xl,\n        var(\n          --pc-choice-bleed-inline-end-lg,\n          var(\n            --pc-choice-bleed-inline-end-md,\n            var(\n              --pc-choice-bleed-inline-end-sm,\n              var(--pc-choice-bleed-inline-end-xs)\n            )\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-fill: var(\n        --pc-choice-fill-sm,\n        var(--pc-choice-fill-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-fill: var(\n        --pc-choice-fill-md,\n        var(\n          --pc-choice-fill-sm,\n          var(--pc-choice-fill-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-fill: var(\n        --pc-choice-fill-lg,\n        var(\n          --pc-choice-fill-md,\n          var(\n            --pc-choice-fill-sm,\n            var(--pc-choice-fill-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-fill: var(\n        --pc-choice-fill-xl,\n        var(\n          --pc-choice-fill-lg,\n          var(\n            --pc-choice-fill-md,\n            var(\n              --pc-choice-fill-sm,\n              var(--pc-choice-fill-xs)\n            )\n          )\n        )\n      );\n}\n}\n.sca-polaris .Polaris-Choice--labelHidden{\n  padding-block-start:var(\n    --pc-choice-bleed-block-start,\n    var(--pc-choice-space-0)\n  );\n  padding-block-end:var(--pc-choice-bleed-block-end, var(--pc-choice-space-0));\n}\n.sca-polaris .Polaris-Choice--labelHidden > .Polaris-Choice__Label{\n    position: absolute !important;\n    top: 0;\n    width: 0.0625rem !important;\n    height: 0.0625rem !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: hidden !important;\n    clip-path: inset(50%) !important;\n    border: 0 !important;\n    white-space: nowrap !important;\n  }\n.sca-polaris .Polaris-Choice--labelHidden .Polaris-Choice__Control{\n    margin-top:0;\n    margin-right:0;\n  }\n.sca-polaris .Polaris-Choice--disabled{\n  cursor:default;\n}\n.sca-polaris .Polaris-Choice--disabled > .Polaris-Choice__Label{\n    color:var(--p-color-text-disabled);\n  }\n.sca-polaris .Polaris-Choice--disabled > .Polaris-Choice__Label:hover{\n      cursor:default;\n    }\n@media (-ms-high-contrast: active){\n.sca-polaris .Polaris-Choice--disabled > .Polaris-Choice__Label{\n      color:grayText;\n  }\n    }\n.sca-polaris .Polaris-Choice--toneMagic > .Polaris-Choice__Label{\n  color:var(--p-color-text-magic);\n}\n.sca-polaris .Polaris-Choice--disabled + .Polaris-Choice__Descriptions{\n  color:var(--p-color-text-disabled);\n}\n.sca-polaris .Polaris-Choice__Control{\n  --pc-choice-size:1.125rem;\n  display:flex;\n  flex:0 0 auto;\n  align-items:stretch;\n  width:var(--pc-choice-size);\n  height:var(--pc-choice-size);\n  margin-right:var(--p-space-200);\n}\n@container scr (max-width: 47.9975em) {\n.sca-polaris .Polaris-Choice__Control{\n    --pc-choice-size:1.25rem;\n}\n  }\n.sca-polaris .Polaris-Choice__Control > *{\n    width:100%;\n  }\n.sca-polaris .Polaris-Choice__Label{\n  -webkit-tap-highlight-color:transparent;\n}\n.sca-polaris .Polaris-Choice__Label:hover{\n    cursor:pointer;\n  }\n.sca-polaris .Polaris-Choice__Descriptions{\n  --pc-choice-size:1.125rem;\n  padding-left:calc(var(--p-space-200) + var(--pc-choice-size));\n}\n@container scr (max-width: 47.9975em) {\n.sca-polaris .Polaris-Choice__Descriptions{\n    --pc-choice-size:1.25rem;\n}\n  }\n.sca-polaris .Polaris-Choice__HelpText{\n  margin-bottom:var(--p-space-100);\n}\n\n\n.sca-polaris [data-lock-scrolling]{\n  overflow-y:scroll;\n  margin:0;\n}\n.sca-polaris [data-lock-scrolling][data-lock-scrolling-hidden]{\n    overflow-y:hidden;\n  }\n.sca-polaris [data-lock-scrolling] [data-lock-scrolling-wrapper]{\n    overflow:hidden;\n    height:100%;\n  }\n\n\n.sca-polaris .Polaris-Backdrop{\n  position:fixed;\n  z-index:var(--p-z-index-10);\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  display:block;\n  background-color:rgba(0, 0, 0, 0.5);\n  animation:var(--p-motion-keyframes-fade-in) var(--p-motion-duration-200) 1 forwards;\n  opacity:0;\n  -webkit-backface-visibility:hidden;\n          backface-visibility:hidden;\n  will-change:opacity;\n}\n\n.sca-polaris .Polaris-Backdrop--transparent{\n  background-color:transparent;\n}\n\n.sca-polaris .Polaris-Backdrop--belowNavigation{\n  z-index:var(--p-z-index-7);\n}\n\n\n.sca-polaris .Polaris-Banner{\n  background-color:var(--p-color-bg-surface);\n  position:relative;\n  display:flex;\n}\n\n.sca-polaris .Polaris-Banner:focus{\n    outline:none;\n  }\n\n.sca-polaris .Polaris-Banner.Polaris-Banner--keyFocused{\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n  }\n\n.sca-polaris .Polaris-Banner--withinContentContainer{\n  border-radius:var(--p-border-radius-200);\n}\n\n.sca-polaris .Polaris-Banner--withinContentContainer + .Polaris-Banner{\n    margin-top:var(--p-space-200);\n  }\n\n.sca-polaris .Polaris-Banner--withinPage{\n  position: relative;\n  box-shadow: var(--p-shadow-200);\n  border-radius: var(--p-border-radius-0);\n}\n\n.sca-polaris .Polaris-Banner--withinPage::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 0;\n  box-shadow: var(--p-shadow-bevel-100);\n  border-radius: var(--p-border-radius-0);\n  pointer-events: none;\n  mix-blend-mode: luminosity;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Banner--withinPage{\n    position: relative;\n    box-shadow: var(--p-shadow-200);\n    border-radius: var(--p-border-radius-300);\n}\n    .sca-polaris .Polaris-Banner--withinPage::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 0;\n    box-shadow: var(--p-shadow-bevel-100);\n    border-radius: var(--p-border-radius-300);\n    pointer-events: none;\n    mix-blend-mode: luminosity;\n  }\n  }\n\n.sca-polaris .Polaris-Banner--withinPage + .Polaris-Banner{\n    margin-top:var(--p-space-400);\n  }\n\n.sca-polaris .Polaris-Banner__DismissIcon{\n  display:flex;\n}\n\n.sca-polaris .Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill svg,\n  .sca-polaris .Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill path{\n    fill:var(--p-color-text-success-on-bg-fill);\n  }\n\n.sca-polaris .Polaris-Banner__text--success.Polaris-Banner__text--success.Polaris-Banner__text--success svg,\n  .sca-polaris .Polaris-Banner__text--success.Polaris-Banner__text--success.Polaris-Banner__text--success path{\n    fill:var(--p-color-text-success);\n  }\n\n.sca-polaris .Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill svg,\n  .sca-polaris .Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill path{\n    fill:var(--p-color-text-warning-on-bg-fill);\n  }\n\n.sca-polaris .Polaris-Banner__text--warning.Polaris-Banner__text--warning.Polaris-Banner__text--warning svg,\n  .sca-polaris .Polaris-Banner__text--warning.Polaris-Banner__text--warning.Polaris-Banner__text--warning path{\n    fill:var(--p-color-text-warning);\n  }\n\n.sca-polaris .Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill svg,\n  .sca-polaris .Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill path{\n    fill:var(--p-color-text-critical-on-bg-fill);\n  }\n\n.sca-polaris .Polaris-Banner__text--critical.Polaris-Banner__text--critical.Polaris-Banner__text--critical svg,\n  .sca-polaris .Polaris-Banner__text--critical.Polaris-Banner__text--critical.Polaris-Banner__text--critical path{\n    fill:var(--p-color-text-critical);\n  }\n\n.sca-polaris .Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill svg,\n  .sca-polaris .Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill path{\n    fill:var(--p-color-text-info-on-bg-fill);\n  }\n\n.sca-polaris .Polaris-Banner__text--info.Polaris-Banner__text--info.Polaris-Banner__text--info svg,\n  .sca-polaris .Polaris-Banner__text--info.Polaris-Banner__text--info.Polaris-Banner__text--info path{\n    fill:var(--p-color-text-info);\n  }\n\n.sca-polaris .Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary svg,\n  .sca-polaris .Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary path{\n    fill:var(--p-color-icon-secondary);\n  }\n\n\n.sca-polaris .Polaris-Bleed{\n  --pc-bleed-margin-block-start-xs:initial;\n  --pc-bleed-margin-block-start-sm:var(--pc-bleed-margin-block-start-xs);\n  --pc-bleed-margin-block-start-md:var(--pc-bleed-margin-block-start-sm);\n  --pc-bleed-margin-block-start-lg:var(--pc-bleed-margin-block-start-md);\n  --pc-bleed-margin-block-start-xl:var(--pc-bleed-margin-block-start-lg);\n  --pc-bleed-margin-block-end-xs:initial;\n  --pc-bleed-margin-block-end-sm:var(--pc-bleed-margin-block-end-xs);\n  --pc-bleed-margin-block-end-md:var(--pc-bleed-margin-block-end-sm);\n  --pc-bleed-margin-block-end-lg:var(--pc-bleed-margin-block-end-md);\n  --pc-bleed-margin-block-end-xl:var(--pc-bleed-margin-block-end-lg);\n  --pc-bleed-margin-inline-start-xs:initial;\n  --pc-bleed-margin-inline-start-sm:var(--pc-bleed-margin-inline-start-xs);\n  --pc-bleed-margin-inline-start-md:var(--pc-bleed-margin-inline-start-sm);\n  --pc-bleed-margin-inline-start-lg:var(--pc-bleed-margin-inline-start-md);\n  --pc-bleed-margin-inline-start-xl:var(--pc-bleed-margin-inline-start-lg);\n  --pc-bleed-margin-inline-end-xs:initial;\n  --pc-bleed-margin-inline-end-sm:var(--pc-bleed-margin-inline-end-xs);\n  --pc-bleed-margin-inline-end-md:var(--pc-bleed-margin-inline-end-sm);\n  --pc-bleed-margin-inline-end-lg:var(--pc-bleed-margin-inline-end-md);\n  --pc-bleed-margin-inline-end-xl:var(--pc-bleed-margin-inline-end-lg);\n  margin-block-start:calc(var(--pc-bleed-margin-block-start-xs)*-1);\n  margin-block-end:calc(var(--pc-bleed-margin-block-end-xs)*-1);\n  margin-inline-start:calc(var(--pc-bleed-margin-inline-start-xs)*-1);\n  margin-inline-end:calc(var(--pc-bleed-margin-inline-end-xs)*-1);\n}\n@container scr (min-width: 30.625em) {\n  .sca-polaris .Polaris-Bleed{\n    margin-block-start:calc(var(--pc-bleed-margin-block-start-sm)*-1);\n    margin-block-end:calc(var(--pc-bleed-margin-block-end-sm)*-1);\n    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-sm)*-1);\n    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-sm)*-1);\n}\n  }\n@container scr (min-width: 48em) {\n  .sca-polaris .Polaris-Bleed{\n    margin-block-start:calc(var(--pc-bleed-margin-block-start-md)*-1);\n    margin-block-end:calc(var(--pc-bleed-margin-block-end-md)*-1);\n    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-md)*-1);\n    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-md)*-1);\n}\n  }\n@container scr (min-width: 65em) {\n  .sca-polaris .Polaris-Bleed{\n    margin-block-start:calc(var(--pc-bleed-margin-block-start-lg)*-1);\n    margin-block-end:calc(var(--pc-bleed-margin-block-end-lg)*-1);\n    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-lg)*-1);\n    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-lg)*-1);\n}\n  }\n@container scr (min-width: 90em) {\n  .sca-polaris .Polaris-Bleed{\n    margin-block-start:calc(var(--pc-bleed-margin-block-start-xl)*-1);\n    margin-block-end:calc(var(--pc-bleed-margin-block-end-xl)*-1);\n    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-xl)*-1);\n    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-xl)*-1);\n}\n  }\n\n\n.sca-polaris .Polaris-LegacyCard{\n  background-color:var(--p-color-bg-surface);\n  box-shadow:var(--p-shadow-300);\n  outline:var(--p-border-width-025) solid transparent;\n  overflow:clip;\n\n  position: relative;\n\n  box-shadow: var(--p-shadow-100);\n\n  border-radius: var(--p-border-radius-0);\n}\n\n.sca-polaris .Polaris-LegacyCard::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 101;\n  box-shadow: var(--p-shadow-bevel-100);\n  border-radius: var(--p-border-radius-0);\n  pointer-events: none;\n  mix-blend-mode: luminosity;\n}\n\n.sca-polaris .Polaris-LegacyCard + .Polaris-LegacyCard{\n    margin-top:var(--p-space-400);\n  }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard + .Polaris-LegacyCard{\n      margin-top:calc(var(--p-space-200)*-1);\n  }\n    }\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-LegacyCard{\n    border-radius:var(--p-border-radius-200);\n\n    position: relative;\n\n    box-shadow: var(--p-shadow-100);\n\n    border-radius: var(--p-border-radius-300);\n}\n\n    .sca-polaris .Polaris-LegacyCard::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 101;\n    box-shadow: var(--p-shadow-bevel-100);\n    border-radius: var(--p-border-radius-300);\n    pointer-events: none;\n    mix-blend-mode: luminosity;\n  }\n\n    .sca-polaris .Polaris-LegacyCard .Polaris-LegacyCard__Section:first-child{\n      border-top-left-radius:var(--p-border-radius-300);\n      border-top-right-radius:var(--p-border-radius-300);\n    }\n\n    .sca-polaris .Polaris-LegacyCard .Polaris-LegacyCard__Section:last-child{\n      border-bottom-left-radius:var(--p-border-radius-300);\n      border-bottom-right-radius:var(--p-border-radius-300);\n    }\n  }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard{\n    box-shadow:none;\n\n    position: relative;\n\n    box-shadow: none;\n\n    border-radius: var(--p-border-radius-0);\n\n    border: none;\n}\n\n    .sca-polaris .Polaris-LegacyCard::before {\n    content: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 0;\n    box-shadow: var(--p-shadow-bevel-100);\n    border-radius: var(--p-border-radius-0);\n    pointer-events: none;\n    mix-blend-mode: luminosity;\n  }\n  }\n\n.sca-polaris .Polaris-LegacyCard--subdued{\n  background-color:var(--p-color-bg-surface-secondary);\n}\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Section--hideOnPrint,\n.sca-polaris .Polaris-LegacyCard--hideOnPrint{\n    display:none !important;\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Header{\n  padding:var(--p-space-400) var(--p-space-400) 0;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-LegacyCard__Header{\n    padding:var(--p-space-200) var(--p-space-400) 0;\n}\n  }\n\n@media print and (min-width: 30.625em){\n  .sca-polaris .Polaris-LegacyCard__Header{\n    padding:var(--p-space-200) var(--p-space-400) 0;\n  }\n}\n\n.sca-polaris .Polaris-LegacyCard__Section{\n  padding:var(--p-space-200) var(--p-space-400);\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-LegacyCard__Section{\n    padding:var(--p-space-200) var(--p-space-400);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section + .Polaris-LegacyCard__Section{\n    border-top:0;\n  }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Section + .Polaris-LegacyCard__Section{\n      border-top:0;\n  }\n    }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Section{\n    padding-top:var(--p-space-100);\n    padding-bottom:var(--p-space-100);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--fullWidth{\n  padding:var(--p-space-400) 0;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-LegacyCard__Section--fullWidth{\n    padding:var(--p-space-400) 0;\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--flush{\n  padding:0;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-LegacyCard__Section--flush{\n    padding:0;\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued{\n  background-color:var(--p-color-bg-surface-secondary);\n  padding:var(--p-space-300) var(--p-space-400);\n}\n\n@media (-ms-high-contrast: active){\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued{\n    background-color:transparent;\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Header + .Polaris-LegacyCard__Section--subdued{\n    border-top:0;\n    margin-top:0;\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued:last-child{\n  padding:var(--p-space-400);\n}\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued:last-child{\n    padding-top:var(--p-space-200);\n    padding-bottom:var(--p-space-200);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__SectionHeader{\n  padding-bottom:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-LegacyCard__Section--fullWidth .Polaris-LegacyCard__SectionHeader{\n    padding-left:var(--p-space-400);\n    padding-right:var(--p-space-400);\n  }\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-LegacyCard__Section--fullWidth .Polaris-LegacyCard__SectionHeader{\n      padding-left:var(--p-space-400);\n      padding-right:var(--p-space-400);\n  }\n    }\n\n.sca-polaris .Polaris-LegacyCard__Subsection + .Polaris-LegacyCard__Subsection{\n    border-top:0;\n    margin-top:0;\n    padding-top:var(--p-space-200);\n  }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Subsection + .Polaris-LegacyCard__Subsection{\n      border-top:0;\n  }\n    }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Subsection{\n    padding-top:var(--p-space-100);\n    padding-bottom:var(--p-space-100);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Footer{\n  display:flex;\n  justify-content:flex-end;\n\n  padding:0 var(--p-space-400) var(--p-space-400);\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-LegacyCard__Footer{\n    padding:0 var(--p-space-400) var(--p-space-400);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Footer.Polaris-LegacyCard__LeftJustified{\n    justify-content:flex-start;\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued + .Polaris-LegacyCard__Footer{\n    padding:var(--p-space-400);\n    border-top:0;\n  }\n\n.sca-polaris .Polaris-LegacyCard__FirstSectionPadding{\n  padding-top:var(--p-space-400);\n}\n\n.sca-polaris .Polaris-LegacyCard__LastSectionPadding{\n  padding-bottom:var(--p-space-400);\n}\n\n\n.sca-polaris .Polaris-RadioButton{\n  position:relative;\n  margin:var(--p-space-025);\n}\n\n.sca-polaris .Polaris-RadioButton__Input{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n.sca-polaris .Polaris-RadioButton__Input:focus-visible + .Polaris-RadioButton__Backdrop{\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n    outline-offset:var(--p-space-025);\n  }\n\n.sca-polaris .Polaris-RadioButton__Input:focus-visible + .Polaris-RadioButton__Backdrop::after{\n      border-radius:var(--p-border-radius-full);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop,\n    \n    \n    \n    \n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop{\n      border-color:var(--p-color-border-emphasis);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop::before, .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop::before{\n        background-color:var(--p-color-text-brand-on-bg-fill);\n        transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out), transform var(--p-motion-duration-150) var(--p-motion-ease-out);\n        opacity:1;\n        transform:translate(-50%, -50%) scale(1);\n      }\n\n.sca-polaris .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop,\n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop{\n      background-color:var(--p-color-bg-fill-brand-selected);\n      border-color:var(--p-color-bg-fill-brand-selected);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop,\n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop{\n      background-color:var(--p-color-bg-fill-magic);\n      border-color:var(--p-color-bg-fill-magic);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop::before,\n      .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop::before{\n        background-color:var(--p-color-text-magic-on-bg-fill);\n      }\n\n.sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input + .Polaris-RadioButton__Backdrop{\n      cursor:pointer;\n      border-color:var(--p-color-input-border-hover);\n      background:var(--p-color-input-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-RadioButton__ChoiceLabel:active .Polaris-RadioButton__Input + .Polaris-RadioButton__Backdrop{\n      border-color:var(--p-color-bg-fill-brand);\n      border-width:var(--p-border-width-050);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop,\n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop{\n      cursor:default;\n      background-color:var(--p-color-radio-button-bg-surface-disabled);\n      border:none;\n    }\n\n.sca-polaris .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop::before, .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop::before{\n        background-color:var(--p-color-border-disabled);\n      }\n\n.sca-polaris .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop::before,\n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop::before{\n      background-color:var(--p-color-radio-button-icon-disabled);\n    }\n\n.sca-polaris .Polaris-RadioButton__Backdrop{\n  --pc-icon-size-small:0.5rem;\n  position:relative;\n  top:0;\n  left:0;\n  display:block;\n  width:100%;\n  height:100%;\n  border:var(--p-border-width-0165) solid var(--p-color-input-border);\n  border-radius:var(--p-border-radius-full);\n  background-color:var(--p-color-input-bg-surface);\n  transition:border-color var(--p-motion-duration-100) var(--p-motion-ease-out);\n}\n\n@container scr (max-width: 47.9975em) {\n\n.sca-polaris .Polaris-RadioButton__Backdrop{\n    --pc-icon-size-small:0.625rem;\n}\n  }\n\n.sca-polaris .Polaris-RadioButton__Backdrop::before{\n    content:'';\n    position:absolute;\n    top:50%;\n    left:50%;\n    opacity:0;\n    transform:translate(-50%, -50%) scale(0.1);\n    transform-origin:50% 50%;\n    height:var(--pc-icon-size-small);\n    width:var(--pc-icon-size-small);\n    background-color:var(--p-color-bg-fill-brand);\n    border-radius:var(--p-border-radius-full);\n    transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-out), transform var(--p-motion-duration-100) var(--p-motion-ease-out);\n  }\n\n@media (forced-colors: active){\n\n.sca-polaris .Polaris-RadioButton__Backdrop::before{\n      border:var(--p-border-width-100) solid transparent;\n  }\n    }\n\n.sca-polaris .Polaris-RadioButton__Backdrop{\n  position: relative;\n}\n\n.sca-polaris .Polaris-RadioButton__Backdrop::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--p-border-width-050)*-1 + -0.0625rem);\n  right: calc(var(--p-border-width-050)*-1 + -0.0625rem);\n  bottom: calc(var(--p-border-width-050)*-1 + -0.0625rem);\n  left: calc(var(--p-border-width-050)*-1 + -0.0625rem);\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 calc(var(--p-border-width-050)*-1 + -0.0625rem) var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-100);\n}\n\n.sca-polaris .Polaris-RadioButton__Backdrop::after{\n    border-radius:var(--p-border-radius-full);\n  }\n\n\n.sca-polaris .Polaris-Collapsible{\n  padding-top:0;\n  padding-bottom:0;\n  max-height:0;\n  overflow:hidden;\n  transition-property:max-height;\n  transition-duration:var(--p-motion-duration-100);\n  transition-timing-function:var(--p-motion-ease-out);\n}\n\n.sca-polaris .Polaris-Collapsible--isFullyClosed{\n  display:none;\n}\n\n@media print{\n\n.sca-polaris .Polaris-Collapsible--expandOnPrint{\n    max-height:none !important;\n    max-width:none !important;\n    overflow:visible;\n    display:block;\n}\n  }\n\n.sca-polaris .Polaris-Collapsible--inline{\n  max-height:none;\n  transition-property:max-width;\n}\n\n.sca-polaris .Polaris-Collapsible--inline.Polaris-Collapsible--animateIn{\n    max-width:0;\n  }\n\n\n.sca-polaris .Polaris-InlineGrid{\n  --pc-inline-grid-gap-xs: initial;\n  --pc-inline-grid-gap-sm: initial;\n  --pc-inline-grid-gap-md: initial;\n  --pc-inline-grid-gap-lg: initial;\n  --pc-inline-grid-gap-xl: initial;\n  gap: var(--pc-inline-grid-gap-xs);\n  --pc-inline-grid-grid-template-columns-xs: initial;\n  --pc-inline-grid-grid-template-columns-sm: initial;\n  --pc-inline-grid-grid-template-columns-md: initial;\n  --pc-inline-grid-grid-template-columns-lg: initial;\n  --pc-inline-grid-grid-template-columns-xl: initial;\n  grid-template-columns: var(--pc-inline-grid-grid-template-columns-xs);\n  --pc-inline-grid-align-items:initial;\n  display:grid;\n  align-items:var(--pc-inline-grid-align-items);\n}\n@container scr (min-width: 30.625em) {\n  .sca-polaris .Polaris-InlineGrid{\n    gap: var(\n        --pc-inline-grid-gap-sm,\n        var(--pc-inline-grid-gap-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n  .sca-polaris .Polaris-InlineGrid{\n    gap: var(\n        --pc-inline-grid-gap-md,\n        var(\n          --pc-inline-grid-gap-sm,\n          var(--pc-inline-grid-gap-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n  .sca-polaris .Polaris-InlineGrid{\n    gap: var(\n        --pc-inline-grid-gap-lg,\n        var(\n          --pc-inline-grid-gap-md,\n          var(\n            --pc-inline-grid-gap-sm,\n            var(--pc-inline-grid-gap-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n  .sca-polaris .Polaris-InlineGrid{\n    gap: var(\n        --pc-inline-grid-gap-xl,\n        var(\n          --pc-inline-grid-gap-lg,\n          var(\n            --pc-inline-grid-gap-md,\n            var(\n              --pc-inline-grid-gap-sm,\n              var(--pc-inline-grid-gap-xs)\n            )\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 30.625em) {\n  .sca-polaris .Polaris-InlineGrid{\n    grid-template-columns: var(\n        --pc-inline-grid-grid-template-columns-sm,\n        var(--pc-inline-grid-grid-template-columns-xs)\n      );\n}\n}\n@container scr (min-width: 48em) {\n  .sca-polaris .Polaris-InlineGrid{\n    grid-template-columns: var(\n        --pc-inline-grid-grid-template-columns-md,\n        var(\n          --pc-inline-grid-grid-template-columns-sm,\n          var(--pc-inline-grid-grid-template-columns-xs)\n        )\n      );\n}\n}\n@container scr (min-width: 65em) {\n  .sca-polaris .Polaris-InlineGrid{\n    grid-template-columns: var(\n        --pc-inline-grid-grid-template-columns-lg,\n        var(\n          --pc-inline-grid-grid-template-columns-md,\n          var(\n            --pc-inline-grid-grid-template-columns-sm,\n            var(--pc-inline-grid-grid-template-columns-xs)\n          )\n        )\n      );\n}\n}\n@container scr (min-width: 90em) {\n  .sca-polaris .Polaris-InlineGrid{\n    grid-template-columns: var(\n        --pc-inline-grid-grid-template-columns-xl,\n        var(\n          --pc-inline-grid-grid-template-columns-lg,\n          var(\n            --pc-inline-grid-grid-template-columns-md,\n            var(\n              --pc-inline-grid-grid-template-columns-sm,\n              var(--pc-inline-grid-grid-template-columns-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n\n.sca-polaris .Polaris-DataTable{\n  --pc-data-table-first-column-width:9.0625rem;\n  position:relative;\n  max-width:100vw;\n  background-color:var(--p-color-bg-surface);\n  border-radius:0;\n  overflow:hidden;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-DataTable{\n    border-radius:var(--p-border-radius-300);\n}\n  }\n\n.sca-polaris .Polaris-DataTable__Pip{\n  height:0.375rem;\n  width:0.375rem;\n  background:var(--p-color-icon-secondary);\n  border-radius:var(--p-border-radius-100);\n}\n\n.sca-polaris .Polaris-DataTable__Pip:not(:last-of-type){\n    margin-right:var(--p-space-100);\n  }\n\n.sca-polaris .Polaris-DataTable__Pip:first-of-type{\n    margin-left:var(--p-space-100);\n  }\n\n.sca-polaris .Polaris-DataTable__Pip:last-of-type{\n    margin-right:var(--p-space-100);\n  }\n\n.sca-polaris .Polaris-DataTable__Pip--visible{\n  background:var(--p-color-icon);\n}\n\n.sca-polaris .Polaris-DataTable__ScrollContainer{\n  overflow-x:auto;\n  -webkit-overflow-scrolling:touch;\n  scroll-behavior:smooth;\n  background-color:inherit;\n}\n\n.sca-polaris .Polaris-DataTable__Table{\n  width:100%;\n  border-spacing:0;\n}\n\n.sca-polaris .Polaris-DataTable__TableRow + .Polaris-DataTable__TableRow .Polaris-DataTable__Cell{\n    border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell{\n  font-weight:var(--p-font-weight-regular);\n  color:var(--p-color-text);\n  white-space:nowrap;\n  text-align:left;\n  transition:background-color var(--p-motion-duration-200) var(--p-motion-ease-in-out);\n\n  padding:var(--p-space-200) var(--p-space-150);\n}\n\n.sca-polaris .Polaris-DataTable__Cell:first-child{\n    padding-left:var(--p-space-300);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell:last-child{\n    padding-right:var(--p-space-300);\n  }\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell{\n    padding:var(--p-space-150);\n  }\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell:first-child{\n      padding-left:var(--p-space-300);\n    }\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell:last-child{\n      padding-right:var(--p-space-300);\n    }\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell{\n    background:none;\n  }\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell{\n    background:var(--p-color-bg-surface-secondary);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell--separate::after{\n  content:'';\n  position:absolute;\n  top:0;\n  right:0;\n  bottom:0;\n  border-right:var(--p-border-width-025) solid var(--p-color-border);\n}\n\n.sca-polaris .Polaris-DataTable__Cell--firstColumn{\n  text-align:left;\n  white-space:normal;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--numeric{\n  text-align:right;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--truncated{\n  white-space:nowrap;\n  overflow-x:hidden;\n  text-overflow:ellipsis;\n  max-width:var(--pc-data-table-first-column-width);\n}\n\n.sca-polaris .Polaris-DataTable__Cell--header{\n  font-weight:var(--p-font-weight-regular);\n  color:var(--p-color-text);\n  border-bottom:var(--p-border-width-025) solid var(--p-color-border);\n  border-top:0;\n  padding-top:var(--p-space-300);\n  padding-bottom:var(--p-space-300);\n}\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--header{\n    font-weight:var(--p-font-weight-regular);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell--verticalAlignTop{\n  vertical-align:top;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--verticalAlignBottom{\n  vertical-align:bottom;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--verticalAlignMiddle{\n  vertical-align:middle;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--verticalAlignBaseline{\n  vertical-align:baseline;\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-DataTable--hoverable .Polaris-DataTable__Cell--hovered{\n      background:var(--p-color-bg-surface-hover);\n  }\n    }\n\n.sca-polaris .Polaris-DataTable__Cell--sorted:hover svg{\n    fill:var(--p-color-icon);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell--total{\n  font-weight:var(--p-font-weight-semibold);\n  background:var(--p-color-bg-surface-secondary);\n  border-bottom:var(--p-border-width-025) solid var(--p-color-border);\n}\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotals .Polaris-DataTable__Cell--total{\n    background:var(--p-color-bg-surface-secondary);\n  }\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotals.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__Cell--total,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__Cell--total{\n    background:none;\n  }\n\n.sca-polaris .Polaris-DataTable--cellTotalFooter{\n  border-top:var(--p-border-width-025) solid var(--p-color-border);\n  border-bottom:none;\n}\n\n.sca-polaris .Polaris-DataTable__Footer{\n  padding:var(--p-space-200) var(--p-space-300);\n  background:var(--p-color-bg-surface-secondary);\n  color:var(--p-color-text-secondary);\n  text-align:center;\n  border-top:var(--p-border-width-025) solid var(--p-color-border);\n}\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Footer{\n    padding:var(--p-space-150) var(--p-space-300);\n  }\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__Footer{\n    background:none;\n  }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderWrapper{\n    position:relative;\n    top:0;\n    left:0;\n    right:0;\n    visibility:hidden;\n    z-index:var(--p-z-index-1);\n  }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner{\n    position:absolute;\n    display:flex;\n    flex-direction:column;\n    width:100%;\n    overflow:hidden;\n    border-spacing:0;\n  }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner:not(.Polaris-DataTable__StickyHeaderInner--isSticky){\n      top:-624.9375rem;\n      left:-624.9375rem;\n    }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable{\n    border-collapse:collapse;\n    display:block;\n    overflow-x:auto;\n    width:100%;\n    scrollbar-width:none;\n  }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable::-webkit-scrollbar{\n      -webkit-appearance:none;\n              appearance:none;\n      height:0;\n      width:0;\n    }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner--isSticky{\n    visibility:visible;\n    background-color:var(--p-color-bg-surface);\n    box-shadow:var(--p-shadow-100);\n  }\n\n.sca-polaris .Polaris-DataTable__TooltipContent{\n  display:block;\n  overflow:hidden;\n  white-space:nowrap;\n  text-overflow:ellipsis;\n}\n\n\n.sca-polaris .Polaris-Divider{\n  border:0;\n  margin:0;\n}\n\n\n.sca-polaris .Polaris-FormLayout__Item{\n  --pc-form-layout-item-min-size:13.75rem;\n  flex:1 1;\n}\n.sca-polaris .Polaris-FormLayout__Item.Polaris-FormLayout--grouped{\n    min-width:var(--pc-form-layout-item-min-size);\n  }\n@container scr (min-width: 0em) and (max-width: 30.6225em) {\n  .sca-polaris .Polaris-FormLayout__Item.Polaris-FormLayout--grouped{\n      min-width:100%;\n  }\n    }\n\n\n.sca-polaris .Polaris-Frame-Toast{\n  display:inline-flex;\n  max-width:31.25rem;\n  padding:var(--p-space-200) var(--p-space-300);\n  border-radius:var(--p-border-radius-100);\n  background:var(--p-color-bg-inverse);\n  color:var(--p-color-text-inverse);\n  margin-bottom:var(--p-space-500);\n  box-shadow:var(--p-shadow-500);\n\n  position: relative;\n\n  box-shadow: var(--p-shadow-400);\n\n  border-radius: var(--p-border-radius-200);\n}\n\n.sca-polaris .Polaris-Frame-Toast::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 0;\n  box-shadow: var(--p-shadow-bevel-100);\n  border-radius: var(--p-border-radius-200);\n  pointer-events: none;\n  mix-blend-mode: luminosity;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Frame-Toast{\n    padding:var(--p-space-300);\n}\n  }\n\n@media (forced-colors: active){\n\n.sca-polaris .Polaris-Frame-Toast{\n    border:var(--p-border-width-050) solid transparent;\n}\n  }\n\n.sca-polaris .Polaris-Frame-Toast__CloseButton{\n  display:flex;\n  align-self:center;\n  flex-direction:column;\n  justify-content:flex-start;\n  padding:0;\n  border:none;\n  -webkit-appearance:none;\n          appearance:none;\n  background:transparent;\n  color:var(--p-color-icon-inverse);\n  cursor:pointer;\n  margin-left:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-Frame-Toast__CloseButton:focus{\n    outline:none;\n  }\n\n.sca-polaris .Polaris-Frame-Toast__CloseButton:focus,\n  .sca-polaris .Polaris-Frame-Toast__CloseButton:hover{\n    color:var(--p-color-text-inverse);\n  }\n\n\n.sca-polaris{\n  --pc-toast-manager-translate-y-out:9.375rem;\n  --pc-toast-manager-translate-y-in:0;\n  --pc-toast-manager-scale-in:1;\n  --pc-toast-manager-scale-out:0.9;\n  --pc-toast-manager-blur-in:0;\n  --pc-toast-manager-transition-delay-in:0s;\n}\n\n.sca-polaris .Polaris-Frame-ToastManager{\n  position:fixed;\n  z-index:var(--p-z-index-12);\n  right:0;\n  left:0;\n  text-align:center;\n  bottom:var(--pc-frame-global-ribbon-height);\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n}\n\n.sca-polaris .Polaris-Frame-ToastManager__ToastWrapper{\n  position:absolute;\n  display:inline-flex;\n  opacity:0;\n  transition:transform var(--p-motion-duration-400) var(--p-motion-ease-out), opacity var(--p-motion-duration-400) var(--p-motion-ease-out);\n  transform:translateY(var(--pc-toast-manager-translate-y-out));\n}\n\n.sca-polaris .Polaris-Frame-ToastManager__ToastWrapper--enter,\n.sca-polaris .Polaris-Frame-ToastManager__ToastWrapper--exit{\n  transition-timing-function:var(--p-motion-ease-in);\n  transform:translateY(var(--pc-toast-manager-translate-y-out)) scale(var(--pc-toast-manager-scale-out));\n  opacity:0;\n}\n\n.sca-polaris .Polaris-Frame-ToastManager__ToastWrapper--exit{\n  transition-duration:var(--p-motion-duration-200);\n}\n\n.sca-polaris .Polaris-Frame-ToastManager--toastWrapperEnterDone{\n  transform:translateY(var(--pc-toast-manager-translate-y-in)) scale(var(--pc-toast-manager-scale-in));\n  filter:blur(var(--pc-toast-manager-blur-in));\n  opacity:1;\n  transition-delay:var(--pc-toast-manager-transition-delay-in);\n}\n\n.sca-polaris .Polaris-Frame-ToastManager--toastWrapperHoverable{\n  cursor:pointer;\n}\n\n\n.sca-polaris .Polaris-Modal-Dialog__Container{\n  position:fixed;\n  z-index:var(--p-z-index-11);\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  display:flex;\n  flex-direction:column;\n  justify-content:flex-end;\n  pointer-events:none;\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Modal-Dialog__Container{\n    justify-content:center;\n}\n  }\n\n.sca-polaris .Polaris-Modal-Dialog:focus{\n  outline:0;\n}\n\n.sca-polaris .Polaris-Modal-Dialog__Modal{\n  --pc-modal-dialog-vertical-spacing:3.75rem;\n  pointer-events:initial;\n  position:fixed;\n  right:0;\n  bottom:0;\n  left:0;\n  display:flex;\n  flex-direction:column;\n  width:100%;\n  max-height:calc(100vh - var(--pc-modal-dialog-vertical-spacing));\n  background:var(--p-color-bg-surface);\n  box-shadow:var(--p-shadow-600);\n  overflow:hidden;\n}\n\n@media (forced-colors: active){\n\n.sca-polaris .Polaris-Modal-Dialog__Modal{\n    border:var(--p-border-width-025) solid transparent;\n}\n  }\n\n@container scr (max-width: 47.9975em) {\n\n.sca-polaris .Polaris-Modal-Dialog__Modal{\n    bottom:0;\n    max-height:100%;\n}\n  }\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Modal-Dialog__Modal{\n    position:relative;\n    max-width:38.75rem;\n    margin:0 auto;\n    border-radius:var(--p-border-radius-400);\n}\n  }\n\n@container scr (min-width: 48em) and (min-height: 41.25em) {\n\n.sca-polaris .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--limitHeight{\n        max-height:37.5rem;\n  }\n      }\n\n.sca-polaris .Polaris-Modal-Dialog--animateFadeUp{\n  -webkit-backface-visibility:hidden;\n          backface-visibility:hidden;\n  will-change:transform, opacity;\n  opacity:1;\n  transform:translateY(0);\n  transition:transform var(--p-motion-ease) var(--p-motion-duration-200), opacity var(--p-motion-ease) var(--p-motion-duration-200);\n}\n\n.sca-polaris .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--entering,\n  .sca-polaris .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--exiting,\n  .sca-polaris .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--exited{\n    opacity:0;\n    transform:translateY(12.5rem);\n  }\n\n.sca-polaris .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--entered{\n    opacity:1;\n    transform:translateY(0);\n  }\n\n\n.sca-polaris .Polaris-Modal-Section{\n  flex:0 0 auto;\n}\n\n.sca-polaris .Polaris-Modal-Section:not(:last-of-type){\n    border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary);\n  }\n\n.sca-polaris .Polaris-Modal-Section--titleHidden{\n  padding-right:calc(var(--p-space-1200) + var(--p-space-100) + var(--p-space-100));\n}\n\n\n.sca-polaris .Polaris-Modal__Body,\n.sca-polaris .Polaris-Modal__NoScrollBody{\n  flex-grow:1;\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Modal__Body,\n.sca-polaris .Polaris-Modal__NoScrollBody{\n    flex-grow:unset;\n}\n  }\n\n\n.sca-polaris{\n  --item-min-height:var(--p-space-400);\n  --item-min-width:3.125rem;\n  --item-vertical-padding:var(--p-space-200);\n}\n\n@container scr (max-width: 47.9975em) {\n\n.sca-polaris .Polaris-Tabs__Outer{\n    max-width:100%;\n    overflow:hidden;\n    height:unset;\n    padding:0;\n}\n  }\n\n@container scr (max-width: 47.9975em) {\n\n.sca-polaris .Polaris-Tabs__Wrapper{\n    overflow:auto;\n    -webkit-overflow-scrolling:touch;\n    padding:var(--p-space-200);\n}\n  }\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Tabs__WrapperWithNewButton{\n    position:relative;\n    display:inline-flex;\n    padding-right:var(--p-space-800);\n}\n  }\n\n@container scr (max-width: 47.9975em) {\n\n.sca-polaris .Polaris-Tabs__ButtonWrapper{\n    display:flex;\n    align-items:center;\n    justify-content:flex-start;\n}\n  }\n\n.sca-polaris .Polaris-Tabs{\n  display:flex;\n  align-items:center;\n  justify-content:flex-start;\n  margin:0;\n  padding:0;\n  list-style:none;\n  gap:var(--p-space-100);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Tabs{\n    padding:0 var(--p-space-100);\n    flex-wrap:wrap;\n    align-items:stretch;\n}\n  }\n\n.sca-polaris .Polaris-Tabs__Tab{\n  position: relative;\n  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);\n  position:relative;\n  display:inline-flex;\n  justify-content:center;\n  align-items:center;\n  padding:var(--p-space-100) var(--p-space-300);\n  border:0;\n  border-radius:var(--p-border-radius-200);\n  background-color:transparent;\n  color:var(--p-color-text-brand);\n  cursor:pointer;\n  text-decoration:none;\n  width:100%;\n  height:var(--p-height-700);\n  min-width:100%;\n  margin-top:var(--p-space-025);\n  margin-bottom:calc(var(--p-space-025)*-1);\n  outline:none;\n  text-align:center;\n  white-space:nowrap;\n}\n\n.sca-polaris .Polaris-Tabs__Tab::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: -0.0625rem;\n  right: -0.0625rem;\n  bottom: -0.0625rem;\n  left: -0.0625rem;\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-200);\n}\n\n.sca-polaris .Polaris-Tabs__Tab[aria-disabled='true']{\n    cursor:default;\n    color:var(--p-color-text-disabled);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab[aria-disabled='true'] path{\n      fill:var(--p-color-icon-disabled);\n    }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):hover{\n    background-color:var(--p-color-bg-fill-transparent-hover);\n    color:var(--p-color-text-brand);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus{\n    background-color:var(--p-color-bg-surface-hover);\n    color:var(--p-color-text);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible{\n    background-color:transparent;\n    color:var(--p-color-text-brand);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible::after {\n  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);\n  outline: var(--p-border-width-025) solid transparent;\n}\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible:not(:active){\n    outline:0;\n  }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible:not(:active)::after {\n  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);\n  outline: var(--p-border-width-025) solid transparent;\n}\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):active{\n    background-color:var(--p-color-bg-surface-tertiary);\n    color:var(--p-color-text-brand);\n    z-index:var(--p-z-index-1);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab path{\n    fill:currentColor;\n  }\n\n.sca-polaris .Polaris-Tabs__Tab--active{\n  background:var(--p-color-bg-fill-transparent-selected);\n  border-radius:var(--p-border-radius-200);\n  color:var(--p-color-text);\n}\n\n.sca-polaris .Polaris-Tabs__Tab--active[aria-disabled='true']{\n    background:var(--p-color-bg-surface-disabled);\n    color:var(--p-color-text-disabled);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab--active:not([aria-disabled='true']):hover,\n  .sca-polaris .Polaris-Tabs__Tab--active:not([aria-disabled='true']):focus{\n    background-color:var(--p-color-bg-fill-transparent-hover);\n    color:var(--p-color-text-brand);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab--active:not([aria-disabled='true']):active{\n    background-color:var(--p-color-bg-fill-transparent-selected);\n    color:var(--p-color-text-brand);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab--hasActions{\n  padding-right:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-Tabs__Tab--iconOnly{\n  padding-left:var(--p-space-100);\n  padding-right:var(--p-space-100);\n  width:var(--p-space-800);\n}\n\n.sca-polaris .Polaris-Tabs--fillSpace .Polaris-Tabs__TabContainer{\n    flex:1 1 auto;\n  }\n\n.sca-polaris .Polaris-Tabs--fitted{\n  flex-wrap:nowrap;\n}\n\n.sca-polaris .Polaris-Tabs--fitted .Polaris-Tabs__TabContainer{\n    flex:1 1 100%;\n  }\n\n.sca-polaris .Polaris-Tabs__TabContainer{\n  display:flex;\n  margin:0;\n  padding:0;\n}\n\n.sca-polaris .Polaris-Tabs--titleWithIcon{\n  display:flex;\n}\n\n.sca-polaris .Polaris-Tabs__TabsMeasurer{\n  display:flex;\n  gap:0;\n  padding:0;\n  visibility:hidden;\n  height:0;\n}\n\n.sca-polaris .Polaris-Tabs__NewTab{\n  padding:0 var(--p-space-200) 0 var(--p-space-100);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Tabs__NewTab{\n    position:absolute;\n    right:0;\n    top:0;\n    padding:0;\n}\n  }\n\n.sca-polaris .Polaris-Tabs__ActionListWrap{\n  display:block;\n}\n\n\n.sca-polaris .Polaris-IndexTable{\n  --pc-index-table-translate-offset:2.1875rem;\n  --pc-index-table-table-header-offset:var(--pg-control-height);\n  --pc-index-table-cell:1;\n  --pc-index-table-sticky-cell:29;\n  --pc-index-table-bulk-actions:31;\n  --pc-index-table-loading-panel:31;\n  --pc-index-table-checkbox-offset-left:var(--p-space-300);\n  --pc-index-table-checkbox-offset-right:var(--p-space-200);\n  position:relative;\n  border-radius:0;\n  scrollbar-color:auto;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-IndexTable{\n    border-radius:inherit;\n    border-start-start-radius:0;\n    border-start-end-radius:0;\n}\n  }\n\n.sca-polaris .Polaris-IndexTable__IndexTableWrapper{\n  border-radius:0;\n}\n\n.sca-polaris .Polaris-IndexTable__IndexTableWrapper .Polaris-IndexTable__IndexTableWrapper--scrollBarHidden{\n    border-radius:inherit;\n  }\n\n.sca-polaris .Polaris-IndexTable__IndexTableWrapperWithSelectAllActions{\n  --pc-index-table-bulk-actions-offset:2.5625rem;\n  padding-bottom:var(--pc-index-table-bulk-actions-offset);\n  border-radius:0;\n}\n\n.sca-polaris .Polaris-IndexTable__Table{\n  width:100%;\n  min-width:100%;\n  border-collapse:collapse;\n}\n\n.sca-polaris .Polaris-IndexTable__TableRow{\n  background-color:var(--p-color-bg-surface);\n  cursor:pointer;\n  border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);\n}\n\n.sca-polaris .Polaris-IndexTable__TableRow:first-child{\n    border-top:var(--p-border-width-025) solid var(--p-color-border);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--unclickable{\n    cursor:auto;\n  }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-success);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess::before{\n        background-color:var(--p-color-bg-surface-success);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-warning);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning::before{\n        background-color:var(--p-color-bg-surface-warning);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-critical);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical::before{\n        background-color:var(--p-color-bg-surface-critical);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-secondary);\n      color:var(--p-color-text-secondary);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued::before{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader{\n    cursor:default;\n  }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:last-child{\n      color:var(--p-color-text-secondary);\n      font-weight:var(--p-font-weight-medium);\n      font-size:var(--p-font-size-300);\n      background-color:var(--p-color-bg-surface-secondary);\n      border-top:var(--p-border-width-025) solid var(--p-color-border);\n      border-bottom:var(--p-border-width-025) solid var(--p-color-border);\n      border-color:var(--p-color-border);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child{\n    --pc-index-table-checkbox-width:var(--p-space-500);\n    --pc-index-table-checkbox-width-sm:calc(var(--pc-index-table-checkbox-width) + var(--p-width-050));\n    --pc-index-table-checkbox-padding-left:var(--p-space-300);\n    --pc-index-table-checkbox-padding-right:var(--p-width-150);\n    --pc-index-table-checkbox-child-offset:calc(var(--pc-index-table-checkbox-width) + var(--pc-index-table-checkbox-padding-left));\n    --pc-index-table-checkbox-child-offset-sm:calc(var(--pc-index-table-checkbox-width-sm) + var(--pc-index-table-checkbox-padding-left));\n    --pc-table-shifted-checkbox-z-index:30;\n  }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled),\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-success-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-success-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-critical-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-critical-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-warning-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-warning-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-secondary-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-secondary-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow--disabled{\n  cursor:default;\n  color:var(--p-color-text-secondary);\n}\n\n.sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1),\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface);\n    }\n\n.sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n),\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:last-child{\n      background:var(--p-color-bg-surface-secondary);\n    }\n\n.sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child:nth-child(2n)::before{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1),\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n),\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableHeading{\n  --pc-index-table-heading-padding-x:var(--p-space-150);\n  --pc-index-table-heading-padding-y:var(--p-space-200);\n  background:var(--p-color-bg-surface-secondary);\n  padding:var(--pc-index-table-heading-padding-y) var(--pc-index-table-heading-padding-x);\n  text-align:left;\n  font-weight:var(--p-font-weight-medium);\n  color:var(--p-color-text-secondary);\n  font-size:var(--p-font-size-300);\n  white-space:nowrap;\n  border:0;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading:first-child:not(.Polaris-IndexTable__TableHeading--flush){\n    padding-left:var(--p-space-300);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableHeading:last-child:not(.Polaris-IndexTable__TableHeading--flush){\n    padding-right:var(--p-space-300);\n    overflow-x:hidden;\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingAlignCenter{\n  text-align:center;\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingAlignCenter [class*='TooltipContainer']{\n    justify-content:center;\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingAlignEnd{\n  text-align:right;\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingAlignEnd [class*='TooltipContainer'],\n  .sca-polaris .Polaris-IndexTable--tableHeadingAlignEnd [class*='SortableTableHeadingWithCustomMarkup']{\n    justify-content:end;\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingExtraPaddingRight{\n  --pc-index-table-heading-extra-padding-right:0rem;\n  padding-right:var(--pc-index-table-heading-extra-padding-right);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--sortable{\n  background:var(--p-color-bg-surface-secondary);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--flush{\n  --pc-index-table-heading-padding-x:0rem;\n  padding:var(--pc-index-table-heading-padding-y) var(--pc-index-table-heading-padding-x);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--first{\n  position:sticky;\n  left:0;\n  padding-left:var(--pc-index-table-checkbox-offset-left);\n  padding-right:var(--pc-index-table-checkbox-offset-right);\n  width:var(--p-space-500);\n  z-index:var(--pc-index-table-sticky-cell);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortButton{\n  position:relative;\n  background:none;\n  padding:0;\n  border:0;\n  cursor:pointer;\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  font-weight:var(--p-font-weight-medium);\n  color:var(--p-color-text-secondary);\n  font-size:var(--p-font-size-300);\n  line-height:var(--p-font-line-height-500);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortButton:hover .Polaris-IndexTable__TableHeadingSortIcon, .sca-polaris .Polaris-IndexTable__TableHeadingSortButton:focus .Polaris-IndexTable__TableHeadingSortIcon{\n      opacity:1;\n    }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd{\n  transform:translateX(var(--p-space-500));\n  transition-delay:var(--p-motion-duration-50);\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:hover,\n  .sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:focus{\n    transition-delay:none;\n    transform:translateX(var(--p-space-100));\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:hover::before{\n  content:'';\n  position:absolute;\n  top:0;\n  left:calc(100% - var(--p-space-200));\n  height:100%;\n  width:var(--p-space-600);\n  display:block;\n  animation:none;\n  transition:none;\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted{\n  transform:translateX(var(--p-space-100));\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{\n    animation:none;\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndPreviouslySorted{\n  animation:Polaris-IndexTable--rightAlignedSortButtonSlideOut var(--p-motion-duration-50) var(--p-motion-ease);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortIcon{\n  order:1;\n  opacity:0;\n  height:var(--p-space-500);\n  width:var(--p-space-500);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortIcon:not(.Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd:hover),\n  .sca-polaris .Polaris-IndexTable__TableHeadingSortIcon:not(.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndPreviouslySorted){\n    transition:opacity var(--p-motion-duration-50) var(--p-motion-ease);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortButton:hover .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{\n    animation:Polaris-IndexTable--revealRightAlignedSortButtonIcon var(--p-motion-duration-200) var(--p-motion-ease);\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted:hover .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{\n    animation:none;\n  }\n\n.sca-polaris .Polaris-IndexTable__TableHeadingUnderline::after{\n  content:'';\n  position:absolute;\n  left:0;\n  bottom:calc(var(--p-border-width-050)*-1);\n  width:100%;\n  height:var(--p-border-width-050);\n  border-bottom:var(--p-border-width-050) dotted var(--p-color-border-tertiary);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingTooltipUnderlinePlaceholder{\n  border-bottom:var(--p-border-width-050) dotted transparent;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortIcon--visible{\n  opacity:1;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortSvg{\n  display:block;\n  width:100%;\n  max-width:100%;\n  max-height:100%;\n}\n\n.sca-polaris .Polaris-IndexTable__SortableTableHeadingWithCustomMarkup{\n  display:flex;\n  flex-wrap:nowrap;\n}\n\n.sca-polaris .Polaris-IndexTable__SortableTableHeaderWrapper{\n  cursor:pointer;\n}\n\n.sca-polaris .Polaris-IndexTable__FirstStickyHeaderElement{\n  padding-right:0;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable){\n  padding-left:0;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable):not(.Polaris-IndexTable__TableHeading--flush){\n    padding-left:var(--pc-index-table-heading-padding-x);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableCell{\n  z-index:var(--pc-index-table-cell);\n  text-align:left;\n  padding:var(--p-space-200) var(--p-space-400);\n  white-space:nowrap;\n}\n\n.sca-polaris .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush){\n    padding:var(--p-space-150);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{\n      padding-left:var(--p-space-300);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table:not(.Polaris-IndexTable__Table--unselectable) .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{\n        padding-right:var(--pc-index-table-checkbox-offset-right);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):last-child{\n      padding-right:var(--p-space-300);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableCell--flush{\n  padding:0;\n}\n\n.sca-polaris .Polaris-IndexTable__TableCell--flush:first-child{\n    padding:0;\n  }\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable){\n        position:sticky;\n        left:0;\n        z-index:var(--pc-index-table-sticky-cell);\n    }\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second.Polaris-IndexTable__TableHeading--unselectable{\n      position:sticky;\n      left:0;\n      z-index:var(--pc-index-table-sticky-cell);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable{\n  --pc-index-table-checkbox-width:var(--p-space-500);\n  --pc-index-table-checkbox-width-sm:calc(var(--pc-index-table-checkbox-width) + var(--p-width-050));\n  --pc-index-table-checkbox-padding-left:var(--p-space-300);\n  --pc-index-table-checkbox-child-offset:calc(var(--pc-index-table-checkbox-width) + var(--pc-index-table-checkbox-padding-left));\n  --pc-index-table-checkbox-child-offset-sm:calc(var(--pc-index-table-checkbox-width-sm) + var(--pc-index-table-checkbox-padding-left));\n}\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell:first-child{\n      left:0;\n      background-color:var(--p-color-bg-surface);\n      z-index:var(--pc-index-table-sticky-cell);\n      position:sticky;\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:first-child{\n    padding-left:var(--pc-index-table-checkbox-child-offset);\n  }\n\n@container scr (max-width: 30.6225em) {\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:first-child{\n      padding-left:var(--pc-index-table-checkbox-child-offset-sm);\n  }\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{\n        padding-left:var(--pc-index-table-checkbox-child-offset);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled),\n    .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-success-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-warning-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-critical-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-secondary-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:first-child{\n      background-color:var(--p-color-bg-surface-success);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:first-child{\n      background-color:var(--p-color-bg-surface-warning);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:first-child{\n      background-color:var(--p-color-bg-surface-critical);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:first-child{\n      background-color:var(--p-color-bg-surface-secondary);\n      color:var(--p-color-text-secondary);\n    }\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-IndexTable--tableStickyScrolling .Polaris-IndexTable__TableCell:last-child,\n  .sca-polaris .Polaris-IndexTable--stickyTableHeaderStickyScrolling .Polaris-IndexTable__TableCell:last-child,\n  .sca-polaris .Polaris-IndexTable--tableStickyScrolling .Polaris-IndexTable__TableHeading--last,\n  .sca-polaris .Polaris-IndexTable--stickyTableHeaderStickyScrolling .Polaris-IndexTable__TableHeading--last{\n      filter:drop-shadow(-0.0625rem 0 0 var(--p-color-border));\n  }\n    }\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-IndexTable--tableStickyLast .Polaris-IndexTable__TableCell:last-child, .sca-polaris .Polaris-IndexTable--stickyTableHeaderStickyLast .Polaris-IndexTable__TableCell:last-child{\n      position:sticky;\n      right:0;\n      background-color:var(--p-color-bg-surface);\n      z-index:var(--pc-index-table-sticky-cell);\n  }\n    }\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-IndexTable--tableStickyLast .Polaris-IndexTable__TableHeading--last, .sca-polaris .Polaris-IndexTable--stickyTableHeaderStickyLast .Polaris-IndexTable__TableHeading--last{\n      position:sticky;\n      right:0;\n      background-color:var(--p-color-bg-surface-secondary);\n      z-index:auto;\n  }\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--sortable .Polaris-IndexTable__TableHeading{\n    background-color:var(--p-color-bg-surface-secondary);\n  }\n\n.sca-polaris .Polaris-IndexTable--stickyTableHeadingSecondScrolling{\n  padding:0 var(--p-space-025) 0 calc(var(--pc-index-table-checkbox-offset-right) + var(--pc-index-table-heading-padding-x));\n  display:none;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-IndexTable--stickyTableHeadingSecondScrolling{\n    display:block;\n}\n  }\n\n.sca-polaris .Polaris-IndexTable:hover .Polaris-IndexTable__ScrollLeft{\n    display:block;\n  }\n\n.sca-polaris .Polaris-IndexTable:hover .Polaris-IndexTable__ScrollRight{\n    display:block;\n  }\n\n.sca-polaris .Polaris-IndexTable .Polaris-IndexTable__ScrollRight--onboarding{\n  display:block;\n}\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapper{\n  visibility:visible;\n  position:absolute;\n  z-index:var(--pc-index-table-bulk-actions);\n  left:0;\n  width:100%;\n  display:flex;\n  align-items:center;\n  justify-content:flex-start;\n}\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperWithPagination{\n  width:100%;\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperWithPagination{\n    width:calc(100% - 3.5rem - var(--p-space-200));\n}\n  }\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperSticky{\n  position:fixed;\n  top:auto;\n  bottom:0;\n}\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperAtEnd{\n  opacity:0;\n  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease);\n}\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperAtEndAppear{\n  opacity:1;\n}\n\n.sca-polaris .Polaris-IndexTable__PaginationWrapper{\n  --pc-pagination-index:30;\n  z-index:var(--pc-pagination-index);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-IndexTable__PaginationWrapper{\n    position:sticky;\n    bottom:0;\n}\n  }\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-IndexTable__PaginationWrapperScrolledPastTop{\n    position:absolute;\n    bottom:auto;\n    top:var(--pc-index-table-pagination-top-offset);\n    width:100%;\n}\n  }\n\n.sca-polaris .Polaris-IndexTable--scrollBarContainerCondensed{\n  visibility:hidden;\n  pointer-events:none;\n}\n\n.sca-polaris .Polaris-IndexTable--scrollBarContainerHidden{\n  height:0;\n  padding:0;\n}\n\n.sca-polaris .Polaris-IndexTable--disableTextSelection{\n  -webkit-user-select:none;\n          user-select:none;\n}\n\n.sca-polaris .Polaris-IndexTable__EmptySearchResultWrapper{\n  padding:var(--p-space-400);\n}\n\n.sca-polaris .Polaris-IndexTable__CondensedList{\n  list-style-type:none;\n  margin:0;\n  padding:0;\n  overflow:hidden;\n  border-top:0;\n}\n\n.sca-polaris .Polaris-IndexTable__CondensedList .Polaris-IndexTable__TableRow:first-child{\n    border-top:0;\n  }\n\n.sca-polaris .Polaris-IndexTable__HeaderWrapper{\n  position:relative;\n  display:flex;\n  align-items:center;\n  width:100%;\n  min-height:3.5rem;\n  padding:var(--p-space-200) var(--p-space-400);\n  background-color:var(--p-color-bg-surface);\n}\n\n.sca-polaris .Polaris-IndexTable__HeaderWrapper.Polaris-IndexTable--unselectable{\n    min-height:auto;\n    padding:0;\n  }\n\n@keyframes Polaris-IndexTable--rightAlignedSortButtonSlideOut{\n  0%{\n    transform:translateX(var(--p-space-100));\n  }\n\n  80%{\n    transform:translateX(var(--p-space-100));\n  }\n\n  100%{\n    transform:translateX(var(--p-space-500));\n  }\n}\n\n@keyframes Polaris-IndexTable--revealRightAlignedSortButtonIcon{\n  0%{\n    transform:translateX(calc(var(--p-space-500)*-1));\n    opacity:0;\n  }\n\n  40%{\n    opacity:0;\n  }\n\n  50%{\n    transform:translateX(0);\n  }\n\n  100%{\n    opacity:1;\n  }\n}\n\n\n.sca-polaris .Polaris-IndexTable-ScrollContainer{\n  overflow-x:auto;\n  overscroll-behavior-x:contain;\n  -ms-overflow-style:none;\n  scrollbar-width:none;\n  border-radius:inherit;\n}\n\n.sca-polaris .Polaris-IndexTable-ScrollContainer::-webkit-scrollbar{\n  display:none;\n}\n\n\n.sca-polaris .Polaris-Layout{\n  display:flex;\n  flex-wrap:wrap;\n  justify-content:center;\n  align-items:flex-start;\n  margin-top:calc(var(--p-space-400)*-1);\n  margin-left:calc(var(--p-space-400)*-1);\n}\n\n@media print{\n    .sca-polaris .Polaris-Layout{\n      font-size:var(--p-font-size-300);\n      line-height:var(--p-font-line-height-400);\n    }\n\n    .sca-polaris .Polaris-Layout a,\n    .sca-polaris .Polaris-Layout button{\n      color:var(--p-color-text);\n    }\n  }\n\n.sca-polaris .Polaris-Layout__Section{\n  flex:var(--pg-layout-relative-size) var(--pg-layout-relative-size) var(--pg-layout-width-primary-min);\n  min-width:51%;\n}\n\n@media print{\n\n.sca-polaris .Polaris-Layout__Section{\n    flex:2 2 22.5rem;\n}\n  }\n\n.sca-polaris .Polaris-Layout__Section--fullWidth{\n  flex:1 1 100%;\n}\n\n.sca-polaris .Polaris-Layout__Section--oneHalf{\n  flex:1 1 var(--pg-layout-width-one-half-width-base);\n  min-width:0;\n}\n\n.sca-polaris .Polaris-Layout__Section--oneThird{\n  flex:1 1 var(--pg-layout-width-one-third-width-base);\n  min-width:0;\n}\n\n.sca-polaris .Polaris-Layout__Section{\n  max-width:calc(100% - var(--p-space-400));\n  margin-top:var(--p-space-400);\n  margin-left:var(--p-space-400);\n}\n\n\n.sca-polaris .Polaris-Link{\n  -webkit-appearance:none;\n          appearance:none;\n  display:inline;\n  text-align:inherit;\n  padding:0;\n  background:none;\n  border:0;\n  font-size:inherit;\n  font-weight:inherit;\n  color:var(--p-color-text-link);\n  text-decoration:underline;\n  cursor:pointer;\n  touch-action:manipulation;\n}\n\n.sca-polaris .Polaris-Link:hover{\n    color:var(--p-color-text-link-hover);\n    text-decoration:underline;\n  }\n\n.sca-polaris .Polaris-Link:focus,\n  .sca-polaris .Polaris-Link:focus-visible{\n    outline:var(--p-color-border-focus) auto var(--p-border-width-050);\n    outline-offset:var(--p-space-050);\n    border-radius:var(--p-border-radius-150);\n  }\n\n.sca-polaris .Polaris-Link:active{\n    position:relative;\n    color:var(--p-color-text-link-active);\n  }\n\n@media print{\n\n.sca-polaris .Polaris-Link{\n    -webkit-text-decoration-color:var(--p-color-border-tertiary);\n            text-decoration-color:var(--p-color-border-tertiary);\n}\n  }\n\n.sca-polaris .Polaris-Link--monochrome{\n  color:inherit;\n}\n\n.sca-polaris .Polaris-Link--monochrome:hover,\n  .sca-polaris .Polaris-Link--monochrome:focus,\n  .sca-polaris .Polaris-Link--monochrome:active{\n    color:inherit;\n  }\n\n.sca-polaris .Polaris-Link--removeUnderline{\n  text-decoration:none;\n}\n\n.sca-polaris .Polaris-Link--removeUnderline:hover{\n    text-decoration:underline;\n  }\n\n\n.sca-polaris .Polaris-List{\n  padding-left:var(--p-space-500);\n  margin-top:0;\n  margin-bottom:0;\n  list-style:disc outside none;\n}\n\n.sca-polaris .Polaris-List + .Polaris-List{\n    margin-top:var(--p-space-400);\n  }\n\n.sca-polaris .Polaris-List--typeNumber{\n  padding-left:var(--p-space-800);\n  list-style:decimal outside none;\n}\n\n.sca-polaris .Polaris-List__Item .Polaris-List:first-child{\n    margin-top:var(--p-space-200);\n  }\n\n.sca-polaris .Polaris-List--spacingLoose .Polaris-List__Item{\n    margin-bottom:var(--p-space-100);\n  }\n\n\n\n  .sca-polaris .Polaris-Header-Title.Polaris-Header-Title__TitleWithSubtitle{\n    margin-top:0;\n  }\n\n.sca-polaris .Polaris-Header-Title__TitleWrapper{\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  row-gap:var(--p-space-200);\n  padding-block:var(--p-space-050);\n}\n\n.sca-polaris .Polaris-Header-Title__TitleWrapper .Polaris-Header-Title{\n    display:inline;\n    margin-right:var(--p-space-200);\n  }\n\n.sca-polaris .Polaris-Header-Title__TitleWrapper .Polaris-Header-Title > *{\n      display:inline;\n    }\n\n.sca-polaris .Polaris-Header-Title__SubTitle{\n  margin-top:var(--p-space-050);\n}\n\n.sca-polaris .Polaris-Header-Title__SubTitle.Polaris-Header-Title__SubtitleCompact{\n    margin-top:var(--p-space-050);\n  }\n\n.sca-polaris .Polaris-Header-Title__SubTitle.Polaris-Header-Title__SubtitleMaxWidth{\n    max-width:45ch;\n  }\n\n\n.sca-polaris .Polaris-Page-Header__TitleWrapper{\n  grid-area:title;\n  margin-top:var(--p-space-100);\n  align-self:center;\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Page-Header__TitleWrapper{\n    margin-top:0;\n}\n  }\n\n.sca-polaris .Polaris-Page-Header__TitleWrapper.Polaris-Page-Header__TitleWrapperExpand{\n    flex:1 1 auto;\n  }\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper{\n  grid-area:breadcrumbs;\n}\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper a,\n  .sca-polaris .Polaris-Page-Header__BreadcrumbWrapper button{\n    background:transparent;\n    border-radius:var(--p-border-radius-200);\n    box-shadow:none;\n  }\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper a:is(:hover, :focus, :focus-visible), .sca-polaris .Polaris-Page-Header__BreadcrumbWrapper button:is(:hover, :focus, :focus-visible){\n      box-shadow:none !important;\n    }\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper a:is(:hover, :focus-visible), .sca-polaris .Polaris-Page-Header__BreadcrumbWrapper button:is(:hover, :focus-visible){\n      background:var(--p-color-bg-fill-tertiary-hover);\n    }\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper a:focus, .sca-polaris .Polaris-Page-Header__BreadcrumbWrapper button:focus{\n      background:var(--p-color-bg-fill-tertiary-active);\n      box-shadow:var(--p-shadow-inset-200) !important;\n    }\n\n.sca-polaris .Polaris-Page-Header__PrimaryActionWrapper{\n  margin-top:0;\n  margin-left:var(--p-space-100);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Page-Header__PrimaryActionWrapper{\n    margin-left:var(--p-space-200);\n}\n  }\n\n.sca-polaris .Polaris-Page-Header__Row{\n  display:flex;\n  justify-content:space-between;\n  line-height:normal;\n}\n\n.sca-polaris .Polaris-Page-Header__Row:first-child{\n    min-height:1.75rem;\n  }\n\n.sca-polaris .Polaris-Page-Header__Row + .Polaris-Page-Header__Row{\n    margin-top:var(--p-space-050);\n  }\n\n.sca-polaris .Polaris-Page-Header__Row + .Polaris-Page-Header__Row .Polaris-Page-Header__RightAlign{\n      margin-left:0;\n    }\n\n.sca-polaris .Polaris-Page-Header__RightAlign{\n  grid-area:actions;\n  display:flex;\n  align-content:flex-end;\n  flex:1 1 auto;\n  align-items:center;\n  align-self:flex-start;\n  justify-content:flex-end;\n  margin-left:var(--p-space-400);\n  white-space:nowrap;\n}\n\n.sca-polaris .Polaris-Page-Header__Actions{\n  width:100%;\n  display:flex;\n  align-items:center;\n  justify-content:flex-end;\n  text-align:right;\n}\n\n\n.sca-polaris,\n.sca-polaris{\n  min-height:100%;\n  height:100%;\n}\n\n.sca-polaris .Polaris-Page{\n  margin:0 auto;\n  padding:0;\n  max-width:calc(var(--pg-layout-width-primary-max) + var(--pg-layout-width-secondary-max) + var(--pg-layout-width-inner-spacing-base));\n}\n\n@container scr (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Page{\n    padding:0 var(--p-space-600);\n}\n  }\n\n.sca-polaris .Polaris-Page::after{\n    content:'';\n    display:table;\n  }\n\n.sca-polaris .Polaris-Page__Content{\n  padding:var(--p-space-200) 0;\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Page__Content{\n    padding-top:var(--p-space-500);\n}\n  }\n\n\n.sca-polaris .Polaris-Select{\n  --pc-select-backdrop:10;\n  --pc-select-content:20;\n  --pc-select-input:30;\n  position:relative;\n}\n\n.sca-polaris .Polaris-Select select::-ms-expand{\n    display:none;\n  }\n\n.sca-polaris .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error):hover .Polaris-Select__Backdrop{\n      border-color:var(--p-color-input-border-hover);\n      background-color:var(--p-color-input-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:active ~ .Polaris-Select__Backdrop{\n      border:none;\n      box-shadow:var(--p-shadow-inset-200);\n      background-color:var(--p-color-input-bg-surface-active);\n    }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Content{\n    color:var(--p-color-text-disabled);\n  }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__InlineLabel{\n    color:inherit;\n  }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Icon svg{\n    fill:var(--p-color-icon-disabled);\n  }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Backdrop{\n    border-color:var(--p-color-border-disabled);\n    background-color:var(--p-color-bg-surface-disabled);\n  }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Backdrop::before{\n      background-color:var(--p-color-input-bg-surface);\n    }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Backdrop:hover{\n      cursor:default;\n    }\n\n.sca-polaris .Polaris-Select__Content{\n  font-size:var(--p-font-size-325);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-500);\n  border:none;\n  letter-spacing:initial;\n  position:relative;\n  z-index:var(--pc-select-content);\n  display:flex;\n  align-items:center;\n  width:100%;\n  min-height:var(--pg-control-height);\n  padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300);\n\n  font-size:var(--p-font-size-400);\n  line-height:var(--p-font-line-height-600);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Select__Content{\n    line-height:var(--p-font-line-height-500);\n    font-size:var(--p-font-size-325);\n}\n  }\n\n@container scr (max-width: 47.9975em) {\n    .sca-polaris .Polaris-Select__Content div > span{\n      font-size:var(--p-font-size-400);\n      line-height:var(--p-font-line-height-500);\n    }\n  }\n\n.sca-polaris .Polaris-Select__SelectedOption{\n  flex:1 1;\n  white-space:nowrap;\n  overflow:hidden;\n  text-overflow:ellipsis;\n}\n\n.sca-polaris .Polaris-Select__Prefix{\n  padding-right:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Select__Icon svg{\n  fill:var(--p-color-icon-secondary);\n}\n\n.sca-polaris .Polaris-Select__Input{\n  font-size:var(--p-font-size-400);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-600);\n  font-family:var(--p-font-family-sans);\n  letter-spacing:initial;\n  position:absolute;\n  text-rendering:auto;\n  top:0;\n  left:0;\n  z-index:var(--pc-select-input);\n  width:100%;\n  height:100%;\n  margin:0;\n  opacity:0;\n  -webkit-appearance:none;\n          appearance:none;\n  border:none;\n  padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300);\n}\n\n@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-Select__Input{\n    font-size:var(--p-font-size-325);\n    line-height:var(--p-font-line-height-500);\n}\n  }\n\n.sca-polaris .Polaris-Select__Backdrop{\n  z-index:var(--pc-select-backdrop);\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  border:var(--p-border-width-0165) solid var(--p-color-input-border);\n  border-radius:var(--p-border-radius-200);\n  background-color:var(--p-color-input-bg-surface);\n  position:absolute;\n}\n\n.sca-polaris .Polaris-Select--error .Polaris-Select__Backdrop{\n    border-color:var(--p-color-border-critical-secondary);\n    background-color:var(--p-color-bg-surface-critical);\n  }\n\n.sca-polaris .Polaris-Select--error .Polaris-Select__Backdrop.Polaris-Select--hover,\n    .sca-polaris .Polaris-Select--error .Polaris-Select__Backdrop:hover{\n      border-color:var(--p-color-border-critical);\n    }\n\n.sca-polaris .Polaris-Select--error .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Backdrop{\n    border-color:var(--p-color-border-critical-secondary);\n    border-width:var(--p-border-width-025);\n    background-color:var(--p-color-bg-surface-critical);\n  }\n\n.sca-polaris .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Backdrop{\n    border-color:var(--p-color-input-border-active);\n    border-width:var(--p-border-width-025);\n    background-color:var(--p-color-input-bg-surface-active);\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n    outline-offset:var(--p-space-025);\n  }\n\n.sca-polaris .Polaris-Select--toneMagic .Polaris-Select__Content{\n    color:var(--p-color-text-magic);\n  }\n\n.sca-polaris .Polaris-Select--toneMagic .Polaris-Select__InlineLabel{\n    color:inherit;\n  }\n\n.sca-polaris .Polaris-Select--toneMagic .Polaris-Select__Backdrop{\n    border-color:var(--p-color-border-magic-secondary);\n    background-color:var(--p-color-bg-surface-magic);\n  }\n\n.sca-polaris .Polaris-Select--toneMagic .Polaris-Select__Icon svg{\n    fill:var(--p-color-icon-magic);\n  }\n\n.sca-polaris .Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error):not(:focus-within):hover .Polaris-Select__Backdrop{\n        border-color:var(--p-color-border-magic-secondary-hover);\n        background-color:var(--p-color-bg-surface-magic-hover);\n      }\n\n.sca-polaris .Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Content{\n        color:var(--p-color-text);\n      }\n\n.sca-polaris .Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Content .Polaris-Select__Icon svg{\n          fill:var(--p-color-icon-secondary);\n        }\n\n@media (-ms-high-contrast: active){\n  .sca-polaris .Polaris-Select__Content{\n    color:windowText;\n    -ms-high-contrast-adjust:none;\n  }\n\n  .sca-polaris .Polaris-Select__InlineLabel{\n    color:inherit;\n  }\n\n    .sca-polaris .Polaris-Select__InlineLabel::after{\n      content:':';\n    }\n\n  .sca-polaris .Polaris-Select__SelectedOption{\n    color:inherit;\n  }\n\n  .sca-polaris .Polaris-Select__Icon svg{\n    fill:buttonText;\n  }\n    .sca-polaris .Polaris-Select__Backdrop::after{\n      display:none;\n    }\n    .sca-polaris .Polaris-Select__Input:focus ~ .Polaris-Select__Content{\n      color:highlightText;\n    }\n\n    .sca-polaris .Polaris-Select__Input:focus ~ .Polaris-Select__Backdrop{\n      background-color:highlight;\n    }\n    .sca-polaris .Polaris-Select--disabled .Polaris-Select__Content{\n      color:grayText;\n    }\n\n    .sca-polaris .Polaris-Select--disabled .Polaris-Select__Icon{\n      opacity:1;\n    }\n      .sca-polaris .Polaris-Select--disabled .Polaris-Select__Icon svg{\n        fill:grayText;\n      }\n}\n\n\n.sca-polaris{\n  --pc-skeleton-page-max-width:62.375rem;\n  --pc-skeleton-page-max-width-narrow:41.375rem;\n}\n\n\n.sca-polaris .Polaris-Thumbnail{\n  --pc-thumbnail-extra-small-size:1.5rem;\n  --pc-thumbnail-small-size:2.5rem;\n  --pc-thumbnail-medium-size:3.75rem;\n  --pc-thumbnail-large-size:5rem;\n  position:relative;\n  display:block;\n  overflow:hidden;\n  background:var(--p-color-bg-surface);\n  min-width:var(--pc-thumbnail-extra-small-size);\n  max-width:100%;\n  border-radius:var(--p-border-radius-200);\n}\n\n.sca-polaris .Polaris-Thumbnail::after{\n    content:'';\n    top:0;\n    left:0;\n    right:0;\n    bottom:0;\n    position:absolute;\n    border-radius:var(--p-border-radius-200);\n    box-shadow:var(--p-shadow-border-inset);\n    display:block;\n    padding-bottom:100%;\n  }\n\n.sca-polaris .Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall,\n  .sca-polaris .Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall::after{\n    border-radius:var(--p-border-radius-150);\n  }\n\n.sca-polaris .Polaris-Thumbnail::before{\n    content:'';\n    display:block;\n    padding-bottom:100%;\n  }\n\n.sca-polaris .Polaris-Thumbnail--sizeExtraSmall{\n  width:var(--pc-thumbnail-extra-small-size);\n}\n\n.sca-polaris .Polaris-Thumbnail--sizeSmall{\n  width:var(--pc-thumbnail-small-size);\n}\n\n.sca-polaris .Polaris-Thumbnail--sizeMedium{\n  width:var(--pc-thumbnail-medium-size);\n}\n\n.sca-polaris .Polaris-Thumbnail--sizeLarge{\n  width:var(--pc-thumbnail-large-size);\n}\n\n.sca-polaris .Polaris-Thumbnail--transparent{\n  background:transparent;\n}\n\n.sca-polaris .Polaris-Thumbnail > *{\n  position:absolute;\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  margin:auto;\n  max-width:100%;\n  max-height:100%;\n  color:var(--p-color-icon-secondary);\n}\n\n.sca-polaris .Polaris-Thumbnail > * svg{\n    fill:currentColor;\n  }\n";

<Info>
  Identity verification is available on request. Join the waitlist from your Supercycle home page, or select **Upgrade** on the **Identity verification** card under <Icon icon="shopify" iconType="solid" /> **[Risk](https://admin.shopify.com/apps/supercycle/settings/risk)**.
</Info>

Identity verification (ID verification) checks a customer's government-issued ID with a face-matching liveness check before they rent. You choose which products require a check, and within a product which method options, for example only the 7-day rental period or only the Pro plan. Once a flagged option is in a customer's cart, they're prompted to verify on the thank you page and in their account.

Approval is tracked per customer. One approved verification fulfills every outstanding request that customer has.

<Frame type="glass" caption="Select Upgrade on the Identity verification card to request access.">
  <AdminRiskSettings feature="identityVerification" />
</Frame>

***

## Set up identity verification

<Steps>
  <Step title="Open a product's method">
    On <Icon icon="shopify" iconType="solid" /> **[Products](https://admin.shopify.com/apps/supercycle/products)**, open the product you want to gate and select the **Calendar**, **Membership**, or **Subscription** method. Verification is set per option on each method, so a product with several methods needs the flag on each.
  </Step>

  <Step title="Require ID verification on each option">
    Open an option (a rental period on Calendar, a plan on Membership and Subscription), tick **Require ID verification**, and save. The options table shows an **ID verification** column with a **Required** or **Not required** badge for each option.
  </Step>

  <Step title="Apply to many options (optional)">
    On <Icon icon="shopify" iconType="solid" /> **[Products](https://admin.shopify.com/apps/supercycle/products)**, select **Method options**, pick a method, select the options, then open the **...** menu in the bulk action bar and select **Apply ID verification required**.
  </Step>

  <Step title="Add the Checkout requirements block">
    On <Icon icon="shopify" iconType="solid" /> **[Checkout](https://admin.shopify.com/settings/checkout)**, customize the checkout, switch to the **Thank you** page, add the **Checkout requirements** app block, and save. The block shows a row for every outstanding requirement on the order: ID verification when a flagged option was bought, and [contract signing](/documentation/configuration/risk/e-signatures) when a template is attached. If the customer is already verified and nothing else is outstanding, the block shows nothing.
  </Step>

  <Step title="Add the Account requirements page">
    On <Icon icon="shopify" iconType="solid" /> **[Customer accounts](https://admin.shopify.com/settings/customer_accounts)**, open the customer account editor and add the **Account requirements** page from the Supercycle extensions. Use **Add to menu** so customers can reach **Requirements** from their account navigation. The page lists outstanding ID verification requests alongside any unsigned [contracts](/documentation/configuration/risk/e-signatures).
  </Step>

  <Step title="Edit the customer-facing copy (optional)">
    On <Icon icon="shopify" iconType="solid" /> **[Languages](https://admin.shopify.com/apps/supercycle/settings/languages)**, open **Edit content** for a language and update the **Requirements** strings. The same copy is shared by the checkout block, the account page, and the verification pages. Supercycle shows it in the customer's storefront language when that language is active in both Shopify and Supercycle.
  </Step>
</Steps>

***

## What the customer sees

When a customer checks out with a flagged option, Supercycle creates an identity verification request against their account. They can complete the check from either surface:

* **Thank you page.** The **Checkout requirements** block shows straight after checkout. The ID verification row expands when it's the first outstanding requirement, with a button that opens the verification flow.
* **Customer accounts.** The **Requirements** page shows the current status and lets them resume an in-progress verification or retry a failed one.

The verification page renders inside your theme layout. Headings and text use your theme's typography, and buttons use the **Button class** from **Methods style** in the Supercycle Engine app embed. See [theme setup](/documentation/setup/theme-setup#update-style-settings).

***

## Request verification manually

You can ask a customer to verify their identity even if they haven't bought a flagged option, for example before fulfilling a high-value rental or when an earlier request expired.

<Steps>
  <Step title="Open the customer">
    On <Icon icon="shopify" iconType="solid" /> **[Customers](https://admin.shopify.com/apps/supercycle/customers)**, open the customer.
  </Step>

  <Step title="Request ID verification">
    Under **Risk**, find **Identity verification not requested** and select **Request ID verification**.

    <Frame type="glass" caption="Select Request ID verification on the Risk card.">
      <AdminCustomerRisk feature="identityVerification" />
    </Frame>
  </Step>
</Steps>

Supercycle creates an outstanding verification request, tags the customer in Shopify with **ID Verification Required**, and shows the verification prompt on their **Requirements** page the next time they sign in. If the customer already has an open request, the button refreshes the tag without creating a duplicate. The button is hidden once the customer has an outstanding request or an approved verification.

Store staff can also start verification from Shopify POS with the **Verify ID** action on the order details and post-purchase screens. POS shows a QR code and a shareable link for the customer to verify on their own phone. See [Verify a customer's ID on POS](/documentation/point-of-sale/pos-overview#verify-a-customers-id).

***

## Check verification status

A customer's verification status shows under **Risk** on their customer page. From there you can see the current status and result, and open **View details** for the full verification record, including the documents and reports returned.

The **Identity status** filter on <Icon icon="shopify" iconType="solid" /> **[Customers](https://admin.shopify.com/apps/supercycle/customers)** and <Icon icon="shopify" iconType="solid" /> **[Cycles](https://admin.shopify.com/apps/supercycle/cycles)** narrows the list by outcome. Because approval is a customer-level property, a customer is matched on the most favorable outcome they've reached:

| Filter value   | Matches customers who                                                                             |
| -------------- | ------------------------------------------------------------------------------------------------- |
| **Verified**   | Have at least one approved verification. Earlier rejections don't disqualify them                 |
| **Failed**     | Have a rejected verification and haven't since been approved                                      |
| **Unverified** | Have a request but no resolved verification yet. Customers who never had a request aren't matched |

### Statuses and results

| Status        | Meaning                                                          |
| ------------- | ---------------------------------------------------------------- |
| **Pending**   | Request created, the customer hasn't started                     |
| **Submitted** | The customer has completed the flow and a decision is pending    |
| **In review** | The submission is being reviewed by hand                         |
| **Completed** | A final result has been returned                                 |
| **On hold**   | Verification is paused. Contact support from the app             |
| **Expired**   | The verification link expired. The customer needs to start again |

| Result           | Meaning                                                                     |
| ---------------- | --------------------------------------------------------------------------- |
| **Approved**     | Identity verified. All outstanding requests for this customer are fulfilled |
| **Rejected**     | Identity couldn't be verified. The customer can retry                       |
| **Inconclusive** | The provider couldn't determine a result. The customer can retry            |

***

## Considerations

Stores that used the earlier Stripe Identity integration no longer need it. That flow was configured globally under **Risk** with verification type, document types, live capture, and matching selfie settings. The current flow has no global configuration: you turn on **Require ID verification** per method option, and the provider handles the document and selfie logic. If you're still on Stripe Identity, contact support from the app to migrate.

***

## Identity verification FAQs

<AccordionGroup>
  <Accordion title="Which provider runs the verification checks?">
    Supercycle uses [Persona](https://withpersona.com) to run identity verification. A change of provider wouldn't change your setup, since verification is turned on per method option rather than configured against the provider.
  </Accordion>

  <Accordion title="What happens if a customer has several cycles that require verification?">
    Approval is a customer-level property. One approved verification fulfills every outstanding request that customer has, however many cycles triggered them.
  </Accordion>

  <Accordion title="Are there other identity verification providers?">
    Supercycle ships with one built-in provider. Third-party Shopify apps such as [RealID](https://apps.shopify.com/real-id), [iDenfy](https://apps.shopify.com/idenfy-id-verification), and [Engage Message](https://apps.shopify.com/em-id-and-age-verification) can run alongside Supercycle.
  </Accordion>
</AccordionGroup>