.Link { cursor: pointer; text-decoration: none;} .Link:focus { outline: 1px dotted var(--checkout-gray400); } .Link--primary { color: var(--checkout-blue); } .Link--secondary { color: var(--checkout-gray400); text-decoration: underline; } .Link--checkout--secondary { color: var(--checkout-gray600); text-decoration: underline dotted var(--checkout-gray600); -webkit-text-decoration: underline dotted var(--checkout-gray600); } .Link--link--primary { color: var(--link-text-action); text-decoration: underline solid var(--link-text-action); -webkit-text-decoration: underline solid var(--link-text-action); } .Link--link--secondary { color: var(--link-text-default); text-decoration: underline 1px solid var(--link-text-default); -webkit-text-decoration: underline 1px solid var(--link-text-default); } .flex-container { box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-item { box-sizing: border-box; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; max-width: 100%; min-width: 0; } .flex-item-align-left { margin-right: auto; text-align: left; } .flex-item-align-right { margin-left: auto; text-align: right; } .flex-item:empty { display: none; } .flex-column-break { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; width: 0; } .direction-row { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .direction-row-reverse { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .direction-column { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .direction-column-reverse { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .spacing-0 { margin: 0; } .spacing-0>.flex-item { padding: 0; } .spacing-4 { margin: -2px; } .spacing-4>.flex-item { padding: 2px; } .spacing-8 { margin: -4px; } .spacing-8>.flex-item { padding: 4px; } .spacing-12 { margin: -6px; } .spacing-12>.flex-item { padding: 6px; } .spacing-16 { margin: -8px; } .spacing-16>.flex-item { padding: 8px; } .spacing-24 { margin: -12px; } .spacing-24>.flex-item { padding: 12px; } .spacing-32 { margin: -16px; } .spacing-32>.flex-item { padding: 16px; } .flex-item-no-padding { /* !important reason: legacy */ padding-bottom: 0!important; /* !important reason: legacy */ padding-top: 0!important; } .justify-content-flex-start { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .justify-content-flex-end { -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .justify-content-center { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .justify-content-space-between { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .justify-content-space-around { -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .justify-content-space-evenly { -ms-flex-pack: space-evenly; -webkit-justify-content: space-evenly; justify-content: space-evenly; } .align-items-flex-start { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .align-items-flex-end { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .align-items-center { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .align-items-stretch { -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .align-items-baseline { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .wrap-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .wrap-nowrap { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .width-auto { width: auto; } .width-auto, .width-fixed { -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; } .width-fixed { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .width-grow { -ms-flex-preferred-size: 0; -ms-flex-positive: 1; -webkit-flex-basis: 0; flex-basis: 0; -webkit-flex-grow: 1; flex-grow: 1; } .width-1 { width: 8.33333333%; } .width-2 { width: 16.66666667%; } .width-3 { width: 25%; } .width-4 { width: 33.33333333%; } .width-5 { width: 41.66666667%; } .width-6 { width: 50%; } .width-7 { width: 58.33333333%; } .width-8 { width: 66.66666667%; } .width-9 { width: 75%; } .width-10 { width: 83.33333333%; } .width-11 { width: 91.66666667%; } .width-12 { width: 100%; } @media only screen and (min-width:576px) { .direction-row-sm { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .direction-row-reverse-sm { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .direction-column-sm { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .direction-column-reverse-sm { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .spacing-0-sm { margin: 0; } .spacing-0-sm>.flex-item { padding: 0; } .spacing-4-sm { margin: -2px; } .spacing-4-sm>.flex-item { padding: 2px; } .spacing-8-sm { margin: -4px; } .spacing-8-sm>.flex-item { padding: 4px; } .spacing-12-sm { margin: -6px; } .spacing-12-sm>.flex-item { padding: 6px; } .spacing-16-sm { margin: -8px; } .spacing-16-sm>.flex-item { padding: 8px; } .spacing-24-sm { margin: -12px; } .spacing-24-sm>.flex-item { padding: 12px; } .spacing-32-sm { margin: -16px; } .spacing-32-sm>.flex-item { padding: 16px; } .justify-content-flex-start-sm { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .justify-content-flex-end-sm { -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .justify-content-center-sm { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .justify-content-space-between-sm { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .justify-content-space-around-sm { -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .justify-content-space-evenly-sm { -ms-flex-pack: space-evenly; -webkit-justify-content: space-evenly; justify-content: space-evenly; } .align-items-flex-start-sm { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .align-items-flex-end-sm { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .align-items-center-sm { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .align-items-stretch-sm { -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .align-items-baseline-sm { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .wrap-wrap-sm { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .wrap-nowrap-sm { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .width-auto-sm { width: auto; } .width-auto-sm, .width-fixed-sm { -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; } .width-fixed-sm { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .width-grow-sm { -ms-flex-preferred-size: 0; -ms-flex-positive: 1; -webkit-flex-basis: 0; flex-basis: 0; -webkit-flex-grow: 1; flex-grow: 1; } .width-1-sm { width: 8.33333333%; } .width-2-sm { width: 16.66666667%; } .width-3-sm { width: 25%; } .width-4-sm { width: 33.33333333%; } .width-5-sm { width: 41.66666667%; } .width-6-sm { width: 50%; } .width-7-sm { width: 58.33333333%; } .width-8-sm { width: 66.66666667%; } .width-9-sm { width: 75%; } .width-10-sm { width: 83.33333333%; } .width-11-sm { width: 91.66666667%; } .width-12-sm { width: 100%; } } @media only screen and (min-width:768px) { .direction-row-md { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .direction-row-reverse-md { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .direction-column-md { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .direction-column-reverse-md { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .spacing-0-md { margin: 0; } .spacing-0-md>.flex-item { padding: 0; } .spacing-4-md { margin: -2px; } .spacing-4-md>.flex-item { padding: 2px; } .spacing-8-md { margin: -4px; } .spacing-8-md>.flex-item { padding: 4px; } .spacing-12-md { margin: -6px; } .spacing-12-md>.flex-item { padding: 6px; } .spacing-16-md { margin: -8px; } .spacing-16-md>.flex-item { padding: 8px; } .spacing-24-md { margin: -12px; } .spacing-24-md>.flex-item { padding: 12px; } .spacing-32-md { margin: -16px; } .spacing-32-md>.flex-item { padding: 16px; } .justify-content-flex-start-md { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .justify-content-flex-end-md { -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .justify-content-center-md { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .justify-content-space-between-md { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .justify-content-space-around-md { -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .justify-content-space-evenly-md { -ms-flex-pack: space-evenly; -webkit-justify-content: space-evenly; justify-content: space-evenly; } .align-items-flex-start-md { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .align-items-flex-end-md { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .align-items-center-md { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .align-items-stretch-md { -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .align-items-baseline-md { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .wrap-wrap-md { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .wrap-nowrap-md { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .width-auto-md { width: auto; } .width-auto-md, .width-fixed-md { -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; } .width-fixed-md { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .width-grow-md { -ms-flex-preferred-size: 0; -ms-flex-positive: 1; -webkit-flex-basis: 0; flex-basis: 0; -webkit-flex-grow: 1; flex-grow: 1; } .width-1-md { width: 8.33333333%; } .width-2-md { width: 16.66666667%; } .width-3-md { width: 25%; } .width-4-md { width: 33.33333333%; } .width-5-md { width: 41.66666667%; } .width-6-md { width: 50%; } .width-7-md { width: 58.33333333%; } .width-8-md { width: 66.66666667%; } .width-9-md { width: 75%; } .width-10-md { width: 83.33333333%; } .width-11-md { width: 91.66666667%; } .width-12-md { width: 100%; } } @media only screen and (min-width:992px) { .direction-row-lg { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .direction-row-reverse-lg { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .direction-column-lg { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .direction-column-reverse-lg { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .spacing-0-lg { margin: 0; } .spacing-0-lg>.flex-item { padding: 0; } .spacing-4-lg { margin: -2px; } .spacing-4-lg>.flex-item { padding: 2px; } .spacing-8-lg { margin: -4px; } .spacing-8-lg>.flex-item { padding: 4px; } .spacing-12-lg { margin: -6px; } .spacing-12-lg>.flex-item { padding: 6px; } .spacing-16-lg { margin: -8px; } .spacing-16-lg>.flex-item { padding: 8px; } .spacing-24-lg { margin: -12px; } .spacing-24-lg>.flex-item { padding: 12px; } .spacing-32-lg { margin: -16px; } .spacing-32-lg>.flex-item { padding: 16px; } .justify-content-flex-start-lg { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .justify-content-flex-end-lg { -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .justify-content-center-lg { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .justify-content-space-between-lg { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .justify-content-space-around-lg { -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .justify-content-space-evenly-lg { -ms-flex-pack: space-evenly; -webkit-justify-content: space-evenly; justify-content: space-evenly; } .align-items-flex-start-lg { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .align-items-flex-end-lg { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .align-items-center-lg { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .align-items-stretch-lg { -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .align-items-baseline-lg { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .wrap-wrap-lg { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .wrap-nowrap-lg { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .width-auto-lg { width: auto; } .width-auto-lg, .width-fixed-lg { -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; } .width-fixed-lg { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .width-grow-lg { -ms-flex-preferred-size: 0; -ms-flex-positive: 1; -webkit-flex-basis: 0; flex-basis: 0; -webkit-flex-grow: 1; flex-grow: 1; } .width-1-lg { width: 8.33333333%; } .width-2-lg { width: 16.66666667%; } .width-3-lg { width: 25%; } .width-4-lg { width: 33.33333333%; } .width-5-lg { width: 41.66666667%; } .width-6-lg { width: 50%; } .width-7-lg { width: 58.33333333%; } .width-8-lg { width: 66.66666667%; } .width-9-lg { width: 75%; } .width-10-lg { width: 83.33333333%; } .width-11-lg { width: 91.66666667%; } .width-12-lg { width: 100%; } } .Icon--xs { height: var(--checkout-icon-xs); } .Icon--xs.Icon--square { width: var(--checkout-icon-xs); } .Icon--sm { height: var(--checkout-icon-sm); } .Icon--sm.Icon--square { width: var(--checkout-icon-sm); } .Icon--md { height: var(--checkout-icon-md); } .Icon--md.Icon--square { width: var(--checkout-icon-md); } .Icon--lg { height: var(--checkout-icon-lg); } .Icon--lg.Icon--square { width: var(--checkout-icon-lg); } .Icon--xlg { height: var(--checkout-icon-xlg); } .Icon--xlg.Icon--square { width: var(--checkout-icon-xlg); } .Icon--gray300 { fill: var(--checkout-gray300); } .Icon--gray400 { fill: var(--checkout-gray400); } .Icon--gray500 { fill: var(--checkout-gray500); } .Icon--gray600 { fill: var(--checkout-gray600); color: var(--checkout-gray600); } .Icon--gray800 { fill: var(--checkout-gray800); color: var(--checkout-gray800); } .Icon--white { fill: var(--checkout-white); } .Icon--red { fill: var(--checkout-red); color: var(--checkout-red); } .Icon--blue { fill: var(--checkout-blue); color: var(--checkout-blue); } .Icon .Icon-fill { fill: #565656; } .LinkPaymentForm--linkBranded .Icon--red, .Modal--linkBranded .Icon--red { fill: var(--link-color-danger); color: var(--link-color-danger); } .Spinner { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .Spinner, .Spinner-svg { display: -webkit-flex; display: -ms-flexbox; display: flex; } .Spinner-svg { position: relative; } .Spinner--sm .Spinner-svg { height: var(--checkout-sm-spinner-size); width: var(--checkout-sm-spinner-size); } .Spinner--md .Spinner-svg { height: var(--checkout-md-spinner-size); width: var(--checkout-md-spinner-size); } .Spinner--lg .Spinner-svg { height: var(--checkout-lg-spinner-size); width: var(--checkout-lg-spinner-size); } .Spinner-ellipse { fill: transparent; stroke: var(--checkout-gray200); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 20; -webkit-animation: SpinnerAnimationShow .25s ease normal,SpinnerAnimationRotation .6s linear infinite; animation: SpinnerAnimationShow .25s ease normal,SpinnerAnimationRotation .6s linear infinite; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; transition-timing-function: ease; } .Spinner--white .Spinner-ellipse { stroke: var(--checkout-white); } @-webkit-keyframes SpinnerAnimationShow { 0% { opacity: 0; } to { opacity: 1; } } @keyframes SpinnerAnimationShow { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes SpinnerAnimationRotation { 0% { -webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0); } 50% { -webkit-transform: scaleX(-1) rotate(-180deg); transform: scaleX(-1) rotate(-180deg); } to { -webkit-transform: scaleX(-1) rotate(-1turn); transform: scaleX(-1) rotate(-1turn); } } @keyframes SpinnerAnimationRotation { 0% { -webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0); } 50% { -webkit-transform: scaleX(-1) rotate(-180deg); transform: scaleX(-1) rotate(-180deg); } to { -webkit-transform: scaleX(-1) rotate(-1turn); transform: scaleX(-1) rotate(-1turn); } } .Text { margin: 0; } .Text-fontSize--9 { font-size: var(--checkout-font-size-9); } .Text-fontSize--11 { font-size: var(--checkout-font-size-11); } .Text-fontSize--12 { font-size: var(--checkout-font-size-12); } .Text-fontSize--13 { font-size: var(--checkout-font-size-13); } .Text-fontSize--14 { font-size: var(--checkout-font-size-14); } .Text-fontSize--16 { font-size: var(--checkout-font-size-16); } .Text-fontSize--20 { font-size: var(--checkout-font-size-20); } .Text-fontSize--22 { font-size: var(--checkout-font-size-22); } .Text-fontSize--24 { font-size: var(--checkout-font-size-24); } .Text-fontSize--28 { font-size: var(--checkout-font-size-28); } .Text-fontSize--32 { font-size: var(--checkout-font-size-32); } .Text-fontSize--36 { font-size: var(--checkout-font-size-36); } .Text-fontWeight--400 { font-weight: 400; } .Text-fontWeight--500 { font-weight: 500; } .Text-fontWeight--600 { font-weight: 600; } .Text-fontWeight--700 { font-weight: 700; } .Text-fontWeight--900 { font-weight: 900; } .Text-fontStyle--italic { font-style: italic; } .Text-fontStyle--normal { font-style: normal; } .Text-color--white { color: var(--checkout-white); } .Text-color--gray50 { color: var(--checkout-gray50); } .Text-color--gray100 { color: var(--checkout-gray100); } .Text-color--gray200 { color: var(--checkout-gray200); } .Text-color--gray300 { color: var(--checkout-gray300); } .Text-color--gray400 { color: var(--checkout-gray400); } .Text-color--gray500 { color: var(--checkout-gray500); } .Text-color--gray600 { color: var(--checkout-gray600); } .Text-color--gray700 { color: var(--checkout-gray700); } .Text-color--gray800 { color: var(--checkout-gray800); } .Text-color--gray900 { color: var(--checkout-gray900); } .Text-color--lightGray50 { color: var(--checkout-lightGray50); } .Text-color--lightGray100 { color: var(--checkout-lightGray100); } .Text-color--lightGray200 { color: var(--checkout-lightGray200); } .Text-color--lightGray300 { color: var(--checkout-lightGray300); } .Text-color--lightGray400 { color: var(--checkout-lightGray400); } .Text-color--lightGray500 { color: var(--checkout-lightGray500); } .Text-color--lightGray600 { color: var(--checkout-lightGray600); } .Text-color--lightGray700 { color: var(--checkout-lightGray700); } .Text-color--lightGray800 { color: var(--checkout-lightGray800); } .Text-color--lightGray900 { color: var(--checkout-lightGray900); } .Text-color--purple { color: var(--sail-purple0); } .is-fontFamily--Inconsolata .FormFieldGroup-labelContainer .Text, .is-fontFamily--PTSans .FormFieldGroup-labelContainer .Text, .is-fontFamily--TitilliumWeb .FormFieldGroup-labelContainer .Text, .is-fontFamily--UbuntuMono .FormFieldGroup-labelContainer .Text { font-size: var(--checkout-font-size-14); } .is-fontFamily--Lora .Text { letter-spacing: var(--checkout-letter-spacing-md); } .is-fontFamily--Montserrat .Text { letter-spacing: var(--checkout-letter-spacing-sm); } .App-Overview.is-darkBackground .Text-color--default { color: var(--checkout-lightGray900); } .App-Overview.is-darkBackground .Text-color--gray50 { color: var(--checkout-lightGray50); } .App-Overview.is-darkBackground .Text-color--gray100 { color: var(--checkout-lightGray100); } .App-Overview.is-darkBackground .Text-color--gray200 { color: var(--checkout-lightGray200); } .App-Overview.is-darkBackground .Text-color--gray300 { color: var(--checkout-lightGray300); } .App-Overview.is-darkBackground .Text-color--gray400 { color: var(--checkout-lightGray400); } .App-Overview.is-darkBackground .Text-color--gray500 { color: var(--checkout-lightGray500); } .App-Overview.is-darkBackground .Text-color--gray600 { color: var(--checkout-lightGray600); } .App-Overview.is-darkBackground .Text-color--gray700 { color: var(--checkout-lightGray700); } .App-Overview.is-darkBackground .Text-color--gray800 { color: var(--checkout-lightGray800); } .App-Overview.is-darkBackground .Text-color--gray900 { color: var(--checkout-lightGray900); } @media only screen and (min-width:992px) { .App-Footer.is-darkBackground .Text-color--default { color: var(--checkout-lightGray900); } .App-Footer.is-darkBackground .Text-color--gray50 { color: var(--checkout-lightGray50); } .App-Footer.is-darkBackground .Text-color--gray100 { color: var(--checkout-lightGray100); } .App-Footer.is-darkBackground .Text-color--gray200 { color: var(--checkout-lightGray200); } .App-Footer.is-darkBackground .Text-color--gray300 { color: var(--checkout-lightGray300); } .App-Footer.is-darkBackground .Text-color--gray400 { color: var(--checkout-lightGray400); } .App-Footer.is-darkBackground .Text-color--gray500 { color: var(--checkout-lightGray500); } .App-Footer.is-darkBackground .Text-color--gray600 { color: var(--checkout-lightGray600); } .App-Footer.is-darkBackground .Text-color--gray700 { color: var(--checkout-lightGray700); } .App-Footer.is-darkBackground .Text-color--gray800 { color: var(--checkout-lightGray800); } .App-Footer.is-darkBackground .Text-color--gray900 { color: var(--checkout-lightGray900); } } .Text-color--blue { color: var(--checkout-blue); } .Text-color--red { color: var(--checkout-red); } .Text-color--green { color: var(--checkout-green); } .Text-color--yellow { color: var(--checkout-yellow); } .Text-color--orange { color: var(--checkout-orange); } .Text-transform--uppercase { text-transform: uppercase; } .Text--tabularNumbers { font-variant-numeric: tabular-nums; letter-spacing: -.03rem; } .Text--truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .Text-wordBreak--all { word-break: break-all; } .Text-wordBreak--normal { word-break: normal; } .Text-wordBreak--word { word-break: break-word; } .Button { border: 1px solid transparent; border-radius: var(--rounded); cursor: pointer; transition: background-color .1s ease-in,-webkit-transform .08s ease-in; transition: background-color .1s ease-in,transform .08s ease-in; transition: background-color .1s ease-in,transform .08s ease-in,-webkit-transform .08s ease-in; } .App-Container.is-squareBordered .Button, .ModalContent--is-squareBordered .Button { border-radius: 0; } .App-Container.is-veryRoundBordered .Button, .ModalContent--is-veryRoundBordered .Button { border-radius: var(--very-rounded-button); } .App-Container .LinkPaymentForm--linkBranded .Button, .App-Container .LinkPaymentSuccess .Button, .ModalContent.Modal--linkBranded .Button { border-radius: var(--link-button-rounded); } .Button--xs { font-size: var(--checkout-font-size-10); } .Button--sm { font-size: var(--checkout-font-size-12); } .Button--md { font-size: var(--checkout-font-size-14); padding: var(--space-2) var(--space-4); } .Button--lg { font-size: var(--checkout-font-size-16); padding: var(--space-3) var(--space-5); } .Button--xlg { font-size: var(--checkout-font-size-20); padding: var(--space-3) var(--space-7); } .Button--primary { background-color: var(--checkout-blue); border-color: var(--checkout-blue); color: var(--checkout-white); } .Button--primary:focus { box-shadow: var(--focus-border-box-shadow); outline: none; } .Button--primary:not(:disabled):hover { background-color: var(--checkout-blue-dark); } .Button--primary:active { -webkit-transform: scale(.98); -ms-transform: scale(.98); transform: scale(.98); } .Button--primary:disabled { background-color: var(--checkout-blue-light); } .Button--primary:disabled:hover { cursor: default; -webkit-transform: none; -ms-transform: none; transform: none; } .Button--secondary { background-color: var(--checkout-white); box-shadow: var(--border-box-shadow); color: var(--checkout-gray600); } .Button--secondary:focus { box-shadow: var(--focus-border-box-shadow); outline: none; } .Button--secondary:not(:disabled):hover { background-color: var(--checkout-gray25); } .Button--secondary:active { background-color: rgba(0,0,0,.075); -webkit-transform: scale(.98); -ms-transform: scale(.98); transform: scale(.98); } .Button--secondary:disabled { background-color: rgba(0,0,0,.01); } .Button--secondary:disabled:hover { cursor: default; -webkit-transform: none; -ms-transform: none; transform: none; } .Button--link { -webkit-tap-highlight-color: transparent; background-color: transparent; border: none; border-radius: 0; color: var(--checkout-blue); outline: none; padding: 0; text-decoration-skip-ink: none; } .Button-textCheckoutSecondary { color: var(--checkout-gray600); font-size: var(--checkout-font-size-12); font-weight: var(--checkout-text-font-weight); line-height: 1.3; text-decoration: underline dotted var(--checkout-gray600); -webkit-text-decoration: underline dotted var(--checkout-gray600); } .Button--link:disabled:hover { cursor: default; } .Button--link:focus-visible { box-shadow: var(--focus-border-box-shadow); outline: none; } .Button--checkoutSecondaryLink { color: var(--checkout-gray600); text-decoration: underline dotted var(--checkout-gray600); -webkit-text-decoration: underline dotted var(--checkout-gray600); } .Button--link.Button--checkoutSecondaryLink:focus-visible { box-shadow: none; outline: 1px dotted var(--checkout-gray400); } .Button--menuitem { background-color: transparent; border: none; border-radius: 0; color: var(--checkout-gray400); display: block; outline: none; padding-left: var(--space-3); padding-right: var(--space-3); width: 100%; } .Button--menuitem .Icon { fill: var(--checkout-gray400); } .Button--menuitem:hover { background-color: var(--checkout-gray25); color: var(--checkout-gray900); } .Button--menuitem:hover .Icon { fill: var(--checkout-gray900); } .Button-Icon { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: var(--space-2); } .Button-Icon--right { -ms-flex-order: 1; margin-left: var(--space-2); margin-right: 0; -webkit-order: 1; order: 1; } .Button-Icon--end { display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .Button-Spinner { opacity: .5; } .Button--fullWidth { width: 100%; } .Footer { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .Footer-PoweredBy-Icon { fill: var(--checkout-gray300); vertical-align: middle; } .Footer-PoweredBy-Text { display: inline-block; } .Footer-PoweredBy { text-align: center; width: 100%; } .Footer-Links, .Footer-PoweredBy { padding: var(--space-1); } .Footer-Links .Link { margin-right: 12px; text-decoration: underline dotted var(--checkout-gray400); } .Footer-Links .Link:last-of-type { margin-right: 0; } .App-Container .Footer-Links .Link, .Footer .CheckoutFooter-links .Link--checkout--secondary, .Footer.is-darkBackground .CheckoutFooter-links .Link--checkout--secondary { text-decoration: none; -webkit-text-decoration: none; } @media only screen and (min-width:992px) { .Footer { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .Footer-Links { padding: 0 0 0 var(--space-4); } .Footer-PoweredBy { border-right: var(--border); padding: 0; padding-right: var(--space-4); text-align: left; width: auto; } .Footer.is-darkBackground .Footer-PoweredBy { border-right: 1px solid var(--checkout-lightGray50); } .Footer.is-darkBackground .Text-color--gray400 { color: var(--checkout-lightGray400); } .Footer.is-darkBackground .Footer-PoweredBy-Icon { fill: var(--checkout-lightGray300); } .Footer.is-darkBackground .CheckoutFooter-links .Button--checkoutSecondaryLink:hover, .Footer.is-darkBackground .CheckoutFooter-links .Link--checkout--secondary:hover, .Footer.is-darkBackground .Footer-Links .Link, .Footer.is-darkBackground .Link--checkout--secondary { text-decoration: underline dotted var(--checkout-lightGray400); -webkit-text-decoration: underline dotted var(--checkout-lightGray400); } .App-Container .Footer-Links .Link:hover, .Footer .CheckoutFooter-links .Link--checkout--secondary:hover { text-decoration: underline dotted var(--checkout-gray400); -webkit-text-decoration: underline dotted var(--checkout-gray400); } .Footer.is-darkBackground .CheckoutFooter-links .Link--checkout--secondary:before { border-color: var(--checkout-lightGray400); } .App-Container--setupMode .Footer { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding-bottom: var(--space-6); text-align: center; width: 100%; } } .Body--modal-open { overflow: hidden; } .ModalOverlay { -ms-flex-align: center; -ms-flex-pack: center; -webkit-tap-highlight-color: transparent; -webkit-align-items: center; align-items: center; bottom: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; left: 0; opacity: 0; position: fixed; right: 0; top: 0; transition: all .25s var(--modal-transition-curve); z-index: var(--checkout-z-index-modal-overlay); } .ModalOverlay:before { background: rgba(0,0,0,.2); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .ModalOverlay--afterOpen { opacity: 1; } .ModalOverlay--beforeClose { opacity: 0; } .ModalContent { background-color: var(--checkout-modal-bg); border-radius: 8px; box-shadow: 0 40px 100px rgba(0,0,0,.2),0 6px 12px var(--checkout-light-gray-background); outline: none; overflow: auto; -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); transition: -webkit-transform .25s var(--modal-transition-curve); transition: transform .25s var(--modal-transition-curve); transition: transform .25s var(--modal-transition-curve),-webkit-transform .25s var(--modal-transition-curve); z-index: var(--checkout-z-index-modal-content); } .ModalContent--is-squareBordered, .ModalContent--is-squareBordered .CustomPolicyMessage { border-radius: 0; } .ModalContent--is-veryRoundBordered, .ModalContent--is-veryRoundBordered .CustomPolicyMessage { border-radius: var(--very-rounded); } .ModalContent--afterOpen { -webkit-transform: none; -ms-transform: none; transform: none; } .ModalContent--beforeClose { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } .ModalContent .Button { line-height: 1.2; } .ModalContent.Modal--linkBranded { border-radius: var(--link-modal-rounded); font-family: var(--link-text-font-family); margin: var(--link-container-spacing); max-width: var(--link-modal-width); } .CustomPolicyMessage { background-color: var(--checkout-light-gray-background); border-radius: 8px; overflow: hidden; padding: var(--space-3); } .CustomPolicyMessage-icon { color: rgba(0,0,0,.5); height: var(--space-4); min-width: var(--checkout-icon-lg); padding-right: 10px; padding-top: var(--space-1); } .Policy-icon { fill: var(--checkout-gray800); color: var(--checkout-gray800); margin-top: var(--space-0); min-width: var(--checkout-icon-md); } .Policy-text { padding-left: var(--space-3); width: 100%; } .Policy-content { margin-top: var(--space-1); } html { --animatePresenceEnterDurationHeight: 0.35s; --animatePresenceEnterDelayHeight: 0.02s; --animatePresenceEnterDurationOpacity: 0.3s; --animatePresenceEnterDelayOpacity: 0.2s; --animatePresenceExitDurationHeight: 0.35s; --animatePresenceExitDelayHeight: 0.1s; --animatePresenceExitDurationOpacity: 0.3s; --animatePresenceExitDelayOpacity: 0s; } .AnimatePresence { position: relative; } .AnimatePresence.is-entering { height: 0; } .AnimatePresence.is-entering, .AnimatePresence.is-exitingActive { opacity: 0; } .AnimatePresence.is-enteringActive { opacity: 1; } .AnimatePresence.is-entering.is-interrupted, .AnimatePresence.is-enteringActive { transition: height var(--animatePresenceEnterDurationHeight) ease var(--animatePresenceEnterDelayHeight),opacity var(--animatePresenceEnterDurationOpacity) ease var(--animatePresenceEnterDelayOpacity); } .AnimatePresence.is-exiting.is-interrupted, .AnimatePresence.is-exitingActive { transition: height var(--animatePresenceExitDurationHeight) ease var(--animatePresenceExitDelayHeight),opacity var(--animatePresenceExitDurationOpacity) ease var(--animatePresenceExitDelayOpacity); } html { --animateSinglePresenceDurationHeight: 0.4s; --animateSinglePresenceDelayHeight: 0s; --animateSinglePresenceEnterDurationOpacity: 0.4s; --animateSinglePresenceExitDurationOpacity: 0.4s; --animateSinglePresenceEnterDelayOpacity: 0.08s; --animateSinglePresenceExitDelayOpacity: 0s; --animateSinglePresenceTimingFunction: ease; } .AnimateSinglePresence { position: relative; transition: height var(--animateSinglePresenceDurationHeight) var(--animateSinglePresenceTimingFunction) var(--animateSinglePresenceDelayHeight); } .AnimateSinglePresenceItem.is-entering { opacity: 0; } .AnimateSinglePresenceItem.is-exiting { opacity: 1; pointer-events: none; } .AnimateSinglePresenceItem.is-entering, .AnimateSinglePresenceItem.is-exiting { left: 0; position: absolute; top: 0; width: 100%; } .AnimateSinglePresenceItem.is-entering.is-interrupted, .AnimateSinglePresenceItem.is-enteringActive { opacity: 1; transition: opacity var(--animateSinglePresenceEnterDurationOpacity) var(--animateSinglePresenceTimingFunction) var(--animateSinglePresenceEnterDelayOpacity); } .AnimateSinglePresenceItem.is-exiting.is-interrupted, .AnimateSinglePresenceItem.is-exitingActive { opacity: 0; transition: opacity var(--animateSinglePresenceExitDurationOpacity) var(--animateSinglePresenceTimingFunction) var(--animateSinglePresenceExitDelayOpacity); } .AnimateSinglePresenceChild { --distanceY: 4px; --timingFunction: var(--animateSinglePresenceTimingFunction); --enterDuration: var(--animateSinglePresenceEnterDurationOpacity); --enterDelay: var(--animateSinglePresenceEnterDelayOpacity); --exitDuration: var(--animateSinglePresenceExitDurationOpacity); --exitDelay: var(--animateSinglePresenceExitDelayOpacity); } .is-entering>.AnimateSinglePresenceChild { -webkit-transform: translateY(var(--distanceY)); -ms-transform: translateY(var(--distanceY)); transform: translateY(var(--distanceY)); will-change: transform; } .is-entering.is-interrupted>.AnimateSinglePresenceChild, .is-enteringActive>.AnimateSinglePresenceChild { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition: -webkit-transform var(--enterDuration) var(--timingFunction) var(--enterDelay); transition: transform var(--enterDuration) var(--timingFunction) var(--enterDelay); transition: transform var(--enterDuration) var(--timingFunction) var(--enterDelay),-webkit-transform var(--enterDuration) var(--timingFunction) var(--enterDelay); } .is-exiting>.AnimateSinglePresenceChild { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); will-change: transform; } .is-exiting.is-interrupted>.AnimateSinglePresenceChild, .is-exitingActive>.AnimateSinglePresenceChild { -webkit-transform: translateY(var(--distanceY)); -ms-transform: translateY(var(--distanceY)); transform: translateY(var(--distanceY)); transition: -webkit-transform var(--exitDuration) var(--timingFunction) var(--exitDelay); transition: transform var(--exitDuration) var(--timingFunction) var(--exitDelay); transition: transform var(--exitDuration) var(--timingFunction) var(--exitDelay),-webkit-transform var(--exitDuration) var(--timingFunction) var(--exitDelay); } html { --fadeEnterDuration: 0.4s; --fadeEnterDelay: 0s; --fadeExitDuration: 0.2s; --fadeExitDelay: 0s; --fadeTimingFunction: ease; } .FadeWrapper { position: relative; } .Fade.is-entering>.Fade-item { opacity: 0; } .Fade.is-exiting>.Fade-item { opacity: 1; pointer-events: none; } .Fade.is-entering.is-interrupted>.Fade-item, .Fade.is-enteringActive>.Fade-item { opacity: 1; transition: opacity var(--fadeEnterDuration) var(--fadeTimingFunction) var(--fadeEnterDelay); } .Fade.is-exiting.is-interrupted>.Fade-item, .Fade.is-exitingActive>.Fade-item { opacity: 0; transition: opacity var(--fadeExitDuration) var(--fadeTimingFunction) var(--fadeExitDelay); } .Fade.is-exiting { left: 0; position: absolute; top: 0; width: 100%; } .Slide { position: relative; } .Slide.is-entering .Slide-item { opacity: 0; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } .Slide.is-entering.is-interrupted .Slide-item, .Slide.is-enteringActive .Slide-item { transition: opacity .8s cubic-bezier(.19,1,.22,1) .32s,-webkit-transform .8s cubic-bezier(.19,1,.22,1) .32s; transition: transform .8s cubic-bezier(.19,1,.22,1) .32s,opacity .8s cubic-bezier(.19,1,.22,1) .32s; transition: transform .8s cubic-bezier(.19,1,.22,1) .32s,opacity .8s cubic-bezier(.19,1,.22,1) .32s,-webkit-transform .8s cubic-bezier(.19,1,.22,1) .32s; } .Slide.is-enteringActive .Slide-item { opacity: 1; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .Slide.is-enteringActive .Slide-item:first-child { transition-delay: .08s; } .Slide.is-enteringActive .Slide-item:nth-child(2) { transition-delay: .16s; } .Slide.is-enteringActive .Slide-item:nth-child(3) { transition-delay: .24s; } .Slide.is-exiting .Slide-item { opacity: 1; pointer-events: none; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .Slide.is-exiting.is-interrupted .Slide-item, .Slide.is-exitingActive .Slide-item { transition: opacity .8s cubic-bezier(.19,1,.22,1) .32s,-webkit-transform .8s cubic-bezier(.19,1,.22,1) .32s; transition: transform .8s cubic-bezier(.19,1,.22,1) .32s,opacity .8s cubic-bezier(.19,1,.22,1) .32s; transition: transform .8s cubic-bezier(.19,1,.22,1) .32s,opacity .8s cubic-bezier(.19,1,.22,1) .32s,-webkit-transform .8s cubic-bezier(.19,1,.22,1) .32s; } .Slide.is-exitingActive .Slide-item:first-child { transition-delay: .08s; } .Slide.is-exitingActive .Slide-item:nth-child(2) { transition-delay: .16s; } .Slide.is-exitingActive .Slide-item:nth-child(3) { transition-delay: .24s; } .Slide.is-exitingActive .Slide-item { opacity: 0; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } .Slide.is-exiting .Slide-inner { left: 0; position: absolute; top: 0; width: 100%; } .HeightObserverProvider { width: 100%; } .HeightObserverProvider-clone { left: 100%; pointer-events: none; position: fixed; top: 0; visibility: hidden; width: 100%; } :root { --transitionTimingFunctionEase: cubic-bezier(0.3,0.3,0.3,1); --transitionTimingFunctionCubic: cubic-bezier(0.19,1,0.22,1); --transitionHeightTimingFunction: var(--transitionTimingFunctionEase); --transitionHeightDuration: 0.4s; } .ScalePresence { --scalePresenceEnterDuration: 0.3s; --scalePresenceEnterDelay: 0s; --scalePresenceExitDuration: 0.3s; --scalePresenceExitDelay: 0s; --scalePresenceTimingFunction: ease; --scalePresenceScaleOut: 0.8; } .ScalePresence.is-entering { opacity: 0; -webkit-transform: scale(var(--scalePresenceScaleOut)); -ms-transform: scale(var(--scalePresenceScaleOut)); transform: scale(var(--scalePresenceScaleOut)); } .ScalePresence.is-exiting { opacity: 1; pointer-events: none; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .ScalePresence.is-entering.is-interrupted, .ScalePresence.is-enteringActive { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition-delay: var(--scalePresenceEnterDelay); transition-duration: var(--scalePresenceEnterDuration); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; transition-timing-function: var(--scalePresenceTimingFunction); } .ScalePresence.is-exiting.is-interrupted, .ScalePresence.is-exitingActive { opacity: 0; -webkit-transform: scale(var(--scalePresenceScaleOut)); -ms-transform: scale(var(--scalePresenceScaleOut)); transform: scale(var(--scalePresenceScaleOut)); transition-delay: var(--scalePresenceExitDelay); transition-duration: var(--scalePresenceExitDuration); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; transition-timing-function: var(--scalePresenceTimingFunction); } .AnimatePresence { --animatePresenceEnterDurationHeight: var(--transitionHeightDuration); --animatePresenceEnterDelayHeight: 0s; --animatePresenceExitDurationHeight: var(--transitionHeightDuration); } .AnimateSinglePresence { --animateSinglePresenceDurationHeight: var(--transitionHeightDuration); --animateSinglePresenceDelayHeight: 0s; --animateSinglePresenceEnterDurationOpacity: var(--transitionHeightDuration); --animateSinglePresenceExitDurationOpacity: var(--transitionHeightDuration); --animateSinglePresenceEnterDelayOpacity: 0s; --animateSinglePresenceExitDelayOpacity: 0s; --animateSinglePresenceTimingFunction: var(--transitionHeightTimingFunction); } .RotatingIconContainer { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 16px; margin-bottom: 3px; margin-top: -2px; pointer-events: none; } .RotatingIcon { position: absolute; transition: all .4s ease; transition-delay: .15s; } .RotatingIcon--visible { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .RotatingIcon--hidden { opacity: 0; -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } .RotatingIcon img { height: 16px; width: auto; } .Tabs-Container { position: relative; } .Tabs-TabPanelContainer>:nth-last-child(2):first-child { position: absolute; } .Tabs-TabList { display: -webkit-flex; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; position: relative; } .Tabs-PrintableTabPanelContainer { display: none; } @media print { .Tabs.is-printable .Tabs-TabPanelContainer { display: none; } .Tabs.is-printable .Tabs-PrintableTabPanelContainer { display: block; } role[tabpanel] { -webkit-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; } } .Tabs.is-icontabs .Tabs-TabList { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .Tabs.is-contenttabs .Tabs-TabList { box-shadow: inset 0 -1px #e3e8ee; } .Tabs.is-contenttabs .Tabs-TabList, .Tabs.is-insettabs .Tabs-TabList { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .Tabs.is-insettabs .Tabs-TabList { border: 1px solid var(--checkout-gray50); border-radius: 8px; padding: var(--space-0); } .Tabs-TabListOverflowContainer { -ms-flex-pack: justify; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between; list-style: none; margin: 0; padding: 0; position: relative; } .Tabs-TabListItemContainer--overflow-button svg { width: 16px; } .Tabs-TabListItemContainer--overflow-button .Tabs-TabListItem--overflow-toggle { display: block; } .Tabs-TabListItem--overflow-toggle .Tabs-TabListItemContent { height: 100%; } .Tabs-TabListItem--overflow-toggle .Icon { margin-top: var(--space-0); } .Tabs.is-insettabs .Tabs-TabListItem--overflow-toggle .Tabs-TabListItemContent { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 20px; -webkit-justify-content: center; justify-content: center; } .Tabs.is-insettabs .Tabs-TabListItem--overflow-toggle .Icon { margin-top: 0; } .Tabs.is-desktop .Tabs-TabListOverflowContainer { background-color: var(--checkout-white); border-radius: var(--rounded); box-shadow: var(--md-box-shadow); display: none; padding: var(--rounded) 0; } .App-Container.is-squareBordered .Tabs.is-desktop .Tabs-TabListOverflowContainer { border-radius: 0; } .App-Container.App-Container.is-veryRoundBordered .Tabs.is-desktop .Tabs-TabListOverflowContainer { border-radius: var(--very-rounded); padding-bottom: 0; padding-top: 0; } .App-Container .LinkPaymentForm--linkBranded .Tabs.is-desktop .Tabs-TabListOverflowContainer { border-radius: var(--link-input-rounded); } .Tabs.is-desktop.is-icontabs .Tabs-TabList>.Tabs-TabListItemContainer { -webkit-flex: 1 1 0%; -ms-flex: 1 1 0%; flex: 1 1 0%; max-width: 100%; min-width: 0; } .Tabs.is-desktop.is-icontabs .Tabs-TabList--wrap>.Tabs-TabListItemContainer { margin: 0 8px 8px 0; } .Tabs.is-desktop.is-contenttabs .Tabs-TabList>.Tabs-TabListItemContainer { -webkit-flex: 0; -ms-flex: 0; flex: 0; } .Tabs.is-desktop .Tabs-TabList>.Tabs-TabListItemContainer.Tabs-TabListItemContainer--overflow-button { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListItemContainer { margin: 0; padding: 0; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListItem:after { display: none; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListItem:not(:focus) { box-shadow: none; position: static; } .Tabs.is-desktop .Tabs-TabListItem:hover .Tabs-TabListItemContent { opacity: 1; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListItem:hover { background-color: var(--checkout-gray50); } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListItem:hover .Tabs-TabListItemContent { opacity: 1; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListPaymentMethod { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListPaymentIcon { min-width: 28px; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListPaymentIcon img, .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListPaymentIcon svg { display: block; margin: 0 auto; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListItem { border: 0; border-radius: 0; padding: var(--space-2) var(--space-3); } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListPaymentMethod { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListPaymentLabel { margin-left: var(--space-3); } .Tabs.is-desktop .Tabs-TabListOverflowContainer { display: block; opacity: 0; pointer-events: none; position: absolute; right: calc(var(--rounded)*-1); top: calc(var(--rounded)*-1); -webkit-transform: translateY(var(--space-1)); -ms-transform: translateY(var(--space-1)); transform: translateY(var(--space-1)); transition: opacity .2s ease,-webkit-transform .2s ease; transition: opacity .2s ease,transform .2s ease; transition: opacity .2s ease,transform .2s ease,-webkit-transform .2s ease; z-index: 9999; } .Tabs.is-desktop .Tabs-TabListOverflowContainer--is-visible { opacity: 1; pointer-events: auto; -webkit-transform: none; -ms-transform: none; transform: none; transition: opacity .25s cubic-bezier(0,1,.4,1),-webkit-transform .25s cubic-bezier(.18,1.25,.4,1); transition: opacity .25s cubic-bezier(0,1,.4,1),transform .25s cubic-bezier(.18,1.25,.4,1); transition: opacity .25s cubic-bezier(0,1,.4,1),transform .25s cubic-bezier(.18,1.25,.4,1),-webkit-transform .25s cubic-bezier(.18,1.25,.4,1); } .Tabs.is-desktop .Tabs-TabListItemContainer--overflow-button .Tabs-TabListItem:focus { box-shadow: var(--border-box-shadowless); } .Tabs.is-desktop .Tabs-TabList--wrap { -ms-flex-pack: start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: start; justify-content: start; } .Tabs.is-desktop .Tabs-TabList--wrap .Tabs-TabListItemContainer { margin-left: 0; } .Tabs.is-desktop .Tabs-TabList.Tabs-TabList--wrap>.Tabs-TabListItemContainer { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; } .Tabs.is-mobile .Tabs-TabList { left: 50%; margin-bottom: calc(var(--space-4)*-1); margin-left: -50vw; margin-right: -50vw; margin-top: calc(var(--space-4)*-1); overflow-x: scroll; overflow-x: -moz-scrollbars-none; padding-bottom: var(--space-4); padding-top: var(--space-4); position: relative; right: 50%; scrollbar-width: none; width: 100vw; } .Tabs.is-mobile.is-overflowing .Tabs-TabListItemContainer { -ms-flex-preferred-size: 27vw; -ms-flex-positive: 0; -ms-flex-negative: 0; -webkit-flex-basis: 27vw; flex-basis: 27vw; -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } @media only screen and (max-width:320px) { .Tabs.is-mobile.is-overflowing .Tabs-TabListItemContainer { -ms-flex-preferred-size: 26vw; -webkit-flex-basis: 26vw; flex-basis: 26vw; } } .Tabs.is-mobile .Tabs-TabList>.Tabs-TabListItemContainer:first-of-type { margin-left: var(--checkout-app-gutter-width); } .Tabs.is-mobile .Tabs-TabList>.Tabs-TabListItemContainer:last-of-type { padding-right: var(--checkout-app-gutter-width); } .Tabs.is-mobile .Tabs-TabListItemContainer--overflow-button { display: none; } @media only screen and (min-width:412px) { .Tabs.is-mobile .Tabs-TabList>.Tabs-TabListItemContainer:first-of-type { margin-left: calc((100vw - var(--checkout-app-tablet-constraint))/2); } .Tabs.is-mobile .Tabs-TabList>.Tabs-TabListItemContainer:last-of-type { padding-right: calc((100vw - var(--checkout-app-tablet-constraint))/2); } .LinkPaymentForm--linkBranded .Tabs.is-mobile .Tabs-TabList>.Tabs-TabListItemContainer:first-of-type { margin-left: calc((100vw - var(--checkout-app-tablet-constraint))/2 + var(--link-container-spacing)); } .LinkPaymentForm--linkBranded .Tabs.is-mobile .Tabs-TabList>.Tabs-TabListItemContainer:last-of-type { padding-right: calc((100vw - var(--checkout-app-tablet-constraint))/2 + var(--link-container-spacing)); } } .Tabs.is-mobile .Tabs-TabList::-webkit-scrollbar { display: none; } .Tabs.is-mobile.is-insettabs .Tabs-Container { -ms-flex-pack: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; } .Tabs.is-mobile.is-insettabs .Tabs-TabList { margin-bottom: 0; margin-top: 0; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; padding-bottom: var(--space-0); padding-top: var(--space-0); } .Tabs.is-mobile.is-insettabs .Tabs-TabList>.Tabs-TabListItemContainer:first-of-type { margin-left: 0; } .Tabs.is-mobile.is-insettabs .Tabs-TabList>.Tabs-TabListItemContainer:last-of-type { padding-right: 0; } @media only screen and (max-width:575.98px) { .Tabs.is-insettabs .Tabs-TabListItem { padding: 6px var(--space-3); } } .Tabs.is-icontabs .Tabs-TabListItemContainer, .Tabs.is-icontabs .Tabs-TabListOverflowContainer { -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; margin-left: var(--space-2); } .Tabs.is-contenttabs .Tabs-TabListItemContainer, .Tabs.is-contenttabs .Tabs-TabListOverflowContainer { margin-left: var(--space-2); } .Tabs .Tabs-TabListItemContainer:first-of-type { margin-left: 0; } .Tabs-TabListItem { -ms-flex-align: center; -webkit-align-items: center; align-items: center; /* !important to override normalize.css */ /* !important reason: legacy */ -webkit-appearance: none!important; -moz-appearance: none!important; appearance: none!important; border: 0; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; font-weight: 500; height: 100%; position: relative; text-align: left; transition: var(--checkout-tab-transition); width: 100%; } .Tabs.is-icontabs .Tabs-TabListItem { background-color: var(--checkout-white); border-radius: var(--rounded); box-shadow: var(--border-box-shadowless); color: var(--checkout-text-font-color); font-size: var(--checkout-font-size-12); padding: 10px var(--space-3) var(--space-2) var(--space-3); } .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem { box-shadow: var(--link-default-border-box-shadow); } .App-Container.is-squareBordered .Tabs.is-icontabs .Tabs-TabListItem { border-radius: 0; } .App-Container.is-veryRoundBordered .Tabs.is-icontabs .Tabs-TabListItem { border-radius: var(--very-rounded); } .App-Container .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem { border-radius: var(--link-input-rounded); } .Tabs.is-icontabs .Tabs-TabListItem:focus-visible { box-shadow: var(--sm-focus-box-shadow); } .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem:focus-visible { box-shadow: var(--link-default-focus-border-box-shadow); } .Tabs.is-contenttabs .Tabs-TabListItem { background-color: transparent; font-size: var(--checkout-font-size-14); height: auto; line-height: 20px; padding: var(--space-1) 0; } .Tabs.is-insettabs .Tabs-TabListItem:focus-visible { box-shadow: var(--sm-focus-box-shadow); } .LinkPaymentForm--linkBranded .Tabs.is-insettabs .Tabs-TabListItem:focus-visible { box-shadow: var(--link-default-focus-border-box-shadow); } .Tabs.is-insettabs .Tabs-TabListItem { background-color: transparent; border-radius: var(--rounded); font-size: var(--checkout-font-size-14); font-weight: var(--checkout-text-font-weight); height: auto; line-height: 20px; padding: var(--space-2) var(--space-6); } .Tabs-TabListItem::-moz-focus-inner { /* !important reason: legacy */ outline: 0!important; } .Tabs-TabListItem:focus { /* !important reason: legacy */ outline: 0!important; } .Tabs-TabListItem:focus-visible { box-shadow: var(--sm-focus-box-shadow); } .LinkPaymentForm--linkBranded .Tabs-TabListItem:focus-visible { box-shadow: var(--link-default-focus-border-box-shadow); } .Tabs-TabListItem:after { bottom: 0; content: ""; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity .2s ease; will-change: transform; } .Tabs.is-icontabs .Tabs-TabListItem:after { border-radius: var(--rounded); box-shadow: var(--box-shadow); } .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem:after { box-shadow: var(--link-default-border-box-shadow); } .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem:hover { background-color: var(--link-color-neutral-25); } .App-Container.is-veryRoundBordered .Tabs.is-icontabs .Tabs-TabListItem:after { border-radius: var(--very-rounded); } .App-Container .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem:after, .App-Container.is-squareBordered .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem:after, .App-Container.is-veryRoundBordered .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem:after { border-radius: var(--link-input-rounded); } .App-Container.is-squareBordered .Tabs.is-icontabs .Tabs-TabListItem:after { border-radius: 0; } .Tabs.is-contenttabs .Tabs-TabListItem:after { background: #5469d4; height: 2px; left: -1px; position: absolute; top: calc(100% - 2px); } .Tabs.is-insettabs .Tabs-TabListItem:after { background: var(--checkout-gray50); bottom: var(--space-2); height: calc(100% - var(--space-2)*2); opacity: 1; top: var(--space-2); width: 1px; } .Tabs.is-insettabs .Tabs-TabListItem--is-selected:after, .Tabs.is-insettabs .Tabs-TabListItemContainer--is-selected+.Tabs-TabListItemContainer .Tabs-TabListItem:after, .Tabs.is-insettabs .Tabs-TabListItemContainer:first-child .Tabs-TabListItem:after { opacity: 0; } .Tabs.is-icontabs .Tabs-TabListItem--is-selected:after { box-shadow: var(--box-shadow); } .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem--is-selected:after { box-shadow: var(--link-selected-border-box-shadow); } .Tabs.is-icontabs .Tabs-TabListItem--is-selected:after, .Tabs.is-icontabs .Tabs-TabListItem:hover:after { opacity: 1; } .Tabs.is-icontabs .Tabs-TabListItem--is-selected { box-shadow: var(--selected-border-box-shadow); } .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem--is-selected { box-shadow: var(--link-selected-border-box-shadow); } .Tabs.is-icontabs .Tabs-TabListItem--is-selected:focus { box-shadow: var(--selected-focus-border-box-shadow); } .LinkPaymentForm--linkBranded .Tabs.is-icontabs .Tabs-TabListItem--is-selected:focus { box-shadow: var(--link-selected-border-box-shadow),var(--link-default-focus-border-box-shadow); } .Tabs.is-contenttabs .Tabs-TabListItem { opacity: .8; } .Tabs.is-contenttabs .Tabs-TabListItem--is-selected:after { opacity: 1; } .Tabs.is-contenttabs .Tabs-TabListItem--is-selected { color: var(--sail-blue500); opacity: 1; } .Tabs.is-insettabs .Tabs-TabListItem:hover { -webkit-filter: brightness(.97); filter: brightness(.97); } .Tabs.is-insettabs .Tabs-TabListItem--is-selected { background-color: var(--sail-blue500); box-shadow: var(--box-shadow); color: var(--checkout-white); font-weight: var(--checkout-text-font-weight-500); } .LinkPaymentForm--linkBranded .Tabs.is-insettabs .Tabs-TabListItem--is-selected { box-shadow: var(--link-selected-border-box-shadow); } .Tabs.is-insettabs .Tabs-TabListPaymentLabel:after { content: attr(data-text); content: attr(data-text)/""; font-weight: var(--checkout-text-font-weight-500); height: 0; overflow: hidden; pointer-events: none; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; visibility: hidden; } @media speech { .Tabs.is-insettabs .Tabs-TabListPaymentLabel:after { display: none; } } .Tabs.is-disabled .Tabs-TabListItem { cursor: auto; } .Tabs-TabListItem .Tabs-TabListItemContent { min-width: 0; opacity: .7; overflow: hidden; transition: opacity .2s ease; width: 100%; will-change: opacity; } .Tabs-TabListItem--is-selected .Tabs-TabListItemContent { opacity: 1; } .Tabs-TabListItem .Tabs-TabListItemContent svg { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .Tabs-TabListPaymentMethod { -ms-flex-pack: justify; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } .Tabs-TabListPaymentIcon { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; position: relative; } .Tabs-TabListBadge { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .Tabs-TabListPaymentLabel { -webkit-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .Tabs-TabListDropdown { position: absolute; right: 0; top: 100%; z-index: 1; } .Tabs-TabListDropdown.Tabs-TabListDropdown--is-closed { height: 1px; margin: 0; overflow: hidden; padding: 0; pointer-events: none; position: fixed; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; visibility: hidden; width: 1px; } .Tabs-TabPanelContainer { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 0; position: relative; } .Tabs-TabPanelContent { width: 100%; } .App-Container.is-squareBordered .Tabs-TabListItem { border-radius: 0; } .App-Container.is-veryRoundBordered .Tabs-TabListItem { border-radius: var(--very-rounded); } .App-Container .LinkPaymentForm--linkBranded .Tabs-TabListItem { border-radius: var(--link-input-rounded); } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListPaymentIcon { -ms-flex-order: 1; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-order: 1; order: 1; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListPaymentLabel { -ms-flex-order: 2; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; margin-left: var(--space-1); -webkit-order: 2; order: 2; } .Tabs.is-desktop .Tabs-TabListOverflowContainer .Tabs-TabListPaymentBadge { -ms-flex-order: 3; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; margin-left: var(--space-2); -webkit-order: 3; order: 3; } .AnimatedTabPanel { position: relative; width: 100%; } .AnimatedTabPanel-group { width: 100%; } .AnimatedTabPanel-group.is-entering { opacity: 0; } .AnimatedTabPanel-group--left.is-entering, .AnimatedTabPanel-group--left.is-entering.is-interrupted { -webkit-transform: translateX(8px); -ms-transform: translateX(8px); transform: translateX(8px); } .AnimatedTabPanel-group--right.is-entering, .AnimatedTabPanel-group--right.is-entering.is-interrupted { -webkit-transform: translateX(-8px); -ms-transform: translateX(-8px); transform: translateX(-8px); } .AnimatedTabPanel-group.is-entering.is-interrupted { transition: all .3s ease .3s; } .AnimatedTabPanel-group--left.is-enteringActive, .AnimatedTabPanel-group--right.is-enteringActive, .AnimatedTabPanel-group.is-enteringActive { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); transition: all .3s ease .3s; } .AnimatedTabPanel-group.is-exiting { left: 0; opacity: 1; position: absolute; top: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .AnimatedTabPanel-group--left.is-exiting, .AnimatedTabPanel-group--left.is-exiting.is-interrupted, .AnimatedTabPanel-group--left.is-exitingActive { -webkit-transform: translateX(-8px); -ms-transform: translateX(-8px); transform: translateX(-8px); } .AnimatedTabPanel-group--right.is-exiting, .AnimatedTabPanel-group--right.is-exiting.is-interrupted, .AnimatedTabPanel-group--right.is-exitingActive { -webkit-transform: translateX(8px); -ms-transform: translateX(8px); transform: translateX(8px); } .AnimatedTabPanel-group.is-exiting.is-interrupted, .AnimatedTabPanel-group.is-exitingActive { transition: opacity .3s ease,-webkit-transform .3s ease; transition: opacity .3s ease,transform .3s ease; transition: opacity .3s ease,transform .3s ease,-webkit-transform .3s ease; } .AnimatedTabPanel-group.is-exitingActive { opacity: 0; } .PoliciesModal-modal { max-width: 500px; min-width: 316px; overflow-x: hidden; } .PoliciesModal-list { line-height: 24px; margin-bottom: 0; margin-top: var(--space-1); padding-left: 18px; } .PoliciesModal-listItem { color: var(--checkout-gray400); } .PoliciesModal-listItem::marker { font-size: 12px; } .PoliciesModal-header { border-bottom: 1px solid hsla(0,0%,10%,.1); } .PoliciesModal-content, .PoliciesModal-header { padding: var(--space-5); } .PoliciesModal-content { height: 300px; overflow: auto; overflow-x: hidden; } .PoliciesModal-header .Button-Icon { margin: 0; } .PoliciesModal-paymentTerms, .PoliciesModal-scta { margin-top: var(--space-4); } .PoliciesModal-footer { border-top: 1px solid hsla(0,0%,10%,.1); padding: var(--space-5); text-align: center; } .PoliciesModal-customPolicyMessage { padding-bottom: var(--space-4); } @media only screen and (max-width:767.98px) { .PoliciesModal-modal { border-radius: 8px 8px 0 0; max-width: 100vw; overflow: hidden; } .PoliciesModal-content { max-height: 40vh; overflow-y: scroll; } .PoliciesModal-modalOverlay { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } } @media only screen and (max-width:320px) { .PoliciesModal-content { max-height: 30vh; } } .PoliciesModal-modal .Tabs-TabList { padding-left: 24px; } .PoliciesModal-modal .Tabs-TabListItemContainer { padding: 16px 0; } .PoliciesModal-modal .Tabs.is-contenttabs .Tabs-TabListItemContainer:not(:first-of-type) { margin-left: 16px; } .PoliciesModal-modal .Tabs.is-contenttabs .Tabs-TabListItem { color: var(--checkout-gray800); font-weight: var(--checkout-text-font-weight); } .PoliciesModal-modal .Tabs.is-contenttabs .Tabs-TabListItem--is-selected { color: var(--checkout-gray800); font-weight: var(--checkout-text-font-weight-500); } .PoliciesModal-modal .Tabs.is-contenttabs .Tabs-TabListItem--is-selected:after { opacity: 0; } .PoliciesModal-modal .Tabs.is-mobile .Tabs-TabList { left: auto; margin: auto; padding: 0; right: auto; } .PoliciesModal-modal .Tabs.is-mobile .Tabs-TabList>.Tabs-TabListItemContainer:first-of-type { margin-left: 24px; } .PoliciesModal-modal .Tabs-TabPanelContainer { margin-top: 0; } .CheckoutFooter-link { color: var(--checkout-gray400); display: inline; font-size: var(--checkout-font-size-12); margin-right: var(--space-4); } .CheckoutFooter-link:last-child { margin-right: 0; } .CheckoutFooter-links { /*margin-left: var(--space-4);*/ } .CheckoutFooter-link .Button-textCheckoutSecondary { color: var(--checkout-gray400); } .CheckoutFooter-link .Button-textCheckoutSecondary, .CheckoutFooter-link.Button--checkoutSecondaryLink { text-decoration: none; } .CheckoutFooter-link.Button--checkoutSecondaryLink:hover { text-decoration: underline dotted var(--checkout-gray400); -webkit-text-decoration: underline dotted var(--checkout-gray400); } @media only screen and (max-width:991.98px) { .CheckoutFooter-links { margin-bottom: 0; margin-left: 0; padding: var(--space-1); } .Footer .CheckoutFooter-links .CheckoutFooter-link.Link--checkout--secondary:hover { text-decoration: underline dotted var(--checkout-gray400); -webkit-text-decoration: underline dotted var(--checkout-gray400); } } .Tag { border-radius: var(--space-1); display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 2px var(--space-1); } .Tag-orange { background-color: var(--checkout-yellow); } .Tag-red { background-color: var(--sail-red100); } .Tag-green { background-color: var(--sail-green100); } .Tag-blue { background-color: var(--sail-blue100); } .Tag-purple { background-color: var(--sail-purple500); } :root { --checkout-error-message-width: 300px; } @media only screen and (max-width:767.98px) { .PaymentLinkDeactivated { zoom: .7; } } .FullPageMessage { -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; bottom: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; left: 0; position: absolute; right: 0; top: 0; } .FullPageMessage-WarningIcon { margin-bottom: 10px; } .FullPageMessage-Link { color: inherit; font-weight: var(--checkout-text-font-weight-500); text-decoration: underline; } .FullPageMessage-Message { -ms-flex-pack: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; max-width: var(--checkout-error-message-width); text-align: center; } .FullPageMessage-Icon { margin-bottom: var(--space-4); } .Placeholder { opacity: 1; } .Placeholder--animating { background-color: rgba(0,0,0,.075); border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,.025); color: transparent; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; overflow: hidden; position: relative; } .Placeholder--animating:after { -webkit-animation: transition 1.5s infinite; animation: transition 1.5s infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: radial-gradient(circle at 80% -20%,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 100%),radial-gradient(circle at 50% 150%,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%),radial-gradient(circle at 20% -20%,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 100%); content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); width: 800%; } @-webkit-keyframes transition { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(10%); transform: translateX(10%); } } @keyframes transition { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(10%); transform: translateX(10%); } } .Tooltip { display: -webkit-flex; display: -ms-flexbox; display: flex; pointer-events: none; position: absolute; } .Tooltip .Tooltip-Text { background-color: var(--checkout-white); border-radius: var(--rounded); box-shadow: 0 0 0 1px rgba(136,152,170,.1),0 15px 35px 0 rgba(129,129,136,.1),0 5px 15px 0 rgba(0,0,0,.08); line-height: 15px; max-width: 200px; min-width: 150px; padding: var(--tooltip-padding); position: relative; z-index: 1; } .Tooltip .Tooltip-Arrow { height: 21px; position: absolute; width: 17px; } .Tooltip .Tooltip-Text--above { left: -50%; top: -100%; } .Tooltip .Tooltip-Text--above .Tooltip-Arrow { margin-right: -8px; margin-top: -7px; right: 50%; top: 100%; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .Tooltip .Tooltip-Text--aboveAndLeftAligned { top: -100%; } .Tooltip .Tooltip-Text--aboveAndLeftAligned .Tooltip-Arrow { margin-right: -8px; margin-top: -7px; right: 90%; top: 100%; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .Tooltip .Tooltip-Text--below { left: -50%; top: 0; } .Tooltip .Tooltip-Text--below .Tooltip-Arrow { left: 50%; margin-left: -9px; margin-top: -14px; top: 0; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .Tooltip .Tooltip-Text--left { left: -100%; top: -50%; } .Tooltip .Tooltip-Text--left .Tooltip-Arrow { margin-right: -12px; margin-top: -10.5px; right: 0; top: 50%; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .Tooltip .Tooltip-Text--right { left: 0; top: -50%; } .Tooltip .Tooltip-Text--right .Tooltip-Arrow { left: 0; margin-left: -12px; margin-top: -10.5px; top: 50%; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .Tooltip-animate, .Tooltip-animate-exited { opacity: 0; -webkit-transform: scale(.85); -ms-transform: scale(.85); transform: scale(.85); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; transition: opacity .25s cubic-bezier(0,1,.4,1),-webkit-transform .25s cubic-bezier(.18,1.25,.4,1); transition: opacity .25s cubic-bezier(0,1,.4,1),transform .25s cubic-bezier(.18,1.25,.4,1); transition: opacity .25s cubic-bezier(0,1,.4,1),transform .25s cubic-bezier(.18,1.25,.4,1),-webkit-transform .25s cubic-bezier(.18,1.25,.4,1); } .Tooltip-animate-exiting { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); transition: opacity .2s ease-in,-webkit-transform .2s ease-in; transition: opacity .2s ease-in,transform .2s ease-in; transition: opacity .2s ease-in,transform .2s ease-in,-webkit-transform .2s ease-in; } .Tooltip-animate-entered, .Tooltip-animate-entering { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } @media only screen and (min-width:768px) { .Tooltip .Tooltip-Text { width: 200px; } } .OrderDetailsSubtotalItem { margin-bottom: var(--space-4); } .OrderDetailsSubtotalItem-tooltip { z-index: var(--checkout-z-index-tooltip); } .OrderDetailsSubtotalItem .Tooltip-Context { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin-left: var(--space-1); -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } :root { --checkout-business-icon-shadow: 0 2px 5px 0 rgba(50,50,93,0.1),0 1px 1px 0 rgba(0,0,0,0.07); --checkout-logo-size: 28px; --checkout-logo-size-setup: 35px; } .HeaderImage--logo .HeaderImage-img { margin-right: var(--space-2); max-height: var(--checkout-logo-size); max-width: 150px; } .App-Container--setupMode .HeaderImage--logo .HeaderImage-img { max-height: var(--checkout-logo-size-setup); } .HeaderImage--icon { border-radius: 100%; box-shadow: var(--checkout-business-icon-shadow); height: var(--checkout-business-icon-size); margin-right: var(--space-2); width: var(--checkout-business-icon-size); } .HeaderImage--icon, .HeaderImage--iconFallback { background: var(--checkout-white); } .HeaderImage-imageIcon { border-radius: 100%; height: 100%; object-fit: cover; width: 100%; } .HeaderImage-fallbackIcon { fill: var(--checkout-gray400); } @media only screen and (min-width:992px) { .App-Container:not(.App-Container--setupMode) .HeaderImage--logo img { max-height: var(--checkout-logo-size); max-width: 300px; } } .ConversionRateIndicator-tooltip { font-size: var(--checkout-font-size-12); } .ConversionRateIndicator-tooltipContainer { display: inline; white-space: nowrap; } .ConversionRateIndicator-tooltipContext { display: inline; } .ConversionRateIndicator-tooltipContext.is-darkBackground .Button-textCheckoutSecondary { background-color: transparent; color: var(--checkout-lightGray400); text-decoration: underline dotted var(--checkout-lightGray400); -webkit-text-decoration: underline dotted var(--checkout-lightGray400); } .ConversionRateIndicator-tooltipContext:not(.is-darkBackground) .Button-textCheckoutSecondary { color: var(--checkout-gray400); text-decoration: underline dotted var(--checkout-lightGray100); -webkit-text-decoration: underline dotted var(--checkout-gray400); } .DisplayedCurrencyToggle-toggle { cursor: pointer; pointer-events: auto; } .DisplayedCurrencyToggle-toggle:not(.is-darkBackground) { text-decoration: underline dotted var(--checkout-gray400); -webkit-text-decoration: underline dotted var(--checkout-gray400); } .DisplayedCurrencyToggle-toggle.is-darkBackground { background-color: transparent; text-decoration: underline dotted var(--checkout-lightGray400); -webkit-text-decoration: underline dotted var(--checkout-lightGray400); } .p-FlagIcon { height: 16px; width: 16px; } .CurrencyOptionButton { border-radius: 10px; font-size: 16px; font-weight: 500; width: 100%; } .CurrencyOptionButton:focus { box-shadow: none; outline: none; } .CurrencyOptionButton:not(.is-darkBackground) { background-color: var(--checkout-white); border: 1px solid var(--checkout-gray50); } .CurrencyOptionButton:not(.is-darkBackground).is-active { border: 1px solid var(--checkout-gray900); } .CurrencyOptionButton:not(.is-darkBackground).is-active:hover { background-color: var(--checkout-white); } .CurrencyOptionButton.is-darkBackground { background-color: var(--checkout-white50); } .CurrencyOptionButton.is-darkBackground.is-active { border: 1px solid var(--checkout-white); } .CurrencyOptionButton.is-darkBackground.is-active:hover { background-color: var(--checkout-white50); } .CurrencyOptionButton.is-darkBackground:hover { background-color: var(--checkout-white25); } .CurrencyOptionButton .p-FlagIcon { -ms-flex-item-align: center; -ms-grid-row-align: center; -webkit-align-self: center; align-self: center; height: 16px; width: 22px; } .CurrencyOptionButton-labelContainer { gap: var(--space-1); } .CurrencyOptionButton.ProductSummary-actionButton.is-darkBackground:not(.is-active) .CurrencyAmount { color: rgba(255,255,255,.7); } .CurrencyOptionButton.ProductSummary-actionButton:not(.is-darkBackground):not(.is-active) .CurrencyAmount { color: var(--checkout-gray600); } .SideToSideCurrencyToggle-outerContainer { gap: var(--space-4); } .SideToSideCurrencyToggle-innerContainer { gap: var(--space-1); } .SideToSideCurrencyToggle-toggles { gap: var(--space-2); } .AdjustQuantityFooter { height: 48px; margin: var(--space-4) 20px; overflow-x: hidden; position: relative; } .AdjustQuantityFooter-btnContainer { display: -webkit-flex; display: -ms-flexbox; display: flex; opacity: 1; overflow-x: hidden; padding: var(--space-1); position: absolute; width: 50%; } .AdjustQuantityFooter-btn { -ms-flex-positive: 1; -webkit-flex-grow: 1; flex-grow: 1; height: 38px; position: relative; } .AdjustQuantityFooter-btn .Button-Icon.Button-Spinner { margin-right: 0; } .AdjustQuantityFooter-btn svg { position: absolute; right: var(--space-3); } .AdjustQuantityFooter-btn .Button--secondary { height: 39px; } .AdjustQuantityFooter-btn--gray:not(:disabled):hover { background-color: var(--checkout-gray25); } .AdjustQuantityFooter-btn, .AdjustQuantityFooter-btn .Text { transition: all .2s ease; } .AdjustQuantityFooter-btn:disabled .Text { opacity: .6; } .AdjustQuantityModal-modal.has-notice .AdjustQuantityFooter { margin-top: var(--space-2); } .AdjustQuantityHeader-header { border-bottom: 1px solid hsla(0,0%,10%,.1); padding: var(--space-4) 20px; } .AdjustQuantityHeader-closeBtn { border-radius: 20px; padding: var(--space-2); } .AdjustQuantityHeader-imageContainer { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 32px; -webkit-justify-content: center; justify-content: center; position: relative; width: 32px; } .AdjustQuantityHeader-image { border-radius: 4px; max-height: 100%; max-width: 100%; } .App-Container.is-squareBordered .AdjustQuantityHeader-image, .ModalContent--is-squareBordered .AdjustQuantityHeader-image { border-radius: 0; } .App-Container.is-veryRoundBordered .AdjustQuantityHeader-image, .ModalContent--is-veryRoundBordered .AdjustQuantityHeader-image { border-radius: var(--very-rounded); } .AdjustQuantityHeader-closeBtn:focus { box-shadow: var(--focus-border-box-shadow); outline: none; } .AdjustQuantityHeader-closeBtn .Button-Icon { margin-right: 0; } .Notice { background-color: var(--notice-background-color-gray); border-radius: 8px; overflow: hidden; padding: var(--space-3); } .App-Container.is-squareBordered .Notice, .ModalContent--is-squareBordered .Notice { border-radius: 0; } .App-Container.is-veryRoundBordered .Notice, .ModalContent--is-veryRoundBordered .Notice { border-radius: var(--very-rounded); } .Notice--green { background-color: var(--notice-background-color-green); } .Notice--yellow { background-color: var(--notice-background-color-yellow); } .Notice--red { background-color: var(--notice-background-color-red); } .Notice-icon { color: rgba(0,0,0,.5); height: var(--space-4); min-width: var(--notice-icon-size); padding-right: 10px; } .Notice--green .Notice-icon { color: var(--notice-icon-color-green); } .Notice--yellow .Notice-icon { color: var(--notice-icon-color-yellow); } .Notice--red .Notice-icon { color: var(--notice-icon-color-red); } .InputContainer { display: block; margin: 0; padding: 0; position: relative; } .InputContainer:after { content: attr(data-max); height: 0; visibility: hidden; } .InputContainer-placeholder--ie { color: #bbbbc2; left: 0; opacity: 0; pointer-events: none; position: absolute; top: -100%; } .Input--empty+.InputContainer-placeholder--ie { opacity: 1; top: 0; } .InputContainer .InputElement { position: absolute; top: 0; } .InputContainer .InputElement::-webkit-input-placeholder { -webkit-text-fill-color: currentColor; } .InputContainer .InputElement::-moz-placeholder { -webkit-text-fill-color: currentColor; } .InputContainer .InputElement:-ms-input-placeholder { -webkit-text-fill-color: currentColor; } .InputContainer .InputElement::placeholder { -webkit-text-fill-color: currentColor; } .InputContainer .InputElement::-moz-placeholder { color: #000; } .InputContainer.Input--ignoreAutofillExtensions [data-lastpass-icon-root], .InputContainer.Input--ignoreAutofillExtensions [data-lastpass-root] { } .HiddenInput { height: 2px; opacity: 0; position: absolute; width: 2px; z-index: -1; } .CheckoutInputContainer { position: relative; } .CheckoutInputContainer-placeholderIcon { left: var(--space-3); pointer-events: none; position: absolute; top: calc(50% + 2px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: var(--checkout-z-index-field-icon); } .CheckoutInputContainer-placeholderIcon svg { fill: var(--checkout-gray400); } .CheckoutInput--hasPlaceholderIcon { text-indent: var(--space-5); } .CheckoutInputContainer--hasMailIcon { padding-top: var(--space-0); } .CheckoutInput--hasPhoneNumberCountryCodeSelect { top: calc(50% + 1px); } .CheckoutInput { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--checkout-input-background-color); border: 0; box-shadow: var(--border-box-shadow); color: var(--checkout-input-color); font-size: var(--checkout-input-font-size); height: var(--checkout-input-height); line-height: var(--checkout-input-line-height); padding: var(--checkout-input-padding-vertical) var(--checkout-input-padding-horizontal); position: relative; transition: var(--checkout-input-transition); width: 100%; } .LinkPaymentForm--linkBranded .CheckoutInput { box-shadow: var(--link-default-border-box-shadow); } .CheckoutInput:-ms-input-placeholder { color: var(--checkout-input-placeholder-color); } .CheckoutInput::placeholder { color: var(--checkout-input-placeholder-color); } .CheckoutInput::-webkit-input-placeholder { color: var(--checkout-input-placeholder-color); } .CheckoutInput::-moz-placeholder { color: var(--checkout-input-placeholder-color); } .is-fontFamily--Lato .CheckoutInput::-webkit-input-placeholder { letter-spacing: var(--checkout-letter-spacing-lg); } .is-fontFamily--Lato .CheckoutInput::-moz-placeholder { letter-spacing: var(--checkout-letter-spacing-lg); } .is-fontFamily--Lato .CheckoutInput:-ms-input-placeholder { letter-spacing: var(--checkout-letter-spacing-lg); } .is-fontFamily--Lato .CheckoutInput::placeholder { letter-spacing: var(--checkout-letter-spacing-lg); } .is-fontFamily--Lora .CheckoutInput::-webkit-input-placeholder { letter-spacing: var(--checkout-letter-spacing-lg); } .is-fontFamily--Lora .CheckoutInput::-moz-placeholder { letter-spacing: var(--checkout-letter-spacing-lg); } .is-fontFamily--Lora .CheckoutInput:-ms-input-placeholder { letter-spacing: var(--checkout-letter-spacing-lg); } .is-fontFamily--Lora .CheckoutInput::placeholder { letter-spacing: var(--checkout-letter-spacing-lg); } .is-fontFamily--Inconsolata .CheckoutInput::-webkit-input-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--Inconsolata .CheckoutInput::-moz-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--Inconsolata .CheckoutInput:-ms-input-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--Inconsolata .CheckoutInput::placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--PTSans .CheckoutInput::-webkit-input-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--PTSans .CheckoutInput::-moz-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--PTSans .CheckoutInput:-ms-input-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--PTSans .CheckoutInput::placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--TitilliumWeb .CheckoutInput::-webkit-input-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--TitilliumWeb .CheckoutInput::-moz-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--TitilliumWeb .CheckoutInput:-ms-input-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--TitilliumWeb .CheckoutInput::placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--UbuntuMono .CheckoutInput::-webkit-input-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--UbuntuMono .CheckoutInput::-moz-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--UbuntuMono .CheckoutInput:-ms-input-placeholder { font-size: var(--checkout-font-size-15); } .is-fontFamily--UbuntuMono .CheckoutInput::placeholder { font-size: var(--checkout-font-size-15); } .CheckoutInput+.InputContainer-placeholder--ie { color: var(--checkout-input-placeholder-color); font-size: var(--checkout-input-font-size); left: var(--space-3); top: calc(var(--space-2) + 1px); z-index: var(--checkout-z-index-input-ie-placeholder); } .CheckoutInput:focus { box-shadow: var(--focus-border-box-shadow); outline: none; z-index: var(--checkout-z-index-input-is-focused); } .LinkPaymentForm--linkBranded .CheckoutInput:focus { box-shadow: var(--link-highlight-border-box-shadow); } .CheckoutInput--fakeAutofill, .CheckoutInput:-webkit-autofill { -webkit-text-fill-color: var(--checkout-input-color); box-shadow: var(--autofill-border-box-shadow); transition: background-color 100000000s,box-shadow 0s linear; } .LinkPaymentForm--linkBranded .CheckoutInput--fakeAutofill, .LinkPaymentForm--linkBranded .CheckoutInput:-webkit-autofill { box-shadow: var(--link-autofill-border-box-shadow); } .CheckoutInput--fakeAutofill::-webkit-input-placeholder, .CheckoutInput:-webkit-autofill::-webkit-input-placeholder { -webkit-text-fill-color: var(--checkout-input-placeholder-color); } .CheckoutInput--fakeAutofill::placeholder, .CheckoutInput:-webkit-autofill::placeholder { -webkit-text-fill-color: var(--checkout-input-placeholder-color); } .CheckoutInput--hideNativeAutofill::-webkit-contacts-auto-fill-button { visibility: hidden; } .CheckoutInput--fakeAutofill:focus, .CheckoutInput:-webkit-autofill:focus { box-shadow: var(--autofill-focus-border-box-shadow); transition: var(--checkout-input-transition); } .LinkPaymentForm--linkBranded .CheckoutInput--fakeAutofill:focus, .LinkPaymentForm--linkBranded .CheckoutInput:-webkit-autofill:focus { box-shadow: var(--link-autofill-focus-border-box-shadow); } .CheckoutInput:disabled { box-shadow: var(--disabled-border-box-shadow); color: var(--checkout-input-disabled-color); transition: background-color 100000000s,box-shadow 0s linear; } .LinkPaymentForm--linkBranded .CheckoutInput:disabled { box-shadow: var(--link-disabled-border-box-shadow); } .CheckoutInput--fakeAutofill:disabled, .CheckoutInput:disabled:-webkit-autofill { -webkit-text-fill-color: var(--checkout-input-disabled-color); } .CheckoutInput--invalid { box-shadow: var(--error-border-box-shadow); color: var(--checkout-input-invalid-color); z-index: var(--checkout-z-index-input-is-invalid); } small.CheckoutInput--invalid { box-shadow: none; font-size: 11px; line-height: 1.2em; } .cardNumberWrp small.CheckoutInput--invalid { box-shadow: none; top: -21px; z-index: 10; right: 0; background: #fff; display: block; position: absolute; } .LinkPaymentForm--linkBranded .CheckoutInput--invalid { box-shadow: var(--link-danger-border-box-shadow); } .CheckoutInput--invalid.CheckoutInput--fakeAutofill, .CheckoutInput--invalid:-webkit-autofill { -webkit-text-fill-color: var(--checkout-input-invalid-color); box-shadow: var(--autofill-error-border-box-shadow); } .LinkPaymentForm--linkBranded .CheckoutInput--invalid.CheckoutInput--fakeAutofill, .LinkPaymentForm--linkBranded .CheckoutInput--invalid:-webkit-autofill { box-shadow: var(--link-autofill-error-border-box-shadow); } .CheckoutInput--tabularNumbers, .CheckoutInput--tabularNumbers+.InputContainer-placeholder--ie { font-variant-numeric: tabular-nums; letter-spacing: -.03rem; } .CheckoutInput::-ms-clear { display: none; } .InputContainer com-1password-op-button { /* !important reason: legacy */ display: none!important; } .App-Container.is-squareBordered .InputContainer .CheckoutInput, .ModalContent--is-squareBordered .InputContainer .CheckoutInput { border-radius: 0; } .App-Container.is-veryRoundBordered .InputContainer .CheckoutInput, .ModalContent--is-veryRoundBordered .InputContainer .CheckoutInput { border-radius: var(--very-rounded); } .App-Container .LinkPaymentForm--linkBranded .InputContainer .CheckoutInput, .LinkPaymentForm--linkBranded .InputContainer .CheckoutInput { border-radius: var(--link-input-rounded); } @media only screen and (min-width:992px) { .App-Container:not(.App-Container--setupMode) .CheckoutInput { font-size: var(--checkout-lg-input-font-size); height: var(--checkout-lg-input-height); -webkit-transform: rotateY(0); transform: rotateY(0); } .App-Container:not(.App-Container--setupMode) .CheckoutInput+.InputContainer-placeholder--ie { font-size: var(--checkout-lg-input-font-size); } } .AdjustQuantityModal-modal { width: 356px; } .AdjustQuantityModal-content { padding: var(--space-4) 20px; } .AdjustQuantityModal-modal.is-removing .AdjustQuantityModal-quantity { background-color: var(--checkout-red); } .AdjustQuantityModal-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow-y: hidden; padding: var(--space-5) 20px var(--space-4); } .AdjustQuantityModal-toggleQuantityBtn { background-color: var(--checkout-light-gray-background); border-radius: 20px; margin-left: var(--space-4); margin-right: var(--space-4); padding: var(--space-2); transition: opacity .1s ease-in,background-color .1s ease-in,-webkit-transform .08s ease-in; transition: opacity .1s ease-in,background-color .1s ease-in,transform .08s ease-in; transition: opacity .1s ease-in,background-color .1s ease-in,transform .08s ease-in,-webkit-transform .08s ease-in; } .AdjustQuantityModal-toggleQuantityBtn:active { -webkit-transform: scale(.98); -ms-transform: scale(.98); transform: scale(.98); } .AdjustQuantityModal-toggleQuantityBtn:focus { box-shadow: var(--focus-border-box-shadow); outline: none; } .AdjustQuantityModal-toggleQuantityBtn:not(.is-disabled):hover { background-color: var(--checkout-dark-gray-background); } .AdjustQuantityModal-toggleQuantityBtn.is-disabled { opacity: .5; -webkit-transform: none; -ms-transform: none; transform: none; } .AdjustQuantityModal-toggleQuantityBtn.is-cursorDisabled { cursor: not-allowed; } .AdjustQuantityModal-toggleQuantityBtn .Button-Icon { margin-right: 0; } .AdjustQuantityModal-input { border-radius: var(--rounded); text-align: center; width: 92px; } .AdjustQuantityModal-notice { margin-top: 20px; } @media only screen and (max-width:991.98px) { .AdjustQuantityModal-modal { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; border-bottom-left-radius: 0; border-bottom-right-radius: 0; -webkit-transform: translateY(60%); -ms-transform: translateY(60%); transform: translateY(60%); width: 100%; } .AdjustQuantityModal-modalOverlay:before { -webkit-filter: blur(0); filter: blur(0); } .AdjustQuantityModal-modalOverlay.ModalOverlay--afterOpen:before { opacity: 1; } .AdjustQuantityModal-modal.ModalContent--afterOpen { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .AdjustQuantityModal-modal.ModalContent--beforeClose { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .AdjustQuantityModal-modalOverlay.ModalOverlay--beforeClose:before { opacity: 0; transition-duration: .25s; } .AdjustQuantityModal-modalOverlay.ModalOverlay--beforeClose { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .AdjustableQuantitySelector-hitBox.is-mobile { margin: calc(var(--space-2)*-1); padding: var(--space-2); } .AdjustableQuantitySelector-hitBox { display: inline-block; } .AdjustableQuantitySelector { background-color: var(--checkout-gray25); border-radius: 4px; margin: 0 var(--space-1) 0 0; padding: var(--space-0) var(--space-1); transition: all .15s ease-in; } .AdjustableQuantitySelector .AdjustableQuantitySelector-icon { margin-left: var(--space-1); transition: all .15s ease-in; } .AdjustableQuantitySelector:hover { background-color: rgba(0,0,0,.05); } .AdjustableQuantitySelector:active { background-color: rgba(0,0,0,.1); } .AdjustableQuantitySelector:hover .AdjustableQuantitySelector-icon { fill: var(--checkout-gray900); } .App-Overview.is-darkBackground .AdjustableQuantitySelector-icon { fill: var(--checkout-lightGray400); } @media only screen and (max-width:991.98px) { .App-Overview.is-darkBackground .AdjustableQuantitySelector-icon { fill: var(--checkout-white); } } .App-Overview.is-darkBackground .AdjustableQuantitySelector:hover { background-color: rgba(255,255,255,.09); } .App-Overview.is-darkBackground .AdjustableQuantitySelector:active { background-color: rgba(255,255,255,.14); } .App-Overview.is-darkBackground .AdjustableQuantitySelector { background-color: var(--checkout-white25); } .ProductSummary-actionButton .AdjustableQuantitySelector-icon { margin-left: var(--space-2); } .ExpandableText { margin-right: 20px; position: relative; word-break: break-word; } .ExpandableText--noMarginRight { margin-right: 0; } .ExpandableText--truncated { -webkit-box-orient: vertical; display: -webkit-box; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .ExpandableText-button { bottom: 0; line-height: 0; position: absolute; right: -20px; } .ExpandableText-iconContainer { padding: var(--space-1); transition: background-color .1s ease,fill .1s ease; } .ExpandableText-iconContainer:hover { background-color: var(--checkout-gray25); border-radius: var(--slightly-rounded); } .ExpandableText-iconContainer:hover svg { fill: var(--checkout-black); } .App-Container.is-darkBackground .ExpandableText-icon { fill: var(--checkout-lightGray400); } .App-Container.is-darkBackground .ExpandableText-iconContainer:hover { background-color: var(--checkout-white50); } .App-Container.is-darkBackground .ExpandableText-iconContainer:hover svg { fill: var(--checkout-white); } .App-Container.is-squareBordered .ExpandableText-iconContainer:hover { border-radius: 0; } .App-Container.is-veryRoundBordered .ExpandableText-iconContainer:hover { border-radius: var(--very-rounded-button); } .TierDetail-tierBreakdown { -ms-flex-positive: 1; -webkit-flex-grow: 1; flex-grow: 1; margin-right: calc(var(--space-2)*-1); padding: 0; } .TierDetail-tierBreakdown, .TierDetail-tierDescription--indented { margin-left: var(--space-3); } .TierAccordion-button { fill: var(--checkout-gray400); } .TierAccordion-button .Button-Icon--right { margin-left: 4px; } .App-Overview.is-darkBackground .TierAccordion-button { fill: var(--checkout-lightGray400); } .SavingsBadge { background-color: var(--sail-green100); border-radius: 4px; color: var(--sail-green600); display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; padding: 1px 6px; } .HostedSwitch { -ms-flex-negative: 0; background: rgba(255,255,255,.5); border: 1px solid rgba(0,0,0,.1); border-radius: 1.25em; cursor: pointer; display: block; -webkit-flex-shrink: 0; flex-shrink: 0; height: 1em; padding: 0; position: relative; transition: border .3s ease,background .3s ease,box-shadow .3s ease; width: 1.75em; } .HostedSwitch:focus { box-shadow: 0 0 0 1px rgba(50,151,211,.3),0 1px 1px 0 rgba(0,0,0,.07),0 0 0 4px rgba(50,151,211,.3); outline: none; } .HostedSwitch--active { background-color: var(--checkout-green); } .HostedSwitch--disabled { cursor: default; opacity: .4; } .HostedSwitchControl { fill: #fff; border: 1px solid rgba(42,47,69,.12); border-radius: 100%; display: block; height: 100%; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease,-webkit-transform .3s ease; width: auto; will-change: transform; } .HostedSwitch--active .HostedSwitchControl { -webkit-transform: translate(.75em); -ms-transform: translate(.75em); transform: translate(.75em); } :root { --green-shimmer-gradient: linear-gradient(90deg,rgba(255,255,255,0) 35%,var(--checkout-green) 50%,rgba(255,255,255,0) 65%); --green-shimmer-border-width: 1px; } .UpsellToggle-clickContainer { border: var(--border); border-bottom-left-radius: var(--rounded); border-bottom-right-radius: var(--rounded); position: relative; z-index: 0; } .UpsellToggle, .UpsellToggle-clickContainer { min-height: 44px; } .UpsellToggle-clickContainer:before { background: var(--green-shimmer-gradient); background-position: 100%; background-size: 300% 300%; border-bottom-left-radius: calc(var(--rounded) + var(--green-shimmer-border-width)); border-bottom-right-radius: calc(var(--rounded) + var(--green-shimmer-border-width)); content: ""; height: calc(100% + var(--green-shimmer-border-width)*2); left: calc(var(--green-shimmer-border-width)*-1); position: absolute; top: calc(var(--green-shimmer-border-width)*-1); width: calc(100% + var(--green-shimmer-border-width)*2); z-index: 1; } .UpsellToggle-clickContainer.animate-shimmer:before { -webkit-animation: shimmer 1.25s ease; animation: shimmer 1.25s ease; } .UpsellToggle-backgroundContainer { border-bottom-left-radius: var(--rounded); border-bottom-right-radius: var(--rounded); height: 100%; position: relative; width: 100%; z-index: 1; } .UpsellToggle { background-color: var(--checkout-gray25); border-radius: calc(var(--rounded) - var(--green-shimmer-border-width)); display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: var(--space-4); padding: 12px var(--space-4); } .UpsellToggle-savingsMessage { display: inline-block; margin-right: var(--space-2); vertical-align: middle; } .UpsellToggle .UpsellToggle-savingsMessageText { margin-right: var(--space-1); } .UpsellToggle .SavingsBadge { margin-top: 1px; } .UpsellToggle-clickContainer:not(.is-renderedOnLineItem) .UpsellToggle { margin: 0 auto; max-width: var(--checkout-app-tablet-constraint); } .UpsellToggle-price { -ms-flex-item-align: center; -ms-grid-row-align: center; -webkit-align-self: center; align-self: center; text-align: end; } @media only screen and (max-width:991.98px) { .UpsellToggle-clickContainer { border-radius: var(--rounded); } .UpsellToggle-clickContainer:before { border-radius: calc(var(--rounded) + var(--green-shimmer-border-width)); } .UpsellToggle-backgroundContainer { border-radius: var(--rounded); } .UpsellToggle-clickContainer.is-renderedOnLineItem { display: none; } } @media only screen and (min-width:992px) { .UpsellToggle { border-radius: 0; border-bottom-left-radius: calc(var(--rounded) - var(--green-shimmer-border-width)); border-bottom-right-radius: calc(var(--rounded) - var(--green-shimmer-border-width)); margin-top: 0; } .UpsellToggle-clickContainer { display: none; } .UpsellToggle-clickContainer.is-renderedOnLineItem { display: -webkit-flex; display: -ms-flexbox; display: flex; } } .App-Container.is-darkBackground .UpsellToggle-clickContainer { border: var(--border-lightBg); } .App-Container.is-darkBackground .UpsellToggle { background-color: var(--checkout-lightGray25); } @media only screen and (min-width:992px) { .App-Container.is-darkBackground .UpsellToggle-clickContainer { border: var(--border-lightBg); } } .LineItem { margin-left: 0; transition: margin-left .4s linear; } .LineItem-imageContainer { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--checkout-line-item-image-size); -webkit-justify-content: center; justify-content: center; width: var(--checkout-line-item-image-size); } .LineItem-image { border-radius: 4px; max-height: 100%; max-width: 100%; } .LineItem-description { -webkit-flex: 2 1 max-content; -ms-flex: 2 1 max-content; flex: 2 1 max-content; } .LineItem-productDescription { -webkit-flex: 1 0 100%; -ms-flex: 1 0 100%; flex: 1 0 100%; } .LineItem-seeMoreLink { margin-left: var(--space-1); text-decoration: underline; } .LineItem-productName { -ms-flex-preferred-size: min-content; -ms-flex-positive: 1; -webkit-flex-basis: min-content; flex-basis: min-content; -webkit-flex-grow: 1; flex-grow: 1; } .LineItem-amountDetail { -webkit-flex: 1 1 max-content; -ms-flex: 1 1 max-content; flex: 1 1 max-content; min-width: var(--checkout-line-item-amount-size); } .App-Container.is-squareBordered .LineItem-image { border-radius: 0; } .App-Container.is-veryRoundBordered .LineItem-image { border-radius: var(--very-rounded); } .LineItem--indented { margin-left: calc(var(--checkout-line-item-image-size) + var(--space-4)); } .LineItem-tierAccordion, .LineItem-tierBreakdown { -ms-flex-positive: 1; -webkit-flex-grow: 1; flex-grow: 1; } .LineItem-tierBreakdown { margin-left: var(--space-3); } .LineItem-quantity.has-commaIfNeeded:not(:last-child):after { content: ", "; } @media only screen and (min-width:992px) { .LineItem.is-upsell { border: var(--border); border-bottom: none; border-top-left-radius: var(--rounded); border-top-right-radius: var(--rounded); padding: var(--space-4); } .LineItem--indented.is-upsell { margin-left: 0; padding-left: calc(var(--checkout-line-item-image-size) + var(--space-6)); } .App-Overview.is-darkBackground .LineItem.is-upsell { border: var(--border-lightBg); border-bottom: none; } } .PromotionCodeEntry { font-size: var(--checkout-font-size-14); margin-bottom: var(--space-4); } .PromotionCodeEntry-inputWrapper { display: inline-block; min-width: 100%; position: relative; } .PromotionCodeEntry-inputWrapper--blurred { min-width: 35%; transition-property: min-width; } .PromotionCodeEntry-inputWrapper+.Text { display: block; margin-top: var(--space-1); } .PromotionCodeEntry-label { font-size: var(--checkout-font-size-14); font-weight: 500; height: 0; padding: 0 12px; transition-property: padding; visibility: hidden; white-space: nowrap; } .PromotionCodeEntry-label.is-mobile { font-size: var(--checkout-font-size-16); } .is-fontFamily--Inconsolata .PromotionCodeEntry-label, .is-fontFamily--Lato .PromotionCodeEntry-label, .is-fontFamily--PTSans .PromotionCodeEntry-label, .is-fontFamily--TitilliumWeb .PromotionCodeEntry-label, .is-fontFamily--UbuntuMono .PromotionCodeEntry-label { font-size: var(--checkout-font-size-15); } .is-fontFamily--Lato .PromotionCodeEntry-label.is-mobile { font-size: var(--checkout-font-size-16); } .is-fontFamily--Lato .PromotionCodeEntry-label .Text, .is-fontFamily--Lora .PromotionCodeEntry-label .Text { letter-spacing: var(--checkout-letter-spacing-lg); } .PromotionCodeEntry-inputWrapper--focused .PromotionCodeEntry-label { padding: 0 var(--space-3); } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input { border-radius: var(--rounded); font-size: var(--checkout-font-size-14); height: var(--checkout-lg-input-height); line-height: var(--checkout-input-line-height); padding: 0; transition-property: padding,line-height,background,box-shadow; } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input.is-mobile { font-size: var(--checkout-font-size-16); } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--focused .PromotionCodeEntry-input { padding: var(--space-2) 90px var(--space-2) var(--space-3); } .App-Container:not(.is-noBackground) .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-label { padding: 0 var(--space-3); } .App-Container.is-noBackground .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input { height: auto; } .App-Container:not(.is-noBackground) .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input, .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--focused .PromotionCodeEntry-input[value=""] { padding: var(--space-2) var(--space-3); } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input { background-color: transparent; box-shadow: none; cursor: pointer; line-height: 1.3; } .PromotionCodeEntry-input:disabled:hover { cursor: default; } .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input::-webkit-input-placeholder { color: var(--checkout-blue); font-weight: 500; } .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input::-moz-placeholder { color: var(--checkout-blue); font-weight: 500; } .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input:-ms-input-placeholder { color: var(--checkout-blue); font-weight: 500; } .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input::placeholder { color: var(--checkout-blue); font-weight: 500; } .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input::-webkit-input-placeholder { opacity: 1; transition-property: color; } .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input::-moz-placeholder { opacity: 1; transition-property: color; } .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input:-ms-input-placeholder { opacity: 1; transition-property: color; } .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input::placeholder { opacity: 1; transition-property: color; } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input, .PromotionCodeEntry-inputWrapper, .PromotionCodeEntry-inputWrapper .InputContainer, .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input::-webkit-input-placeholder, .PromotionCodeEntry-label { transition-duration: .2s; transition-timing-function: ease-out; } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input, .PromotionCodeEntry-inputWrapper, .PromotionCodeEntry-inputWrapper .InputContainer, .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input::-moz-placeholder, .PromotionCodeEntry-label { transition-duration: .2s; transition-timing-function: ease-out; } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input, .PromotionCodeEntry-inputWrapper, .PromotionCodeEntry-inputWrapper .InputContainer, .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input:-ms-input-placeholder, .PromotionCodeEntry-label { transition-duration: .2s; transition-timing-function: ease-out; } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input, .PromotionCodeEntry-inputWrapper, .PromotionCodeEntry-inputWrapper .InputContainer, .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input::placeholder, .PromotionCodeEntry-label { transition-duration: .2s; transition-timing-function: ease-out; } .PromotionCodeEntry-applyButton { background: transparent; border: none; bottom: 0; opacity: 0; pointer-events: none; position: absolute; right: var(--space-3); top: 0; -webkit-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8); transition: opacity .3s ease,-webkit-transform .3s ease; transition: opacity .3s ease,transform .3s ease; transition: opacity .3s ease,transform .3s ease,-webkit-transform .3s ease; z-index: 100; } .PromotionCodeEntry-applyButton--visible { cursor: pointer; opacity: 1; pointer-events: auto; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .App-Container:not(.is-noBackground) .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input { border: 0; box-shadow: none; } .PromotionCodeEntry-applyButton--error { transition: none; } .PromotionCodeEntry .Button-Icon path { fill: var(--checkout-gray900); } .PromotionCodeEntry .Button-Spinner { opacity: 1; } .App-Overview.is-darkBackground .PromotionCodeEntry .Button-Icon path { fill: var(--checkout-lightGray900); } .App-Container:not(.is-noBackground) .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input { border: none; box-shadow: var(--borderless-box-shadow); } .App-Overview.is-darkBackground .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input::-webkit-input-placeholder { color: var(--checkout-gray800); } .App-Overview.is-darkBackground .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input::-moz-placeholder { color: var(--checkout-gray800); } .App-Overview.is-darkBackground .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input:-ms-input-placeholder { color: var(--checkout-gray800); } .App-Overview.is-darkBackground .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input::placeholder { color: var(--checkout-gray800); } .App-Container:not(.is-noBackground) .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input:focus { box-shadow: var(--focus-border-box-shadow-dark); } .App-Overview.is-darkBackground .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input:focus { box-shadow: var(--focus-border-box-shadow-light); } .App-Container:not(.is-noBackground) .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input { background-color: var(--checkout-gray25); box-shadow: none; } .App-Container:not(.is-noBackground) .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input:hover { background-color: var(--checkout-gray50); } .App-Container:not(.is-noBackground) .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input::-webkit-input-placeholder { } .App-Container:not(.is-noBackground) .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input::-moz-placeholder { } .App-Container:not(.is-noBackground) .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input:-ms-input-placeholder { } .App-Container:not(.is-noBackground) .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input::placeholder { } .App-Overview.is-darkBackground .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input { background-color: var(--checkout-lightGray25); transition: background .08s ease; } .App-Overview.is-darkBackground .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input:hover { background-color: var(--checkout-lightGray50); } .App-Overview.is-darkBackground .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input::-webkit-input-placeholder { } .App-Overview.is-darkBackground .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input::-moz-placeholder { } .App-Overview.is-darkBackground .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input:-ms-input-placeholder { } .App-Overview.is-darkBackground .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input::placeholder { } .App-Overview.is-darkBackground .PromotionCodeEntry-applyButton .Text-color--default { color: inherit; } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input+.InputContainer-placeholder--ie { font-size: var(--checkout-font-size-14); white-space: nowrap; } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper .PromotionCodeEntry-input.is-mobile+.InputContainer-placeholder--ie { font-size: var(--checkout-font-size-16); white-space: nowrap; } .App-Container.is-noBackground .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input+.InputContainer-placeholder--ie { left: 0; top: 0; } .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input+.InputContainer-placeholder--ie, .PromotionCodeEntry .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input.is-mobile+.InputContainer-placeholder--ie { color: var(--checkout-blue); font-size: var(--checkout-font-size-14); font-weight: 500; } .App-Container:not(.is-noBackground) .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input+.InputContainer-placeholder--ie { } .App-Overview.is-darkBackground .PromotionCodeEntry-inputWrapper--blurred .PromotionCodeEntry-input+.InputContainer-placeholder--ie { } .PromotionCodeEntry-usePromoCode { cursor: pointer; margin-left: var(--space-1); text-decoration: underline dotted; -webkit-text-decoration: underline dotted; } .OrderDetailsFooter-subtotal { border-bottom: var(--border); margin-bottom: var(--space-4); padding-bottom: var(--space-4); padding-top: var(--space-4); } .OrderDetailsFooter-subtotal:first-child { border-bottom: unset; border-top: var(--border); margin-bottom: unset; } .OrderDetailsFooter-subtotal--indented, .OrderDetailsFooter-subtotalItems--indented, .OrderDetailsFooter-trialTotal--indented { margin-left: calc(var(--checkout-line-item-image-size) + var(--space-4)); } .OrderDetailsFooter-nextInvoiceTotal { padding-bottom: var(--space-1); } .OrderDetailsFooter-addedToNextInvoice--indented, .OrderDetailsFooter-nextInvoiceTotal--indented { margin-left: calc(var(--checkout-line-item-image-size) + var(--space-4)); } .App-Overview.is-darkBackground .OrderDetailsFooter-subtotal:first-child { border-bottom: unset; border-top: var(--border-lightBg); } .OrderDetails-items { list-style: none; margin: 0; padding: 0; } .OrderDetails-item { display: block; margin-bottom: var(--space-4); } .OrderDetails-footer { padding-bottom: var(--space-4); } .OrderDetails-total { border-top: var(--border); padding-top: var(--space-4); } .OrderDetails-total--indented { margin-left: calc(var(--checkout-line-item-image-size) + var(--space-4)); } .OrderDetails-showHideButton { margin-top: calc(var(--space-2)*-1); } .OrderDetails-showHideButton--indented { margin-left: calc(var(--checkout-line-item-image-size) + var(--space-4)); } .OrderDetails-showHideButton+.OrderDetails-total { margin-top: var(--space-4); } .OrderDetails-showHideButton .Text { font-size: var(--checkout-font-size-14); line-height: 16px; position: relative; } .OrderDetails-remainingProductImages { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--checkout-line-item-image-size); position: relative; transition: opacity .2s ease; width: var(--checkout-line-item-image-size); } .OrderDetails-remainingProductImages.is-hidden { opacity: 0; pointer-events: none; } .OrderDetails-remainingProductImageContainer { -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-color: #fff; border-radius: 4px; box-shadow: 0 0 0 2px #fff; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 20px; position: absolute; width: 20px; } .OrderDetails-remainingProductImageContainer, .OrderDetails-remainingProductImages.has-oneImage { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .OrderDetails-remainingProductImages.has-twoImages .OrderDetails-remainingProductImageContainer:first-child { left: 0; z-index: 2; } .OrderDetails-remainingProductImages.has-twoImages .OrderDetails-remainingProductImageContainer:nth-child(2) { left: 22px; z-index: 1; } .OrderDetails-remainingProductImages.has-threeImages .OrderDetails-remainingProductImageContainer:first-child { left: 0; z-index: 3; } .OrderDetails-remainingProductImages.has-threeImages .OrderDetails-remainingProductImageContainer:nth-child(2) { left: 11px; z-index: 2; } .OrderDetails-remainingProductImages.has-threeImages .OrderDetails-remainingProductImageContainer:nth-child(3) { left: 22px; z-index: 1; } .OrderDetails-remainingProductImage { border-radius: 4px; max-height: 100%; max-width: 100%; } @media only screen and (min-width:992px) { .OrderDetails-item.is-upsell { left: calc(var(--space-4)*-1); margin-top: var(--space-2); position: relative; width: calc(100% + 32px); } } .OrderDetails-dynamicCurrencyInfo { gap: var(--space-2); } .OrderDetails-dynamicCurrencyInfo--indented { margin-left: calc(var(--checkout-line-item-image-size) + var(--space-4)); } .App-Overview.is-darkBackground .OrderDetails-total { border-top: var(--border-lightBg); } :root { --modal-transition-duration: 0.4s; --modal-overlay-transition-duration: 0.25s; } .OrderDetailsDropdown-modalOverlay { background: transparent; display: block; z-index: var(--checkout-z-index-order-details-modal-overlay); } .OrderDetailsDropdown-modalOverlay.ModalOverlay--beforeClose:before { opacity: 0; transition-duration: var(--modal-overlay-transition-duration); } .OrderDetailsDropdown-modalOverlay.ModalOverlay--beforeClose { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } .OrderDetailsDropdown-modal { background-color: var(--checkout-white); border-radius: 0; max-height: 100%; opacity: 1; padding-top: var(--checkout-header-size); -webkit-transform: translateY(calc(-100% + var(--checkout-header-size))); -ms-transform: translateY(calc(-100% + var(--checkout-header-size))); transform: translateY(calc(-100% + var(--checkout-header-size))); transition: -webkit-transform var(--modal-transition-duration) var(--checkout-header-animation-easing); transition: transform var(--modal-transition-duration) var(--checkout-header-animation-easing); transition: transform var(--modal-transition-duration) var(--checkout-header-animation-easing),-webkit-transform var(--modal-transition-duration) var(--checkout-header-animation-easing); } .OrderDetailsDropdown-modal:not(.is-lineItemsListExpanded) { overflow: hidden; } .OrderDetailsDropdown-modal.ModalContent--afterOpen { box-shadow: 0 24px 32px rgba(0,0,0,.1); overflow: auto; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); } .OrderDetailsDropdown-modal.ModalContent--beforeClose { box-shadow: 0 24px 32px transparent; -webkit-transform: translateY(calc(-100% + var(--checkout-header-size))); -ms-transform: translateY(calc(-100% + var(--checkout-header-size))); transform: translateY(calc(-100% + var(--checkout-header-size))); transition: box-shadow var(--modal-overlay-transition-duration) var(--checkout-header-animation-easing),-webkit-transform var(--modal-overlay-transition-duration) var(--checkout-header-animation-easing); transition: transform var(--modal-overlay-transition-duration) var(--checkout-header-animation-easing),box-shadow var(--modal-overlay-transition-duration) var(--checkout-header-animation-easing); transition: transform var(--modal-overlay-transition-duration) var(--checkout-header-animation-easing),box-shadow var(--modal-overlay-transition-duration) var(--checkout-header-animation-easing),-webkit-transform var(--modal-overlay-transition-duration) var(--checkout-header-animation-easing); } .OrderDetailsDropdown { padding: var(--space-4); padding-top: 0; } .OrderDetailsDropdown-orderDetails { margin: auto; max-width: var(--checkout-app-tablet-constraint); } .TestModeBadge { display: inline-block; } .TestModeBadge-mobile { display: none; } @media only screen and (max-width:991.98px) { .TestModeBadge-desktop { display: none; } .TestModeBadge-mobile { display: -webkit-flex; display: -ms-flexbox; display: flex; } } .Header { min-height: var(--checkout-lg-header-size); z-index: var(--checkout-z-index-header); } .Header-businessLink { display: block; margin-left: calc(var(--space-5)*-1); min-width: 60px; padding-left: var(--space-5); } .Header:not(.is-darkBackground) .Header-merchantLogoWithLabel .Text { color: var(--checkout-gray800); } .Header-business .Header-backArrow { opacity: .4; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); transition: opacity .25s ease,width .25s ease,-webkit-transform .25s ease; transition: opacity .25s ease,transform .25s ease,width .25s ease; transition: opacity .25s ease,transform .25s ease,width .25s ease,-webkit-transform .25s ease; } .Header-business .Header-merchantLogoContainer { min-width: 0; } .Header-business .Header-backArrowContainer, .Header-business .Header-merchantLogoContainer { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .Header:not(.is-darkBackground) .Header-business .Header-backArrow { fill: var(--checkout-gray800); } .App-Overview.is-darkBackground .Header-business .Header-backArrow, .Body--modal-open .App-Overview .Header.is-darkBackground .Header-business .Header-backArrow { fill: var(--checkout-lightGray900); } .Header-businessLink:focus .Header-backArrow, .Header-businessLink:hover .Header-backArrow { opacity: 1; -webkit-transform: translateX(-2px); transform: translateX(-2px); -ms-transform: translateX(var(--space-1)); } .Header-business .Header-businessLink-label { left: 9px; opacity: 1; position: absolute; -webkit-transform: translateX(var(--space-1)); transform: translateX(var(--space-1)); -ms-transform: translateX(var(--space-1)) translateY(-50%); transition: opacity .1s ease 0ms,-webkit-transform .1s ease 0ms; transition: opacity .1s ease 0ms,transform .1s ease 0ms; transition: opacity .1s ease 0ms,transform .1s ease 0ms,-webkit-transform .1s ease 0ms; } .Header-businessLink.is-notClickable, .Header-businessLink:focus .Header-businessLink-label--noPointerEvents, .Header-businessLink:hover .Header-businessLink-label--noPointerEvents { pointer-events: none; } @media only screen and (min-width:576px) { .Header-business .Header-backArrow { position: absolute; -webkit-transform: translateX(-20px); transform: translateX(-20px); -ms-transform: translateX(-20px) translateY(-50%); } .Header-businessLink:focus .Header-backArrow, .Header-businessLink:hover .Header-backArrow { -webkit-transform: translateX(-22px); transform: translateX(-22px); -ms-transform: translateX(-22px) translateY(-50%); } .Header-businessLink:focus .Header-businessLink-label, .Header-businessLink:hover .Header-businessLink-label { opacity: 1; -webkit-transform: none; transform: none; -ms-transform: translateY(-50%); transition: opacity .25s ease 50ms,-webkit-transform .25s ease 50ms; transition: opacity .25s ease 50ms,transform .25s ease 50ms; transition: opacity .25s ease 50ms,transform .25s ease 50ms,-webkit-transform .25s ease 50ms; } .Header-businessLink.Header-businessLink--paymentsuccess:focus .Header-businessLink-label, .Header-businessLink.Header-businessLink--paymentsuccess:hover .Header-businessLink-label { opacity: 0; } .Header-businessLink .HeaderImage--logo { transition: opacity .25s ease .1s,-webkit-transform .25s ease .1s; transition: opacity .25s ease .1s,transform .25s ease .1s; transition: opacity .25s ease .1s,transform .25s ease .1s,-webkit-transform .25s ease .1s; } .Header-businessLink:focus .HeaderImage--icon, .Header-businessLink:focus .HeaderImage--logo, .Header-businessLink:hover .HeaderImage--icon, .Header-businessLink:hover .HeaderImage--logo { opacity: 0; -webkit-transform: translateX(-2px); -ms-transform: translateX(-2px); transform: translateX(-2px); transition: opacity .1s ease 0ms,-webkit-transform .1s ease 0ms; transition: opacity .1s ease 0ms,transform .1s ease 0ms; transition: opacity .1s ease 0ms,transform .1s ease 0ms,-webkit-transform .1s ease 0ms; } .Header-businessLink.Header-businessLink--paymentsuccess:focus .HeaderImage--icon, .Header-businessLink.Header-businessLink--paymentsuccess:focus .HeaderImage--logo, .Header-businessLink.Header-businessLink--paymentsuccess:hover .HeaderImage--icon, .Header-businessLink.Header-businessLink--paymentsuccess:hover .HeaderImage--logo { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .Header-businessLink .HeaderImage--icon { transition: opacity .25s ease,-webkit-transform .25s ease; transition: opacity .25s ease,transform .25s ease; transition: opacity .25s ease,transform .25s ease,-webkit-transform .25s ease; } .Header-businessLink .Header-businessLink-name { transition: opacity .25s ease .1s,-webkit-transform .25s ease .1s; transition: opacity .25s ease .1s,transform .25s ease .1s; transition: opacity .25s ease .1s,transform .25s ease .1s,-webkit-transform .25s ease .1s; } .Header-businessLink:focus .Header-businessLink-name, .Header-businessLink:hover .Header-businessLink-name { opacity: 0; -webkit-transform: translateX(-2px); -ms-transform: translateX(-2px); transform: translateX(-2px); transition: opacity .1s ease 0ms,-webkit-transform .1s ease 0ms; transition: opacity .1s ease 0ms,transform .1s ease 0ms; transition: opacity .1s ease 0ms,transform .1s ease 0ms,-webkit-transform .1s ease 0ms; } .Header-businessLink .Tag { transition: opacity .1s ease; } .Header-businessLink:focus .Tag, .Header-businessLink:hover .Tag { opacity: 0; } } .Header-merchantLogoWithLabel { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 100%; min-width: 0; } .Header-merchantLogoWithLabel>* { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; max-width: 100%; min-width: 0; } .Header-merchantLogoWithLabel .HeaderImage { -ms-flex-preferred-size: auto; -ms-flex-negative: 0; -webkit-flex-basis: auto; flex-basis: auto; -webkit-flex-shrink: 0; flex-shrink: 0; } .Header-actions { display: none; } .Header-viewDetailsButton { position: relative; text-align: right; transition: opacity .25s ease; width: 100%; } .Header:not(.is-darkBackground) .Header-viewDetailsButton .Text { color: var(--checkout-gray400); text-decoration: underline dotted var(--checkout-gray400); -webkit-text-decoration: underline dotted var(--checkout-gray400); } .Header:not(.is-darkBackground) .Header-viewDetailsButton .Text.Header-totalAmount { color: var(--checkout-gray900); } .Header:not(.is-darkBackground) .Header-viewDetailsButton svg { fill: var(--checkout-gray300); } .Header.is-darkBackground .Header-viewDetailsButton .Text { color: var(--checkout-lightGray400); text-decoration: underline dotted var(--checkout-lightGray400); -webkit-text-decoration: underline dotted var(--checkout-lightGray400); } .Header.is-darkBackground .Header-viewDetailsButton .Text.Header-totalAmount { color: var(--checkout-lightGray900); } .Header.is-darkBackground .Header-viewDetailsButton svg { fill: var(--checkout-lightGray300); } .Header-couponIcon { margin-right: var(--space-2); margin-top: var(--space-1); } @media only screen and (max-width:991.98px) { .Header .Header-actions .Button-Icon { transition: -webkit-transform var(--checkout-header-animation-easing) .25s; transition: transform var(--checkout-header-animation-easing) .25s; transition: transform var(--checkout-header-animation-easing) .25s,-webkit-transform var(--checkout-header-animation-easing) .25s; } .Header.is-orderDetailsDropdownOpen .Header-actions .Button-Icon { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .Header.is-orderDetailsDropdownOpen .Header-businessLink.is-notClickable { pointer-events: none; } .Header-productImage { position: relative; } .Header-productImage img { border-radius: 3px; display: block; height: 20px; object-fit: cover; width: 20px; } .Header-productImage--withMarginRight { margin-right: var(--space-2); } .Header-totalItemCount { -ms-flex-pack: center; background-color: var(--checkout-white); border-radius: 50%; bottom: -6px; box-shadow: 0 2px 5px rgba(50,50,93,.1),0 1px 1px rgba(0,0,0,.07); color: var(--checkout-black); font-size: 9px; font-weight: 700; height: 16px; -webkit-justify-content: center; justify-content: center; padding: 4px; right: -6px; width: 16px; } .Header-detailsLabel, .Header-totalItemCount { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; } .Header-detailsLabel { max-width: 105px; right: 20px; } .Header-viewDetailsButton .Text { display: block; width: 100%; } .Header:not(.is-darkBackground) .Header-business .Header-backArrow { fill: var(--checkout-gray800); } .Header-content { margin: auto; max-width: calc(24px + var(--checkout-app-tablet-constraint)); } .App--customAmount .Header-actions, .App--multiItem .Header-actions { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 125px; } .App--customAmount .Header, .App--multiItem .Header { height: var(--checkout-header-size); left: 0; margin-bottom: 0; padding: var(--space-5) 0 0 0; position: static; right: 0; top: 0; transition: background-color .15s ease,box-shadow .15s ease-out; } .App-Container.is-noBackground .Header, .App-Container:not(is-noBackground) .Header--withShadow, .Body--modal-open .App-Container:not(is-noBackground) .Header { background-color: var(--checkout-white); } .App--customAmount .Header--withShadow, .App--multiItem .Header--withShadow { box-shadow: 0 1px 0 rgba(0,0,0,.05); overflow-y: hidden; } } .AutocompleteInput-container { position: relative; } .AutocompleteInput-dropdown-container { border-radius: var(--rounded); box-shadow: var(--autocomplete-dropdown-box-shadow); font-size: var(--checkout-font-size-14); line-height: var(--checkout-input-line-height); position: absolute; top: calc(100% + var(--space-2)); width: 100%; z-index: var(--checkout-z-index-autocomplete-dropdown); } .AddressAutocomplete-results { background-color: var(--checkout-white); border-radius: var(--rounded); box-shadow: var(--border-box-shadow); list-style: none; margin: 0; overflow: hidden; padding: 0; width: 100%; } .CheckoutInput--withRightPadding { padding-right: 50px; } .AddressAutocomplete-manual-entry--inDropdown, .AddressAutocomplete-result, .AddressAutocomplete-suggestions-container, .AddressAutocomplete-tryAgain { padding: var(--space-2) var(--space-3); } .AddressAutocomplete-tryAgain { -ms-flex-pack: justify; color: var(--checkout-gray400); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .AddressAutocomplete-tryAgainLink { color: var(--checkout-gray800); font-size: var(--checkout-font-size-12); line-height: normal; } .AddressAutocomplete-manual-entry.AddressAutocomplete-manual-entry--inDropdown { background-color: var(--checkout-gray25); border-radius: 0 0 var(--rounded) var(--rounded); box-shadow: var(--border-box-shadow); } .AddressAutocomplete-manual-entry--below-form { float: left; font-size: var(--checkout-font-size-12); margin-top: var(--space-2); text-align: left; } @media only screen and (max-width:991.98px) { .AddressAutocomplete-manual-entry--below-form { margin-top: var(--space-4); } } .AddressAutocomplete-manual-entry .Button { margin-right: var(--space-2); } .AddressAutocomplete-result--less-focus { color: var(--checkout-gray400); font-size: var(--checkout-font-size-12); margin-left: var(--space-2); } .AddressAutocomplete-result--matched { font-weight: 700; } .AddressAutocomplete-result--matched, .AddressAutocomplete-result--unmatched { color: var(--checkout-gray900); font-size: var(--checkout-font-size-14); } .AddressAutocomplete-manual-entry--inDropdown.AddressAutocomplete-manual-entry--selected, .AddressAutocomplete-result--selected { background-color: var(--checkout-gray50); } .AddressAutocomplete-result:hover { cursor: pointer; } .AddressAutocomplete-suggestions { padding-right: var(--space-1); } .AddressAutocomplete-suggestions-container { -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: var(--checkout-gray400); display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: var(--checkout-font-size-12); margin: var(--space-0) var(--space-0); } .AddressAutocomplete-privacy-logo { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: var(--space-0); } .AddressAutocomplete--clear-button-container { -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: linear-gradient(90deg,rgba(255,255,255,.5),#fff 35%,#fff); bottom: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; padding-left: var(--space-2); position: absolute; right: var(--space-2); } .AddressAutocomplete--clear-button { border-radius: var(--space-0); font-size: var(--checkout-font-size-12); padding: var(--space-1) var(--space-2); z-index: var(--checkout-z-index-autocomplete-dropdown); } .AddressAutocomplete--clear-button:focus, .AddressAutocomplete-manual-entry--below-form .Button:focus { box-shadow: var(--focus-border-box-shadow); outline: none; } .AddressAutocomplete--clear-dropdown-button { position: absolute; right: var(--space-4); top: var(--space-3); vertical-align: middle; } .AddressAutocomplete-spinner { display: none; height: var(--space-3); position: absolute; right: var(--space-7); top: var(--space-3); } .AddressAutocomplete-results--aria-live-region { height: 2px; opacity: 0; position: absolute; width: 2px; } .AddressAutocomplete-manual-entry .LinkActionButton { border-radius: var(--link-button-rounded-sm); margin-left: calc(var(--link-text-button-padding)*-1); } .AddressAutocomplete-manual-entry .LinkActionButton .LinkActionButton-background { border-radius: var(--link-button-rounded-sm); } body:after { background: transparent; content: ""; display: block; height: 0; transition: height .4s ease; width: 100%; } body.has-scroll-shim:after { height: 80px; } .LinkActionButton { background: none; border: none; border-radius: var(--link-button-rounded); box-shadow: none; cursor: pointer; min-height: var(--link-button-height); outline: none; position: relative; width: 100%; } .LinkActionButton-text { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; position: relative; transition: opacity .15s ease; z-index: 2; } .LinkActionButton--incomplete .LinkActionButton-text { opacity: var(--link-button-disabled-text-opacity); } .LinkActionButton--pending .LinkActionButton-text { opacity: 0; } .LinkActionButton-background { border: none; border-radius: var(--link-button-rounded); bottom: 0; cursor: pointer; display: block; left: 0; pointer-events: none; position: absolute; right: 0; text-align: center; top: 0; transition: background-color .15s ease,box-shadow .15s ease,opacity .15s ease,-webkit-transform .15s ease; transition: background-color .15s ease,transform .15s ease,box-shadow .15s ease,opacity .15s ease; transition: background-color .15s ease,transform .15s ease,box-shadow .15s ease,opacity .15s ease,-webkit-transform .15s ease; } .LinkActionButton:hover .LinkActionButton-background { -webkit-transform: var(--link-button-hover-transform); -ms-transform: var(--link-button-hover-transform); transform: var(--link-button-hover-transform); } .LinkActionButton:active .LinkActionButton-background { -webkit-transform: var(--link-button-active-transform); -ms-transform: var(--link-button-active-transform); transform: var(--link-button-active-transform); } .LinkActionButton:focus-visible .LinkActionButton-background { box-shadow: var(--link-default-focus-border-box-shadow); } .LinkActionButton--primary .LinkActionButton-background { background-color: var(--link-button-brand); } .LinkActionButton--primary:hover .LinkActionButton-background { background-color: var(--link-button-brand-hover); } .LinkActionButton--primary:active .LinkActionButton-background { background-color: var(--link-button-brand-active); } .LinkActionButton--secondary { width: calc(100% - 2px); } .LinkActionButton--card .LinkActionButton-background, .LinkActionButton--secondary .LinkActionButton-background { background-color: var(--link-color-neutral-0); box-shadow: var(--link-default-border-box-shadow); } .LinkActionButton--card .LinkActionButton-background { box-shadow: var(--link-accordion-border-box-shadow); } .LinkActionButton--card:hover .LinkActionButton-background, .LinkActionButton--secondary:hover .LinkActionButton-background { background-color: var(--link-color-neutral-25); } .LinkActionButton--card:active .LinkActionButton-background, .LinkActionButton--secondary:active .LinkActionButton-background { background-color: var(--link-color-neutral-50); } .LinkActionButton--icon { border-radius: var(--link-button-rounded-sm); min-height: var(--link-system-icon-size); width: var(--link-system-icon-size); } .LinkActionButton--icon .InlineSVG { fill: var(--link-icon-default); color: var(--link-icon-default); height: var(--link-system-icon-svg-size); width: var(--link-system-icon-svg-size); } .LinkActionButton--icon .LinkActionButton-background { background-color: transparent; border-radius: var(--link-button-rounded-sm); } .LinkActionButton--icon:hover .LinkActionButton-background { background-color: var(--link-icon-button-hover-background); } .LinkActionButton--icon:active .LinkActionButton-background { background-color: var(--link-icon-button-active-background); } .LinkActionButton--text { border-radius: var(--link-input-rounded); color: var(--link-text-action); min-height: auto; padding: 0 var(--link-text-button-padding); width: auto; } .LinkActionButton--text .InlineSVG { fill: var(--link-text-action); } .LinkActionButton--text .LinkActionButton-background { background-color: transparent; border-radius: var(--link-input-rounded); } .LinkActionButton--text:hover .LinkActionButton-background { background-color: var(--link-text-button-hover); } .LinkActionButton--text:active .LinkActionButton-background { background-color: var(--link-text-button-active); } .LinkActionButton-indicator.Spinner { left: 50%; margin: calc(var(--checkout-md-spinner-size)*-1/2) 0 0 calc(var(--checkout-md-spinner-size)*-1/2); position: absolute; top: 50%; z-index: 2; } .LinkActionButton .Spinner-ellipse { stroke: var(--link-text-default); } .LinkText { font-family: var(--link-text-font-family); letter-spacing: normal; margin: 0; } .LinkText-wordBreak--word { word-break: break-word; } .LinkText--title { font-size: var(--link-text-font-size-title); font-weight: var(--link-text-font-weight-title); line-height: var(--link-text-line-height-title); } .LinkText--subtitle { font-size: var(--link-text-font-size-subtitle); font-weight: var(--link-text-font-weight-subtitle); line-height: var(--link-text-line-height-subtitle); } .LinkText--heading { font-size: var(--link-text-font-size-heading); font-weight: var(--link-text-font-weight-heading); line-height: var(--link-text-line-height-heading); } .LinkText--body { font-size: var(--link-text-font-size-body); font-weight: var(--link-text-font-weight-body); line-height: var(--link-text-line-height-body); } .LinkText--bodyEmphasized { font-size: var(--link-text-font-size-body-emphasized); font-weight: var(--link-text-font-weight-body-emphasized); line-height: var(--link-text-line-height-body-emphasized); } .LinkText--detail { font-size: var(--link-text-font-size-detail); font-weight: var(--link-text-font-weight-detail); line-height: var(--link-text-line-height-detail); } .LinkText--caption { font-size: var(--link-text-font-size-caption); font-weight: var(--link-text-font-weight-caption); line-height: var(--link-text-line-height-caption); } .LinkText--captionTight { font-size: var(--link-text-font-size-caption-tight); font-weight: var(--link-text-font-weight-caption-tight); line-height: var(--link-text-line-height-caption-tight); } .LinkText-color--default, .LinkText-color--primary { color: var(--link-text-default); } .LinkText-color--subdued { color: var(--link-text-subdued); } .LinkText-color--muted { color: var(--link-text-muted); } .LinkText-color--red { color: var(--link-text-danger); } .LinkText-color--brand { color: var(--link-text-action); } .LinkText-fontWeight--400 { font-weight: 400; } .LinkText-fontWeight--500 { font-weight: 500; } .LinkText-fontWeight--600 { font-weight: 600; } .LinkText-fontWeight--700 { font-weight: 700; } .BrandIcon { height: var(--checkout-icon-md); } .BrandIcon.is-bank { border-radius: 2.5px; height: calc(var(--checkout-icon-md) + 2px); } .FieldError { pointer-events: none; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; transition: all .3s ease; } .Optional { --badge-padding: var(--space-1); border: 1px solid var(--checkout-gray100); border-radius: 4px; color: var(--checkout-gray400); font-size: var(--checkout-font-size-12); font-weight: var(--checkout-text-font-weight); /* !important reason: legacy */ height: auto!important; padding: var(--space-0) var(--space-1); } .App-Container.is-veryRoundBordered .Optional { border-radius: var(--very-rounded); } .App-Container.is-squareBordered .Optional { border-radius: 0; } :root { --flag-icon-size: 16px; --z-index-chevron: calc(var(--checkout-z-index-field-icon) + 1); --z-index-flagIcon: var(--checkout-z-index-field-icon); --z-index-select: calc(var(--checkout-z-index-field-icon) - 1); } .PhoneNumberCountryCodeSelect-wrapper { cursor: pointer; height: var(--flag-icon-size); pointer-events: none; position: relative; width: var(--flag-icon-size); } .PhoneNumberCountryCodeSelect-wrapper:hover .PhoneNumberCountryCodeSelect-chevron { fill: var(--checkout-gray700); } .PhoneNumberCountryCodeSelect-wrapper select { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: inherit; border: none; border-radius: 0; outline: 0; } .PhoneNumberCountryCodeSelect-wrapper select:focus { border-radius: var(--slightly-rounded); box-shadow: var(--focus-border-box-shadow); } .PhoneNumberCountryCodeSelect-wrapper select::-ms-expand { display: none; } .PhoneNumberCountryCodeSelect-flagIcon { left: 0; position: absolute; top: 0; z-index: var(--z-index-flagIcon); } .PhoneNumberCountryCodeSelect-select { height: 0; left: 0; padding: calc(var(--flag-icon-size)/2) calc(var(--flag-icon-size)/2 + 4px) calc(var(--flag-icon-size)/2) calc(var(--flag-icon-size)/2); pointer-events: auto; position: absolute; top: 0; width: 0; z-index: var(--z-index-select); } @media only screen and (max-width:991.98px) { .PhoneNumberCountryCodeSelect-select { left: calc(var(--checkout-input-padding-horizontal)*-1); padding-bottom: var(--checkout-input-height); padding-left: calc(var(--flag-icon-size)/2 + var(--checkout-input-padding-horizontal)); padding-top: 0; top: calc(var(--checkout-input-padding-vertical)*-1*2); } } .PhoneNumberCountryCodeSelect-chevron { bottom: -1px; cursor: pointer; height: calc(var(--flag-icon-size)/2); position: absolute; right: calc(var(--flag-icon-size)*-1/4); width: calc(var(--flag-icon-size)/2); z-index: var(--z-index-chevron); } .PhoneNumberInput-inputWrapper { position: relative; } .PhoneNumberInput-label { display: block; padding-bottom: 4px; } .PhoneNumberInput-dynamicIcons { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: var(--space-2); pointer-events: none; position: absolute; right: var(--space-3); top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: var(--checkout-z-index-field-icon); } .PhoneNumberInput-flagIcon { margin-top: 3px; } .PhoneNumberInput-tooltipIconWrapper { margin-left: var(--space-2); pointer-events: auto; } .PhoneNumberInput-tooltipIcon { color: var(--checkout-gray400); } .PhoneNumberInput-input { padding-right: 26px; } .PhoneNumberInput--readOnly .PhoneNumberInput-input { -webkit-text-fill-color: var(--checkout-gray700); box-shadow: var(--read-only-border-box-shadow); color: var(--checkout-gray700); opacity: 1; pointer-events: none; } .PhoneNumberInput-readOnlyChangeButtonContainer { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; position: absolute; right: var(--space-3); top: 0; } .PhoneNumberInput-badge { border: 1px solid var(--checkout-gray100); border-radius: 4px; color: var(--checkout-gray400); font-size: var(--checkout-font-size-12); font-weight: var(--checkout-text-font-weight); padding: var(--space-0) var(--space-1); } :root { --checkout-select-icon-size: 12px; } .Select { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .Select-source { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--checkout-white); border: 0; box-shadow: var(--border-box-shadow); color: var(--checkout-input-color); font-size: var(--checkout-input-font-size); height: var(--checkout-input-height); line-height: var(--checkout-input-line-height); padding: var(--space-2) var(--space-3); padding-right: var(--space-6); transition: var(--checkout-input-transition); width: 100%; } .LinkPaymentForm--linkBranded .Select-source { box-shadow: var(--link-default-border-box-shadow); } .Select-source--empty { color: var(--checkout-input-placeholder-color); } .Select-source--empty option { color: var(--checkout-input-color); } .Select-source:focus { box-shadow: var(--focus-border-box-shadow); outline: none; z-index: var(--checkout-z-index-input-is-focused); } .LinkPaymentForm--linkBranded .Select-source:focus { box-shadow: var(--link-highlight-border-box-shadow); } .Select--fakeAutofill .Select-source, .Select-source:-webkit-autofill { -webkit-text-fill-color: var(--checkout-input-color); box-shadow: var(--autofill-border-box-shadow); transition: background-color 100000000s,box-shadow 0s linear; } .LinkPaymentForm--linkBranded .Select--fakeAutofill .Select-source, .LinkPaymentForm--linkBranded .Select-source:-webkit-autofill { box-shadow: var(--link-autofill-border-box-shadow); } .Select--fakeAutofill .Select-source:focus, .Select-source:-webkit-autofill:focus { box-shadow: var(--autofill-focus-border-box-shadow); transition: var(--checkout-input-transition); } .LinkPaymentForm--linkBranded .Select--fakeAutofill .Select-source:focus, .LinkPaymentForm--linkBranded .Select-source:-webkit-autofill:focus { box-shadow: var(--link-autofill-focus-border-box-shadow); } .Select-source:disabled { box-shadow: var(--disabled-border-box-shadow); color: var(--checkout-input-disabled-color); opacity: 1; transition: background-color 100000000s,box-shadow 0s linear; } .LinkPaymentForm--linkBranded .Select-source:disabled { box-shadow: var(--link-disabled-border-box-shadow); } .Select--fakeAutofill .Select-source:disabled, .Select-source:disabled:-webkit-autofill { -webkit-text-fill-color: var(--checkout-input-disabled-color); } .Select--invalid .Select-source { color: var(--checkout-input-invalid-color); } .Select--invalid .Select-source:not(:focus) { box-shadow: var(--error-border-box-shadow); } .LinkPaymentForm--linkBranded .Select--invalid .Select-source:not(:focus) { box-shadow: var(--link-danger-border-box-shadow); } .Select--invalid .Select-source--empty { color: var(--checkout-input-placeholder-color); } .Select--invalid .Select-source:-webkit-autofill, .Select--invalid.Select--fakeAutofill { -webkit-text-fill-color: var(--checkout-input-disabled-color); box-shadow: var(--autofill-error-border-box-shadow); } .LinkPaymentForm--linkBranded .Select--invalid .Select-source:-webkit-autofill, .LinkPaymentForm--linkBranded .Select--invalid.Select--fakeAutofill { box-shadow: var(--link-autofill-error-border-box-shadow); } .Select-source::-ms-expand { display: none; } .Select-arrow { height: var(--checkout-select-icon-size); margin-top: calc(var(--checkout-select-icon-size)*-.5); pointer-events: none; position: absolute; right: var(--space-3); top: 50%; width: var(--checkout-select-icon-size); z-index: var(--checkout-z-index-field-icon); } .Select-source:disabled+.Select-arrow { display: none; } .Select-spinner { height: var(--checkout-spinner-size); margin-top: calc(var(--checkout-spinner-size)*-.5); pointer-events: none; position: absolute; right: var(--space-3); top: 50%; width: var(--checkout-spinner-size); z-index: var(--checkout-z-index-field-icon); } .App-Container.is-squareBordered .FormFieldGroup-child .Select-source { border-radius: 0; } .App-Container.is-veryRoundBordered .Select .Select-source { border-top-left-radius: var(--very-rounded); } .App-Container .LinkPaymentForm--linkBranded .Select .Select-source { border-top-left-radius: var(--link-input-rounded); } @media only screen and (min-width:992px) { .App-Container:not(.App-Container--setupMode) .Select-source { font-size: var(--checkout-lg-input-font-size); height: var(--checkout-lg-input-height); } } :root { --tax-id-type-select-flag-size: 16px; --tax-id-type-select-chevron-size: 12px; --checkout-spinner-size: 18px; } .TaxIdTypeSelect { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .TaxIdTypeSelect-source { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--checkout-white); border: 0; box-shadow: var(--border-box-shadow); color: var(--checkout-input-color); font-size: var(--checkout-input-font-size); height: var(--checkout-input-height); line-height: var(--checkout-input-line-height); padding: var(--space-2) var(--space-3); padding-left: var(--space-7); padding-right: var(--space-6); transition: var(--checkout-input-transition); width: 100%; } .TaxIdTypeSelect-source--empty { color: var(--checkout-input-placeholder-color); } .TaxIdTypeSelect-source--empty option { color: var(--checkout-input-color); } .TaxIdTypeSelect-source:focus { box-shadow: var(--focus-border-box-shadow); outline: none; z-index: var(--checkout-z-index-input-is-focused); } .TaxIdTypeSelect--fakeAutofill .TaxIdTypeSelect-source, .TaxIdTypeSelect-source:-webkit-autofill { -webkit-text-fill-color: var(--checkout-input-color); box-shadow: var(--autofill-border-box-shadow); transition: background-color 100000000s,box-shadow 0s linear; } .TaxIdTypeSelect--fakeAutofill .TaxIdTypeSelect-source:focus, .TaxIdTypeSelect-source:-webkit-autofill:focus { box-shadow: var(--autofill-focus-border-box-shadow); transition: var(--checkout-input-transition); } .TaxIdTypeSelect-source:disabled { box-shadow: var(--disabled-border-box-shadow); color: var(--checkout-input-disabled-color); opacity: 1; transition: background-color 100000000s,box-shadow 0s linear; } .TaxIdTypeSelect--fakeAutofill .TaxIdTypeSelect-source:disabled, .TaxIdTypeSelect-source:disabled:-webkit-autofill { -webkit-text-fill-color: var(--checkout-input-disabled-color); } .TaxIdTypeSelect--invalid .TaxIdTypeSelect-source { color: var(--checkout-input-invalid-color); } .TaxIdTypeSelect--invalid .TaxIdTypeSelect-source:not(:focus) { box-shadow: var(--error-border-box-shadow); } .TaxIdTypeSelect--invalid .TaxIdTypeSelect-source--empty { color: var(--checkout-input-placeholder-color); } .TaxIdTypeSelect--invalid .TaxIdTypeSelect-source:-webkit-autofill, .TaxIdTypeSelect--invalid.TaxIdTypeSelect--fakeAutofill { -webkit-text-fill-color: var(--checkout-input-disabled-color); box-shadow: var(--autofill-error-border-box-shadow); } .TaxIdTypeSelect-source::-ms-expand { display: none; } .TaxIdTypeSelect-arrow { height: var(--tax-id-type-select-chevron-size); margin-top: calc(var(--tax-id-type-select-chevron-size)*-.5); right: var(--space-3); width: var(--tax-id-type-select-chevron-size); } .TaxIdTypeSelect-arrow, .TaxIdTypeSelect-flagIcon { pointer-events: none; position: absolute; top: 50%; z-index: var(--checkout-z-index-field-icon); } .TaxIdTypeSelect-flagIcon { height: var(--tax-id-type-select-flag-size); left: var(--space-3); margin-top: calc(var(--tax-id-type-select-flag-size)*-.5); width: var(--tax-id-type-select-flag-size); } .TaxIdTypeSelect-source:disabled+.TaxIdTypeSelect-arrow { display: none; } .TaxIdTypeSelect-spinner { height: var(--checkout-spinner-size); margin-top: calc(var(--checkout-spinner-size)*-.5); pointer-events: none; position: absolute; right: var(--space-3); top: 50%; width: var(--checkout-spinner-size); z-index: var(--checkout-z-index-field-icon); } .App-Container.is-squareBordered .FormFieldGroup-child .TaxIdTypeSelect-source { border-radius: 0; } .App-Container.is-veryRoundBordered .TaxIdTypeSelect .TaxIdTypeSelect-source { border-top-left-radius: var(--very-rounded); } @media only screen and (min-width:992px) { .App-Container:not(.App-Container--setupMode) .TaxIdTypeSelect-source { font-size: var(--checkout-lg-input-font-size); height: var(--checkout-lg-input-height); } } .FormFieldInput { position: relative; } .FormFieldInput-Icon { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 35px; padding-right: var(--space-3); pointer-events: none; position: absolute; right: 0; top: 0; z-index: var(--checkout-z-index-field-icon); } .FormFieldInput.is-select .FormFieldInput-Icon { left: 0; padding-left: var(--space-3); right: auto; } .FormFieldInput.is-select.icon-right .FormFieldInput-Icon { left: auto; padding-right: var(--space-6); right: 0; } .FormFieldInput.has-icon .CheckoutInput { padding-right: calc(var(--checkout-input-padding-horizontal) + 16px); } .FormFieldInput.padding-right-30 .CheckoutInput { padding-right: calc(var(--checkout-input-padding-horizontal) + 30px); } .FormFieldInput.padding-right-48 .CheckoutInput { padding-right: calc(var(--checkout-input-padding-horizontal) + 48px); } .FormFieldInput.padding-right-60 .CheckoutInput { padding-right: calc(var(--checkout-input-padding-horizontal) + 60px); } .FormFieldInput.padding-right-90 .CheckoutInput { padding-right: calc(var(--checkout-input-padding-horizontal) + 90px); } .FormFieldInput.padding-right-120 .CheckoutInput { padding-right: calc(var(--checkout-input-padding-horizontal) + 120px); } .FormFieldInput.is-select.has-icon .CheckoutInput { padding-right: var(--checkout-input-padding-horizontal); } .FormFieldInput-Icons { height: 100%; padding-right: var(--space-2); position: absolute; right: 0; top: 0; } .FormFieldInput-Icons, .FormFieldInput-IconsIcon { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; pointer-events: none; z-index: var(--checkout-z-index-field-icon); } .FormFieldInput-IconsIcon { padding-right: var(--space-1); } .FormFieldInput-Icon.is-disabled img, .FormFieldInput-Icon.is-disabled svg { -webkit-filter: grayscale(.8); filter: grayscale(.8); opacity: .4; } .FormFieldInput-Icon img, .FormFieldInput-Icon svg { opacity: 0; -webkit-transform: scale(var(--field-icon-pre-transition-scale)); -ms-transform: scale(var(--field-icon-pre-transition-scale)); transform: scale(var(--field-icon-pre-transition-scale)); transition: opacity .7s var(--field-icon-transition-curve),-webkit-transform .4s var(--field-icon-transition-curve); transition: transform .4s var(--field-icon-transition-curve),opacity .7s var(--field-icon-transition-curve); transition: transform .4s var(--field-icon-transition-curve),opacity .7s var(--field-icon-transition-curve),-webkit-transform .4s var(--field-icon-transition-curve); } .FormFieldInput-Icon.is-loaded img, .FormFieldInput-Icon.is-loaded svg { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .FormFieldInput-Icon.is-select svg, .FormFieldInput.is-select img { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; transition: none; } .FormFieldInput.is-select.has-icon select { text-indent: 26px; } .FormFieldInput--rounded, .FormFieldInput--rounded input { border-radius: var(--rounded); } .FormFieldInput.is-select.icon-right.has-icon select { text-indent: unset; } .FormFieldGroup-legend { height: 2px; opacity: 0; position: absolute; width: 2px; } .FormFieldGroup--is-empty .FormFieldInput-Icon { display: none; } .FormFieldGroup--is-empty .FormFieldGroup-childLeft .Input:not(:focus), .FormFieldGroup--is-empty .FormFieldGroup-childLeft .Select-source:not(:focus) { box-shadow: var(--error-border-box-shadow); } .LinkPaymentForm--linkBranded .FormFieldGroup--is-empty .FormFieldGroup-childLeft .Input:not(:focus), .LinkPaymentForm--linkBranded .FormFieldGroup--is-empty .FormFieldGroup-childLeft .Select-source:not(:focus) { box-shadow: var(--link-danger-border-box-shadow); } .FormFieldGroup-Fieldset { border: none; margin: var(--space-1) 0 0 0; padding: 0; } .FormFieldGroup-labelContainer { overflow-wrap: anywhere; position: relative; } .FormFieldGroup-container { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; } .FormFieldGroup-container--supportTransitions { -webkit-perspective: 800px; perspective: 800px; } .FormFieldGroup-container--invalid { border-radius: var(--rounded); bottom: 0; box-shadow: var(--error-border-box-shadow); left: 0; pointer-events: none; position: absolute; right: 0; top: 0; } .LinkPaymentForm--linkBranded .FormFieldGroup-container--invalid { box-shadow: var(--link-danger-border-box-shadow); } .FormFieldGroup-child { box-sizing: border-box; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; max-width: 100%; min-width: 0; -webkit-transform-origin: "0%"; -ms-transform-origin: "0%"; transform-origin: "0%"; } .FormFieldGroup-child--width-12 { width: 100%; } .FormFieldGroup-child--width-6 { width: 50%; } .FormFieldGroup-child .CheckoutInput, .FormFieldGroup-child .Select-source { border-radius: 0; } .FormFieldGroup-childTop.FormFieldGroup-childLeft .CheckoutInput, .FormFieldGroup-childTop.FormFieldGroup-childLeft .Select-source { border-top-left-radius: var(--rounded); } .FormFieldGroup-childTop.FormFieldGroup-childRight .CheckoutInput, .FormFieldGroup-childTop.FormFieldGroup-childRight .Select-source { border-top-right-radius: var(--rounded); } .FormFieldGroup-childBottom.FormFieldGroup-childLeft .CheckoutInput, .FormFieldGroup-childBottom.FormFieldGroup-childLeft .Select-source { border-bottom-left-radius: var(--rounded); } .FormFieldGroup-childBottom.FormFieldGroup-childRight .CheckoutInput, .FormFieldGroup-childBottom.FormFieldGroup-childRight .Select-source { border-bottom-right-radius: var(--rounded); } .App-Container.is-veryRoundBordered .FormFieldGroup .CheckoutInput, .App-Container.is-veryRoundBordered .FormFieldGroup .Select-source, .ModalContent--is-veryRoundBordered .FormFieldGroup .CheckoutInput, .ModalContent--is-veryRoundBordered .FormFieldGroup .Select-source { border-radius: 0; } .App-Container.is-veryRoundBordered .FormFieldGroup-childTop.FormFieldGroup-childLeft .CheckoutInput, .App-Container.is-veryRoundBordered .FormFieldGroup-childTop.FormFieldGroup-childLeft .Select-source, .ModalContent--is-veryRoundBordered .FormFieldGroup-childTop.FormFieldGroup-childLeft .CheckoutInput, .ModalContent--is-veryRoundBordered .FormFieldGroup-childTop.FormFieldGroup-childLeft .Select-source { border-top-left-radius: var(--very-rounded); } .App-Container.is-veryRoundBordered .FormFieldGroup-childTop.FormFieldGroup-childRight .CheckoutInput, .App-Container.is-veryRoundBordered .FormFieldGroup-childTop.FormFieldGroup-childRight .Select-source, .ModalContent--is-veryRoundBordered .FormFieldGroup-childTop.FormFieldGroup-childRight .CheckoutInput, .ModalContent--is-veryRoundBordered .FormFieldGroup-childTop.FormFieldGroup-childRight .Select-source { border-top-right-radius: var(--very-rounded); } .App-Container.is-veryRoundBordered .FormFieldGroup-childBottom.FormFieldGroup-childLeft .CheckoutInput, .App-Container.is-veryRoundBordered .FormFieldGroup-childBottom.FormFieldGroup-childLeft .Select-source, .ModalContent--is-veryRoundBordered .FormFieldGroup-childBottom.FormFieldGroup-childLeft .CheckoutInput, .ModalContent--is-veryRoundBordered .FormFieldGroup-childBottom.FormFieldGroup-childLeft .Select-source { border-bottom-left-radius: var(--very-rounded); } .App-Container.is-veryRoundBordered .FormFieldGroup-childBottom.FormFieldGroup-childRight .CheckoutInput, .App-Container.is-veryRoundBordered .FormFieldGroup-childBottom.FormFieldGroup-childRight .Select-source, .ModalContent--is-veryRoundBordered .FormFieldGroup-childBottom.FormFieldGroup-childRight .CheckoutInput, .ModalContent--is-veryRoundBordered .FormFieldGroup-childBottom.FormFieldGroup-childRight .Select-source { border-bottom-right-radius: var(--very-rounded); } .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup .CheckoutInput, .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup .Select-source, .Modal--linkBranded .FormFieldGroup .CheckoutInput, .Modal--linkBranded .FormFieldGroup .Select-source { border-radius: 0; } .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-childTop.FormFieldGroup-childLeft .CheckoutInput, .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-childTop.FormFieldGroup-childLeft .Select-source, .Modal--linkBranded .FormFieldGroup-childTop.FormFieldGroup-childLeft .CheckoutInput, .Modal--linkBranded .FormFieldGroup-childTop.FormFieldGroup-childLeft .Select-source { border-top-left-radius: var(--link-input-rounded); } .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-childTop.FormFieldGroup-childRight .CheckoutInput, .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-childTop.FormFieldGroup-childRight .Select-source, .Modal--linkBranded .FormFieldGroup-childTop.FormFieldGroup-childRight .CheckoutInput, .Modal--linkBranded .FormFieldGroup-childTop.FormFieldGroup-childRight .Select-source { border-top-right-radius: var(--link-input-rounded); } .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-childBottom.FormFieldGroup-childLeft .CheckoutInput, .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-childBottom.FormFieldGroup-childLeft .Select-source, .Modal--linkBranded .FormFieldGroup-childBottom.FormFieldGroup-childLeft .CheckoutInput, .Modal--linkBranded .FormFieldGroup-childBottom.FormFieldGroup-childLeft .Select-source { border-bottom-left-radius: var(--link-input-rounded); } .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-childBottom.FormFieldGroup-childRight .CheckoutInput, .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-childBottom.FormFieldGroup-childRight .Select-source, .Modal--linkBranded .FormFieldGroup-childBottom.FormFieldGroup-childRight .CheckoutInput, .Modal--linkBranded .FormFieldGroup-childBottom.FormFieldGroup-childRight .Select-source { border-bottom-right-radius: var(--link-input-rounded); } .FormFieldGroup-singleChild { /* !important reason: legacy */ border-radius: var(--rounded)!important; } .App-Container.is-squareBordered .FormFieldGroup-singleChild { /* !important reason: legacy */ border-radius: 0!important; } .App-Container.is-veryRoundBordered .FormFieldGroup-singleChild { /* !important reason: legacy */ border-radius: var(--very-rounded)!important; } .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-singleChild { } .FormFieldGroup-bottomChild { /* !important reason: legacy */ border-bottom-left-radius: var(--rounded)!important; /* !important reason: legacy */ border-bottom-right-radius: var(--rounded)!important; } .App-Container.is-veryRoundBordered .FormFieldGroup-bottomChild { /* !important reason: legacy */ border-bottom-left-radius: var(--very-rounded)!important; /* !important reason: legacy */ border-bottom-right-radius: var(--very-rounded)!important; /* !important reason: legacy */ border-top-left-radius: 0!important; /* !important reason: legacy */ border-top-right-radius: 0!important; } .App-Container .LinkPaymentForm--linkBranded .FormFieldGroup-bottomChild { /* !important reason: legacy */ border-bottom-right-radius: var(--link-input-rounded)!important; /* !important reason: legacy */ border-top-left-radius: 0!important; /* !important reason: legacy */ border-top-right-radius: 0!important; } .App-Container.is-squareBordered .FormFieldGroup-bottomChild { /* !important reason: legacy */ border-radius: 0!important; } @-webkit-keyframes drawCheckmark { 0% { stroke-dashoffset: 28px; } 15% { stroke-dashoffset: 28px; -webkit-animation-timing-function: cubic-bezier(1,0,0,1); animation-timing-function: cubic-bezier(1,0,0,1); } 55% { stroke-dashoffset: 0px; } to { stroke-dashoffset: 0px; } } @keyframes drawCheckmark { 0% { stroke-dashoffset: 28px; } 15% { stroke-dashoffset: 28px; -webkit-animation-timing-function: cubic-bezier(1,0,0,1); animation-timing-function: cubic-bezier(1,0,0,1); } 55% { stroke-dashoffset: 0px; } to { stroke-dashoffset: 0px; } } @-webkit-keyframes checkmarkCircleShimmer { 0% { -webkit-transform: translate(24px,24px) rotate(-35deg); transform: translate(24px,24px) rotate(-35deg); } 15% { -webkit-animation-timing-function: cubic-bezier(1,0,0,1); animation-timing-function: cubic-bezier(1,0,0,1); -webkit-transform: translate(24px,24px) rotate(-35deg); transform: translate(24px,24px) rotate(-35deg); } 75% { -webkit-transform: translate(24px,24px) rotate(325deg); transform: translate(24px,24px) rotate(325deg); } to { -webkit-transform: translate(24px,24px) rotate(325deg); transform: translate(24px,24px) rotate(325deg); } } @keyframes checkmarkCircleShimmer { 0% { -webkit-transform: translate(24px,24px) rotate(-35deg); transform: translate(24px,24px) rotate(-35deg); } 15% { -webkit-animation-timing-function: cubic-bezier(1,0,0,1); animation-timing-function: cubic-bezier(1,0,0,1); -webkit-transform: translate(24px,24px) rotate(-35deg); transform: translate(24px,24px) rotate(-35deg); } 75% { -webkit-transform: translate(24px,24px) rotate(325deg); transform: translate(24px,24px) rotate(325deg); } to { -webkit-transform: translate(24px,24px) rotate(325deg); transform: translate(24px,24px) rotate(325deg); } } .CheckSuccess-checkGroup { -webkit-animation: fadeIn 1s linear both; animation: fadeIn 1s linear both; } .CheckSuccess-check { -webkit-animation: drawCheckmark 1s linear both; animation: drawCheckmark 1s linear both; } .CheckSuccess-circle { -webkit-animation: checkmarkCircleShimmer 1s linear both,drawCircle 1s linear both; animation: checkmarkCircleShimmer 1s linear both,drawCircle 1s linear both; } @-webkit-keyframes changeCircleToPink { 0% { stroke: #24b47e; } 65% { stroke: #24b47e; -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 72.5% { stroke: #ff5996; } to { stroke: #ff5996; } } @keyframes changeCircleToPink { 0% { stroke: #24b47e; } 65% { stroke: #24b47e; -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 72.5% { stroke: #ff5996; } to { stroke: #ff5996; } } @-webkit-keyframes drawCircle { 0% { stroke-dashoffset: 145px; } 8.35% { stroke-dashoffset: 145px; -webkit-animation-timing-function: cubic-bezier(1,0,0,1); animation-timing-function: cubic-bezier(1,0,0,1); } 38.35% { stroke-dashoffset: 0px; } to { stroke-dashoffset: 0px; } } @keyframes drawCircle { 0% { stroke-dashoffset: 145px; } 8.35% { stroke-dashoffset: 145px; -webkit-animation-timing-function: cubic-bezier(1,0,0,1); animation-timing-function: cubic-bezier(1,0,0,1); } 38.35% { stroke-dashoffset: 0px; } to { stroke-dashoffset: 0px; } } @-webkit-keyframes rotateHeartLeft { 0% { -webkit-transform: translate(24px,24px) rotate(0); transform: translate(24px,24px) rotate(0); } 57% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: translate(24px,24px) rotate(0); transform: translate(24px,24px) rotate(0); } 60.85% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: translate(24px,24px) rotate(30deg); transform: translate(24px,24px) rotate(30deg); } 68.35% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: translate(24px,24px) rotate(-90deg); transform: translate(24px,24px) rotate(-90deg); } 72.5% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: translate(24px,24px) rotate(-45deg); transform: translate(24px,24px) rotate(-45deg); } 75.85% { -webkit-transform: translate(24px,24px) rotate(-60deg); transform: translate(24px,24px) rotate(-60deg); } to { -webkit-transform: translate(24px,24px) rotate(-60deg); transform: translate(24px,24px) rotate(-60deg); } } @keyframes rotateHeartLeft { 0% { -webkit-transform: translate(24px,24px) rotate(0); transform: translate(24px,24px) rotate(0); } 57% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: translate(24px,24px) rotate(0); transform: translate(24px,24px) rotate(0); } 60.85% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: translate(24px,24px) rotate(30deg); transform: translate(24px,24px) rotate(30deg); } 68.35% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: translate(24px,24px) rotate(-90deg); transform: translate(24px,24px) rotate(-90deg); } 72.5% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: translate(24px,24px) rotate(-45deg); transform: translate(24px,24px) rotate(-45deg); } 75.85% { -webkit-transform: translate(24px,24px) rotate(-60deg); transform: translate(24px,24px) rotate(-60deg); } to { -webkit-transform: translate(24px,24px) rotate(-60deg); transform: translate(24px,24px) rotate(-60deg); } } @-webkit-keyframes rotateHeartRight { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 60.85% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: rotate(0); transform: rotate(0); } 72.5% { -webkit-transform: rotate(60deg); transform: rotate(60deg); } to { -webkit-transform: rotate(60deg); transform: rotate(60deg); } } @keyframes rotateHeartRight { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 60.85% { -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); -webkit-transform: rotate(0); transform: rotate(0); } 72.5% { -webkit-transform: rotate(60deg); transform: rotate(60deg); } to { -webkit-transform: rotate(60deg); transform: rotate(60deg); } } @-webkit-keyframes fadeInHeart { 0% { opacity: 0; } 7% { opacity: 0; } 8% { opacity: 1; } to { opacity: 1; } } @keyframes fadeInHeart { 0% { opacity: 0; } 7% { opacity: 0; } 8% { opacity: 1; } to { opacity: 1; } } @-webkit-keyframes changeHeartToPink { 0% { stroke: #24b47e; } 65% { stroke: #24b47e; -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 72.5% { stroke: #ff5996; } to { stroke: #ff5996; } } @keyframes changeHeartToPink { 0% { stroke: #24b47e; } 65% { stroke: #24b47e; -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 72.5% { stroke: #ff5996; } to { stroke: #ff5996; } } @-webkit-keyframes drawCheckThenTransformToHeart { 0% { d: path("M-10,1.5C-10,1.5,-10,1.51,-10,1.51C-10,1.51,-10,1.523,-10,1.523C-10,1.523,-10,1.543,-10,1.543C-10,1.543,-10,1.562,-10,1.562C-10,1.562,-10,1.531,-10,1.531C-10,1.531,-10,1.5,-10,1.5"); } 8.35% { d: path("M-10,1.5C-10,1.5,-10,1.51,-10,1.51C-10,1.51,-10,1.523,-10,1.523C-10,1.523,-10,1.543,-10,1.543C-10,1.543,-10,1.562,-10,1.562C-10,1.562,-10,1.531,-10,1.531C-10,1.531,-10,1.5,-10,1.5"); -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 11.65% { d: path("M-10,1.5C-10,1.5,-8.984,2.438,-8.984,2.438C-8.984,2.438,-7.562,3.75,-7.562,3.75C-7.562,3.75,-5.531,5.625,-5.531,5.625C-5.531,5.625,-3.5,7.5,-3.5,7.5C-3.5,7.5,-3.5,7.5,-3.5,7.5C-3.5,7.5,-3.5,7.5,-3.5,7.5"); -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 17.5% { d: path("M-10,1.5C-10,1.5,-8.984,2.438,-8.984,2.438C-8.984,2.438,-7.562,3.75,-7.562,3.75C-7.562,3.75,-5.531,5.625,-5.531,5.625C-5.531,5.625,-3.5,7.5,-3.5,7.5C-3.5,7.5,3.234,0.985,3.234,0.985C3.234,0.985,9.969,-5.531,9.969,-5.531"); -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); } 65% { d: path("M-10,1.5C-10,1.5,-7.028,4.243,-7.028,4.243C-7.028,4.243,-5.557,5.602,-5.557,5.602C-5.557,5.602,-3.5,7.5,-3.5,7.5C-3.5,7.5,-1.251,5.324,-1.251,5.324C-1.251,5.324,0.063,4.053,0.063,4.053C0.063,4.053,9.969,-5.531,9.969,-5.531"); -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 72.5% { d: path("M-0.178,-6.108C-0.178,-6.108,-2.178,-10.108,-6.174,-10.111C-10.155,-10.114,-13.175,-6.109,-13.176,-2.101C-13.178,5.891,-2.178,12.892,-0.178,12.892C1.822,12.892,12.821,5.892,12.813,-2.096C12.809,-6.108,9.744,-10.096,5.806,-10.102C1.822,-10.108,-0.022,-6.14,-0.022,-6.14"); -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 77.5% { d: path("M-0.178,-6.108C-0.178,-6.108,-2.178,-10.108,-6.174,-10.111C-10.155,-10.114,-13.175,-6.109,-13.176,-2.101C-13.178,5.891,-2.178,12.892,-0.178,12.892C1.822,12.892,12.821,5.892,12.813,-2.096C12.809,-6.108,9.744,-10.096,5.806,-10.102C1.822,-10.108,-0.022,-6.14,-0.022,-6.14"); } to { d: path("M-0.178,-6.108C-0.178,-6.108,-2.178,-10.108,-6.174,-10.111C-10.155,-10.114,-13.175,-6.109,-13.176,-2.101C-13.178,5.891,-2.178,12.892,-0.178,12.892C1.822,12.892,12.821,5.892,12.813,-2.096C12.809,-6.108,9.744,-10.096,5.806,-10.102C1.822,-10.108,-0.022,-6.14,-0.022,-6.14"); } } @keyframes drawCheckThenTransformToHeart { 0% { d: path("M-10,1.5C-10,1.5,-10,1.51,-10,1.51C-10,1.51,-10,1.523,-10,1.523C-10,1.523,-10,1.543,-10,1.543C-10,1.543,-10,1.562,-10,1.562C-10,1.562,-10,1.531,-10,1.531C-10,1.531,-10,1.5,-10,1.5"); } 8.35% { d: path("M-10,1.5C-10,1.5,-10,1.51,-10,1.51C-10,1.51,-10,1.523,-10,1.523C-10,1.523,-10,1.543,-10,1.543C-10,1.543,-10,1.562,-10,1.562C-10,1.562,-10,1.531,-10,1.531C-10,1.531,-10,1.5,-10,1.5"); -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 11.65% { d: path("M-10,1.5C-10,1.5,-8.984,2.438,-8.984,2.438C-8.984,2.438,-7.562,3.75,-7.562,3.75C-7.562,3.75,-5.531,5.625,-5.531,5.625C-5.531,5.625,-3.5,7.5,-3.5,7.5C-3.5,7.5,-3.5,7.5,-3.5,7.5C-3.5,7.5,-3.5,7.5,-3.5,7.5"); -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 17.5% { d: path("M-10,1.5C-10,1.5,-8.984,2.438,-8.984,2.438C-8.984,2.438,-7.562,3.75,-7.562,3.75C-7.562,3.75,-5.531,5.625,-5.531,5.625C-5.531,5.625,-3.5,7.5,-3.5,7.5C-3.5,7.5,3.234,0.985,3.234,0.985C3.234,0.985,9.969,-5.531,9.969,-5.531"); -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); } 65% { d: path("M-10,1.5C-10,1.5,-7.028,4.243,-7.028,4.243C-7.028,4.243,-5.557,5.602,-5.557,5.602C-5.557,5.602,-3.5,7.5,-3.5,7.5C-3.5,7.5,-1.251,5.324,-1.251,5.324C-1.251,5.324,0.063,4.053,0.063,4.053C0.063,4.053,9.969,-5.531,9.969,-5.531"); -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 72.5% { d: path("M-0.178,-6.108C-0.178,-6.108,-2.178,-10.108,-6.174,-10.111C-10.155,-10.114,-13.175,-6.109,-13.176,-2.101C-13.178,5.891,-2.178,12.892,-0.178,12.892C1.822,12.892,12.821,5.892,12.813,-2.096C12.809,-6.108,9.744,-10.096,5.806,-10.102C1.822,-10.108,-0.022,-6.14,-0.022,-6.14"); -webkit-animation-timing-function: cubic-bezier(.8,0,.6,1); animation-timing-function: cubic-bezier(.8,0,.6,1); } 77.5% { d: path("M-0.178,-6.108C-0.178,-6.108,-2.178,-10.108,-6.174,-10.111C-10.155,-10.114,-13.175,-6.109,-13.176,-2.101C-13.178,5.891,-2.178,12.892,-0.178,12.892C1.822,12.892,12.821,5.892,12.813,-2.096C12.809,-6.108,9.744,-10.096,5.806,-10.102C1.822,-10.108,-0.022,-6.14,-0.022,-6.14"); } to { d: path("M-0.178,-6.108C-0.178,-6.108,-2.178,-10.108,-6.174,-10.111C-10.155,-10.114,-13.175,-6.109,-13.176,-2.101C-13.178,5.891,-2.178,12.892,-0.178,12.892C1.822,12.892,12.821,5.892,12.813,-2.096C12.809,-6.108,9.744,-10.096,5.806,-10.102C1.822,-10.108,-0.022,-6.14,-0.022,-6.14"); } } .ProductSummaryButton { -webkit-tap-highlight-color: transparent; background-color: rgba(255,255,255,.1); border: 0; border-radius: var(--rounded); cursor: pointer; height: var(--button-height); outline: none; overflow: hidden; padding: var(--space-3); position: relative; transition: all var(--default-transition),box-shadow .08s ease-in; } .App-Container.is-squareBordered .ProductSummaryButton { border-radius: 0; } .App-Container.is-veryRoundBordered .ProductSummaryButton { border-radius: var(--very-rounded-button); } .ProductSummaryButton-grayBackground { background-color: rgba(26,26,26,.05); } .ProductSummaryButton-labelBlack { color: var(--checkout-black); } .ProductSummaryButton-labelWhite { color: var(--checkout-white); } @media only screen and (max-width:991.98px) { .ProductSummaryButton { width: 100%; } } .ProductSummaryButton:disabled { cursor: default; } .ProductSummaryDescription { margin-bottom: var(--space-1); word-break: break-word; } .ProductSummaryDescription.has-siblingDescription { margin-bottom: var(--space-4); } @media only screen and (min-width:992px) { .App--multiItem .ProductSummaryDescription--singleItem { display: none; } } .ProductImage-container { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 120px; position: relative; text-align: center; } .ProductImage-image { border-radius: var(--rounded); max-height: 120px; max-width: 100%; } .App-Container.is-squareBordered .ProductImage-image { border-radius: 0; } .App-Container.is-veryRoundBordered .ProductImage-image { border-radius: var(--very-rounded-image-border); } @media only screen and (min-width:992px) { .App--singleItem .ProductImage-image { max-height: 300px; max-width: 300px; } } .ProductSummary { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; cursor: default; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; text-align: center; } .ProductSummary-name { word-break: break-word; } .ProductSummary-info { -ms-flex-pack: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; width: 100%; } .ProductSummary-productImageContainer { -ms-flex-negative: 0; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-shrink: 0; flex-shrink: 0; margin: 0 var(--space-6) var(--space-4) var(--space-6); } .ProductSummary-info.is-clickable, .ProductSummary-productImageContainer.is-clickable { cursor: pointer; } .ProductSummary-amountsContainer { position: relative; } .ProductSummary-totalAmount { font-size: var(--checkout-product-summary-total-font-default); margin: var(--space-0) 0 3px; } .ProductSummary-totalAmountContainer { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .ProductSummary-taxIcon, .ProductSummary-totalAmountContainer { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; display: -webkit-flex; display: -ms-flexbox; display: flex; } .ProductSummary-taxIcon { margin-bottom: 6px; margin-left: 4px; } @media only screen and (max-width:991.98px) { .ProductSummary-taxIcon { margin-bottom: 8px; } } .ProductSummary-dynamicCurrencyInfo { gap: var(--space-2); margin-top: -8px; } .ProductSummary-taxIconTooltip { z-index: var(--checkout-z-index-tooltip); } .ProductSummary-taxIconTooltipContext { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin-left: var(--space-1); pointer-events: all; -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); } .ProductSummary-changeAmountButton { font-size: var(--checkout-font-size-14); pointer-events: all; } .ProductSummary-changeAmountButtonHidden { pointer-events: none; } .ProductSummary-changeAmountButtonHiddenInCorner, .ProductSummary-totalAmountContainerHidden { left: 0; pointer-events: none; position: absolute; top: 0; } .ProductSummary-totalsWrite { display: -webkit-flex; display: -ms-flexbox; display: flex; left: 0; opacity: 0; pointer-events: all; position: absolute; top: 0; width: 100%; } @media only screen and (min-width:992px) { .ProductSummary-totalsRead { padding-bottom: 4px; } .ProductSummary-totalsWrite { -ms-flex-pack: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; } .ProductSummary-totalsWrite .ProductSummary-taxIconContainer { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 72px; margin-left: var(--space-1); } } .ProductSummary-totalsWrite .FieldError-container { width: 100%; } .ProductSummary-changeAmountInput { font-size: var(--checkout-product-summary-total-font-large); font-weight: var(--checkout-text-font-weight-500); width: 100%; } @media only screen and (max-width:991.98px) { .ProductSummary-changeAmountInput { text-align: center; } .ProductSummary-totalsWrite { -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .ProductSummary-totalsWrite .ProductSummary-taxIconContainer { margin-top: var(--space-1); } } @media only screen and (min-width:992px) { .ProductSummary-changeAmountInput { /* !important reason: legacy */ font-size: var(--checkout-font-size-36)!important; /* !important reason: legacy */ height: 56px!important; } } .is-fontFamily--Inconsolata .ProductSummary-name { font-size: var(--checkout-font-size-17); } .is-fontFamily--Inconsolata .ProductSummary-totalAmount { font-size: var(--checkout-product-summary-total-font-large); } .is-fontFamily--Inconsolata .ProductSummary-description { font-size: var(--checkout-font-size-15); } .is-fontFamily--PTSans .ProductSummary-name { font-size: var(--checkout-font-size-17); } .is-fontFamily--PTSans .ProductSummary-totalAmount { font-size: var(--checkout-product-summary-total-font-large); } .is-fontFamily--PTSans .ProductSummary-description { font-size: var(--checkout-font-size-15); } .is-fontFamily--TitilliumWeb .ProductSummary-name { font-size: var(--checkout-font-size-17); } .is-fontFamily--TitilliumWeb .ProductSummary-totalAmount { font-size: var(--checkout-product-summary-total-font-large); } .is-fontFamily--TitilliumWeb .ProductSummary-description { font-size: var(--checkout-font-size-15); } .is-fontFamily--UbuntuMono .ProductSummary-name { font-size: var(--checkout-font-size-17); } .is-fontFamily--UbuntuMono .ProductSummary-totalAmount { font-size: var(--checkout-product-summary-total-font-large); } .is-fontFamily--UbuntuMono .ProductSummary-description { font-size: var(--checkout-font-size-15); } .ProductSummary { margin-bottom: var(--space-3); } .ProductSummary.is-clickable { margin-bottom: var(--space-4); } .ProductSummary.no-image { margin-bottom: calc(var(--space-4) + 12.5px); } .ProductSummary.no-image.is-clickable { margin-bottom: var(--space-4); } @media only screen and (min-width:992px) { .ProductSummary { -ms-flex-pack: left; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: left; justify-content: left; margin-top: var(--space-6); text-align: left; } .ProductSummary-totalAmount { font-size: var(--checkout-font-size-36); } .ProductSummary-totalAmountContainer { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .ProductSummary-totalAmountContainer.is-clickable { pointer-events: none; } .ProductSummary-detailsPrompt { display: none; } .ProductSummary-info.is-clickable, .ProductSummary-productImageContainer.is-clickable { cursor: default; pointer-events: none; } } .App--singleItem .ProductSummary { margin-top: var(--space-6); } @media only screen and (max-width:991.98px) { .ProductSummary-totalAmountContainer { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .TaxIconBreak { display: none; } } @media only screen and (min-width:992px) { .App--singleItem .ProductSummary { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .App--singleItem .ProductSummary-productImageContainer { -ms-flex-order: 2; height: 300px; margin: var(--space-4) 0; -webkit-order: 2; order: 2; width: 300px; } .App--singleItem .ProductSummary-info { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .App--multiItem .ProductSummary-productImageContainer { display: none; } } .ProductSummary.is-singleColEmbed { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 0; } .ProductSummary.is-singleColEmbed .ProductSummary-productImageContainer { margin: 0 var(--space-4) 0 0; } .ProductSummary.is-singleColEmbed .ProductSummary-imageContainer { -ms-flex-pack: center; -ms-flex-align: center; -ms-flex-preferred-size: auto; -ms-flex-negative: 0; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-basis: auto; flex-basis: auto; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-justify-content: center; justify-content: center; } .ProductSummary.is-singleColEmbed .ProductImage-background { height: var(--checkout-line-item-image-size); position: absolute; -webkit-transform: rotate(4deg) translate(2px,-3px); -ms-transform: rotate(4deg) translate(2px,-3px); transform: rotate(4deg) translate(2px,-3px); width: var(--checkout-line-item-image-size); z-index: 1; } .ProductSummary.is-singleColEmbed .ProductSummary-frontImage { height: var(--checkout-line-item-image-size); position: relative; width: var(--checkout-line-item-image-size); z-index: 2; } .ProductSummary.is-singleColEmbed .ProductSummary-image { border-radius: var(--rounded); max-height: 100%; max-width: 100%; } .App-Container.is-veryRoundBordered .ProductSummary.is-singleColEmbed .ProductSummary-image { border-radius: var(--very-rounded); } .App-Container.is-squareBordered .ProductSummary.is-singleColEmbed .ProductSummary-image { border-radius: 0; } .ProductSummary.is-singleColEmbed .ProductSummary-info { -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; margin-right: auto; text-align: left; width: 100%; } .ProductSummary.is-singleColEmbed .ProductSummary-totalAmountContainer { -ms-flex-pack: start; box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; justify-content: flex-start; } .ProductSummary.is-singleColEmbed .ProductSummary-taxIconTooltipContext { -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } .ProductSummary-buttonsContainer { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: var(--space-3); -webkit-justify-content: center; justify-content: center; margin-top: var(--space-2); } .ProductSummary-buttonsContainerHidden { height: 0; opacity: 0; pointer-events: none; } .ProductSummary-buttonsContainer:empty { margin-top: 0; } .ProductSummary.is-singleColEmbed .ProductSummary-totalsWrite { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .ProductSummary.is-singleColEmbed .ProductSummary-changeAmountInput { text-align: left; } .ProductSummary.is-singleColEmbed .ProductSummary-totalsWrite .ProductSummary-taxIcon { margin: 0; } @media only screen and (min-width:992px) { .ProductSummary-buttonsContainer { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; margin-top: 0; } } .ProductSummary.is-singleColEmbed .ProductSummary-buttonsContainer { -ms-flex-pack: start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--space-2) var(--space-3); -webkit-justify-content: flex-start; justify-content: flex-start; } .ProductSummary.is-singleColEmbed .ProductSummary-buttonsContainer:empty { margin-top: 0; } .ProductSummary.is-singleColEmbed .ProductSummary-changeAmountButton { margin: 0; } .ProductSummary.is-singleColEmbed .ProductSummary-changeAmountButtonContainer .Text { font-size: var(--checkout-font-size-14); } .ProductSummary.is-singleColEmbed .ProductSummary-dynamicCurrencyInfo { padding-top: 0; } .ProductSummary-actionButton { background-color: var(--checkout-gray25); border: 0; border-radius: var(--rounded); color: var(--checkout-black); height: var(--button-height); padding: var(--space-3); } .ProductSummary-actionButton.Button--primary:not(:disabled):hover { background-color: var(--checkout-gray25); box-shadow: inset 0 0 100px 100px rgba(0,0,0,.1); } .ProductSummary-actionButton.is-darkBackground { background-color: var(--checkout-white50); color: var(--checkout-white); } .ProductSummary-actionButton.is-darkBackground.Button--primary:not(:disabled):hover { background-color: var(--checkout-white50); box-shadow: inset 0 0 100px 100px rgba(255,255,255,.1); } .ProductSummary-actionButton:disabled .Text, .ProductSummary-actionButton:disabled svg { opacity: .6; } .App-Container.is-squareBordered .ProductSummary-image { border-radius: 0; } .ProductSummaryTotalAmount .BillingIntervalBreak { display: none; } .ProductSummaryTotalAmount-billingInterval { display: inline-block; } .ProductSummaryTotalAmount-dueToday .TotalDueTodayBreak { display: none; } .ProductSummaryTotalAmount-dueToday { display: inline-block; } .ProductSummaryTotalAmount-addedToNextInvoice .AddedToNextInvoiceBreak { display: none; } .ProductSummaryTotalAmount-addedToNextInvoice { display: inline-block; } @media only screen and (min-width:992px) { .ProductSummaryTotalAmount .BillingIntervalBreak, .ProductSummaryTotalAmount-addedToNextInvoice .AddedToNextInvoiceBreak, .ProductSummaryTotalAmount-dueToday .TotalDueTodayBreak { display: unset; } } @media only screen and (max-width:991.98px) { .ProductSummaryTotalAmount { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } } .OrderSummaryColumn.is-paymentSuccess { display: none; } .OrderSummaryColumn-viewDetailsButton { background-color: var(--checkout-gray25); border: 0; border-radius: var(--rounded); color: var(--checkout-black); height: var(--button-height); padding: var(--space-3); } .OrderSummaryColumn-viewDetailsButton.Button--primary:hover { background-color: var(--checkout-gray25); box-shadow: inset 0 0 100px 100px rgba(0,0,0,.1); } .OrderSummaryColumn-viewDetailsButton.is-darkBackground { background-color: var(--checkout-white50); color: var(--checkout-white); } .OrderSummaryColumn-viewDetailsButton.is-darkBackground.Button--primary:hover { background-color: var(--checkout-white50); box-shadow: inset 0 0 100px 100px rgba(255,255,255,.1); } .OrderSummaryColumn-viewDetailsButton.is-hideDetailsWithImage { margin-left: calc(var(--checkout-line-item-image-size) + var(--space-4)); } .App-Container.is-squareBordered .OrderSummaryColumn-viewDetailsButton { border-radius: 0; } .App-Container.is-veryRoundBordered .OrderSummaryColumn-viewDetailsButton { border-radius: var(--very-rounded-button); } @media only screen and (min-width:992px) { .OrderSummaryColumn.is-paymentSuccess { display: block; } } .OrderSummaryColumn-singleColEmbedded.is-transparent { opacity: 0; } .OrderSummaryColumn-singleColEmbedded.is-animated { opacity: 1; transition: min-height .2s ease-in-out,opacity .1s ease-in-out .2s; } .ConfirmModalContent { margin: var(--space-5) 20px; overflow: hidden; } .ConfirmModalContent-icon { color: rgba(0,0,0,.5); height: var(--space-4); min-width: var(--notice-icon-size); padding-right: var(--space-2); } .ConfirmModalContent--green .ConfirmModalContent-icon { color: var(--notice-icon-color-green); } .ConfirmModalContent--yellow .ConfirmModalContent-icon { color: var(--notice-icon-color-yellow); } .ConfirmModalContent--red .ConfirmModalContent-icon { color: var(--notice-icon-color-red); } .ConfirmModalFooter { height: 48px; margin: var(--space-4) 20px; position: relative; } .ConfirmModalFooter-btnContainer { display: -webkit-flex; display: -ms-flexbox; display: flex; opacity: 1; overflow-x: hidden; padding: var(--space-1); position: absolute; width: 50%; } .ConfirmModalFooter-btn { -ms-flex-positive: 1; -webkit-flex-grow: 1; flex-grow: 1; height: 38px; position: relative; } .ConfirmModalFooter-btn .Button-Icon.Button-Spinner { margin-right: 0; } .ConfirmModalFooter-btn svg { position: absolute; right: var(--space-3); } .ConfirmModalFooter-btn .Button--secondary { height: 39px; } .ConfirmModalFooter-btn--gray:not(:disabled):hover { background-color: var(--checkout-gray25); } .ConfirmModalFooter-btn, .ConfirmModalFooter-btn .Text { transition: all .2s ease; } .ConfirmModalFooter-btn:disabled .Text { opacity: .6; } .AdjustQuantityModal-modal.has-notice .ConfirmModalFooter { margin-top: var(--space-2); } .ConfirmModalHeader-header { border-bottom: 1px solid hsla(0,0%,10%,.1); padding: var(--space-4) 20px; } .ConfirmModalHeader-closeBtn { border-radius: 20px; padding: var(--space-2); } .ConfirmModalHeader-imageContainer { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 32px; -webkit-justify-content: center; justify-content: center; position: relative; width: 32px; } .ConfirmModalHeader-image { border-radius: 4px; max-height: 100%; max-width: 100%; } .ConfirmModalHeader-closeBtn:focus { box-shadow: var(--focus-border-box-shadow); outline: none; } .ConfirmModalHeader-closeBtn .Button-Icon { margin-right: 0; } .ConfirmModal-modal { width: 356px; } .ConfirmModal-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow-y: hidden; padding: var(--space-4) 20px; padding: var(--space-5) 20px var(--space-4); } .ConfirmModal-notice { margin-top: 20px; } @media only screen and (max-width:991.98px) { .ConfirmModal-modal { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; border-bottom-left-radius: 0; border-bottom-right-radius: 0; -webkit-transform: translateY(60%); -ms-transform: translateY(60%); transform: translateY(60%); width: 100%; } .ConfirmModal-modalOverlay:before { -webkit-filter: blur(0); filter: blur(0); } .ConfirmModal-modalOverlay.ModalOverlay--afterOpen:before { opacity: 1; } .ConfirmModal-modal.ModalContent--afterOpen { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .ConfirmModal-modal.ModalContent--beforeClose { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .ConfirmModal-modalOverlay.ModalOverlay--beforeClose:before { opacity: 0; transition-duration: .25s; } .ConfirmModal-modalOverlay.ModalOverlay--beforeClose { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .CrossSellOffer-outerContainer { margin-bottom: 12px; position: relative; width: 100%; } .CrossSellOffer-container { -ms-flex-pack: justify; border: var(--border); border-bottom-left-radius: var(--rounded); border-bottom-right-radius: var(--rounded); -webkit-justify-content: space-between; justify-content: space-between; padding: var(--space-2) var(--space-4); width: 100%; } .CrossSellOffer-innerContainer { width: 100%; } .CrossSellOffer-button { background-color: var(--checkout-gray25); margin-top: var(--space-3); padding: var(--space-2); } .CrossSellOffer-button:disabled { opacity: .6; } .CrossSellOffer-spinner { margin-right: var(--space-1); } .CrossSellOffer-description { -ms-flex-preferred-size: 100%; -webkit-flex: 2 1 max-content; -ms-flex: 2 1 max-content; flex: 2 1 max-content; -webkit-flex-basis: 100%; flex-basis: 100%; } .App-Container.is-veryRoundBordered .CrossSellOffer-container { border-bottom-left-radius: var(--very-rounded); border-bottom-right-radius: var(--very-rounded); } .App-Container.is-squareBordered .CrossSellOffer-clickContainer { border-radius: 0; } .App-Container.is-veryRoundBordered .CrossSellOffer-clickContainer { border-radius: var(--very-rounded); } .CrossSellOffer-imageContainer { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--checkout-line-item-image-size); -webkit-justify-content: center; justify-content: center; width: var(--checkout-line-item-image-size); } .CrossSellOffer-image { border-radius: 4px; max-height: 100%; max-width: 100%; } .CrossSellOffer-productTitle { -ms-flex-preferred-size: min-content; -ms-flex-positive: 1; -webkit-flex-basis: min-content; flex-basis: min-content; -webkit-flex-grow: 1; flex-grow: 1; } .CrossSellOffer-addRemove { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; white-space: nowrap; } .CrossSellOffer-seeMoreLink { margin-left: var(--space-1); text-decoration: underline; } .App-Container.is-squareBordered .CrossSellOffer-image { border-radius: 0; } .App-Container.is-veryRoundBordered .CrossSellOffer-image { border-radius: var(--very-rounded); } .App-Container.is-veryRoundBordered .CrossSellOffer-button { border-radius: var(--very-rounded); padding-left: var(--space-3); padding-right: var(--space-3); } .CrossSellOffer-errorText { color: red; margin-top: 8px; } .App-Container.is-darkBackground .CrossSellOffer-container { border: var(--border-lightBg); } .App-Container.is-darkBackground .CrossSellOffer-errorText { color: #fff; } .App-Container.is-darkBackground .CrossSellOffer-button { background-color: var(--checkout-white25); } @media only screen and (min-width:992px) { .CrossSellOffer-outerContainer { width: calc(100% + 32px); } .CrossSellOffer-container { border-top-left-radius: var(--rounded); border-top-right-radius: var(--rounded); padding: var(--space-4); } .App-Container.is-veryRoundBordered .CrossSellOffer-container { border-radius: var(--very-rounded); } } .UpsellWithCrossSell { border: var(--border); border-radius: 6px; margin-bottom: var(--space-4); margin-top: var(--space-4); max-width: 380px; width: 100%; } .UpsellWithCrossSell .Tabs-TabPanelContainer { background-color: var(--checkout-gray25); border-radius: var(--rounded); border-top: var(--border-darkBg); border-top-left-radius: 0; border-top-right-radius: 0; } .App-Container.is-darkBackground .UpsellWithCrossSell .Tabs-TabPanelContainer { background-color: var(--checkout-lightGray25); border-top: var(--border-lightBg); } .UpsellWithCrossSell .Tabs.is-contenttabs .Tabs-TabListItem--is-selected { color: var(--checkout-gray800); } .UpsellWithCrossSell .Tabs.is-contenttabs .Tabs-TabListItem { color: var(--checkout-gray600); } .App-Container.is-darkBackground .UpsellWithCrossSell .Tabs.is-contenttabs .Tabs-TabListItem--is-selected { color: var(--checkout-white); opacity: 1; } .App-Container.is-darkBackground .UpsellWithCrossSell { border: var(--border-lightBg); } .App-Container.is-darkBackground .UpsellWithCrossSell .CrossSellOffer-container, .App-Container.is-darkBackground .UpsellWithCrossSell .UpsellToggle-clickContainer, .UpsellWithCrossSell .UpsellToggle-clickContainer { border: none; } .UpsellWithCrossSell .UpsellToggle, .UpsellWithCrossSell .UpsellToggle-backgroundContainer, .UpsellWithCrossSell .UpsellToggle-clickContainer:before { border-top-left-radius: 0; border-top-right-radius: 0; } .UpsellWithCrossSell .Tabs-TabPanelContainer { margin-top: 0; } .UpsellWithCrossSell .Tabs.is-mobile .Tabs-TabList { margin-bottom: 0; } .UpsellWithCrossSell .Tabs-TabListItemContent { padding-bottom: 4px; padding-top: 4px; } .UpsellWithCrossSell .Tabs.is-contenttabs { width: 100%; } .UpsellWithCrossSell .Tabs.is-contenttabs .Tabs-TabList>.Tabs-TabListItemContainer:first-of-type { margin-left: 16px; margin-right: 8px; } .UpsellWithCrossSell .Tabs .Tabs-TabList { box-shadow: none; left: 0; margin-left: 0; max-width: 380px; padding-bottom: 0; right: 0; width: 100%; } .UpsellWithCrossSell .CrossSellOffer-outerContainer { left: 0; margin-bottom: 0; width: 100%; } .UpsellOrCrossSellContainer-darkBackground .UpsellWithCrossSell .CrossSellOffer-container { border-top: var(--border-lightBg); } .UpsellWithCrossSell .CrossSellOffer-container { border-bottom: none; border-left: none; border-right: none; } .App-Container.is-darkBackground .UpsellWithCrossSell .Tabs.is-contenttabs .Tabs-TabListItem { color: var(--checkout-white); } .UpsellWithCrossSell .Tabs.is-contenttabs .Tabs-TabListItem:after { background: var(--checkout-gray800); } .App-Container.is-darkBackground .UpsellWithCrossSell .Tabs.is-contenttabs .Tabs-TabListItem:after { background: var(--checkout-white); } .UpsellOrCrossSellContainer-singleColumnView { margin-top: var(--space-4); width: 100%; } .ConnectionsBankPicker-securedByStripeText { padding: 2px 0 4px 6px; } .UsBankAccountRow { margin-top: var(--space-4); position: relative; } .UsBankAccountRow-container { background-color: var(--checkout-gray-light); border-radius: var(--rounded); box-shadow: var(--border-box-shadow); margin: var(--space-1) 0; overflow: hidden; } .UsBankAccountRow-container .UsBankAccountRow-bankIcon { border-radius: var(--space-1); height: var(--space-5); left: 0; margin: 12px 8px 12px 12px; right: 0; width: var(--space-5); } .UsBankAccountRow-container .UsBankAccountRow-displayName, .UsBankAccountRow-container .UsBankAccountRow-last4 { margin-bottom: 0; padding: 16px 0; } .UsBankAccountRow-container .UsBankAccountRow-deleteButton { -webkit-appearance: none; background: transparent; border: 0; border-radius: var(--space-1); cursor: pointer; height: 18.4px; margin: 14.8px 16px; padding: 0; z-index: 100; } .UsBankAccountRow-container .UsBankAccountRow-deleteButton:hover>svg path { fill: hsla(0,0%,10%,.9); } .UsBankAccountRow-container .UsBankAccountRow-deleteButton:focus { box-shadow: 0 0 0 1px rgba(50,151,211,.3),0 1px 1px 0 rgba(0,0,0,.07),0 0 0 4px rgba(50,151,211,.3); outline: none; } .UsBankAccountRow-container .UsBankAccountRow-deleteButton>svg path { fill: hsla(0,0%,10%,.6); } @media print { .UsBankAccountRow-container .UsBankAccountRow-deleteButton { display: none; } } .UsBankAccountRow .ConnectionsBankPicker-securedByStripe { position: absolute; right: var(--space-0); top: var(--space-0); } .Accordion { background-color: var(--checkout-white); border-radius: var(--rounded); box-shadow: var(--border-box-shadow); margin: var(--space-1) 0 0 0; } .Accordion .AccordionItem { border-top: var(--border); } .Accordion .AccordionItem:first-child { border-top: none; } .App-Container.is-squareBordered .Accordion { border-radius: 0; } .App-Container.is-veryRoundBordered .Accordion { border-radius: var(--very-rounded); } .App-Container .LinkPaymentForm--linkBranded .Accordion { border-radius: var(--link-container-rounded); } .LinkPaymentForm--linkBranded .Accordion { box-shadow: var(--link-accordion-border-box-shadow); } .AccordionError { background-color: rgba(220,39,39,.04); border-radius: var(--rounded); margin: var(--space-1) 0; padding: var(--space-1) var(--space-2); } .AccordionError-icon { -ms-flex-preferred-size: 14px; -webkit-flex-basis: 14px; flex-basis: 14px; margin-top: 3px; } .AccordionError-message { -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; margin-left: var(--space-2); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .AccordionButton { background: none; border: 0; cursor: pointer; margin: 0; padding: 0; } .AccordionButton-cancel { border-radius: var(--rounded); margin: calc(var(--space-2)*-1); padding: var(--space-2); position: relative; } .AccordionButton-cancel .Text { position: relative; z-index: var(--checkout-z-index-accordion-item-content); } .AccordionButton-cancel:before { background: transparent; border-radius: var(--rounded); bottom: 0; content: ""; display: block; left: 0; opacity: .2; pointer-events: none; position: absolute; right: 0; top: 0; transition: opacity .15s var(--accordion-item-background-transition-curve),margin .15s var(--accordion-item-background-transition-curve); will-change: transform; z-index: var(--checkout-z-index-accordion-item-background); } @media (hover:hover) { .AccordionButton-cancel:hover:before { background: var(--checkout-gray-light); opacity: .7; } } .AccordionButton-cancel:active:before { margin: var(--accordion-item-button-background-active-margin); opacity: 1; } .App-Container.is-squareBordered .AccordionButton-cancel, .App-Container.is-squareBordered .AccordionButton-cancel:before { border-radius: 0; } .App-Container.is-veryRoundBordered .AccordionButton-cancel, .App-Container.is-veryRoundBordered .AccordionButton-cancel:before { border-radius: var(--very-rounded); } .AccordionButton-expandedClickArea:after { bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; } .AccordionButton-expandedFocusArea:focus-visible { border-radius: var(--rounded); bottom: 0; box-shadow: var(--focus-border-box-shadow); display: block; left: -8px; padding: var(--space-4); position: absolute; right: 0; top: -7px; width: calc(100% + 16px); } .AccordionItemHeader-content { position: relative; z-index: var(--checkout-z-index-accordion-item-content); } .AccordionItemHeader--clickable:before { background: transparent; border-radius: var(--rounded); bottom: 0; content: ""; display: block; left: 0; margin: var(--accordion-item-header-background-margin); opacity: .2; pointer-events: none; position: absolute; right: 0; top: 0; transition: opacity .15s var(--accordion-item-background-transition-curve),margin .15s var(--accordion-item-background-transition-curve); will-change: transform; z-index: var(--checkout-z-index-accordion-item-background); } @media (hover:hover) { .AccordionItemHeader--clickable:hover:before { background: var(--checkout-gray-light); opacity: .7; } } .AccordionItemHeader--clickable:active:before { margin: var(--accordion-item-header-background-active-margin); opacity: 1; } .App-Container.is-squareBordered .AccordionItemHeader--clickable:before { border-radius: 0; } .App-Container.is-veryRoundBordered .AccordionItemHeader--clickable:before { border-radius: var(--very-rounded); } .AccordionItemContent { padding: var(--space-4); width: 100%; } .AccordionItemContent-header { position: relative; } .AccordionItemContent .AccordionButton-expandedClickArea:after { margin: calc(var(--space-4)*-1); padding: var(--space-4); } .AccordionItemContent-body { padding-top: var(--space-3); } .AccordionItemCover { padding: var(--space-4); width: 100%; } .AccordionItemCover-label { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; display: -webkit-flex; display: -ms-flexbox; display: flex; line-height: 18px; width: 25%; } .AccordionItemCover-content { padding: var(--space-2) 0; } .AccordionItemCover .AccordionItem-tooltipIconWrapper { /* !important reason: legacy */ margin-top: -11px!important; } .AccordionItemCover-header { position: relative; } .AccordionItemCover .AccordionButton-expandedClickArea:after { margin: calc(var(--space-4)*-1); padding: var(--space-4); } .AccordionItemCover-titleContainer { min-width: 0; } .AccordionItemCover-actionContainer { margin-left: var(--space-2); } .AccordionItemCover-actionContainer:empty { margin-left: 0; } .AccordionItem { transition: height .3s var(--accordion-item-height-transition-curve); } .AccordionItem.is-expanding { overflow: hidden; } .AccordionItem-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .AccordionItem-tooltipIconWrapper { /* !important reason: legacy */ margin-left: -6px!important; pointer-events: auto; z-index: 1; } .AccordionItem-tooltipIcon { color: var(--checkout-gray400); } .AccordionItem-tooltip .Tooltip-Text { max-width: 300px; min-width: 200px; } .AccordionItem-transitionGroupWrapper { width: 100%; } .p-Logo { -ms-flex-negative: 0; display: block; -webkit-flex-shrink: 0; flex-shrink: 0; } .p-Logo--md { height: 1em; width: auto; } .p-Logo--lg { height: 2em; width: auto; } .p-Logo--xl { height: 3em; width: auto; } :where(.p-Animatable) .p-AsyncLogo { opacity: 0; transition: opacity .4s ease; } .p-AsyncLogo--loaded { opacity: 1; } .p-Logo--light { display: var(--p-logoLightDisplay); } .p-Logo--dark { display: var(--p-logoDarkDisplay); } .p-Tab .p-Logo--light { display: var(--p-logoTabLightDisplay); } .p-Tab .p-Logo--dark { display: var(--p-logoTabDarkDisplay); } .p-Tab--selected .p-Logo--light { display: var(--p-logoTabSelectedLightDisplay); } .p-Tab--selected .p-Logo--dark { display: var(--p-logoTabSelectedDarkDisplay); } .p-Block .p-Logo--light { display: var(--p-logoBlockLightDisplay); } .p-Block .p-Logo--dark { display: var(--p-logoBlockDarkDisplay); } .Divider { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; position: relative; } .Divider hr { background-color: var(--checkout-gray50); border: none; height: 1px; width: 100%; } .Divider-Text { background-color: var(--checkout-white); left: 50%; padding: 0 var(--space-2); position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .BnplLink-Divider { margin-bottom: 24px; } .BnplLink-ContentCard { background-color: var(--checkout-white); border-radius: var(--rounded); box-shadow: var(--border-box-shadow); margin-bottom: var(--space-4); margin-top: 24px; padding-bottom: var(--space-5); padding-top: var(--space-5); width: 100%; } @media print { .BnplLink-ContentCard { background-color: transparent; box-shadow: none; padding: var(--space-4); } } .BnplLink-PayLink { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .BnplLink-PayLinkIcon { margin-left: 4px; -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .BnplLink-AffirmMessage { margin-bottom: var(--space-2); } .BnplLink-ContentCard img.p-Logo--light-visible.p-Logo--light { display: initial; } .BnplLink-KlarnaText .p-Logo--md { height: 1.4em; margin-bottom: -4px; } .BnplLink-LinkShareText { margin-bottom: var(--space-6); } .BnplLink-ContentCard img.p-Logo--light-visible.p-Logo--dark { display: none; } @-webkit-keyframes ClimateProgramBadge-reveal { to { background-position: -1800px 0; } } @keyframes ClimateProgramBadge-reveal { to { background-position: -1800px 0; } } @-webkit-keyframes ClimateProgramBadge-loop { 0% { background-position: 0 -24px; } 25% { background-position: -3600px -24px; } to { background-position: -3600px -24px; } } @keyframes ClimateProgramBadge-loop { 0% { background-position: 0 -24px; } 25% { background-position: -3600px -24px; } to { background-position: -3600px -24px; } } .ClimateProgramBadge-Container { margin-bottom: var(--space-4); padding: var(--space-1); } .ClimateProgramBadge-Container:last-child { margin-bottom: 0; } .ClimateProgramBadge-Icon { height: 24px; margin-right: 16px; margin-top: 4px; /* !important reason: legacy */ padding: 0!important; } .ClimateProgramBadge-IconAnimate { background-position: 0 0; background-size: 3624px 48px; height: 24px; width: 24px; } .ClimateProgramBadge-IconAnimate.is-icon-reveal { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: ClimateProgramBadge-reveal; animation-name: ClimateProgramBadge-reveal; -webkit-animation-timing-function: steps(75); animation-timing-function: steps(75); background-position: 0 0; } .ClimateProgramBadge-IconAnimate.is-icon-loop { -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: ClimateProgramBadge-loop; animation-name: ClimateProgramBadge-loop; -webkit-animation-timing-function: steps(150); animation-timing-function: steps(150); background-position: 0 -24px; } .ClimateProgramBadge-Strong { font-size: 13px; font-weight: 700; } .MobileErrorSummary-container { margin-top: var(--space-2); } .MobileErrorSummary-errorMessageHeading { margin-top: -3px; } :root { --button-success-background-color: #24b47e; --success-checkmark-check-duration: 0.3s; --shimmer-width: 150%; --shimmer-duration: 3s; } .SubmitButton { -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 0; border-radius: var(--rounded); box-shadow: var(--submit-button-shadow); color: var(--checkout-white); cursor: pointer; height: var(--button-height); margin-top: var(--space-3); outline: none; overflow: hidden; padding: 0; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); transition: all var(--default-transition),box-shadow .08s ease-in; width: 100%; } .SubmitButton:disabled { cursor: default; } .SubmitButton-Shimmer { bottom: 0; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; -webkit-transform: translateX(calc(var(--shimmer-width)*-1)); -ms-transform: translateX(calc(var(--shimmer-width)*-1)); transform: translateX(calc(var(--shimmer-width)*-1)); transition: opacity var(--default-transition); width: var(--shimmer-width); } .SubmitButton-Text { left: 0; line-height: var(--button-height); position: absolute; text-align: center; top: 0; transition: all var(--default-transition); width: 100%; } .SubmitButton-IconContainer { height: 100%; left: 0; position: absolute; top: 0; -webkit-transform: translateX(calc(var(--space-4)*-1)); -ms-transform: translateX(calc(var(--space-4)*-1)); transform: translateX(calc(var(--space-4)*-1)); transition: -webkit-transform var(--success-spinner-move-duration) ease; transition: transform var(--success-spinner-move-duration) ease; transition: transform var(--success-spinner-move-duration) ease,-webkit-transform var(--success-spinner-move-duration) ease; width: 100%; } .SubmitButton-Icon { display: -webkit-flex; display: -ms-flexbox; display: flex; opacity: 0; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all var(--default-transition); } .SubmitButton-SpinnerIcon .Icon.Icon--md, .SubmitButton-SpinnerIcon svg { height: var(--spinner-width); width: var(--spinner-width); } .SubmitButton-SpinnerIcon ellipse { stroke-width: 1; stroke-linecap: round; stroke-dasharray: 70; stroke-dashoffset: 30; fill: transparent; -webkit-animation: spinner-spin .6s linear infinite; animation: spinner-spin .6s linear infinite; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .SubmitButton-CheckmarkIcon { left: 50%; position: absolute; top: 50%; -webkit-transform: translateY(calc(-50% + 2px)) translateX(-50%) scale(.6); -ms-transform: translateY(calc(-50% + 2px)) translateX(-50%) scale(.6); transform: translateY(calc(-50% + 2px)) translateX(-50%) scale(.6); } .SubmitButton-CheckmarkIcon path { stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; opacity: 0; } .SubmitButton--clickable:hover, .SubmitButton--complete:hover { background-color: var(--button-hover-background-color); box-shadow: var(--button-hover-shadow); } .SubmitButton--clickable:active, .SubmitButton--complete:active { -webkit-transform: scale(.99); -ms-transform: scale(.99); transform: scale(.99); } .SubmitButton--clickable:focus, .SubmitButton--complete:focus, .SubmitButton--incomplete:focus { box-shadow: var(--button-focus-shadow); } .SubmitButton--incomplete .SubmitButton-Text--current { opacity: .6; } .SubmitButton--complete-Shimmer { -webkit-animation: shimmer-move var(--shimmer-duration) infinite ease; animation: shimmer-move var(--shimmer-duration) infinite ease; opacity: 1; } .SubmitButton--complete:hover.SubmitButton--complete-Shimmer { opacity: .6; } .SubmitButton--success { background-color: var(--button-success-background-color); } .SubmitButton--success .SubmitButton-IconContainer { -webkit-transform: translateX(calc(-50% + var(--spinner-width)/2)); -ms-transform: translateX(calc(-50% + var(--spinner-width)/2)); transform: translateX(calc(-50% + var(--spinner-width)/2)); } .SubmitButton--disabled { box-shadow: none; } .SubmitButton-Text--pre { opacity: 0; -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); } .SubmitButton-Text--post { opacity: 0; -webkit-transform: translateX(-16px); -ms-transform: translateX(-16px); transform: translateX(-16px); } .SubmitButton-Icon--post, .SubmitButton-Icon--pre { opacity: 0; -webkit-transform: translateY(-50%) scale(.9); -ms-transform: translateY(-50%) scale(.9); transform: translateY(-50%) scale(.9); } .SubmitButton-Icon--current { opacity: 1; } .SubmitButton-Icon--post-center { opacity: 1; -webkit-transform: translateY(-50%) scale(1.3); -ms-transform: translateY(-50%) scale(1.3); transform: translateY(-50%) scale(1.3); transition-duration: var(--success-spinner-move-duration); } .SubmitButton-Icon--post-center.SubmitButton-SpinnerIcon ellipse { -webkit-animation: spinner-complete var(--success-spinner-move-duration) ease; animation: spinner-complete var(--success-spinner-move-duration) ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .SubmitButton-CheckmarkIcon--current path { -webkit-animation: checkmark-check var(--success-checkmark-check-duration) ease; animation: checkmark-check var(--success-checkmark-check-duration) ease; -webkit-animation-delay: var(--success-spinner-move-duration); animation-delay: var(--success-spinner-move-duration); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes shimmer-move { 0% { -webkit-transform: translateX(calc(var(--shimmer-width)*-1)); transform: translateX(calc(var(--shimmer-width)*-1)); } to { -webkit-transform: translateX(var(--shimmer-width)); transform: translateX(var(--shimmer-width)); } } @keyframes shimmer-move { 0% { -webkit-transform: translateX(calc(var(--shimmer-width)*-1)); transform: translateX(calc(var(--shimmer-width)*-1)); } to { -webkit-transform: translateX(var(--shimmer-width)); transform: translateX(var(--shimmer-width)); } } @-webkit-keyframes spinner-complete { to { stroke-dashoffset: 0; } } @keyframes spinner-complete { to { stroke-dashoffset: 0; } } @-webkit-keyframes checkmark-check { 0% { stroke-dashoffset: 30; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } } @keyframes checkmark-check { 0% { stroke-dashoffset: 30; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } } .App-Container.is-squareBordered .SubmitButton { border-radius: 0; } .App-Container.is-veryRoundBordered .SubmitButton { border-radius: var(--very-rounded-button); } .SubmitButton.LinkActionButton { background-color: transparent; box-shadow: none; color: var(--link-text-default); overflow: visible; -webkit-transform: none; -ms-transform: none; transform: none; } .SubmitButton .LinkActionButton-text { position: static; } @supports (-webkit-appearance:-apple-pay-button) { .ApplePayButton.ApplePayButton { -webkit-appearance: -apple-pay-button; cursor: pointer; display: inline-block; max-height: 64px; min-height: 32px; width: 100%; } .ApplePayButton--book { -apple-pay-button-type: book; } .ApplePayButton--default { -apple-pay-button-type: plain; } .ApplePayButton--black { -apple-pay-button-style: black; } .ApplePayButton--white { -apple-pay-button-style: white; } } .GooglePayButton { border: 0; cursor: pointer; max-height: 64px; min-height: 32px; position: relative; } .GooglePayButton-logo { background-origin: content-box; background-position: 50%; background-repeat: no-repeat; background-size: contain; bottom: 0; left: 0; padding: 12px 14px; position: absolute; right: 0; top: 0; } .GooglePayButton--dark { background-color: #000; } .GooglePayButton--dark:focus, .GooglePayButton--dark:hover { background-color: #3c4043; } .GooglePayButton--dark:active { background-color: #5f6368; } .GooglePayButton--light { background-color: #fff; } .GooglePayButton--light:focus, .GooglePayButton--light:hover { background-color: #f8f8f8; } .GooglePayButton--light:active { background-color: #fff; } :root { --colorButtonBackground: #00d66f; --colorButtonBackgroundHover: #5eee97; --colorButtonBackgroundActiveAndFocus: #00c767; --colorButtonText: #011e0f; } .LinkButton { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--colorButtonBackground); border: 0; cursor: pointer; font-family: -apple-system,system-ui,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; max-height: 64px; min-height: 32px; padding: 0; position: relative; transition: background-color .15s ease; width: 100%; } .LinkButton:hover { background-color: var(--colorButtonBackgroundHover); } .LinkButton:active, .LinkButton:focus { background-color: var(--colorButtonBackgroundActiveAndFocus); } .LinkButton-inner { color: var(--colorButtonText); height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .LinkButton-inner, .LinkButton-logo { -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; } .LinkButton-logo, .LinkButton-logoSvg { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .LinkButton-logoSvg { display: block; height: .88em; } .LinkButton-logo, .LinkButton-text { font-size: 15.84px; font-weight: 500; } .LinkButton-text { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 22.88px; white-space: nowrap; } .LinkButton--loading .LinkButton-logo, .LinkButton--loading .LinkButton-text { opacity: 0; } .LinkButton--hideText .LinkButton-text { opacity: 0; pointer-events: none; position: absolute; visibility: hidden; } .LinkButton-logo--inlineAdjustment, .LinkButton-textContent, .LinkButton-textMessage { -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; } .LinkButton-textContent { gap: 7.04px; } .LinkButton-textMessage { gap: 5.28px; } .LinkButton-logoSvg--shownWhenTextHidden { opacity: 0; pointer-events: none; position: absolute; visibility: hidden; } .LinkButton--hideText .LinkButton-logoSvg--shownWhenTextHidden { opacity: 1; visibility: visible; } .EmbeddedPaymentRequestButton { border-radius: var(--rounded); opacity: 1; transition: opacity .8s; } .EmbeddedPaymentRequestButton--hidden { opacity: 0; } .EmbeddedPaymentRequestButton button { border-radius: var(--rounded); height: var(--button-height); overflow: hidden; width: 100%; } .EmbeddedPaymentRequestButton:has(>button:focus) { border-radius: var(--rounded); box-shadow: var(--focus-border-box-shadow); outline: none; z-index: var(--checkout-z-index-input-is-focused); } .App-Container.is-veryRoundBordered .EmbeddedPaymentRequestButton button, .App-Container.is-veryRoundBordered .EmbeddedPaymentRequestButton button:focus, .ModalContent--is-veryRoundBordered .EmbeddedPaymentRequestButton button, .ModalContent--is-veryRoundBordered .EmbeddedPaymentRequestButton button:focus { border-radius: var(--very-rounded-button); } .App-Container.is-squareBordered .EmbeddedPaymentRequestButton button, .App-Container.is-squareBordered .EmbeddedPaymentRequestButton button:focus, .ModalContent--is-squareBordered .EmbeddedPaymentRequestButton button, .ModalContent--is-squareBordered .EmbeddedPaymentRequestButton button:focus { border-radius: 0; } .FakeWalletButton { -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; background-color: #000; border: 0; border-radius: 6px; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 44px; -webkit-justify-content: center; justify-content: center; margin-bottom: 16px; } .FakeWalletButton--googlePay svg { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .ElementsPaymentRequestButton>button { height: var(--button-height); width: 100%; } .ElementsPaymentRequestButton.StripeElement--focus { border-radius: var(--rounded); box-shadow: var(--focus-border-box-shadow); outline: none; z-index: var(--checkout-z-index-input-is-focused); } .App-Container.is-veryRoundBordered .ElementsPaymentRequestButton.StripeElement--focus, .ModalContent--is-veryRoundBordered .ElementsPaymentRequestButton.StripeElement--focus { border-radius: var(--very-rounded-button); } .App-Container.is-squareBordered .ElementsPaymentRequestButton.StripeElement--focus, .ModalContent--is-squareBordered .ElementsPaymentRequestButton.StripeElement--focus { border-radius: 0; } .ConfirmPaymentButton-tooltip .Tooltip-Text { max-width: 300px; width: 300px; } .ConfirmPaymentButton-Submit { margin-top: var(--space-4); width: 100%; } .ConfirmPaymentButton-CustomText { margin-bottom: var(--space-4); } .ConfirmPaymentButton-CustomText--border { border-top: 1px solid hsla(0,0%,10%,.1); padding-top: var(--space-5); } :root { --checkout-checkbox-height: 16px; --checkout-checkbox-offset: 4px; } .CheckboxField .Checkbox { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; display: -webkit-flex; display: -ms-flexbox; display: flex; } .Checkbox-InputContainer { margin-right: var(--space-3); position: relative; top: var(--checkout-checkbox-offset); } .Checkbox-StyledInput { background-color: transparent; border-radius: var(--space-0); box-shadow: var(--border-box-shadow); cursor: pointer; display: block; height: var(--checkout-checkbox-height); min-width: var(--checkout-checkbox-height); pointer-events: none; transition: var(--checkout-input-transition); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: var(--checkout-checkbox-height); } .LinkPaymentForm--linkBranded .Checkbox-StyledInput { box-shadow: var(--link-default-border-box-shadow); } .Checkbox-Input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; box-shadow: none; cursor: pointer; height: var(--checkout-checkbox-height); opacity: 0; outline: none; position: absolute; top: 0; width: var(--checkout-checkbox-height); } .Checkbox-Label { cursor: pointer; } .Checkbox-Label, .Checkbox-NonclickableLabel { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Checkbox-ErrorMessage { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: var(--space-3); } .CheckboxField--disabled .Checkbox-ErrorMessage { opacity: .5; } .CheckboxField--disabled .Checkbox-Description, .CheckboxField--disabled .Checkbox-Label { color: var(--checkout-input-disabled-color); } .CheckboxField--invalid .Checkbox-StyledInput { box-shadow: var(--error-border-box-shadow); } .LinkPaymentForm--linkBranded .CheckboxField--invalid .Checkbox-StyledInput { box-shadow: var(--link-danger-border-box-shadow); } .CheckboxField--disabled .Checkbox-StyledInput, .CheckboxField--disabled .Checkbox-StyledInput .Checkbox-tickSvg { cursor: default; pointer-events: none; } .CheckboxField--disabled .Checkbox-StyledInput:after { background: #fff; bottom: -1px; content: " "; left: -1px; opacity: .5; pointer-events: auto; position: absolute; right: -4px; top: -4px; } .Checkbox-StyledInput .Checkbox-tickSvg { display: none; } .CheckboxField--checked .Checkbox-StyledInput .Checkbox-tickSvg { display: block; position: absolute; top: -4px; } .Checkbox-Input:focus~.Checkbox-StyledInput { box-shadow: var(--focus-border-box-shadow); z-index: var(--checkout-z-index-input-is-focused); } .LinkPaymentForm--linkBranded .Checkbox-Input:focus~.Checkbox-StyledInput { box-shadow: var(--link-default-focus-border-box-shadow); } .TermsOfServiceConsentCheckbox { margin-top: var(--space-2); } .TermsOfServiceConsentCheckbox-customMessageLink { color: inherit; font-size: inherit; } .TermsOfServiceConsentCheckbox .Checkbox-ErrorMessage .Icon { margin-left: 2px; margin-right: 0; } .BacsDebitGurantee { text-align: left; } .BacsDebitGurantee-bacsIcon { -webkit-flex: none; -ms-flex: none; flex: none; margin-left: var(--space-6); opacity: .3; width: 90px; } .ConfirmSubscriptionTerms-microdeposit-explanation, .UsBankAccountTerms-microdeposit-explanation { margin-bottom: var(--space-4); } .ConfirmTerms { line-height: 17px; text-align: left; } .ConfirmTerms .Link { white-space: nowrap; } .ConfirmTerms--setup { text-align: left; } .ConfirmTerms--extraTopSpacing { margin-top: var(--space-2); } .LinkTransientExitButton:disabled { opacity: var(--disabled-opacity); } .ConfirmPayment-PostSubmit { display: -ms-grid; display: grid; } .ConfirmPayment-PostSubmit>* { margin-top: var(--space-3); } .ConfirmPayment-PostSubmit>:empty { margin-top: calc(var(--space-3)*-1); } .ConfirmPayment-PostSubmit .LinkTransientExitButton-Container { margin-bottom: var(--space-2); margin-top: var(--space-5); } .ConfirmPayment-PostSubmit .ClimateProgramBadge-Container { border-bottom: none; border-top: var(--border); margin-top: var(--space-4); padding-top: var(--space-5); } .ConfirmPayment--linkBranded .ConfirmPaymentButton-Error, .ConfirmPayment--linkBranded .LinkTransientExitButton, .ConfirmPayment--linkBranded .SubmitButton { font-family: var(--link-text-font-family); } .ConfirmPayment--linkBranded .ConfirmPaymentButton-Error { color: var(--link-text-danger); } .ConfirmPayment--linkBranded .SubmitButton-Text { font-size: var(--link-text-font-size-body-emphasized); font-weight: var(--link-text-font-weight-body-emphasized); line-height: var(--link-button-height); } .ConfirmPayment--linkBranded .LinkTransientExitButton .Text { font-size: var(--link-text-font-size-body); font-weight: var(--link-text-font-weight-body); line-height: var(--link-text-line-height-body); } .ConfirmPayment--linkBranded .ConfirmPayment-PostSubmit .LinkTransientExitButton-Container { margin: var(--space-3) 0; } .ConfirmPayment--linkMultistepShippingChange.ConfirmPayment--linkBranded .SubmitButton--incomplete .LinkActionButton-background, .ConfirmPayment--linkMultistepShippingChange.ConfirmPayment--linkBranded .SubmitButton--incomplete:active .LinkActionButton-background { background-color: #f6f8fa; } .ConfirmPayment--linkBranded .LinkTransientExitButton-label { } .ConfirmPayment .SubmitButton { transition: box-shadow .08s ease-in,-webkit-transform .15s ease; transition: transform .15s ease,box-shadow .08s ease-in; transition: transform .15s ease,box-shadow .08s ease-in,-webkit-transform .15s ease; } .ConfirmPayment .SubmitButton-Icon, .ConfirmPayment .SubmitButton-Text { transition: none; } .ShippingAsBillingCheckbox-tooltipIcon { color: var(--checkout-gray400); display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin-left: var(--space-1); } .CustomFieldsFormBlock-title { margin-top: var(--space-3); } .ReadOnlyForm { background-color: var(--checkout-gray-light); border-radius: var(--rounded); margin: var(--space-1) 0 0 0; } .ReadOnlyForm .ReadOnlyFormField { border-top: var(--border); } .ReadOnlyForm .ReadOnlyFormField:first-child { border-top: none; } .ReadOnlyForm--withShadow { box-shadow: var(--border-box-shadow); overflow: hidden; } .ReadOnlyForm--shadowless { box-shadow: var(--border-box-shadowless); } .ReadOnlyForm--topChild { /* !important reason: legacy */ border-bottom-right-radius: 0!important; } .App-Container.App-Container.is-veryRoundBordered .ReadOnlyForm { border-radius: var(--very-rounded); } .App-Container.App-Container.is-squareBordered .ReadOnlyForm { border-radius: 0; } .App-Container.App-Container .LinkPaymentForm--linkBranded .ReadOnlyForm { border-radius: var(--link-input-rounded); } .ReadOnlyFormField-contentContainer { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .ReadOnlyFormField-container { padding: var(--space-3); } .ReadOnlyFormField.is-clickable { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ReadOnlyFormField.is-clickable:hover { background: rgba(0,0,0,.01); } .ReadOnlyFormField-label { color: var(--checkout-gray500); font-size: 14px; width: 30%; } .ReadOnlyFormField-titleContainer { -ms-flex-pack: justify; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .ReadOnlyFormField-action { -ms-flex-preferred-size: auto; -ms-flex-negative: 0; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-basis: auto; flex-basis: auto; -webkit-flex-shrink: 0; flex-shrink: 0; font-size: 12px; } .ReadOnlyFormField-title { color: var(--checkout-gray800); font-size: 14px; overflow: hidden; padding-right: var(--space-2); text-overflow: ellipsis; white-space: nowrap; } .ReadOnlyFormField-content { -webkit-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } .ReadOnlyFormField-description { color: var(--checkout-gray400); font-size: 14px; } .ReadOnlyFormField-error { -ms-flex-pack: start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-color: rgba(220,39,39,.04); border-radius: var(--rounded); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; margin-top: var(--space-2); padding: var(--space-2); width: 100%; } .ReadOnlyFormField-error .Text { -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; margin-left: var(--space-2); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .ReadOnlyFormField-error .Icon { -ms-flex-preferred-size: 12px; -webkit-flex-basis: 12px; flex-basis: 12px; } .ReadOnlyFormField-additionalContent { margin-top: var(--space-3); } .PromotionalConsentCheckbox { margin-top: var(--space-2); } .PromotionalConsentCheckbox.is-indented { padding-left: var(--space-2); } .LinkLogo--brand, .LinkLogo--primary { fill: var(--link-text-default); } .LinkLogo--secondary { fill: var(--checkout-gray500); } .LinkLogo--primary .LinkLogo-icon, .LinkLogo--secondary .LinkLogo-icon { fill: var(--link-color-neutral-0); } .LinkLogo--brand .LinkLogo-iconBackground { fill: var(--link-icon-brand); } .LinkLogo--brand .LinkLogo-icon { fill: var(--link-text-default); } .LinkLogo--xs { height: var(--link-logo-xs); } .LinkLogo--sm { height: var(--link-logo-sm); } .LinkLogo--md { height: var(--link-logo-md); } .LearnMoreInfoModalContent-header { padding-bottom: var(--space-5); width: 100%; } .LearnMoreInfoModalContent-header-linkLogo { --link-logo-md: 24px; } .LearnMoreInfoModalContent-header-linkLogo.LinkLogo--md { display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--link-logo-md); } .LearnMoreInfoModalContent-heading { text-align: center; white-space: pre-line; } .LearnMoreInfoModalContent-bullets { padding-left: 8px; padding-right: 24px; padding-top: 20px; } .LearnMoreInfoModalContent-bulletBlock:not(:first-child) { margin-top: var(--space-4); } .LearnMoreInfoModalContent-bulletBlock { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .LearnMoreInfoModalContent-bulletIcon { margin-top: var(--space-1); } .LearnMoreInfoModalContent-bulletTitle { line-height: 28px; } .LearnMoreInfoModalContent-bulletDescription { margin-top: var(--space-0); } .LearnMoreInfoModalContent-bulletDescription .Link { color: var(--link-text-default); text-decoration: underline; } .LearnMoreInfoModalContent-bulletText { margin-left: var(--space-4); margin-top: var(--space-0); } .LearnMoreInfoModalContent-footer { margin-top: var(--space-6); text-align: center; } .LearnMoreInfoModalContent-footerLink { text-decoration: none; } .LearnMoreInfoModalContent-bulletDescription .Link:hover, .LearnMoreInfoModalContent-footerLink:hover { text-decoration: underline dotted var(--checkout-gray600); -webkit-text-decoration: underline dotted var(--checkout-gray600); } .LearnMoreInfoModalContent-footer .LinkText { margin-right: var(--space-6); } .LearnMoreInfoModalContent-footer .LinkText:last-child { margin-right: 0; } .InfoModal-modalOverlay { -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; background-color: rgba(0,0,0,.2); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; opacity: 0; transition: opacity .25s cubic-bezier(.18,1.25,.4,1); } .InfoModal-modalOverlay.ModalOverlay--afterOpen { opacity: 1; } .InfoModal-modalOverlay.ModalOverlay--beforeClose { opacity: 0; transition: opacity .2s cubic-bezier(.18,1.25,.4,1); } .InfoModal-modal { -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); background-color: var(--checkout-modal-bg); border-radius: var(--link-modal-rounded); box-shadow: 0 40px 100px rgba(0,0,0,.2),0 6px 12px var(--checkout-light-gray-background); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; letter-spacing: -.15px; margin: var(--link-container-spacing); max-width: var(--link-modal-width); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-5); -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); transition: -webkit-transform .25s cubic-bezier(.18,1.25,.4,1); transition: transform .25s cubic-bezier(.18,1.25,.4,1); transition: transform .25s cubic-bezier(.18,1.25,.4,1),-webkit-transform .25s cubic-bezier(.18,1.25,.4,1); width: 100%; } .InfoModal-modal.ModalContent--afterOpen { -webkit-transform: none; -ms-transform: none; transform: none; } .InfoModal-modal.ModalContent--beforeClose { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); transition: -webkit-transform .2s cubic-bezier(.18,1.25,.4,1); transition: transform .2s cubic-bezier(.18,1.25,.4,1); transition: transform .2s cubic-bezier(.18,1.25,.4,1),-webkit-transform .2s cubic-bezier(.18,1.25,.4,1); } .LinkCancelPartialLoginButton { margin: var(--space-3) 0 var(--space-6); } .Accordion .AccordionItem.LinkAccordionItem { border-top: var(--link-border-separator); } .Accordion .AccordionItem.LinkHeaderAccordionItem, .Accordion .AccordionItem.LinkInlineAuthAccordionItem { border-top: none; } .LinkAccordionItem .AccordionItemContent, .LinkAccordionItem .AccordionItemCover { padding: var(--link-container-spacing); } .LinkAccordionItem .AccordionItemCover-content { padding-bottom: 0; padding-top: var(--link-container-spacing); } .LinkAccordionItem .AccordionButton .InlineSVG { height: var(--link-system-icon-svg-size); } .LinkAccordionItem .AccordionButton-open .InlineSVG { fill: var(--link-icon-default); opacity: .5; } .LinkAccordionItem .AccordionButton-close .InlineSVG { fill: var(--link-text-default); } .LinkAccordionItem .AccordionButton-cancel .Text { color: var(--link-text-action); font-size: var(--link-text-font-size-body-emphasized); font-weight: var(--link-text-font-weight-body-emphasized); line-height: var(--link-text-line-height-caption); } .LinkAccordionItem .AccordionButton-close .Text, .LinkAccordionItem .AccordionButton-open .Text { font-size: var(--link-text-font-size-body); line-height: var(--link-text-line-height-body); } .App-Container .LinkAccordionItem .AccordionButton-cancel, .App-Container .LinkAccordionItem .AccordionButton-cancel:before { border-radius: var(--link-button-rounded-sm); padding: 6px 8px; } .App-Container .LinkAccordionItem .AccordionItemHeader--clickable:before { border-radius: var(--link-input-rounded); } .LinkAccordionItem .Tooltip-Context { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .LinkAccordionItem .Tooltip-Context .Icon { color: var(--link-text-muted); } .LinkAccordionItem .LinkAccordionItem { /* !important reason: legacy */ border-top: var(--link-border-separator)!important; margin: var(--link-accordion-item-nested-margins); margin-top: -1px; } .LinkEmailAccordionItem .AccordionItemCover-content { padding: 0; } .MenuAction { background: none; border: none; cursor: pointer; outline: none; padding: 6px 10px; text-align: left; transition: background-color .2s ease; } .MenuAction:first-child { padding-top: 10px; } .MenuAction:last-child { padding-bottom: 10px; } .MenuAction:focus-visible { box-shadow: var(--link-default-focus-border-box-shadow); } .MenuAction:hover { background-color: var(--link-color-neutral-25); } .Menu { position: relative; } .Menu-trigger { background: transparent; border: 0; border-radius: var(--link-button-rounded-sm); cursor: pointer; height: 24px; margin-right: -4px; padding: 0; transition: background-color .2s ease; width: 24px; } .Menu-icon { display: block; height: var(--link-system-icon-size); margin: auto; } .Menu-actionItem { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .Menu-divider { background: rgba(0,0,0,.05); height: 1px; } .Menu-items { background-color: var(--link-color-neutral-0); border: 0; border-radius: var(--link-button-rounded-sm); box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 30px 45px -30px rgba(0,0,0,.06),0 18px 36px -18px rgba(0,0,0,.06); pointer-events: none; position: absolute; right: -4px; transition: opacity .2s ease; visibility: hidden; width: -webkit-max-content; width: -moz-max-content; width: max-content; z-index: var(--checkout-z-index-autocomplete-dropdown); } .Menu--open .Menu-items { pointer-events: all; visibility: visible; } .Menu--disabled .Menu-icon { opacity: var(--disabled-opacity); } .Menu--disabled .Menu-trigger:hover { background-color: transparent; cursor: default; } .Menu-actionItem:first-child .MenuAction:first-child { border-top-left-radius: var(--link-button-rounded-sm); border-top-right-radius: var(--link-button-rounded-sm); } .Menu-actionItem:last-child .MenuAction:last-child { border-bottom-left-radius: var(--link-button-rounded-sm); border-bottom-right-radius: var(--link-button-rounded-sm); } .LinkHeaderAccordionItem { position: relative; z-index: 5; } .LinkHeaderAccordionItem .AccordionItemCover-label { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--link-system-icon-size); } .LinkHeaderAccordionItem .AccordionItemCover-label .InlineSVG { fill: var(--link-text-default); display: block; } .LinkVerificationFooter-text { display: inline-block; max-width: calc(var(--link-modal-width) - var(--link-container-spacing)*2); overflow: hidden; text-overflow: ellipsis; } .LinkVerificationFooter-divider { padding-bottom: var(--link-container-spacing); } .LinkVerificationFooter-divider hr { margin: 0; } @-webkit-keyframes inputShake { 0% { -webkit-transform: translateX(0) rotateY(0); transform: translateX(0) rotateY(0); } 12.5% { -webkit-transform: translateX(-6px) rotateY(-5deg); transform: translateX(-6px) rotateY(-5deg); } 37.5% { -webkit-transform: translateX(5px) rotateY(4deg); transform: translateX(5px) rotateY(4deg); } 62.5% { -webkit-transform: translateX(-3px) rotateY(-2deg); transform: translateX(-3px) rotateY(-2deg); } 87.5% { -webkit-transform: translateX(2px) rotateY(1deg); transform: translateX(2px) rotateY(1deg); } to { -webkit-transform: translateX(0) rotateY(0); transform: translateX(0) rotateY(0); } } @keyframes inputShake { 0% { -webkit-transform: translateX(0) rotateY(0); transform: translateX(0) rotateY(0); } 12.5% { -webkit-transform: translateX(-6px) rotateY(-5deg); transform: translateX(-6px) rotateY(-5deg); } 37.5% { -webkit-transform: translateX(5px) rotateY(4deg); transform: translateX(5px) rotateY(4deg); } 62.5% { -webkit-transform: translateX(-3px) rotateY(-2deg); transform: translateX(-3px) rotateY(-2deg); } 87.5% { -webkit-transform: translateX(2px) rotateY(1deg); transform: translateX(2px) rotateY(1deg); } to { -webkit-transform: translateX(0) rotateY(0); transform: translateX(0) rotateY(0); } } .OtpInput { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; max-width: 300px; } .OtpInput.is-invalid { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-name: inputShake; animation-name: inputShake; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .OtpInput input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: var(--link-input-more-rounded); box-shadow: var(--link-default-border-box-shadow); color: var(--link-text-default); -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; font-size: var(--link-text-font-size-title); font-weight: var(--link-text-font-weight-title); height: 48px; line-height: 48px; max-width: 40px; min-width: 0; text-align: center; transition: var(--checkout-input-transition); width: 100%; } .OtpInput input.mobile-focus, .OtpInput input:focus { box-shadow: var(--link-highlight-border-box-shadow); outline: none; z-index: var(--checkout-z-index-input-is-focused); } .OtpInput input::-ms-clear { display: none; } .OtpInput input:disabled { color: var(--link-text-muted); } .OtpInput input { margin-right: var(--space-2); } .OtpInput input:last-child { margin-right: 0; } :root { --spinner-size: var(--link-verification-status-icon-size); --text-line-height: var(--link-verification-status-icon-size); } .LinkAuthButton { min-height: var(--link-verification-status-icon-size); } .WebAuthnLoginButton-passkeyIcon { margin-right: 6px; } .VerificationStatus { -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; } .VerificationStatus.is-webauthnView { min-height: var(--link-button-height); } .VerificationStatus.is-nonWebauthnView { min-height: var(--link-verification-status-icon-size); } .VerificationStatus.is-invalid { color: var(--link-text-danger); } .VerificationStatus.is-succeeded { color: var(--link-icon-brand); } .VerificationStatus svg { fill: var(--link-text-subdued); } .VerificationStatus.is-succeeded path, .VerificationStatus.is-succeeded svg { fill: var(--link-icon-brand); } .VerificationStatus .Spinner-svg, .VerificationStatus.is-succeeded svg { height: var(--link-verification-status-icon-size); width: var(--link-verification-status-icon-size); } .VerificationStatus .Spinner-ellipse { stroke: var(--link-icon-brand); } .VerificationStatus { text-align: center; } .LinkVerificationContent { font-variant: none; text-align: center; } .LinkVerificationBody--inline { width: 100%; } .LinkVerificationBody--modal { padding: var(--link-container-spacing); } .LinkVerificationContent--modal .PhoneNumberVerification { padding: var(--space-5); } .LinkVerificationContent .PhoneNumberVerification { text-wrap: balance; } .LinkVerificationContent .Divider, .LinkVerificationContent--loginButtonContainer, .OtpInput--container { padding-top: var(--link-container-spacing); } .WebAuthnLoginButton--container-inline { margin-bottom: 12px; } .WebAuthnLoginButton--container-modal { margin-bottom: 16px; } .WebAuthnLoginButton-primary--container { margin-bottom: 8px; } .LinkVerificationHeader { margin: var(--link-container-spacing); margin-bottom: 0; } .LinkVerificationHeader-linkLogo { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .LinkVerificationHeader-linkLogo .InlineSVG { fill: var(--link-text-default); } .PhoneNumberVerification .PhoneNumberInput .CheckoutInput.PhoneNumberVerification-input { border-radius: var(--link-input-more-rounded); box-shadow: var(--link-default-border-box-shadow); color: var(--link-text-default); height: var(--link-input-height); padding-right: 0; width: 100%; } .PhoneNumberVerification .PhoneNumberInput .CheckoutInput.PhoneNumberVerification-input select:focus, .PhoneNumberVerification .PhoneNumberInput .CheckoutInput.PhoneNumberVerification-input:focus { box-shadow: var(--link-highlight-border-box-shadow); } .PhoneNumberVerification .PhoneNumberInput .CheckoutInput.PhoneNumberVerification-input::-webkit-input-placeholder { color: var(--link-text-muted); font-size: var(--link-text-font-size-body); font-weight: var(--link-text-font-weight-body); line-height: var(--link-text-line-height-body); } .PhoneNumberVerification .PhoneNumberInput .CheckoutInput.PhoneNumberVerification-input::-moz-placeholder { color: var(--link-text-muted); font-size: var(--link-text-font-size-body); font-weight: var(--link-text-font-weight-body); line-height: var(--link-text-line-height-body); } .PhoneNumberVerification .PhoneNumberInput .CheckoutInput.PhoneNumberVerification-input:-ms-input-placeholder { color: var(--link-text-muted); font-size: var(--link-text-font-size-body); font-weight: var(--link-text-font-weight-body); line-height: var(--link-text-line-height-body); } .PhoneNumberVerification .PhoneNumberInput .CheckoutInput.PhoneNumberVerification-input::placeholder { color: var(--link-text-muted); font-size: var(--link-text-font-size-body); font-weight: var(--link-text-font-weight-body); line-height: var(--link-text-line-height-body); } .PhoneNumberVerification .PhoneNumberInput .CheckoutInput--invalid.PhoneNumberVerification-input { color: var(--link-text-danger); } .PhoneNumberVerification .PhoneNumberInput-errorMessageAnimation { padding-top: var(--space-1); } .PhoneNumberVerification .PhoneNumberInput-errorMessageAnimation .Text { color: var(--link-text-danger); font-size: var(--link-text-font-size-detail); font-weight: var(--link-text-font-weight-detail); line-height: var(--link-text-line-height-detail); } .PhoneNumberVerification .PhoneNumberCountryCodeSelect-wrapper { background-color: var(--link-color-neutral-25); border-radius: 9px; color: var(--link-text-default); height: calc(100% - var(--space-1)*2); margin: var(--space-1); margin-right: 0; overflow: hidden; padding: 0 var(--space-3); transition: background-color .15s ease; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .PhoneNumberVerification .PhoneNumberCountryCodeSelect-wrapper:has(.PhoneNumberCountryCodeSelect-select:focus) { box-shadow: var(--link-highlight-border-box-shadow); } .PhoneNumberVerification .PhoneNumberCountryCodeSelect-wrapper:hover { background-color: var(--link-color-neutral-50); } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .PhoneNumberVerification .PhoneNumberCountryCodeSelect-flagIcon { -webkit-animation: fadeIn .75s; animation: fadeIn .75s; margin-right: var(--space-2); position: relative; } .PhoneNumberVerification .PhoneNumberCountryCodeSelect-flagIconContainer { -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; left: 50%; position: relative; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: var(--checkout-z-index-field-icon); } .PhoneNumberVerification .PhoneNumberCountryCodeSelect-select { color: transparent; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: calc(var(--checkout-z-index-field-icon) - 1); } .PhoneNumberVerification .CheckoutInputContainer-placeholderIcon { height: 100%; left: 0; top: 50%; } .PhoneNumberVerification-verifyButton--incomplete .LinkText { opacity: var(--link-button-disabled-text-opacity); } .AccordionItem.LinkInlineAuthAccordionItem .AccordionItemCover, .AccordionItem.LinkInlineAuthAccordionItem .AccordionItemCover-content { padding-top: 0; } :root { --link-backup-pm-linear-gradient-stop: var(--link-icon-brand); } .BackupPaymentMethodInfoContent-cancelIcon { color: #6a7383; height: 16px; } .BackupPaymentMethodInfoContent-linkLogo { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .BackupPaymentMethodInfoContent-headerText { max-width: 240px; text-align: center; } .LinkText.BackupPaymentMethodInfoContent-bodyText { margin-bottom: 32px; margin-top: 24px; text-align: center; } .BackupPaymentMethodInfoContent-buttons { margin-top: 32px; } .BackupPaymentMethodInfoContent-closeButton:not(:first-of-type) { margin-top: 8px; } .BackupPaymentMethodInfoContent-backupPMIcon { --backupPMIconAnimationCurve: ease-out; --backupPMIconAnimationDelay: 0.5s; --backupPMIconAnimationDuration: 0.5s; --backupPMIconGreyCardStartPosition: translate(12px,6px); --backupPMIconGreenCardStartPosition: translate(0,16px); --backupPMIconArrowStartPosition: rotate(-90deg); min-height: 106px; min-width: 114px; } .backupPMIcon-greyCard { -webkit-animation: greyCardAnimation var(--backupPMIconAnimationDuration) var(--backupPMIconAnimationCurve) var(--backupPMIconAnimationDelay) 1; animation: greyCardAnimation var(--backupPMIconAnimationDuration) var(--backupPMIconAnimationCurve) var(--backupPMIconAnimationDelay) 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: var(--backupPMIconGreyCardStartPosition); -ms-transform: var(--backupPMIconGreyCardStartPosition); transform: var(--backupPMIconGreyCardStartPosition); } @-webkit-keyframes greyCardAnimation { 0% { -webkit-transform: var(--backupPMIconGreyCardStartPosition); transform: var(--backupPMIconGreyCardStartPosition); } to { -webkit-transform: translate(0); transform: translate(0); } } @keyframes greyCardAnimation { 0% { -webkit-transform: var(--backupPMIconGreyCardStartPosition); transform: var(--backupPMIconGreyCardStartPosition); } to { -webkit-transform: translate(0); transform: translate(0); } } .backupPMIcon-greenCard { -webkit-animation: greenCardAnimation var(--backupPMIconAnimationDuration) var(--backupPMIconAnimationCurve) var(--backupPMIconAnimationDelay) 1; animation: greenCardAnimation var(--backupPMIconAnimationDuration) var(--backupPMIconAnimationCurve) var(--backupPMIconAnimationDelay) 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; -webkit-transform: var(--backupPMIconGreenCardStartPosition); -ms-transform: var(--backupPMIconGreenCardStartPosition); transform: var(--backupPMIconGreenCardStartPosition); } @-webkit-keyframes greenCardAnimation { 0% { opacity: 0; -webkit-transform: var(--backupPMIconGreenCardStartPosition); transform: var(--backupPMIconGreenCardStartPosition); } to { opacity: 1; -webkit-transform: translate(0); transform: translate(0); } } @keyframes greenCardAnimation { 0% { opacity: 0; -webkit-transform: var(--backupPMIconGreenCardStartPosition); transform: var(--backupPMIconGreenCardStartPosition); } to { opacity: 1; -webkit-transform: translate(0); transform: translate(0); } } .backupPMIcon-arrow { -webkit-animation: arrowAnimation var(--backupPMIconAnimationDuration) var(--backupPMIconAnimationCurve) var(--backupPMIconAnimationDelay) 1; animation: arrowAnimation var(--backupPMIconAnimationDuration) var(--backupPMIconAnimationCurve) var(--backupPMIconAnimationDelay) 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; -webkit-transform: var(--backupPMIconArrowStartPosition); -ms-transform: var(--backupPMIconArrowStartPosition); transform: var(--backupPMIconArrowStartPosition); -webkit-transform-origin: 55px 35px; -ms-transform-origin: 55px 35px; transform-origin: 55px 35px; } @-webkit-keyframes arrowAnimation { 0% { opacity: 0; -webkit-transform: var(--backupPMIconArrowStartPosition); transform: var(--backupPMIconArrowStartPosition); } to { opacity: 1; -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes arrowAnimation { 0% { opacity: 0; -webkit-transform: var(--backupPMIconArrowStartPosition); transform: var(--backupPMIconArrowStartPosition); } to { opacity: 1; -webkit-transform: rotate(0); transform: rotate(0); } } .backupPMIcon-glow { -webkit-animation: glowAnimation var(--backupPMIconAnimationDuration) var(--backupPMIconAnimationCurve) var(--backupPMIconAnimationDelay) 1; animation: glowAnimation var(--backupPMIconAnimationDuration) var(--backupPMIconAnimationCurve) var(--backupPMIconAnimationDelay) 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } @-webkit-keyframes glowAnimation { 0% { opacity: 0; } to { opacity: .1; } } @keyframes glowAnimation { 0% { opacity: 0; } to { opacity: .1; } } .LinkBackupPaymentMethodForm { -ms-flex-pack: justify; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-top: var(--link-border-separator); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding-top: var(--space-4); width: 100%; } .LinkPaymentPicker .LinkBackupPaymentMethodForm { margin-top: var(--space-4); } .LinkBackupPaymentMethodForm:not(:last-child) { border-top: var(--link-border-separator); padding: var(--space-4) 0 var(--space-3); } .LinkBackupPaymentMethodForm-tooltip { background-color: transparent; border: none; cursor: pointer; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; height: 100%; margin-top: 2px; outline: none; padding: 0; } .LinkBackupPaymentMethodForm-tooltip:focus { box-shadow: var(--link-default-focus-border-box-shadow); } .Checkbox-Label { font-weight: 400; } .LinkBillingAccordionItem .AccordionItemCover-title { margin-top: -2px; } .LinkBillingAccordionItem .AccordionItemContent-body { padding-top: var(--space-1); } .LinkBillingAccordionItem .AccordionItemContent-body .LinkBillingAccordionItem-checkbox { margin-top: var(--space-4); } .p-PromoBadge-financialIncentiveText { -ms-flex-pack: center; background: var(--checkout-green); border-radius: 4px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; padding: .05em .35em .02em; white-space: nowrap; } .LinkRedactedBankAccount .BrandIconContainer { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--link-bank-icon-size); margin-right: var(--space-4); } .LinkRedactedBankAccount .BrandIcon { border-radius: var(--link-button-rounded-sm); height: 100%; } .LinkRedactedBankAccountDetails { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .PromoBadgeContainer { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; padding-left: .5em; } .LinkRedactedBankAccount--nicknamesEnabled .BrandIconContainer { height: auto; width: var(--link-payment-details-icon-width); } .LinkRedactedBankAccount--nicknamesEnabled .BrandIcon { border-radius: 8px; } .CardBrandChoice { min-width: 52px; } .CardBrandChoice, .CardBrandChoice-Icon { pointer-events: auto; } .CardBrandChoice-selectIcon { margin-left: var(--space-1); margin-right: var(--space-1); } .CardBrandChoice-selectIconWrapper { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; pointer-events: none; } .CardBrandChoice-chevron { margin-right: var(--space-1); } .CardBrandChoice-select { -ms-flex-pack: end; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; background-color: unset; border: none; border-radius: var(--rounded); box-shadow: none; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; height: calc(100% - var(--space-2)*2); -webkit-justify-content: flex-end; justify-content: flex-end; margin: var(--space-2) var(--space-1); position: absolute; right: var(--space-1); text-indent: 200px; top: 0; width: calc(100% - var(--space-1)*2); } .CardBrandChoice-select:focus { box-shadow: var(--focus-border-box-shadow); outline: none; } .LinkRedactedCardNumber { overflow: hidden; width: 100%; } .LinkRedactedCardNumber-error { margin-left: auto; margin-right: var(--space-0); } .LinkRedactedCardNumber-error .Icon { display: block; } .LinkRedactedCardNumber--expired .BrandIconContainer, .LinkRedactedCardNumber--expired .LinkRedactedCardNumberDetails { opacity: var(--disabled-opacity); } .LinkRedactedCardNumber .BrandIconContainer { height: 16px; width: 24px; } .LinkRedactedCardNumber .LinkRedactedCardNumberDetails { overflow: hidden; } .LinkRedactedCardNumber .LinkRedactedCardNumberDetails-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .LinkRedactedCardNumber--nicknamesEnabled .BrandIconContainer { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: -webkit-max-content; height: -moz-max-content; height: max-content; margin-right: var(--space-4); width: -webkit-max-content; width: -moz-max-content; width: max-content; } .LinkRedactedCardNumber--nicknamesEnabled .BrandIcon { height: auto; width: var(--link-payment-details-icon-width); } .LinkRedactedCardNumber .CardBrandChoice { position: relative; } .LinkPaymentForm .LinkRedactedCardNumber .CardBrandChoice-select { background-color: #fff; bottom: auto; box-shadow: var(--link-default-border-box-shadow); height: 36px; left: auto; margin: auto; position: absolute; right: auto; top: auto; transition: var(--checkout-input-transition); } .LinkPaymentForm .LinkRedactedCardNumber .CardBrandChoice-select:focus { box-shadow: var(--link-highlight-border-box-shadow); outline: none; } .Picker { margin: var(--space-1) 0 0 0; } :root { --link-picker-item-padding: var(--space-4); --link-picker-item-container-min-height: 24px; } .PickerItem--large { --link-picker-item-padding: 10px var(--space-4); --link-picker-item-container-min-height: 44px; } .PickerItem { background-color: var(--link-color-neutral-0); border: 0; border-radius: var(--link-input-rounded); box-shadow: var(--link-default-border-box-shadow); cursor: pointer; margin: var(--space-2) 0 0 0; outline: none; padding: var(--link-picker-item-padding); transition: box-shadow .08s ease-in; width: 100%; } .PickerItem:hover { background-color: var(--link-color-neutral-25); } .PickerItem:focus { background-color: var(--link-color-neutral-50); } .PickerItem--highlight { box-shadow: var(--link-highlight-border-box-shadow); } .PickerItem:focus-visible { box-shadow: var(--link-default-focus-border-box-shadow); } .PickerItem--highlight:focus-visible { box-shadow: var(--link-highlight-border-box-shadow),var(--link-default-focus-border-box-shadow); } .PickerItem--disabled, .PickerItem--disabled:hover { cursor: default; opacity: var(--disabled-opacity); } .PickerItem--disableSelection:focus, .PickerItem--disableSelection:hover { background-color: var(--link-color-neutral-0); cursor: default; } .PickerItem-container { min-height: var(--link-picker-item-container-min-height); } .PickerItem--large .PickerItem-more { margin-left: var(--space-3); } .PickerItem-newIcon svg { fill: var(--link-text-action); display: block; margin: auto; } .PickerItem-newIcon { -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: var(--link-icon-background); border-radius: var(--rounded); display: -webkit-flex; display: -ms-flexbox; display: flex; height: 24px; width: 24px; } .PickerItem-newIconContainer { margin-right: var(--space-2); } .PickerItem--large .PickerItem-newIconContainer { height: var(--link-payment-details-icon-width); margin-right: var(--space-4); width: var(--link-payment-details-icon-width); } .LinkUpdateCardForm-number { background-color: var(--link-color-neutral-25); border-radius: var(--link-input-rounded); box-shadow: var(--link-default-border-box-shadow); min-height: var(--link-input-height); padding: var(--space-3); } .LinkUpdateCardForm .BillingAddressForm-addressInput { margin-bottom: var(--space-2); } :root { --copy-link-color: var(--checkout-gray400); --copy-link-hover-color: var(--checkout-gray600); --copy-link-active-color: var(--checkout-gray900); } .Clipboard { margin-right: 4px; } .CopyLinkWrapper { fill: var(--copy-link-color); -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: var(--copy-link-color); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; } .CopyLinkWrapper:hover { fill: var(--copy-link-hover-color); color: var(--copy-link-hover-color); } .CopyLinkWrapper:active { fill: var(--copy-link-active-color); color: var(--copy-link-active-color); } .CopyLinkWrapper>.Clipboard { fill: inherit; color: inherit; } @media print { .CopyLink { display: none; } } .Toast { background-color: #3c4257; border-radius: var(--rounded); box-shadow: 0 7px 14px 0 rgba(60,66,87,.08),0 3px 6px 0 rgba(0,0,0,.12); padding: var(--space-3) var(--space-4); pointer-events: all; } .Toast *+.Toast-text { margin-left: var(--space-2); } .Toast+.Toast { margin-top: var(--space-3); } .Toast { transition: opacity .3s ease-in-out; } .Toast-animate-exit-done, .Toast.Toast-animate-appear, .Toast.Toast-animate-exit-active { opacity: 0; } .Toast.Toast-animate-appear.Toast-animate-appear-active, .Toast.Toast-animate-exit { opacity: .8; } .Toasts { -ms-flex-align: center; -webkit-align-items: center; align-items: center; bottom: 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; left: 0; pointer-events: none; position: fixed; right: 0; z-index: 100; } .LabeledTableRow--wide>td:first-child { padding-right: var(--space-5); } .LabeledTableRow .LabeledTableRow--valueWithLineBreaks { white-space: pre-wrap; } .LabeledTableRow td:last-child { word-break: break-word; } .LeftLabeledTable-table { border-collapse: separate; border-spacing: var(--space-5) var(--space-1); margin: calc(var(--space-1)*-1) calc(var(--space-5)*-1) 0 calc(var(--space-5)*-1); width: calc(100% + var(--space-5)*2); } .LeftLabeledTable-well { background-color: var(--checkout-gray25); border: 1px solid var(--checkout-gray50); border-collapse: separate; border-radius: var(--rounded); border-spacing: var(--space-3) var(--space-1); padding: var(--space-1) var(--space-0); width: 100%; word-break: break-word; } .ContentCard { background-color: var(--checkout-white); border-radius: var(--rounded); box-shadow: var(--md-box-shadow); margin-bottom: var(--space-4); padding: var(--space-6); width: 100%; } .ContentCard.ContentCard--noMargin { margin-bottom: 0; } .ContentCard.ContentCard--noPadding { padding: 0; } .ContentCard.ContentCard--noBorderRadius { border-radius: 0; } .ContentCard.ContentCard--mobile { box-shadow: none; padding: var(--space-4); } @media screen { .ContentCard.ContentCard--stripeJs { background-color: transparent; box-shadow: none; margin-bottom: 0; padding: var(--space-4) var(--space-6); } } @media print { .ContentCard { background-color: transparent; box-shadow: none; padding: var(--space-4); } } .App-Container.is-veryRoundBordered .ContentCard { border-radius: var(--very-rounded-button); } .App-Container.is-squareBordered .ContentCard { border-radius: 0; } .AffirmPayment-ContentCard, .AfterpayClearpayPayment-ContentCard { background-color: transparent; box-shadow: none; margin-top: 0; padding: 0; } .AffirmPayment-ContentCard:has(iframe) { border: var(--border-darkBg); margin-top: var(--space-2); padding: var(--space-1) var(--space-2) 0; } .BlikPending { background-color: var(--checkout-light-gray-background); border-radius: 12px; margin-top: var(--space-5); overflow: hidden; padding: var(--space-6); } .BlickPayment-blikCodeInfoTooltip .Tooltip-Text { max-width: 330px; width: 330px; } .CardFormFieldGroupIconOverflow { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 16px; position: relative; width: 28px; } .CardFormFieldGroupIconOverflow-Item { left: 0; position: absolute; top: 0; transition: all .4s ease; transition-delay: .15s; } .CardFormFieldGroupIconOverflow-Item--visible { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .CardFormFieldGroupIconOverflow-Item--invisible { opacity: 0; -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } .RadioButton { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-clip: content-box; background-color: var(--checkout-white); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--checkout-input-disabled-color); display: inline-block; height: 16px; transition: .2s ease; width: 16px; } .RadioButton:checked { box-shadow: inset 0 0 0 5px var(--checkout-black); } .InstallmentPlanSelector-item-label { -ms-flex-align: center; -webkit-align-items: center; align-items: center; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; } .InstallmentPlanSelector-name { margin-left: var(--space-3); } .PaymentForm-paymentMethodForm .flex-item.InstallmentPlanOptionsForm-hidden { margin: -8px; } .InstallmentPlanSelector { margin-top: 1em; } .InstallmentPlanSelector-input-container.CheckoutInput { height: auto; line-height: 1.5; } @media only screen and (max-width:991.98px) { .InstallmentPlanSelector-radio { margin-top: 4px; } } @media only screen and (min-width:992px) { .App-Container:not(.App-Container--setupMode) .CheckoutInput.InstallmentPlanSelector-input-container { height: auto; } } :root { --icon-color: #00d66f; --icon-text-color: #011e0f; --link-text-default: #1d3944; --link-text-subdued: #596171; } .PurchaseProtectionInfoModalContent-content, .PurchaseProtectionInfoModalContent-footer, .PurchaseProtectionInfoModalContent-header { color: var(--link-text-subdued); } .PurchaseProtectionInfoModalContent-content p, .PurchaseProtectionInfoModalContent-footer p, .PurchaseProtectionInfoModalContent-header p { font-size: 16px; font-weight: 400; line-height: 24px; margin: 0; } .PurchaseProtectionInfoModalContent-header { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 8px; margin-top: 20px; text-align: center; } .PurchaseProtectionInfoModalContent-headerIcon svg { fill: var(--icon-color); height: 32px; width: 32px; } .PurchaseProtectionInfoModalContent-headerIcon .DisputeProtection-checkmark { stroke: var(--icon-text-color); } .PurchaseProtectionInfoModalContent-headerIcon { -ms-flex-pack: center; -ms-flex-align: center; -ms-flex-item-align: center; -webkit-align-items: center; align-items: center; -webkit-align-self: center; align-self: center; background-color: #f6f8fa; border-radius: 16px; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 56px; -webkit-justify-content: center; justify-content: center; justify-self: center; width: 56px; } .PurchaseProtectionInfoModalContent-headerText { color: var(--link-text-default); } .PurchaseProtectionInfoModalContent-header h1 { font-size: 24px; margin: 12px 0 0; } .PurchaseProtectionPartnerInfoModalContent-header h1 { float: left; font-size: 18px; margin: 0; } .PurchaseProtectionPartnerInfoModalContent-header { -ms-flex-item-align: start; -webkit-align-self: flex-start; align-self: flex-start; margin-top: 20px; } .PurchaseProtectionInfoModalContent-subheader { margin-top: 4px; } .PurchaseProtectionModalContent-faqContainer { padding: 0 20px; } .PurchaseProtectionModalContent-faqContainer, .PurchaseProtectionPartnerModalContent-faqContainer { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 16px; } .PurchaseProtectionModalContent-faq { margin-left: 10px; } .LinkInfoModal-content--RTL .PurchaseProtectionModalContent-faq { margin-left: 0; margin-right: 10px; } .PurchaseProtectionInfoModalContent-bulletIcon svg { fill: black; margin-top: 4px; } .PurchaseProtectionInfoModalContent-protectionIcon svg { color: var(--icon-text-color); height: 16px; margin-top: 4px; width: 16px; } .PurchaseProtectionInfoModalContent-content .PurchaseProtectionInfoModalContent-question { color: var(--link-text-default); font-weight: 600; } .PurchaseProtectionInfoModalContent-descriptionContent { text-align: center; } .PurchaseProtectionInfoModalContent-footer { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; margin: 24px 0; text-align: center; } .PurchaseProtectionInfoModalContent-footer a { color: var(--link-text-subdued); } .PurchaseProtectionInfoModalContent-footer .PurchaseProtectionInfoModalContent-partnerMessage { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 16px; gap: 24px; line-height: 20px; } .PurchaseProtectionInfoModalContent-footer .PurchaseProtectionInfoModalContent-signUpMessage { font-size: 12px; line-height: 18px; margin-top: 14px; } .PurchaseProtectionInfoModalContent-partnerLink { background: none; border: none; color: inherit; cursor: pointer; margin: 3px 0 0 4px; padding: 0; } .PurchaseProtectionPartnerInfoModalContent-partnerMessage svg { margin-left: 4px; } .PurchaseProtectionInfoModalContent-footer .PurchaseProtectionPartnerInfoModalContent-partnerMessage { font-size: 14px; margin-top: 30px; } .PurchaseProtectionPartnerInfoModalContent-partnerMessage { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .PurchaseProtectionPartnerInfoModalContent-partnerLink { color: inherit; font-size: 14px; margin-top: 10px; text-decoration-thickness: 1px; text-underline-offset: 3px; } .PurchaseProtectionInfoModalContent-partnerLink:hover, .PurchaseProtectionPartnerInfoModalContent-partnerLink:hover { color: #36393d; } .LinkInfoModal-content--darkMode .PurchaseProtectionInfoModalContent-content p, .LinkInfoModal-content--darkMode .PurchaseProtectionInfoModalContent-header h1, .LinkInfoModal-content--darkMode .PurchaseProtectionInfoModalContent-header p, .LinkInfoModal-content--darkMode .PurchaseProtectionInfoModalContent-partnerLink:hover, .LinkInfoModal-content--darkMode .PurchaseProtectionPartnerInfoModalContent-partnerLink:hover { color: #fff; } .LinkInfoModal-content--darkMode .PurchaseProtectionInfoModalContent-answer, .LinkInfoModal-content--darkMode .PurchaseProtectionInfoModalContent-footer a, .LinkInfoModal-content--darkMode .PurchaseProtectionInfoModalContent-footer p { color: #c0c8d2; } .LinkInfoModal-content--hasPadding .PurchaseProtectionInfoModalContent-footer { margin-bottom: 0; } .LinkInfoModal { border-radius: var(--link-modal-rounded); font-family: var(--link-text-font-family); height: auto; margin: var(--link-container-spacing); overflow: hidden; width: var(--link-modal-width); } .LinkInfoModal-overlay { background: rgba(0,0,0,.2); } .LinkInfoModal-content { -ms-flex-pack: justify; -webkit-overflow-scrolling: touch; -webkit-justify-content: space-between; justify-content: space-between; overflow: auto; padding: 24px 24px 0; } .LinkInfoModal-content, .LinkInfoModal-contentBody, .LinkInfoModal-contentFooter { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .LinkInfoModal-contentBody, .LinkInfoModal-contentFooter { padding: 0 10px; width: 100%; } .LinkInfoModal-header { -ms-flex-pack: justify; height: calc(var(--link-logo-md) + 6px); -webkit-justify-content: space-between; justify-content: space-between; padding: 6px 6px 0; width: 100%; } .LinkInfoModal-backButton, .LinkInfoModal-cancelButton, .LinkInfoModal-header { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .LinkInfoModal-backButton, .LinkInfoModal-cancelButton { background-color: transparent; border: none; cursor: pointer; padding: 0; } .LinkInfoModal-backIcon, .LinkInfoModal-cancelIcon { color: #2f2f2f; height: 18px; width: 18px; } .SignUpForm-signUpFormContainer { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: var(--rounded); position: relative; transition: var(--checkout-input-transition); width: 100%; } .SignUpForm-headerContainer { -ms-flex-pack: justify; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; background-color: var(--checkout-white); border-radius: var(--rounded); box-shadow: var(--border-box-shadow); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between; padding: var(--space-3); position: relative; word-break: break-word; } .App-Container.is-squareBordered .SignUpForm-headerContainer { border-radius: 0; } .App-Container.App-Container.is-veryRoundBordered .SignUpForm-headerContainer { border-radius: var(--very-rounded); } .SignUpForm--expanded .SignUpForm-headerContainer { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .SignUpForm-phoneInput { border-radius: 0; border-bottom-left-radius: var(--rounded); border-bottom-right-radius: var(--rounded); } .SignUpForm--withTerms .SignUpForm-phoneInput { border-radius: 0; } .SignUpForm--withOfferSavePaymentMethod .SignUpForm-phoneInput { border-radius: 0; border-top-left-radius: var(--rounded); border-top-right-radius: var(--rounded); } .App-Container.App-Container.is-veryRoundBordered .SignUpForm--withOfferSavePaymentMethod .SignUpForm-phoneInput { border-radius: 0; border-top-left-radius: var(--very-rounded); border-top-right-radius: var(--very-rounded); } .SignUpForm-terms { background-color: var(--checkout-white); border-radius: 0; border-bottom-left-radius: var(--rounded); border-bottom-right-radius: var(--rounded); box-shadow: var(--border-box-shadow); padding: var(--space-3); position: relative; } .App-Container.App-Container.is-veryRoundBordered .SignUpForm--withOfferSavePaymentMethod .SignUpForm-terms, .App-Container.is-squareBordered .SignUpForm-terms, .SignUpForm--withOfferSavePaymentMethod .SignUpForm-terms { border-radius: 0; } .App-Container.App-Container.is-veryRoundBordered .SignUpForm-terms { border-radius: 0 0 var(--very-rounded) var(--very-rounded); } .FormFieldCheckbox.SignUpForm-checkbox { margin-top: -2px; } .SignUpForm-clickableArea { border-radius: var(--rounded); height: 100%; position: absolute; right: 0; top: 0; width: 100%; } .App-Container.is-squareBordered .SignUpForm-clickableArea { border-radius: 0; } .App-Container.App-Container.is-veryRoundBordered .SignUpForm-clickableArea { border-radius: var(--very-rounded); } .SignUpForm-checkbox .Checkbox-InputContainer { top: 3px; } .SignUpForm-checkbox .Checkbox-Label, .SignUpForm-header .SignUpForm-headerText { color: var(--checkout-gray800); font-size: var(--checkout-lg-input-font-size); font-weight: var(--checkout-text-font-weight); } .SignUpForm-subLabel { color: var(--checkout-gray600); font-size: var(--checkout-font-size-13); margin-top: var(--space-1); } .SignUpForm-footer { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; padding-top: var(--space-2); } .SignUpForm--withOfferSavePaymentMethod .SignUpForm-footer { -ms-flex-pack: left; background-color: var(--checkout-white); border-radius: 0; border-bottom-left-radius: var(--rounded); border-bottom-right-radius: var(--rounded); box-shadow: var(--border-box-shadow); -webkit-justify-content: left; justify-content: left; padding: var(--space-3); position: relative; } .App-Container.is-squareBordered .SignUpForm--withOfferSavePaymentMethod .SignUpForm-footer { border-radius: 0; } .SignUpForm--withOfferSavePaymentMethod .SignUpForm-footer svg { fill: var(--checkout-gray200); } .SignUpForm-footerText:after { color: var(--checkout-gray200); content: "•"; margin: 0 var(--space-2); } .SignUpForm-footerLogo { font-size: var(--checkout-font-size-10); height: var(--link-logo-xs); } .SignUpForm-footerSpacer { color: var(--checkout-gray200); font-size: var(--checkout-font-size-10); line-height: 10px; margin: 0 var(--space-2); } .App-Container.App-Container.is-veryRoundBordered .SignUpForm--expanded .SignUpForm-headerContainer { border-radius: var(--very-rounded) var(--very-rounded) 0 0; } .App-Container.is-veryRoundBordered .SignUpForm .CheckoutInput, .App-Container.is-veryRoundBordered .SignUpForm--withOfferSavePaymentMethod .SignUpForm-footer { border-radius: 0 0 var(--very-rounded) var(--very-rounded); } .App-Container.is-veryRoundBordered .SignUpForm--withTerms .CheckoutInput { border-radius: 0; } @media only screen and (min-width:992px) { .SignUpForm-headerContainer { padding-bottom: var(--space-2); padding-top: var(--space-2); } } .SignUpForm-signUpFormContainer.SignUpForm-signUpFormContainer--hidden { margin-bottom: -16px; } .SignUpForm-labelHeader { color: var(--checkout-gray800); font-weight: var(--checkout-text-font-weight-500); } .SignUpForm-labelHeader--withIncentive { display: -webkit-flex; display: -ms-flexbox; display: flex; } .SignUpForm-financialIncentiveBadgeContainer { margin-left: var(--space-3); } .SignUpForm-financialIncentiveText { background: var(--checkout-green); border-radius: var(--rounded); height: var(--space-4); padding: var(--space-0) var(--space-1); white-space: nowrap; } .SignUpForm-moreInfoLink--secondary { color: var(--checkout-gray400); } .SignUpForm--disabled .SignUpForm-headerContainer, .SignUpForm--disabled .SignUpForm-terms { box-shadow: var(--disabled-border-box-shadow); } .SignUpForm--disabled .CheckboxField--disabled .Checkbox-StyledInput:after { opacity: 0; } .CardPayment-readOnlyFormLabel h3 { display: inline-block; } .CardPayment-signUpFormContainer { margin-top: var(--space-2); } .CardPayment-signUpFormContainer.CardPayment-signUpFormContainer--hidden { margin: 0; padding: 0; } .CardPayment-keepUsingSavedCard { color: var(--checkout-gray600); text-decoration-line: underline; -webkit-text-decoration-line: underline; text-decoration-style: dotted; -webkit-text-decoration-style: dotted; } .ContentCard.CashappInstructions-ContentCard { background-color: transparent; border: var(--border-darkBg); box-shadow: none; margin-top: 10px; padding: var(--space-4); } .CheckoutCashappPaymentModal-modal { display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--modal-height); position: relative; width: var(--modal-width); } .CheckoutCashappPaymentModal-iframe { -ms-flex-positive: 1; -webkit-flex-grow: 1; flex-grow: 1; } @media only screen and (max-width:991.98px) { .CheckoutCashappPaymentModal-modal { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 100vh; overflow: scroll; -webkit-transform: translateY(60%); -ms-transform: translateY(60%); transform: translateY(60%); width: 100%; } .CheckoutCashappPaymentModal-modalOverlay:before { -webkit-filter: none; filter: none; } .CheckoutCashappPaymentModal-modalOverlay.ModalOverlay--afterOpen:before { opacity: 1; } .CheckoutCashappPaymentModal-modal.ModalContent--afterOpen { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-duration: var(--transition-duration); } .CheckoutCashappPaymentModal-modal.ModalContent--beforeClose { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .CheckoutCashappPaymentModal-modalOverlay.ModalOverlay--beforeClose:before { opacity: 0; transition-duration: var(--transition-duration); } .ConfirmModal-modalOverlay.ModalOverlay--beforeClose { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .CashappPayment-QR-Code { background-color: var(--checkout-light-gray-background); border-radius: 12px; overflow: hidden; padding: var(--space-7); } .CashappPayment-Expire-Count, .CashappPayment-Title { max-width: 250px; padding-top: 25px; text-align: center; } .BankDelayAndFeesNotice { -webkit-padding-start: 1.5em; margin: 0; padding: 0; padding-inline-start: 1.5em; } .BankDelayAndFeesNotice-listItem { -webkit-margin-after: .5em; line-height: 1.4; margin-block-end: .5em; } .BankDelayAndFeesNotice-listItem:last-of-type { -webkit-margin-after: 0; margin-block-end: 0; } .KlarnaPayment-ContentCard, .is-desktop .KlarnaPayment-ContentCard { background-color: transparent; box-shadow: none; margin-top: 0; padding: 0; } .KlarnaPayment-ContentCard:has(iframe), .is-desktop .KlarnaPayment-ContentCard:has(iframe) { border: var(--border-darkBg); padding: var(--space-1) var(--space-2) var(--space-2); } .p-PromoText { padding-top: var(--space-3); } .PixPayment-ContentCard { background-color: transparent; border: var(--border-darkBg); box-shadow: none; padding: var(--space-4); } .CheckoutPayNowPaymentModal-modal { display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--modal-height); position: relative; width: var(--modal-width); } .CheckoutPayNowPaymentModal-iframe { -ms-flex-positive: 1; -webkit-flex-grow: 1; flex-grow: 1; } @media only screen and (max-width:991.98px) { .CheckoutPayNowPaymentModal-modal { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 100vh; overflow: scroll; -webkit-transform: translateY(60%); -ms-transform: translateY(60%); transform: translateY(60%); width: 100%; } .CheckoutPayNowPaymentModal-modalOverlay:before { -webkit-filter: none; filter: none; } .CheckoutPayNowPaymentModal-modalOverlay.ModalOverlay--afterOpen:before { opacity: 1; } .CheckoutPayNowPaymentModal-modal.ModalContent--afterOpen { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-duration: var(--transition-duration); } .CheckoutPayNowPaymentModal-modal.ModalContent--beforeClose { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .CheckoutPayNowPaymentModal-modalOverlay.ModalOverlay--beforeClose:before { opacity: 0; transition-duration: var(--transition-duration); } .ConfirmModal-modalOverlay.ModalOverlay--beforeClose { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .ContentCard.PayNowInstructionsText-ContentCard { background-color: transparent; border: var(--border-darkBg); box-shadow: none; padding: var(--space-4); } .PayNowInstructionsText-divider { background-color: var(--checkout-gray50); border: none; height: 1px; margin: var(--space-3) 0; } .CheckoutPromptPayPaymentModal-modal { display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--modal-height); position: relative; width: var(--modal-width); } .CheckoutPromptPayPaymentModal-iframe { -ms-flex-positive: 1; -webkit-flex-grow: 1; flex-grow: 1; } @media only screen and (max-width:991.98px) { .CheckoutPromptPayPaymentModal-modal { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 100vh; overflow: scroll; -webkit-transform: translateY(60%); -ms-transform: translateY(60%); transform: translateY(60%); width: 100%; } .CheckoutPromptPayPaymentModal-modalOverlay:before { -webkit-filter: none; filter: none; } .CheckoutPromptPayPaymentModal-modalOverlay.ModalOverlay--afterOpen:before { opacity: 1; } .CheckoutPromptPayPaymentModal-modal.ModalContent--afterOpen { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-duration: var(--transition-duration); } .CheckoutPromptPayPaymentModal-modal.ModalContent--beforeClose { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .CheckoutPromptPayPaymentModal-modalOverlay.ModalOverlay--beforeClose:before { opacity: 0; transition-duration: var(--transition-duration); } .ConfirmModal-modalOverlay.ModalOverlay--beforeClose { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .ContentCard.PromptPayInstructionsText-ContentCard { background-color: transparent; border: var(--border-darkBg); box-shadow: none; padding: var(--space-4); } .PromptPayInstructionsText-divider { background-color: var(--checkout-gray50); border: none; height: 1px; margin: var(--space-3) 0; } .CheckoutSwishPaymentModal-modal { display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--modal-height); position: relative; width: var(--modal-width); } .CheckoutSwishPaymentModal-iframe { -ms-flex-positive: 1; -webkit-flex-grow: 1; flex-grow: 1; } @media only screen and (max-width:991.98px) { .CheckoutSwishPaymentModal-modal { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 100vh; overflow: scroll; -webkit-transform: translateY(60%); -ms-transform: translateY(60%); transform: translateY(60%); width: 100%; } .CheckoutSwishPaymentModal-modalOverlay:before { -webkit-filter: none; filter: none; } .CheckoutSwishPaymentModal-modalOverlay.ModalOverlay--afterOpen:before { opacity: 1; } .CheckoutSwishPaymentModal-modal.ModalContent--afterOpen { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-duration: var(--transition-duration); } .CheckoutSwishPaymentModal-modal.ModalContent--beforeClose { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .CheckoutSwishPaymentModal-modalOverlay.ModalOverlay--beforeClose:before { opacity: 0; transition-duration: var(--transition-duration); } .ConfirmModal-modalOverlay.ModalOverlay--beforeClose { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .ContentCard.SwishInstructionsText-ContentCard { padding: var(--space-4); } .SwishInstructionsText-divider { background-color: var(--checkout-gray50); border: none; height: 1px; margin: var(--space-3) 0; } .ManualEntryFormCheck { background-size: 100%; height: 96px; margin: 0 auto; width: 312px; } .ManualEntryFormInput-inputWrapper { position: relative; width: 100%; } .ManualEntryFormInput-dynamicIcon { pointer-events: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: var(--checkout-z-index-field-icon); } .ManualEntryFormInput-tooltip .Tooltip-Text { max-width: none; width: auto; } .ManualEntryFormInput-tooltipIconWrapper { margin-left: var(--space-2); margin-right: var(--space-2); pointer-events: auto; } .ManualEntryFormInput-dynamicIcon { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; right: var(--space-1); } .ManualEntryFormInput-tooltipIcon { color: var(--checkout-gray400); z-index: var(--checkout-z-index-field-icon); } :root { --transition-duration: 0.25s; --modal-width: 400px; --modal-height: 600px; } .CheckoutWechatPayPaymentModal-modal { display: -webkit-flex; display: -ms-flexbox; display: flex; height: var(--modal-height); position: relative; width: var(--modal-width); } .CheckoutWechatPayPaymentModal-iframe { -ms-flex-positive: 1; -webkit-flex-grow: 1; flex-grow: 1; } @media only screen and (max-width:991.98px) { .CheckoutWechatPayPaymentModal-modal { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; border-bottom-left-radius: 0; border-bottom-right-radius: 0; height: 100vh; overflow: scroll; -webkit-transform: translateY(60%); -ms-transform: translateY(60%); transform: translateY(60%); width: 100%; } .CheckoutWechatPayPaymentModal-modalOverlay:before { -webkit-filter: none; filter: none; } .CheckoutWechatPayPaymentModal-modalOverlay.ModalOverlay--afterOpen:before { opacity: 1; } .CheckoutWechatPayPaymentModal-modal.ModalContent--afterOpen { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); transition-duration: var(--transition-duration); } .CheckoutWechatPayPaymentModal-modal.ModalContent--beforeClose { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .CheckoutWechatPayPaymentModal-modalOverlay.ModalOverlay--beforeClose:before { opacity: 0; transition-duration: var(--transition-duration); } .ConfirmModal-modalOverlay.ModalOverlay--beforeClose { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .ContentCard.WechatPayInstructionsText-ContentCard { background-color: transparent; border: var(--border-darkBg); box-shadow: none; padding: var(--space-4); } .KrMarket-ContentCard { padding: 16px; } .KrMarket-InstructionTest { color: #596171; } .UnderlyingPaymentMethodButton-Button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--checkout-input-background-color); border: 0; border-radius: 6px; box-shadow: var(--border-box-shadow); color: var(--checkout-input-color); cursor: pointer; font-size: var(--checkout-input-font-size); line-height: var(--checkout-input-line-height); padding: 1px 6px; transition: var(--checkout-input-transition); } .UnderlyingPaymentMethodButton-Button:focus { box-shadow: var(--link-selected-border-box-shadow); z-index: var(--checkout-z-index-input-is-focused); } .UnderlyingPaymentMethodButton-IconContainer { -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; text-align: center; } .UnderlyingPaymentMethodButton-Icon { height: 32px; margin-bottom: 10px; margin-top: 10px; width: 32px; } .UnderlyingPaymentMethodButton-Name { -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 10px; } .ConnectionsBankPicker-featuredInstitutions { -ms-grid-columns: (1fr)[3]; display: -ms-grid; display: grid; gap: var(--space-2); grid-auto-rows: minmax(72px,auto); grid-template-columns: repeat(3,1fr); margin-top: var(--space-1); padding-top: var(--space-3); } .ConnectionsBankPicker-featuredInstitutions-loadingWrapper { -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 40px; -webkit-justify-content: center; justify-content: center; width: 88px; } .ConnectionsBankPicker-featuredInstitutions-loadingIndicator { background: linear-gradient(90deg,#fafafa,#ebebeb 263.17%,#fafafa 377.08%); border-radius: var(--slightly-rounded); height: 20px; width: 77px; } @media only screen and (max-width:415.98px) { .ConnectionsBankPicker-featuredInstitutions { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2,1fr); } } .LpaPicker-IconContainer { -ms-flex-align: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; text-align: center; } .LpaPicker-Icon { height: 32px; margin-bottom: 10px; margin-top: 10px; width: 32px; } .LpaPicker-UnderlyingPaymentMethod-AboveTheFold, .LpaPicker-UnderlyingPaymentMethod-BelowTheFold { -ms-grid-columns: (1fr)[3]; display: -ms-grid; display: grid; gap: var(--space-2); grid-auto-rows: minmax(72px,auto); grid-template-columns: repeat(3,1fr); } .LpaPicker-UnderlyingPaymentMethod-BelowTheFold { margin-top: var(--space-2); } @media only screen and (max-width:415.98px) { .LpaPicker-underlyingPaymentMethod { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2,1fr); } } .LpaPicker-UnderlyingPaymentMethodName { -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 10px; } .LpaPicker-SeeMore { -ms-flex-positive: 9999; -ms-flex-pack: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-grow: 9999; flex-grow: 9999; -webkit-justify-content: center; justify-content: center; } .LpaPicker-SeeMore-Icon { margin-left: 4px; } .BacsDebitRulesNotice p:last-child { margin-bottom: 0; } .PrefilledInfo { background-color: var(--checkout-gray50); border: var(--border); border-radius: var(--rounded); margin: 0; padding: var(--space-3); } .PrefilledInfo .PrefilledInfoItem:not(:last-child) { margin-bottom: var(--space-2); } .PrefilledInfoItem-value { margin: 0; } .Tabs-TabListLpaPaymentIcon .RotatingIconContainer { margin-top: 0; width: 16px; } .JPCreditTransfer--instructions { margin-bottom: var(--space-3); } .JPCreditTransfer--footer { margin-top: var(--space-3); } .Payment-Promotion-Message { background-color: #ecfed7; border-radius: 12px; font-size: 14px; padding: 12px; } .OptInSetupFutureUsageCheckbox { padding: 0; } .OptInSetupFutureUsageCheckbox .Icon { margin-right: 1px; } .PaymentMethodErrorForm-ContentCard { box-shadow: var(--border-box-shadowless); margin-bottom: 0; padding: var(--space-3); } .PaymentMethodErrorForm-IconContainer { margin-right: var(--space-2); margin-top: var(--space-1); } .PaymentMethodFormAccordionItem.AccordionItem { overflow: hidden; position: relative; z-index: var(--checkout-z-index-accordion-item-content); } .PaymentMethodFormAccordionItem.AccordionItem:first-child { border-top: var(--border); } .PaymentMethodFormVisible-container:first-child .PaymentMethodFormAccordionItem.AccordionItem:first-child { border-top: none; } .App-Container.is-squareBordered .PaymentMethodForm .Accordion { border-radius: 0; } .App-Container.is-veryRoundBordered .PaymentMethodForm .Accordion { border-radius: var(--very-rounded); } .PaymentMethodFormAccordionItem .AccordionItemCover-label { display: none; } .PaymentMethodFormAccordionItemTitle-radio { -webkit-margin-end: var(--space-4); margin-inline-end: var(--space-4); } .PaymentMethodFormAccordionItemTitle-icon { -webkit-margin-end: var(--space-2); height: 16px; margin-inline-end: var(--space-2); text-align: center; width: 24px; } .PaymentMethodFormAccordionItemTitle-icon img { border-radius: 2px; height: 16px; max-width: 24px; width: auto; } .PaymentMethodFormAccordionItem .AccordionItemCover .PaymentMethodFormAccordionItemTitle { color: var(--checkout-gray500); transition: text-shadow .1s ease; } @media (hover) { .PaymentMethodFormAccordionItem .AccordionItemCover:hover .PaymentMethodFormAccordionItemTitle { text-shadow: 0 0 .5px var(--checkout-gray500),0 0 .5px var(--checkout-gray500); } } .PaymentMethodFormAccordionItem--disabled .AccordionItemCover:hover .PaymentMethodFormAccordionItemTitle { text-shadow: none; } .PaymentMethodFormAccordionItem .AccordionItemContent-title, .PaymentMethodFormAccordionItem .AccordionItemContent-titleContainer, .PaymentMethodFormAccordionItem .AccordionItemCover-title, .PaymentMethodFormAccordionItem .AccordionItemCover-titleContainer { width: 100%; } .PaymentMethodFormAccordionItem--disabled .AccordionItemHeader--clickable:hover:before { background: var(--checkout-white); cursor: default; opacity: 1; } .PaymentMethodFormAccordionItem--disabled .AccordionButton:hover { cursor: default; } .PaymentMethodFormOverflowAccordionItem .AccordionItemCover-label { display: none; } .PaymentMethodFormOverflowAccordionItem .AccordionItemCover-content { padding-bottom: 0; padding-top: var(--space-3); } .PaymentMethodFormAccordionOverflowItem-icons { gap: var(--space-4); } .PaymentMethodFormAccordionOverflowItem-icons img { border-radius: 2px; height: 16px; max-width: 24px; width: auto; } .PaymentMethodFormOverflowAccordionItem .AccordionItemCover .PaymentMethodFormOverflowAccordionItemTitle { color: var(--checkout-gray500); transition: text-shadow .1s ease; } .PaymentMethodFormOverflowAccordionItem .AccordionItemCover:hover .PaymentMethodFormOverflowAccordionItemTitle { text-shadow: 0 0 .5px var(--checkout-gray500),0 0 .5px var(--checkout-gray500); } .PaymentMethodFormOverflowAccordionItem--disabled .AccordionItemCover:hover .PaymentMethodFormOverflowAccordionItemTitle { text-shadow: none; } .PaymentMethodFormOverflowAccordionItemTitle { gap: var(--space-2); } .PaymentMethodFormOverflowAccordionItem .AccordionItemContent-title, .PaymentMethodFormOverflowAccordionItem .AccordionItemContent-titleContainer, .PaymentMethodFormOverflowAccordionItem .AccordionItemCover-title, .PaymentMethodFormOverflowAccordionItem .AccordionItemCover-titleContainer { width: 100%; } .PaymentMethodFormOverflowAccordionItem--disabled .AccordionItemHeader--clickable:hover:before { background: var(--checkout-white); opacity: 1; } .PaymentMethodFormOverflowAccordionItem--disabled .AccordionButton:hover { cursor: default; } .PaymentMethodFormOverflowAccordionItem .AccordionButton svg { fill: var(--checkout-gray500); transition: fill .1s ease; } .PaymentMethodFormOverflowAccordionItem .AccordionItemCover:hover .AccordionButton svg { fill: var(--checkout-gray800); } .PaymentMethodFormOverflowAccordionItem-cover { padding: var(--space-3) var(--space-4); } .PaymentMethodFormOverflowAccordionItem .AccordionItemHeader--clickable:before { margin: -8px -12px -7px; } .LinkSignUpForm { margin-top: var(--space-6); } .AccordionItemCover-actionContainer { height: 0; } .PaymentMethodFormAccordionItem .AffirmPayment-ContentCard, .PaymentMethodFormAccordionItem .AfterpayClearpayPayment-ContentCard, .PaymentMethodFormAccordionItem .CashappInstructions-ContentCard, .PaymentMethodFormAccordionItem .KlarnaPayment-ContentCard, .PaymentMethodFormAccordionItem .NextActionInstructions, .PaymentMethodFormAccordionItem .PayNowInstructionsText-ContentCard, .PaymentMethodFormAccordionItem .PixPayment-ContentCard, .PaymentMethodFormAccordionItem .PromptPayInstructionsText-ContentCard, .PaymentMethodFormAccordionItem .RedirectInstructions, .PaymentMethodFormAccordionItem .SwishInstructionsText-ContentCard, .PaymentMethodFormAccordionItem .WechatPayInstructionsText-ContentCard { border: none; box-shadow: none; padding: 0; } .PaymentMethodFormAccordionItem .PaymentWalletInstructions { margin-left: 0; } .PaymentMethodFormAccordionItem .NgMarketInstructionsText-footer, .PaymentMethodFormAccordionItem .PayNowInstructionsText-ContentCard, .PaymentMethodFormAccordionItem .PromptPayInstructionsText-ContentCard, .PaymentMethodFormAccordionItem .SwishInstructionsText-ContentCard { padding-top: var(--space-1); } .PaymentMethodFormAccordionItem .billing-container { /* !important reason: legacy */ margin-bottom: unset!important; } .PaymentMethodFormOverflow-container .AccordionItem:first-child { /* !important reason: legacy */ border-radius: 0!important; border-top: var(--border); } .PaymentMethodFormAccordion-error { padding-top: var(--space-2); } .PaymentMethodFormAccordion--invalid { box-shadow: var(--error-border-box-shadow); } .AlternatePaymentToggle-container { text-align: center; } .AlternatePaymentToggle-button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; outline: inherit; padding: 0 0 12px; text-decoration: underline dotted var(--checkout-gray400); -webkit-text-decoration: underline dotted var(--checkout-gray400); width: 100%; } .ExpandedSavedInfo { border-top: var(--border); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 14px; } .ExpandedSavedInfo:first-child { border-top: none; } .ExpandedSavedInfo-label { padding: var(--space-3); } .ExpandedSavedInfo-label--expanded { border-bottom: 1px solid var(--checkout-gray50); } .ExpandedSavedInfo-content { -ms-flex-pack: justify; border: 1px solid var(--checkout-gray50); border-radius: var(--rounded); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: var(--space-2); } .ExpandedSavedInfo-content:last-child { margin-bottom: var(--space-3); } .ExpandedSavedInfo-content:hover { border: 1px solid #000; border-radius: var(--rounded); } .ExpandedSavedInfo-content:hover:not([disabled]) { border: 1px solid var(--checkout-gray50); border-radius: var(--rounded); } .ExpandedSavedInfo-content--selected, .ExpandedSavedInfo-content--selected:hover:not([disabled]) { border: 1px solid #000; border-radius: var(--rounded); } .ExpandedSavedInfo-content button { background: none; border: 0 solid transparent; cursor: pointer; } .ExpandedSavedInfo-cardNumber { -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-color: transparent; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: auto; margin-top: auto; } .ExpandedSavedInfo-cardNumber--expired { margin-bottom: auto; margin-top: auto; opacity: .5; } .ExpandedSaveInfo-primaryAction { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-left: 4px; padding-bottom: var(--space-3); padding-top: var(--space-3); width: 100%; } .ExpandedSaveInfo-primaryAction:disabled { pointer-events: none; } .ExpandedSaveInfo-primaryAction--error { color: var(--checkout-red); padding-bottom: var(--space-2); padding-top: var(--space-2); } .ExpandedSaveInfo-secondaryAction { -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #1a1a1a; padding-left: var(--space-3); padding-right: var(--space-3); } .ExpandedSaveInfo-activeAction { padding-top: var(--space-1); } .ExpandedSaveInfo-inactiveAction { padding-top: 13px; } .ExpandedSaveInfo-secondaryAction:disabled { padding-left: var(--space-3); padding-right: var(--space-3); pointer-events: none; } .ExpandedSaveInfo-secondaryAction:hover:active { color: var(--checkout-red); } .ExpandedSavedInfoRow-error { -ms-flex-pack: start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-color: rgba(220,39,39,.04); border-radius: var(--rounded); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; padding: var(--space-1) var(--space-2); } .ExpandedSavedInfoRow-error, .ExpandedSavedInfoRow-error .Text { margin-left: var(--space-2); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .ExpandedSavedInfoRow-error .Text { -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; } .ExpandedSavedInfoRow-error .Icon { -ms-flex-preferred-size: 12px; -webkit-flex-basis: 12px; flex-basis: 12px; } .ExpandedSavedInfo-showMore { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding-bottom: var(--space-2); padding-top: var(--space-2); width: 100%; } .ExpandedSavedInfo-showMore .Icon { background-color: var(--checkout-gray25); border-radius: var(--rounded); color: var(--checkout-gray400); margin-left: var(--space-1); padding: var(--space-1); } .ExpandedSavedInfo-showMoreText { margin-left: var(--space-2); padding-top: var(--space-1); } .ExpandedSavedInfo-savedCardsContainer { max-height: 305px; overflow: scroll; overflow-x: hidden; overflow-y: auto; padding-left: var(--space-3); padding-right: var(--space-3); } .ExpandedSavedInfo-savedCardsContainer--expanded { padding-top: var(--space-2); } .PaymentMethodAccordionItem .ExpandedSavedInfo-content:first-child { margin-top: var(--space-3); } .PaymentMethodAccordionItem .ExpandedSavedInfo-savedCardsContainer { max-height: 320px; } .SavedInfoSummary-cardNumber { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .SavedInfoSummary-cardNumber--expired { opacity: .5; } .ReadOnlyFormField-action button { transition: color .1s ease-out; } .SavedInfoSummary-logOut { color: var(--checkout-text-font-color); } .SavedInfoSummary-enterPhoneNumberText { display: inline-block; padding-bottom: var(--space-1); } .SavedInfoSummary .ReadOnlyForm { background-color: var(--checkout-white); } .TaxIdCollection-Container { clear: both; } .TaxIdCollection-TooltipContext { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin-left: var(--space-1); -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } .p-PromoBadge-LpmPromotionText { -ms-flex-pack: center; background: #ecfed7; border-radius: 4px; color: #006908; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; margin: 0; padding: 1.5px 4px; white-space: nowrap; } @-webkit-keyframes shimmer { 0% { background-position: 95%; } to { background-position: 0; } } @keyframes shimmer { 0% { background-position: 95%; } to { background-position: 0; } } .Tabs-TabListItem:not(.Tabs-TabListItem--is-selected) .shine { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: shimmer; animation-name: shimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #c9f695; background-image: linear-gradient(-45deg,rgba(0,0,0,0),rgba(255,255,255,.2) 40%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.2) 60%,rgba(0,0,0,0)); background-position: 50%; background-repeat: no-repeat; background-size: 150px 150px; display: inline-block; overflow: hidden; } @-webkit-keyframes elements-shimmer { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(200%); transform: translateX(200%); } } @keyframes elements-shimmer { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(200%); transform: translateX(200%); } } .Tab:not(.p-Tab--selected) .shine:before { -webkit-animation: elements-shimmer 3s ease .5s infinite; animation: elements-shimmer 3s ease .5s infinite; background: linear-gradient(-45deg,rgba(0,0,0,0),rgba(255,255,255,.2) 30%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.2) 70%,rgba(0,0,0,0)); background-repeat: no-repeat; background-size: 80% 100%; content: ""; height: 100%; position: absolute; width: 100%; } .RedactedCardNumber--expired { opacity: .5; } .LinkPaymentMethodAccordionItem--recollecting .LinkBillingAccordionItem { margin-top: var(--link-container-spacing); } .LinkPaymentMethodAccordionItem--recollecting .LinkBillingAccordionItem .AccordionItemCover-label { margin-bottom: 0; } .LinkPaymentMethodAccordionItem .AccordionItemCover-content { padding-bottom: 0; padding-top: var(--link-container-spacing); } .LinkPaymentMethodAccordionItem--footer { border-top: var(--link-border-separator); padding-top: var(--space-3); } .LinkPaymentMethodAccordionItem .PromoText { color: var(--link-text-muted); font-size: var(--link-text-font-size-detail); line-height: var(--link-text-line-height-detail); } .LinkPaymentMethodAccordionItem .IneligibleText .Link, .LinkPaymentMethodAccordionItem .PromoText .Link { color: var(--link-text-muted); text-decoration: underline; } .LinkPaymentMethodAccordionItem .Text.p-PromoBadge-financialIncentiveText { background-color: var(--link-text-action); color: var(--link-color-neutral-0); font-size: var(--link-text-font-size-caption); line-height: var(--link-text-line-height-caption); } .LinkPaymentMethodAccordionItem .LinkPaymentMethodAccordionItem-container>.flex-item:not(:first-child) { padding-top: var(--link-container-spacing); } .LinkPhoneNumberAccordionItem .FormFieldGroup-child { margin-top: var(--space-1); } .LinkPurchaseProtectionAccordionItem { border-bottom-left-radius: var(--link-container-rounded); border-bottom-right-radius: var(--link-container-rounded); } .LinkPurchaseProtectionAccordionItem--returningUser-cover, .LinkPurchaseProtectionAccordionItem-cover { padding: var(--space-2); padding-left: var(--space-4); } .LinkPurchaseProtectionAccordionItem .AccordionItemCover-content { padding: 0; } .LinkPurchaseProtectionAccordionItem-icon--otp { fill: var(--link-icon-brand); } .LinkPurchaseProtectionAccordionItem-icon--returningUser { fill: var(--link-icon-brand); -webkit-animation: icon-transition 1s; animation: icon-transition 1s; } .LinkPurchaseProtectionAccordionItemContent--expanded { padding-top: var(--link-container-spacing); } @-webkit-keyframes icon-transition { 0% { fill: var(--link-color-neutral-200); } 50% { fill: var(--link-color-neutral-200); } to { fill: var(--link-icon-brand); } } @keyframes icon-transition { 0% { fill: var(--link-color-neutral-200); } 50% { fill: var(--link-color-neutral-200); } to { fill: var(--link-icon-brand); } } .LinkConfirmActionModalContent { text-align: center; } .LinkConfirmActionModalContent-error { background-color: var(--notice-background-color-red); border-radius: var(--rounded); padding: var(--space-1); } .LinkConfirmActionModalContent-button { width: 100%; } .LinkConfirmActionModalContent-button:disabled { background-color: var(--checkout-light-gray-background); } .LinkConfirmActionModalContent-button .Spinner { margin-bottom: -1px; margin-top: -1px; } .LinkConfirmActionModalContent-buttonGroup, .LinkConfirmActionModalContent-textGroup { max-width: inherit; } .LinkConfirmActionModal { border-radius: var(--link-modal-rounded); max-width: var(--link-modal-width); padding: var(--space-5); width: 100%; } .LinkConfirmActionModal-overlay { background: rgba(0,0,0,.2); } .MultistepUseSavedInfoButton { padding-bottom: var(--space-2); } .ShippingSelector-item-label { cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; } .ShippingSelector-name { margin-left: var(--space-3); } .PickerItem .ShippingSelector-name { margin-left: 0; } .ShippingSelector-display-name { margin-right: .5em; } .ShippingSelector-price { margin-left: auto; } .ShippingSelector-input-container.CheckoutInput { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; height: auto; line-height: 1.125; } .ShippingSelector-isDisabled { box-shadow: var(--disabled-border-box-shadow); color: var(--checkout-input-disabled-color); transition: background-color 100000000s,box-shadow 0s linear; } .ShippingSelector-radio { margin-top: 2px; } .ShippingSelector-requestInFlight:not(.ShippingSelector--selectedOption)>* { opacity: var(--disabled-opacity); pointer-events: none; transition: opacity .2s ease; } .ShippingSelector-input-container:before { background: transparent; border-radius: var(--rounded); bottom: 0; content: ""; display: block; left: 0; margin: 4px; opacity: .2; pointer-events: none; position: absolute; right: 0; top: 0; transition: opacity .15s var(--accordion-item-background-transition-curve),margin .15s var(--accordion-item-background-transition-curve); will-change: transform; z-index: var(--checkout-z-index-background); } @media (hover:hover) { .ShippingSelector-input-container:hover:before { background: var(--checkout-gray-light); opacity: .7; } } @media only screen and (max-width:991.98px) { .ShippingSelector-radio { margin-top: 4px; } } @media only screen and (min-width:992px) { .App-Container:not(.App-Container--setupMode) .CheckoutInput.ShippingSelector-input-container { height: auto; } } .LinkPaymentForm .AccordionButton { opacity: 1; transition: opacity .2s ease; vertical-align: middle; } .LinkPaymentForm--disabled .AccordionButton { opacity: .3; pointer-events: none; } .LinkPaymentMethodForm-addPaymentConsent { margin-top: var(--space-4); } .Fade-item>.LinkPaymentForm-container { margin: 0; } .LinkPaymentForm--linkBranded { font-family: var(--link-text-font-family); } .App-Container .LinkPaymentForm--linkBranded .Text { letter-spacing: normal; } .LinkPaymentForm--linkBranded .Text-color--red { color: var(--link-text-danger); } .LinkPaymentForm--linkBranded span[role=alert] { font-size: var(--link-text-font-size-detail); line-height: var(--link-text-line-height-detail); } .LinkPaymentForm--linkBranded .Notice--red .Notice-icon { color: var(--link-text-danger); } .LinkPaymentForm--linkBranded .ConnectionsBankPicker-inputWrapper { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; } .LinkPaymentForm--linkBranded .ConnectionsBankPicker-searchIcon { fill: var(--link-text-muted); height: var(--link-system-icon-svg-size); left: var(--space-3); top: auto; width: var(--link-system-icon-svg-size); } .LinkPaymentForm--linkBranded .ConnectionsBankPicker-inputWrapper input { padding-left: 36px; } .LinkPaymentForm--linkBranded .Button--checkoutSecondaryLink, .LinkPaymentForm--linkBranded .Button--checkoutSecondaryLink .Text { color: var(--link-text-action); font-weight: var(--link-text-font-weight-body-emphasized); text-decoration: none; } .LinkPaymentForm--linkBranded .Button--checkoutSecondaryLink:focus-visible { box-shadow: var(--link-default-focus-border-box-shadow); outline: none; } .LinkPaymentForm--linkBranded .Button-textCheckoutSecondary { border-radius: var(--link-input-rounded); font-size: var(--link-text-font-size-detail); line-height: var(--link-text-line-height-detail); margin-left: -8px; padding: var(--space-0) var(--space-2); } .LinkPaymentForm--linkBranded .Button-textCheckoutSecondary:hover { background-color: var(--link-text-action-background); } .LinkPaymentForm--linkBranded .Button--checkoutSecondaryLink:focus .Button-textCheckoutSecondary { background-color: var(--link-text-action-background); color: var(--link-text-action-focus); } .LinkPaymentForm--linkBranded .Link--checkout--secondary { color: var(--link-text-subdued); text-decoration: underline solid; } .LinkPaymentForm--linkBranded .CheckoutInput, .LinkPaymentForm--linkBranded .FormFieldGroup-child, .LinkPaymentForm--linkBranded .Select-source { min-height: var(--link-input-height); } .App-Container .LinkPaymentForm--linkBranded .CheckoutInput, .App-Container .LinkPaymentForm--linkBranded .CheckoutInput::-webkit-input-placeholder, .App-Container .LinkPaymentForm--linkBranded .Select-source, .App-Container .LinkPaymentForm--linkBranded .Select-source::-webkit-input-placeholder { color: var(--link-text-default); font-size: var(--link-text-font-size-body); letter-spacing: normal; line-height: var(--link-text-line-height-body); } .App-Container .LinkPaymentForm--linkBranded .CheckoutInput, .App-Container .LinkPaymentForm--linkBranded .CheckoutInput::-moz-placeholder, .App-Container .LinkPaymentForm--linkBranded .Select-source, .App-Container .LinkPaymentForm--linkBranded .Select-source::-moz-placeholder { color: var(--link-text-default); font-size: var(--link-text-font-size-body); letter-spacing: normal; line-height: var(--link-text-line-height-body); } .App-Container .LinkPaymentForm--linkBranded .CheckoutInput, .App-Container .LinkPaymentForm--linkBranded .CheckoutInput:-ms-input-placeholder, .App-Container .LinkPaymentForm--linkBranded .Select-source, .App-Container .LinkPaymentForm--linkBranded .Select-source:-ms-input-placeholder { color: var(--link-text-default); font-size: var(--link-text-font-size-body); letter-spacing: normal; line-height: var(--link-text-line-height-body); } .App-Container .LinkPaymentForm--linkBranded .CheckoutInput, .App-Container .LinkPaymentForm--linkBranded .CheckoutInput::placeholder, .App-Container .LinkPaymentForm--linkBranded .Select-source, .App-Container .LinkPaymentForm--linkBranded .Select-source::placeholder { color: var(--link-text-default); font-size: var(--link-text-font-size-body); letter-spacing: normal; line-height: var(--link-text-line-height-body); } .App-Container .LinkPaymentForm--linkBranded .CheckoutInput:disabled, .App-Container .LinkPaymentForm--linkBranded .Select-source:disabled { color: var(--link-text-muted); } .App-Container .LinkPaymentForm--linkBranded .CheckoutInput::-webkit-input-placeholder, .App-Container .LinkPaymentForm--linkBranded .Select-source::-webkit-input-placeholder { color: var(--link-text-muted); } .App-Container .LinkPaymentForm--linkBranded .CheckoutInput::-moz-placeholder, .App-Container .LinkPaymentForm--linkBranded .Select-source::-moz-placeholder { color: var(--link-text-muted); } .App-Container .LinkPaymentForm--linkBranded .CheckoutInput:-ms-input-placeholder, .App-Container .LinkPaymentForm--linkBranded .Select-source:-ms-input-placeholder { color: var(--link-text-muted); } .App-Container .LinkPaymentForm--linkBranded .CheckoutInput::placeholder, .App-Container .LinkPaymentForm--linkBranded .Select-source::placeholder { color: var(--link-text-muted); } .LinkPaymentForm--linkBranded .Select .InlineSVG.Select-arrow { fill: var(--link-icon-default); } .LinkPaymentForm--linkBranded .FormFieldGroup-labelContainer label[for=cardNumber-fieldset], .LinkPaymentForm--linkBranded .FormFieldGroup-labelContainer label[for=shipping-address-fieldset] { display: none; } .LinkPaymentForm--linkBranded .FormFieldGroup-labelContainer label .Text { color: var(--link-text-default); font-size: var(--link-text-font-size-detail); line-height: var(--link-text-line-height-detail); } .LinkPaymentForm--linkBranded .Checkbox-Label, .LinkPaymentForm--linkBranded .Checkbox-Label .Text { color: var(--link-text-subdued); font-size: var(--link-text-font-size-detail); line-height: var(--link-text-line-height-detail); } .LinkPaymentForm .CardBrandChoice-select:focus { box-shadow: none; outline: none; } .LinkPaymentForm .CardBrandChoice-selectIconWrapper { position: relative; width: 56px; z-index: var(--checkout-z-index-field-icon); } .LinkPaymentForm .CardBrandChoice-selectIcon { margin: 0 var(--space-2); } .LinkPaymentForm .CardBrandChoice-chevron { margin-right: var(--space-2); } .ShippingAddressAccordionItem-descriptionContainer { gap: 8px; } .ShippingAddressAccordionItem-descriptionSectionContainer { gap: 2px; } .MultistepStep-blockContainer, .MultistepStep-column { gap: 16px; } .MultistepStep-column .AnimateSinglePresence { --animateSinglePresenceEnterDelayOpacity: 0.2s; --transitionHeightDuration: 0.2s; } .MultistepStep-column .AccordionItemCover-label span { overflow: hidden; text-overflow: ellipsis; width: 100%; } .MultistepStep-column--disabled .Accordion { box-shadow: var(--disabled-border-box-shadow); } .MultistepStep-headerRow { gap: 8px; line-height: 24px; } .MultistepStep-icon { fill: var(--checkout-gray400); opacity: 0; -webkit-transform: translateX(-16px); -ms-transform: translateX(-16px); transform: translateX(-16px); transition: opacity .4s cubic-bezier(0,.75,.3,1),-webkit-transform .4s cubic-bezier(0,.75,.3,1); transition: transform .4s cubic-bezier(0,.75,.3,1),opacity .4s cubic-bezier(0,.75,.3,1); transition: transform .4s cubic-bezier(0,.75,.3,1),opacity .4s cubic-bezier(0,.75,.3,1),-webkit-transform .4s cubic-bezier(0,.75,.3,1); } .MultistepStep-icon--isVisible { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .MultistepStep-label { -webkit-transform: translateX(-24px); -ms-transform: translateX(-24px); transform: translateX(-24px); transition: -webkit-transform .4s cubic-bezier(0,.75,.3,1); transition: transform .4s cubic-bezier(0,.75,.3,1); transition: transform .4s cubic-bezier(0,.75,.3,1),-webkit-transform .4s cubic-bezier(0,.75,.3,1); } .MultistepStep-label--withIcon { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .MultistepStep-content--hidden, .MultistepStep-cta--hidden { margin-bottom: -16px; } .MultistepStep-cta--showConfirmButtonActive { margin-top: -16px; } .MultistepPaymentForm-stepContainer { background-color: #fff; gap: 16px; opacity: 1; position: relative; z-index: var(--checkout-z-index-multistep-form); } .PaypalButtonContainer, .PaypalButtonContainer .PaypalFrame { overflow: hidden; } .PaypalButtonContainer .PaypalFrame.is-borderStyle--square { margin-left: -4px; width: 105%; } :root { --wallet-button-height: 44px; } .PaymentRequestOrHeader { position: relative; } .PaymentRequestOrHeader--multistep { z-index: var(--checkout-z-index-multistep-payment-request-header); } .ButtonAndDividerContainer, .PaymentHeaderContainer { width: 100%; } .PaymentHeader { padding-bottom: var(--space-4); } .ButtonAndDividerContainer { opacity: 0; } .ButtonAndDividerContainer .Divider { padding-bottom: var(--space-4); padding-top: var(--space-4); } .ButtonContainer.ButtonContainer { height: var(--wallet-button-height); margin-bottom: var(--space-3); position: relative; width: 100%; } .ButtonContainer.is-loading { opacity: .65; pointer-events: none; } .ButtonContainer.has-twoButtons .ButtonWrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; gap: var(--space-2); } .ButtonContainer.has-twoButtons .ButtonWrapper>div { -webkit-flex: 1 1 0; -ms-flex: 1 1 0; flex: 1 1 0; } @-webkit-keyframes placeload { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes placeload { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } to { -webkit-transform: translateX(100%); transform: translateX(100%); } } .is-fontFamily--Inconsolata .PaymentRequestOrHeader .Divider .Text, .is-fontFamily--PTSans .PaymentRequestOrHeader .Divider .Text, .is-fontFamily--TitilliumWeb .PaymentRequestOrHeader .Divider .Text, .is-fontFamily--UbuntuMono .PaymentRequestOrHeader .Divider .Text { font-size: var(--checkout-font-size-15); } .App-Global-Fields { margin-bottom: var(--space-2); } .PaymentMethod-Heading { margin-top: var(--space-3); } .ShippingDetails-Heading { margin-top: 0; } .PaymentForm-paymentMethodForm .ShippingDetails-Heading { margin-top: var( --space-3 ); } .Tabs-TabListItem .Tabs-TabListItemContent .RotatingIcon#wechat_pay-rotating svg, .Tabs-TabListItem#promptpay-tab .Tabs-TabListItemContent svg, .Tabs-TabListItem#wechat_pay-tab .Tabs-TabListItemContent svg { -webkit-filter: none; filter: none; } .is-fontFamily--Inconsolata .PaymentForm-confirmPaymentContainer .PolicyHighlight-container .Text, .is-fontFamily--PTSans .PaymentForm-confirmPaymentContainer .PolicyHighlight-container .Text, .is-fontFamily--TitilliumWeb .PaymentForm-confirmPaymentContainer .PolicyHighlight-container .Text, .is-fontFamily--UbuntuMono .PaymentForm-confirmPaymentContainer .PolicyHighlight-container .Text { font-size: var(--checkout-font-size-13); } .PaymentForm-confirmPaymentContainer { margin-bottom: var(--space-6); } .PaymentForm-climateProgramBadge .ClimateProgramBadge-Container { border-bottom: none; border-top: var(--border); margin-top: var(--space-4); padding-top: var(--space-5); } @media only screen and (min-width:992px) { .PaymentFormFixedHeightContainer { min-height: 400px; } } .Lpm-Promotion-Message-Container { margin-bottom: var(--space-5); } .PolicyHighlight-container { width: 100%; } .PolicyHighlight-highlight { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: var(--checkout-font-size-12); margin: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .PolicyHighlight-icon { color: var(--checkout-gray500); margin-bottom: 1px; margin-right: var(--space-2); } .InvalidSession { text-align: center; } .InvalidSession-icon { height: 48px; } .InvalidSession-icon, .InvalidSession-message, .InvalidSession-title { margin-bottom: var(--space-4); } .App-Container.is-embedded .InvalidSession { margin: var(--space-9) 0; } :root { --default-transition: 0.2s ease; --button-height: 44px; --button-hover-background-color: rgb(0,94,187); --button-hover-shadow: inset 0 0 0 1px rgba(50,50,93,0.1),0 6px 15px 0 rgba(50,50,93,0.2),0 2px 2px 0 rgba(0,0,0,0.1); --button-focus-shadow: inset 0 0 0 1px rgba(50,50,93,0.1),0 6px 15px 0 rgba(50,50,93,0.2),0 2px 2px 0 rgba(0,0,0,0.1),0 0 0 4px rgba(50,151,211,0.3); --success-spinner-move-duration: 0.3s; --spinner-width: 20px; } .ManageSubscriptionButton { -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 0; border-radius: var(--rounded); box-shadow: var(--submit-button-shadow); color: var(--checkout-white); cursor: pointer; height: var(--button-height); margin-top: var(--space-3); outline: none; overflow: hidden; padding: 0; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); transition: all var(--default-transition),box-shadow .08s ease-in; width: 100%; } .ManageSubscriptionButton-text { left: 0; line-height: var(--button-height); position: absolute; text-align: center; top: 0; transition: all var(--default-transition); width: 100%; } .ManageSubscriptionButton-iconContainer { height: 100%; left: 0; position: absolute; top: 0; -webkit-transform: translateX(calc(var(--space-4)*-1)); -ms-transform: translateX(calc(var(--space-4)*-1)); transform: translateX(calc(var(--space-4)*-1)); transition: -webkit-transform var(--success-spinner-move-duration) ease; transition: transform var(--success-spinner-move-duration) ease; transition: transform var(--success-spinner-move-duration) ease,-webkit-transform var(--success-spinner-move-duration) ease; width: 100%; } .ManageSubscriptionButton-icon { display: -webkit-flex; display: -ms-flexbox; display: flex; opacity: 0; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all var(--default-transition); } .ManageSubscriptionButton-spinnerIcon .Icon, .ManageSubscriptionButton-spinnerIcon svg { height: var(--spinner-width); width: var(--spinner-width); } .ManageSubscriptionButton-spinnerIcon ellipse { stroke-width: 1; stroke-linecap: round; stroke-dasharray: 70; stroke-dashoffset: 30; fill: transparent; -webkit-animation: spinner-spin .6s linear infinite; animation: spinner-spin .6s linear infinite; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .ManageSubscriptionButton--clickable:hover { background-color: var(--button-hover-background-color); box-shadow: var(--button-hover-shadow); } .ManageSubscriptionButton--clickable:active { -webkit-transform: scale(.99); -ms-transform: scale(.99); transform: scale(.99); } .ManageSubscriptionButton--clickable:focus { box-shadow: var(--button-focus-shadow); } .ManageSubscriptionButton-text--pre { opacity: 0; -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); } .ManageSubscriptionButton-text--post { opacity: 0; -webkit-transform: translateX(-16px); -ms-transform: translateX(-16px); transform: translateX(-16px); } .ManageSubscriptionButton-icon--pre { opacity: 0; -webkit-transform: translateY(-50%) scale(.9); -ms-transform: translateY(-50%) scale(.9); transform: translateY(-50%) scale(.9); } .ManageSubscriptionButton-icon--current { opacity: 1; } @-webkit-keyframes spinner-spin { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes spinner-spin { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .App-Container.is-squareBordered .ManageSubscriptionButton { border-radius: 0; } .App-Container.is-veryRoundBordered .ManageSubscriptionButton { border-radius: var(--very-rounded-button); } .ManageSubscriptionColumn-emailContainer, .ManageSubscriptionColumn-header { margin-bottom: var(--space-5); } .ManageSubscriptionColumn-ctaContainer { margin-bottom: var(--space-6); text-align: center; } .ManageSubscriptionColumn-ctaButtonContainer { margin-bottom: var(--space-4); } .ManageSubscriptionColumn-ctaLink { background-color: var(--checkout-white); border-radius: var(--rounded); box-shadow: var(--border-box-shadow); color: var(--checkout-text-font-color); margin: 0; padding: var(--space-3); } .PaymentFailure { text-align: center; } .PaymentFailure-icon { height: 64px; } .PaymentFailure-icon, .PaymentFailure-title { margin-bottom: var(--space-4); } .PaymentFailure-backLink { font-size: var(--checkout-font-size-14); margin-top: var(--space-5); } .PaymentFailure-message, .UpiAwaitNotification-iconContainer { margin-bottom: var(--space-4); } .UpiAwaitNotification-description { text-align: center; width: 380px; } .UpiAwaitNotification-backLink { font-size: var(--checkout-font-size-14); margin-top: var(--space-5); } :root { --checkout-background-shadow: 15px 0 30px 0 rgba(0,0,0,0.18); } .App-Background { bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: var(--checkout-z-index-background); } .App-Container { height: 100vh; height: calc(100vh - 200px); } .App-Container:not(.is-noBackground) { background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0) 500px,var(--checkout-white) 500px,var(--checkout-white)); } .App { -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: 0; width: 100%; } .App.App--singleItem { padding-top: var(--space-4); } .App.App--customAmount { padding-top: var(--checkout-header-size); } .App.App--multiItem { padding-top: 0; } .App-Overview>:not(.Header), .App-Payment>* { margin: 0 auto; max-width: var(--checkout-app-tablet-constraint); } .App-Overview, .App-Payment { padding: 0 var(--checkout-app-gutter-width) var(--space-4); width: 100%; } .App-Payment { background-color: var(--checkout-white); padding-top: var(--space-5); line-height: 1.2em; } .App-Container:not(.is-noBackground) .App-Payment { box-shadow: 0 0 30px rgba(0,0,0,.04); } .App-Footer { background-color: var(--checkout-white); -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding-bottom: var(--space-6); padding-top: var(--space-4); width: 100%; } .App-Payment-Header { display: none; height: var(--checkout-lg-header-size); margin-bottom: var(--space-6); padding-top: var(--space-2); position: absolute; top: 0; } .App-Container .App { -webkit-animation: enter-no-scale .6s; animation: enter-no-scale .6s; position: relative; } .App-Container--noAnimation .App { -webkit-animation: enter-no-scale .2s; animation: enter-no-scale .2s; position: relative; } .App-Payment.is-mobile.is-noBackground:not(.is-multistep,.is-setup) { padding-top: 0; } .App-Overview-OrderDetails { display: none; overflow-y: visible; } .App-Overview-OrderDetails.is-expanded { overflow-x: hidden; overflow-y: auto; } .App-ManageSubscriptionColumn-Container { position: relative; } .App-ManageSubscriptionColumn-AnimationContainer { left: 0; position: absolute; top: 0; width: 100%; } @media only screen and (min-width:992px) { .App { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .App:not(.App--multistep) { -webkit-transform: translateY(max(48px,calc(50vh - 55%))); -ms-transform: translateY(max(48px,calc(50vh - 55%))); transform: translateY(max(48px,calc(50vh - 55%))); } .App.App--multiItem, .App.App--singleItem { padding-top: 0; } .App.App--multistep { padding-top: 10vh; } .App-Container:not(.is-noBackground) { background-image: none; } .App-Container:before { box-shadow: var(--checkout-background-shadow); } .App-Container:not(.App-Container--setupMode):before { -webkit-animation-fill-mode: both; animation-fill-mode: both; background: var(--checkout-white); content: " "; height: 100%; position: fixed; right: 0; top: 0; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; width: 50%; } .App-Container:not(.App-Container--setupMode) .App { -ms-flex-pack: justify; -webkit-animation-delay: .2s; animation-delay: .2s; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between; max-width: var(--checkout-app-width); } .App-Container:not(.App-Container--setupMode) .App-Payment-Header { display: block; } .App-Container:not(.App-Container--setupMode) .App-Overview { padding-bottom: calc(var(--checkout-lg-footer-height) + var(--space-3)*2); } .App-Container:not(.App-Container--setupMode) .App-Overview, .App-Container:not(.App-Container--setupMode) .App-Payment { margin-bottom: 0; width: var(--checkout-app-tablet-constraint); } .App-Container:not(.App-Container--setupMode) .App-Overview-OrderDetails { display: block; margin-left: -5px; padding-left: 5px; } .App-Container:not(.App-Container--setupMode) .App-Footer { bottom: 0; left: 0; margin: var(--space-3) 0; position: absolute; } .App-Payment { height: 100%; padding-top: 0; } .App-Container:not(.is-noBackground) .App-Payment { box-shadow: none; } .App-Container { min-height: 765px; } .App-Container--setupMode .App { max-width: 444px; } .App-Container--setupMode .App-Payment { padding: var(--space-6); } .App-Overview, .App-Payment { margin: 0; padding: 0; } .App-Footer { background-color: inherit; height: auto; padding: 0; width: auto; } .App-Container--setupMode:not(.is-noBackground) .App-Payment { background-color: var(--checkout-white); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.07); margin: var(--space-5) 0; } .App-Container--setupMode.is-squareBordered .App .App-Payment { border-radius: 0; } .App-Container--setupMode.is-veryRoundBordered .App .App-Payment { border-radius: var(--very-rounded); } .App-Container--setupMode .Header { padding: 0 var(--space-6); } .App-Overview .App-Payment>.PaymentSuccess { margin-top: var(--space-9); } } @-webkit-keyframes enter { 0% { opacity: 0; -webkit-transform: scale(.97); transform: scale(.97); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes enter { 0% { opacity: 0; -webkit-transform: scale(.97); transform: scale(.97); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes enter-no-scale { 0% { opacity: 0; } to { opacity: 1; } } @keyframes enter-no-scale { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes enter-background-shadow { 0% { box-shadow: none; opacity: 0; -webkit-transform: scaleX(.9); transform: scaleX(.9); } to { box-shadow: var(--checkout-background-shadow); opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes enter-background-shadow { 0% { box-shadow: none; opacity: 0; -webkit-transform: scaleX(.9); transform: scaleX(.9); } to { box-shadow: var(--checkout-background-shadow); opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } .is-fontFamily--BeVietnamPro.App-Container, .is-fontFamily--BeVietnamPro.Modal-Portal { font-family: Be Vietnam Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--Bitter.App-Container, .is-fontFamily--Bitter.Modal-Portal { font-family: Bitter,Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--ChakraPetch.App-Container, .is-fontFamily--ChakraPetch.Modal-Portal { font-family: Chakra Petch,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--EBGaramond.App-Container, .is-fontFamily--EBGaramond.Modal-Portal { font-family: EB Garamond,Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--Inconsolata.App-Container, .is-fontFamily--Inconsolata.Modal-Portal { font-family: Inconsolata,Consolas,Monaco,Liberation Mono,Lucida Console,monospace; } .is-fontFamily--Hahmlet.App-Container, .is-fontFamily--Hahmlet.Modal-Portal { font-family: Hahmlet,Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--Inter.App-Container, .is-fontFamily--Inter.Modal-Portal { font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--Lato.App-Container, .is-fontFamily--Lato.Modal-Portal { font-family: Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--LibreBaskerville.App-Container, .is-fontFamily--LibreBaskerville.Modal-Portal { font-family: Libre Baskerville,Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--Lora.App-Container, .is-fontFamily--Lora.Modal-Portal { font-family: Lora,Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--Merriweather.App-Container, .is-fontFamily--Merriweather.Modal-Portal { font-family: Merriweather,Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--MPLUS1Code.App-Container, .is-fontFamily--MPLUS1Code.Modal-Portal { font-family: M PLUS\ 1 Code,Consolas,Monaco,Liberation Mono,Lucida Console,monospace; } .is-fontFamily--Montserrat.App-Container, .is-fontFamily--Montserrat.Modal-Portal { font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--NotoSansJP.App-Container, .is-fontFamily--NotoSansJP.Modal-Portal { font-family: Noto Sans JP,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--NotoSans.App-Container, .is-fontFamily--NotoSans.Modal-Portal { font-family: Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--NotoSerif.App-Container, .is-fontFamily--NotoSerif.Modal-Portal { font-family: "Noto Serif",Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--Nunito.App-Container, .is-fontFamily--Nunito.Modal-Portal { font-family: Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--OpenSans.App-Container, .is-fontFamily--OpenSans.Modal-Portal { font-family: Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--OptimisticLatin.App-Container, .is-fontFamily--OptimisticLatin.Modal-Portal { font-family: Optimistic Latin,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--Oswald.App-Container, .is-fontFamily--Oswald.Modal-Portal { font-family: Oswald,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--Pridi.App-Container, .is-fontFamily--Pridi.Modal-Portal { font-family: Pridi,Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--PTSans.App-Container, .is-fontFamily--PTSans.Modal-Portal { font-family: PT Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--PTSerif.App-Container, .is-fontFamily--PTSerif.Modal-Portal { font-family: "PT Serif",Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--Raleway.App-Container, .is-fontFamily--Raleway.Modal-Portal { font-family: Raleway,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--Jost.App-Container, .is-fontFamily--Jost.Modal-Portal { font-family: Jost,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--JostSlab.App-Container, .is-fontFamily--JostSlab.Modal-Portal { font-family: Jost Slab,Apple Garamond,"Droid Serif",Times New Roman,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .is-fontFamily--SourceSansPro.App-Container, .is-fontFamily--SourceSansPro.Modal-Portal { font-family: Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--TitilliumWeb.App-Container, .is-fontFamily--TitilliumWeb.Modal-Portal { font-family: Titillium Web,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .is-fontFamily--UbuntuMono.App-Container, .is-fontFamily--UbuntuMono.Modal-Portal { font-family: Ubunutu Mono,Consolas,Monaco,Liberation Mono,Lucida Console,monospace; } .is-fontFamily--ZenMaruGothic.App-Container, .is-fontFamily--ZenMaruGothic.Modal-Portal { font-family: Zen Maru Gothic,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Ubuntu,sans-serif; } .PaymentRequiresActionPageMessage-button { background-color: var(--checkout-white50); border: 0; color: var(--checkout-white); transition: box-shadow .08s ease; } .PaymentRequiresActionPageMessage-button:not(:disabled):hover { background-color: var(--checkout-white50); box-shadow: inset 0 0 100px 100px rgba(255,255,255,.1); } .RedirectConfirmationPage { bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: var(--checkout-z-index-background); } .RedirectConfirmationPage-container { height: 100%; width: 100%; } .RedirectConfirmationPage-iconContainer { margin-bottom: var(--space-4); } .RedirectConfirmationPage-header { max-width: 380px; padding-top: var(--space-4); width: 100%; } .RedirectConfirmationPage-footer { background-color: #fff; padding-bottom: var(--space-4); padding-top: var(--space-4); width: 100%; } .RedirectConfirmationPage-content { background-color: #fff; padding: var(--space-6); width: 100%; } .RedirectConfirmationPage-testModeTag { margin-left: var(--space-2); } .RedirectConfirmationPage-messageLink { color: inherit; font-weight: var(--checkout-text-font-weight-500); text-decoration: underline; } @media only screen and (max-width:991.98px) { .RedirectConfirmationPage-content { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .RedirectConfirmationPage-messageContainer { max-width: 380px; } } @media only screen and (min-width:992px) { .RedirectConfirmationPage-container { margin-left: var(--space-4); margin-right: var(--space-4); width: 444px; } .RedirectConfirmationPage-content { border-radius: 12px; min-height: 60%; } .RedirectConfirmationPage-header { max-width: 100%; padding: var(--space-8) var(--space-4) var(--space-5); width: 100%; } .RedirectConfirmationPage-footer { background-color: transparent; padding-bottom: var(--space-8); padding-top: var(--space-5); } } .RedirectConfirmationPage-iconContainer { -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: slide-icon-up; animation-name: slide-icon-up; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } .RedirectConfirmationPage-message { -webkit-animation-delay: .6s; animation-delay: .6s; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: slide-message-up; animation-name: slide-message-up; -webkit-animation-timing-function: linear; animation-timing-function: linear; margin-top: var(--space-4); } @-webkit-keyframes slide-icon-up { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 50% { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slide-icon-up { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 50% { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slide-message-up { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(66%); transform: translateY(66%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slide-message-up { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(66%); transform: translateY(66%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ html { -webkit-text-size-adjust: 100%; line-height: 1.15; } h1 { font-size: 2em; margin: .67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace,monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace,monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: .35em .75em .625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } [hidden], template { display: none; } :root { --checkout-alpha25: 0.05; --checkout-alpha50: 0.1; --checkout-alpha100: 0.2; --checkout-alpha200: 0.3; --checkout-alpha300: 0.4; --checkout-alpha400: 0.5; --checkout-alpha500: 0.6; --checkout-alpha600: 0.7; --checkout-alpha700: 0.8; --checkout-alpha800: 0.9; --checkout-alpha900: 1; --checkout-text-dark-l: 10%; --checkout-text-light-l: 100%; --checkout-gray25: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha25)); --checkout-gray50: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha50)); --checkout-gray100: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha100)); --checkout-gray200: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha200)); --checkout-gray300: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha300)); --checkout-gray400: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha400)); --checkout-gray500: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha500)); --checkout-gray600: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha600)); --checkout-gray700: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha700)); --checkout-gray800: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha800)); --checkout-gray900: hsla(0,0%,var(--checkout-text-dark-l),var(--checkout-alpha900)); --checkout-lightGray25: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha25)); --checkout-lightGray50: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha50)); --checkout-lightGray100: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha100)); --checkout-lightGray200: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha200)); --checkout-lightGray300: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha300)); --checkout-lightGray400: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha400)); --checkout-lightGray500: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha500)); --checkout-lightGray600: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha600)); --checkout-lightGray700: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha700)); --checkout-lightGray800: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha800)); --checkout-lightGray900: hsla(0,0%,var(--checkout-text-light-l),var(--checkout-alpha900)); --checkout-blue: #0074d4; --checkout-blue-light: #0066bac7; --checkout-blue-dark: #0066ba; --checkout-green: #24b47e; --checkout-red: #dc2727; --checkout-yellow: #ffde92; --checkout-yellow-light: #fefbe7; --checkout-orange: #bb5504; --checkout-white: #ffffff; --checkout-black: #000000; --checkout-gray-light: #f7f7f7; --checkout-white25: rgba(255,255,255,0.05); --checkout-white50: rgba(255,255,255,0.1); --checkout-dark-mode-background: rgba(0,0,0,1); --checkout-dark-mode-paymentBackground: rgba(10,10,10,1); --checkout-dark-mode-input-placeholder-color: var(--checkout-lightGray300); --checkout-dark-mode-input-background-color: linear-gradient(0deg,rgba(255,255,255,0.08),rgba(255,255,255,0.08)),#000000; --checkout-input-color: var(--checkout-gray800); --checkout-input-placeholder-color: var(--checkout-gray400); --checkout-input-invalid-color: var(--checkout-red); --checkout-input-disabled-color: var(--checkout-gray300); --checkout-input-background-color: white; --sail-green100: #cbf4c9; --sail-green600: #0e6245; --sail-blue100: #d6ecff; --sail-blue500: #5469d4; --sail-blue600: #3d4eac; --sail-gray100: #e3e8ee; --sail-gray600: #4f566b; --sail-red100: #fde2dd; --sail-red600: #a41c4e; --sail-purple0: #ffffff; --sail-purple500: #675dff; --link-color-neutral-0: #ffffff; --link-color-neutral-25: #f5f6f8; --link-color-neutral-50: #ebeef1; --link-color-neutral-100: #d8dee4; --link-color-neutral-200: #b6c0cd; --link-color-neutral-300: #99a5b8; --link-color-neutral-400: #818da0; --link-color-neutral-500: #6c7688; --link-color-neutral-600: #596171; --link-color-neutral-700: #474e5a; --link-color-neutral-800: #353a44; --link-color-neutral-900: #21252c; --link-color-brand-50: #e6ffed; --link-color-brand-75: #b3fecf; --link-color-brand-100: #5eee97; --link-color-brand-200: #00d66f; --link-color-brand-300: #00c767; --link-color-brand-400: #00a355; --link-color-brand-500: #008545; --link-color-brand-600: #006635; --link-color-brand-700: #034f28; --link-color-brand-800: #023b1e; --link-color-brand-900: #011e0f; --link-color-danger: #ff2f4c; --link-text-default: var(--link-color-brand-900); --link-text-subdued: var(--link-color-neutral-600); --link-text-muted: var(--link-color-neutral-400); --link-text-danger: var(--link-color-danger); --link-text-action: var(--link-color-brand-500); --link-text-action-focus: var(--link-color-brand-600); --link-text-action-background: var(--link-color-brand-50); --link-border-default: var(--link-color-neutral-100); --link-border-separator: 1px solid var(--link-color-neutral-50); --link-border-danger: var(--link-color-danger); --link-icon-default: var(--link-color-neutral-500); --link-icon-danger: var(--link-color-danger); --link-icon-brand: var(--link-color-brand-200); --link-icon-background: var(--link-color-brand-50); --link-background-offset: var(--link-color-neutral-25); --link-purple: #635bff; --link-button-brand: var(--link-color-brand-200); --link-button-brand-hover: var(--link-color-brand-100); --link-button-brand-active: var(--link-color-brand-300); --link-text-button-hover: #00d66f0f; --link-text-button-active: #00d66f1a; --link-text-font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI","Jost","Helvetica Neue","Ubuntu",sans-serif; --link-text-font-size-title: 24px; --link-text-font-size-subtitle: 20px; --link-text-font-size-heading: 18px; --link-text-font-size-body: 16px; --link-text-font-size-body-emphasized: 16px; --link-text-font-size-detail: 14px; --link-text-font-size-caption: 12px; --link-text-font-size-caption-tight: 12px; --link-text-line-height-title: 32px; --link-text-line-height-subtitle: 32px; --link-text-line-height-heading: 24px; --link-text-line-height-body: 24px; --link-text-line-height-body-emphasized: 24px; --link-text-line-height-detail: 20px; --link-text-line-height-caption: 18px; --link-text-line-height-caption-tight: 16px; --link-text-font-weight-title: 700; --link-text-font-weight-subtitle: 700; --link-text-font-weight-heading: 700; --link-text-font-weight-body: 400; --link-text-font-weight-body-emphasized: 600; --link-text-font-weight-detail: 400; --link-text-font-weight-caption: 400; --link-text-font-weight-caption-tight: 400; --link-modal-rounded: 24px; --link-button-rounded: 12px; --link-button-rounded-sm: 6px; --link-input-rounded: 8px; --link-input-more-rounded: 12px; --link-container-rounded: 16px; --link-button-height: 56px; --link-input-height: 52px; --link-modal-width: 375px; --link-bank-icon-size: 32px; --link-verification-status-icon-size: 24px; --link-system-icon-size: 24px; --link-system-icon-svg-size: 16px; --link-system-icon-svg-size-lg: 18px; --link-payment-details-icon-width: 32px; --link-button-active-transform: scale(0.99); --link-button-hover-transform: scale(1.02); --link-button-disabled-text-opacity: 0.3; --link-icon-button-hover-background: rgba(0,0,0,0.03); --link-icon-button-active-background: rgba(0,0,0,0.06); --link-logo-xs: 12px; --link-logo-sm: 16px; --link-logo-md: 20px; --link-container-spacing: 20px; --link-text-button-padding: 6px; --link-accordion-item-nested-margins: 0px -20px -24px; --link-accordion-border-box-shadow: 0 0 0 1px rgba(11,26,38,0.06),0 4px 12px rgba(0,0,0,0.03),0 1px 3px rgba(0,0,0,0.04); --link-default-border-box-shadow: 0 0 0 1px var(--link-border-default); --link-highlight-border-box-shadow: 0 0 0 2px var(--link-color-brand-200); --link-selected-border-box-shadow: 0 0 0 1px var(--link-color-neutral-800); --link-danger-border-box-shadow: 0 0 0 1px var(--link-border-danger); --link-default-focus-border-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); --link-autofill-inset: 0 0 0px 1000px var(--checkout-yellow-light) inset; --link-disabled-inset: 0 0 0px 1000px var(--link-color-neutral-25) inset; --link-autofill-border-box-shadow: var(--link-default-border-box-shadow),var(--link-autofill-inset); --link-autofill-focus-border-box-shadow: var( --link-default-focus-border-box-shadow ),var(--link-autofill-inset); --link-autofill-error-border-box-shadow: var(--link-danger-border-box-shadow),var(--link-autofill-inset); --link-disabled-border-box-shadow: var(--link-default-border-box-shadow),var(--link-disabled-inset); --link-text-font-weight-500: 500; --link-text-font-weight-600: 600; --checkout-font-size-9: 9px; --checkout-font-size-10: 10px; --checkout-font-size-11: 11px; --checkout-font-size-12: 12px; --checkout-font-size-13: 13px; --checkout-font-size-14: 14px; --checkout-font-size-15: 15px; --checkout-font-size-16: 16px; --checkout-font-size-17: 17px; --checkout-font-size-20: 20px; --checkout-font-size-22: 22px; --checkout-font-size-24: 24px; --checkout-font-size-28: 28px; --checkout-font-size-29: 29px; --checkout-font-size-32: 32px; --checkout-font-size-36: 36px; --checkout-text-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Jost","Helvetica Neue","Ubuntu",sans-serif; --checkout-ja-text-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Jost","Helvetica Neue","Ubuntu","Hiragino Sans","Yu Gothic UI","Meiryo UI","Hiragino Kaku Gothic ProN",sans-serif; --checkout-zh-text-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Jost","Helvetica Neue","Ubuntu","PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","Microsoft JhengHei",sans-serif; --checkout-text-font-size: var(--checkout-font-size-16); --checkout-text-font-weight: 400; --checkout-text-font-weight-500: 500; --checkout-text-autocomplete-suggestions-font-weight: var( --checkout-text-font-weight-500 ); --checkout-text-font-color: var(--checkout-gray800); --checkout-input-font-size: var(--checkout-font-size-16); --checkout-lg-input-font-size: var(--checkout-font-size-14); --checkout-product-summary-total-font-default: var(--checkout-font-size-28); --checkout-product-summary-total-font-large: var(--checkout-font-size-29); --checkout-modal-bg: var(--checkout-white); --checkout-letter-spacing-sm: -0.1pt; --checkout-letter-spacing-md: 0.15pt; --checkout-letter-spacing-lg: 0.35pt; --border: 1px solid var(--checkout-gray50); --border-darkBg: 1px solid var(--checkout-gray50); --border-lightBg: 1px solid var(--checkout-lightGray50); --selected-border-color: var(--checkout-gray800); --selected-border: 1px solid var(--selected-border-color); --slightly-rounded: 3px; --rounded: 6px; --more-rounded: 16px; --more-rounded-button: 12px; --very-rounded: 18px; --super-rounded: 24px; --very-rounded-button: 22px; --very-rounded-image-border: 36px; --soft-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.035),0 1px 1.5px 0 rgba(0,0,0,0.025); --box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05); --md-box-shadow: 0 0 0 1px rgba(175,175,175,0.2),0 15px 35px 0 rgba(49,49,93,0.08),0 5px 15px 0 rgba(0,0,0,0.06); --border-box-shadow: 0 0 0 1px #e0e0e0,0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05); --border-box-shadow-dark-mode: 0 0 0 1px rgba(35,35,35,1); --border-box-shadowless: 0 0 0 1px #e0e0e0; --borderless-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05); --error-border-box-shadow: 0 0 0 1px #ef9896,0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05); --focus-border-box-shadow: 0 0 0 1px rgba(50,151,211,0.7),0 1px 1px 0 rgba(0,0,0,0.07),0 0 0 4px rgba(50,151,211,0.3); --hidden-focus-border-box-shadow: 0 0 0 1px rgba(50,151,211,0),0 1px 1px 0 rgba(0,0,0,0),0 0 0 4px rgba(50,151,211,0); --sm-focus-box-shadow: 0 0 0 1px rgba(50,151,211,0.7),0 1px 1px 0 rgba(0,0,0,0.07),0 0 0 4px rgba(50,151,211,0.3); --focus-border-box-shadow-light: 0 1px 1px 0 rgba(255,255,255,0.07),0 0 0 4px rgba(255,255,255,0.3); --focus-border-box-shadow-dark: 0 1px 1px 0 rgba(0,0,0,0.07),0 0 0 4px rgba(0,0,0,0.1); --selected-border-box-shadow: 0 0 0 1px var(--selected-border-color),0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05); --selected-focus-border-box-shadow: 0 0 0 1px var(--selected-border-color),0 1px 1px 0 rgba(0,0,0,0.07),0 0 0 4px rgba(50,151,211,0.3); --autofill-border-box-shadow: 0 0 0 1px #e0e0e0,0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05),0 0 0px 1000px var(--checkout-yellow-light) inset; --autofill-error-border-box-shadow: 0 0 0 1px rgba(220,39,39,0.5),0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05),0 0 0px 1000px var(--checkout-yellow-light) inset; --autofill-focus-border-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),0 0 0px 1000px var(--checkout-yellow-light) inset; --disabled-border-box-shadow: 0 0 0 1px #e0e0e0,0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05),0 0 0px 1000px var(--checkout-gray50) inset; --read-only-border-box-shadow: 0 0 0 1px #e0e0e0,0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05),0 0 0px 1000px var(--checkout-gray-light) inset; --autocomplete-dropdown-box-shadow: 0 15px 35px 0 rgba(49,49,93,0.08),0 5px 15px 0 rgba(0,0,0,0.06); --submit-button-shadow: inset 0 0 0 1px rgba(50,50,93,0),0 2px 5px 0 rgba(50,50,93,0.1),0 1px 1px 0 rgba(0,0,0,0.0); --checkout-input-transition: box-shadow 0.08s ease-in,color 0.08s ease-in,filter 50000s; --checkout-tab-transition: box-shadow 0.08s ease-in,border 0.08s ease-in; --space-0: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 56px; --checkout-light-gray-background: rgba(0,0,0,0.03); --checkout-dark-gray-background: rgba(0,0,0,0.1); --checkout-app-width: 920px; --badge-height: 12px; --checkout-overlay-filter: blur(6px); --checkout-app-tablet-constraint: 380px; --checkout-sidebar-width: 375px; --checkout-app-gutter-width: var(--space-4); --checkout-business-icon-size: 28px; --checkout-header-size: calc(var(--checkout-business-icon-size) + var(--space-4)*2); --checkout-lg-header-size: 28px; --checkout-lg-footer-height: 16px; --checkout-line-item-image-size: 42px; --checkout-line-item-amount-size: 100px; --checkout-payment-tab-fixed-width: 100px; --checkout-input-height: 44px; --checkout-lg-input-height: 36px; --checkout-input-line-height: 1.5; --checkout-z-index-background: -1; --checkout-z-index-accordion-item-background: 0; --checkout-z-index-accordion-item-content: 1; --checkout-z-index-multistep-payment-request-header: 1; --checkout-z-index-input-is-invalid: 1; --checkout-z-index-input-is-focused: 2; --checkout-z-index-input-ie-placeholder: 2; --checkout-z-index-multistep-form: 2; --checkout-z-index-field-icon: 3; --checkout-z-index-field-error: 3; --checkout-z-index-autocomplete-dropdown: 10; --checkout-z-index-order-details-modal-overlay: 11; --checkout-z-index-header: 12; --checkout-z-index-test-cards-panel: 13; --checkout-z-index-modal-overlay: 14; --checkout-z-index-modal-content: 15; --checkout-z-index-tooltip: 16; --checkout-input-padding-vertical: var(--space-2); --checkout-input-padding-horizontal: var(--space-3); --field-icon-pre-transition-scale: 0.7; --field-icon-transition-curve: cubic-bezier(0.075,0.82,0.165,1); --checkout-header-animation-easing: cubic-bezier(0.35,0.25,0.1,1); --modal-transition-curve: cubic-bezier(0.18,1.25,0.4,1); --checkout-icon-xs: 8px; --checkout-icon-sm: 12px; --checkout-icon-md: 16px; --checkout-icon-lg: 24px; --checkout-icon-xlg: 48px; --notice-icon-size: 24px; --notice-background-color-green: #efffed; --notice-background-color-red: rgba(220,39,39,0.04); --notice-background-color-yellow: #fefbe7; --notice-background-color-gray: var(--checkout-light-gray-background); --notice-icon-color-yellow: #d97917; --notice-icon-color-green: var(--checkout-green); --notice-icon-color-red: var(--checkout-red); --overhead-banner-height: var(--space-9); --accordion-item-header-background-margin: -12px -12px -11px -12px; --accordion-item-header-background-active-margin: -8px -8px -7px -8px; --accordion-item-button-background-active-margin: 2px; --accordion-item-background-transition-curve: cubic-bezier(0.3,0.3,0.3,1); --accordion-item-height-transition-curve: cubic-bezier(0.19,1,0.22,1); --disabled-opacity: 0.5; --tooltip-padding: 14px; --checkout-sm-spinner-size: 12px; --checkout-md-spinner-size: 18px; --checkout-lg-spinner-size: 48px; } .p0 { padding: 0; } .p1 { padding: var(--space-1); } .py1 { padding-bottom: var(--space-1); padding-top: var(--space-1); } .px1 { padding-left: var(--space-1); padding-right: var(--space-1); } .p2 { padding: var(--space-2); } .py2 { padding-bottom: var(--space-2); padding-top: var(--space-2); } .px2 { padding-left: var(--space-2); padding-right: var(--space-2); } .p3 { padding: var(--space-3); } .py3 { padding-bottom: var(--space-3); padding-top: var(--space-3); } .px3 { padding-left: var(--space-3); padding-right: var(--space-3); } .p4 { padding: var(--space-4); } .py4 { padding-bottom: var(--space-4); padding-top: var(--space-4); } .px4 { padding-left: var(--space-4); padding-right: var(--space-4); } .p5 { padding: var(--space-5); } .py5 { padding-bottom: var(--space-5); padding-top: var(--space-5); } .px5 { padding-left: var(--space-5); padding-right: var(--space-5); } .p6 { padding: var(--space-6); } .py6 { padding-bottom: var(--space-6); padding-top: var(--space-6); } .px6 { padding-left: var(--space-6); padding-right: var(--space-6); } .m0 { margin: 0; } .mt0 { margin-top: 0; } .mr0 { margin-right: 0; } .mb0 { margin-bottom: 0; } .ml0, .mx0 { margin-left: 0; } .mx0 { margin-right: 0; } .my0 { margin-bottom: 0; margin-top: 0; } .m1 { margin: var(--space-1); } .mt1 { margin-top: var(--space-1); } .mr1 { margin-right: var(--space-1); } .mb1 { margin-bottom: var(--space-1); } .ml1, .mx1 { margin-left: var(--space-1); } .mx1 { margin-right: var(--space-1); } .my1 { margin-bottom: var(--space-1); margin-top: var(--space-1); } .m2 { margin: var(--space-2); } .mt2 { margin-top: var(--space-2); } .mr2 { margin-right: var(--space-2); } .mb2 { margin-bottom: var(--space-2); } .ml2, .mx2 { margin-left: var(--space-2); } .mx2 { margin-right: var(--space-2); } .my2 { margin-bottom: var(--space-2); margin-top: var(--space-2); } .m3 { margin: var(--space-3); } .mt3 { margin-top: var(--space-3); } .mr3 { margin-right: var(--space-3); } .mb3 { margin-bottom: var(--space-3); } .ml3, .mx3 { margin-left: var(--space-3); } .mx3 { margin-right: var(--space-3); } .my3 { margin-bottom: var(--space-3); margin-top: var(--space-3); } .m4 { margin: var(--space-4); } .mt4 { margin-top: var(--space-4); } .mr4 { margin-right: var(--space-4); } .mb4 { margin-bottom: var(--space-4); } .ml4, .mx4 { margin-left: var(--space-4); } .mx4 { margin-right: var(--space-4); } .my4 { margin-bottom: var(--space-4); margin-top: var(--space-4); } .m5 { margin: var(--space-5); } .mt5 { margin-top: var(--space-5); } .mr5 { margin-right: var(--space-5); } .mb5 { margin-bottom: var(--space-5); } .ml5, .mx5 { margin-left: var(--space-5); } .mx5 { margin-right: var(--space-5); } .my5 { margin-bottom: var(--space-5); margin-top: var(--space-5); } .m6 { margin: var(--space-6); } .mt6 { margin-top: var(--space-6); } .mr6 { margin-right: var(--space-6); } .mb6 { margin-bottom: var(--space-6); } .ml6, .mx6 { margin-left: var(--space-6); } .mx6 { margin-right: var(--space-6); } .my6 { margin-bottom: var(--space-6); margin-top: var(--space-6); } .mxn1 { margin-left: calc(var(--space-1)*-1); margin-right: calc(var(--space-1)*-1); } .mxn2 { margin-left: calc(var(--space-2)*-1); margin-right: calc(var(--space-2)*-1); } .mxn3 { margin-left: calc(var(--space-3)*-1); margin-right: calc(var(--space-3)*-1); } .mxn4 { margin-left: calc(var(--space-4)*-1); margin-right: calc(var(--space-4)*-1); } .mxn5 { margin-left: calc(var(--space-5)*-1); margin-right: calc(var(--space-5)*-1); } .mxn6 { margin-left: calc(var(--space-6)*-1); margin-right: calc(var(--space-6)*-1); } .ml-auto { margin-left: auto; } .mr-auto, .mx-auto { margin-right: auto; } .mx-auto { margin-left: auto; } .mb-2px { margin-bottom: var(--space-0); } * { box-sizing: border-box; } @supports (scroll-behavior:smooth) { html { scroll-behavior: smooth; } } html { line-height: 1.3; } body { -webkit-font-smoothing: antialiased; color: var(--checkout-text-font-color); margin: 0; padding: 0; -ms-touch-action: manipulation; touch-action: manipulation; } body #root { font-family: var(--checkout-text-font-family); font-size: var(--checkout-text-font-size); } body:lang(ja) { font-family: var(--checkout-ja-text-font-family); } body:lang(zh) { font-family: var(--checkout-zh-text-font-family); } input:-webkit-autofill { -webkit-animation: native-autofill-in 1ms; transition: background-color 100000000s; } input { -webkit-animation: native-autofill-out 1ms; } .u-screenReaderOnly { clip: rect(0,0,0,0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } @-webkit-keyframes native-autofill-in { 0% { opacity: 1; } to { opacity: 1; } } @-webkit-keyframes native-autofill-out { 0% { opacity: 1; } to { opacity: 1; } } /* plan select */ .btmSel {} .btmSel .itm { position: relative; margin-bottom: 12px; } .btmSel .itm:last-child { margin-bottom: 0; } .btmSel .itm input { position: absolute; left: 0; top: 0; z-index: 10; height: 100%; width: 100%; display: block; opacity: 0; cursor: pointer; } .btmSel .itm .planWrp { border: solid 1px #e0e0e0; border-radius: 4px; background: #fff; padding: 16px; font-size: 10px; } .btmSel .itm .planWrp .deal { position: absolute; top: -0.85em; right: 10px; z-index: 3; padding: .25rem .5rem; background-color: #ffec40; font-size: 1.2em; line-height: 1.2em; color: #000; font-weight: 500; } .btmSel .itm .top { display: flex; justify-content: space-between; align-items: top; min-width: 100%; } .btmSel .itm .top .lft { display: flex; } .btmSel .itm .top .rad { margin-right: 0; width: 18px; height: 18px; border: solid 2px #dddddd; display: flex; border-radius: 20px; position: relative; } .btmSel .itm .top .planTitle { margin-left: 8px; margin-bottom: 0; font-size: 1.7em; line-height: 0.9em; padding-bottom: 0.8em; } .btmSel .itm .top .planTitle strong { font-weight: 500; } .btmSel .itm .top .planTitle span { display: block; font-size: 0.8em; padding-top: 0.2em; } .btmSel .itm .top .planPrice { margin-bottom: 0; font-weight: bolder; font-size: 1.4em; } .btmSel .itm .desc { font-size: 1.35em; line-height: 1.1em; padding: 0; margin: 0; } .btmSel .itm input:checked + .planWrp { background: #f5f8ff; border-color: #00091d; } .btmSel .itm input:checked + .planWrp .top .lft .rad { border-color: #004fe7;} .btmSel .itm input:checked + .planWrp .top .lft .rad:after { content: ""; background: #004fe7 /*#39b95b*/; position: absolute; border-radius: 50%; right: 3px; top: 3px; left: 3px; bottom: 3px; width: auto; height: auto; } @media(max-width:386px) { .btmSel .itm .top .planTitle { font-size: 1.65em; } } /*cvv pop -------------------------------*/ .aff-popWrp { clear: left; height: 0; position:relative; font-size: 16px; z-index:100; } .aff-pop, .pop { background: #fff; min-width: 292px; max-width: 350px; width: calc(100% - 60px); box-sizing: border-box; margin: 30px auto; padding: 20px; position: absolute; border-radius: 13px; font-size: .7em; text-align: center; margin-bottom: 5px; z-index: 2; box-shadow: 0 2px 10px #00000052; top: 80px; opacity: 0; visibility: hidden; transition: all .2s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; right: 0; left: auto; } .aff-popLft { left: 0; right: auto; } .aff-pop.active { opacity: 1; visibility: visible; top: -170px; } .aff-pop p { margin-bottom: 10px; color: #6f7583; padding: 0 28px!important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto 1em auto; max-width: 23em; } .aff-pop img { max-width: 70px; display:block; margin: 0 auto; } .aff-close_pop { position: absolute; right: 0; top: 0; background: #bbc6cf; display: inline-block; border-radius: 50%; width: 30px; height: 30px; line-height: 30px; color: #fff; margin: 10px; font-weight: 700; transition: all .3s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .aff-close_pop:hover { cursor: pointer; opacity: .5 } @media all and (max-width: 375px) { .aff-pop { max-width: 100%; width: 100%; min-width: auto; } }