/*!************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/css/common.scss ***! \************************************************************************************************************************************************************************************/ .better-payment .bp-radio-box input[type=radio]:checked { border: 2px solid #006AFF; } .better-payment .bp-radio-box input[type=radio] { width: 20px; height: 20px; outline: 0; border-radius: 50%; position: relative; border: 2px solid #CBC9DA; background: #fff; margin-bottom: -3px; margin-right: 10px; } .better-payment .bp-radio-box input[type=radio]:after { content: ""; opacity: 0; display: block; left: 4px; top: 4px; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #006AFF; } .better-payment .form-content-section-fields .payment-method-checkbox input[type=radio]:after { width: 12px; height: 12px; } .better-payment .bp-radio-box input[type=radio]:checked:after { opacity: 1; } .better-payment .control { box-sizing: border-box; clear: both; font-size: 1rem; position: relative; text-align: inherit; } .better-payment .control.has-icons-right .input, .better-payment .control.has-icons-right .select select { padding-right: 2.5em; } .better-payment .control.has-icons-left .input, .better-payment .control.has-icons-left .select select { padding-left: 2.5em; } .better-payment .is-large.input, .better-payment .is-large.textarea { font-size: 1.5rem; } .better-payment .control.has-icons-left .input.is-large ~ .icon, .better-payment .control.has-icons-left .select.is-large ~ .icon, .better-payment .control.has-icons-right .input.is-large ~ .icon, .better-payment .control.has-icons-right .select.is-large ~ .icon { font-size: 1.5rem; } .better-payment .control.has-icons-left .icon.is-left { left: 0; } .better-payment .control.has-icons-left .icon, .better-payment .control.has-icons-right .icon { color: #dbdbdb; height: 2.5em; pointer-events: none; position: absolute; top: 0; width: 2.5em; z-index: 4; } .better-payment .icon.is-medium { height: 2rem; width: 2rem; } .better-payment .icon { align-items: center; display: inline-flex; justify-content: center; height: 1.5rem; width: 1.5rem; } .better-payment .control.has-icons-right .icon.is-right { right: 0; } .better-payment .control.has-icons-left .icon, .better-payment .control.has-icons-right .icon { color: #dbdbdb; height: 2.5em; pointer-events: none; position: absolute; top: 0; width: 2.5em; z-index: 4; } .better-payment .input:active, .better-payment .input:focus, .better-payment .is-active.input, .better-payment .is-active.textarea, .better-payment .is-focused.input, .better-payment .is-focused.textarea, .better-payment .select select.is-active, .better-payment .select select.is-focused, .better-payment .select select:active, .better-payment .select select:focus, .better-payment .textarea:active, .better-payment .textarea:focus { border-color: #485fc7; box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } .better-payment .input:hover, .better-payment .is-hovered.input, .better-payment .is-hovered.textarea, .better-payment .select select.is-hovered, .better-payment .select select:hover, .better-payment .textarea:hover { border-color: #b5b5b5; } .better-payment .input, .better-payment .textarea { box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05); max-width: 100%; width: 100%; } .better-payment .is-medium.input, .better-payment .is-medium.textarea { font-size: 1.25rem; } .better-payment .control.has-icons-left .input.is-medium ~ .icon, .better-payment .control.has-icons-left .select.is-medium ~ .icon, .better-payment .control.has-icons-right .input.is-medium ~ .icon, .better-payment .control.has-icons-right .select.is-medium ~ .icon { font-size: 1.25rem; } /* Helper Classes */ .better-payment .columns.is-mobile { display: flex; } .better-payment .columns:not(:last-child) { margin-bottom: 0.75rem; } .better-payment .columns { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } .better-payment .column { display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; padding: 0.75rem; } .better-payment .is-size-1 { font-size: 3rem !important; } .better-payment .is-size-1-fix { font-size: 3rem; } .better-payment .is-size-2 { font-size: 2.5rem !important; } .better-payment .is-size-2-fix { font-size: 2.5rem; } .better-payment .is-size-3 { font-size: 2rem !important; } .better-payment .is-size-3-fix { font-size: 2rem; } .better-payment .is-size-4 { font-size: 1.5rem !important; } .better-payment .is-size-4-fix { font-size: 1.5rem; } .better-payment .is-size-5 { font-size: 1.25rem !important; } .better-payment .is-size-5-fix { font-size: 1.25rem; } .better-payment .is-size-6 { font-size: 1rem !important; } .better-payment .is-size-6-fix { font-size: 1rem; } .better-payment .is-size-7 { font-size: 0.75rem !important; } .better-payment .is-size-7-fix { font-size: 0.75rem; } .better-payment .has-text-white { color: #fff !important; } .better-payment .has-text-white-fix { color: #fff; } .better-payment .has-text-black { color: #000 !important; } .better-payment .has-text-black-fix { color: #000; } .better-payment .has-text-light { color: #f5f5f5 !important; } .better-payment .has-text-light-fix { color: #f5f5f5; } .better-payment .has-text-dark { color: #363636 !important; } .better-payment .has-text-dark-fix { color: #363636; } .better-payment .has-text-primary { color: #00d1b2 !important; } .better-payment .has-text-primary-fix { color: #00d1b2; } .better-payment .has-text-link { color: #485fc7 !important; } .better-payment .has-text-link-fix { color: #485fc7; } .better-payment .has-text-info { color: #3e8ed0 !important; } .better-payment .has-text-info-fix { color: #3e8ed0; } .better-payment .has-text-success { color: #48c78e !important; } .better-payment .has-text-success-fix { color: #48c78e; } .better-payment .has-text-warning { color: #ffe08a !important; } .better-payment .has-text-warning-fix { color: #ffe08a; } .better-payment .has-text-danger { color: #f14668 !important; } .better-payment .has-text-danger-fix { color: #f14668; } .better-payment .m-0 { margin: 0 !important; } .better-payment .mt-0 { margin-top: 0 !important; } .better-payment .mr-0 { margin-right: 0 !important; } .better-payment .mb-0 { margin-bottom: 0 !important; } .better-payment .ml-0 { margin-left: 0 !important; } .better-payment .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .better-payment .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .better-payment .m-1 { margin: 0.25rem !important; } .better-payment .mt-1 { margin-top: 0.25rem !important; } .better-payment .mr-1 { margin-right: 0.25rem !important; } .better-payment .mb-1 { margin-bottom: 0.25rem !important; } .better-payment .ml-1 { margin-left: 0.25rem !important; } .better-payment .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .better-payment .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .better-payment .m-2 { margin: 0.5rem !important; } .better-payment .mt-2 { margin-top: 0.5rem !important; } .better-payment .mr-2 { margin-right: 0.5rem !important; } .better-payment .mb-2 { margin-bottom: 0.5rem !important; } .better-payment .ml-2 { margin-left: 0.5rem !important; } .better-payment .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .better-payment .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .better-payment .m-3 { margin: 0.75rem !important; } .better-payment .mt-3 { margin-top: 0.75rem !important; } .better-payment .mr-3 { margin-right: 0.75rem !important; } .better-payment .mb-3 { margin-bottom: 0.75rem !important; } .better-payment .ml-3 { margin-left: 0.75rem !important; } .better-payment .mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; } .better-payment .my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .better-payment .m-4 { margin: 1rem !important; } .better-payment .mt-4 { margin-top: 1rem !important; } .better-payment .mr-4 { margin-right: 1rem !important; } .better-payment .mb-4 { margin-bottom: 1rem !important; } .better-payment .ml-4 { margin-left: 1rem !important; } .better-payment .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .better-payment .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .better-payment .m-5 { margin: 1.5rem !important; } .better-payment .mt-5 { margin-top: 1.5rem !important; } .better-payment .mr-5 { margin-right: 1.5rem !important; } .better-payment .mb-5 { margin-bottom: 1.5rem !important; } .better-payment .ml-5 { margin-left: 1.5rem !important; } .better-payment .mx-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .better-payment .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .better-payment .m-6 { margin: 3rem !important; } .better-payment .mt-6 { margin-top: 3rem !important; } .better-payment .mr-6 { margin-right: 3rem !important; } .better-payment .mb-6 { margin-bottom: 3rem !important; } .better-payment .ml-6 { margin-left: 3rem !important; } .better-payment .mx-6 { margin-left: 3rem !important; margin-right: 3rem !important; } .better-payment .my-6 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .better-payment .p-0 { padding: 0 !important; } .better-payment .pt-0 { padding-top: 0 !important; } .better-payment .pr-0 { padding-right: 0 !important; } .better-payment .pb-0 { padding-bottom: 0 !important; } .better-payment .pl-0 { padding-left: 0 !important; } .better-payment .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .better-payment .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .better-payment .p-1 { padding: 0.25rem !important; } .better-payment .pt-1 { padding-top: 0.25rem !important; } .better-payment .pr-1 { padding-right: 0.25rem !important; } .better-payment .pb-1 { padding-bottom: 0.25rem !important; } .better-payment .pl-1 { padding-left: 0.25rem !important; } .better-payment .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .better-payment .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .better-payment .p-2 { padding: 0.5rem !important; } .better-payment .pt-2 { padding-top: 0.5rem !important; } .better-payment .pr-2 { padding-right: 0.5rem !important; } .better-payment .pb-2 { padding-bottom: 0.5rem !important; } .better-payment .pl-2 { padding-left: 0.5rem !important; } .better-payment .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .better-payment .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .better-payment .p-3 { padding: 0.75rem !important; } .better-payment .pt-3 { padding-top: 0.75rem !important; } .better-payment .pr-3 { padding-right: 0.75rem !important; } .better-payment .pb-3 { padding-bottom: 0.75rem !important; } .better-payment .pl-3 { padding-left: 0.75rem !important; } .better-payment .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .better-payment .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .better-payment .p-4 { padding: 1rem !important; } .better-payment .pt-4 { padding-top: 1rem !important; } .better-payment .pr-4 { padding-right: 1rem !important; } .better-payment .pb-4 { padding-bottom: 1rem !important; } .better-payment .pl-4 { padding-left: 1rem !important; } .better-payment .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .better-payment .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .better-payment .p-5 { padding: 1.5rem !important; } .better-payment .pt-5 { padding-top: 1.5rem !important; } .better-payment .pr-5 { padding-right: 1.5rem !important; } .better-payment .pb-5 { padding-bottom: 1.5rem !important; } .better-payment .pl-5 { padding-left: 1.5rem !important; } .better-payment .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .better-payment .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .better-payment .p-6 { padding: 3rem !important; } .better-payment .pt-6 { padding-top: 3rem !important; } .better-payment .pr-6 { padding-right: 3rem !important; } .better-payment .pb-6 { padding-bottom: 3rem !important; } .better-payment .pl-6 { padding-left: 3rem !important; } .better-payment .px-6 { padding-left: 3rem !important; padding-right: 3rem !important; } .better-payment .py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .better-payment .columns.is-gapless:not(:last-child) { margin-bottom: 1.5rem; } .better-payment .columns.is-gapless { margin-left: 0; margin-right: 0; margin-top: 0; } .better-payment .tile.is-ancestor:not(:last-child) { margin-bottom: 0.75rem; } .better-payment .tile.is-ancestor { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } .better-payment .tile { align-items: stretch; display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-height: -webkit-min-content; min-height: -moz-min-content; min-height: min-content; } .better-payment .tile.is-vertical > .tile.is-child:not(:last-child) { margin-bottom: 1.5rem !important; } .better-payment .tile.is-child { margin: 0 !important; } .better-payment .notification.is-primary { background-color: #00d1b2; color: #fff; } .better-payment .notification.is-warning { background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .better-payment .notification.is-info { background-color: #3e8ed0; color: #fff; } .better-payment .has-background-white { background-color: #ffffff !important; } .better-payment .has-background-white-fix { background-color: #ffffff; } .better-payment .has-background-black { background-color: #0a0a0a !important; } .better-payment .has-background-black-fix { background-color: #0a0a0a; } .better-payment .has-background-light { background-color: #f5f5f5 !important; } .better-payment .has-background-light-fix { background-color: #f5f5f5; } .better-payment .has-background-dark { background-color: #363636 !important; } .better-payment .has-background-dark-fix { background-color: #363636; } .better-payment .has-background-primary { background-color: #00d1b2 !important; } .better-payment .has-background-primary-fix { background-color: #00d1b2; } .better-payment .has-background-link { background-color: #485fc7 !important; } .better-payment .has-background-link-fix { background-color: #485fc7; } .better-payment .has-background-info { background-color: #3e8ed0 !important; } .better-payment .has-background-info-fix { background-color: #3e8ed0; } .better-payment .has-background-success { background-color: #48c78e !important; } .better-payment .has-background-success-fix { background-color: #48c78e; } .better-payment .has-background-warning { background-color: #ffe08a !important; } .better-payment .has-background-warning-fix { background-color: #ffe08a; } .better-payment .has-background-danger { background-color: #f14668 !important; } .better-payment .has-background-danger-fix { background-color: #f14668; } .better-payment .has-text-centered { text-align: center !important; } .better-payment .has-text-justified { text-align: justify !important; } .better-payment .has-text-left { text-align: left !important; } .better-payment .has-text-right { text-align: right !important; } .better-payment .has-text-weight-light { font-weight: 300 !important; } .better-payment .has-text-weight-normal { font-weight: 400 !important; } .better-payment .has-text-weight-medium { font-weight: 500 !important; } .better-payment .has-text-weight-semibold { font-weight: 600 !important; } .better-payment .has-text-weight-bold { font-weight: 700 !important; } .better-payment .bulma-control-extend, .better-payment .file-cta, .better-payment .file-name, .better-payment .input, .better-payment .pagination-ellipsis, .better-payment .pagination-link, .better-payment .pagination-next, .better-payment .pagination-previous, .better-payment .select select, .better-payment .textarea { -moz-appearance: none; -webkit-appearance: none; align-items: center; border: 1px solid transparent; border-radius: 0.375em; box-shadow: none; display: inline-flex; font-size: 1rem; height: 2.5em; justify-content: flex-start; line-height: 1.5; padding-bottom: calc(0.5em - 1px); padding-left: calc(0.75em - 1px); padding-right: calc(0.75em - 1px); padding-top: calc(0.5em - 1px); position: relative; vertical-align: top; } .better-payment .input, .better-payment .select select, .better-payment .textarea { background-color: #fff; border-color: #dbdbdb; border-radius: 0.375em; color: #363636; } .better-payment .bulma-control-extend:active, .better-payment .bulma-control-extend:focus, .better-payment .file-cta:active, .better-payment .file-cta:focus, .better-payment .file-name:active, .better-payment .file-name:focus, .better-payment .input:active, .better-payment .input:focus, .better-payment .is-active.bulma-control-extend, .better-payment .is-active.file-cta, .better-payment .is-active.file-name, .better-payment .is-active.input, .better-payment .is-active.pagination-ellipsis, .better-payment .is-active.pagination-link, .better-payment .is-active.pagination-next, .better-payment .is-active.pagination-previous, .better-payment .is-active.textarea, .better-payment .is-focused.bulma-control-extend, .better-payment .is-focused.file-cta, .better-payment .is-focused.file-name, .better-payment .is-focused.input, .better-payment .is-focused.pagination-ellipsis, .better-payment .is-focused.pagination-link, .better-payment .is-focused.pagination-next, .better-payment .is-focused.pagination-previous, .better-payment .is-focused.textarea, .better-payment .pagination-ellipsis:active, .better-payment .pagination-ellipsis:focus, .better-payment .pagination-link:active, .better-payment .pagination-link:focus, .better-payment .pagination-next:active, .better-payment .pagination-next:focus, .better-payment .pagination-previous:active, .better-payment .pagination-previous:focus, .better-payment .select select.is-active, .better-payment .select select.is-focused, .better-payment .select select:active, .better-payment .select select:focus, .better-payment .textarea:active, .better-payment.textarea:focus { outline: 0; } .better-payment .better-payment-notice.notification.is-danger.is-light { background-color: rgb(242, 222, 222); color: rgb(169, 68, 66); font-size: 85%; padding: 15px; border-radius: 3px; } .better-payment .better-payment-notice.notification.is-danger.is-light a { color: rgb(169, 68, 66) !important; } .better-payment .notification { background-color: #f5f5f5; border-radius: 0.375em; position: relative; padding: 1.25rem 2.5rem 1.25rem 1.5rem; } .better-payment .notification.is-light { background-color: #f5f5f5; color: rgba(0, 0, 0, 0.7); } .better-payment .notification.is-danger { background-color: #f14668; color: #fff; } .better-payment .notification.is-danger.is-light { background-color: #feecf0; color: #cc0f35; } .better-payment .notification.is-warning { background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .better-payment .notification.is-warning.is-light { background-color: #fffaeb; color: #946c00; } .better-payment .notification.is-success { background-color: #48c78e; color: #fff; } .better-payment .notification.is-success.is-light { background-color: #effaf5; color: #257953; } .better-payment .notification.is-info { background-color: #3e8ed0; color: #fff; } .better-payment .notification.is-info.is-light { background-color: #eff5fb; color: #296fa8; } .better-payment .notification.is-link { background-color: #485fc7; color: #fff; } .better-payment .notification.is-link.is-light { background-color: #eff1fa; color: #3850b7; } .better-payment .notification.is-primary { background-color: #00d1b2; color: #fff; } .better-payment .notification.is-primary.is-light { background-color: #ebfffc; color: #00947e; } .better-payment .box { background-color: #fff; border-radius: 6px; box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02); color: #4a4a4a; display: block; padding: 0.75rem; } /* Layout 2 */ .better-payment .payment-form-layout-1, .better-payment .payment-form-layout-2 { font-family: "DM Sans", sans-serif; box-shadow: 0px 40px 75px rgba(0, 1, 35, 0.08); } .better-payment .payment-form-layout-1 .dynamic-amount-section, .better-payment .payment-form-layout-2 .dynamic-amount-section { background: url("../img/bg-blue-2.svg") no-repeat center; background-size: cover; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .better-payment .payment-form-layout-2 .dynamic-amount-section-subtitle { color: #98B9F2; } .better-payment .payment-form-layout-3 .dynamic-amount-section-amount { color: #0042BD; } .better-payment .payment-form-layout.payment-form-layout-3 .button { background-color: #0042BD !important; } .better-payment .payment-form-layout-3 .dynamic-amount-section-title { color: #000; } .better-payment .payment-form-layout-3 .dynamic-amount-section-subtitle { color: #666; } .better-payment .payment-form-layout-3 .dynamic-amount-section-icon { color: #C6CDE4; } .better-payment .payment-form-layout-3 .payment-method-checkbox { border-bottom: 1px solid #E9ECFF; cursor: pointer; } .better-payment .payment-form-layout-3 .payment-method-checkbox input, .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item input, .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item input { visibility: hidden; } .better-payment .payment-form-layout-3 .payment-method-checkbox.active, .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item.active, .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item.active { border-bottom: 1px solid #0042BD; } .better-payment .payment-form-layout-1 .form-content-section, .better-payment .payment-form-layout-2 .form-content-section { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .better-payment .payment-form-layout-2 .dynamic-amount-section, .better-payment .payment-form-layout-2 .form-content-section { border-radius: 10px; } .better-payment .payment-form-layout-2 .dynamic-amount-section { background: linear-gradient(180deg, #006AFF 0%, #004CBF 100%); } .better-payment .payment-form-layout-3 .dynamic-amount-section { background: #FBFCFF; } .better-payment .payment-form-layout .button { background-color: #006AFF !important; color: #fff !important; } .better-payment .button { -moz-appearance: none; -webkit-appearance: none; align-items: center; border: 1px solid transparent; border-radius: 0.375em; box-shadow: none; display: inline-flex; font-size: 1rem; height: 2.5em; justify-content: flex-start; line-height: 1.5; padding-bottom: calc(0.5em - 1px); padding-left: calc(0.75em - 1px); padding-right: calc(0.75em - 1px); padding-top: calc(0.5em - 1px); position: relative; vertical-align: top; } .better-payment .button.fix-common { -moz-appearance: none; -webkit-appearance: none; align-items: center; border: 1px solid transparent; border-radius: 0.375em; box-shadow: none; display: inline-flex; font-size: unset; height: 2.5em; justify-content: flex-start; line-height: 1.5; padding-bottom: calc(0.5em - 1px); padding-left: calc(0.75em - 1px); padding-right: calc(0.75em - 1px); padding-top: calc(0.5em - 1px); position: relative; vertical-align: top; } .better-payment .button:active, .better-payment .button:focus, .better-payment .is-active.button, .better-payment .is-focused.button { outline: 0; } .better-payment .buttons .button { margin-bottom: 0.5rem; } .better-payment .button.is-fullwidth { display: flex; width: 100%; } .better-payment .button.is-medium { font-size: 1.25rem; } .better-payment .button { background-color: #fff; border-color: #dbdbdb; border-width: 1px; color: #363636; cursor: pointer; justify-content: center; padding-bottom: calc(0.5em - 1px); padding-left: 1em; padding-right: 1em; padding-top: calc(0.5em - 1px); text-align: center; white-space: nowrap; } .better-payment .button.is-hovered, .better-payment .button:hover { border-color: #b5b5b5; color: #363636; } .better-payment .is-hidden { display: none !important; } .better-payment .control .bp-currency-symbol { color: #b0b7d6; font-size: 1.5rem; } .better-payment .is-full-width, .better-payment.is-full-width { width: 100%; } .better-payment .is-medium.bp-custom-payment-amount-el-integration { font-size: unset; border-color: unset; border-radius: 3px; } .better-payment .control.has-icons-left .is-medium.bp-custom-payment-amount-el-integration ~ .icon { font-size: unset; } .better-payment .is-medium.bp-custom-payment-amount-el-integration:focus { box-shadow: unset; } /* Tablet */ @media screen and (min-width: 769px) { .better-payment .columns:not(.is-desktop) { display: flex; } .better-payment .column.is-three-quarters, .better-payment .column.is-three-quarters-tablet { flex: none; width: 75%; } .better-payment .column.is-two-thirds, .better-payment .column.is-two-thirds-tablet { flex: none; width: 66.6666%; } .better-payment .tile:not(.is-child) { display: flex; } .better-payment .tile.is-8 { flex: none; width: 66.66667%; } .better-payment .column.is-1, .better-payment .column.is-1-tablet { flex: none; width: 8.33333%; } .better-payment .column.is-2, .better-payment .column.is-2-tablet { flex: none; width: 16.66667%; } .better-payment .column.is-3, .better-payment .column.is-3-tablet { flex: none; width: 25%; } .better-payment .column.is-4, .better-payment .column.is-4-tablet { flex: none; width: 33.33333%; } .better-payment .column.is-5, .better-payment .column.is-5-tablet { flex: none; width: 41.66667%; } .better-payment .column.is-6, .better-payment .column.is-6-tablet { flex: none; width: 50%; } .better-payment .column.is-7, .better-payment .column.is-7-tablet { flex: none; width: 58.33333%; } .better-payment .column.is-8, .better-payment .column.is-8-tablet { flex: none; width: 66.66667%; } .better-payment .column.is-9, .better-payment .column.is-9-tablet { flex: none; width: 75%; } .better-payment .column.is-10, .better-payment .column.is-10-tablet { flex: none; width: 83.33333%; } .better-payment .column.is-11, .better-payment .column.is-11-tablet { flex: none; width: 91.66667%; } .better-payment .column.is-12, .better-payment .column.is-12-tablet { flex: none; width: 100%; } .better-payment .column.is-full, .better-payment .column.is-full-tablet { flex: none; width: 100%; } .better-payment .column.is-four-fifths, .better-payment .column.is-four-fifths-tablet { flex: none; width: 80%; } .better-payment .column.is-three-quarters, .better-payment .column.is-three-quarters-tablet { flex: none; width: 75%; } .better-payment .column.is-two-thirds, .better-payment .column.is-two-thirds-tablet { flex: none; width: 66.6666%; } .better-payment .column.is-three-fifths, .better-payment .column.is-three-fifths-tablet { flex: none; width: 60%; } .better-payment .column.is-half, .better-payment .column.is-half-tablet { flex: none; width: 50%; } .better-payment .column.is-two-fifths, .better-payment .column.is-two-fifths-tablet { flex: none; width: 40%; } .better-payment .column.is-one-third, .better-payment .column.is-one-third-tablet { flex: none; width: 33.3333%; } .better-payment .column.is-one-quarter, .better-payment .column.is-one-quarter-tablet { flex: none; width: 25%; } .better-payment .column.is-one-fifth, .better-payment .column.is-one-fifth-tablet { flex: none; width: 20%; } .better-payment .tile.is-vertical { flex-direction: column; } .better-payment .tile.is-parent { padding: 0.75rem; } .better-payment .column.is-offset-1, .better-payment .column.is-offset-1-tablet { margin-left: 8.33333%; } .better-payment .column.is-offset-2, .better-payment .column.is-offset-2-tablet { margin-left: 16.66667%; } .better-payment .column.is-offset-3, .better-payment .column.is-offset-3-tablet { margin-left: 25%; } .better-payment .column.is-offset-4, .better-payment .column.is-offset-4-tablet { margin-left: 33.33333%; } .better-payment .column.is-offset-5, .better-payment .column.is-offset-5-tablet { margin-left: 41.66667%; } .better-payment .column.is-offset-6, .better-payment .column.is-offset-6-tablet { margin-left: 50%; } .better-payment .column.is-offset-7, .better-payment .column.is-offset-7-tablet { margin-left: 58.33333%; } .better-payment .column.is-offset-8, .better-payment .column.is-offset-8-tablet { margin-left: 66.66667%; } .better-payment .column.is-offset-9, .better-payment .column.is-offset-9-tablet { margin-left: 75%; } .better-payment .column.is-offset-10, .better-payment .column.is-offset-10-tablet { margin-left: 83.33333%; } .better-payment .column.is-offset-11, .better-payment .column.is-offset-11-tablet { margin-left: 91.66667%; } .better-payment .column.is-offset-12, .better-payment .column.is-offset-12-tablet { margin-left: 100%; } .better-payment .tile.is-offset-2, .better-payment .tile.is-offset-2-tablet { margin-left: 16.66667%; } .better-payment .bp-modal .modal-card, .better-payment .bp-modal .modal-content { width: 740px; } } /* Desktop */ @media screen and (min-width: 992px) { .better-payment .columns:not(.is-desktop) { display: flex; } .better-payment .column.is-1-desktop { flex: none; width: 8.33333%; } .better-payment .column.is-2-desktop { flex: none; width: 16.66667%; } .better-payment .column.is-3-desktop { flex: none; width: 25%; } .better-payment .column.is-4-desktop { flex: none; width: 33.33333%; } .better-payment .column.is-5-desktop { flex: none; width: 41.66667%; } .better-payment .column.is-6-desktop { flex: none; width: 50%; } .better-payment .column.is-7-desktop { flex: none; width: 58.33333%; } .better-payment .column.is-8-desktop { flex: none; width: 66.66667%; } .better-payment .column.is-9-desktop { flex: none; width: 75%; } .better-payment .column.is-10-desktop { flex: none; width: 83.33333%; } .better-payment .column.is-11-desktop { flex: none; width: 91.66667%; } .better-payment .column.is-12-desktop { flex: none; width: 100%; } .better-payment .bp-modal .modal-card, .better-payment .bp-modal .modal-content { width: 950px !important; } .better-payment .bp-modal .is-small .modal-card, .better-payment .bp-modal .is-small .modal-content { width: 550px; } } /* Large Desktop : widescreen */ @media screen and (min-width: 1200px) { .better-payment .column.is-1-widescreen { flex: none; width: 8.33333%; } .better-payment .column.is-2-widescreen { flex: none; width: 16.66667%; } .better-payment .column.is-3-widescreen { flex: none; width: 25%; } .better-payment .column.is-4-widescreen { flex: none; width: 33.33333%; } .better-payment .column.is-5-widescreen { flex: none; width: 41.66667%; } .better-payment .column.is-6-widescreen { flex: none; width: 50%; } .better-payment .column.is-7-widescreen { flex: none; width: 58.33333%; } .better-payment .column.is-8-widescreen { flex: none; width: 66.66667%; } .better-payment .column.is-9-widescreen { flex: none; width: 75%; } .better-payment .column.is-10-widescreen { flex: none; width: 83.33333%; } .better-payment .column.is-11-widescreen { flex: none; width: 91.66667%; } .better-payment .column.is-12-widescreen { flex: none; width: 100%; } } /* Larger Desktop : fullhd */ @media screen and (min-width: 1400px) { .better-payment .column.is-1-fullhd { flex: none; width: 8.33333%; } .better-payment .column.is-2-fullhd { flex: none; width: 16.66667%; } .better-payment .column.is-3-fullhd { flex: none; width: 25%; } .better-payment .column.is-4-fullhd { flex: none; width: 33.33333%; } .better-payment .column.is-5-fullhd { flex: none; width: 41.66667%; } .better-payment .column.is-6-fullhd { flex: none; width: 50%; } .better-payment .column.is-7-fullhd { flex: none; width: 58.33333%; } .better-payment .column.is-8-fullhd { flex: none; width: 66.66667%; } .better-payment .column.is-9-fullhd { flex: none; width: 75%; } .better-payment .column.is-10-fullhd { flex: none; width: 83.33333%; } .better-payment .column.is-11-fullhd { flex: none; width: 91.66667%; } .better-payment .column.is-12-fullhd { flex: none; width: 100%; } } /* Larger Desktop Custom : fullhd-custom */ @media screen and (min-width: 1500px) { .better-payment .column.is-1-fullhd-custom { flex: none; width: 8.33333%; } .better-payment .column.is-2-fullhd-custom { flex: none; width: 16.66667%; } .better-payment .column.is-3-fullhd-custom { flex: none; width: 25%; } .better-payment .column.is-4-fullhd-custom { flex: none; width: 33.33333%; } .better-payment .column.is-5-fullhd-custom { flex: none; width: 41.66667%; } .better-payment .column.is-6-fullhd-custom { flex: none; width: 50%; } .better-payment .column.is-7-fullhd-custom { flex: none; width: 58.33333%; } .better-payment .column.is-8-fullhd-custom { flex: none; width: 66.66667%; } .better-payment .column.is-9-fullhd-custom { flex: none; width: 75%; } .better-payment .column.is-10-fullhd-custom { flex: none; width: 83.33333%; } .better-payment .column.is-11-fullhd-custom { flex: none; width: 91.66667%; } .better-payment .column.is-12-fullhd-custom { flex: none; width: 100%; } } /* BP Modal : Starts */ .better-payment .bp-modal .modal, .better-payment .bp-modal .modal-background { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .better-payment .bp-modal .modal { align-items: center; display: none; flex-direction: column; justify-content: center; overflow: hidden; position: fixed; z-index: 40; } .better-payment .bp-modal .modal-background { background-color: rgba(10, 10, 10, 0.86); } .better-payment .bp-modal .modal-card, .better-payment .bp-modal .modal-content { margin: 0 20px; max-height: calc(100vh - 160px); overflow: auto; position: relative; width: 100%; } .better-payment .bp-modal .modal-card { display: flex; flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden; } .better-payment .bp-modal .modal-card-head { border-bottom: 1px solid #dbdbdb; border-top-left-radius: 6px; border-top-right-radius: 6px; } .better-payment .bp-modal .modal-card-foot, .better-payment .bp-modal .modal-card-head { align-items: center; background-color: #f5f5f5; display: flex; flex-shrink: 0; justify-content: flex-end; padding: 15px 20px; position: relative; } .better-payment .bp-modal .modal-card-body { -webkit-overflow-scrolling: touch; background-color: #fff; flex-grow: 1; flex-shrink: 1; overflow: auto; padding: 20px; } .better-payment .bp-modal .modal-card-foot { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top: 1px solid #dbdbdb; } .better-payment .bp-modal .modal-card-title { color: #363636; flex-grow: 1; flex-shrink: 0; font-size: 1.5rem; line-height: 1; } .better-payment .bp-modal .button, .better-payment .bp-modal .button:focus { outline: 0 !important; border-color: transparent !important; } .better-payment .bp-modal .modal.is-active { display: flex; } .better-payment .bp-modal .is-large.modal-close { height: 32px; max-height: 32px; max-width: 32px; min-height: 32px; min-width: 32px; width: 32px; } .better-payment .bp-modal .delete, .better-payment .bp-modal .modal-close { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-appearance: none; -webkit-appearance: none; background-color: rgba(10, 10, 10, 0.2); border: none; border-radius: 9999px; cursor: pointer; pointer-events: auto; display: inline-block; flex-grow: 0; flex-shrink: 0; font-size: 0; height: 20px; max-height: 20px; max-width: 20px; min-height: 20px; min-width: 20px; outline: 0; position: relative; vertical-align: top; width: 20px; } .better-payment .bp-modal .modal-close { background: 0 0; height: 40px; position: fixed; right: 20px; top: 52px; width: 40px; } .better-payment .bp-modal .delete::before, .better-payment .bp-modal .modal-close::before { height: 2px; width: 50%; } .better-payment .bp-modal .delete::after, .better-payment .bp-modal .modal-close::after { height: 50%; width: 2px; } .better-payment .bp-modal .delete::after, .better-payment .bp-modal .delete::before, .better-payment .bp-modal .modal-close::after, .better-payment .bp-modal .modal-close::before { background-color: #fff; content: ""; display: block; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center; } .better-payment .bp-modal .box { background-color: #fff; border-radius: 6px; box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02); color: #4a4a4a; display: block; padding: 1.25rem; } .better-payment .bp-modal .delete:focus, .better-payment .bp-modal .delete:hover, .better-payment .bp-modal .modal-close:focus, .better-payment .bp-modal .modal-close:hover { background-color: rgba(10, 10, 10, 0.3); } .better-payment .bp-modal .modal-card, .better-payment .bp-modal .modal-content { margin: 0 auto; max-height: calc(100vh - 40px); } /* BP Modal : Ends */