:root {
--payment-page-accent-color: #ffffff;
--payment-page-primary-color: #1168EF;
--payment-page-secondary-color: #76ACF7;
--payment-page-icon-primary-color: rgb(68, 68, 68);
--payment-page-icon-secondary-background: #363636;
--payment-page-icon-secondary-stroke: #ffffff;
--payment-page-icon-secondary-fill: none;
--payment-page-icon-secondary-background-size: 30px;
--payment-page-icon-secondary-size: 20px;
--payment-page-icon-secondary-margin: 0 var( --payment-page-spacing-type-block-element ) 0 0;
--payment-page-text-color-primary: #6C8CB8;
--payment-page-layout-primary-background-color: #FFFFFF;
--payment-page-layout-secondary-background-color: #D5DBE0;
--payment-page-layout-primary-border-color: #E1E7ED;
--payment-page-layout-secondary-border-color: #D5DBE0;
--payment-page-layout-tertiary-border-color: #838C92;
--payment-page-status-neutral-background-color: rgba( 118, 118, 118, 0.05 );
--payment-page-status-neutral-color: #767676;
--payment-page-status-warning-background-color: rgba( 249, 148, 92, 0.05 );
--payment-page-status-warning-color: #F9945C;
--payment-page-status-info-background-color: rgba( 11, 124, 192, 0.05 );
--payment-page-status-info-color: #0B7CC0;
--payment-page-status-success-background-color: rgba( 43, 191, 22, 0.05 );
--payment-page-status-success-color: #2BBF16;
--payment-page-status-danger-background-color: rgba( 244, 67, 54, 0.05 );
--payment-page-status-danger-color: #F44336;
--payment-page-font-family: inherit;
--payment-page-spacing-xs: 6px;
--payment-page-spacing-sm: 12px;
--payment-page-spacing-md: 24px;
--payment-page-spacing-lg: 36px;
--payment-page-spacing-type-primary: 32px;
--payment-page-spacing-type-secondary: 24px;
--payment-page-spacing-type-tertiary: 16px;
--payment-page-spacing-type-separator-wide: 40px;
--payment-page-spacing-type-block-element: 10px;
--payment-page-spacing-type-block-wide: 18px;
--payment-page-layout-background: var( --payment-page-layout-primary-background-color );
--payment-page-layout-border: 1px solid var( --payment-page-layout-primary-border-color );
--payment-page-layout-box-shadow: 0 0 20px rgba(40, 84, 115, 0.11);
--payment-page-layout-padding: 32px;
--payment-page-layout-border-radius: 5px;
--payment-page-text-default-font-size: 18px;
--payment-page-text-default-font-style: normal;
--payment-page-text-default-font-weight: normal;
--payment-page-text-default-line-height: 28px;
--payment-page-text-default-color: var( --payment-page-text-color-primary );
--payment-page-text-small-font-size: 14px;
--payment-page-text-small-font-style: normal;
--payment-page-text-small-font-weight: normal;
--payment-page-text-small-line-height: 20px;
--payment-page-text-small-color: var( --payment-page-text-color-primary );
--payment-page-text-medium-font-size: 16px;
--payment-page-text-medium-font-style: normal;
--payment-page-text-medium-font-weight: normal;
--payment-page-text-medium-line-height: 24px;
--payment-page-text-medium-color: var( --payment-page-text-color-primary );
--payment-page-text-standard-font-size: 18px;
--payment-page-text-standard-font-style: normal;
--payment-page-text-standard-font-weight: normal;
--payment-page-text-standard-line-height: 24px;
--payment-page-text-standard-color: var( --payment-page-text-color-primary );
--payment-page-text-title-font-size: 24px;
--payment-page-text-title-font-style: normal;
--payment-page-text-title-font-weight: bold;
--payment-page-text-title-line-height: 32px;
--payment-page-text-title-color: var( --payment-page-text-color-primary );
--payment-page-button-font-size: 14px;
--payment-page-button-font-weight: bold;
--payment-page-button-line-height: 24px;
--payment-page-button-padding: 4px 16px;
--payment-page-button-lg-padding: 11px 16px 12px 16px;
--payment-page-button-lg-font-size: 14px;
--payment-page-button-lg-line-height: 17px; }
@media (max-width: 992px) {
:root {
--payment-page-spacing-type-primary: 20px;
--payment-page-spacing-type-secondary: 20px;
--payment-page-spacing-type-tertiary: 12px;
--payment-page-spacing-type-separator-wide: 50px;
--payment-page-layout-padding: 20px;
--payment-page-text-default-font-size: 16px;
--payment-page-text-default-line-height: 27px;
--payment-page-text-title-font-size: 24px;
--payment-page-text-title-line-height: 30px;
--payment-page-button-lg-padding: 14px 16px;
--payment-page-button-lg-font-size: 16px;
--payment-page-button-lg-line-height: 19px; } }
body.toplevel_page_payment-page,
body.post-type-pp_payment_form {
background: #F4FBFF; }
#wpadminbar .payment-page-top-bar-item.is-test {
background: #f1c40f; }
#wpadminbar .payment-page-top-bar-item.is-mixed {
background: #e67e22; }
#wpadminbar .payment-page-top-bar-item.is-live {
background: #2ecc71; }
#wpadminbar .payment-page-child-bar-item.is-test > a {
color: #f1c40f !important; }
#wpadminbar .payment-page-child-bar-item.is-live > a {
color: #2ecc71 !important; }
[data-payment-page-component] {
width: 100%;
margin: 0;
padding: 0;
font-family: var(--payment-page-font-family);
-webkit-box-sizing: border-box;
box-sizing: border-box; }
[data-payment-page-component] h1, [data-payment-page-component] h2, [data-payment-page-component] h3, [data-payment-page-component] h4, [data-payment-page-component] h5, [data-payment-page-component] h6, [data-payment-page-component] p, [data-payment-page-component] a, [data-payment-page-component] ul > li, [data-payment-page-component] ol > li {
font-family: var(--payment-page-font-family); }
[data-payment-page-display-state="visible"] {
-webkit-transition: color 0.45s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: color 0.45s cubic-bezier(0.23, 1, 0.32, 1);
transition: color 0.45s cubic-bezier(0.23, 1, 0.32, 1); }
[data-payment-page-display-state="hidden"] {
display: none !important; }
[data-payment-page-display-state="opaque"] {
opacity: 0.3 !important; }
[data-payment-page-display-state="active"] {
color: var(--payment-page-primary-color); }
.payment-page-clearfix {
clear: both;
float: none;
opacity: 0;
display: block; }
[data-payment-page-library="clipboard"] {
display: flex;
flex-direction: row; }
[data-payment-page-library="clipboard"] > input {
padding: 2px 5px !important; }
[data-payment-page-library="clipboard"] > [data-payment-page-button] {
--payment-page-icon-primary-color: #ffffff;
display: flex;
align-content: center;
align-items: center;
position: relative;
width: 36px;
height: 36px;
margin: 0 0 0 6px; }
[data-payment-page-library="clipboard"] > [data-payment-page-button] svg[data-payment-page-svg-type="fill"] {
fill: var(--payment-page-icon-primary-color); }
[data-payment-page-library="clipboard"] > [data-payment-page-button] svg[data-payment-page-svg-type="stroke"] {
stroke: var(--payment-page-icon-primary-color); }
[data-payment-page-library="clipboard"] > [data-payment-page-button] > span,
[data-payment-page-library="clipboard"] > [data-payment-page-button] > svg {
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%); }
[data-payment-page-library="clipboard"] > [data-payment-page-button] > span > svg {
width: 24px;
height: 24px;
--payment-page-icon-primary-color: var( --payment-page-status-success-color ); }
[data-payment-page-button] {
border: none;
height: inherit;
cursor: pointer;
color: var(--payment-page-accent-color);
padding: var(--payment-page-button-padding);
font-size: var(--payment-page-button-font-size);
font-weight: var(--payment-page-button-font-weight);
line-height: var(--payment-page-button-line-height);
box-shadow: none;
text-shadow: none;
margin: 0 3px 0 0;
display: inline-block;
vertical-align: bottom;
text-decoration: none !important;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: var(--payment-page-layout-border-radius);
border-radius: var(--payment-page-layout-border-radius); }
[data-payment-page-button] .payment-page-application-loader-wrapper {
--payment-page-primary-color: var( --payment-page-accent-color );
--payment-page-secondary-color: var( --payment-page-text-color-secondary ); }
[data-payment-page-button]:hover {
opacity: 0.9; }
[data-payment-page-button][data-payment-page-button-state="active"] {
cursor: default;
opacity: 0.9; }
[data-payment-page-button][data-payment-page-button-state="highlight"] {
opacity: 0.5; }
[data-payment-page-button][data-payment-page-button="primary"] {
color: var(--payment-page-accent-color) !important;
background: var(--payment-page-primary-color) !important; }
[data-payment-page-button][data-payment-page-button="primary"]:hover {
color: var(--payment-page-accent-color) !important; }
[data-payment-page-button][data-payment-page-button="primary_glass"] {
border: 1px solid var(--payment-page-primary-color);
color: var(--payment-page-primary-color); }
[data-payment-page-button][data-payment-page-button="primary_glass"]:hover {
color: var(--payment-page-accent-color);
background: var(--payment-page-primary-color); }
[data-payment-page-button][data-payment-page-button="icon"] {
--payment-page-button-font-weight: normal;
color: var(--payment-page-text-color-primary);
border: 1px solid var(--payment-page-icon-primary-color); }
[data-payment-page-button][data-payment-page-button="icon"] > svg {
margin: 0 var(--payment-page-spacing-type-block-element) 0 0; }
[data-payment-page-button][data-payment-page-button="icon"], [data-payment-page-button][data-payment-page-button="download_file"] {
display: flex;
align-items: center; }
[data-payment-page-button][data-payment-page-button="icon"] > svg, [data-payment-page-button][data-payment-page-button="download_file"] > svg {
fill: var(--payment-page-icon-primary-color); }
[data-payment-page-button][data-payment-page-button="icon"]:hover, [data-payment-page-button][data-payment-page-button="download_file"]:hover {
--payment-page-icon-primary-color: var( --payment-page-primary-color ); }
[data-payment-page-button][data-payment-page-button="secondary"] {
color: var(--payment-page-accent-color) !important;
background: var(--payment-page-secondary-color) !important; }
[data-payment-page-button][data-payment-page-button="secondary"]:hover {
color: var(--payment-page-accent-color) !important; }
[data-payment-page-button][data-payment-page-button="success"] {
color: var(--payment-page-accent-color) !important;
background: var(--payment-page-status-success-color) !important; }
[data-payment-page-button][data-payment-page-button="success"]:hover {
color: var(--payment-page-accent-color) !important; }
[data-payment-page-button][data-payment-page-button="danger"] {
color: var(--payment-page-accent-color) !important;
background: var(--payment-page-status-danger-color) !important; }
[data-payment-page-button][data-payment-page-button="danger"]:hover {
color: var(--payment-page-accent-color) !important; }
[data-payment-page-button][data-payment-page-button="warning"] {
color: var(--payment-page-accent-color) !important;
background: var(--payment-page-status-warning-color) !important; }
[data-payment-page-button][data-payment-page-button="warning"]:hover {
color: var(--payment-page-accent-color) !important; }
[data-payment-page-button][data-payment-page-button="danger-plain"] {
color: var(--payment-page-status-danger-color) !important; }
[data-payment-page-button][data-payment-page-button="danger-plain"]:hover {
background: var(--payment-page-status-danger-color) !important;
color: var(--payment-page-accent-color) !important; }
[data-payment-page-button][data-payment-page-button="plain"] {
background: transparent !important;
color: var(--payment-page-text-color-secondary) !important;
font-weight: bold; }
[data-payment-page-button][data-payment-page-button="plain"]:hover, [data-payment-page-button][data-payment-page-button="plain"][data-payment-page-button-state="active"] {
background: var(--payment-page-primary-color) !important;
color: var(--payment-page-accent-color) !important; }
[data-payment-page-button][data-payment-page-button-size="large"] {
padding: var(--payment-page-button-lg-padding);
font-size: var(--payment-page-button-lg-font-size);
line-height: var(--payment-page-button-lg-line-height); }
[data-payment-page-button][disabled="disabled"], [data-payment-page-button][disabled="disabled"]:hover {
background: var(--payment-page-layout-secondary-background-color) !important;
color: var(--payment-page-layout-primary-border-color) !important; }
[data-payment-page-button][disabled="disabled"] .payment-page-application-loader-wrapper {
--payment-page-primary-color: var( --payment-page-layout-primary-border-color );
--payment-page-secondary-color: var( --payment-page-layout-primary-border-color ); }
[data-payment-page-hint] {
position: relative; }
[data-payment-page-hint]:before, [data-payment-page-hint]:after {
position: absolute;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: hidden;
opacity: 0;
z-index: 1000000;
pointer-events: none;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
transition-delay: 0ms; }
[data-payment-page-hint]:hover:before, [data-payment-page-hint]:hover:after {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms; }
[data-payment-page-hint]:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1000001; }
[data-payment-page-hint]:after {
padding: 8px 10px;
font-size: 12px;
font-family: var(--payment-page-font-family);
line-height: 12px;
white-space: nowrap;
background: var(--payment-page-layout-background);
color: var(--payment-page-text-color-primary);
-webkit-border-radius: var(--payment-page-layout-border-radius);
border-radius: var(--payment-page-layout-border-radius); }
[data-payment-page-hint][aria-label]:after {
content: attr(aria-label); }
[data-payment-page-hint][data-payment-page-hint-location="right"]:before, [data-payment-page-hint][data-payment-page-hint-location="right"]:after, [data-payment-page-hint]:not([data-payment-page-hint-location]):before, [data-payment-page-hint]:not([data-payment-page-hint-location]):after {
left: 100%;
bottom: 50%; }
[data-payment-page-hint][data-payment-page-hint-location="right"]:before, [data-payment-page-hint]:not([data-payment-page-hint-location]):before {
margin-left: -11px;
margin-bottom: -6px; }
[data-payment-page-hint][data-payment-page-hint-location="right"]:after, [data-payment-page-hint]:not([data-payment-page-hint-location]):after {
margin-bottom: -14px; }
[data-payment-page-hint][data-payment-page-hint-location="right"]:hover:before, [data-payment-page-hint]:not([data-payment-page-hint-location]):hover:before {
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
transform: translateX(8px); }
[data-payment-page-hint][data-payment-page-hint-location="right"]:hover:after, [data-payment-page-hint]:not([data-payment-page-hint-location]):hover:after {
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
transform: translateX(8px); }
[data-payment-page-hint][data-payment-page-hint-location="top"]:before, [data-payment-page-hint][data-payment-page-hint-location="top"]:after {
bottom: 100%;
left: 50%; }
[data-payment-page-hint][data-payment-page-hint-location="top"]:before {
margin-bottom: -11px;
left: calc(50% - 6px); }
[data-payment-page-hint][data-payment-page-hint-location="top"]:after {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%); }
[data-payment-page-hint][data-payment-page-hint-location="top"]:hover:before {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
transform: translateY(-8px); }
[data-payment-page-hint][data-payment-page-hint-location="top"]:hover:after {
-webkit-transform: translateX(-50%) translateY(-8px);
-moz-transform: translateX(-50%) translateY(-8px);
transform: translateX(-50%) translateY(-8px); }
[data-payment-page-hint][data-payment-page-hint-location="bottom"]:before, [data-payment-page-hint][data-payment-page-hint-location="bottom"]:after {
top: 100%;
left: 50%; }
[data-payment-page-hint][data-payment-page-hint-location="bottom"]:before {
left: calc(50% - 6px);
margin-top: -11px; }
[data-payment-page-hint][data-payment-page-hint-location="bottom"]:after {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%); }
[data-payment-page-hint][data-payment-page-hint-location="bottom"]:hover:before {
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px); }
[data-payment-page-hint][data-payment-page-hint-location="bottom"]:hover:after {
-webkit-transform: translateX(-50%) translateY(8px);
-moz-transform: translateX(-50%) translateY(8px);
transform: translateX(-50%) translateY(8px); }
[data-payment-page-hint][data-payment-page-hint-location="left"]:before, [data-payment-page-hint][data-payment-page-hint-location="left"]:after {
right: 100%;
bottom: 50%; }
[data-payment-page-hint][data-payment-page-hint-location="left"]:before {
left: calc(50% - 6px);
margin-top: -11px; }
[data-payment-page-hint][data-payment-page-hint-location="left"]:after {
margin-bottom: -14px; }
[data-payment-page-hint][data-payment-page-hint-location="left"]:hover:before {
-webkit-transform: translateX(-8px);
-moz-transform: translateX(-8px);
transform: translateX(-8px); }
[data-payment-page-hint][data-payment-page-hint-location="left"]:hover:after {
-webkit-transform: translateX(-8px);
-moz-transform: translateX(-8px);
transform: translateX(-8px); }
[data-payment-page-hint][data-payment-page-hint="danger"] {
--payment-page-text-color-primary: var( --payment-page-status-danger-color ); }
[data-payment-page-notification] {
--payment-page-text-default-color: var( --payment-page-status-neutral-color );
border: none;
padding: var(--payment-page-spacing-type-block-wide);
display: block;
letter-spacing: 0;
margin: 0;
position: relative;
background: var(--payment-page-status-neutral-background-color);
text-decoration: none;
font-family: var(--payment-page-font-family);
font-size: var(--payment-page-text-default-font-size);
font-style: var(--payment-page-text-default-font-style);
font-weight: var(--payment-page-text-default-font-weight);
line-height: var(--payment-page-text-default-line-height);
color: var(--payment-page-text-default-color);
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: var(--payment-page-layout-border-radius);
border-radius: var(--payment-page-layout-border-radius); }
[data-payment-page-notification] > p {
margin: 0;
padding: 0; }
[data-payment-page-notification] a {
margin: 0;
padding: 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
cursor: pointer;
text-decoration: underline; }
[data-payment-page-notification] a:hover {
border: none; }
[data-payment-page-notification]:after {
clear: both;
content: "";
display: block; }
[data-payment-page-notification][data-payment-page-notification="danger"] {
color: var(--payment-page-status-danger-color);
background: var(--payment-page-status-danger-background-color); }
[data-payment-page-notification][data-payment-page-notification="danger"] a,
[data-payment-page-notification][data-payment-page-notification="danger"] span {
color: var(--payment-page-status-danger-color); }
[data-payment-page-notification][data-payment-page-notification="warning"] {
color: var(--payment-page-status-warning-color);
background: var(--payment-page-status-warning-background-color); }
[data-payment-page-notification][data-payment-page-notification="warning"] a,
[data-payment-page-notification][data-payment-page-notification="warning"] span {
color: var(--payment-page-status-warning-color); }
[data-payment-page-notification][data-payment-page-notification="info"] {
color: var(--payment-page-status-info-color);
background: var(--payment-page-status-info-background-color); }
[data-payment-page-notification][data-payment-page-notification="info"] a,
[data-payment-page-notification][data-payment-page-notification="info"] span {
color: var(--payment-page-status-info-color); }
[data-payment-page-notification][data-payment-page-notification="success"] {
color: var(--payment-page-status-success-color);
background: var(--payment-page-status-success-background-color); }
[data-payment-page-notification][data-payment-page-notification="success"] a,
[data-payment-page-notification][data-payment-page-notification="success"] span {
color: var(--payment-page-status-success-color); }
@keyframes payment_page_application_loader_rotate_kf {
0% {
transform: rotate(0deg); }
50% {
transform: rotate(180deg); }
100% {
transform: rotate(360deg); } }
.payment-page-application-loader-status-text {
margin: 50px 0 0 0 !important;
padding: 0 !important;
text-align: center;
color: var(--payment-page-primary-color);
font-size: 16px;
font-weight: bold; }
.payment-page-application-loader-wrapper {
box-sizing: border-box;
position: relative;
margin: 50px auto;
width: 150px;
height: 150px;
display: block;
overflow: hidden;
will-change: transform;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important; }
.payment-page-application-loader-wrapper > img {
position: absolute;
top: 50%;
left: 50%;
margin: 0 !important;
padding: 0 !important;
width: 50px;
height: 50px;
-webkit-border-radius: var(--payment-page-layout-border-radius);
border-radius: var(--payment-page-layout-border-radius);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.payment-page-application-loader-wrapper div {
box-sizing: border-box;
will-change: transform;
height: 100%;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important; }
.payment-page-application-loader-wrapper[data-payment-page-loader-type="mini"] {
margin: 5px auto;
width: 22px;
height: 22px; }
.payment-page-application-loader-wrapper[data-payment-page-loader-type="mini"], .payment-page-application-loader-wrapper div {
border-radius: 50%;
padding: 8px;
border: 2px solid transparent;
animation: payment_page_application_loader_rotate_kf linear 3.5s infinite;
border-top-color: var(--payment-page-primary-color);
border-left-color: var(--payment-page-secondary-color);
animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
animation-duration: 3s; }
.payment-page-application-loader-wrapper[data-payment-page-loader-type="mini"], .payment-page-application-loader-wrapper[data-payment-page-loader-type="mini"] div {
padding: 2px; }
.payment-page-application-loader-wrapper[data-payment-page-loader-type="danger"], .payment-page-application-loader-wrapper[data-payment-page-loader-type="danger"] div {
border-top-color: var(--payment-page-status-danger-color);
border-left-color: var(--payment-page-status-warning-color); }
.payment-page-application-loader-wrapper:hover, .payment-page-application-loader-wrapper div:hover {
animation-play-state: paused; }
body.payment-page-popup-visible {
overflow: hidden; }
body.payment-page-popup-visible #payment-page-popup-overlay {
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 100vh;
position: fixed;
cursor: pointer;
z-index: 1000000;
background: rgba(0, 0, 0, 0.5);
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-content: center;
align-items: center;
justify-content: center;
font-family: var(--payment-page-font-family); }
body.payment-page-popup-visible #payment-page-popup-overlay h1, body.payment-page-popup-visible #payment-page-popup-overlay h2, body.payment-page-popup-visible #payment-page-popup-overlay h3, body.payment-page-popup-visible #payment-page-popup-overlay p, body.payment-page-popup-visible #payment-page-popup-overlay div {
font-family: var(--payment-page-font-family); }
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper {
z-index: 5;
padding: 0;
width: auto;
border: none;
outline: none;
display: block;
margin: 0 auto;
height: auto;
cursor: default;
max-width: 640px;
max-height: 90vh;
min-width: 500px;
position: relative;
-webkit-border-radius: var(--payment-page-layout-border-radius);
border-radius: var(--payment-page-layout-border-radius);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 50px 20px;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 50px 20px; }
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper > #payment-page-popup {
background: var(--payment-page-layout-primary-background-color);
margin: 0 auto;
padding: 30px;
width: 100%;
height: auto;
display: block;
max-width: 90vw;
max-height: 90vh;
overflow: hidden !important;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: var(--payment-page-layout-border-radius);
border-radius: var(--payment-page-layout-border-radius); }
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper > #payment-page-popup iframe {
width: 100%;
height: 100%; }
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper > .payment-page-popup-close-icon {
z-index: 1;
top: -24px;
right: -26px;
padding: 0;
width: 28px;
height: 28px;
cursor: pointer;
position: absolute;
text-align: center;
vertical-align: top;
display: inline-block;
box-shadow: none !important;
background: transparent !important; }
@media (max-width: 767px) {
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper > .payment-page-popup-close-icon {
top: -15px;
right: 11px; } }
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper > .payment-page-popup-close-icon svg {
margin: 0;
padding: 0;
width: 20px;
height: 20px;
fill: var(--payment-page-layout-primary-background-color); }
@media (max-width: 767px) {
body.payment-page-popup-visible #payment-page-popup-overlay {
align-content: flex-start;
align-items: flex-start;
justify-content: flex-start;
border-radius: 0; }
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper {
min-width: 100%;
max-width: 100%;
height: 100%;
max-height: calc( 100vh);
background: var(--payment-page-layout-primary-background-color);
display: flex;
flex-direction: column-reverse;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none; }
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper > #payment-page-popup {
margin: 0;
padding: 0 var(--payment-page-spacing-type-block-element);
height: 100%;
width: 100%;
max-width: 100%;
max-height: calc( 100vh - 30px);
overflow: auto !important;
-webkit-overflow-scrolling: touch; }
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper > .payment-page-popup-close-icon {
top: 15px;
right: 15px;
width: auto;
height: auto; }
body.payment-page-popup-visible #payment-page-popup-overlay > #payment-page-popup-wrapper > .payment-page-popup-close-icon svg {
fill: var(--payment-page-text-color-primary); } }
@media (min-width: 767px) {
body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="large"] > #payment-page-popup-wrapper, body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="large_quaternary"] > #payment-page-popup-wrapper {
min-width: 90vw;
min-height: 90vh;
height: 100%; }
body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="large"] > #payment-page-popup-wrapper > #payment-page-popup, body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="large_quaternary"] > #payment-page-popup-wrapper > #payment-page-popup {
padding: 20px 10px 0 10px;
height: 100%; } }
body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="large_quaternary"] > #payment-page-popup-wrapper > #payment-page-popup {
background: var(--payment-page-layout-quaternary-background-color); }
body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="fullscreen"] > #payment-page-popup-wrapper {
min-width: 100vw !important;
min-height: 100vh !important; }
body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="fullscreen"] > #payment-page-popup-wrapper > #payment-page-popup {
padding-top: 40px;
min-width: 100vw !important;
min-height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important; }
body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="fullscreen"] > #payment-page-popup-wrapper > #payment-page-popup [data-payment-page-component="user-authentication"] .payment-page-grid-row > [data-payment-page-grid="12"] {
max-width: 480px;
margin: 0 auto; }
body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="fullscreen"] > #payment-page-popup-wrapper > .payment-page-popup-close-icon {
top: 10px;
width: auto;
height: auto;
right: 10px; }
body.payment-page-popup-visible #payment-page-popup-overlay[data-payment-page-type="fullscreen"] > #payment-page-popup-wrapper > .payment-page-popup-close-icon svg {
fill: var(--payment-page-text-color-primary); }
[data-payment-page-library="wpmedia"] {
display: grid;
max-width: 640px; }
[data-payment-page-library="wpmedia"] > img, [data-payment-page-library="wpmedia"] > input {
display: none !important; }
[data-payment-page-library="wpmedia"] > video {
display: none; }
[data-payment-page-library="wpmedia"][data-payment-page-interaction-state="uploaded"] > img, [data-payment-page-library="wpmedia"][data-payment-page-interaction-state="uploaded"] > video {
width: 100%;
display: block !important;
cursor: pointer;
max-width: 212px;
margin-bottom: var(--payment-page-spacing-sm); }
[data-payment-page-library="wpmedia"][data-payment-page-interaction-state="uploaded"] > [data-payment-page-component-form-section="actions"] {
margin: auto 0 0 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--payment-page-spacing-sm); }
[data-payment-page-library="wpmedia"][data-payment-page-interaction-state="uploaded"] > [data-payment-page-component-form-section="actions"] > [data-payment-page-library-wpmedia-trigger^="set_"] {
display: none !important; }
[data-payment-page-library="wpmedia"][data-payment-page-interaction-state="uploaded"] > [data-payment-page-component-form-section="actions"] > [data-payment-page-library-wpmedia-trigger^="edit_"] {
display: inline-block !important;
vertical-align: middle !important;
background-color: var(--payment-page-gray-button-color-primary) !important;
color: var(--payment-page-gray-button-color-text) !important; }
[data-payment-page-library="wpmedia"][data-payment-page-interaction-state="uploaded"] > [data-payment-page-component-form-section="actions"] > [data-payment-page-library-wpmedia-trigger^="edit_"]:hover {
background-color: var(--payment-page-gray-button-color-hover) !important; }
[data-payment-page-library="wpmedia"][data-payment-page-interaction-state="uploaded"] > [data-payment-page-component-form-section="actions"] > [data-payment-page-library-wpmedia-trigger^="remove_"] {
display: inline-block !important;
vertical-align: middle !important; }
[data-payment-page-library="wpmedia"] > [data-payment-page-component-form-section="actions"] > [data-payment-page-library-wpmedia-trigger^="edit_"],
[data-payment-page-library="wpmedia"] > [data-payment-page-component-form-section="actions"] > [data-payment-page-library-wpmedia-trigger^="remove_"] {
display: none; }