/*cssnext*/
/*

  Convenient helper file for the most commonly used site CSS files.

  WARNING:
  This (or any CSSNext) file can't be over 65kb total, so be cautious
  if you include any further stylesheets.

*/
/*

*= require_self

*= require ./shared/base.css
*= require ./shared/common.css
*= require ./shared/layout.css
*= require ./shared/flag_icons.css

*= require ./shared/navigation.css
*= require ./shared/product_navigation.css
*= require ./shared/footer.css
*= require ./shared/notification_container.css
*= require ./shared/utility.css

*/
/*cssnext*/
/*

  Keep this file absolutely minimal.
  Only for styles that will be used on *absolutely every page.*

*/
/* Reset */
* {
  box-sizing: border-box;
}
.LegacyContentWrapper body,
.LegacyContentWrapper h1,
.LegacyContentWrapper h2,
.LegacyContentWrapper h3,
.LegacyContentWrapper h4,
.LegacyContentWrapper h5,
.LegacyContentWrapper h6,
.LegacyContentWrapper p,
.LegacyContentWrapper pre,
.LegacyContentWrapper blockquote,
.LegacyContentWrapper figure,
.LegacyContentWrapper ul,
.LegacyContentWrapper ol,
.LegacyContentWrapper dl,
.LegacyContentWrapper dd,
.LegacyContentWrapper button {
  margin: 0;
  padding: 0;
}
.LegacyContentWrapper ul,
.LegacyContentWrapper ol {
  list-style: none;
}
.LegacyContentWrapper a {
  text-decoration: none;
}
.LegacyContentWrapper button,
.LegacyContentWrapper select {
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
}
.LegacyContentWrapper a,
.LegacyContentWrapper button,
.LegacyContentWrapper select,
.LegacyContentWrapper input,
.LegacyContentWrapper textarea {
  -webkit-tap-highlight-color: transparent;
}
/* Base styles */
:root {
  overflow-x: hidden;
  height: 100%;

  /* Min height so footer country picker doesn't get cut off */
/*  &.popupActive {
    min-height: 1406px;

    @media (--sm-viewport) {
      min-height: 882px;
    }

    @media (--md-viewport) {
      min-height: 772px;
    }
  }*/
}
.LegacyContentWrapper body {
  background: white;

  min-height: 100%;
  display: flex;
  flex-direction: column;

  font-size: 62.5%;
  font-family: var(--camphor), 'Open Sans', 'Segoe UI', sans-serif;
  font-weight: var(--regular);
  font-style: normal;

  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;
  font-variant-numeric: proportional-nums;
}
.LegacyContentWrapper .globalContent {
  flex-grow: 1;
}
.LegacyContentWrapper html[lang='ja'] body {
  font-family: 'Camphor', 'Meiryo', 'Hiragino Sans', sans-serif;
}
.LegacyContentWrapper code,
.LegacyContentWrapper pre {
  font-family: var(--sourceCode), 'Consolas', 'Menlo', monospace;
}
/* Webfonts */
/*

 The "-ss" files are "subsetted" versions with a reduced character set,
 to keep the file size down. The current character set covers:

 - Basic latin
 - German
 - French
 - Spanish
 - Italian
 - Portugese

 For more details see:
 Design Dropbox/Site/v3/Global/Webfont Subsets

*/
@font-face {
  font-family: 'StripeIcons';
  src: url('/fonts/stripe-icons.woff2') format('woff2'),
       url('/fonts/stripe-icons.woff') format('woff');
}
@font-face {
  font-family: var(--camphor);
  font-weight: var(--light);
  src: url('/fonts/camphor-ss/300-light.woff2') format('woff2'),
       url('/fonts/camphor-ss/300-light.woff') format('woff');
}
@font-face {
  font-family: var(--camphor);
  font-weight: var(--light);
  font-style: italic;
  src: url('/fonts/camphor-ss/300-light-italic.woff2') format('woff2'),
       url('/fonts/camphor-ss/300-light-italic.woff') format('woff');
}
@font-face {
  font-family: var(--camphor);
  font-weight: var(--regular);
  src: url('/fonts/camphor-ss/400-regular.woff2') format('woff2'),
       url('/fonts/camphor-ss/400-regular.woff') format('woff');
}
@font-face {
  font-family: var(--camphor);
  font-weight: var(--regular);
  font-style: italic;
  src: url('/fonts/camphor-ss/400-regular-italic.woff2') format('woff2'),
       url('/fonts/camphor-ss/400-regular-italic.woff') format('woff');
}
@font-face {
  font-family: var(--camphor);
  font-weight: var(--medium);
  src: url('/fonts/camphor-ss/500-medium.woff2') format('woff2'),
       url('/fonts/camphor-ss/500-medium.woff') format('woff');
}
@font-face {
  font-family: var(--camphor);
  font-weight: var(--medium);
  font-style: italic;
  src: url('/fonts/camphor-ss/500-medium-italic.woff2') format('woff2'),
       url('/fonts/camphor-ss/500-medium-italic.woff') format('woff');
}
@font-face {
  font-family: var(--camphor);
  font-weight: var(--bold);
  src: url('/fonts/camphor-ss/600-bold.woff2') format('woff2'),
       url('/fonts/camphor-ss/600-bold.woff') format('woff');
}
@font-face {
  font-family: var(--camphor);
  font-weight: var(--bold);
  font-style: italic;
  src: url('/fonts/camphor-ss/600-bold-italic.woff2') format('woff2'),
       url('/fonts/camphor-ss/600-bold-italic.woff') format('woff');
}
@font-face {
  font-family: var(--sourceCode);
  font-weight: var(--regular);
  src: url('/fonts/sourcecodepro-ss/SourceCodePro-Medium.woff2') format('woff2'),
       url('/fonts/sourcecodepro-ss/SourceCodePro-Medium.woff') format('woff');
}
@font-face {
  font-family: var(--sourceCode);
  font-weight: var(--bold);
  src: url('/fonts/sourcecodepro-ss/SourceCodePro-Bold.woff2') format('woff2'),
       url('/fonts/sourcecodepro-ss/SourceCodePro-Bold.woff') format('woff');
}
@font-face {
  font-family: "Flow-Block";
  src: url('/fonts/flow/flow-block.woff') format('woff');
}
@font-face {
  font-family: "Flow-Rounded";
  src: url('/fonts/flow/flow-rounded.woff') format('woff');
}
@font-face {
  font-family: "Flow-Circular";
  src: url('/fonts/flow/flow-circular.woff') format('woff');
}
/*cssnext*/
/*

  This file is for commonly used *but not required* components
  and helper classes throughout the site.

  Make sure they're all explicitly *opt-in*.

*/
/* Basic layout */
.LegacyContentWrapper .container,
.LegacyContentWrapper .container-sm,
.LegacyContentWrapper .container-md,
.LegacyContentWrapper .container-lg,
.LegacyContentWrapper .container-wide,
.LegacyContentWrapper .container-xl,
.LegacyContentWrapper .container-fluid {
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}
.LegacyContentWrapper .container-sm {
  max-width: var(--sm-min);
}
.LegacyContentWrapper .container-md {
  max-width: var(--md-min);
}
/* Use .container-lg -- .container will be deprecated*/
.LegacyContentWrapper .container,
.LegacyContentWrapper .container-lg {
  max-width: var(--lg-min);
}
/* Use .container-xl -- .container-wide will be deprecated*/
.LegacyContentWrapper .container-wide,
.LegacyContentWrapper .container-xl {
  max-width: var(--xl-min);
}
/* Text styles */
.LegacyContentWrapper .common-PageTitle {
  font-weight: var(--light);
  font-size: 45px;
  line-height: 56px;
  color: var(--slate1);
  letter-spacing: -0.01em;

  @media (--sm-viewport) {
    font-size: 53px;
    line-height: 68px;
  }
}
.LegacyContentWrapper .common-SectionTitle {
  font-weight: var(--regular);
  font-size: 34px;
  line-height: 44px;
  color: var(--slate1);

  @media (--sm-viewport) {
    font-size: 42px;
    line-height: 52px;
  }
}
.LegacyContentWrapper .common-SectionTitleHighlight {
  font-weight: var(--light);
  color: var(--blue4);
}
.LegacyContentWrapper .common-IntroText {
  font-weight: var(--light);
  font-size: 21px;
  line-height: 32px;
  color: var(--slate2);

  @media (--sm-viewport) {
    font-size: 24px;
    line-height: 36px;
  }
}
.LegacyContentWrapper .common-BodyTitle {
  font-weight: var(--medium);
  font-size: 19px;
  line-height: 32px;
  color: var(--slate1);
}
.LegacyContentWrapper .common-BodyText {
  font-weight: var(--regular);
  font-size: 17px;
  line-height: 28px;
  color: var(--slate3);
}
.LegacyContentWrapper .common-MediumBodyText {
  font-weight: var(--regular);
  font-size: 19px;
  line-height: 32px;
  color: var(--slate3);
}
.LegacyContentWrapper .common-UppercaseTitle {
  font-size: 20px;
  line-height: 32px;
  font-weight: var(--bold);
  text-transform: uppercase;
  letter-spacing: 0.025em;

  @media (--sm-viewport) {
    font-size: 21px;
    line-height: 32px;
  }
}
.LegacyContentWrapper .common-UppercaseText {
  font-size: 17px;
  line-height: 28px;
  font-weight: var(--bold);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.LegacyContentWrapper .common-AlignRight {
  text-align: right;
}
.LegacyContentWrapper .common-AlignCenter {
  text-align: center;
}
.LegacyContentWrapper .common-NoWrap {
  white-space: nowrap;
}
/* Product name with icon */
.LegacyContentWrapper .common-ProductLockup,
.LegacyContentWrapper .common-ProductLockupBack {
  font-size: 24px;
  line-height: 30px;
  font-weight: var(--bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;

  display: flex;
  align-items: center;

  @media (--sm-viewport) {
    font-size: 28px;
    line-height: 38px;
  }

  .LegacyContentWrapper & .icon  {
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: var(--shadowMedium);
    margin-right: 20px;

    @media (--sm-viewport) {
      width: 72px;
      height: 72px;
    }
  }
}
.LegacyContentWrapper .common-ProductLockupBack {
  display: inline-flex;
  font-size: 20px;
  transition: color 100ms;

  .LegacyContentWrapper &::before {
    font: normal 48px/24px 'StripeIcons';
    content: var(--rightArrow-thin);
    transform: scaleX(-1);
    width: 36px;
    text-align: right;
    position: relative;
    top: -6px;
    transition: color 100ms;
  }

  .LegacyContentWrapper & .icon {
    width: 48px;
    height: 48px;
  }

  .LegacyContentWrapper & .hover-fillLight,
  .LegacyContentWrapper & .hover-fillDark {
    transition: fill 100ms;
  }
  .LegacyContentWrapper & .hover-strokeLight,
  .LegacyContentWrapper & .hover-strokeDark {
    transition: stroke 100ms;
  }

  .LegacyContentWrapper &:hover {
    .LegacyContentWrapper & .hover-fillLight {
      fill: var(--slate5);
    }
    .LegacyContentWrapper & .hover-fillDark {
      fill: var(--slate1);
    }
    .LegacyContentWrapper & .hover-strokeLight {
      stroke: var(--slate5);
    }
    .LegacyContentWrapper & .hover-strokeDark {
      stroke: var(--slate1);
    }
  }
}
/* Links */
.LegacyContentWrapper .common-Link {
  color: var(--blue4);
  font-weight: var(--medium);

  transition: color 100ms ease;

  cursor: pointer;

  .LegacyContentWrapper &:hover,
  .LegacyContentWrapper &:focus {
    color: var(--blue1);
  }

  .LegacyContentWrapper &:active {
    color: #000;
  }

  @nest .keyboard-navigation &:focus {
    outline: none;
    text-decoration: underline;
    text-underline-position: under;
  }
}
.LegacyContentWrapper .common-Link--arrow::after {
  font: var(--stripeIcons);
  content: var(--rightArrow-heavy);
  padding-left: 5px;
}
.LegacyContentWrapper .common-Link--arrowL::before {
  display: inline-block;
  font: var(--stripeIcons);
  content: var(--rightArrow-heavy);
  transform: rotate(180deg);
  margin-right: 5px;
  vertical-align: -2px;
}
.LegacyContentWrapper .common-Link--download::before {
  display: inline-block;
  font: var(--stripeIcons);
  content: var(--rightArrow-heavyLarge);
  margin-right: 2px;
  vertical-align: -2px;
  transform: rotate(90deg) scale(0.9);
}
.LegacyContentWrapper .common-UppercaseText.common-Link--arrow::after {
  content: var(--rightArrow-heavyLarge);
}
/* Text on dark backgrounds */
.LegacyContentWrapper .common-InvertedText {
  .LegacyContentWrapper & .common-PageTitle,
  .LegacyContentWrapper & .common-SectionTitle,
  .LegacyContentWrapper & .common-SectionTitleHighlight,
  .LegacyContentWrapper & .common-BodyTitle,
  .LegacyContentWrapper & .common-UppercaseTitle,
  .LegacyContentWrapper & .common-UppercaseText {
    color: white;
  }

  .LegacyContentWrapper & .common-IntroText {
    color: var(--blue8);
  }

  .LegacyContentWrapper & .common-BodyText {
    color: var(--blue7);
  }
}
.LegacyContentWrapper .common-Link--white,
.LegacyContentWrapper .common-InvertedText .common-Link {
  color: white;

  .LegacyContentWrapper &:hover,
  .LegacyContentWrapper &:focus {
    color: var(--blue8);
  }
  .LegacyContentWrapper &:active {
    color: var(--blue6);
  }
}
/* Button */
.LegacyContentWrapper .common-Button {
  white-space: nowrap;
  display: inline-block;

  height: 40px;
  line-height: 40px;
  padding: 0 14px;

  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 4px;

  font-size: 15px;
  font-weight: var(--bold);
  text-transform: uppercase;
  letter-spacing: 0.025em;

  color: var(--blue4);
  text-decoration: none;

  transition: all 150ms ease;

  .LegacyContentWrapper &:hover,
  .LegacyContentWrapper &:focus,
  .LegacyContentWrapper &.js-hover {
    color: var(--blue5);
    transform: translateY(-1px);
    box-shadow: var(--shadowMedium);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.10), 0 3px 6px rgba(0, 0, 0, 0.08);
  }

  .LegacyContentWrapper &:active,
  .LegacyContentWrapper &.js-active {
    color: var(--blue3);
    background-color: var(--slate9);
    transform: translateY(1px);
    box-shadow: var(--shadowSmall);
  }

  @nest .keyboard-navigation &:focus {
    outline: none;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75), 0 0 0 1.25px color(var(--slate3) alpha(50%)) inset, var(--shadowMedium);
  }
}
.LegacyContentWrapper .common-Button--default {
    color: #fff;
    background: var(--blue4);

    .LegacyContentWrapper &:hover,
    .LegacyContentWrapper &:focus,
    .LegacyContentWrapper &.js-hover {
      color: #fff;
      background-color: var(--blue5);
    }

    .LegacyContentWrapper &:active,
    .LegacyContentWrapper &.js-active {
      color: var(--slate8);
      background-color: var(--blue3);
    }
  }
.LegacyContentWrapper .common-Button--dark {
    color: #fff;
    background: var(--blue1);

    .LegacyContentWrapper &:hover,
    .LegacyContentWrapper &:focus {
      color: #fff;
      background-color: var(--blue2);
    }

    .LegacyContentWrapper &:active {
      color: var(--slate8);
      background-color: var(--blue1);
    }
  }
.LegacyContentWrapper .common-Button--disabled,
  .LegacyContentWrapper .js-disabled {
    color: #fff;
    background: var(--slate6);
    pointer-events: none;
  }
.LegacyContentWrapper .common-ButtonIcon {
    display: inline;
    margin: 0 5px 0 0;
    position: relative;
  }
.LegacyContentWrapper .common-ButtonGroup {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}
.LegacyContentWrapper .common-ButtonGroup .common-Button {
  flex-shrink: 0;
  margin: 10px;
}
/* Pill */
.LegacyContentWrapper .common-Pill {
  display: inline-block;
  padding: 4px 8px 3px;
  border-radius: 50px;
  font-size: 11px;
  line-height: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03rem;

  @media(--xs-viewport) {
    margin-left: 16px;
  }
}
/* Stripe backgrounds */
.LegacyContentWrapper .StripeBackground {
  position: absolute;
  left: 0;
  top: 50%;
  right: 0;
  transform: skewY(-12deg);
  pointer-events: none;
}
.LegacyContentWrapper .StripeBackground .stripe {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
}
.LegacyContentWrapper .StripeBackground.accelerated .stripe {
  /* Smoother lines but blurry backgrounds -- don't put patterns in here */
  /* Disabled until Chrome rendering issue (gap between stripes) is resolved */
  /* will-change: transform; */
}
.LegacyContentWrapper .StripeBackground .stripe.pattern {
  overflow: hidden;
}
.LegacyContentWrapper .StripeBackground .stripe.pattern::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1000px;
  top: -1000px;
  transform: skew(0, 12deg);
}
.LegacyContentWrapper .common-StripeGrid {
  --stripe-height: 48px;
  --content-columns: 12;
  --gutter-columns: 4;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;

  @media (--sm-viewport) {
    --stripe-height: 64px;
  }

  .LegacyContentWrapper & .backgroundContainer,
  .LegacyContentWrapper & .stripeContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: skewY(-12deg);
  }

  .LegacyContentWrapper & .backgroundContainer {
    .LegacyContentWrapper & .grid {
      grid-template-columns: 1fr;
      min-width: 0;
    }

    .LegacyContentWrapper & .background {
      grid-row: 1 / -1;
      grid-column: 1 / -1;
      z-index: -1;
    }
  }

  .LegacyContentWrapper & .stripeContainer {
    overflow: hidden;
  }

  .LegacyContentWrapper &.anchorBottom {
    .LegacyContentWrapper & .backgroundContainer,
    .LegacyContentWrapper & .stripeContainer {
      justify-content: flex-end;
    }

    .LegacyContentWrapper & .grid {
      height: 200%;
      align-content: end;
    }
  }

  .LegacyContentWrapper & .grid {
    --content-column-width: minmax(0, calc(var(--lg-min) / var(--content-columns)));
    --gutter-column-width: 1fr;
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: repeat(auto-fill, var(--stripe-height));
    grid-template-columns:
      [viewport-start]
      1fr
      [left-gutter-start]
      repeat(var(--gutter-columns), var(--gutter-column-width))
      [left-gutter-end content-start]
      repeat(var(--content-columns), var(--content-column-width))
      [content-end right-gutter-start]
      repeat(var(--gutter-columns), var(--gutter-column-width))
      [right-gutter-end]
      1fr
      [viewport-end];

    @media (--lg-viewport) {
      --gutter-column-width: var(--content-column-width);
      min-width: calc(var(--lg-min) / var(--content-columns) * (var(--gutter-columns) * 2 + var(--content-columns)));
    }
  }
}
/* Cards */
.LegacyContentWrapper .common-Card {
  position: relative;
  background-color: #fff;
  border-radius: var(--cardBorderRadius);
  padding: 30px;
  box-shadow: var(--shadowLarge);

  @media (--md-viewport) {
    padding: 50px;
  }
}
/* Beta badge */
.LegacyContentWrapper .common-BetaBadge {
  display: inline;
  position: relative;
  height: 18px;
  margin-left: 11px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 2px 6px 2px 7px;
  text-transform: uppercase;
  color: var(--slate5);
  background-color: color(var(--slate5) alpha(15%));
}
/*
  PLEASE DON'T EDIT THIS FILE BY HAND

  Auto-generated by a script in
  site/spritesheets/gruntfile.js
*/
.LegacyContentWrapper .common-FlagIcon::before {
  content: '';
  display: inline-block;
  background-image: url('https://stripe.com/img/v3/common/flagIcons.svg?26');
  width: 21px;
  height: 15px;
  margin-right: 12px;
  vertical-align: -2px;
}
.LegacyContentWrapper .common-FlagIcon--ad::before {
  background-position: -10px -10px;
}
.LegacyContentWrapper .common-FlagIcon--ae::before {
  background-position: -41px -10px;
}
.LegacyContentWrapper .common-FlagIcon--ag::before {
  background-position: -72px -10px;
}
.LegacyContentWrapper .common-FlagIcon--am::before {
  background-position: -103px -10px;
}
.LegacyContentWrapper .common-FlagIcon--ar::before {
  background-position: -134px -10px;
}
.LegacyContentWrapper .common-FlagIcon--at::before {
  background-position: -165px -10px;
}
.LegacyContentWrapper .common-FlagIcon--au::before {
  background-position: -196px -10px;
}
.LegacyContentWrapper .common-FlagIcon--be::before {
  background-position: -227px -10px;
}
.LegacyContentWrapper .common-FlagIcon--bf::before {
  background-position: -258px -10px;
}
.LegacyContentWrapper .common-FlagIcon--bg::before {
  background-position: -289px -10px;
}
.LegacyContentWrapper .common-FlagIcon--bo::before {
  background-position: -320px -10px;
}
.LegacyContentWrapper .common-FlagIcon--br::before {
  background-position: -351px -10px;
}
.LegacyContentWrapper .common-FlagIcon--ca::before {
  background-position: -382px -10px;
}
.LegacyContentWrapper .common-FlagIcon--cd::before {
  background-position: -413px -10px;
}
.LegacyContentWrapper .common-FlagIcon--cg::before {
  background-position: -444px -10px;
}
.LegacyContentWrapper .common-FlagIcon--ch::before {
  background-position: -475px -10px;
}
.LegacyContentWrapper .common-FlagIcon--cl::before {
  background-position: -506px -10px;
}
.LegacyContentWrapper .common-FlagIcon--cm::before {
  background-position: -10px -35px;
}
.LegacyContentWrapper .common-FlagIcon--cn::before {
  background-position: -41px -35px;
}
.LegacyContentWrapper .common-FlagIcon--co::before {
  background-position: -72px -35px;
}
.LegacyContentWrapper .common-FlagIcon--cr::before {
  background-position: -103px -35px;
}
.LegacyContentWrapper .common-FlagIcon--cy::before {
  background-position: -134px -35px;
}
.LegacyContentWrapper .common-FlagIcon--cz::before {
  background-position: -165px -35px;
}
.LegacyContentWrapper .common-FlagIcon--de::before {
  background-position: -196px -35px;
}
.LegacyContentWrapper .common-FlagIcon--dj::before {
  background-position: -227px -35px;
}
.LegacyContentWrapper .common-FlagIcon--dk::before {
  background-position: -258px -35px;
}
.LegacyContentWrapper .common-FlagIcon--do::before {
  background-position: -289px -35px;
}
.LegacyContentWrapper .common-FlagIcon--dz::before {
  background-position: -320px -35px;
}
.LegacyContentWrapper .common-FlagIcon--ec::before {
  background-position: -351px -35px;
}
.LegacyContentWrapper .common-FlagIcon--ee::before {
  background-position: -382px -35px;
}
.LegacyContentWrapper .common-FlagIcon--eg::before {
  background-position: -413px -35px;
}
.LegacyContentWrapper .common-FlagIcon--es::before {
  background-position: -444px -35px;
}
.LegacyContentWrapper .common-FlagIcon--eu::before {
  background-position: -475px -35px;
}
.LegacyContentWrapper .common-FlagIcon--fi::before {
  background-position: -506px -35px;
}
.LegacyContentWrapper .common-FlagIcon--fo::before {
  background-position: -10px -60px;
}
.LegacyContentWrapper .common-FlagIcon--fr::before {
  background-position: -41px -60px;
}
.LegacyContentWrapper .common-FlagIcon--ga::before {
  background-position: -72px -60px;
}
.LegacyContentWrapper .common-FlagIcon--gb::before {
  background-position: -103px -60px;
}
.LegacyContentWrapper .common-FlagIcon--gi::before {
  background-position: -134px -60px;
}
.LegacyContentWrapper .common-FlagIcon--gl::before {
  background-position: -165px -60px;
}
.LegacyContentWrapper .common-FlagIcon--gm::before {
  background-position: -196px -60px;
}
.LegacyContentWrapper .common-FlagIcon--gr::before {
  background-position: -227px -60px;
}
.LegacyContentWrapper .common-FlagIcon--gt::before {
  background-position: -258px -60px;
}
.LegacyContentWrapper .common-FlagIcon--gu::before {
  background-position: -289px -60px;
}
.LegacyContentWrapper .common-FlagIcon--hk::before {
  background-position: -320px -60px;
}
.LegacyContentWrapper .common-FlagIcon--hn::before {
  background-position: -351px -60px;
}
.LegacyContentWrapper .common-FlagIcon--hr::before {
  background-position: -382px -60px;
}
.LegacyContentWrapper .common-FlagIcon--ht::before {
  background-position: -413px -60px;
}
.LegacyContentWrapper .common-FlagIcon--hu::before {
  background-position: -444px -60px;
}
.LegacyContentWrapper .common-FlagIcon--id::before {
  background-position: -475px -60px;
}
.LegacyContentWrapper .common-FlagIcon--ie::before {
  background-position: -506px -60px;
}
.LegacyContentWrapper .common-FlagIcon--il::before {
  background-position: -10px -85px;
}
.LegacyContentWrapper .common-FlagIcon--im::before {
  background-position: -41px -85px;
}
.LegacyContentWrapper .common-FlagIcon--in::before {
  background-position: -72px -85px;
}
.LegacyContentWrapper .common-FlagIcon--iq::before {
  background-position: -103px -85px;
}
.LegacyContentWrapper .common-FlagIcon--ir::before {
  background-position: -134px -85px;
}
.LegacyContentWrapper .common-FlagIcon--is::before {
  background-position: -165px -85px;
}
.LegacyContentWrapper .common-FlagIcon--it::before {
  background-position: -196px -85px;
}
.LegacyContentWrapper .common-FlagIcon--je::before {
  background-position: -227px -85px;
}
.LegacyContentWrapper .common-FlagIcon--jm::before {
  background-position: -258px -85px;
}
.LegacyContentWrapper .common-FlagIcon--jo::before {
  background-position: -289px -85px;
}
.LegacyContentWrapper .common-FlagIcon--jp::before {
  background-position: -320px -85px;
}
.LegacyContentWrapper .common-FlagIcon--kg::before {
  background-position: -351px -85px;
}
.LegacyContentWrapper .common-FlagIcon--kn::before {
  background-position: -382px -85px;
}
.LegacyContentWrapper .common-FlagIcon--kp::before {
  background-position: -413px -85px;
}
.LegacyContentWrapper .common-FlagIcon--kr::before {
  background-position: -444px -85px;
}
.LegacyContentWrapper .common-FlagIcon--kw::before {
  background-position: -475px -85px;
}
.LegacyContentWrapper .common-FlagIcon--kz::before {
  background-position: -506px -85px;
}
.LegacyContentWrapper .common-FlagIcon--la::before {
  background-position: -10px -110px;
}
.LegacyContentWrapper .common-FlagIcon--lb::before {
  background-position: -41px -110px;
}
.LegacyContentWrapper .common-FlagIcon--lc::before {
  background-position: -72px -110px;
}
.LegacyContentWrapper .common-FlagIcon--li::before {
  background-position: -103px -110px;
}
.LegacyContentWrapper .common-FlagIcon--ls::before {
  background-position: -134px -110px;
}
.LegacyContentWrapper .common-FlagIcon--lt::before {
  background-position: -165px -110px;
}
.LegacyContentWrapper .common-FlagIcon--lu::before {
  background-position: -196px -110px;
}
.LegacyContentWrapper .common-FlagIcon--lv::before {
  background-position: -227px -110px;
}
.LegacyContentWrapper .common-FlagIcon--ma::before {
  background-position: -258px -110px;
}
.LegacyContentWrapper .common-FlagIcon--mg::before {
  background-position: -289px -110px;
}
.LegacyContentWrapper .common-FlagIcon--mk::before {
  background-position: -320px -110px;
}
.LegacyContentWrapper .common-FlagIcon--ml::before {
  background-position: -351px -110px;
}
.LegacyContentWrapper .common-FlagIcon--mm::before {
  background-position: -382px -110px;
}
.LegacyContentWrapper .common-FlagIcon--mt::before {
  background-position: -413px -110px;
}
.LegacyContentWrapper .common-FlagIcon--mx::before {
  background-position: -444px -110px;
}
.LegacyContentWrapper .common-FlagIcon--my::before {
  background-position: -475px -110px;
}
.LegacyContentWrapper .common-FlagIcon--na::before {
  background-position: -506px -110px;
}
.LegacyContentWrapper .common-FlagIcon--ne::before {
  background-position: -10px -135px;
}
.LegacyContentWrapper .common-FlagIcon--ng::before {
  background-position: -41px -135px;
}
.LegacyContentWrapper .common-FlagIcon--ni::before {
  background-position: -72px -135px;
}
.LegacyContentWrapper .common-FlagIcon--nl::before {
  background-position: -103px -135px;
}
.LegacyContentWrapper .common-FlagIcon--no::before {
  background-position: -134px -135px;
}
.LegacyContentWrapper .common-FlagIcon--nz::before {
  background-position: -165px -135px;
}
.LegacyContentWrapper .common-FlagIcon--om::before {
  background-position: -196px -135px;
}
.LegacyContentWrapper .common-FlagIcon--pa::before {
  background-position: -227px -135px;
}
.LegacyContentWrapper .common-FlagIcon--pe::before {
  background-position: -258px -135px;
}
.LegacyContentWrapper .common-FlagIcon--pg::before {
  background-position: -289px -135px;
}
.LegacyContentWrapper .common-FlagIcon--ph::before {
  background-position: -320px -135px;
}
.LegacyContentWrapper .common-FlagIcon--pk::before {
  background-position: -351px -135px;
}
.LegacyContentWrapper .common-FlagIcon--pl::before {
  background-position: -382px -135px;
}
.LegacyContentWrapper .common-FlagIcon--pr::before {
  background-position: -413px -135px;
}
.LegacyContentWrapper .common-FlagIcon--ps::before {
  background-position: -444px -135px;
}
.LegacyContentWrapper .common-FlagIcon--pt::before {
  background-position: -475px -135px;
}
.LegacyContentWrapper .common-FlagIcon--py::before {
  background-position: -506px -135px;
}
.LegacyContentWrapper .common-FlagIcon--qa::before {
  background-position: -10px -160px;
}
.LegacyContentWrapper .common-FlagIcon--remote::before {
  background-position: -41px -160px;
}
.LegacyContentWrapper .common-FlagIcon--ro::before {
  background-position: -72px -160px;
}
.LegacyContentWrapper .common-FlagIcon--ru::before {
  background-position: -103px -160px;
}
.LegacyContentWrapper .common-FlagIcon--rw::before {
  background-position: -134px -160px;
}
.LegacyContentWrapper .common-FlagIcon--sa::before {
  background-position: -165px -160px;
}
.LegacyContentWrapper .common-FlagIcon--se::before {
  background-position: -196px -160px;
}
.LegacyContentWrapper .common-FlagIcon--sg::before {
  background-position: -227px -160px;
}
.LegacyContentWrapper .common-FlagIcon--si::before {
  background-position: -258px -160px;
}
.LegacyContentWrapper .common-FlagIcon--sk::before {
  background-position: -289px -160px;
}
.LegacyContentWrapper .common-FlagIcon--sl::before {
  background-position: -320px -160px;
}
.LegacyContentWrapper .common-FlagIcon--sn::before {
  background-position: -351px -160px;
}
.LegacyContentWrapper .common-FlagIcon--so::before {
  background-position: -382px -160px;
}
.LegacyContentWrapper .common-FlagIcon--sv::before {
  background-position: -413px -160px;
}
.LegacyContentWrapper .common-FlagIcon--td::before {
  background-position: -444px -160px;
}
.LegacyContentWrapper .common-FlagIcon--th::before {
  background-position: -475px -160px;
}
.LegacyContentWrapper .common-FlagIcon--tj::before {
  background-position: -506px -160px;
}
.LegacyContentWrapper .common-FlagIcon--tl::before {
  background-position: -10px -185px;
}
.LegacyContentWrapper .common-FlagIcon--tr::before {
  background-position: -41px -185px;
}
.LegacyContentWrapper .common-FlagIcon--tt::before {
  background-position: -72px -185px;
}
.LegacyContentWrapper .common-FlagIcon--tw::before {
  background-position: -103px -185px;
}
.LegacyContentWrapper .common-FlagIcon--tz::before {
  background-position: -134px -185px;
}
.LegacyContentWrapper .common-FlagIcon--ua::before {
  background-position: -165px -185px;
}
.LegacyContentWrapper .common-FlagIcon--ug::before {
  background-position: -196px -185px;
}
.LegacyContentWrapper .common-FlagIcon--us::before {
  background-position: -227px -185px;
}
.LegacyContentWrapper .common-FlagIcon--uy::before {
  background-position: -258px -185px;
}
.LegacyContentWrapper .common-FlagIcon--ve::before {
  background-position: -289px -185px;
}
.LegacyContentWrapper .common-FlagIcon--vn::before {
  background-position: -320px -185px;
}
.LegacyContentWrapper .common-FlagIcon--xx::before {
  background-position: -351px -185px;
}
.LegacyContentWrapper .common-FlagIcon--ye::before {
  background-position: -382px -185px;
}
.LegacyContentWrapper .common-FlagIcon--za::before {
  background-position: -413px -185px;
}
/*
TODO (nkohari): For now, we're duplicating these from Sail. If the CSS vars are added
to the built bundle, we should import Sail directly instead.
*/
/* Fonts */
:root {
  --sail-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
    "Ubuntu";
  --sail-font-monospace: "Menlo", "Consolas";
  --sail-font-ja-JP: "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "Hiragino Kaku Gothic ProN";
  --sail-font-zh-Hans: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei",
    "Microsoft JhengHei";
  --sail-font-family: var(--sail-font-system), sans-serif;
  --sail-font-family-ja-JP: var(--sail-font-system), var(--sail-font-ja-JP), sans-serif;
  --sail-font-family-zh-Hans: var(--sail-font-system), var(--sail-font-zh-Hans), sans-serif;
  --sail-font-family-monospace: var(--sail-font-monospace), monospace;
  --sail-font-family-monospace-ja-JP: var(--sail-font-monospace), var(--sail-font-ja-JP), monospace;
  --sail-font-family-monospace-zh-Hans: var(--sail-font-monospace), var(--sail-font-zh-Hans),
    monospace;
  --sail-font-size-11: 11px;
  --sail-font-size-12: 12px;
  --sail-font-size-13: 13px;
  --sail-font-size-14: 14px;
  --sail-font-size-15: 15px;
  --sail-font-size-16: 16px;
  --sail-font-size-20: 20px;
  --sail-font-size-24: 24px;
  --sail-font-size-32: 32px;
  --sail-font-size-48: 48px;
  --sail-font-size-56: 56px;
  --sail-font-lineHeight-16: 16px;
  --sail-font-lineHeight-20: 20px;
  --sail-font-lineHeight-24: 24px;
  --sail-font-lineHeight-28: 28px;
  --sail-font-lineHeight-32: 32px;
  --sail-font-lineHeight-40: 40px;
  --sail-font-lineHeight-56: 56px;
  --sail-font-lineHeight-64: 64px;
  --sail-font-weight-regular: 400;
  --sail-font-weight-medium: 500;
  --sail-font-weight-bold: 700;
  --sail-font-weight-link: var(--sail-font-weight-medium);
}
/* Colors */
:root {
  --sail-color-black: #1F1A47;
  --sail-color-white: #fff;
  --sail-color-gray-50: #f7fafc;
  --sail-color-gray-100: #e3e8ee;
  --sail-color-gray-200: #c1c9d2;
  --sail-color-gray-300: #a3acb9;
  --sail-color-gray-400: #8792a2;
  --sail-color-gray-500: #697386;
  --sail-color-gray-600: #4f566b;
  --sail-color-gray-700: #3c4257;
  --sail-color-gray-800: #2a2f45;
  --sail-color-gray-900: #1a1f36;
  --sail-color-blue-50: #f5fbff;
  --sail-color-blue-100: #d6ecff;
  --sail-color-blue-200: #a4cdfe;
  --sail-color-blue-300: #7dabf8;
  --sail-color-blue-400: #6c8eef;
  --sail-color-blue-500: #5469d4;
  --sail-color-blue-600: #3d4eac;
  --sail-color-blue-700: #2f3d89;
  --sail-color-blue-800: #212d63;
  --sail-color-blue-900: #131f41;
  --sail-color-cyan-50: #edfdfd;
  --sail-color-cyan-100: #c4f1f9;
  --sail-color-cyan-200: #7fd3ed;
  --sail-color-cyan-300: #4db7e8;
  --sail-color-cyan-400: #3a97d4;
  --sail-color-cyan-500: #067ab8;
  --sail-color-cyan-600: #075996;
  --sail-color-cyan-700: #06457a;
  --sail-color-cyan-800: #093353;
  --sail-color-cyan-900: #042235;
  --sail-color-green-50: #efffed;
  --sail-color-green-100: #cbf4c9;
  --sail-color-green-200: #85d996;
  --sail-color-green-300: #33c27f;
  --sail-color-green-400: #1ea672;
  --sail-color-green-500: #09825d;
  --sail-color-green-600: #0e6245;
  --sail-color-green-700: #0d4b3b;
  --sail-color-green-800: #0b3733;
  --sail-color-green-900: #082429;
  --sail-color-yellow-50: #fcf9e9;
  --sail-color-yellow-100: #f8e5b9;
  --sail-color-yellow-200: #efc078;
  --sail-color-yellow-300: #e5993e;
  --sail-color-yellow-400: #d97917;
  --sail-color-yellow-500: #bb5504;
  --sail-color-yellow-600: #983705;
  --sail-color-yellow-700: #762b0b;
  --sail-color-yellow-800: #571f0d;
  --sail-color-yellow-900: #3a1607;
  --sail-color-orange-50: #fffaee;
  --sail-color-orange-100: #fee3c0;
  --sail-color-orange-200: #f8b886;
  --sail-color-orange-300: #f5925e;
  --sail-color-orange-400: #e56f4a;
  --sail-color-orange-500: #c44c34;
  --sail-color-orange-600: #9e2f28;
  --sail-color-orange-700: #7e1e23;
  --sail-color-orange-800: #5d161b;
  --sail-color-orange-900: #420e11;
  --sail-color-red-50: #fff8f5;
  --sail-color-red-100: #fde2dd;
  --sail-color-red-200: #fbb5b2;
  --sail-color-red-300: #fa8389;
  --sail-color-red-400: #ed5f74;
  --sail-color-red-500: #cd3d64;
  --sail-color-red-600: #a41c4e;
  --sail-color-red-700: #80143f;
  --sail-color-red-800: #5e1039;
  --sail-color-red-900: #420828;
  --sail-color-purple-50: #fff8fe;
  --sail-color-purple-100: #fce0f6;
  --sail-color-purple-200: #f0b4e4;
  --sail-color-purple-300: #e28ddc;
  --sail-color-purple-400: #c96ed0;
  --sail-color-purple-500: #a450b5;
  --sail-color-purple-600: #7b3997;
  --sail-color-purple-700: #5b2b80;
  --sail-color-purple-800: #401d6a;
  --sail-color-purple-900: #2d0f55;
  --sail-color-violet-50: #f8f9fe;
  --sail-color-violet-100: #e6e6fc;
  --sail-color-violet-200: #c7c2ea;
  --sail-color-violet-300: #b0a1e1;
  --sail-color-violet-400: #9c82db;
  --sail-color-violet-500: #8260c3;
  --sail-color-violet-600: #61469b;
  --sail-color-violet-700: #4b3480;
  --sail-color-violet-800: #352465;
  --sail-color-violet-900: #1f184e;
  --sail-color-background: var(--sail-color-white);
  --sail-color-background-white: var(--sail-color-white);
  --sail-color-background-gray: var(--sail-color-gray-500);
  --sail-color-background-blue: var(--sail-color-blue-500);
  --sail-color-background-cyan: var(--sail-color-cyan-500);
  --sail-color-background-green: var(--sail-color-green-500);
  --sail-color-background-yellow: var(--sail-color-yellow-500);
  --sail-color-background-orange: var(--sail-color-orange-500);
  --sail-color-background-red: var(--sail-color-red-500);
  --sail-color-background-purple: var(--sail-color-purple-500);
  --sail-color-background-violet: var(--sail-color-violet-500);
  --sail-color-background-canvas: var(--sail-color-gray-100);
  --sail-color-background-offset: var(--sail-color-gray-50);

  /* LINE */
  --sail-color-line-divider: var(--sail-color-gray-100);
  --sail-color-line-divider-medium: var(--sail-color-gray-200);
  --sail-color-line-divider-dark: var(--sail-color-gray-600);
  --sail-color-line-selected: var(--sail-color-blue-400);
  --sail-color-line-focus: var(--sail-color-cyan-400);
  --sail-color-line-focus-keyline: var(--sail-color-cyan-600);
  --sail-color-line-invalid: var(--sail-color-red-400);
  --sail-color-line-keyline: var(--sail-color-line-divider);
  --sail-color-shadow-key: rgba(var(--sail-color-black), var(--sail-opacity-shadow-key));
  --sail-color-shadow-ambient: rgba(var(--sail-color-gray-700), var(--sail-opacity-shadow-key));
  --sail-color-shadow-focus: rgba(var(--sail-color-line-focus), var(--sail-opacity-shadow-focus));
  --sail-color-shadow-focus-keyline: rgba(
    var(--sail-color-line-focus-keyline),
    var(--sail-opacity-shadow-focus-keyline)
  );

  /* TEXT */
  --sail-color-text: var(--sail-color-gray-700);
  --sail-color-text-black: var(--sail-color-black);
  --sail-color-text-white: var(--sail-color-white);
  --sail-color-text-gray: var(--sail-color-gray-500);
  --sail-color-text-blue: var(--sail-color-blue-500);
  --sail-color-text-cyan: var(--sail-color-cyan-500);
  --sail-color-text-green: var(--sail-color-green-500);
  --sail-color-text-yellow: var(--sail-color-yellow-500);
  --sail-color-text-orange: var(--sail-color-orange-500);
  --sail-color-text-red: var(--sail-color-red-500);
  --sail-color-text-purple: var(--sail-color-purple-500);
  --sail-color-text-violet: var(--sail-color-violet-500);
  --sail-color-text-disabled: var(--sail-color-gray-300);
  --sail-color-text-hover: var(--sail-color-gray-900);
  --sail-color-text-emphasized: var(--sail-color-gray-900);
  --sail-color-text-invalid: var(--sail-color-text-red);
  --sail-color-text-selected: var(--sail-color-text-blue);
  --sail-color-text-link: var(--sail-color-text-blue);
  --sail-color-text-link-hover: var(--sail-color-text-hover);

  --guide-card-hover-shadow: 0 0 0 1px rgba(50, 50, 93, 0.01), 0 7px 14px 0 rgba(50, 50, 93, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.02);
}
* {
  margin: 0;
  padding: 0;
  border: 0;
}
.LegacyContentWrapper ul {
  list-style: none;
}
.LegacyContentWrapper html {
  height: 100%;
  overflow-x: auto !important;
}
/* Main layout */
.LegacyContentWrapper body {
  min-height: 100%;
  background: var(--sail-color-white);
}
.LegacyContentWrapper a {
  font-weight: 400;
}
/* Wrapper for horizontal scrolling. This is not on body because
   if we keep overflow-x: auto, the browser will keep the bounce when the scroll ends,
   on the wrong container */
.LegacyContentWrapper #docs {
  width: 100%;
  height: 100%;
  display: flex;
  display: grid;
  grid-template-columns: minmax(252px, calc((100% - 1262px) / 2 + 226px)) 1010px 1fr;
  font-family: var(--sail-font-family);
}
.LegacyContentWrapper #sidebar {
  background: var(--sail-color-white);
  position: sticky;
  flex: 0;
  display: flex;
  z-index: 5;
  flex-direction: column;
  align-items: flex-end;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  min-width: 252px;
  height: 100vh;
  top: 0;
  flex-grow: 1;
}
@media (max-width: 1068px) {
  .LegacyContentWrapper #sidebar {
    height: calc(100vh - 20px);
  }
}
.LegacyContentWrapper #sidebar .nav-border {
  position: absolute;
  top: 56px;
  right: 0;
  width: 226px;
  height: 1px;
  background: var(--sail-color-gray-100);
  opacity: 0;
  transition: opacity 150ms ease-in-out;
  pointer-events: none;
  z-index: 2;
}
.LegacyContentWrapper #sidebar.bordered .nav-border {
  opacity: 1;
}
.LegacyContentWrapper #sidebar nav {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  width: 226px;
  margin-top: 1px;
}
.LegacyContentWrapper .right-spacer {
  flex-grow: 1;
}
/* Overlay */
.LegacyContentWrapper .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.LegacyContentWrapper .overlay.visible {
  opacity: 1;
}
/* Search */
.LegacyContentWrapper .search {
  position: absolute;
  top: 0;
  width: 400px;
  z-index: 10020;
}
.LegacyContentWrapper .search input,
.LegacyContentWrapper .search-text {
  color: var(--sail-color-text-gray);
  background-color: transparent;
  background-image: url('https://stripe.com/img/documentation/icon-search.png');
  background-size: 14px 14px;
  background-position: 32px 20px;
  background-repeat: no-repeat;
  font-size: 16px;
  width: 100%;
  padding: 18px 0 17px 64px;
  outline: none;
  -webkit-appearance: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
.LegacyContentWrapper .search input::-webkit-search-decoration {
  -webkit-appearance: none;
}
.LegacyContentWrapper .search input:not(:placeholder-shown),
.LegacyContentWrapper .search-text {
  color: var(--sail-color-text);
  background-image: url('https://stripe.com/img/documentation/icon-search-dark.png');
}
.LegacyContentWrapper .search-after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.LegacyContentWrapper .search-text {
  visibility: hidden;
}
.LegacyContentWrapper .search-after-text--no-results {
  margin-left: 10px;
  color: var(--sail-color-text-gray);
  font-size: 16px;
  line-height: 56px;
  display: inline-block;
  visibility: hidden;
}
.LegacyContentWrapper .search input::-webkit-search-cancel-button {
  display: none;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .LegacyContentWrapper .search input {
    background-image: url('https://stripe.com/img/documentation/icon-search@2x.png');
  }

  .LegacyContentWrapper .search input:not(:placeholder-shown) {
    background-image: url('https://stripe.com/img/documentation/icon-search-dark@2x.png');
  }
}
.LegacyContentWrapper .search-results {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  /* This is so the shadow isn't weirdly cropped */
  top: -10px;
  padding-top: 10px;
  width: calc(994px - 226px);
  min-height: 58px;
  background: var(--sail-color-white);
  box-shadow: 0 15px 35px 0 rgba(50, 50, 93, 0.1),
    0 5px 15px 0 rgba(0, 0, 0, 0.07);
  z-index: 10010;
  border-radius: 0 0 4px 4px;
}
.LegacyContentWrapper .search-results ul {
  margin-top: 55px;
}
.LegacyContentWrapper .search-results li {
  padding: 10px 15px 8px 64px;
  margin-bottom: 10px;
}
.LegacyContentWrapper .search-results li:last-child {
  margin-bottom: 0;
  padding-bottom: 18px;
}
.LegacyContentWrapper .search-results li.selected {
  background: var(--sail-color-blue-50);
  background-image: url('https://stripe.com/img/documentation/icon-arrow-blue-small.svg');
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 34px 12px;
}
.LegacyContentWrapper .search-results li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--sail-color-blue-500);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 5px;
}
.LegacyContentWrapper .search-results li a.external {
  padding-right: 16px;
}
.LegacyContentWrapper .search-results li a.external:after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 16px;
  height: 12px;
  background-image: url('https://stripe.com/img/documentation/icon-external-link.svg');
  background-size: 100% 12px;
  background-position: left top;
  background-repeat: no-repeat;
  filter: grayscale(1);
  opacity: 0.5;
}
.LegacyContentWrapper .search-results li a.external.api-reference:after {
  background-image: url('https://stripe.com/img/documentation/icon-api-link.svg');
}
.LegacyContentWrapper .search-results li a.external.js-reference:after {
  background-image: url('https://stripe.com/img/documentation/icon-js-link.svg');
}
.LegacyContentWrapper .search-results li a.external.api-reference:after,
.LegacyContentWrapper .search-results li a.external.js-reference:after {
  filter: unset;
  opacity: 1;
  width: 22px;
  background-size: 22px auto;
  background-position: center;
}
.LegacyContentWrapper .search-results li a em {
  color: var(--sail-color-blue-600);
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
}
.LegacyContentWrapper .search-results li .tag {
  border-radius: 20px;
  font-weight: 500;
  font-size: 10px;
  display: inline-block;
  margin: 0 4px;
  padding: 3px 7px;
}
.LegacyContentWrapper .search-results li .tag.method {
  background: var(--sail-color-gray-50);
  color: var(--sail-color-gray-600);
}
.LegacyContentWrapper .search-results li.selected .tag.method {
  background: var(--sail-color-blue-50);
}
.LegacyContentWrapper .search-results li p,
.LegacyContentWrapper .search-results li p em {
  font-size: 13px;
  color: var(--sail-color-gray-600);
  line-height: 20px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  max-height: 40px;
}
.LegacyContentWrapper .search-results li p em {
  color: #323b3f;
  font-weight: 500;
  font-style: normal;
}
.LegacyContentWrapper .search-results li p.method-signature {
  color: var(--sail-color-gray-400);
  padding-bottom: 2px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 12px;
}
/* Documentation content */
.LegacyContentWrapper #doc {
  position: relative;
  top: -48px;
  display: flex;
  border-bottom: 1px solid var(--sail-color-gray-100);
  margin-bottom: -40px;
  flex-shrink: 0;
  min-width: 100%;
}
.LegacyContentWrapper #sidebar .logo {
  overflow: hidden;
  width: 226px;
  height: 56px;
  padding: 13px 0;
  flex: none;
}
.LegacyContentWrapper #sidebar .logo .site {
  display: inline-block;
  position: relative;
  width: 62px;
  height: 25px;
  background-image: url('https://stripe.com/img/documentation/logo.svg');
  top: 1px;
}
.LegacyContentWrapper #sidebar .logo .extension {
  display: inline-block;
}
.LegacyContentWrapper #sidebar .logo .extension.as-text {
  height: 22px;
  padding-left: 2px;
  padding-top: 2px;
  font-size: 22px;
  line-height: 22px;
  vertical-align: top;
  color: var(--sail-color-blue-500);
  font-weight: 500;
  text-decoration: none;
}
.LegacyContentWrapper #sidebar .logo .extension.docs {
  position: relative;
  margin-left: 3px;
  top: -3px;
  width: 57px;
  height: 16px;
  background-image: url('https://stripe.com/img/documentation/docs.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.LegacyContentWrapper #sidebar .logo a:hover {
  opacity: 0.8;
}
.LegacyContentWrapper #sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: var(--sail-color-gray-100);
}
/* Two reasons to have the scroll not on body:
   - On safari, switching languages and trying to keep scroll position
     would redraw the whole page and cause a glitch
   - If we scroll on body, the sidebar would need to be position: fixed. It means that
     if the screen is too small, the sidebar would not scroll horizontally
*/
.LegacyContentWrapper #content-wrapper {
  outline: none;
  background: var(--sail-color-white);
}
.LegacyContentWrapper #content-wrapper.has-overlay {
  z-index: 15;
}
.LegacyContentWrapper #content {
  position: relative;
}
.LegacyContentWrapper .article-container {
  display: flex;
  padding-top: 33px;
  padding-left: 64px;
  padding-bottom: 33px;
}
.LegacyContentWrapper #content {
  min-width: var(--article-min-width);
}
.LegacyContentWrapper header#main-header {
  width: 1010px;
  border-bottom: 1px solid var(--sail-color-gray-100);
}
.LegacyContentWrapper header#main-header ul {
  text-align: right;
}
.LegacyContentWrapper header#main-header li {
  display: inline-block;
}
.LegacyContentWrapper header#main-header .common-Link {
  font-size: 16px;
  line-height: 56px;
  padding-left: 20px;
  color: var(--sail-color-blue-500);
}
.LegacyContentWrapper header#main-header .common-Link:hover {
  color: var(--sail-color-blue-600);
}
.LegacyContentWrapper #apis-sdks-dropdown {
  position: relative;
  cursor: pointer;
  padding-right: 24px;
}
.LegacyContentWrapper #apis-sdks-dropdown:after {
  content: '›';
  position: absolute;
  color: #556cd6;
  font-size: 18px;
  right: 0px;
  top: 18px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 18px;
  transform: rotate(90deg);
  transition: transform 150ms ease;
}
.LegacyContentWrapper #apis-sdks-dropdown:hover:after {
  color: #32325d;
}
.LegacyContentWrapper #apis-sdks-dropdown.apis-sdks-dropdown-active:after {
  transform: rotate(270deg);
}
.LegacyContentWrapper #apis-sdks-dropdown .apis-sdks-dropdown-menu {
  position: absolute;
  width: 100%;
  z-index: 10000;
  left: 15px;
  background-color: #ffffff;
  border: 1px solid #e3e8ee;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-20px);
  will-change: transform opacity;
  transition-property: transform opacity;
  transition-duration: 150ms;
}
.LegacyContentWrapper #apis-sdks-dropdown .apis-sdks-dropdown-menu li {
  display: block;
  text-align: left;
}
.LegacyContentWrapper #apis-sdks-dropdown .apis-sdks-dropdown-menu li a {
  display: block;
  font-size: 15px;
  height: 36px;
  line-height: 36px;
  padding-left: 15px;
  color: #556cd6;
}
.LegacyContentWrapper #apis-sdks-dropdown .apis-sdks-dropdown-menu li a:hover {
  color: #32325d;
}
.LegacyContentWrapper #apis-sdks-dropdown.apis-sdks-dropdown-active .apis-sdks-dropdown-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0px);
}
.LegacyContentWrapper #apis-sdks-dropdown .apis-sdks-dropdown-separator {
  border: none;
  height: 1px;
  display: block;
  background: #e3e8ee;
}
.LegacyContentWrapper #apis-sdks-dropdown .apis-sdks-dropdown-menu li a.apis-sdks-dropdown-link {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.LegacyContentWrapper #apis-sdks-dropdown .apis-sdks-dropdown-external-icon {
  display: inline-block;
  margin-left: 8px;
  background: url('https://stripe.com/img/documentation/icon-external-link.svg');
  width: 16px;
  height: 16px;
  transform: scale(0.7);
}
.LegacyContentWrapper header#main-header .button a::after {
  font: normal 22px 'StripeIcons';
  content: '\279D';
  padding-left: 5px;
  line-height: 16px;
}
.LegacyContentWrapper #loading-bar {
  background: var(--sail-color-blue-500);
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  transition: opacity 250ms ease-in-out, width 400ms ease-in-out;
  width: 0;
  transform-origin: 0 0;
  will-change: opacity, width;
}
.LegacyContentWrapper #loading-bar.hidden {
  opacity: 0;
  transition: opacity 250ms ease-in-out;
  pointer-events: none;
}
/* New Sidebar */
.LegacyContentWrapper #sidebar .new-sidebar {
  padding-top: 10px;
}
.LegacyContentWrapper #sidebar .new-sidebar-viewport {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
}
.LegacyContentWrapper #sidebar .new-sidebar.section-selected .section-list,
.LegacyContentWrapper #sidebar .new-sidebar.section-selected .section {
  transform: translateX(-226px);
}
.LegacyContentWrapper #sidebar .new-sidebar.section-selected .section-list {
  visibility: hidden;
}
.LegacyContentWrapper #sidebar .new-sidebar .sidebar-item {
  visibility: hidden;
}
.LegacyContentWrapper #sidebar .sidebar-item.hidden {
  display: none;
}
.LegacyContentWrapper #sidebar .new-sidebar .expanded > .sidebar-item,
.LegacyContentWrapper #sidebar .new-sidebar .always-expanded > .sidebar-item {
  visibility: visible;
}
.LegacyContentWrapper #sidebar .new-sidebar .section-list {
  width: 226px;
  flex: none;
}
.LegacyContentWrapper #sidebar .new-sidebar .section {
  visibility: hidden;
  width: 226px;
  flex: none;
}
.LegacyContentWrapper #sidebar .new-sidebar .section.measured {
  visibility: visible;
  display: none;
}
.LegacyContentWrapper #sidebar .new-sidebar .section.expanded {
  display: block;
}
.LegacyContentWrapper #sidebar .new-sidebar ul {
  visibility: hidden;
  padding: 0;
}
.LegacyContentWrapper #sidebar .new-sidebar ul.measured {
  visibility: visible;
}
.LegacyContentWrapper #sidebar .new-sidebar ul.expanded,
.LegacyContentWrapper #sidebar .new-sidebar ul.selected {
  height: auto !important;
}
.LegacyContentWrapper #sidebar .new-sidebar .back {
  display: block;
  color: var(--sail-color-gray-600);
  font-size: 13px;
  line-height: 13px;
  padding-left: 18px;
  background-image: url('https://stripe.com/img/documentation/navigation/icon-back.svg');
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: 0 1px;
}
.LegacyContentWrapper #sidebar .new-sidebar .section .section-header {
  margin: 10px 0 4px 0;
  height: 50px;
  line-height: 50px;
}
.LegacyContentWrapper #sidebar .new-sidebar .section .section-header a {
  pointer-events: none;
  padding-left: 42px;
  height: 50px;
  line-height: 50px;
  background-size: 30px 36px;
}
.LegacyContentWrapper #sidebar .new-sidebar h1.section-header.styleguide {
  border: none;
}
.LegacyContentWrapper #sidebar .new-sidebar ul li a.selected {
  margin-right: 0;
}
/* Navigation */
.LegacyContentWrapper #sidebar h1,
.LegacyContentWrapper #sidebar h1 a {
  display: block;
  font-size: 15px;
  color: var(--sail-color-text);
  font-weight: 500;
  height: 30px;
  line-height: 30px;
  background-repeat: no-repeat;
  background-size: 14px 15px;
  background-position: 0 8px;
}
.LegacyContentWrapper #sidebar h1 a:hover {
  color: var(--sail-color-blue-800);
}
.LegacyContentWrapper #sidebar h1 a {
  padding-left: 26px;
  cursor: pointer;
  text-decoration: none;
}
.LegacyContentWrapper #sidebar h1 a:active {
  opacity: 0.8;
}
.LegacyContentWrapper #sidebar h1.country-selected,
.LegacyContentWrapper #sidebar h1.country-selected a,
.LegacyContentWrapper #sidebar h1.language,
.LegacyContentWrapper #sidebar h1.language a {
  background-size: 14px 15px;
  background-position: 0 8px;
}
.LegacyContentWrapper #sidebar h1.legal,
.LegacyContentWrapper #sidebar h1.legal a {
  line-height: 22px;
  background-position: 0 8px;
  height: auto;
  padding: 7px 0 0;
}
.LegacyContentWrapper #sidebar h1.language {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: 8px;
}
.LegacyContentWrapper #sidebar h1.language.hidden {
  display: none;
}
.LegacyContentWrapper #sidebar .countries-container {
  flex: none;
  width: 226px;
  background: var(--sail-color-white);
  border-top: 1px solid var(--sail-color-gray-50);
  padding-top: 6px;
}
.LegacyContentWrapper #sidebar h1.country,
.LegacyContentWrapper #sidebar h1.country-selected {
  position: relative;
}
.LegacyContentWrapper #sidebar .countries-container h1:not(:first-of-type) {
  margin-bottom: 5px;
}
.LegacyContentWrapper #sidebar .popup.country-list,
.LegacyContentWrapper #sidebar .popup.available-country-list {
  position: absolute;
  min-width: 420px;
  left: -29px;
  bottom: 42px;
  z-index: 10030;
  display: flex;
  padding: 25px 25px 5px 0;
  font-size: 16px;
  line-height: 26px;
  background: var(--sail-color-white);
  border-radius: 4px;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
    0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  transform: rotate3d(1, 1, 0, 15deg);
  transform-origin: 0 100%;
  opacity: 0;
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-duration: 0.25s;
  overflow: visible;
}
.LegacyContentWrapper #sidebar .popup.country-list:before,
.LegacyContentWrapper #sidebar .popup.available-country-list:before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 30px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  border-radius: 20px 0 4px 0;
  background: var(--sail-color-white);
}
.LegacyContentWrapper #sidebar .popup.country-list.active,
.LegacyContentWrapper #sidebar .popup.available-country-list.active {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.LegacyContentWrapper #sidebar .popup.country-list .optionList a,
.LegacyContentWrapper #sidebar .popup.available-country-list .optionList a {
  display: flex;
  height: unset;
  min-height: 36px;
}
.LegacyContentWrapper #sidebar .popup.country-list .optionList a .country-name,
.LegacyContentWrapper #sidebar .popup.available-country-list .optionList a .country-name {
  padding-right: 2px;
}
.LegacyContentWrapper #sidebar .popup.country-list .optionList a .badge,
.LegacyContentWrapper #sidebar .popup.available-country-list .optionList a .badge {
  margin-left: 0px;
}
.LegacyContentWrapper #sidebar .popup.language-list {
  position: absolute;
  left: -29px;
  bottom: 42px;
  min-width: 180px;
  z-index: 1000;
  display: flex;
  padding: 19px 25px 5px 0;
  font-size: 16px;
  line-height: 26px;
  background: var(--sail-color-white);
  border-radius: 4px;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
    0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  transform: rotate3d(1, 1, 0, 15deg);
  transform-origin: 0 100%;
  opacity: 0;
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-duration: 0.25s;
  overflow: visible;
}
.LegacyContentWrapper #sidebar .popup.language-list:before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 30px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  border-radius: 20px 0 4px 0;
  background: var(--sail-color-white);
}
.LegacyContentWrapper #sidebar .popup.language-list.active {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.LegacyContentWrapper #sidebar .popup.account-list {
  position: absolute;
  left: -26px;
  bottom: 58px;
  z-index: 1000;
  display: flex;
  padding: 10px 0 5px 0;
  font-size: 16px;
  line-height: 26px;
  margin-right: 10px;
  background: var(--sail-color-white);
  border-radius: 4px;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
    0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  transform: rotate3d(1, 1, 0, 15deg);
  transform-origin: 0 100%;
  opacity: 0;
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-duration: 0.25s;
  overflow: visible;
}
.LegacyContentWrapper #sidebar .popup.account-list:before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 30px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  border-radius: 20px 0 4px 0;
  background: var(--sail-color-white);
}
.LegacyContentWrapper #sidebar .popup.account-list.active {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.LegacyContentWrapper #sidebar .popup.account-list ul {
  padding-left: 15px;
  max-height: 80vh;
  overflow: auto;
}
.LegacyContentWrapper #sidebar .popup.account-list li:not(:last-child) {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--sail-color-gray-50);
}
.LegacyContentWrapper #sidebar .account-merchant,
.LegacyContentWrapper #sidebar .merchant-link {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
.LegacyContentWrapper #sidebar .account-merchant-selected {
  padding-bottom: 10px;
  padding-top: 10px;
}
.LegacyContentWrapper #sidebar h1.account,
.LegacyContentWrapper #sidebar .account-merchant-selected {
  border-top: 1px solid var(--sail-color-gray-50);
}
.LegacyContentWrapper #sidebar .merchant-nickname {
  font-weight: 500;
  font-size: 16px;
  color: var(--sail-color-text);
}
.LegacyContentWrapper #sidebar .merchant-version {
  font-family: 'Menlo', 'Consolas', monospace;
  color: var(--sail-color-text-gray);
  font-size: 12px;
  display: none;
}
.LegacyContentWrapper #sidebar .account-merchant.selected .merchant-nickname,
.LegacyContentWrapper #sidebar .account-merchant.selected .merchant-version {
  color: var(--sail-color-blue-500);
}
.LegacyContentWrapper #sidebar .account-merchant img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 2px 5px 0 rgba(60, 66, 87, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
}
.LegacyContentWrapper #sidebar h1.home a {
  background-image: url('https://stripe.com/img/documentation/navigation/home.svg');
}
.LegacyContentWrapper #sidebar h1.home a.selected {
  background-image: url('https://stripe.com/img/documentation/navigation/home-selected.svg');
}
.LegacyContentWrapper #sidebar h1.payments a {
  background-image: url('https://stripe.com/img/documentation/navigation/payments.svg');
}
.LegacyContentWrapper #sidebar h1.payments a.selected {
  background-image: url('https://stripe.com/img/documentation/navigation/payments-selected.svg');
}
.LegacyContentWrapper #sidebar h1.developertools a {
  background-image: url('https://stripe.com/img/documentation/navigation/developertools.svg');
}
.LegacyContentWrapper #sidebar h1.developertools a.selected {
  background-image: url('https://stripe.com/img/documentation/navigation/developertools-selected.svg');
}
.LegacyContentWrapper #sidebar h1.account a {
  background-image: url('https://stripe.com/img/documentation/navigation/account.svg');
}
.LegacyContentWrapper #sidebar h1.account a.selected {
  background-image: url('https://stripe.com/img/documentation/navigation/account-selected.svg');
}
.LegacyContentWrapper #sidebar h1.security a {
  background-image: url('https://stripe.com/img/documentation/navigation/security.svg');
}
.LegacyContentWrapper #sidebar h1.security a.selected {
  background-image: url('https://stripe.com/img/documentation/navigation/security-selected.svg');
}
.LegacyContentWrapper #sidebar h1.reference a {
  background-image: url('https://stripe.com/img/documentation/navigation/reference.svg');
}
.LegacyContentWrapper #sidebar h1.business a {
  background-image: url('https://stripe.com/img/documentation/navigation/business.svg');
}
.LegacyContentWrapper #sidebar h1.business a.selected {
  background-image: url('https://stripe.com/img/documentation/navigation/business-selected.svg');
}
.LegacyContentWrapper #sidebar h1.financialservices a {
  background-image: url('https://stripe.com/img/documentation/navigation/financialservices.svg');
}
.LegacyContentWrapper #sidebar h1.financialservices a.selected {
  background-image: url('https://stripe.com/img/documentation/navigation/financialservices-selected.svg');
}
.LegacyContentWrapper #sidebar h1.products a {
  background-image: url('https://stripe.com/img/documentation/navigation/products.svg');
}
.LegacyContentWrapper #sidebar h1.products a.expanded {
  background-image: url('https://stripe.com/img/documentation/navigation/products-selected.svg');
}
.LegacyContentWrapper #sidebar .new-sidebar .section .section-header.payments a {
  background-image: url('https://stripe.com/img/documentation/product-icons/payments.svg');
}
.LegacyContentWrapper #sidebar .new-sidebar .section .section-header.account a,
.LegacyContentWrapper #sidebar .new-sidebar .section .section-header.security a,
.LegacyContentWrapper #sidebar .new-sidebar .section .section-header.developer a {
  background-size: 28px 36px;
  padding-left: 40px;
}
.LegacyContentWrapper #sidebar h1.checkout a {
  background-image: url('https://stripe.com/img/documentation/product-icons/checkout.svg');
}
.LegacyContentWrapper #sidebar h1.dashboard a {
  background-image: url('https://stripe.com/img/documentation/product-icons/dashboard.svg');
}
.LegacyContentWrapper #sidebar h1.billing a {
  background-image: url('https://stripe.com/img/documentation/product-icons/billing.svg');
}
.LegacyContentWrapper #sidebar h1.connect a {
  background-image: url('https://stripe.com/img/documentation/product-icons/connect.svg');
}
.LegacyContentWrapper #sidebar h1.radar a {
  background-image: url('https://stripe.com/img/documentation/product-icons/radar.svg');
}
.LegacyContentWrapper #sidebar h1.atlas a {
  background-image: url('https://stripe.com/img/documentation/product-icons/atlas.svg');
}
.LegacyContentWrapper #sidebar h1.sigma a {
  background-image: url('https://stripe.com/img/documentation/product-icons/sigma.svg');
}
.LegacyContentWrapper #sidebar h1.partners a {
  background-image: url('https://stripe.com/img/documentation/navigation/icon-partners.svg');
}
.LegacyContentWrapper #sidebar h1.issuing a {
  background-image: url('https://stripe.com/img/documentation/product-icons/issuing.svg');
}
.LegacyContentWrapper #sidebar h1.terminal a {
  background-image: url('https://stripe.com/img/documentation/product-icons/terminal.svg');
}
.LegacyContentWrapper #sidebar h1.capital a {
  background-image: url('https://stripe.com/img/documentation/product-icons/capital.svg');
}
.LegacyContentWrapper #sidebar h1.identity a {
  background-image: url('https://stripe.com/img/documentation/product-icons/identity.svg');
}
.LegacyContentWrapper #sidebar h1.corporatecard a {
  background-image: url('https://stripe.com/img/documentation/product-icons/corporatecard.svg');
}
.LegacyContentWrapper #sidebar h1.reporting a {
  background-image: url('https://stripe.com/img/documentation/navigation/icon-reporting.svg');
}
.LegacyContentWrapper #sidebar h1.country a {
  background-image: url('https://stripe.com/img/documentation/navigation/icon-country.svg');
}
.LegacyContentWrapper #sidebar h1.country-selected a.item-country-selected {
  background-image: url('https://stripe.com/img/documentation/navigation/icon-country.svg');
}
.LegacyContentWrapper #sidebar h1.language a.item-language {
  background-image: url('https://stripe.com/img/documentation/navigation/icon-locale.svg');
}
.LegacyContentWrapper #sidebar h1.styleguide a {
  background-image: url('https://stripe.com/img/documentation/navigation/icon-styleguide.svg');
}
.LegacyContentWrapper #sidebar .badge {
  font-size: 10px;
  line-height: 10px;
  color: var(--sail-color-gray);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-style: normal;
  padding: 2px 3px 1px;
  border-radius: 4px;
  border: 1px solid #e6ebf1;
  display: inline-block;
  vertical-align: 1px;
  margin-left: 8px;
}
.LegacyContentWrapper #sidebar ul {
  padding-left: 25px;
  overflow: hidden;
}
.LegacyContentWrapper #sidebar ul.legal {
  padding-left: 0px;
}
.LegacyContentWrapper #sidebar ul.hidden {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 0;
  right: 0;
}
.LegacyContentWrapper #sidebar ul.visible {
  height: auto !important;
}
.LegacyContentWrapper #sidebar ul li {
  overflow: hidden;
}
.LegacyContentWrapper #sidebar ul li:last-child {
  margin-bottom: 10px;
}
.LegacyContentWrapper #sidebar ul li.category {
  font-weight: 600;
  font-size: 12px;
  color: var(--sail-color-text-black);
  text-transform: uppercase;
  margin-bottom: 5px;
  margin-top: 4px;
}
.LegacyContentWrapper #sidebar ul li.category:not(:first-child) {
  margin-top: 20px;
}
.LegacyContentWrapper #sidebar ul li.category.indent {
  padding-left: 14px;
}
.LegacyContentWrapper #sidebar ul li a {
  position: relative;
  display: block;
  font-size: 14px;
  color: var(--sail-color-text-gray);
  text-decoration: none;
  min-height: 28px;
  line-height: 20px;
  padding: 4px 16px 4px 0;
}
.LegacyContentWrapper #sidebar ul li a:hover,
.LegacyContentWrapper #sidebar ul li a:active {
  color: var(--sail-color-black);
}
.LegacyContentWrapper #sidebar a.external:after {
  content: '';
  display: inline-block;
  margin-left: 2px;
  width: 16px;
  height: 12px;
  background-image: url('https://stripe.com/img/documentation/icon-external-link.svg');
  background-size: 100% 12px;
  background-position: left top;
  background-repeat: no-repeat;
  filter: grayscale(0.9);
  opacity: 0;
}
.LegacyContentWrapper #sidebar h1 a.external:after {
  top: 13px;
}
.LegacyContentWrapper #sidebar a.external:hover:after {
  opacity: 1;
}
.LegacyContentWrapper #sidebar ul li.separator {
  margin-top: 8px;
  padding-top: 5px;
  border-top: 1px solid var(--sail-color-gray-50);
}
.LegacyContentWrapper #sidebar h1 a.selected,
.LegacyContentWrapper #sidebar ul li a.selected {
  color: var(--sail-color-blue-500);
  font-weight: 500;
  /* Counteract wider text from font-width to prevent text from bumping to next line, which interacts poorly with stateful animation logic. */
  margin-right: -1em;
}
/* Sub nav */
.LegacyContentWrapper #sidebar ul ul {
  border-left: none;
  padding-left: 0px;
}
.LegacyContentWrapper #sidebar ul ul li:last-child {
  margin-top: 0;
  margin-bottom: 0;
}
.LegacyContentWrapper #sidebar ul ul li a {
  padding-left: 14px;
}
.LegacyContentWrapper #sidebar ul ul ul li a {
  padding-left: 28px;
}
.LegacyContentWrapper #sidebar ul.countries {
  padding-left: 0;
}
.LegacyContentWrapper #sidebar ul.countries li a:before {
  transform: scale(0.75);
  transform-origin: 40% 60%;
  margin-right: 5px;
}
.LegacyContentWrapper .definition-tooltip {
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center bottom;
  opacity: 0;
  width: 350px;
  transform: scale(0.95);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
/* Key popover */
.key-popover {
  position: absolute;
  z-index: 1000;
  padding: 12px 12px;
  background: var(--sail-color-white);
  box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.05),
    0 7px 14px 0 rgba(50, 50, 93, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
  font-size: 13px;
  line-height: 19px;
  color: var(--sail-color-gray-600);
  opacity: 0;
  transform-origin: 50% 100%;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
.key-popover-tick {
  position: absolute;
  overflow: hidden;
  bottom: -9px;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 10px;
}
.key-popover-tick:after {
  position: absolute;
  content: '';
  left: calc(50% - 5px / 2);
  top: -3px;
  width: 8px;
  height: 8px;
  transform: rotateZ(45deg);
  display: block;
  background: white;
  box-shadow: 0 7px 14px 0 rgba(50, 50, 93, 0.1),
    0 3px 6px 0 rgba(0, 0, 0, 0.07);
}
.key-popover strong {
  font-weight: 500;
}
.key-popover-merchant {
  font-weight: 500;
  margin-right: 15px;
}
.key-popover-merchant-icon {
  width: 14px;
  height: 14px;
  background-size: 100% 100%;
  border-radius: 8px;
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: 3px;
}
.key-popover-merchant + a {
  float: right;
}
/* Content */
/* - Headings, paragraphs */
.LegacyContentWrapper article h1 {
  font-size: 32px;
  color: var(--sail-color-text-black);
  font-weight: 700;
}
.LegacyContentWrapper article h2 {
  font-size: 20px;
  color: var(--sail-color-text-black);
  font-weight: 700;
}
.LegacyContentWrapper article h2 code {
  font-size: 19px;
}
.LegacyContentWrapper article h3 {
  font-size: 16px;
  color: var(--sail-color-text-black);
  font-weight: 700;
}
.LegacyContentWrapper article h3 code {
  font-size: 15px;
  font-weight: 700;
}
.LegacyContentWrapper article h4,
.LegacyContentWrapper article h5,
.LegacyContentWrapper article h6 {
  font-size: 16px;
  color: var(--sail-color-text-black);
  font-weight: 600;
}
.LegacyContentWrapper article p,
.LegacyContentWrapper article ul,
.LegacyContentWrapper article ol,
.LegacyContentWrapper article table tbody,
.LegacyContentWrapper article dl,
.LegacyContentWrapper article blockquote {
  font-size: 16px;
  color: var(--sail-color-text);
  line-height: 26px;
}
.LegacyContentWrapper article ul pre,
.LegacyContentWrapper article ol pre {
  font-size: 13px;
  line-height: 19px;
}
.LegacyContentWrapper article blockquote:not(:first-child) {
  margin-top: 20px;
}
.LegacyContentWrapper article aside:first-child + p,
.LegacyContentWrapper article .image:first-child + p {
  padding-top: 0;
}
.LegacyContentWrapper article p {
  padding-top: 12px;
}
.LegacyContentWrapper article p:first-child {
  padding-top: 0;
}
.LegacyContentWrapper article .code + p,
.LegacyContentWrapper article .tabs-code + p {
  padding-top: 20px;
}
.LegacyContentWrapper article blockquote p,
.LegacyContentWrapper article li p,
.LegacyContentWrapper article dd p {
  padding: 0;
}
.LegacyContentWrapper article blockquote p:not(:first-child),
.LegacyContentWrapper article li p:not(:first-child),
.LegacyContentWrapper article dd p:not(:first-child) {
  padding-top: 12px;
}
.LegacyContentWrapper article h1 ~ table + p,
.LegacyContentWrapper article h2 ~ table + p,
.LegacyContentWrapper article h3 ~ table + p,
.LegacyContentWrapper article h4 ~ table + p {
  padding-top: 20px;
}
.LegacyContentWrapper article .tabs-content p:first-child {
  padding-top: 0;
}
.LegacyContentWrapper article .tabs-content p {
  padding-top: 12px;
}
.LegacyContentWrapper article h1 ~ p {
  padding-top: 20px;
}
.LegacyContentWrapper article h2 ~ p {
  padding-top: 12px;
}
.LegacyContentWrapper article h3 ~ p {
  padding-top: 12px;
}
.LegacyContentWrapper article h4 ~ p,
.LegacyContentWrapper article h5 ~ p,
.LegacyContentWrapper article h6 ~ p {
  padding-top: 12px;
}
/* To have some padding when we scroll to the anchor */
.LegacyContentWrapper article h2 {
  margin-top: -20px;
  padding-top: 20px;
}
.LegacyContentWrapper article h2:not(:first-child),
.LegacyContentWrapper article li h2 {
  margin-top: 18px;
  padding-top: 20px;
}
.LegacyContentWrapper article h3 {
  margin-top: -16px;
  padding-top: 16px;
}
.LegacyContentWrapper article h3:not(:first-child),
.LegacyContentWrapper article li h3 {
  margin-top: 18px;
  padding-top: 16px;
}
.LegacyContentWrapper article li h3,
.LegacyContentWrapper article li h4 {
  padding-top: 0;
}
.LegacyContentWrapper article h4,
.LegacyContentWrapper article h5,
.LegacyContentWrapper article h6 {
  margin-top: -10px;
  padding-top: 10px;
}
.LegacyContentWrapper article h4:not(:first-child),
.LegacyContentWrapper article h5:not(:first-child),
.LegacyContentWrapper article h6:not(:first-child),
.LegacyContentWrapper article li h4,
.LegacyContentWrapper article li h5,
.LegacyContentWrapper article li h6 {
  margin-top: 20px;
  padding-top: 10px;
}
.LegacyContentWrapper article ol li h2,
.LegacyContentWrapper article ol li h3,
.LegacyContentWrapper article ol li h4,
.LegacyContentWrapper article ol li h5,
.LegacyContentWrapper article ol li h6 {
  margin-top: 0;
  padding-top: 0;
}
/* - Sections */
.LegacyContentWrapper article header {
  padding-top: 8px;
}
.LegacyContentWrapper article header .nav-tabs {
  margin: 40px 0 12px 0;
}
.LegacyContentWrapper article header.thin-header {
  max-width: 66%;
  border-bottom: none;
}
.LegacyContentWrapper article section.thin-header {
  max-width: 90%;
  padding-top: 24px;
}
.LegacyContentWrapper article section.thin-header + section {
  padding-top: 20px;
}
.LegacyContentWrapper article header h1 + p {
  padding-top: 12px !important;
  font-size: 22px;
  color: var(--sail-color-text);
  line-height: 28px;
}
.LegacyContentWrapper article section + header {
  padding-top: 40px;
}
.LegacyContentWrapper article section {
  padding: 40px 0 0 0;
}
.LegacyContentWrapper article section:first-child {
  padding: 0;
}
.LegacyContentWrapper article section::after {
  content: '';
  display: block;
  clear: both;
}
.LegacyContentWrapper article footer {
  padding: 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-top: 1px solid var(--sail-color-gray-100);
}
.LegacyContentWrapper article footer p {
  font-size: 14px;
  line-height: 20px;
}
.LegacyContentWrapper .disable-csat .csat {
  display: none;
}
.LegacyContentWrapper .disable-csat footer {
  margin-top: 40px;
}
.LegacyContentWrapper .collect-email-guide {
  margin-top: 12px;
}
.LegacyContentWrapper .common-Button {
  text-transform: none;
  box-shadow: none;
  border: 1px solid var(--sail-color-gray-100);
  line-height: 28px;
}
.LegacyContentWrapper .csat .common-Button {
  padding: 0 18px 2px 18px;
  margin: 0 0 0 8px;
}
.LegacyContentWrapper .common-Button:hover {
  box-shadow: 0px 2px 5px 0px rgba(50, 50, 93, 0.1),
    0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
}
.LegacyContentWrapper .stroke-Button {
  white-space: nowrap;
  display: inline-block;
  height: 31px;
  line-height: 32px;
  padding: 0 14px;
  background: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #32325d;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: inset 0 0 0 2px #32325d;
  text-shadow: none;
  position: absolute;
  border-bottom: none;
  right: 40px;
  top: 23px;
}
.LegacyContentWrapper .stroke-Button:hover {
  border-bottom: none;
  box-shadow: inset 0 0 0 2px #8898aa;
  color: #6b7c93;
  cursor: pointer;
}
.LegacyContentWrapper .stroke-Button svg {
  fill: #32325d;
  margin-right: 5px;
  transition: all 0.15s ease;
}
.LegacyContentWrapper .stroke-Button:hover svg {
  fill: #6b7c93;
}
@media screen and (max-width: 670px) {
  .LegacyContentWrapper .stroke-Button {
    position: relative;
    border-bottom: none;
    right: 0;
    top: 0;
    margin-bottom: 20px;
  }
}
.LegacyContentWrapper .video-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  z-index: 1000;
  pointer-events: none;
}
.LegacyContentWrapper .video-overlay.visible {
  pointer-events: all;
}
.LegacyContentWrapper .video-overlay.visible::before {
  opacity: 1;
}
.LegacyContentWrapper .video-overlay.visible .video-container {
  transform: none;
  opacity: 1;
}
.LegacyContentWrapper .video-overlay .video-container {
  transform: none;
  opacity: 1;
}
.LegacyContentWrapper .video-overlay::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: color(var(--slate4) alpha(40%));
  opacity: 0;
  transition: opacity var(--video-transition-duration)
    var(--expanded-video-transition-curve);
}
.LegacyContentWrapper .video-overlay .video-container {
  border-radius: 8px;
  box-shadow: 0 70px 100px -20px rgba(50, 50, 93, 0.3),
    0 25px 35px -10px rgba(50, 50, 93, 0.3);
  transform: scale(0.85);
  opacity: 0;
  transition: transform var(--video-transition-duration)
      var(--expanded-video-transition-curve),
    opacity var(--video-transition-duration)
      var(--expanded-video-transition-curve);
  will-change: transform;
}
.LegacyContentWrapper .video-overlay video {
  position: relative;
  background-color: #000;
  max-width: 100%;
  max-height: calc(100vh - 20px);
  border-radius: 8px;
  vertical-align: top;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.LegacyContentWrapper .video-overlay video.visible {
  display: block;
}
@media screen and (max-width: 670px) {
  .LegacyContentWrapper .video-overlay video {
    max-height: calc(100vh - 100px);
  }
}
.LegacyContentWrapper article footer .collect-email-guide {
  margin-top: 0;
}
.LegacyContentWrapper article .footer-questions {
  border: none;
  padding: 0;
  display: flex;
  width: 45%;
  justify-content: flex-start;
}
.LegacyContentWrapper article .footer-questions div {
  flex-direction: column;
  display: flex;
  align-items: flex-start;
}
.LegacyContentWrapper article .footer-youtube::before {
  background: url(https://stripe.com/img/documentation/youtube.svg) no-repeat;
  background-size: contain;
  background-position: center;
  width: 12px;
  height: 12px;
  content: '';
  display: inline-block;
  margin-right: 12px;
}
.LegacyContentWrapper article .footer-contact::before {
  background: url(https://stripe.com/img/documentation/contact.svg) no-repeat;
  background-size: contain;
  background-position: center;
  width: 12px;
  height: 12px;
  content: '';
  display: inline-block;
  margin-right: 12px;
}
.LegacyContentWrapper article footer .footer-questions h4 {
  margin-top: 8px;
  padding-top: 0;
}
.LegacyContentWrapper article .footer-signup {
  border: none;
  padding: 0;
  width: 55%;
}
.LegacyContentWrapper article .footer-signup .collect-email-partial h4 {
  padding: 0 12px 0 0;
  margin-top: 8px;
}
.LegacyContentWrapper article .footer-signup button {
  height: inherit;
  box-shadow: none;
  color: var(--sail-color-blue-500);
}
.LegacyContentWrapper article .footer-signup .intro-copy.column {
  padding: 0;
}
.LegacyContentWrapper article footer h4 {
  font-size: 14px;
}
.LegacyContentWrapper article .footer-signup .header {
  font-size: 14px;
  color: var(--sail-color-text);
  font-weight: 500;
  line-height: normal;
}
.LegacyContentWrapper article .footer-signup .collect-header {
  text-align: left;
}
.LegacyContentWrapper article .footer-signup form.collect-form {
  padding: 0;
}
.LegacyContentWrapper article .footer-signup .collect-email-partial .email-privacy-notice p {
  text-align: right;
  width: auto;
}
.LegacyContentWrapper article .footer-signup .collect-success p {
  text-align: right;
}
.LegacyContentWrapper article .footer-signup .collect-input.email {
  margin: 12px 0 0 0;
  width: 100%;
  max-width: 462px;
}
.LegacyContentWrapper article .footer-signup .collect-email-partial .collect-success {
  padding: 0;
}
.LegacyContentWrapper article .footer-signup .collect-email-partial .collect-success p {
  padding-top: 8px;
}
.LegacyContentWrapper article .footer-signup .collect-error {
  padding-top: 0;
  color: var(--sail-color-text-black);
}
.LegacyContentWrapper .collect-email-partial {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: flex-start;
  -webkit-box-align: flex-start;
  align-items: flex-start;
  padding: 0 0 10px;
  margin-bottom: -10px;
  text-align: left;
  overflow: hidden;

  .LegacyContentWrapper & .email-privacy-notice {
    text-align: left;
    margin-top: 8px;

    .LegacyContentWrapper & p {
      font-size: 13px;
      line-height: 21px;
      color: var(--sail-color-text-gray);
    }

    .LegacyContentWrapper & a {
      color: var(--sail-text-color-link);
      font-weight: var(--medium);
      text-decoration: none;
    }
  }
}
.LegacyContentWrapper .collect-email-partial .column {
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
}
.LegacyContentWrapper .collect-email-partial .collect-success {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  padding: 0 20px;
  -webkit-scroll-snap-coordinate: 0 0;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
}
.LegacyContentWrapper .collect-email-partial .intro-copy {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  max-width: none;
  width: 100%;
  padding: 0 20px;
  -webkit-scroll-snap-coordinate: 0 0;
}
.LegacyContentWrapper .footer-signup .collect-email-partial .intro-copy {
  justify-content: flex-start;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.LegacyContentWrapper .collect-header,
.LegacyContentWrapper .collect-success {
  position: relative;
}
.LegacyContentWrapper .collect-header .icon,
.LegacyContentWrapper .collect-success .icon {
  position: relative;
  right: auto;
  left: auto;
  margin-bottom: 10px;
  width: 50px;
}
.LegacyContentWrapper .collect-header h3.common-BodyTitle,
.LegacyContentWrapper .collect-success h3.common-BodyTitle {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 5px;
}
.LegacyContentWrapper .collect-header .common-BodyText,
.LegacyContentWrapper .collect-success .common-BodyText {
  padding-top: 0;
}
.LegacyContentWrapper .collect-header .common-UppercaseText,
.LegacyContentWrapper .collect-success .common-UppercaseText {
  color: var(--sail-color-text-black);
  font-size: 20px;
  line-height: 24px;
  margin: 8px 0 8px;
  text-transform: uppercase;
}
.LegacyContentWrapper .collect-header .collected-email,
.LegacyContentWrapper .collect-success .collected-email {
  color: var(--sail-color-blue-600);
}
.LegacyContentWrapper .collect-form {
  padding: 12px 0;
  position: relative;
  min-height: 70px;
}
.LegacyContentWrapper .collect-input {
  background: white;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  max-width: 440px;
  font-size: 16px;
  line-height: 22px;
  color: var(--sail-color-text);
  margin: 0 auto;
}
.LegacyContentWrapper .footer-signup .collect-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  width: 100%;
  max-width: 462px;
}
.LegacyContentWrapper .collect-input:hover,
.LegacyContentWrapper .collect-input:focus {
  border: 1px solid var(--sail-color-gray-200);
}
@media screen and (max-width: 670px) {
  .LegacyContentWrapper .collect-input {
    max-width: none;
  }

  .LegacyContentWrapper .collect-form {
    padding: 20px 0px 10px 0px;
  }
}
.LegacyContentWrapper .collect-input input[type='text'],
.LegacyContentWrapper .collect-input input[type='email'] {
  border: none;
  outline: none;
  margin: 0;
  padding: 9px 13px;
  background: transparent;
  font: inherit;
  color: var(--sail-color-text);
}
.LegacyContentWrapper .collect-input input[type='text']::-webkit-input-placeholder,
.LegacyContentWrapper .collect-input input[type='email']::-webkit-input-placeholder {
  color: var(--sail-color-gray);
}
.LegacyContentWrapper .collect-input input[type='text']::-moz-placeholder,
.LegacyContentWrapper .collect-input input[type='email']::-moz-placeholder {
  color: var(--sail-color-gray);
}
.LegacyContentWrapper .collect-input input[type='text']:-ms-input-placeholder,
.LegacyContentWrapper .collect-input input[type='email']:-ms-input-placeholder {
  color: var(--sail-color-gray);
}
.LegacyContentWrapper .collect-input.methods {
  margin-bottom: 20px;
  height: 40px;
  overflow: hidden;
  -webkit-transition: height var(--collect-transition-duration) ease-in-out,
    -webkit-box-shadow 150ms ease;
  transition: height var(--collect-transition-duration) ease-in-out,
    -webkit-box-shadow 150ms ease;
  transition: height var(--collect-transition-duration) ease-in-out,
    box-shadow 150ms ease;
  transition: height var(--collect-transition-duration) ease-in-out,
    box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.LegacyContentWrapper .collect-input.methods.active {
  -webkit-box-shadow: 0 6px 12px -2px rgba(50, 50, 93, 0.25),
    0 3px 7px -3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 12px -2px rgba(50, 50, 93, 0.25),
    0 3px 7px -3px rgba(0, 0, 0, 0.3);
}
.LegacyContentWrapper .collect-input.methods .placeholder,
.LegacyContentWrapper .collect-input.methods label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 9px 13px;
  display: block;
  cursor: pointer;
  overflow: hidden;
  color: var(--sail-color-text-gray);
}
.LegacyContentWrapper .collect-input.email {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: -webkit-box-shadow 150ms ease;
  transition: -webkit-box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.LegacyContentWrapper .collect-input.email .email-field {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 50%;
  /* IE fix */
}
.LegacyContentWrapper .collect-input.email .submit-button {
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 9px 13px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: var(--sail-color-text-link);
  cursor: pointer;
  position: relative;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  padding-left: 15px;
  box-shadow: none;
  text-transform: none !important;
}
.LegacyContentWrapper footer .collect-input.email,
.LegacyContentWrapper footer .collect-input.email .submit-button {
  font-size: 14px;
}
.LegacyContentWrapper .collect-input.email .submit-button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--sail-color-gray-50);
}
.LegacyContentWrapper .collect-input.email .submit-button:focus {
  background-color: var(--sail-color-gray-50);
}
.LegacyContentWrapper .collect-input.email .submit-button:hover {
  color: var(--sail-color-text-link-blue);
}
.LegacyContentWrapper .collect-input.email .submit-button:active {
  color: #555abf;
  background-color: var(--sail-color-gray-50);
}
.LegacyContentWrapper .collect-error {
  font-size: 16px;
  line-height: 22px;
  color: var(--sail-color-text-link-blue);
  display: none;
  max-height: 40px;
  max-width: 440px;
  margin: 10px auto 0 auto;
}
.LegacyContentWrapper .collect-email-partial.form-submitted .intro-copy {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.LegacyContentWrapper .collect-email-partial.form-submitted .collect-success {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 1;
}
.LegacyContentWrapper article .collect-email-partial {
  padding: 20px 0;
}
.LegacyContentWrapper article footer .collect-email-partial {
  padding: 0;
}
.LegacyContentWrapper article .collect-email-partial p {
  text-align: center;
}
.LegacyContentWrapper article footer .collect-email-partial p {
  text-align: left;
}
.LegacyContentWrapper article .collect-email-partial h4 {
  text-align: center;
  padding-bottom: 12px;
}
.LegacyContentWrapper article footer .collect-email-partial h4,
.LegacyContentWrapper article footer .collect-email-partial p {
  text-align: left;
}
.LegacyContentWrapper article footer .container-lg {
  padding: 0;
}
.LegacyContentWrapper section.csat {
  padding: 0;
  padding-top: 22px;
  border-top: none !important;
  margin-bottom: 20px;
  margin-top: 20px;
}
.LegacyContentWrapper .csat h4 {
  display: inline;
}
.LegacyContentWrapper .csat .csat-widget-cta {
  font-size: 20px;
  color: #1f1a47;
  font-weight: 500;
  padding-right: 16px;
}
.LegacyContentWrapper .csat-widget {
  padding: 0 0 12px 0;
  display: none;
}
.LegacyContentWrapper section.csat .csat-widget .csat-button {
  line-height: 32px;
  cursor: pointer;
  font-size: 14px;
  margin: 0px 8px 0 8px;
}
.LegacyContentWrapper .csat-input {
  display: flex;
  margin-top: 8px;
}
.LegacyContentWrapper #csat-input-prompt {
  display: none;
}
.LegacyContentWrapper section.csat .csat-widget #csat-input-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  border: 1px solid var(--sail-color-gray-100);
  font-size: 14px;
  border-radius: 4px;
  line-height: 32px;
  width: 300px;
  padding: 0 12px;
  height: 40px;
}
.LegacyContentWrapper section.csat .csat-widget #csat-input-text:focus {
  box-shadow: 0 0 0 1px rgba(50, 50, 93, 0), 0 0 0 1px rgba(50, 151, 211, 0.2),
    0 0 0 2px rgba(50, 151, 211, 0.25), 0 1px 1px rgba(0, 0, 0, 0.08);
  outline: 0;
}
.LegacyContentWrapper section.csat .csat-widget .csat-contact {
  padding-top: 16px;
}
.LegacyContentWrapper section.csat .csat-widget #csat-contact-optin-checkbox {
  margin-right: 8px;
}
.LegacyContentWrapper section.csat .csat-button {
  background: rgb(85, 108, 214);
  border-radius: 4px;
  color: #eeedf0;
  height: 36px;
  width: 120px;
}
.LegacyContentWrapper .csat h2 {
  float: left;
  padding-top: 22px;
  padding-right: 16px;
}
.LegacyContentWrapper section.csat span[data-csat-step='poll'] {
  text-align: left;
  padding-top: 25px;
  padding-bottom: 25px;
}
.LegacyContentWrapper .csat .csat-button-yes,
.LegacyContentWrapper .csat .csat-button-no {
  margin-top: -4px;
}
.LegacyContentWrapper section.csat .csat-button-yes,
.LegacyContentWrapper section.csat .csat-button-no {
  background-image: url(https://stripe.com/img/documentation/Icon/thumbs-up.svg);
  background-repeat: no-repeat;
  background-position-x: 31px;
  background-position-y: 6px;
  text-align: right;
  padding-right: 36px;
  margin: -2px 4px 0 0;
}
.LegacyContentWrapper section.csat .csat-button-no {
  background-image: url(https://stripe.com/img/documentation/Icon/thumbs-down.svg);
  background-position-y: 8px;
}
.LegacyContentWrapper section.csat div[data-csat-step='input'] {
  height: 81px;
  border-radius: 4px;
  border: 2px solid rgb(214, 236, 255);
  box-shadow: 0px 25px 50px -20px rgba(50, 50, 93, 0.12);
  padding: 0;
  margin-bottom: 60px;
}
.LegacyContentWrapper section.csat p[data-csat-step='reply'] {
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}
.LegacyContentWrapper section.csat .csat-input {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 0;
}
.LegacyContentWrapper section.csat #csat-input-text {
  border: none !important;
  margin-top: auto;
  margin-bottom: auto;
  flex-grow: 1;
}
.LegacyContentWrapper section.csat #csat-input-submit {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 27px;
}
.LegacyContentWrapper section.csat #csat-input-text:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.LegacyContentWrapper section.csat #csat-input-prompt {
  color: #697386;
  font-size: 14px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 27px;
  display: block;
}
.LegacyContentWrapper section.csat #csat-input-text::placeholder {
  color: white;
  opacity: 1;
}
.LegacyContentWrapper section.csat .csat-reply-extended {
  display: none;
}
.LegacyContentWrapper .csat-contact-option {
  display: flex;
  align-items: center;
}
/* - Asides */
/* -- Note */
.LegacyContentWrapper article aside.note {
  float: right;
  width: 262px;
  padding: 12px 16px;
  margin: 20px 0px 20px 20px;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
  border-radius: 4px;
}
.LegacyContentWrapper article aside.note:first-child {
  margin-top: 0px;
}
.LegacyContentWrapper article aside.note h3,
.LegacyContentWrapper article aside.note h3 code {
  font-size: 12px;
  color: var(--sail-color-gray-600);
  letter-spacing: 0.49px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 16px;
}
.LegacyContentWrapper article aside.note p:not(:first-child) {
  padding-top: 10px;
}
.LegacyContentWrapper article aside.note p,
.LegacyContentWrapper article aside.note ul {
  font-size: 13px;
  color: var(--sail-color-text);
  line-height: 18px;
}
.LegacyContentWrapper article aside.note ul li {
  padding-left: 24px;
}
.LegacyContentWrapper article aside.note ul li:before {
  top: 8px;
  width: 4px;
  height: 4px;
}
.LegacyContentWrapper article aside.note p code {
  font-size: 12px;
}
/* -- Callouts */
.LegacyContentWrapper article aside.important,
.LegacyContentWrapper article aside.info,
.LegacyContentWrapper article aside.check {
  background-size: 12px 12px;
  background-position: 16px 16px;
  background-repeat: no-repeat;
  padding: 12px 12px 12px 40px;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  background-color: var(--sail-color-gray-50);
}
.LegacyContentWrapper article aside p,
.LegacyContentWrapper article aside li {
  font-size: 14px;
  line-height: 20px;
  padding-top: 0;
}
.LegacyContentWrapper article aside p code,
.LegacyContentWrapper article aside li code {
  font-size: 13px;
  line-height: 20px;
}
.LegacyContentWrapper article aside.important {
  display: block;
  background-image: url('https://stripe.com/img/documentation/icon-aside-important.svg');
}
.LegacyContentWrapper article aside.important:not(:first-child) {
  margin-top: 20px;
}
.LegacyContentWrapper article aside.important:not(:last-child) {
  margin-bottom: 10px;
}
.LegacyContentWrapper article aside.important ul li.ios-safari {
  background: url(https://stripe.com/img/documentation/mobile/ios-safari.png) left 3px no-repeat;
  background-size: 16px 16px;
}
.LegacyContentWrapper article aside.important ul li.ios-wallet {
  background: url(https://stripe.com/img/documentation/mobile/ios-wallet.png) left 3px no-repeat;
  background-size: 16px 16px;
}
.LegacyContentWrapper article aside.important h4 {
  margin-top: 0;
}
.LegacyContentWrapper article aside.important.flash {
  animation: aside-flash 0.5s ease-in-out infinite;
}
@keyframes aside-flash {
  0%,
  100% {
    border-color: rgba(58, 193, 51, 0.12);
  }

  50% {
    border-color: #31c326;
  }
}
/* - In page navigation */
.LegacyContentWrapper .docs-aside {
  padding-top: 8px;
  padding-left: 48px;
  min-width: 252px;
}
.LegacyContentWrapper .docs-toc {
  display: block;
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow-y: auto;
}
.LegacyContentWrapper .sidebar-mode-nothing .docs-aside {
  display: none;
}
.LegacyContentWrapper .sidebar-mode-definitions .docs-toc,
.LegacyContentWrapper .sidebar-mode-diagrams .docs-toc {
  display: none;
}
.LegacyContentWrapper .docs-toc.empty {
  display: none;
}
.LegacyContentWrapper .docs-toc h4 {
  font-size: 13px;
  color: var(--sail-color-text-gray);
  letter-spacing: -0.08px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}
.LegacyContentWrapper .docs-toc ul li {
  padding: 4px 0;
  margin-bottom: 4px;
}
.LegacyContentWrapper .docs-toc ul li a {
  font-size: 14px;
  color: var(--sail-color-text-gray);
  line-height: 18px;
}
.LegacyContentWrapper .docs-toc ul li.active a {
  color: var(--sail-color-text-black);
  font-weight: 500;
}
.LegacyContentWrapper .docs-toc ul li a:hover {
  color: var(--sail-color-text);
}
.LegacyContentWrapper .docs-definitions {
  position: relative;
  display: none;
}
.LegacyContentWrapper .sidebar-mode-definitions .docs-definitions {
  display: block;
}
.LegacyContentWrapper .docs-definitions .definition {
  position: absolute;
  left: 0;
  color: var(--sail-color-text);
  font-size: 14px;
  line-height: 20px;
  transform: scale(0.95);
  opacity: 0;
  transition: all 250ms ease;
}
.LegacyContentWrapper .docs-definitions .definition:before {
  content: '';
  position: absolute;
  left: -18px;
  top: 3px;
  width: 12px;
  height: 12px;
  background-image: url(https://stripe.com/img/documentation/icon-definition.svg);
  background-position: left top;
  background-repeat: no-repeat;
}
.LegacyContentWrapper .docs-definitions .definition-focused {
  transform: scale(1);
  opacity: 1;
}
/* - Links */
.LegacyContentWrapper article a,
.LegacyContentWrapper article a code,
.key-popover a {
  color: var(--sail-color-blue-500);
  font-weight: 500;
}
.LegacyContentWrapper article a:hover,
.LegacyContentWrapper article a:hover code,
.key-popover a:hover {
  color: var(--sail-color-blue-600);
}
.LegacyContentWrapper article a:active,
.LegacyContentWrapper article a:active code,
.key-popover a:active {
  color: #212d63;
}
.LegacyContentWrapper article a[href^='/docs/api']:not(.no-api-tag),
.LegacyContentWrapper article a[href^='/docs/js']:not(.no-api-tag) {
  position: relative;
  padding-right: 20px;
  display: inline-block;
}
.LegacyContentWrapper article a[href^='/docs/api']:not(.no-api-tag):after,
.LegacyContentWrapper article a[href^='/docs/js']:not(.no-api-tag):after {
  position: absolute;
  content: '';
  display: inline-block;
  margin-left: 4px;
  margin-right: -20px;
  width: 20px;
  height: 12px;
  background-image: url('https://stripe.com/img/documentation/icon-api-link.svg');
  background-repeat: no-repeat;
  background-size: 16px auto;
  bottom: 5px;
}
.LegacyContentWrapper article a[href^='/docs/js']:not(.no-api-tag):after {
  background-image: url('https://stripe.com/img/documentation/icon-js-link.svg');
}
.LegacyContentWrapper article table a[href^='/docs/api']:after,
.LegacyContentWrapper article aside a[href^='/docs/api']:after,
.LegacyContentWrapper article table a[href^='/docs/js']:after,
.LegacyContentWrapper article aside a[href^='/docs/js']:after {
  bottom: 2px;
}
.LegacyContentWrapper article a.no-api-tag:after {
  display: none !important;
}
/* - Typography */
.LegacyContentWrapper article strong {
  font-weight: 500;
  color: var(--sail-color-text-black);
}
.LegacyContentWrapper article[data-locale='ja'] em {
  font-style: normal;
}
.LegacyContentWrapper article code {
  font-family: 'Menlo', 'Consolas', monospace;
}
.LegacyContentWrapper article p code,
.LegacyContentWrapper article li > code,
.LegacyContentWrapper article dt > code,
.LegacyContentWrapper table tbody td > label > code,
.LegacyContentWrapper table tbody td > code {
  font-size: 15px;
  border-radius: 4px;
  color: var(--sail-color-text);
  font-weight: 500;
  background: var(--sail-color-gray-50);
  border: 1px solid var(--sail-color-gray-100);
  padding: 1px 2px;
}
.LegacyContentWrapper li pre code .token.string {
  color: #85d99e;
}
/* - Lists */
.LegacyContentWrapper article ul,
.LegacyContentWrapper article ol {
  counter-reset: listitem;
  list-style: none;
}
.LegacyContentWrapper article ul:not(:first-child),
.LegacyContentWrapper article ol:not(:first-child) {
  margin-top: 8px;
}
.LegacyContentWrapper article li > ul,
.LegacyContentWrapper article li > ol {
  margin-top: 0px !important;
}
.LegacyContentWrapper article ul > li,
.LegacyContentWrapper article ol > li {
  position: relative;
  margin: 4px 0;
  padding-left: 32px;
}
.LegacyContentWrapper article ul > li:before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  left: 8px;
  top: 10px;
  border-radius: 50%;
  background: var(--sail-color-gray-200);
}
.LegacyContentWrapper article ul.no-style > li:before {
  display: none;
}
.LegacyContentWrapper article ul.country-list {
  column-count: 4;
  column-fill: auto;
  list-style-type: none;
}
.LegacyContentWrapper article ul.country-list > li {
  padding-left: 10px;
}
.LegacyContentWrapper .developer-tools {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(463px, 50%));
  grid-gap: 20px;
}
.LegacyContentWrapper .half-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  text-decoration: none;
  transition: all 200ms ease-in-out;
  width: 100%;
  margin-top: 20px;
  padding: 32px 32px 0 32px;
}
.LegacyContentWrapper .half-card ul > li:before {
  display: none;
}
.LegacyContentWrapper .half-card ul li {
  margin: 0 0 20px 0;
  padding: 0;
}
.LegacyContentWrapper .half-card-image {
  width: 100%;
  min-height: 160px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  margin: 10px 20px 0 0;
  border-radius: 0;
}
.LegacyContentWrapper .half-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 21px;
  color: var(--sail-text-color-link);
  font-weight: 500;
}
.LegacyContentWrapper .half-card-subheader {
  font-size: 14px;
  color: var(--sail-color-text-gray);
  margin-top: 4px;
}
.LegacyContentWrapper .half-card ul li p {
  font-size: 14px;
  font-weight: 400;
  color: var(--sail-color-text);
  line-height: 20px;
  padding-top: 4px;
}
.LegacyContentWrapper .youtube-image {
  width: 100%;
  border-radius: 0;
}
.LegacyContentWrapper .half-card .api-ref-link {
  background: url(https://stripe.com/img/documentation/index/icon-api-reference.svg) no-repeat;
  background-size: 16px 16px;
  background-position-y: 2px;
  padding-left: 36px;
}
.LegacyContentWrapper .half-card .libraries-link {
  background: url(https://stripe.com/img/documentation/index/icon-libraries.svg) no-repeat;
  background-size: 16px 16px;
  background-position-y: 2px;
  padding-left: 36px;
}
.LegacyContentWrapper .half-card .community-link {
  background: url(https://stripe.com/img/documentation/index/icon-community.svg) no-repeat;
  background-size: 16px 16px;
  background-position-y: 2px;
  padding-left: 36px;
}
.LegacyContentWrapper .half-card .youtube-link {
  background: url(https://stripe.com/img/documentation/index/icon-youtube.svg) no-repeat;
  background-size: 16px 16px;
  background-position-y: 2px;
  padding-left: 36px;
}
.LegacyContentWrapper .half-card .email-link {
  background: url(https://stripe.com/img/documentation/index/icon-email.svg) no-repeat;
  background-size: 16px 16px;
  background-position-y: 2px;
  padding-left: 36px;
}
.LegacyContentWrapper footer .collect-email-guide {
  margin-top: 0;
}
.LegacyContentWrapper article ul.checkmarks > li:before {
  width: 12px;
  height: 12px;
  left: 7px;
  top: 7px;
  border-radius: 0;
  background: url('https://stripe.com/img/documentation/icon-checkmark.svg');
  background-size: 12px 12px;
  background-repeat: no-repeat;
}
.LegacyContentWrapper article ol > li:before {
  counter-increment: listitem;
  content: counter(listitem);
  background: var(--sail-color-gray-100);
  color: var(--sail-color-text-gray);
  font-size: 12px;
  font-weight: 500;
  line-height: 10px;
  text-align: center;
  padding: 5px 0;
  height: 10px;
  width: 20px;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 3px;
}
.LegacyContentWrapper article ol.list-decimal > li:before {
  counter-increment: listitem;
  content: counter(listitem, decimal);
}
.LegacyContentWrapper article ol.list-lower-roman > li:before {
  counter-increment: listitem;
  content: counter(listitem, lower-roman);
}
.LegacyContentWrapper article ol.list-lower-alpha > li:before {
  counter-increment: listitem;
  content: counter(listitem, lower-alpha);
}
.LegacyContentWrapper article ol.list-upper-alpha > li:before {
  counter-increment: listitem;
  content: counter(listitem, upper-alpha);
}
/* - Large items lists */
.LegacyContentWrapper article ul.large-items {
  display: flex;
  margin: 15px -17px 0;
}
.LegacyContentWrapper article ul.large-items:first-child {
  margin-top: 0;
}
.LegacyContentWrapper article ul.large-items > li {
  padding: 0 17px;
}
.LegacyContentWrapper article ul.large-items > li h2,
.LegacyContentWrapper article ul.large-items > li h3,
.LegacyContentWrapper article ul.large-items > li h4,
.LegacyContentWrapper article ul.large-items > li h5 {
  margin-top: 0;
  padding: 0;
}
.LegacyContentWrapper article ul.large-items > li:before {
  top: 0;
  left: auto;
  right: 0;
  width: 2px;
  height: 100%;
  background: transparent;
}
.LegacyContentWrapper article ul.large-items > li:last-child:before {
  display: none;
}
.LegacyContentWrapper article ul.large-items > li a {
  text-decoration: none;
  display: block;
}
.LegacyContentWrapper article ul.large-items > li h3 {
  position: relative;
  display: inline-block;
  color: var(--sail-color-blue-500);
  font-size: 16px;
  font-weight: 500;
}
.LegacyContentWrapper article ul.large-items > li h3:after {
  content: '';
  position: absolute;
  top: 7px;
  right: -16px;
  width: 12px;
  height: 12px;
  background-image: url('https://stripe.com/img/documentation/icon-arrow-blue-small.svg');
  background-size: 12px 12px;
  background-repeat: no-repeat;
}
@keyframes arrow-bounce {
  60% {
    transform: translateX(8px);
  }

  70% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(2px);
  }

  90% {
    transform: translateX(-1px);
  }
}
.LegacyContentWrapper article ul.large-items > li a:hover h3:after {
  animation: arrow-bounce 1s cubic-bezier(0.4, 0.04, 0.4, 1);
}
.LegacyContentWrapper article ul.large-items > li p {
  padding-top: 0px;
  font-size: 14px;
  line-height: 20px;
}
/* - Tables */
.LegacyContentWrapper article table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.LegacyContentWrapper article table:not(:first-child) {
  margin-top: 20px;
}
.LegacyContentWrapper article table table {
  margin: 16px 0 8px 0;
}
.LegacyContentWrapper article table thead tr th {
  font-weight: 500;
  font-size: 13px;
  color: var(--sail-color-text-gray);
  text-transform: uppercase;
  text-align: left;
  padding: 0 0 8px 16px;
}
.LegacyContentWrapper article table thead tr th p {
  font-size: 13px;
  color: var(--sail-color-text);
  text-transform: uppercase;
  padding: 0;
  line-height: 15px;
}
.LegacyContentWrapper article table tbody,
.LegacyContentWrapper article table tbody td > * {
  font-size: 14px;
  line-height: 20px;
  vertical-align: top;
  padding-top: 0;
}
.LegacyContentWrapper article table tbody tr td {
  border-color: var(--sail-color-gray-100);
  border-style: solid;
  padding: 16px 16px;
}
.LegacyContentWrapper article table tbody tr td:first-child {
  border-left-width: 1px;
}
.LegacyContentWrapper article table tbody tr td:last-child {
  border-right-width: 1px;
}
.LegacyContentWrapper article table tbody tr:first-child > td {
  border-top-width: 1px;
}
.LegacyContentWrapper article table tbody tr td {
  border-bottom-width: 1px;
}
.LegacyContentWrapper article table tbody tr:first-child > td:first-child {
  border-top-left-radius: 4px;
}
.LegacyContentWrapper article table tbody tr:first-child > td:last-child {
  border-top-right-radius: 4px;
}
.LegacyContentWrapper article table tbody tr:last-child > td:first-child {
  border-bottom-left-radius: 4px;
}
.LegacyContentWrapper article table tbody tr:last-child > td:last-child {
  border-bottom-right-radius: 4px;
}
.LegacyContentWrapper article table.alternate tbody tr:nth-child(2n + 1) td {
  background: var(--sail-color-gray-50);
}
.LegacyContentWrapper article table.reference th:first-child {
  text-align: right;
  padding: 0 9px 7px 16px;
}
.LegacyContentWrapper article table.reference td {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
}
.LegacyContentWrapper article table.reference td:first-child {
  text-align: right;
}
.LegacyContentWrapper article table.reference td:first-child code {
  display: block;
  margin-bottom: 4px;
}
.LegacyContentWrapper article table.reference td:first-child code,
.LegacyContentWrapper article table.reference .attr {
  text-align: right;
}
.LegacyContentWrapper article table.reference .attr {
  color: var(--sail-color-text);
  font-weight: 500;
}
.LegacyContentWrapper article table.reference .type {
  text-align: right;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--sail-color-gray-400);
}
.LegacyContentWrapper article table.separated tbody tr td:not(:last-child) {
  border-right-width: 1px;
}
/* - Card numbers */
.LegacyContentWrapper .card-number,
.LegacyContentWrapper .card-token {
  white-space: nowrap;
  font-family: 'Menlo', 'Consolas', monospace;
  color: var(--sail-color-text);
  font-weight: 500;
}
.LegacyContentWrapper .card-number span {
  display: inline-block;
  width: 8px;
}
/* - Code */
.LegacyContentWrapper article .tabs-code,
.LegacyContentWrapper article .code {
  width: 100%;
}
.LegacyContentWrapper article .code:not(:first-child) {
  margin-top: 12px;
}
.LegacyContentWrapper article .tabs-code .tabs-content .code {
  margin-top: 0px;
}
.LegacyContentWrapper article .code {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.LegacyContentWrapper article pre:not(:first-child) {
  margin-top: 0;
}
.LegacyContentWrapper article pre:not(:last-child) {
  padding-bottom: 16px;
}
.LegacyContentWrapper article .tabs-code > .tabs-content {
  background: rgb(33, 45, 99);
  border-radius: 0 0 4px 4px;
}
.LegacyContentWrapper article nav.nav-filename + pre {
  border-radius: 0 0 4px 4px;
}
.LegacyContentWrapper article nav.nav-filename + pre + nav.nav-filename {
  border-radius: 0;
  /* Make the nav overlay the previous pre's border radius */
  margin-top: -3px;
  z-index: 2;
}
.LegacyContentWrapper article pre {
  background: rgb(33, 45, 99);
  overflow-x: auto;
  font-size: 13px;
  line-height: 19px;
  border-radius: 4px;
  margin-bottom: 0px;
}
.LegacyContentWrapper article pre .file-content-wrapper {
  display: inline-block;
  min-width: 100%;
  /* This transform allows the line highlights within code blocks to be position: fixed,
     but positioned relative to the content wrapper rather than relative to the viewport. */
  transform: scale(1);
}
.LegacyContentWrapper article pre.not-numbered code {
  padding-left: 24px;
}
.LegacyContentWrapper article pre.wrap {
  white-space: normal;
  word-wrap: break-word;
}
.LegacyContentWrapper article pre code {
  display: inline-block;
  position: relative;
  min-width: 100%;
  padding: 12px 14px 12px 64px;
  z-index: 2;
  font-family: 'Menlo', 'Consolas', monospace;
  color: #f5fbff;
  font-weight: 500;
}
.LegacyContentWrapper article pre .line-numbers {
  z-index: 2;
  color: rgba(255, 255, 255, 0.5);
}
.LegacyContentWrapper article pre .highlighted-line,
.LegacyContentWrapper article pre .added-line,
.LegacyContentWrapper article pre .removed-line {
  position: fixed;
  left: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
}
.LegacyContentWrapper article pre .added-line {
  background-color: #004f54;
}
.LegacyContentWrapper article pre .removed-line {
  background-color: #6d204f;
}
.LegacyContentWrapper article pre .line-markers {
  margin-left: 6px;
}
.LegacyContentWrapper article pre .line-markers span {
  display: block;
  color: #bec5ca;
  font-size: 13px;
}
.LegacyContentWrapper article pre .added-line .line-markers span::before {
  content: '+';
}
.LegacyContentWrapper article pre .removed-line .line-markers span::after {
  content: '-';
}
.LegacyContentWrapper article .code > nav,
.LegacyContentWrapper article .tabs-code > nav {
  padding-bottom: 8px;
  padding-left: 4px;
  line-height: 16px;
  width: 100%;
}
.LegacyContentWrapper article li .code,
.LegacyContentWrapper article li .tabs-code {
  margin-bottom: 12px;
}
.LegacyContentWrapper article li .tabs-code:not(:first-child),
.LegacyContentWrapper article li .code:not(:first-child) {
  margin-top: 4px;
}
.LegacyContentWrapper article li .code,
.LegacyContentWrapper article li .tabs-code .tabs-content {
  margin-top: 0;
}
.LegacyContentWrapper article .code .extra-lines {
  display: none;
}
.LegacyContentWrapper article .code pre {
  flex: 1;
}
.LegacyContentWrapper article .code pre.highlighted-line.has-extra-lines {
  overflow-y: hidden;
}
.LegacyContentWrapper article .code .show-extra-lines {
  background: var(--sail-color-blue-800);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  display: block;
  margin-top: -20px;
  line-height: 26px;
  padding-left: 64px;
  border-radius: 0 0 4px 4px;
  color: var(--sail-color-blue-200);
  padding: 8px 0 12px 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.LegacyContentWrapper article .code .show-extra-lines:hover {
  color: var(--sail-color-blue-300);
}
.LegacyContentWrapper article .code .show-extra-lines::after {
  content: '...';
  position: absolute;
  left: 29px;
  top: 10px;
  color: var(--sail-color-blue-200);
  line-height: 19px;
  font-size: 11px;
  letter-spacing: -2px;
  font-family: 'Menlo', 'Consolas', monospace;
}
.LegacyContentWrapper article .code .show-extra-lines:active::after {
  color: var(--sail-color-blue-500);
}
.LegacyContentWrapper article .tabs-code > nav {
  background: #1a2652;
  border-radius: 4px 4px 0 0;
  padding: 4px 16px;
}
.LegacyContentWrapper article .tabs-code > nav a {
  font-size: 13px;
  color: var(--sail-color-gray-300);
  font-weight: 500;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  line-height: 24px;
  padding: 0 12px 0 0;
}
.LegacyContentWrapper article .tabs-code > nav a:active {
  color: var(--sail-color-blue-300);
}
.LegacyContentWrapper article .tabs-code > nav a.selected {
  color: var(--sail-color-blue-300);
}
.LegacyContentWrapper article .code > nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  font-size: 13px;
  color: var(--sail-color-text);
  font-weight: 500;
  background-size: 14px 12px;
  background-position: 6px 1px;
  background-repeat: no-repeat;
  padding-left: 32px;
  line-height: 14px;
}
.LegacyContentWrapper article .code > nav.nav-filename {
  flex: none;
  background-position: 13px 10px;
  background-color: #1a2652;
  padding-top: 7px;
  border-radius: 4px 4px 0 0;
  color: var(--sail-color-gray-300);
  font-size: 13px;
  line-height: 14px;
}
.LegacyContentWrapper article .code > nav.nav-filename p {
  color: var(--sail-color-gray-200);
  font-size: 13px;
  padding-top: 0px;
  line-height: 14px;
}
.LegacyContentWrapper article .nav-filename.icon-file {
  background-image: url('https://stripe.com/img/documentation/icon-file.svg');
}
.LegacyContentWrapper article .nav-filename.icon-terminal {
  background-image: url('https://stripe.com/img/documentation/icon-terminal.svg');
}
.LegacyContentWrapper article .nav-filename a.github,
.LegacyContentWrapper article .nav-filename a.download {
  position: relative;
  padding-right: 21px;
  margin-right: 7px;
  color: var(--sail-color-gray-100);
}
.LegacyContentWrapper article .nav-filename a.github:hover,
.LegacyContentWrapper article .nav-filename a.download:hover {
  color: var(--sail-color-gray-300);
}
.LegacyContentWrapper article .nav-filename a.github:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background-image: url('https://stripe.com/img/documentation/icon-github.svg');
  background-size: 15px 30px;
  background-position: left top;
  background-repeat: no-repeat;
}
.LegacyContentWrapper article .nav-filename a.github:active:after {
  background-position: left bottom;
}
/* - Q/A */
.LegacyContentWrapper article dl:not(:first-child) {
  padding-top: 12px;
}
.LegacyContentWrapper article dl dt {
  position: relative;
  background-image: url('https://stripe.com/img/documentation/icon-question.svg');
  background-size: 12px 12px;
  background-position: 8px 6px;
  background-repeat: no-repeat;
  padding-left: 32px;
  overflow: hidden;
}
.LegacyContentWrapper article dl.info dt {
  background-image: url('https://stripe.com/img/documentation/icon-aside-check.svg');
  background-size: 12px 12px;
  background-position: 8px 7px;
  padding: 0 0 0 32px;
}
.LegacyContentWrapper article dl.info h3 > code {
  border-radius: 4px;
  color: #3c4257;
  font-weight: 500;
  font-size: 15px;
  background: #f7fafc;
  border: 1px solid #e3e8ee;
  padding: 1px 2px;
}
.LegacyContentWrapper article dl dt:not(:first-child) {
  margin-top: 10px;
}
.LegacyContentWrapper article dl dd {
  padding: 4px 0 12px 32px;
}
.LegacyContentWrapper article dl.collapsable dt {
  background: transparent;
  cursor: pointer;
}
.LegacyContentWrapper article dl.collapsable dt:active {
  opacity: 0.7;
}
.LegacyContentWrapper article dl.collapsable dt:after {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: url('https://stripe.com/img/documentation/icon-question-arrow.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: transform 250ms cubic-bezier(0.29, 1.5, 0.5, 1);
}
.LegacyContentWrapper article dl.collapsable .collapsable-section {
  padding: 12px 0 0 0;
}
.LegacyContentWrapper article dl.collapsable .collapsable-section,
.LegacyContentWrapper article dl.collapsable dd {
  background: transparent;
  display: none;
}
.LegacyContentWrapper article dl.collapsable .expanded:after {
  transform: rotateZ(90deg);
}
.LegacyContentWrapper article dl.collapsable .expanded + .collapsable-section,
.LegacyContentWrapper article dl.collapsable .expanded + dd {
  display: block;
}
/* Expandos */
.LegacyContentWrapper article .expando {
  position: relative;
  border-bottom: 1px solid var(--sail-color-line-divider);
  transition: all 100ms ease-in-out;
}
.LegacyContentWrapper article .expando:first-of-type {
  border-top: 1px solid var(--sail-color-line-divider);
  margin-top: 40px;
}
.LegacyContentWrapper article section > .expando {
  margin-top: 0px;
}
.LegacyContentWrapper article .expando:hover {
  border-bottom: 1px solid var(--sail-color-gray-200);
}
.LegacyContentWrapper article section .expando:first-child {
  margin-top: 0;
}
.LegacyContentWrapper p + .expando {
  border-top: 1px solid var(--sail-color-line-divider);
}
.LegacyContentWrapper article .expando[aria-expanded='true'] .expando-title {
  cursor: pointer;
  margin-top: 0;
  padding-left: 0px;
  padding-right: 32px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.LegacyContentWrapper article .expando .expando-title {
  cursor: pointer;
  margin-top: 0;
  padding: 20px 0;
  padding-right: 32px;
}
.LegacyContentWrapper article .expando .expando-title:hover {
  color: var(--sail-color-gray-600);
}
.LegacyContentWrapper article .expando .expando-title:focus {
  outline: none;
}
.LegacyContentWrapper article .expando .expando-title:active {
  opacity: 0.7;
}
.LegacyContentWrapper article .expando .expando-title:after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: url('https://stripe.com/img/documentation/arrow-gray.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: rotate(90deg);
  transition: transform 250ms cubic-bezier(0.29, 1.5, 0.5, 1);
}
.LegacyContentWrapper article .expando[aria-expanded='true'] .expando-title:after {
  transform: rotate(270deg);
  top: 24px;
  margin-top: 0;
}
.LegacyContentWrapper article .expando .expando-left-text {
  color: #8898aa;
  padding-right: 4px;
}
.LegacyContentWrapper article .expando .expando-trigger {
  color: #3b415e;
}
.LegacyContentWrapper article .expando .expando-trigger:focus {
  outline: none;
}
.LegacyContentWrapper article .expando .expando-content {
  display: none;
  padding: 10px 0 40px;
}
.LegacyContentWrapper article .expando[aria-expanded='true'] .expando-content {
  display: block;
}
.LegacyContentWrapper article .expando[aria-expanded='true'] .expando-content:after {
  display: block;
  content: '';
  /* clear the expando so <aside> tags don't bleed over the bottom edge */
  clear: both;
}
.LegacyContentWrapper article .expando[aria-expanded='true'] .expando-content:focus {
  outline: none;
}
.LegacyContentWrapper article h3.expando .tag {
  text-transform: none;
}
.LegacyContentWrapper article .expando-title .tag {
  white-space: nowrap;
}
/* - Checklist */
.LegacyContentWrapper article dl.checklist dt {
  background: none;
  padding-left: 0px;
  font-weight: 500;
}
.LegacyContentWrapper article dl.checklist dt label {
  cursor: pointer;
}
.LegacyContentWrapper article dl.checklist input[type='checkbox'] {
  margin-right: 14px;
  margin-top: 7px;
  margin-left: 6px;
  display: block;
  float: left;
}
.LegacyContentWrapper article dl.checklist dd {
  margin-bottom: 20px;
  margin-left: 0;
}
/* - Anchors */
.LegacyContentWrapper article a.anchor {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url('https://stripe.com/img/documentation/icon-anchor.svg');
  background-size: 100% 100%;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
.LegacyContentWrapper article h2 a.anchor {
  width: 16px;
  height: 16px;
}
.LegacyContentWrapper article h3 a.anchor {
  width: 14px;
  height: 14px;
}
.LegacyContentWrapper article h1:hover a.anchor,
.LegacyContentWrapper article h2:hover a.anchor,
.LegacyContentWrapper article h3:hover a.anchor,
.LegacyContentWrapper article h4:hover a.anchor,
.LegacyContentWrapper article h5:hover a.anchor,
.LegacyContentWrapper article h6:hover a.anchor {
  opacity: 1;
}
/* - Tabs */
.LegacyContentWrapper article .tabs:not(:first-child) {
  margin-top: 18px;
}
.LegacyContentWrapper article .tabs-regular .nav-tabs {
  line-height: 32px;
  font-size: 16px;
  height: 36px;
  border-bottom: 1px solid var(--sail-color-gray-100);
  color: var(--sail-color-text);
}
.LegacyContentWrapper article section .tabs-regular .nav-tabs,
.LegacyContentWrapper article .expando .tabs-regular .nav-tabs {
  font-size: 14px;
  margin-top: 20px;
  line-height: 24px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--sail-color-gray-100);
  color: var(--sail-color-text);
}
.LegacyContentWrapper article section .tabs-regular .nav-tabs a,
.LegacyContentWrapper article .expando .tabs-regular .nav-tabs a {
  padding: 0 8px;
}
.LegacyContentWrapper article .tabs-regular .nav-tabs.with-select {
  padding-bottom: 56px;
}
.LegacyContentWrapper article .tabs-regular .nav-tabs select {
  font-size: 14px;
  font-weight: 600;
  color: var(--sail-color-text-link);
  background-color: var(--sail-color-gray-50);
  border: 1px solid var(--sail-color-gray-100);
  outline: none;
  padding: 6px 12px 6px 8px;
  margin: 0 0 20px 8px;
  -webkit-appearance: none;
  background-image: url('https://stripe.com/img/documentation/icon-select-arrows.svg');
  background-size: 8px 12px;
  background-position: bottom 11px right 12px;
  min-width: 240px;
  background-repeat: no-repeat;
}
.LegacyContentWrapper article .tabs-regular .nav-tabs select:hover {
  border: 1px solid var(--sail-color-gray-200);
}
.LegacyContentWrapper article .tabs-regular .nav-tabs select:focus {
  border: 1px solid var(--sail-color-blue-200);
}
.LegacyContentWrapper article .tabs-regular .nav-tabs a {
  display: inline-block;
  height: 36px;
  color: var(--sail-color-text-gray);
  padding: 0 16px;
  margin-right: 2px;
  cursor: pointer;
  text-decoration: none;
}
.LegacyContentWrapper article .tabs-regular .nav-tabs a.selected {
  border-bottom: 2px solid var(--sail-color-blue-500);
  color: var(--sail-color-blue-500);
  font-weight: 500;
}
.LegacyContentWrapper article .tabs-content {
  position: relative;
}
.LegacyContentWrapper article .tabs-content.animating {
  overflow: hidden;
}
.LegacyContentWrapper article .tabs-content > pre,
.LegacyContentWrapper article .tabs-content > .code,
.LegacyContentWrapper article .tabs-content .tabs-tab {
  display: none;
  background: transparent;
  border-radius: 0;
}
.LegacyContentWrapper article .tabs-content > pre.selected,
.LegacyContentWrapper article .tabs-content > .code.selected,
.LegacyContentWrapper article .tabs-content > .tabs-tab.selected {
  display: block;
}
.LegacyContentWrapper article .tabs-content > .tabs-tab.selected,
.LegacyContentWrapper article .tabs-content > .tabs-tab.selected + .tabs-tab {
  will-change: transform, opacity;
}
.LegacyContentWrapper article .tabs-content > .tabs-tab.tabs-tab-result:not(.absolute) {
  position: relative;
}
.LegacyContentWrapper article .tabs-content > .tabs-tab.tabs-tab-result {
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  line-height: 0;
}
.LegacyContentWrapper article .tabs-content > .tabs-tab {
  padding-top: 20px;
}
.LegacyContentWrapper article .tabs-content .absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
/* New IA styles */
/* new payments index styles */
.LegacyContentWrapper header + :not(.home-payments-hero) {
  margin-top: 0px;
}
.LegacyContentWrapper header + .guide-cards-container,
.LegacyContentWrapper .guide-cards-container + .guide-cards-container,
.LegacyContentWrapper .developer-tools + .guide-cards-container,
.LegacyContentWrapper .sample-projects + .guide-cards-container {
  margin-top: 48px;
}
.LegacyContentWrapper article .guide-cards-container + h2 {
  margin-top: 28px;
}
.LegacyContentWrapper .sample-projects {
  margin-top: 48px;
}
.LegacyContentWrapper .split-hero,
.LegacyContentWrapper .connect-preview {
  position: relative;
}
.LegacyContentWrapper .hero + .guide-cards-container {
  margin-top: 0;
  padding-top: 48px;
  border-top: 1px solid var(--sail-color-gray-100);
}
.LegacyContentWrapper .split-hero-content,
.LegacyContentWrapper .guide-cards-content {
  position: relative;
  z-index: 1;
}
.LegacyContentWrapper .guide-cards-content {
  display: flex;
  flex-direction: column;
}
.LegacyContentWrapper .split-hero {
  padding-top: 48px;
}
.LegacyContentWrapper .split-hero-image {
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 4px;
  height: 200px;
  width: 100%;
  min-width: 250px;
  transition: box-shadow 0.2s ease-in-out;
}
.LegacyContentWrapper .home-split-hero .split-hero-image {
  background-position: initial;
}
.LegacyContentWrapper .split-hero-image:hover {
  box-shadow: var(--guide-card-hover-shadow);
}
.LegacyContentWrapper .split-hero-image-container {
  margin-bottom: 16px;
}
.LegacyContentWrapper .split-hero .split-hero-content {
  justify-content: space-between;
}
.LegacyContentWrapper .split-hero .left-col,
.LegacyContentWrapper .split-hero .right-col {
  max-width: 44%;
  min-width: 250px;
}
.LegacyContentWrapper .split-hero .divider {
  width: 1px;
  min-height: 300px;
  background: var(--sail-color-gray-100);
  margin-top: 5%;
}
.LegacyContentWrapper .split-hero .split-hero-content .product-badge {
  padding: 12px 0 0 0;
}
.LegacyContentWrapper .split-hero .split-hero-content .product-badge + h2 {
  margin-top: 4px;
}
.LegacyContentWrapper .split-hero .split-hero-content h2 {
  font-size: 22px;
  margin: 0;
  padding: 8px 0 0 0;
  font-weight: 700;
}
.LegacyContentWrapper .split-hero .split-hero-content p {
  padding-top: 8px;
}
.LegacyContentWrapper .hero-container {
  margin-top: 0;
}
.LegacyContentWrapper .hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin: 48px 0 0 0;
  padding: 0;
  position: relative;
  min-height: 280px;
}
.LegacyContentWrapper .hero > div:not(.hero-screen) {
  flex-basis: 0;
  flex-grow: 1;
  z-index: 2;
}
.LegacyContentWrapper .hero:first-child > div:not(.hero-screen) {
  padding: 0;
}
.LegacyContentWrapper .hero .hero-left {
  padding-right: 36px;
  min-width: 280px;
}
.LegacyContentWrapper .hero .hero-left h2 {
  font-size: 24px;
  margin-top: 0;
  padding-top: 16px;
}
.LegacyContentWrapper .hero .hero-left p {
  font-size: 16px;
}
.LegacyContentWrapper .hero .hero-right .rounded-top-image {
  border-radius: 8px 8px 0px 0px;
}
.LegacyContentWrapper .hero .hero-left .body-header-text {
  font-size: 20px;
}
.LegacyContentWrapper .hero.hero-payment-methods {
  margin-top: 0px;
  border-bottom: 1px solid var(--sail-color-gray-100);
}
.LegacyContentWrapper .hero.hero-payment-methods .hero-right img {
  width: 480px;
  right: -12px;
}
.LegacyContentWrapper .hero .content .button {
  background: white;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(60, 66, 87, 0.12) 0px 2px 5px 0px;
  /* box-shadow: 0 2px 5px 0 rgba(50, 50, 93, .20), 0 1px 1px 0 rgba(0, 0, 0, .14); */
  color: var(--sail-color-text);
  margin-top: 2px;
  transition: box-shadow 150ms ease-in-out;
}
.LegacyContentWrapper .hero .content .button:hover {
  color: var(--sail-color-text-black);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(60, 66, 87, 0.15) 0px 3px 5px 1px;
}
.LegacyContentWrapper .hero.home-payments-hero .content .hero-cta {
  padding-top: 16px;
}
.LegacyContentWrapper .hero.home-payments-hero .content .button {
  background: var(--sail-color-blue-500);
  color: white;
}
.LegacyContentWrapper .hero.home-payments-hero {
  margin-top: -4px;
  border-bottom: 1px solid var(--sail-color-gray-100)
}
.LegacyContentWrapper .hero.home-payments-hero .hero-left {
  flex-grow: 4;
  min-width: 400px;
}
.LegacyContentWrapper .hero.home-payments-hero .hero-right {
  flex-grow: 5;
}
.LegacyContentWrapper .hero.home-payments-hero .hero-left p:not(.guide-link) {
  font-size: 19px;
}
.LegacyContentWrapper .hero.home-payments-hero .hero-right img {
  width: 496px;
}
.LegacyContentWrapper .split-hero p.guide-link,
.LegacyContentWrapper .hero p.guide-link {
  font-size: 13px;
  padding: 2px 0;
  line-height: 18px;
}
.LegacyContentWrapper .hero.development-vscode-hero {
  margin-top: 0;
}
.LegacyContentWrapper p.guide-link:before {
  display: inline-block;
  content: '';
  background: url(https://stripe.com/img/documentation/index/icon-document.svg);
  background-repeat: no-repeat;
  width: 15px;
  height: 12px;
  top: 1px;
  position: relative;
  opacity: 0.9;
  background-size: 10px 13px;
}
.LegacyContentWrapper .hero .guide-links-container {
  margin-top: 10px;
  display: none;
}
.LegacyContentWrapper .hero .hero-badges-container {
  margin-top: 18px;
  line-height: 32px;
}
.LegacyContentWrapper .guide-cards-quick-links {
  margin-top: 18px;
  line-height: 32px;
}
.LegacyContentWrapper .hero .hero-badge,
.LegacyContentWrapper .guide-cards-quick-links .quick-link {
  font-size: 13px;
  line-height: 18px;
  color: var(--sail-color-gray-500);
  background: #f3f3f3;
  display: inline-block;
  border-radius: 6px;
  padding: 3px 8px 3px 6px;
  margin-right: 6px;
  font-weight: 500;
}
.LegacyContentWrapper .guide-cards-quick-links .quick-link:hover {
  color: var(--sail-color-gray-600);
}
.LegacyContentWrapper .split-hero .guide-links-container {
  margin-top: 16px;
}
.LegacyContentWrapper .split-hero .split-hero-content p.hero-cta {
  padding-top: 4px;
}
.LegacyContentWrapper .guide-links-container h5 {
  color: var(--sail-color-gray-400);
  font-size: 11px;
  text-transform: uppercase;
  padding-bottom: 8px;
  font-weight: 600;
}
.LegacyContentWrapper .tabs.payments-tabs + .guide-cards-container {
  margin-top: 0px;
}
.LegacyContentWrapper .tabs .guide-cards-container {
  margin-top: 0;
  min-height: 320px; /* prevents moving when switching tabs */
}
.LegacyContentWrapper article .hero .hero-right {
  text-align: right;
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
}
.LegacyContentWrapper .hero .hero-right img {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  position: relative;
  width: 500px;
  align-self: flex-start;
}
.LegacyContentWrapper .hero .hero-right img.business-hero-img {
  height: 233px;
}
.LegacyContentWrapper .flex {
  display: flex;
  flex: 1;
}
.LegacyContentWrapper .flex-row {
  flex-direction: row;
}
.LegacyContentWrapper .flex-column {
  flex-direction: column;
}
.LegacyContentWrapper .flex-space-between {
  justify-content: space-between;
}
.LegacyContentWrapper .flex-align-center {
  align-items: center;
}
.LegacyContentWrapper .flex-align-start {
  align-items: flex-start;
}
.LegacyContentWrapper .flex-grow {
  flex-grow: 1;
}
.LegacyContentWrapper .product-badge-label {
  color: var(--sail-color-gray-400);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}
.LegacyContentWrapper .product-badge .product-icon {
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 0;
  margin-right: 8px;
}
.LegacyContentWrapper .product-badge.with-link {
  cursor: pointer;
}
.LegacyContentWrapper .product-badge.with-link:hover .product-badge-label {
  color: var(--sail-color-gray-500);
}
.LegacyContentWrapper .product-icon.payments {
  background-image: url('https://stripe.com/img/documentation/product-icons/payments.svg');
}
.LegacyContentWrapper .product-icon.connect {
  background-image: url('https://stripe.com/img/documentation/product-icons/connect.svg');
}
.LegacyContentWrapper .product-icon.billing {
  background-image: url('https://stripe.com/img/documentation/product-icons/billing.svg');
}
.LegacyContentWrapper .product-icon.terminal {
  background-image: url('https://stripe.com/img/documentation/product-icons/terminal.svg');
}
.LegacyContentWrapper .product-icon.sigma {
  background-image: url('https://stripe.com/img/documentation/product-icons/sigma.svg');
}
.LegacyContentWrapper .product-icon.atlas {
  background-image: url('https://stripe.com/img/documentation/product-icons/atlas.svg');
}
.LegacyContentWrapper .product-icon.capital {
  background-image: url('https://stripe.com/img/documentation/product-icons/capital.svg');
}
.LegacyContentWrapper .product-icon.elements {
  background-image: url('https://stripe.com/img/documentation/product-icons/elements.svg');
}
.LegacyContentWrapper .product-icon.checkout {
  background-image: url('https://stripe.com/img/documentation/product-icons/checkout.svg');
}
.LegacyContentWrapper .product-icon.corporate-card {
  background-image: url('https://stripe.com/img/documentation/product-icons/corporatecard.svg');
}
.LegacyContentWrapper .product-icon.invoicing {
  background-image: url('https://stripe.com/img/documentation/product-icons/invoicing.svg');
}
.LegacyContentWrapper .product-icon.issuing {
  background-image: url('https://stripe.com/img/documentation/product-icons/issuing.svg');
}
.LegacyContentWrapper .product-icon.radar {
  background-image: url('https://stripe.com/img/documentation/product-icons/radar.svg');
}
.LegacyContentWrapper .product-icon.dashboard {
  background-image: url('https://stripe.com/img/documentation/product-icons/dashboard.svg');
}
.LegacyContentWrapper .product-icon.identity {
  background-image: url('https://stripe.com/img/documentation/product-icons/identity.svg');
}
.LegacyContentWrapper .products-list-content {
  padding: 32px 0;
}
.LegacyContentWrapper .products-list-secondary {
  position: relative;
}
.LegacyContentWrapper .products-list-secondary .products-list-content {
  padding: 32px 32px 0 40px;
  z-index: 2;
}
.LegacyContentWrapper .products-list-screen {
  background: var(--sail-color-gray-50);
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  z-index: 0;
}
.LegacyContentWrapper .products-list-secondary {
  padding: 0;
}
.LegacyContentWrapper .product-category {
  padding-bottom: 32px;
}
.LegacyContentWrapper .product-category h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.LegacyContentWrapper .product-list-item:first-of-type {
  padding: 20px 0 12px 0;
}
.LegacyContentWrapper .product-list-item {
  padding: 12px 0;
}
.LegacyContentWrapper .product-list-item h5 {
  color: var(--sail-color-gray-700);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.15px;
  line-height: 20px;
}
.LegacyContentWrapper .product-list-item:hover h5 {
  color: var(--sail-color-blue-500);
}
.LegacyContentWrapper .product-list-item p {
  color: var(--sail-color-gray-500);
  font-size: 14px;
  font-weight: normal;
  height: 20px;
  letter-spacing: -0.15px;
  line-height: 20px;
  padding-top: 4px;
}
.LegacyContentWrapper .product-list-item .product-icon {
  height: 24px;
  width: 24px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 0;
  margin-right: 16px;
}
.LegacyContentWrapper article .tabs.payments-tabs {
  margin-top: 32px;
}
.LegacyContentWrapper article .tabs-regular.payments-tabs .nav-tabs {
  height: 42px;
}
.LegacyContentWrapper article .tabs-regular.payments-tabs .nav-tabs a {
  padding-left: 0;
  font-size: 18px;
  line-height: 28px;
  height: 40px;
  padding: 0 4px 0 0;
  margin-right: 12px;
}
.LegacyContentWrapper article .tabs-regular.payments-tabs .nav-tabs a:not(.selected) {
  color: var(--sail-color-gray-500);
}
.LegacyContentWrapper article .tabs-regular.payments-tabs .nav-tabs a:not(.selected):hover {
  color: var(--sail-color-gray-600);
}
.LegacyContentWrapper article .tabs.payments-tabs .nav-tabs {
  margin-bottom: 8px;
}
.LegacyContentWrapper article .tabs-regular.integration-switcher > .nav-tabs a {
  padding: 6px 8px;
  font-size: 14px;
  height: 32px;
  line-height: 16px;
  background: none;
  color: var(--sail-color-gray-600);
  border: 1px solid var(--sail-color-gray-100);
  box-shadow: none;
  border-radius: 6px;
  transition: border 100ms ease-in-out;
  margin-left: 4px;
}
.LegacyContentWrapper article .tabs-regular.integration-switcher > .nav-tabs a:not(.selected):hover {
  color: var(--sail-color-gray-700);
  border: 1px solid var(--sail-color-gray-200);
}
.LegacyContentWrapper article .tabs-regular.integration-switcher > .nav-tabs a.selected {
  color: var(--sail-color-blue-500);
  border: 2px solid var(--sail-color-blue-400);
}
.LegacyContentWrapper article .tabs.integration-switcher > .nav-tabs {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  margin-top: 32px;
  margin-bottom: 0px;
  border-bottom: none;
  height: 34px;
}
.LegacyContentWrapper .dispute-cards {
  margin-top: 36px;
}
/* new home styles */
.LegacyContentWrapper h2.big {
  margin-top: 64px !important;
  margin-bottom: 32px !important;
  font-size: 24px !important;
}
.LegacyContentWrapper h2.products-header {
  margin-top: 48px !important;
  margin-bottom: 32px !important;
  font-size: 24px !important;
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs {
  display: flex;
  border-bottom: none;
  height: unset;
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a:first-child {
  margin-left: 0;
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a {
  flex-basis: 0;
  flex-grow: 1;
  height: unset;
  margin-left: 16px;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 6px;
  padding: 24px;
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a p {
  color: var(--sail-color-gray-500);
  padding-top: 0;
  font-weight: normal;
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a.selected {
  border: 1px solid var(--sail-color-blue-500);
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a:not(.selected):hover {
  border: 1px solid var(--sail-color-gray-200);
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a.selected h3 {
  color: var(--sail-color-blue-500);
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a .tab-inner {
  display: flex;
  justify-content: space-between;
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a .tab-inner .icon {
  width: 64px;
  height: 64px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a .tab-inner .icon.icon-direct {
  background-image: url(https://stripe.com/img/documentation/index/direct.svg);
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a .tab-inner .icon.icon-multiparty {
  background-image: url(https://stripe.com/img/documentation/index/multi-party.svg);
}
.LegacyContentWrapper .tabs.home-tabs .nav-tabs a .content h3 .anchor {
  display: none;
}
.LegacyContentWrapper .home-tabs-container {
  margin-top: 16px;
  padding: 24px;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 6px;
}
.LegacyContentWrapper .home-use-case-container .use-case-cards,
.LegacyContentWrapper .home-tabs-container .use-case-cards {
  grid-template-columns: 30% 30% 30%;
  grid-gap: 5%;
}
.LegacyContentWrapper .home-use-case-container .use-case-cards .use-case-card a,
.LegacyContentWrapper .home-tabs-container .use-case-cards .use-case-card a {
  padding: 50px 0 16px 0;
  border: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
  background-color: var(--sail-color-white);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 32px 32px;
  cursor: pointer;
}
.LegacyContentWrapper .home-use-case-container .use-case-cards .use-case-card a h3 {
  cursor: pointer;
  font-weight: 700;
}
.LegacyContentWrapper .home-use-case-container .use-case-cards .use-case-card a p {
  color: var(--sail-color-text);
  font-size: 16px;
  line-height: 1.5;
}
.LegacyContentWrapper .home-use-case-container .use-case-cards .use-case-card a:active {
  background-color: transparent;
}
.LegacyContentWrapper .home-use-case-container .use-case-cards .use-case-card a:hover {
  box-shadow: none;
  border: 1px solid transparent;
}
.LegacyContentWrapper #sidebar .new-sidebar h1.account:not(.section-header) {
  border-top: 1px solid #f7fafc;
  margin-top: 10px;
  padding-top: 8px;
  height: 40px;
}
.LegacyContentWrapper #sidebar #products-nav-item a.expanded:after {
  background-image: url('https://stripe.com/img/documentation/icon-chevron-down.svg');
}
.LegacyContentWrapper #sidebar #products-nav-item a.hidden {
  display: none;
}
.LegacyContentWrapper #sidebar .new-sidebar ul.products-list {
  padding-left: 24px;
  display: none;
}
.LegacyContentWrapper #sidebar .new-sidebar ul.products-list.show {
  display: block;
}
.LegacyContentWrapper #sidebar .new-sidebar ul.products-list .sidebar-item a {
  min-height: unset;
  padding: 1px 16px 1px 2px;
  font-size: 13px;
  font-weight: 500;
}
.LegacyContentWrapper #sidebar .new-sidebar ul.products-list .sidebar-item:first-child a {
  padding-top: 2px;
}
.LegacyContentWrapper #sidebar h1.account {
  border-top: none;
}
.LegacyContentWrapper #sidebar h1.references {
  border-top: none;
  margin: 0;
  padding: 0;
}
.LegacyContentWrapper .guide-cards-container + .csat,
.LegacyContentWrapper .products-list + .csat {
  padding-top: 0;
}
/* END new IA styles */
/* - Next steps */
.LegacyContentWrapper article ul.next-steps {
  list-style: none;
}
.LegacyContentWrapper article ul.next-steps:not(:first-child) {
  margin-top: 12px;
}
.LegacyContentWrapper article ul.next-steps li {
  padding: 0;
  margin: 0;
}
.LegacyContentWrapper article ul.next-steps li:before {
  display: none;
}
.LegacyContentWrapper article ul.next-steps li a {
  display: block;
  font-size: 16px;
  padding: 0 0 8px 24px;
  text-decoration: none;
}
.LegacyContentWrapper article ul.next-steps li a:after,
.LegacyContentWrapper article ul.next-steps li a[href^='/docs/api']:after,
.LegacyContentWrapper article ul.next-steps li a[href^='/docs/js']:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 2px;
  width: 24px;
  height: 24px;
  margin-left: 0;
  /* Override article a[href^="/docs/api"]:after */
  background: url('https://stripe.com/img/documentation/icon-next-step.svg');
  background-repeat: no-repeat;
}
.LegacyContentWrapper article ul.next-steps li a[href^='/docs/api'] span,
.LegacyContentWrapper article ul.next-steps li a[href^='/docs/js'] span {
  position: relative;
  padding-right: 32px;
}
.LegacyContentWrapper article ul.next-steps li a[href^='/docs/api'] span:after,
.LegacyContentWrapper article ul.next-steps li a[href^='/docs/js'] span:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: 16px auto;
  bottom: 2px;
  right: 8px;
  background-image: url('https://stripe.com/img/documentation/icon-api-link.svg');
}
.LegacyContentWrapper article ul.next-steps li a[href^='/docs/js'] span:after {
  background-image: url('https://stripe.com/img/documentation/icon-js-link.svg');
}
.LegacyContentWrapper article ul.next-steps li a[href^='/docs/api']:active span:after,
.LegacyContentWrapper article ul.next-steps li a[href^='/docs/js']:active span:after {
  background-position: left bottom;
}
/* - Buttons */
.LegacyContentWrapper article button,
.LegacyContentWrapper article a.button {
  background: var(--sail-color-blue-500);
  box-shadow: 0 2px 5px 0 rgba(50, 50, 93, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  height: 32px;
  font-size: 16px;
  color: var(--sail-color-white);
  font-weight: 500;
  padding: 0 12px;
  line-height: 32px;
  cursor: pointer;
  outline: none;
  display: inline-block;
  text-decoration: none;
  text-transform: none;
}
.LegacyContentWrapper article button:not(:first-child),
.LegacyContentWrapper article a.button:not(:first-child) {
  margin-top: 14px;
  margin-right: 8px;
}
.LegacyContentWrapper article button:disabled,
.LegacyContentWrapper article a.button.disabled {
  color: rgba(255, 255, 255, 0.7);
}
.LegacyContentWrapper article button:active,
.LegacyContentWrapper article a.button:active {
  background: #2f3d89;
}
.LegacyContentWrapper article button.success,
.LegacyContentWrapper article a.button.success {
  background: #1ea672;
  color: #efffed;
}
.LegacyContentWrapper article button.arrow,
.LegacyContentWrapper article a.button.arrow {
  background-image: url('https://stripe.com/img/documentation/icon-arrow-white.svg');
  background-size: 12px 12px;
  background-position: calc(100% - 10px) 11px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
/* - Columns */
.LegacyContentWrapper article .columns {
  display: flex;
  flex-direction: row;
}
.LegacyContentWrapper article .columns:not(:first-child) {
  margin-top: 18px;
}
.LegacyContentWrapper article .columns > .column.no-shrink {
  flex-shrink: 0;
}
.LegacyContentWrapper article .columns > .column:not(:first-child) {
  margin-left: 18px;
}
.LegacyContentWrapper article a.column {
  text-align: center;
  text-decoration: none;
  text-decoration: none;
  font-weight: normal;
}
.LegacyContentWrapper article a.column h4 + p {
  padding-top: 5px;
}
.LegacyContentWrapper article a.column:hover,
.LegacyContentWrapper article a.column:hover > * {
  color: var(--sail-color-blue-500);
}
/* - Card form */
.LegacyContentWrapper article .card-form {
  width: 325px;
  background: var(--sail-color-white);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.07),
    0px 3px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-size: 16px;
  padding: 2px 12px;
}
.LegacyContentWrapper article .card-form .row {
  border-bottom: 1px solid #ededed;
  display: flex;
  flex-direction: row;
}
.LegacyContentWrapper article .card-form .row:last-child {
  text-align: right;
  border: none;
  flex-direction: column;
  align-items: flex-end;
}
.LegacyContentWrapper article .card-form .column {
  position: relative;
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: row;
  width: 100%;
}
.LegacyContentWrapper article .card-form .column:not(:first-child) label {
  margin-left: 14px;
}
.LegacyContentWrapper article .card-form .column:not(:first-child):after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
}
.LegacyContentWrapper article .card-form label,
.LegacyContentWrapper article .card-form input:not(.submit),
.LegacyContentWrapper article .card-form .StripeElement {
  padding: 14px 0;
  font-size: 16px;
  line-height: 16px;
  outline: none;
}
.LegacyContentWrapper article .card-form label {
  display: inline-block;
  width: 75px;
  font-weight: 600;
  flex-shrink: 0;
}
.LegacyContentWrapper article .card-form .cvc label {
  width: 60px;
}
.LegacyContentWrapper article .card-form input,
.LegacyContentWrapper article .card-form .StripeElement {
  border: none;
  background: none;
  width: 100%;
}
.LegacyContentWrapper article .card-form button,
.LegacyContentWrapper article .card-form input.submit {
  width: calc(50% - 14px);
  margin-top: 10px;
  margin-bottom: 8px;
}
.LegacyContentWrapper article .card-form .errors {
  color: #e13760;
  font-size: 14px;
  background: var(--sail-color-white) bfc;
  font-weight: 500;
  border-radius: 4px;
  padding: 8px;
  margin: 6px 0 0 0;
  line-height: 18px;
}
.LegacyContentWrapper article .card-form .errors:empty {
  display: none;
}
/* - Images */
.LegacyContentWrapper article .images,
.LegacyContentWrapper article *:not(.images) > .image {
  border-radius: 4px;
  padding: 12px 0;
  position: relative;
}
.LegacyContentWrapper article .image img {
  padding: 0;
  overflow: hidden;
  max-width: 736px;
}
.LegacyContentWrapper article .images .image img {
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}
.LegacyContentWrapper article img {
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}
.LegacyContentWrapper article .image.full {
  background: transparent;
  border: 0;
  padding: 0;
}
.LegacyContentWrapper article .image.full img {
  border-radius: 4px;
}
.LegacyContentWrapper article .images:not(:first-child),
.LegacyContentWrapper article *:not(.images) > .image:not(:first-child) {
  margin-top: 18px;
}
.LegacyContentWrapper article .images {
  display: flex;
  justify-content: space-around;
}
.LegacyContentWrapper article .images.grouped {
  background-color: #f6f9fc;
  padding: 16px;
  align-items: baseline;
}
.LegacyContentWrapper article .images.grouped.with-video {
  padding-top: 64px;
}
.LegacyContentWrapper article .images.vertical {
  flex-direction: column;
}
.LegacyContentWrapper article .images.vertical .image:not(:last-child) {
  margin-bottom: 30px;
}
.LegacyContentWrapper article .image.align-right {
  float: right;
  margin: 0 0 20px 30px;
}
.LegacyContentWrapper article .image {
  text-align: center;
  width: 100%;
}
.LegacyContentWrapper article .image > a {
  display: block;
  line-height: 0;
}
.LegacyContentWrapper article .image p {
  font-size: 13px;
  text-align: center;
  padding-top: 4px;
  line-height: 20px;
  width: 100%;
  margin: 0 auto;
}
.LegacyContentWrapper article .image p {
  padding-top: 6px;
}
/* - Tags */
.LegacyContentWrapper article .tag {
  padding: 1px 8px 2px 8px;
  margin: 2px;
  border-radius: 20px;
  white-space: nowrap;
}
.LegacyContentWrapper article .tag.beta,
.LegacyContentWrapper article .tag.recommended,
.LegacyContentWrapper article .tag.major {
  background: var(--sail-color-green-100);
  color: var(--sail-color-green-600);
}
.LegacyContentWrapper article .tag.optional {
  background: var(--sail-color-gray-100);
  color: #4e566d;
}
.LegacyContentWrapper article .tag.warning {
  background: var(--sail-color-yellow-100);
  color: var(--sail-color-yellow-600);
}
.LegacyContentWrapper article .tag.glossary {
  background: var(--sail-color-gray-50);
  color: var(--sail-color-gray-500);
  padding: 4px;
  text-transform: capitalize;
}
.LegacyContentWrapper article h1 .tag {
  position: relative;
  top: -4px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 4px;
  font-size: 16px;
  font-weight: 500;
}
.LegacyContentWrapper article h2 .tag {
  position: relative;
  top: -2px;
  padding: 0 8px 2px 8px;
  font-size: 14px;
  font-weight: 500;
}
.LegacyContentWrapper article h3 .tag {
  position: relative;
  top: -2px;
  margin-left: 4px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
}
/* - Zoomable images */
.LegacyContentWrapper article a.zoomable {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}
.fullscreen-container,
.fullscreen-overlay,
.fullscreen-container .fullscreen-image-container,
.fullscreen-image-wrapper,
.fullscreen-image {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.fullscreen-container {
  position: fixed;
  z-index: 10000;
}
.fullscreen-overlay {
  position: absolute;
  background: white;
  opacity: 0;
  transform: translate3d(0, 0, 0);
}
.fullscreen-image-container {
  position: absolute;
  transform-origin: 0 0;
  z-index: 10001;
}
.fullscreen-image-wrapper {
  position: absolute;
}
.fullscreen-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  transform-origin: 50% 50%;
  margin: auto auto;
}
.fullscreen-image,
.fullscreen-image-container {
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  cursor: zoom-out;
}
/* Quotes */
.LegacyContentWrapper article blockquote {
  border-left: 2px solid var(--sail-color-gray-100);
  padding-left: 18px;
  color: var(--sail-color-gray-400);
}
/* Rule conditions */
.LegacyContentWrapper span.rules.attribute {
  color: var(--sail-color-gray-400);
}
.LegacyContentWrapper span.rules.metadata {
  color: var(--sail-color-green-500);
}
.LegacyContentWrapper span.rules.numeric-value {
  color: var(--sail-color-cyan-500);
}
.LegacyContentWrapper span.rules.string-value {
  color: var(--sail-color-yellow-500);
}
.LegacyContentWrapper span.rules.red {
  color: var(--sail-color-red-500);
}
.LegacyContentWrapper span.rules.amber {
  color: var(--sail-color-yellow-500);
}
.LegacyContentWrapper span.rules.green {
  color: var(--sail-color-green-500);
}
/* Step indicators */
.LegacyContentWrapper span.step {
  color: var(--sail-color-gray-400);
}
/* Alternate notification colors */
.LegacyContentWrapper aside {
  line-height: 24px;
}
.LegacyContentWrapper aside.important.neutral {
  display: block;
  background-image: url('https://stripe.com/img/documentation/icon-aside-info.svg');
}
.LegacyContentWrapper aside.important.amber {
  background-image: url('https://stripe.com/img/documentation/icon-aside-important.svg');
}
.LegacyContentWrapper aside.important.info.amber {
  background-image: url('https://stripe.com/img/documentation/icon-aside-info.svg');
}
.LegacyContentWrapper aside.important.alternate.amber {
  background-image: none;
  background: var(--sail-color-gray-50);
  border: 1px solid var(--sail-color-gray-100);
  padding: 12px 20px;
}
.LegacyContentWrapper aside.important.red:not(.alternate) {
  background-image: url('https://stripe.com/img/documentation/icon-aside-warning-red.svg');
}
.LegacyContentWrapper aside.important.check {
  background-image: url('https://stripe.com/img/documentation/icon-aside-check.svg');
}
.LegacyContentWrapper aside.important.info {
  background-image: url('https://stripe.com/img/documentation/icon-aside-info.svg');
}
.LegacyContentWrapper aside.important.gray {
  background-image: url('https://stripe.com/img/documentation/icon-aside-info.svg');
}
.LegacyContentWrapper aside ul li:before {
  top: 7px;
}
.LegacyContentWrapper aside ul li {
  padding-left: 24px;
}
/* List columns */
.LegacyContentWrapper ul.two-column-list {
  column-count: 2;
  list-style: none;
  margin: 15px 0;
}
.LegacyContentWrapper ul.three-column-list {
  column-count: 3;
  list-style: none;
  margin: 15px 0;
}
/* Code pen integration */
.LegacyContentWrapper .codepen-content {
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  height: 380px;
}
/* Custom positioning */
.LegacyContentWrapper div.plaid-logo a img {
  width: 30%;
  float: right;
  margin: 0 10px 20px 30px;
}
/* CTA */
.LegacyContentWrapper .docs-header-cta {
  display: inline-block;
  font-weight: 500;
  color: var(--sail-color-blue-500);
  background-color: var(--sail-color-white);
  height: 32px;
  line-height: 30px;
  padding: 0 10px 8px;
  font-size: 16px;
  border-radius: 4px;
  transition: border 200ms ease-in-out;
  /* box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.12) 0px 2px 5px 0px; */
  border: 1px solid var(--sail-color-gray-100);
}
.LegacyContentWrapper .docs-header-cta:hover {
  color: var(--sail-color-blue-600);
  border: 1px solid var(--sail-color-gray-200);
  /* box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.15) 0px 3px 5px 1px; */
}
.LegacyContentWrapper .before-after-table .tabs-content {
  background-color: transparent !important;
}
.LegacyContentWrapper .before-after-table .nav-languages {
  background-color: inherit;
  border-radius: 0;
  padding: 0;
  margin-top: 20px;
  line-height: 24px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--sail-color-gray-100);
  color: var(--sail-color-text);
}
.LegacyContentWrapper .before-after-table .nav-languages a {
  display: inline-block;
  height: 36px;
  font-size: 14px;
  color: var(--sail-color-text-gray);
  padding: 0 8px;
  margin-right: 2px;
  cursor: pointer;
  text-decoration: none;
}
.LegacyContentWrapper .before-after-table > .nav-languages a.selected {
  border-bottom: 2px solid var(--sail-color-blue-500);
  color: var(--sail-color-blue-500);
  font-weight: 500;
}
.LegacyContentWrapper .code-diff {
  border: none;
  color: var(--sail-color-text);
  font-size: 13px;
}
.LegacyContentWrapper .code-diff-container {
  border-radius: 4px;
  display: grid;
  grid-template-columns: 50% 50%;
}
.LegacyContentWrapper .code-diff-before {
  display: flex;
  flex-direction: column;
  margin-right: 5px;
}
.LegacyContentWrapper .code-diff-after {
  display: flex;
  flex-direction: column;
}
.LegacyContentWrapper .code-diff-heading {
  color: var(--sail-color-gray-700);
  font-size: 13px;
  font-weight: 500;
  padding: 0 0 7px 0;
  text-align: left;
  text-transform: uppercase;
}
.LegacyContentWrapper .code-diff-code-wrapper {
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.LegacyContentWrapper article .tabs-content .code-diff-code-wrapper > p {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  color: var(--sail-color-gray-500);
  background-color: var(--sail-color-gray-100);
  font-size: 14px;
  line-height: 20px;
}
.LegacyContentWrapper .code-diff-code-wrapper > .code > .show-extra-lines {
  margin: 0 -14px -11px;
  /* override */
  padding-left: 11px;
}
.LegacyContentWrapper .code-diff-code-wrapper > .code > .show-extra-lines::after {
  display: none;
}
/* Hide integration builder entry cta on small screen sizes */
@media (max-width: 1279px) {
  .LegacyContentWrapper .ib-entry-cta {
    display: none !important;
  }
}
/* Media query for mobile layout */
@media (max-width: 768px) {
  .LegacyContentWrapper .docs-toc {
    display: none;
  }

  .LegacyContentWrapper #sidebar {
    height: 100%;
  }
}
/* Media query for print layout */
@media print {
  .LegacyContentWrapper body,
  .LegacyContentWrapper #docs,
  .LegacyContentWrapper #content-wrapper {
    overflow: visible;
  }

  .LegacyContentWrapper #docs {
    grid-template-columns: 1fr;
  }

  .LegacyContentWrapper #sidebar {
    display: none;
  }

  .LegacyContentWrapper #content-wrapper {
    position: relative;
    min-width: inherit;
  }

  .LegacyContentWrapper #content {
    margin: 0;
    padding: 0;
    width: 100%;
    border-top: 0;
  }

  .LegacyContentWrapper #content:before {
    display: block;
    content: '';
    background-image: url(https://stripe.com/img/documentation/logo.svg);
    background-repeat: no-repeat;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid var(--sail-color-gray-100);
    margin-bottom: 15px;
  }

  .LegacyContentWrapper #main-header,
  .LegacyContentWrapper .search,
  .LegacyContentWrapper .search-results {
    display: none;
  }

  .LegacyContentWrapper .page-break {
    page-break-before: always;
    page-break-inside: avoid;
  }

  .LegacyContentWrapper .dont-print {
    display: none;
  }

  .LegacyContentWrapper .code {
    page-break-inside: avoid;
  }

  .LegacyContentWrapper .docs-toc {
    display: none;
  }
}
.LegacyContentWrapper table.testing thead th:first-child {
  width: 30%;
}
.LegacyContentWrapper .testing-overview {
  column-count: 2;
  list-style: none;
}
.LegacyContentWrapper .testing-overview li {
  padding-left: 0;
  margin: 0;
}
.LegacyContentWrapper .testing-overview li:before {
  display: none;
}
.LegacyContentWrapper #developer-digest {
  padding: 22px 0;
  background: #f7f8f9;
  border-radius: 5px;
  border: none;
}
.LegacyContentWrapper #developer-digest button {
  height: inherit;
  box-shadow: none;
  color: #556cd6; /* Using the old color palette for page consistency */
}
.LegacyContentWrapper #developer-digest .collect-error {
  padding-top: 0;
  color: #373e42;
}
.LegacyContentWrapper #developer-digest .digest_header {
  font-size: 22px;
  color: #0d2b3e;
  font-weight: 500;
}
.LegacyContentWrapper ul.four-column-list {
  columns: 2;
}
.LegacyContentWrapper ul.four-column-list li {
  float: left;
  width: 50%;
}
.LegacyContentWrapper table.finance-report-schema {
  padding-bottom: 20px;
}
.LegacyContentWrapper table.finance-report-schema .check {
  text-align: center;
}
.LegacyContentWrapper table.radar-comparison .check {
  text-align: center;
}
/* Styles to make code snippet copy buttons nice */
.LegacyContentWrapper .code-copy-btn {
  padding: 0 8px;
  cursor: pointer;
  display: inline;
}
.LegacyContentWrapper .code-copy-btn.code-copy-btn-tab-nav {
  padding: 0 8px;
}
.LegacyContentWrapper .code-copy-btn.hidden {
  display: none;
}
.LegacyContentWrapper .code-copy-btn.left-border {
  border-left: 1px solid var(--sail-color-gray-700);
}
.LegacyContentWrapper .code-copy-btn svg {
  fill: var(--sail-color-gray-300);
  position: relative;
  top: 2px;
}
.LegacyContentWrapper .code-copy-btn:hover svg {
  fill: var(--sail-color-gray-500);
}
.LegacyContentWrapper .nav-languages.has-copy-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0px;
}
.LegacyContentWrapper .copy-btn-toast {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 99;
  background: var(--sail-color-blue-700);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--sail-color-gray-100);
  font-size: 12px;
  font-family: var(--sail-font-family);
  letter-spacing: 0.3px;
  line-height: 20px;
  font-weight: 600;
}
/* checkout index styles */
/* TODO(ianm) all of this nonsense should be deleted */
.LegacyContentWrapper .preview-button,
.LegacyContentWrapper #preview-button {
  margin-top: 14px;
}
.LegacyContentWrapper #preview-button {
  opacity: 0;
}
.LegacyContentWrapper #preview-button.loaded {
  opacity: 1;
}
.LegacyContentWrapper #preview-message {
  margin-top: 17px;
  padding: 0;
  padding-left: 24px;
  font-weight: 500;
  color: #1ea672;
  background-image: url('https://stripe.com/img/documentation/icon-answer.svg');
  background-size: 15px 12px;
  background-position: 0 7px;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(12px);
}
.LegacyContentWrapper #preview-message.active {
  opacity: 1;
  transform: none;
  transition: all 0.45s cubic-bezier(0, 0.9, 0.11, 1);
  transition-delay: 1.5s;
}
.LegacyContentWrapper #preview-message.error {
  opacity: 1;
  color: #ed5f74;
  transform: none;
  transition: all 0.45s cubic-bezier(0, 0.9, 0.11, 1);
  transition-delay: 1.5s;
}
.LegacyContentWrapper #checkout-updates {
  margin-top: 40px;
  padding: 16px 0 32px 0;
  background: #f7f8f9;
  border-radius: 4px;
  border: none;
}
.LegacyContentWrapper #checkout-updates button {
  height: inherit;
  box-shadow: none;
  color: #556cd6; /* Using the old color palette for page consistency */
}
.LegacyContentWrapper #checkout-updates .collect-error {
  padding-top: 0;
  color: #373e42;
}
.LegacyContentWrapper #checkout-updates .header {
  font-size: 22px;
  color: #0d2b3e;
  font-weight: 500;
}
.LegacyContentWrapper .current-version-pill {
  display: inline-block;
  border-radius: 20px;
  color: #3d4eac;
  font-size: 12px;
  margin-top: -1px;
  margin-left: 5px;
  padding: 4px;
  font-weight: 600;
  line-height: 16px;
  background-color: #d6ecff;
}
/* styles for scrollbox container tables */
.LegacyContentWrapper #tax-rates.scrollbox {
  white-space: nowrap;
  overflow: auto;
  border-radius: 5px;
  margin: 20px 0 0;
  max-width: 100%;
  background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}
.LegacyContentWrapper .invoiceTaxTable code {
  background: rgba(0, 0, 0, 0.04);
}
.LegacyContentWrapper .invoiceTaxTable .footer td {
  background-blend-mode: multiply;
  font-weight: bold;
  border-top-width: 2px;
}
.LegacyContentWrapper .category-map {
  margin-top: 48px;
  margin-bottom: 16px;
  position: relative;
}
.LegacyContentWrapper .category-map-list {
  margin-top: 16px;
  flex-direction: row;
}
.LegacyContentWrapper .category-map-category {
  margin: 0;
}
.LegacyContentWrapper .category-map-content {
  position: relative;
  padding-right: 64px;
}
.LegacyContentWrapper .category-map-content h2 {
  margin-top: 0;
}
.LegacyContentWrapper .category-map-content h5 {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--sail-color-gray-800);
}
.LegacyContentWrapper .category-map-content ul li {
  padding-left: 0;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
}
.LegacyContentWrapper .category-map-content ul li::before {
  display: none;
}
.LegacyContentWrapper .integration-mode-switcher {
  margin-top: 32px;
}
.LegacyContentWrapper .integration-mode-switcher > div {
  margin-right: 8px;
}
.LegacyContentWrapper .integration-mode-switcher-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.LegacyContentWrapper .integration-mode-switcher-button {
  padding: 6px 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  background: none;
  color: var(--sail-color-gray-600);
  border: 1px solid var(--sail-color-gray-100);
  box-shadow: none;
  border-radius: 6px;
  transition: border 100ms ease-in-out;
}
.LegacyContentWrapper .integration-mode-switcher-button:not(.active):hover {
  color: var(--sail-color-gray-700);
  border: 1px solid var(--sail-color-gray-200);
}
.LegacyContentWrapper .integration-mode-switcher-button.active {
  color: var(--sail-color-blue-500);
  border: 2px solid var(--sail-color-blue-400);
}
.LegacyContentWrapper .guide-info-box {
  padding: 12px 20px;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  background-color: var(--sail-color-gray-50);
}
.LegacyContentWrapper .guide-info-box .info-item {
  padding: 0px 32px 0 20px;
  position: relative;
  display: flex;
}
.LegacyContentWrapper .guide-info-box .info-header {
  font-size: 14px;
  line-height: 20px;
  padding-right: 4px;
  color: var(--sail-color-text);
}
.LegacyContentWrapper .guide-info-box .info-header::before {
  background-size: contain;
  background-position: center;
  position: absolute;
  left: -3px;
  top: 4px;
  width: 12px;
  height: 12px;
  content: '';
  display: inline-block;
}
.LegacyContentWrapper .guide-info-box .info-header.time::before {
  background: url(https://stripe.com/img/documentation/icon-clock.svg) no-repeat;
}
.LegacyContentWrapper .guide-info-box .info-header.customizability::before {
  background: url(https://stripe.com/img/documentation/icon-settings.svg) no-repeat;
}
.LegacyContentWrapper .guide-info-box .info-content {
  font-size: 14px;
  line-height: 20px;
  color: var(--sail-color-text);
  font-weight: 700;
}
.LegacyContentWrapper .info-box-with-callout {
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  background-color: var(--sail-color-gray-50);
  margin-bottom: 20px;
}
.LegacyContentWrapper .info-box-with-callout .guide-info-box {
  border: none;
  border-radius: 0;
  background-color: unset;
}
.LegacyContentWrapper article .info-box-with-callout aside.important,
.LegacyContentWrapper article .info-box-with-callout aside.info,
.LegacyContentWrapper article .info-box-with-callout aside.check {
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background-color: unset;
  border-top: 1px solid var(--sail-color-gray-100);
}
/* payment methods overview styles */
.LegacyContentWrapper article table.payment-method-table {
  margin-top: 28px;
  margin-bottom: 20px;
}
.LegacyContentWrapper .payment-method-table th {
  width: 20%;
  border-bottom: 1px solid var(--sail-color-gray-100);
  padding-left: 0;
}
.LegacyContentWrapper .payment-method-table th h6 {
  text-transform: none;
  font-size: 14px;
}
.LegacyContentWrapper .payment-method-table .payment-method-breakdown > tr > td {
  border: none;
  padding: 4px 16px 8px 0;
  color: var(--sail-color-text);
}
.LegacyContentWrapper .payment-method-table .payment-method-breakdown > tr:first-of-type > td {
  border: none;
  padding: 16px 16px 8px 0;
  color: var(--sail-color-gray-300);
}
.LegacyContentWrapper .payment-method-breakdown td.content-cell {
  border: none;
  padding: 24px 16px 9px 16px;
}
.LegacyContentWrapper .payment-method-table .payment-method {
  display: flex;
  direction: row;
  align-items: flex-start;
}
.LegacyContentWrapper .payment-method-table .payment-method .payment-method-icon {
  border: 0.01px solid #e6ebf1;
  overflow: hidden;
  border-radius: 4px;
  height: 26px;
  width: 26px;
}
.LegacyContentWrapper .payment-method-table .payment-method .payment-method-title {
  padding-left: 8px;
  width: 80%;
  padding-top: 4px;
  font-size: 14px;
}
.LegacyContentWrapper .payment-method-table .payment-method .payment-method-title span {
  color: var(--sail-color-gray-900);
  font-weight: 500;
  line-height: 18px;
}
.LegacyContentWrapper .payment-method-table a .payment-method .payment-method-title span {
  color: unset;
}
.LegacyContentWrapper .payment-method-badge {
  color: var(--sail-color-gray-400);
  font-size: 12px;
  font-weight: 500;
}
.LegacyContentWrapper .payment-method-family-table tr td {
  text-align: center;
}
.LegacyContentWrapper .payment-method-family-table tr td:nth-child(1) {
  text-align: left;
}
.LegacyContentWrapper .payment-method-family-table tr td:nth-child(2) {
  text-align: left;
}
.LegacyContentWrapper .payment-method-visual {
  width: 100%;
  display: flex;
  justify-content: center;
}
.LegacyContentWrapper .off-session-flow img {
  width: 100%;
}
.LegacyContentWrapper .comparison-table-col {
  width: 50%;
  flex-direction: row;
}
.LegacyContentWrapper .stripe-js-images .left-img {
  width: 490px;
}
.LegacyContentWrapper .stripe-js-images .right-img {
  width: 220px;
}
.LegacyContentWrapper article img.checkout-image {
  width: 500px;
  float: right;
  padding: 18px
}
.LegacyContentWrapper article div.no-code-cta {
  margin-top: 24px;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  padding: 16px;
  color: var(--sail-color-gray-800);
  font-weight: 500;
}
.LegacyContentWrapper article .no-code-cta-icon {
  fill: var(--sail-color-blue-400);
  margin-right: 8px;
}
/*                   */
/* responsive styles */
/*                   */
@media (max-width: 1250px) {
  /* landing page elements */
  .LegacyContentWrapper article .hero.hero-payment-methods .hero-right img,
  .LegacyContentWrapper article .hero .hero-right img {
    width: 40vw;
  }
  .LegacyContentWrapper article .hero.home-payments-hero .hero-right img {
    width: 100%;
  }
  .LegacyContentWrapper article .split-hero-image {
    height: 155px;
  }
  .LegacyContentWrapper article .developer-tools {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .LegacyContentWrapper .guide-cards .guide-card-image {
    background-size: contain;
  }
}
@media (max-width: 1150px) {
  /* landing page elements */
  .LegacyContentWrapper .hero.home-payments-hero .hero-left {
    min-width: 360px;
  }
  .LegacyContentWrapper .hero .hero-badges-container {
    display: none;
  }
  .LegacyContentWrapper .guide-cards .product-badge {
    display: none;
  }
  .LegacyContentWrapper article .connect-preview .guide-cards-content .guide-cards,
  .LegacyContentWrapper article .payments-tabs .guide-cards-content .guide-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .LegacyContentWrapper .guide-cards .guide-card-image {
    background-size: cover;
  }
  .LegacyContentWrapper .tabs.payments-tabs + .guide-cards-container {
    margin-top: 48px;
  }

  /* content elements */
  .LegacyContentWrapper #checkout-demo,
  .LegacyContentWrapper #take-a-payment-demo,
  .LegacyContentWrapper .info-box-with-callout {
    display: none;
  }
}
/* 1000px is our breakpoint for collapsing the side nav */
@media (max-width: 1000px) {
  /* landing page elements */
  .LegacyContentWrapper article .hero.hero-payment-methods .hero-right img,
  .LegacyContentWrapper article .hero .hero-right img {
    width: 50vw;
  }
  /* content elements */
  .LegacyContentWrapper .youtube-embed {
    width: 100%;
  }
}
@media (max-width: 750px) {
  /* landing page elements */
  .LegacyContentWrapper article .hero.home-payments-hero .hero-right,
  .LegacyContentWrapper article .hero.hero-payment-methods .hero-right,
  .LegacyContentWrapper article .split-hero,
  .LegacyContentWrapper article .explore-stripe,
  .LegacyContentWrapper article .products-header,
  .LegacyContentWrapper #connect-oauth-onboarding-demo {
    display: none;
  }
  .LegacyContentWrapper article .home-payments-hero {
    min-height: 220px;
  }
  .LegacyContentWrapper article .guide-cards-content .guide-cards,
  .LegacyContentWrapper article .example-case-cards,
  .LegacyContentWrapper article .use-case-cards,
  .LegacyContentWrapper article .code-sample-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .LegacyContentWrapper .category-map-list {
    flex-direction: column;
  }
  .LegacyContentWrapper .category-map-category {
    margin-top: 20px;
  }
  .LegacyContentWrapper .products-list .products-list-screen {
    display: none;
  }
  .LegacyContentWrapper article .connect-preview .guide-cards-content .guide-cards,
  .LegacyContentWrapper article .payments-tabs .guide-cards-content .guide-cards {
    grid-template-columns: 100% !important;
  }
  .LegacyContentWrapper .guide-cards .guide-card-image {
    display: none;
  }
  .LegacyContentWrapper .tabs.payments-tabs + .guide-cards-container {
    margin-top: 32px;
  }

  /* content elements */
  .LegacyContentWrapper article aside.note {
    float: none;
    margin-left: 0;
    width: 100%;
  }
  /* this makes table content have a horizontal scroll */
  .LegacyContentWrapper article table {
    display: block;
    max-width: fit-content;
    margin: 0 auto;
    overflow-x: auto;
  }
  .LegacyContentWrapper article .comparison-table {
    flex-direction: column;
  }
  .LegacyContentWrapper article .comparison-table .comparison-table-col {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .LegacyContentWrapper article .comparison-table .comparison-table-col img {
    width: 100%;
  }
  .LegacyContentWrapper article .comparison-table-col .feature-list li {
    height: unset;
  }
  .LegacyContentWrapper .stripe-js-images {
    display: none;
  }

  .LegacyContentWrapper article .images.grouped.with-video {
    padding-top: 16px;
  }
  .LegacyContentWrapper article .images.grouped.with-video .video {
    display: none;
  }

  .LegacyContentWrapper article div.no-code-cta {
    display: none;
  }
}
@media (max-width: 650px) {
  /* landing page elements */
  .LegacyContentWrapper article .hero .hero-right {
    display: none;
  }
  .LegacyContentWrapper article .hero.home-payments-hero .hero-left,
  .LegacyContentWrapper article .hero .hero-left {
    min-width: unset;
  }
  .LegacyContentWrapper article .hero.home-payments-hero .hero-left {
    padding: 10vw 0;
  }
  .LegacyContentWrapper article .guide-cards-content .guide-cards,
  .LegacyContentWrapper article .code-sample-cards,
  .LegacyContentWrapper article .example-case-cards,
  .LegacyContentWrapper article .use-case-cards,
  .LegacyContentWrapper article .developer-tools {
    grid-template-columns: 100% !important;
  }
  .LegacyContentWrapper article .developer-tools .half-card:not(:first-child) {
    margin-top: 0;
  }

  .LegacyContentWrapper article .hero + .guide-cards-container {
    border-top: none;
    padding-top: 0;
  }
  .LegacyContentWrapper .products-list {
    flex-direction: column;
    margin-top: 32px;
  }
  .LegacyContentWrapper .products-list .products-list-content {
    padding: 0;
  }
  .LegacyContentWrapper .products-list-secondary .products-list-content {
    padding: 0;
  }
  .LegacyContentWrapper .products-list .product-category h3 {
    font-size: 16px;
  }

  /* content elements */
  .LegacyContentWrapper article .tabs.tabs-regular:not(.integration-switcher) > .nav-tabs:not(.with-select) {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .LegacyContentWrapper article .tabs.tabs-regular > .nav-tabs:not(.with-select) {
    height: 31px;
  }

  .LegacyContentWrapper article .tabs.tabs-regular.integration-switcher > .nav-tabs,
  .LegacyContentWrapper article .tabs.tabs-regular.payments-tabs > .nav-tabs,
  .LegacyContentWrapper article .tabs.tabs-regular.platform-tabs > .nav-tabs {
    height: 34px;
  }

  .LegacyContentWrapper article .tabs-regular.payments-tabs > .nav-tabs a,
  .LegacyContentWrapper article .tabs.tabs-regular:not(.integration-switcher) > .nav-tabs:not(.with-select) a {
    line-height: 28px;
    height: 30px;
    font-size: 13px;
    font-weight: 600;
  }
  .LegacyContentWrapper .nav-languages div:first-child,
  .LegacyContentWrapper article .tabs .tabs-code .nav-languages div:first-child {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .LegacyContentWrapper article img.checkout-image {
    width: 100%;
    float: none;
  }
  .LegacyContentWrapper article .image {
    overflow: auto;
  }

  /* diagram things */
  .LegacyContentWrapper article .status--horizontal .status__description,
  .LegacyContentWrapper article .status__description {
    width: 100%;
  }
  .LegacyContentWrapper article .status--horizontal .status__ui-wrapper,
  .LegacyContentWrapper article .status__ui-wrapper {
    display: none;
  }
  .LegacyContentWrapper .youtube-embed {
    height: auto;
  }
}
@media (max-width: 500px) {
/* landing page elements */
  .LegacyContentWrapper article .hero .hero-left {
    padding-right: 0;
  }

  .LegacyContentWrapper article .tabs.tabs-regular.integration-switcher > .nav-tabs {
    height: unset;
    margin-top: 16px;
  }
  .LegacyContentWrapper article .tabs.tabs-regular.integration-switcher > .nav-tabs a:first-child {
    margin-bottom: 10px;
  }
  .LegacyContentWrapper article .tabs.tabs-regular.integration-switcher > .nav-tabs a {
    font-size: 12px;
    height: 28px;
    line-height: 14px;
  }

  .LegacyContentWrapper article .images.grouped {
    flex-direction: column;
  }
  .LegacyContentWrapper article .images.grouped .image:not(:first-child) {
    margin-top: 24px;
  }
  .LegacyContentWrapper article .images.grouped .image p {
    padding-top: 0px;
  }
}
.LegacyContentWrapper pre .highlighted-line {
  background: #1A2652;
}
.LegacyContentWrapper code .token {
  padding: 0;
  margin: 0;
}
.LegacyContentWrapper code .token:not(.script) {
  font-weight: normal;
}
.LegacyContentWrapper code .token.property {
  font-weight: 500;
}
.LegacyContentWrapper code .token.keyword,
.LegacyContentWrapper code .token.atrule,
.LegacyContentWrapper .language-php .token.operator {
  color: #a4cdfe;
}
.LegacyContentWrapper code .token.tag,
.LegacyContentWrapper code .token.tag *,
.LegacyContentWrapper code .token.attr-name,
.LegacyContentWrapper code.language-markup .token.namespace,
.LegacyContentWrapper code .token.selector {
  color: #a4cdfe;
}
.LegacyContentWrapper code .token.tag,
.LegacyContentWrapper code .token.keyword,
.LegacyContentWrapper code .token.atrule,
.LegacyContentWrapper .language-php .token.operator {
  font-weight: 600;
}
.LegacyContentWrapper code .token.attr-name {
  font-style: italic;
}
.LegacyContentWrapper code .token.comment {
  font-weight: normal;
  color: rgba(255, 255, 255, 0.5);
}
.LegacyContentWrapper code .token.function,
.LegacyContentWrapper code .token.url,
.LegacyContentWrapper code.language-url {
  font-weight: 600;
  color: #a4cdfe;
}
.LegacyContentWrapper code .token.boolean,
.LegacyContentWrapper code .token.constant,
.LegacyContentWrapper .language-ruby .token.constant+.token.punctuation,
.LegacyContentWrapper .language-ruby .token.constant+.token.punctuation+.token.symbol,
.LegacyContentWrapper code .token.class-name,
.LegacyContentWrapper code .token.builtin,
.LegacyContentWrapper code .token.namespace {
  font-weight: 600;
  color: #a4cdfe;
}
.LegacyContentWrapper code .token.number {
  color: #f8b886;
}
.LegacyContentWrapper code .token.header {
  font-weight: bold;
}
/*.language-javascript,*/
.LegacyContentWrapper code .token.variable,
.LegacyContentWrapper code .token.curl,
.LegacyContentWrapper code .token.option,
.LegacyContentWrapper .language-bash .token.function {
  color: #f5fbff;
  font-weight: 600;
}
.LegacyContentWrapper code .token.curl,
.LegacyContentWrapper code .token.option,
.LegacyContentWrapper .language-bash .token.function {
  font-weight: 500;
}
.LegacyContentWrapper code .token.symbol,
.LegacyContentWrapper code .token.parameter,
.LegacyContentWrapper .language-bash .token.option,
.LegacyContentWrapper code.language-css .property {
  font-weight: 500;
  color: #fbb5b2;
}
.LegacyContentWrapper code .token.attr-value,
.LegacyContentWrapper code.language-html .token.attr-value>.punctuation:not(:first-child),
.LegacyContentWrapper code.language-markup .token.attr-value>.punctuation:not(:first-child),
.LegacyContentWrapper code .token.string,
.LegacyContentWrapper code .token.stripe,
.LegacyContentWrapper code .token.macro,
.LegacyContentWrapper code .token.value,
.LegacyContentWrapper table code .token.string
 {
  font-weight: normal;
  color: #85d99e !important;
}
.LegacyContentWrapper code .token.macro .keyword {
  color: #85d99e;
}
.LegacyContentWrapper h3 code .token.string, .LegacyContentWrapper h4 code .token.string, .LegacyContentWrapper table code .token.string, .LegacyContentWrapper p code .token.string, .LegacyContentWrapper li code .token.string {
  color: #159570;
}
.LegacyContentWrapper code .token.secret-key,
.LegacyContentWrapper code .token.publishable-key,
.LegacyContentWrapper code .token.token-tooltip {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 2px;
  margin: -2px;
}
.LegacyContentWrapper code .token.secret-key.enabled,
.LegacyContentWrapper code .token.publishable-key.enabled,
.LegacyContentWrapper code .token.token-tooltip.enabled {
  background: rgba(255, 255, 255, 0.2);
}
.LegacyContentWrapper pre {
  position: relative;
  color: #424770;
}
.LegacyContentWrapper pre .line-numbers {
  position: absolute;
  pointer-events: none;
  top: 12px;
  left: 29px;
  width: 16px;
  counter-reset: linenumber;
  line-height: 19px;
  font-family: "Source Code Pro", monospace;
}
.LegacyContentWrapper pre .line-numbers>span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}
.LegacyContentWrapper pre .line-numbers>span:before {
  content: counter(linenumber);
  display: block;
  font-size: 13px;
  text-align: right;
  user-select: none;
}
.LegacyContentWrapper pre .line-numbers>span.highlighted:before {
  color: #858c90;
  font-weight: 500;
}
.LegacyContentWrapper pre.language-bash .line-numbers>span:before,
.LegacyContentWrapper pre.language-curl .line-numbers>span:before,
.LegacyContentWrapper pre.language-cli .line-numbers>span:before {
  content: '>';
}
.LegacyContentWrapper pre.language-bash:not(.output) .line-numbers>span:first-child:before,
.LegacyContentWrapper pre.language-curl:not(.output) .line-numbers>span:first-child:before,
.LegacyContentWrapper pre.language-cli:not(.output) .line-numbers>span:first-child:before {
  content: '$';
}
/* Variables */
.LegacyContentWrapper #checkout-demo {
  --body-color: rgb(247, 250, 252);
  --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  --button-color: #556CD6;
  --radius: 4px;
  --button-width: 400px;
}
.LegacyContentWrapper #checkout-demo {
  box-sizing: border-box;
  background-color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  padding: 20px 20px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  transition: height 1s ease;
  min-height: 120px;
  position: relative;
  overflow: auto;
}
.LegacyContentWrapper #checkout-demo .sr-main {
  justify-content: left;
  padding: 12px 0 0 0;
}
.LegacyContentWrapper #checkout-demo .brand-assets .sr-subtext {
  margin-top: 16px;
}
.LegacyContentWrapper #checkout-demo .image img {
  width: 100%;
}
.LegacyContentWrapper #preview-button {
  margin-top: 14px;
  max-width: var(--button-width);
}
.LegacyContentWrapper #preview-message {
  margin-top: 17px; padding: 0; padding-left: 24px;
  font-weight: 500;
  color: #1EA672;
  background-image: url('https://stripe.com/img/documentation/icon-answer.svg');
  background-size: 15px 12px;
  background-position: 0 7px;
  background-repeat: no-repeat;

  opacity: 0;
  transform: translateY(12px);
}
.LegacyContentWrapper #preview-message.active {
  opacity: 1;
  transform: none;
  transition: all .45s cubic-bezier(0,.9,.11,1);
  transition-delay: 1.5s;
}
.LegacyContentWrapper .code-sample-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 33%));
  grid-gap: 20px;
  list-style: none;
  margin-top: 20px !important;
}
.LegacyContentWrapper .code-sample-card {
  padding: 0;
  margin: 0;
  min-height: 72px;
}
.LegacyContentWrapper .code-sample-cards-view-all:after {
  content: '';
  display: inline-block;
  margin-left: 4px;
  width: 16px;
  height: 12px;
  background-image: url('https://stripe.com/img/documentation/icon-external-link.svg');
  background-size: 100% 12px;
  background-position: left top;
  background-repeat: no-repeat;
}
.LegacyContentWrapper .code-sample-card:before {
  display: none;
}
.LegacyContentWrapper .code-sample-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  text-decoration: none;
  transition: all 200ms ease-in-out;
}
.LegacyContentWrapper .code-sample-card a:hover {
  box-shadow: var(--guide-card-hover-shadow);
}
.LegacyContentWrapper .code-sample-card-footer {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: space-between;
  max-height: 120px;
  padding: 17px;
}
.LegacyContentWrapper .code-sample-card-footer h3 {
  margin: 0;
  font-size: 16px;
  line-height: 21px;
  color: var(--sail-color-text-blue);
  font-weight: 500;
}
.LegacyContentWrapper .code-sample-card-tags {
  position: relative;
  display: flex;
  flex-direction: row;
  list-style-type: none;
  color: var(--sail-color-text-gray);
  margin: 12px 0 0 0 !important;
}
.LegacyContentWrapper .code-sample-card-tags {
  padding: 0;
  color: var(--sail-color-text-gray);
  font-size: 12px;
  line-height: 20px;
  margin: 0;
  text-transform: uppercase;

}
.LegacyContentWrapper .code-sample-card-tags:before {
  content: '';
  margin-right: 8px;
  width: 20px;
  height: 20px;
  background-image: url('https://stripe.com/img/documentation/icon-github-gray.svg');
  background-size: 20px 20px;
  background-position: left top;
  background-repeat: no-repeat;
}
/******* Comparison table used in /docs/payments and more *******/
.LegacyContentWrapper .comparison-table {
  display: flex;
  font-size: 15px;
  color: #4F566B;
  text-align: center;
  padding-top: 24px;
}
.LegacyContentWrapper .comparison-table .comparison-table-col {
  padding: 18px 0;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.05), 0 2px 5px 0 rgba(50, 50, 93, 0.10), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
  border-radius: 6px;
  flex: 1;
}
.LegacyContentWrapper .comparison-table .comparison-table-col:first-child {
  margin-right: 18px;
}
/******* Comparison table header *******/
.LegacyContentWrapper .comparison-table-col .table-title {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: #4F566B;
  padding: 18px 18px 0px 18px;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.LegacyContentWrapper .comparison-table-col .table-description {
  line-height: 20px;
  margin-bottom: 18px;
  padding: 0 24px;
}
.LegacyContentWrapper .comparison-table .comparison-table-col .comparison-table-img-wrapper {
  height: 150px;
}
.LegacyContentWrapper .comparison-table .comparison-table-col img {
  max-width: 340px;
  margin-bottom: 18px;
  padding: 0 18px;
}
.LegacyContentWrapper .comparison-table-col .try-it-out {
  font-size: 13px;
  font-weight: bold;
  color: #556CD6;
  text-transform: uppercase;
  text-align: center;
}
.LegacyContentWrapper .comparison-table .try-it-out a,
.LegacyContentWrapper .comparison-table .try-it-out a:visited {
  position: relative;
  color: #556CD6;
  text-decoration: none;
  font-weight: bold;
}
.LegacyContentWrapper .comparison-table .try-it-out a:hover {
  color: #4F566B;
}
.LegacyContentWrapper .comparison-table .try-it-out a::before {
  content: "";
  height: 22px;
  position: absolute;
  width: 22px;
  background-image: url('https://stripe.com/img/documentation/try-it-out.svg');
  top: -4px;
  left: -30px;
}
/******* Comparison table feature list *******/
.LegacyContentWrapper .comparison-table-col .feature-list {
  background: #F7FAFC;
  letter-spacing: 0;
  line-height: 20px;
  border-top: 1px solid #E3E8EE;
  border-bottom: 1px solid #E3E8EE;
  margin-top: 18px;
}
.LegacyContentWrapper .comparison-table-col .feature-list li {
  padding: 15px 30px;
  margin: 0;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4F566B;
}
.LegacyContentWrapper .comparison-table-col .feature-list li:before {
  content: none;
}
.LegacyContentWrapper .comparison-table-col .feature-list li:nth-child(even) {
  background: #FFFFFF;
}
.LegacyContentWrapper .comparison-table-col a,
.LegacyContentWrapper .comparison-table-col a:visited {
  color: #4F566B;
  text-decoration: underline;
  font-weight: normal;
}
.LegacyContentWrapper .comparison-table .table-cta {
  margin-top: 18px;
  text-align: center;
}
/******* Comparison table CTA link at bottom of table *******/
.LegacyContentWrapper .comparison-table a.table-cta-link {
  color: #556CD6;
  text-decoration: none;
  position: relative;
  font-weight: 500;
}
.LegacyContentWrapper .comparison-table a.table-cta-link:hover {
  color: #4F566B;
}
.LegacyContentWrapper .comparison-table a.table-cta-link:after {
  content: "";
  height: 12px;
  position: absolute;
  width: 12px;
  background-image: url('https://stripe.com/img/documentation/arrow-purple.svg');
  top: 3px;
  right: -18px;
}
.LegacyContentWrapper .comparison-table a.table-cta-link:hover {
  color: #7795f8;
}
/* Variables */
.LegacyContentWrapper #connect-checkout-demo {
  --body-color: rgb(247, 250, 252);
  --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  --button-color: #556CD6;
  --radius: 4px;
  --button-width: 400px;
}
.LegacyContentWrapper #connect-checkout-demo {
  box-sizing: border-box;
  background-color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  padding: 20px 20px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  transition: height 1s ease;
  min-height: 120px;
}
.LegacyContentWrapper #connect-checkout-demo .sr-main {
  justify-content: left;
  padding: 12px 0 0 0;
}
.LegacyContentWrapper #connect-checkout-demo .brand-assets .sr-subtext {
  margin-top: 16px;
}
.LegacyContentWrapper #preview-button {
  margin-top: 14px;
  max-width: var(--button-width);
}
.LegacyContentWrapper #preview-message {
  margin-top: 17px; padding: 0; padding-left: 24px;
  font-weight: 500;
  color: #1EA672;
  background-image: url('https://stripe.com/img/documentation/icon-answer.svg');
  background-size: 15px 12px;
  background-position: 0 7px;
  background-repeat: no-repeat;

  opacity: 0;
  transform: translateY(12px);
}
.LegacyContentWrapper #preview-message.active {
  opacity: 1;
  transform: none;
  transition: all .45s cubic-bezier(0,.9,.11,1);
  transition-delay: 1.5s;
}
/* Variables */
.LegacyContentWrapper #oxxo-stripe-sample {
  --body-color: rgb(247, 250, 252);
  --button-color: #556CD6;
  --accent-color: #556CD6;
  --gray-border: #e3e8ee;
  --link-color: #ffffff;
  --font-color: rgb(105, 115, 134);
  --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 4px;
  --form-width: 400px;
}
/* Base */
.LegacyContentWrapper #oxxo-stripe-sample {
  box-sizing: border-box;
  background-color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  padding: 20px 20px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  transition: height 1s ease;
  min-height: 240px;
}
/* Layout */
.LegacyContentWrapper .sr-header {
  display: flex;
  justify-content: space-between;
  padding: 4px;
}
.LegacyContentWrapper .sr-header h3 {
  padding-top: 0px;
  margin-top: 0px;
}
.LegacyContentWrapper .sr-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 980px;
  align-content: center;
  justify-content: center;
  height: auto;
  margin: 0 auto;
}
.LegacyContentWrapper .sr-main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 25px 0 25px 0;
  background: var(--body-color);
}
.LegacyContentWrapper .sr-payment-form {
  text-align: center;
  width: var(--form-width);
}
.LegacyContentWrapper .sr-field-error {
  color: #cd3d64 !important;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  margin-top: 12px;
}
.LegacyContentWrapper .sr-sample .sr-pill {
  background: rgb(227, 232, 238);
  border-radius: 13px;
  height: 26px;
  line-height: 26px;
  color: rgb(79, 86, 107);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0px;
  box-shadow: none;
  margin-right: 8px;
  margin-top: 0px;
}
.LegacyContentWrapper .sr-pill.small {
  width: 26px;
  margin-right: 0px;
  padding: 0;
}
.LegacyContentWrapper .sr-pill.fill-inputs {
  min-width: 150px;
  margin-top: 17px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}
.LegacyContentWrapper .sr-pill:not(:disabled):hover {
  filter: contrast(90%);
}
.LegacyContentWrapper .sr-pill:not(:disabled):active {
  transform: translateY(0px) scale(0.98);
  filter: brightness(0.9);
}
.LegacyContentWrapper .sr-pill:disabled {
  opacity: 0.5;
}
.LegacyContentWrapper .sr-terminal {
  padding: 25px 0 17px 0px;
  font-family: monospace;
  border-bottom: 1px solid #D8D8D8;
  margin-bottom: 20px;
}
.LegacyContentWrapper .sr-terminal div {
  display: table-cell;
  font-size: 13px;
  font-weight: normal;
  height: 20px;
  letter-spacing: 0px;
  line-height: 20px;
}
.LegacyContentWrapper .sr-terminal div:first-child {
  color: rgb(59, 65, 94);
  padding-right: 20px;
}
.LegacyContentWrapper #oxxo-stripe-sample .sr-subtext {
  color: rgb(105, 115, 134);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: -0.15px;
  line-height: 20px;
  margin-top: 8px;
  padding-top: 0;
}
.LegacyContentWrapper .close-sample-btn,
.LegacyContentWrapper .close-sample-btn:active {
  position: absolute;
  right: 25px;
  background: url(https://stripe.com/img/docs/payments/close-sample.svg);
  width: 14px;
  height: 14px;
  padding: 0;
  box-shadow: none;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0px;
}
.LegacyContentWrapper .close-sample-btn:active {
  outline: lightblue;
}
.LegacyContentWrapper .expand-btn {
  background: url(https://stripe.com/img/docs/payments/expand-sample.svg);
  width: 10px;
  height: 10px;
  padding: 0;
  background-repeat: no-repeat;
  display: inline-block;
}
.LegacyContentWrapper #submit {
  height: 36px;
  margin-top: 5px;
  background:var(--button-color);
  border-radius: var(--radius);
  color: white;
  border: 0;
  margin-top: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
}
.LegacyContentWrapper #submit:focus {
  background:var(--button-color);
}
.LegacyContentWrapper #submit:hover {
  filter: contrast(120%) !important;
}
.LegacyContentWrapper #submit:disabled {
  opacity: 0.5;
}
/* Form button */
.LegacyContentWrapper .form-button:focus {
  box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3) !important;
  outline: none;
  z-index: 9;
}
/* Inputs */
.LegacyContentWrapper #oxxo-stripe-sample .sr-input,
.LegacyContentWrapper #oxxo-stripe-sample .StripeElement {
  height: 40px;
  padding: 10px 12px;
  font-size: 14px;

  color: #32325d;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}
.LegacyContentWrapper #oxxo-stripe-sample .sr-input:focus,
.LegacyContentWrapper #oxxo-stripe-sample .StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
  background-color: white !important;
}
.LegacyContentWrapper .sr-input {
  width: 100%;
  outline: none;
  font-size: 14px;
}
.LegacyContentWrapper .sr-input::placeholder {
  color: gray !important;
}
.LegacyContentWrapper .sr-result {
  width: 100%;
  color: var(--font-color);
  text-align: center;
}
.LegacyContentWrapper .sr-result p {
  line-height: 20px;
}
.LegacyContentWrapper .sr-result pre {
  border: 1px solid var(--gray-border);
  margin-top: 25px !important;
  padding-left: 14px;
  max-height: 300px;
  overflow: auto;
}
.LegacyContentWrapper .sr-combo-inputs-row {
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
}
.LegacyContentWrapper .sr-combo-inputs {
  display: flex;
  width: 100%;
  margin-top: 0px;
}
.LegacyContentWrapper .sr-combo-inputs .col:not(:last-child) {
  margin-right: 20px;
}
.LegacyContentWrapper .sr-combo-inputs .col {
  width: 100%;
}
.LegacyContentWrapper label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  max-width: 100%;
  color: #6b7c93;
  text-align: left;
}
/* Code block */
.LegacyContentWrapper #oxxo-stripe-sample code,
.LegacyContentWrapper #oxxo-stripe-sample pre {
  font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace;
  font-size: 12px;
}
/* Responsiveness */
@media (max-width: 720px) {
  .LegacyContentWrapper .sr-root {
    flex-direction: column;
    justify-content: flex-start;
    padding: 48px 20px;
    min-width: 320px;
  }

  .LegacyContentWrapper .sr-header__logo {
    background-position: center;
  }

  .LegacyContentWrapper .sr-payment-summary {
    text-align: center;
  }

  .LegacyContentWrapper .sr-content {
    display: none;
  }

  .LegacyContentWrapper .sr-main {
    width: 100%;
    background: rgb(247, 250, 252);
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
      0px 2px 5px 0px rgba(50, 50, 93, 0.1),
      0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 6px;
  }
}
.LegacyContentWrapper .sr-instructions {
  text-align: left;
  padding: 20px;
}
/* todo: spinner/processing state, errors, animations */
.LegacyContentWrapper .spinner,
.LegacyContentWrapper .spinner:before,
.LegacyContentWrapper .spinner:after {
  border-radius: 50%;
}
.LegacyContentWrapper .spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.LegacyContentWrapper .spinner:before,
.LegacyContentWrapper .spinner:after {
  position: absolute;
  content: "";
}
.LegacyContentWrapper .spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: var(--accent-color);
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.LegacyContentWrapper .spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: var(--accent-color);
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}
@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* Animated form */
.LegacyContentWrapper .sr-root {
  animation: 0.4s form-in;
  animation-fill-mode: both;
  animation-timing-function: ease;
}
.LegacyContentWrapper .hidden {
  display: none;
}
@keyframes field-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}
@keyframes form-in {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Layout */
.LegacyContentWrapper .sr-header {
  display: flex;
  justify-content: space-between;
}
.LegacyContentWrapper .sr-header h3 {
  padding-top: 0px;
  margin-top: 0px;
}
.LegacyContentWrapper .sr-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 980px;
  align-content: center;
  justify-content: center;
  height: auto;
  margin: 0 auto;
}
.LegacyContentWrapper .sr-main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 25px 0 0 0;
  background: var(--body-color);
}
.LegacyContentWrapper .sr-payment-form {
  text-align: center;
  width: var(--form-width);
}
.LegacyContentWrapper .sr-field-error {
  color: var(--font-color);
  text-align: left;
  font-size: 13px;
  line-height: 17px;
  margin-top: 12px;
}
.LegacyContentWrapper .sr-sample .sr-pill {
  background: rgb(227, 232, 238);
  border-radius: 13px;
  height: 26px;
  line-height: 26px;
  color: rgb(79, 86, 107);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0px;
  box-shadow: none;
  margin-right: 8px;
  margin-top: 0px;
}
.LegacyContentWrapper .sr-pill.small {
  width: 26px;
  margin-right: 0px;
  padding: 0;
}
.LegacyContentWrapper .sr-pill.fill-card {
  min-width: 150px;
  margin-top: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}
.LegacyContentWrapper .sr-pill.fill-card i {
  background: url(https://stripe.com/img/docs/payments/sample-card.svg);
  width: 12px;
  height: 12px;
  padding: 0;
  background-repeat: no-repeat;
  display: inline-block;
  background-size: cover;
  margin-right: 5px;
}
.LegacyContentWrapper .sr-pill:not(:disabled):hover {
  filter: contrast(90%);
}
.LegacyContentWrapper .sr-pill:not(:disabled):active {
  transform: translateY(0px) scale(0.98);
  filter: brightness(0.9);
}
.LegacyContentWrapper .sr-pill:disabled {
  opacity: 0.5;
}
.LegacyContentWrapper .sr-terminal {
  padding: 25px 0 8px 0px;
  font-family: monospace;
  border-bottom: 1px solid #D8D8D8;
  margin-bottom: 20px;
}
.LegacyContentWrapper .sr-terminal div {
  display: table-cell;
  font-size: 13px;
  font-weight: normal;
  height: 20px;
  letter-spacing: 0px;
  line-height: 20px;
  color: #1F1A47;
}
.LegacyContentWrapper .sr-terminal div:first-child {
  color: rgb(59, 65, 94);
  padding-right: 20px;
}
.LegacyContentWrapper .close-sample-btn,
.LegacyContentWrapper .close-sample-btn:active {
  position: absolute;
  right: 25px;
  background: url(https://stripe.com/img/docs/payments/close-sample.svg);
  width: 14px;
  height: 14px;
  padding: 0;
  box-shadow: none;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0px;
}
.LegacyContentWrapper .close-sample-btn:active {
  outline: lightblue;
}
.LegacyContentWrapper .expand-btn {
  background: url(https://stripe.com/img/docs/payments/expand-sample.svg);
  width: 10px;
  height: 10px;
  padding: 0;
  background-repeat: no-repeat;
  display: inline-block;
}
.LegacyContentWrapper article .sr-clone p {
  padding-top: 0;
  margin-top: -3px;
}
.LegacyContentWrapper .sr-root .submit {
  height: 36px;
  margin-top: 5px;
  background:var(--button-color);
  border-radius: var(--radius);
  color: white;
  border: 0;
  margin-top: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
}
.LegacyContentWrapper .sr-root .submit:focus {
  background:var(--button-color);
}
.LegacyContentWrapper .sr-root .submit:hover {
  filter: contrast(120%);
}
.LegacyContentWrapper .sr-root .submit:disabled {
  opacity: 0.5;
}
/* Inputs */
.LegacyContentWrapper .sr-input,
.LegacyContentWrapper .sr-root input[type="text"] {
  border-radius: var(--radius);
  padding: 5px 12px;
  height: 44px;
  width: 100%;
  transition: box-shadow 0.2s ease;
  background: white;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.LegacyContentWrapper .sr-input:focus,
.LegacyContentWrapper .sr-root input[type="text"]:focus,
.LegacyContentWrapper .sr-root button:focus,
.LegacyContentWrapper .sr-root .focused {
  box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),
    0 0 0 4px rgba(50, 151, 211, 0.3);
  outline: none;
  z-index: 9;
  background-color: var(--body-color);
}
.LegacyContentWrapper .sr-input::placeholder,
.LegacyContentWrapper .sr-root input[type="text"]::placeholder {
  color: var(--gray-light);
}
.LegacyContentWrapper .sr-result {
  width: 100%;
  color: var(--font-color);
}
.LegacyContentWrapper .sr-result p {
  line-height: 20px;
}
.LegacyContentWrapper .sr-result pre {
  border: 1px solid var(--gray-border);
  margin-top: 25px !important;
  padding-left: 14px;
  max-height: 300px;
  overflow: auto;
}
.LegacyContentWrapper .sr-combo-inputs-row {
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
}
/* Responsiveness */
@media (max-width: 720px) {
  .LegacyContentWrapper .sr-root {
    flex-direction: column;
    justify-content: flex-start;
    padding: 48px 20px;
    min-width: 320px;
  }

  .LegacyContentWrapper .sr-header__logo {
    background-position: center;
  }

  .LegacyContentWrapper .sr-payment-summary {
    text-align: center;
  }

  .LegacyContentWrapper .sr-content {
    display: none;
  }

  .LegacyContentWrapper .sr-main {
    width: 100%;
    height: 305px;
    background: rgb(247, 250, 252);
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
      0px 2px 5px 0px rgba(50, 50, 93, 0.1),
      0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 6px;
  }
}
/* todo: spinner/processing state, errors, animations */
.LegacyContentWrapper .sr-root .spinner,
.LegacyContentWrapper .sr-root .spinner:before,
.LegacyContentWrapper .sr-root .spinner:after {
  border-radius: 50%;
}
.LegacyContentWrapper .sr-root .spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.LegacyContentWrapper .sr-root .spinner:before,
.LegacyContentWrapper .sr-root .spinner:after {
  position: absolute;
  content: "";
}
.LegacyContentWrapper .sr-root .spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: var(--accent-color);
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.LegacyContentWrapper .sr-root .spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: var(--accent-color);
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}
@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* Animated form */
.LegacyContentWrapper .sr-root {
  animation: 0.4s form-in;
  animation-fill-mode: both;
  animation-timing-function: ease;
}
.LegacyContentWrapper .hidden {
  display: none;
}
@keyframes field-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}
.LegacyContentWrapper .sr-subtext {
  color: rgb(105, 115, 134);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: -0.15px;
  line-height: 20px;
  margin-top: 8px;
  padding-top: 0;
}
@keyframes form-in {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.LegacyContentWrapper article .pi-demo .pi-demo-nav button {
  margin-top: 0;
}
.LegacyContentWrapper .connect-button {
  background: #635bff;
  display: inline-block;
  height: 38px;
  text-decoration: none;
  width: 180px;

  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  -webkit-font-smoothing: antialiased;
}
.LegacyContentWrapper .connect-button span {
  color: #ffffff;
  display: block;
  font-family: sohne-var, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 14px;
  padding: 11px 0px 0px 24px;
  position: relative;
  text-align: left;
}
.LegacyContentWrapper .connect-button:hover {
  background: #7a73ff;
}
.LegacyContentWrapper .connect-button:disabled {
  opacity: 0.5;
}
.LegacyContentWrapper .connect-button span::after {
  background-repeat: no-repeat;
  background-size: 49.58px;
  content: "";
  height: 20px;
  left: 62%;
  position: absolute;
  top: 28.95%;
  width: 49.58px;
}
.LegacyContentWrapper .connect-button span::after {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 468 222.5' style='enable-background:new 0 0 468 222.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3 c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z'/%3E%3Cpath class='st0' d='M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3 c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1 c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z'/%3E%3Cpolygon class='st0' points='223.8,61.7 248.9,56.3 248.9,36 223.8,41.3 '/%3E%3Crect x='223.8' y='69.3' class='st0' width='25.1' height='87.5'/%3E%3Cpath class='st0' d='M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z'/%3E%3Cpath class='st0' d='M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135 c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z'/%3E%3Cpath class='st0' d='M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6 C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7 c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z'/%3E%3C/g%3E%3C/svg%3E");
}
/* Onboarding demo view in end-to-end guides */
.LegacyContentWrapper #connect-oauth-onboarding-demo {
  --body-color: rgb(247, 250, 252);
  --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.LegacyContentWrapper #connect-oauth-onboarding-demo {
  box-sizing: border-box;
  background-color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  padding: 20px 20px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  transition: height 1s ease;
  min-height: 120px;
}
.LegacyContentWrapper #connect-oauth-onboarding-demo .sr-main {
  justify-content: left;
  padding: 12px 0 0 0;
}
.LegacyContentWrapper #connect-oauth-onboarding-demo .brand-assets .sr-subtext {
  margin-top: 16px;
}
.LegacyContentWrapper #connect-oauth-onboarding-demo .footer .sr-outcome {
  margin-top: 8px;
  text-align: left;
}
.LegacyContentWrapper #connect-oauth-onboarding-demo .footer .sr-success p {
  color: #1EA672;
}
.LegacyContentWrapper #connect-oauth-onboarding-demo .footer .sr-loading p {
  color: grey;
}
.LegacyContentWrapper #connect-oauth-onboarding-demo .footer .sr-field-error p {
  color: red;
}
.LegacyContentWrapper .accepted {
  background: #939da3; 
  color: white; 
  padding: 0 10px !important; 
  margin-bottom: 20px; 
  display: inline-block; 
  border-radius: 30px;
  animation: fade-in 1s forwards 1s;
  opacity: 0;
}
.LegacyContentWrapper .dpa-form .accepted {
  margin-top: 20px;
}
.LegacyContentWrapper .dpa-form input {
  margin-top: 20px;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  } 100% {
    opacity: 1;
  }
}
.LegacyContentWrapper .example-case-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  list-style: none;
  margin-top: 16px !important;
}
.LegacyContentWrapper .example-case-cards .example-case-card {
  padding: 0;
  margin: 0;
  min-height: 90px;
}
.LegacyContentWrapper .example-case-cards .example-case-card.example-case-card-extra-tall {
  height: 212px;
}
.LegacyContentWrapper .example-case-cards .example-case-card.example-case-card-tall {
  height: 172px;
}
.LegacyContentWrapper .example-case-cards .example-case-card.example-case-card-short {
  height: 140px;
}
.LegacyContentWrapper .example-case-cards .example-case-card .card {
  height: 100%;
}
.LegacyContentWrapper .example-case-cards .example-case-card:before {
  display: none;
}
.LegacyContentWrapper .example-case-cards .example-case-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 20px 20px 20px 20px;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  text-decoration: none;
  background-color: var(--sail-color-white);
  transition: all 200ms ease-in-out;
}
.LegacyContentWrapper .example-case-cards .example-case-card-icon {
  position: absolute;
  height: 30px;
  left: 16px;
  bottom: 16px;
  background-repeat: no-repeat;
  background-size: 34px 34px;
}
.LegacyContentWrapper .example-case-cards .example-case-card .example-case-card-icon p {
  padding: 4px 0 0 36px;
  font-style: italic;
}
.LegacyContentWrapper .example-case-cards .example-case-card a:active {
  background-color: #FAFCFC;
}
.LegacyContentWrapper .example-case-cards .example-case-card a:hover {
  box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.05), 0 7px 14px 0 rgba(50, 50, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
  border: 1px solid var(--sail-color-white);
}
.LegacyContentWrapper .example-case-cards .example-case-card a h3 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: var(--sail-text-color-link);
  font-weight: 500;
  line-height: 20px;
}
.LegacyContentWrapper .example-case-cards .example-case-card a p {
  color: var(--sail-color-text);
  margin: 0;
  padding: 4px 0 12px 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.LegacyContentWrapper .example-case-cards .example-case-card-description {
  position: relative;
  top: 8px;
}
.LegacyContentWrapper .example-case-cards h3 .tag {
  top: -2px;
  float: right;
  padding: 0 8px 0 8px;
}
.LegacyContentWrapper .example-case-cards h3 .compressed-title {
  width: 140px;
  float: left;
}
.LegacyContentWrapper .example-case-card-icon-shopify {
  background-image: url('https://stripe.com/img/documentation/index/icon-shopify.svg');
}
.LegacyContentWrapper .example-case-card-icon-lyft {
  background-image: url('https://stripe.com/img/documentation/index/icon-lyft.svg');
}
.LegacyContentWrapper .guide-cards-container {
  position: relative;
}
.LegacyContentWrapper article .guide-cards-content .guide-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 33%));
  grid-gap: 20px;
  list-style: none;
  margin-top: 20px;
}
.LegacyContentWrapper article .tabs-content .guide-cards {
  margin-top: 0;
}
.LegacyContentWrapper .guide-cards .guide-card {
  margin: 0;
  padding: 0;
  border-radius: 4px;
  transition: box-shadow 0.2s ease-in-out;
}
.LegacyContentWrapper .guide-card:before {
  display: none;
}
.LegacyContentWrapper .guide-cards-view-all {
  position: absolute;
  top: -41px;
  right: 0;
}
.LegacyContentWrapper .guide-cards-view-all:after {
  font: normal 16px 'StripeIcons';
  content: "\279D";
  padding-left: 5px;
}
.LegacyContentWrapper .guide-card .guide-card-inner {
  position: relative;
  height: 100%;
  border-radius: 4px 4px 0 0;
  text-decoration: none;
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--sail-color-gray-100);
}
.LegacyContentWrapper .guide-card.has-image a {
  padding-top: 0;
}
.LegacyContentWrapper .guide-cards-container:not(.has-images) .guide-card .guide-card-inner {
  padding: 20px;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
}
.LegacyContentWrapper .guide-cards-container:not(.has-images) .guide-card:hover {
  box-shadow: var(--guide-card-hover-shadow);
}
.LegacyContentWrapper .guide-cards-container.has-images .guide-card-content {
  padding-right: 32px;
}
.LegacyContentWrapper .guide-cards-content p {
  padding: 4px 0 0 0;
}
.LegacyContentWrapper .guide-card-image {
  min-height: 116px;
  height: 116px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 20px;
  background-size: cover;
  border-radius: 4px;
  transition: box-shadow 0.2s ease-in-out;
}
.LegacyContentWrapper .guide-card-image:hover {
  box-shadow: var(--guide-card-hover-shadow);
}
.LegacyContentWrapper .guide-cards .guide-card .guide-card-title {
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 21px;
  color: var(--sail-color-link);
  font-weight: 500;
}
.LegacyContentWrapper .guide-card-description {
  padding-top: 4px !important;
  font-size: 15px;
  font-weight: 400;
  color: #4E566D;
  line-height: 21px;
}
.LegacyContentWrapper .guide-card .product-badge {
  padding: 12px 0 0 0;
  flex-grow: 0;
}
.LegacyContentWrapper .guide-card-footer {
  padding: 0 24px 24px 24px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.LegacyContentWrapper .has-image .guide-card-footer {
  padding: 8px 24px 12px 24px;
}
.LegacyContentWrapper .connect-preview .has-badge .guide-card-footer {
  height: 100%;
}
.LegacyContentWrapper .guide-cards-container.connect-preview {
  margin-top: 48px;
}
.LegacyContentWrapper .payments-guides {
  padding: 48px 0 0 0;
}
.LegacyContentWrapper .guide-cards-content p.learn-more-cta {
  padding: 16px 0 0 0;
  text-align: right;
}
.LegacyContentWrapper .learn-more-cta {
  padding-top: 16px;
  text-align: right;
  width: 100%;
}
.LegacyContentWrapper .guide-cards-content h3 .tag {
  top: 0px;
}
.LegacyContentWrapper #content {
  overflow-x: visible !important;
}
/* Product grid */
.LegacyContentWrapper .products {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 16px !important;
  margin-bottom: -23px;
}
.LegacyContentWrapper .products li {
  flex-shrink: 0;
  width: 48%;
  margin: 0 0 23px 0;
  padding: 0;
}
.LegacyContentWrapper .products li:before {
  display: none;
}
.LegacyContentWrapper .products li a {
  position: relative;
  display: block;
  height: 80px;
  box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.05), 0 2px 5px 0 rgba(50, 50, 93, 0.10), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
  border-radius: 6px;
  text-decoration: none;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: 17px 22px;
  background-size: 36px 36px;
  transition: box-shadow 200ms ease-in-out;
}
.LegacyContentWrapper .products li a:active {
  background-color: #FAFCFC;
}
.LegacyContentWrapper .products li a:hover {
  box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.05), 0 7px 14px 0 rgba(50, 50, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
}
.LegacyContentWrapper .products li a h3 {
  position: absolute;
  top: 8px;
  left: 68px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #556CD6;
  font-weight: 500;
}
.LegacyContentWrapper .products li a p {
  color: #4F566B;
  position: absolute;
  top: 34px;
  right: 24px;
  left: 68px;
  bottom: 10px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 17px;
}
.LegacyContentWrapper .product-payments {
  background-image: url('https://stripe.com/img/documentation/index/icon-payments.svg');
}
.LegacyContentWrapper .product-billing {
  background-image: url('https://stripe.com/img/documentation/index/icon-billing.svg');
}
.LegacyContentWrapper .product-connect {
  background-image: url('https://stripe.com/img/documentation/index/icon-connect.svg');
}
.LegacyContentWrapper .product-radar {
  background-image: url('https://stripe.com/img/documentation/index/icon-radar.svg');
}
.LegacyContentWrapper .product-relay {
  background-image: url('https://stripe.com/img/documentation/index/icon-relay.svg');
}
.LegacyContentWrapper .product-atlas {
  background-image: url('https://stripe.com/img/documentation/index/icon-atlas.svg');
}
.LegacyContentWrapper .product-sigma {
  background-image: url('https://stripe.com/img/documentation/index/icon-sigma.svg');
}
.LegacyContentWrapper .product-issuing {
  background-image: url('https://stripe.com/img/documentation/index/icon-issuing.svg');
}
.LegacyContentWrapper .product-terminal {
  background-image: url('https://stripe.com/img/documentation/index/icon-terminal.svg');
}
/* Try now component */
.LegacyContentWrapper .try-now nav {
  border-bottom: 1px solid #F0F4F7;
  padding: 7px 0;
}
.LegacyContentWrapper .try-now nav ol {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 15px;
  color: #A5B3BB;
  line-height: 26px;
}
.LegacyContentWrapper .try-now nav ol>li {
  padding-left: 27px;
}
.LegacyContentWrapper .try-now nav ol>li:before {
  background: #E3E8EE;
  color: #697386;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  padding: 3px 0;
  height: 14px;
  width: 20px;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 3px;
}
.LegacyContentWrapper .try-now nav ol>li:nth-of-type(2):before,
.LegacyContentWrapper .try-now nav ol>li:nth-of-type(3):before {
  letter-spacing: -1px;
}
.LegacyContentWrapper .try-now nav ol>li.completed {
  color: #292E31;
  cursor: pointer;
}
.LegacyContentWrapper .try-now nav ol>li.completed:before {
  background-color: #292E31;
}
.LegacyContentWrapper .try-now nav ol>li.active {
  color: #556CD6;
}
.LegacyContentWrapper .try-now nav ol>li.active:before {
  background-color: #556CD6;
  color: #fff;
}
.LegacyContentWrapper .try-now-demo {
  position: relative;
  overflow: hidden;
  height: 335px;
  margin-bottom: -30px;
}
.LegacyContentWrapper .try-now-header {
  height: 62px;
}
.LegacyContentWrapper .try-now-header p,
.LegacyContentWrapper .try-now-header p:not(:first-child) {
  position: absolute;
  top: 15px;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity ease-in-out 300ms;
  opacity: 0;
  padding: 0;
}
.LegacyContentWrapper .try-now-header p.active {
  transition-delay: 150ms;
  opacity: 1;
}
.LegacyContentWrapper .try-now .card-form {
  position: absolute;
  top: 50px;
  right: 15px;
  z-index: 10;
}
.LegacyContentWrapper .try-now .card-form label {
  width: 55px;
}
.LegacyContentWrapper .try-now .card-form .name {
  font-family: sans-serif;
  font-size: 14px;
  color: #000;
  -webkit-font-smoothing: auto;
}
.LegacyContentWrapper .try-now .tabs.code {
  margin: 0;
}
.LegacyContentWrapper .try-now .tabs-content .tabs-tab {
  padding-top: 0;
  align-items: center;
  width: 100%;
  height: 212px;
}
.LegacyContentWrapper .try-now .tabs-content .tabs-tab-long {
  align-items: baseline;
  overflow: scroll;
}
.LegacyContentWrapper .try-now .tabs-content .tabs-tab.selected {
  display: flex;
  flex: 0;
}
.LegacyContentWrapper .try-now .tabs-content .tabs-tab[data-step=finish] {
  background: white;
  border-radius: 5px;
}
.LegacyContentWrapper .try-now .tabs-content .tabs-tab[data-step=finish].selected {
  display: block;
}
.LegacyContentWrapper .try-now .tabs-content .tabs-tab .code {
  margin-top: 0;
  width: 100%;
}
.LegacyContentWrapper .try-now-footer {
  position: relative;
  overflow: hidden;
}
.LegacyContentWrapper .try-now-footer p {
  transition: 450ms;
}
.LegacyContentWrapper .try-now-footer p,
.LegacyContentWrapper .try-now-footer p:not(:first-child) {
  padding: 13px 0 18px;
}
.LegacyContentWrapper .try-now-footer p.success {
  position: absolute;
  top: 0;
  left: 15px;
  right: 0;
  padding-left: 30px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  background-image: url('https://stripe.com/img/documentation/icon-answer.svg');
  background-size: 15px 12px;
  background-position: 4px 22px;
  background-repeat: no-repeat;
}
.LegacyContentWrapper .try-now-footer p.restart {
  display: none;
  float: right;
  cursor: pointer;
  color: #a5b3bb;
  opacity: 0;
}
.LegacyContentWrapper .try-now-footer p.completed+p.restart {
  display: block;
  opacity: 1;
}
.LegacyContentWrapper .try-now-footer p.active {
  opacity: 1;
  transform: none;
  transition: 450ms cubic-bezier(0, .9, .11, 1);
}
.LegacyContentWrapper .try-now-footer p.usage,
.LegacyContentWrapper .try-now-footer p.tip {
  transition: 450ms cubic-bezier(0, .9, .11, 1);
}
.LegacyContentWrapper .try-now-footer p.active~p.usage,
.LegacyContentWrapper .try-now-footer p.active~p.tip,
.LegacyContentWrapper .try-now-footer p.completed:not(.active) {
  opacity: 0;
  transform: translateY(200%);
  transition: 450ms;
}
/* Others */
.LegacyContentWrapper .payments.columns,
.LegacyContentWrapper .non-developer.columns {
  margin: 30px 0 !important;
}
.LegacyContentWrapper .payments.columns .column,
.LegacyContentWrapper .non-developer.columns .column {
  width: 50%;
}
.LegacyContentWrapper .payments-web,
.LegacyContentWrapper .payments-mobile {
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 76px;
}
.LegacyContentWrapper .payments-web {
  background-image: url('https://stripe.com/img/documentation/getting-started/web.png');
  background-size: 74px 60px;
}
.LegacyContentWrapper .payments-mobile {
  background-image: url('https://stripe.com/img/documentation/getting-started/mobile.png');
  background-size: 58px 59px;
}
.LegacyContentWrapper .non-developer-plugins,
.LegacyContentWrapper .non-developer-integrations {
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 66px;
}
.LegacyContentWrapper .non-developer-plugins {
  background-image: url('https://stripe.com/img/documentation/getting-started/platforms.png');
  background-size: 94px 46px;
}
.LegacyContentWrapper .non-developer-integrations {
  background-image: url('https://stripe.com/img/documentation/getting-started/services.png');
  background-size: 96px 48px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .LegacyContentWrapper .payments-web {
    background-image: url('https://stripe.com/img/documentation/getting-started/web@2x.png');
  }

  .LegacyContentWrapper .payments-mobile {
    background-image: url('https://stripe.com/img/documentation/getting-started/mobile@2x.png');
  }

  .LegacyContentWrapper .non-developer-plugins {
    background-image: url('https://stripe.com/img/documentation/getting-started/platforms@2x.png');
  }

  .LegacyContentWrapper .non-developer-integrations {
    background-image: url('https://stripe.com/img/documentation/getting-started/services@2x.png');
  }
}
.LegacyContentWrapper .integrations-overview {
  column-count: 2;
  list-style: none;
}
.LegacyContentWrapper .integrations-overview li {
  padding-left: 0;
  margin: 0 0 6px 0;
}
.LegacyContentWrapper .integrations-overview li:before {
  display: none;
}
.LegacyContentWrapper .inline-integration-checker {
  margin-top: -12px;
  display: block;
  font-size: 14px;
}
.LegacyContentWrapper .inline-integration-checker h4 {
  margin-top: unset;
  padding-top: unset;
  padding-left: 4px;
}
.LegacyContentWrapper .inline-integration-checker .log-link {
  font-size: 14px;
  margin-left: 6px;
}
.LegacyContentWrapper .inline-integration-checker aside.important {
  padding-top: 10px;
  padding-bottom: 2px;
}
.LegacyContentWrapper .inline-integration-checker ul.error-list {
  padding-bottom: 4px;
}
.LegacyContentWrapper .inline-integration-checker-aside {
  margin-top: 12px;
}
.LegacyContentWrapper .inline-check-completed {
  content: url('https://stripe.com/img/documentation/icon-aside-check.svg');
}
.LegacyContentWrapper .inline-check {
  display: inline-flex;
}
.LegacyContentWrapper .inline-check-container {
  margin-bottom: 8px;
}
.LegacyContentWrapper .use-metadata-note code {
  background-color: unset;
  border: unset;
}
.LegacyContentWrapper .integration-checkers-card-number {
  font-family: Menlo-Bold;
  color: var(--sail-color-blue-500);
  font-size: 14px;
  cursor: pointer;
}
.LegacyContentWrapper .integration-checkers-copy-clipboard-button {
  content: url('https://stripe.com/img/documentation/icon-clipboard.svg');
  margin-left: 10px;
}
.LegacyContentWrapper .integration-checkers-chevron {
  transition: all 200ms ease;
  cursor: pointer;
}
.LegacyContentWrapper .integration-checkers-chevron-down {
  transform: rotate(90deg) !important;
}
.LegacyContentWrapper .integration-checkers-testcases-show {
  opacity: 1;
}
.LegacyContentWrapper .integration-checker-transition {
  transition: flex-grow 200ms ease;
  -webkit-transition: flex-grow 200ms;
}
.LegacyContentWrapper .integration-checkers-testcases-hidden {
  opacity: 0;
}
.LegacyContentWrapper .integration-checkers-testcases {
  transition: all 200ms ease;
  -webkit-transition: all 200ms;
}
.LegacyContentWrapper .light-callout {
  margin-top: 24px;
  border-left: 3px solid #33C27F;
  padding-left: 24px;
}
.LegacyContentWrapper .light-callout-title {
  font-size: 15px;
  color: #33C27F;
  text-transform: uppercase;
  font-weight: 600;
}
.LegacyContentWrapper .light-callout a {
  font-size: 15px;
  text-decoration: none;
}
.LegacyContentWrapper .light-callout p+p {
  padding-top: 8px;
}
.LegacyContentWrapper section.ios,
.LegacyContentWrapper section.android {
  background-size: 64px 64px;
  background-repeat: no-repeat;
  background-position: 0 39px;
  padding-left: 94px;
}
.LegacyContentWrapper section.ios {
  background-image: url('https://stripe.com/img/documentation/mobile/ios.png');
}
.LegacyContentWrapper section.android {
  background-image: url('https://stripe.com/img/documentation/mobile/android.png');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .LegacyContentWrapper section.ios { background-image: url('https://stripe.com/img/documentation/mobile/ios@2x.png'); }
  .LegacyContentWrapper section.android { background-image: url('https://stripe.com/img/documentation/mobile/android@2x.png'); }
}
.LegacyContentWrapper .illustration {
  margin: 20px;
}
.LegacyContentWrapper .illustration img {
  display: block;
  margin: 0 auto;
}
.LegacyContentWrapper .screens {
  width: 640px;
  margin: 20px auto 35px;
  overflow: auto;
}
.LegacyContentWrapper .screens img,
.LegacyContentWrapper .screens .add-card {
  float: left;
}
.LegacyContentWrapper .screens .add-card {
  margin-right: 47px;
  height: 366px;
  width: 180px;
  overflow: hidden;
}
.LegacyContentWrapper .screens img:nth-of-type(1) {
  margin-right: 47px;
}
.LegacyContentWrapper .screens img {
  width: 180px;
}
.LegacyContentWrapper .screens div.add-card {
  background-image: url('/img/blog/posts/ui-components-for-ios/add-card@2x.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.LegacyContentWrapper .screens video {
  top: 44px;
  left: 12px;
  position: relative;
}
.LegacyContentWrapper .screenshots {
  margin: 20px;
}
.LegacyContentWrapper .screenshots img {
  display: block;
  margin: 0 auto;
}
.LegacyContentWrapper .home-payment-methods .payment-methods-card {
  margin-top: 64px;
}
.LegacyContentWrapper .payment-methods-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding: 32px 0 0 0;
  border-top: 1px solid var(--sail-color-gray-100);

}
.LegacyContentWrapper .payment-methods-card .payment-methods-text {
  flex-grow: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--sail-color-text-blue);
}
.LegacyContentWrapper .payment-methods-list {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon {
  display: block;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  width: 50px;
  height: 30px;
  margin-right: 4px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon:last-of-type {
  margin-right: 0;
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon:focus-within {
  border: 1px solid var(--sail-color-gray-200);
}
.LegacyContentWrapper .payment-method-card .payment-method-icon-has-link {
  transition: border 200ms ease-in-out;
}
.LegacyContentWrapper .payment-method-card .payment-method-icon-has-link:hover {
  border: 1px solid var(--sail-color-gray-200);
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon-american-express {
  background-image: url('https://stripe.com/img/documentation/index/payment-methods/american-express.svg');
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon-apple-pay {
  background-image: url('https://stripe.com/img/documentation/index/payment-methods/apple-pay.svg');
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon-diners-club {
  background-image: url('https://stripe.com/img/documentation/index/payment-methods/diners-club.svg');
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon-discover {
  background-image: url('https://stripe.com/img/documentation/index/payment-methods/discover.svg');
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon-google-pay {
  background-image: url('https://stripe.com/img/documentation/index/payment-methods/google-pay.svg');
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon-jcb {
  background-image: url('https://stripe.com/img/documentation/index/payment-methods/jcb.svg');
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon-mastercard {
  background-image: url('https://stripe.com/img/documentation/index/payment-methods/mastercard.svg');
}
.LegacyContentWrapper .payment-methods-card .payment-method-icon-visa {
  background-image: url('https://stripe.com/img/documentation/index/payment-methods/visa.svg');
}
.LegacyContentWrapper .product-card {
  display: flex;
  background: #FFFFFF;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  padding: 20px;
  margin-top: 24px;
  margin-left: 1px;
  margin-right: 1px;
}
.LegacyContentWrapper .product-card-image {
  padding-left: 80px;
}
.LegacyContentWrapper .product-card img {
  width: 100%;
}
.LegacyContentWrapper .product-card-description h4 {
  font-size: 16px;
  color: var(--sail-color-text-black);
  font-weight: 500;
}
.LegacyContentWrapper article .product-card-description p {
  font-size: 14px;
  color: var(--sail-color-text-text);
  line-height: 20px;
  padding-top: 8px;
}
.LegacyContentWrapper .product-card .product-card-link {
  padding-top: 17px;
  line-height: 15px;
}
.LegacyContentWrapper .product-card-description p a,
.LegacyContentWrapper .product-card-description p a:visited {
  font-size: 14px;
  position: relative;
  text-decoration: none;
  padding: 8px;
  margin: -8px;
}
.LegacyContentWrapper .product-card-description p a:not([data-no-arrow])::after {
  content: "";
  height: 17px;
  position: absolute;
  width: 12px;
  background-image: url('https://stripe.com/img/documentation/arrow-purple.svg');
  background-repeat: no-repeat;
  background-position: center left;
  top: 8px;
  right: -18px;
  padding: 8px;
  margin: -8px;
}
.LegacyContentWrapper .inline-product-card {
  background: var(--sail-color-white);
  box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.05), 0 2px 5px 0 rgba(50, 50, 93, 0.10), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
  border-radius: 6px;
  padding: 24px 24px;
  margin-top: 24px;
  flex: 1;
  margin-right: 17px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.LegacyContentWrapper .inline-product-card:last-child {
  margin-right: 0;
}
.LegacyContentWrapper .inline-product-cards {
  display: flex;
  margin: 0px 8px;
}
.LegacyContentWrapper .right-sidebar-diagram {
  position: absolute;
  right: -240px;
  width: 220px;
}
/* Page layout */
.LegacyContentWrapper body.admin-content {
  display: flex;
  flex-direction: column;
}
.LegacyContentWrapper #site-admin-content {
  flex-grow: 1;
  position: relative;
}
/* Layout and style for admin banner */
.LegacyContentWrapper #site-admin-banner {
  z-index: 20;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.24), 0 1px 0 hsla(0,0%,100%,.3);
  background: #43458b;
  color: #fff;
}
.LegacyContentWrapper #site-admin-banner-content {
    max-width: 90%;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 0 auto;
    height: 100%;
    padding: 12px 0;
}
/* Basic banner styles */
.LegacyContentWrapper #site-admin-banner p {
  font-size: 14px;
  padding-top: 12px;
}
.LegacyContentWrapper #site-admin-banner p:first-child {
  padding-top: 0;
}
.LegacyContentWrapper #site-admin-banner button {
  background: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(50,50,93, 0.1), 0 2px 5px 0 rgba(50,50,93, 0.08), 0 1px 1.5px 0 rgba(0,0,0, 0.07), 0 1px 2px 0 rgba(0,0,0, 0.08);
  opacity: 0.99;
  cursor: pointer;
  outline: none;
  font-size: 12px;
  color: #525f7f;
  line-height: 16px;
  font-weight: 500;
}
.LegacyContentWrapper #site-admin-banner button.success {
  background: #aff1b6;
}
.LegacyContentWrapper #site-admin-banner button.failed {
  color: #ffcca5;
}
.LegacyContentWrapper #site-admin-banner input {
  padding: 2px 7px;
  background: #fff;
  border-radius: 4px;
  cursor: text;
  color: #525f7f;
  font-size: 12px;
  line-height: 18px;
  transition: box-shadow 0.08s ease-in, color 0.08s ease-in;
}
/* Badges used in the banner */
.LegacyContentWrapper #site-admin-banner .requires-badge {
  border-radius: 20px;
  white-space: nowrap;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  background: #e39f48;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size:12px;
  margin: 0 3px;
}
.LegacyContentWrapper #site-admin-banner .requires-badge.badge-green {
  box-shadow: inset 0 0 0 1px rgba(36,180,126, 0.2);
  background: #24b47e;
  color: #fff;
}
/* Info on the left and right sides */
.LegacyContentWrapper #site-admin-info {
  display: flex;
  flex-direction: column;
}
.LegacyContentWrapper #site-admin-banner #report-issues {
  margin-left: auto;
}
.LegacyContentWrapper #site-admin-banner #report-issues > * {
  display: inline-block;
  margin-left: 6px;
}
.LegacyContentWrapper #site-admin-banner #public-url > * {
  display: inline-block;
  margin-right: 4px;
}
/* Icon for gated docs on the sidebar */
.LegacyContentWrapper #sidebar .gateddocs {
  background-image: url(https://stripe.com/img/documentation/navigation/icon-warning.svg);
}
.LegacyContentWrapper #site-admin-banner .header-stats {
  margin-left: 25px;
}
.LegacyContentWrapper #site-admin-banner .stat-csat a {
  font-size: 18px;
  color: white;
}
.LegacyContentWrapper .subscriptions-contents ol {
  column-count: 2;
  list-style: none;
}
.LegacyContentWrapper .subscriptions-contents ol > li {
  break-inside: avoid;
  padding-bottom: 5px;
}
/* Variables */
.LegacyContentWrapper #take-a-payment-demo {
  --body-color: rgb(247, 250, 252);
  --button-color: #556CD6;
  --accent-color: #556CD6;
  --gray-border: #e3e8ee;
  --link-color: #ffffff;
  --font-color: rgb(105, 115, 134);
  --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 4px;
  --form-width: 400px;
}
/* Base */
.LegacyContentWrapper #take-a-payment-demo {
  box-sizing: border-box;
  background-color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  padding: 20px 20px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  transition: height 1s ease;
  min-height: 240px;
}
/* Stripe Element placeholder */
.LegacyContentWrapper .sr-input.sr-card-element {
  padding-top: 12px;
}
/* Code block */
.LegacyContentWrapper #take-a-payment-demo code,
.LegacyContentWrapper #take-a-payment-demo pre {
  font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace;
  font-size: 12px;
}
.LegacyContentWrapper .use-case-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(302px, 33%));
  grid-gap: 20px;
  list-style: none;
  margin-top: 20px !important;
}
.LegacyContentWrapper .use-case-cards .use-case-card {
  padding: 0;
  margin: 0;
  min-height: 90px;
}
.LegacyContentWrapper .use-case-cards .use-case-card.use-case-card-stretch {
  grid-column: 1 / span 3;
  min-height: 40px;
}
.LegacyContentWrapper .use-case-cards .use-case-card.use-case-card-stretch a {
  background-position: 16px 20px;
}
.LegacyContentWrapper .use-case-cards .use-case-card:before {
  display: none;
}
.LegacyContentWrapper .use-case-cards .use-case-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 17px 24px 16px 68px;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  text-decoration: none;
  background-color: var(--sail-color-white);
  background-repeat: no-repeat;
  background-position: 16px 16px;
  background-size: 36px 36px;
  transition: all 200ms ease-in-out;
}
.LegacyContentWrapper .use-case-cards .use-case-card a:active {
  background-color: #FAFCFC;
}
.LegacyContentWrapper .use-case-cards .use-case-card a:hover {
  box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.05), 0 7px 14px 0 rgba(50, 50, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
  border: 1px solid var(--sail-color-white);
}
.LegacyContentWrapper .use-case-cards .use-case-card a h3 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: var(--sail-text-color-link);
  font-weight: 500;
  line-height: 20px;
}
.LegacyContentWrapper .use-case-cards .use-case-card a p {
  margin: 0;
  padding: 4px 0 0 0;
  font-size: 15px;
  font-weight: 400;
  color: #4E566D;
  line-height: 21px;
}
.LegacyContentWrapper .use-case-card-icon-payments {
  background-image: url('https://stripe.com/img/documentation/index/icon-payments.svg');
}
.LegacyContentWrapper .use-case-card-icon-checkout {
  background-image: url('https://stripe.com/img/documentation/index/icon-checkout.svg');
}
.LegacyContentWrapper .use-case-card-icon-accept-payment {
  background-image: url('https://stripe.com/img/documentation/index/icon-accept-payment.svg');
}
.LegacyContentWrapper .use-case-card-icon-save-card {
  background-image: url('https://stripe.com/img/documentation/index/icon-save-card.svg');
}
.LegacyContentWrapper .use-case-card-icon-save-card-after {
  background-image: url('https://stripe.com/img/documentation/index/icon-save-card-after.svg');
}
.LegacyContentWrapper .use-case-card-icon-settings {
  background-image: url('https://stripe.com/img/documentation/index/icon-settings.svg');
}
.LegacyContentWrapper .use-case-card-icon-onboarding {
  background-image: url('https://stripe.com/img/documentation/index/icon-onboarding.svg');
}
.LegacyContentWrapper .use-case-card-icon-billing {
  background-image: url('https://stripe.com/img/documentation/index/icon-subscriptions.svg');
}
.LegacyContentWrapper .use-case-card-icon-connect {
  background-image: url('https://stripe.com/img/documentation/index/icon-connect.svg');
}
.LegacyContentWrapper .use-case-card-icon-radar {
  background-image: url('https://stripe.com/img/documentation/index/icon-radar.svg');
}
.LegacyContentWrapper .use-case-card-icon-relay {
  background-image: url('https://stripe.com/img/documentation/index/icon-relay.svg');
}
.LegacyContentWrapper .use-case-card-icon-atlas {
  background-image: url('https://stripe.com/img/documentation/index/icon-atlas.svg');
}
.LegacyContentWrapper .use-case-card-icon-sigma {
  background-image: url('https://stripe.com/img/documentation/index/icon-sigma.svg');
}
.LegacyContentWrapper .use-case-card-icon-issuing {
  background-image: url('https://stripe.com/img/documentation/index/icon-issuing.svg');
}
.LegacyContentWrapper .use-case-card-icon-terminal {
  background-image: url('https://stripe.com/img/documentation/index/icon-terminal.svg');
}
.LegacyContentWrapper .use-case-card-icon-api-ref {
  background-image: url('https://stripe.com/img/documentation/index/icon-api-ref.svg');
}
.LegacyContentWrapper .use-case-card-icon-libraries {
  background-image: url('https://stripe.com/img/documentation/index/icon-libraries.svg');
}
.LegacyContentWrapper .use-case-card-icon-community {
  background-image: url('https://stripe.com/img/documentation/index/icon-community.svg');
}
.LegacyContentWrapper .use-case-card-icon-credit-card {
  background-image: url('https://stripe.com/img/documentation/index/icon-credit-card.svg');
}
.LegacyContentWrapper .use-case-card-icon-bank {
  background-image: url('https://stripe.com/img/documentation/index/icon-bank.svg');
}
.LegacyContentWrapper .use-case-card-icon-security {
  background-image: url('https://stripe.com/img/documentation/index/security.svg');
}
.LegacyContentWrapper .use-case-card-icon-development {
  background-image: url('https://stripe.com/img/documentation/index/devtools.svg');
}
.LegacyContentWrapper .use-case-card-icon-account {
  background-image: url('https://stripe.com/img/documentation/index/account.svg');
}
.LegacyContentWrapper .wide-card {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 16px;
  border: 1px solid var(--sail-color-gray-100);
  border-radius: 4px;
  text-decoration: none;
  transition: all 200ms ease-in-out;
}
.LegacyContentWrapper .wide-card:hover {
  box-shadow: var(--guide-card-hover-shadow);
  border: 1px solid transparent;
}
.LegacyContentWrapper .wide-card-content {
  width: 50%;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.LegacyContentWrapper .wide-card-image {
  width: 50%;
  min-height: 160px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  margin: 10px 20px 0 0;
}
.LegacyContentWrapper .wide-card-content h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--sail-color-text-blue);
}
.LegacyContentWrapper .wide-card-subheader {
  font-size: 14px;
  color: var(--sail-color-text-gray);
  margin-top: 4px;
}
.LegacyContentWrapper .wide-card-content p {
  font-size: 14px;
  font-weight: 400;
  color: var(--sail-color-text);
  line-height: 20px;
  padding-top: 8px !important;
}
.LegacyContentWrapper .wide-card .arrow-after:after {
    content: "";
    position: relative;
    background-image: url('https://stripe.com/img/documentation/arrow-purple.svg');
    background-repeat: no-repeat;
    background-position: center;
    top: 1px;
    padding: 8px 12px;
}


/*# sourceMappingURL=legacy.4430ee44f66227d9de7f.css.map*/