PluginProbe
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More / 1.0.2
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More v1.0.2
2.4.1 2.4.0 2.3.4 2.3.3 2.3.2 2.3.1 2.3.0 2.2.2 2.2.1 2.2.0 2.1.2 2.1.1 trunk 0.0.1 0.0.2 0.0.3 0.0.4 0.0.5 0.0.6 0.0.7 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 All 68 releases
better-payment / assets / css / common.css

common.css in Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More 1.0.2, at assets/css/common.css

1,902 lines 40.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!************************************************************************************************************************************************************************************!*\
2 !*** 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 ***!
3 \************************************************************************************************************************************************************************************/
4 .better-payment .payment-form-layout-1 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box,
5 .better-payment .payment-form-layout-2 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box {
6 display: flex;
7 justify-content: space-between;
8 align-items: center;
9 }
10 .better-payment .payment-form-layout-1 .bp-three-items-enabled,
11 .better-payment .payment-form-layout-2 .bp-three-items-enabled {
12 display: flex;
13 align-items: center;
14 }
15 .better-payment .bp-three-items-enabled.pr-6 {
16 padding-right: unset !important;
17 }
18
19 .better-payment .bp-radio-box input[type=radio]:checked {
20 border: 2px solid #006AFF;
21 }
22
23 .better-payment .bp-radio-box input[type=radio] {
24 width: 20px;
25 height: 20px;
26 outline: 0;
27 border-radius: 50%;
28 position: relative;
29 border: 2px solid #CBC9DA;
30 background: #fff;
31 margin-bottom: -3px;
32 margin-right: 10px;
33 }
34
35 .better-payment .bp-radio-box input[type=radio]:after {
36 content: "";
37 opacity: 0;
38 display: block;
39 left: 4px;
40 top: 4px;
41 position: absolute;
42 width: 8px;
43 height: 8px;
44 border-radius: 50%;
45 background: #006AFF;
46 }
47
48 .better-payment .form-content-section-fields .payment-method-checkbox input[type=radio]:after {
49 width: 12px;
50 height: 12px;
51 }
52
53 .better-payment .bp-radio-box input[type=radio]:checked:after {
54 opacity: 1;
55 }
56
57 .better-payment .control {
58 box-sizing: border-box;
59 clear: both;
60 font-size: 1rem;
61 position: relative;
62 text-align: inherit;
63 }
64
65 .better-payment .control.has-icons-right .input,
66 .better-payment .control.has-icons-right .select select {
67 padding-right: 2.5em;
68 }
69
70 .better-payment .control.has-icons-left .input,
71 .better-payment .control.has-icons-left .select select {
72 padding-left: 2.5em;
73 }
74
75 .better-payment .is-large.input,
76 .better-payment .is-large.textarea {
77 font-size: 1.5rem;
78 }
79
80 .better-payment .control.has-icons-left .input.is-large ~ .icon,
81 .better-payment .control.has-icons-left .select.is-large ~ .icon,
82 .better-payment .control.has-icons-right .input.is-large ~ .icon,
83 .better-payment .control.has-icons-right .select.is-large ~ .icon {
84 font-size: 1.5rem;
85 }
86
87 .better-payment .control.has-icons-left .icon.is-left {
88 left: 0;
89 }
90
91 .better-payment .control.has-icons-left .icon,
92 .better-payment .control.has-icons-right .icon {
93 color: #dbdbdb;
94 height: 2.5em;
95 pointer-events: none;
96 position: absolute;
97 top: 0;
98 width: 2.5em;
99 z-index: 4;
100 }
101
102 .better-payment .icon.is-medium {
103 height: 2rem;
104 width: 2rem;
105 }
106
107 .better-payment .icon {
108 align-items: center;
109 display: inline-flex;
110 justify-content: center;
111 height: 1.5rem;
112 width: 1.5rem;
113 }
114
115 .better-payment .control.has-icons-right .icon.is-right {
116 right: 0;
117 }
118
119 .better-payment .control.has-icons-left .icon,
120 .better-payment .control.has-icons-right .icon {
121 color: #dbdbdb;
122 height: 2.5em;
123 pointer-events: none;
124 position: absolute;
125 top: 0;
126 width: 2.5em;
127 z-index: 4;
128 }
129
130 .better-payment .input:active,
131 .better-payment .input:focus,
132 .better-payment .is-active.input,
133 .better-payment .is-active.textarea,
134 .better-payment .is-focused.input,
135 .better-payment .is-focused.textarea,
136 .better-payment .select select.is-active,
137 .better-payment .select select.is-focused,
138 .better-payment .select select:active,
139 .better-payment .select select:focus,
140 .better-payment .textarea:active,
141 .better-payment .textarea:focus {
142 border-color: #485fc7;
143 box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
144 }
145
146 .better-payment .input:hover,
147 .better-payment .is-hovered.input,
148 .better-payment .is-hovered.textarea,
149 .better-payment .select select.is-hovered,
150 .better-payment .select select:hover,
151 .better-payment .textarea:hover {
152 border-color: #b5b5b5;
153 }
154
155 .better-payment .input,
156 .better-payment .textarea {
157 box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
158 max-width: 100%;
159 width: 100%;
160 }
161
162 .better-payment .is-medium.input,
163 .better-payment .is-medium.textarea {
164 font-size: 1.25rem;
165 }
166
167 .better-payment .control.has-icons-left .input.is-medium ~ .icon,
168 .better-payment .control.has-icons-left .select.is-medium ~ .icon,
169 .better-payment .control.has-icons-right .input.is-medium ~ .icon,
170 .better-payment .control.has-icons-right .select.is-medium ~ .icon {
171 font-size: 1.25rem;
172 }
173
174 /* Helper Classes */
175 .better-payment .columns.is-mobile {
176 display: flex;
177 }
178
179 .better-payment .columns:not(:last-child) {
180 margin-bottom: 0.75rem;
181 }
182
183 .better-payment .columns {
184 margin-left: -0.75rem;
185 margin-right: -0.75rem;
186 margin-top: -0.75rem;
187 }
188
189 .better-payment .column {
190 display: block;
191 flex-basis: 0;
192 flex-grow: 1;
193 flex-shrink: 1;
194 padding: 0.75rem;
195 }
196
197 .better-payment .is-size-1 {
198 font-size: 3rem !important;
199 }
200
201 .better-payment .is-size-1-fix {
202 font-size: 3rem;
203 }
204
205 .better-payment .is-size-2 {
206 font-size: 2.5rem !important;
207 }
208
209 .better-payment .is-size-2-fix {
210 font-size: 2.5rem;
211 }
212
213 .better-payment .is-size-3 {
214 font-size: 2rem !important;
215 }
216
217 .better-payment .is-size-3-fix {
218 font-size: 2rem;
219 }
220
221 .better-payment .is-size-4 {
222 font-size: 1.5rem !important;
223 }
224
225 .better-payment .is-size-4-fix {
226 font-size: 1.5rem;
227 }
228
229 .better-payment .is-size-5 {
230 font-size: 1.25rem !important;
231 }
232
233 .better-payment .is-size-5-fix {
234 font-size: 1.25rem;
235 }
236
237 .better-payment .is-size-6 {
238 font-size: 1rem !important;
239 }
240
241 .better-payment .is-size-6-fix {
242 font-size: 1rem;
243 }
244
245 .better-payment .is-size-7 {
246 font-size: 0.75rem !important;
247 }
248
249 .better-payment .is-size-7-fix {
250 font-size: 0.75rem;
251 }
252
253 .better-payment .has-text-white {
254 color: #fff !important;
255 }
256
257 .better-payment .has-text-white-fix {
258 color: #fff;
259 }
260
261 .better-payment .has-text-black {
262 color: #000 !important;
263 }
264
265 .better-payment .has-text-black-fix {
266 color: #000;
267 }
268
269 .better-payment .has-text-light {
270 color: #f5f5f5 !important;
271 }
272
273 .better-payment .has-text-light-fix {
274 color: #f5f5f5;
275 }
276
277 .better-payment .has-text-dark {
278 color: #363636 !important;
279 }
280
281 .better-payment .has-text-dark-fix {
282 color: #363636;
283 }
284
285 .better-payment .has-text-primary {
286 color: #00d1b2 !important;
287 }
288
289 .better-payment .has-text-primary-fix {
290 color: #00d1b2;
291 }
292
293 .better-payment .has-text-link {
294 color: #485fc7 !important;
295 }
296
297 .better-payment .has-text-link-fix {
298 color: #485fc7;
299 }
300
301 .better-payment .has-text-info {
302 color: #3e8ed0 !important;
303 }
304
305 .better-payment .has-text-info-fix {
306 color: #3e8ed0;
307 }
308
309 .better-payment .has-text-success {
310 color: #48c78e !important;
311 }
312
313 .better-payment .has-text-success-fix {
314 color: #48c78e;
315 }
316
317 .better-payment .has-text-warning {
318 color: #ffe08a !important;
319 }
320
321 .better-payment .has-text-warning-fix {
322 color: #ffe08a;
323 }
324
325 .better-payment .has-text-danger {
326 color: #f14668 !important;
327 }
328
329 .better-payment .has-text-danger-fix {
330 color: #f14668;
331 }
332
333 .better-payment .m-0 {
334 margin: 0 !important;
335 }
336
337 .better-payment .mt-0 {
338 margin-top: 0 !important;
339 }
340
341 .better-payment .mr-0 {
342 margin-right: 0 !important;
343 }
344
345 .better-payment .mb-0 {
346 margin-bottom: 0 !important;
347 }
348
349 .better-payment .ml-0 {
350 margin-left: 0 !important;
351 }
352
353 .better-payment .mx-0 {
354 margin-left: 0 !important;
355 margin-right: 0 !important;
356 }
357
358 .better-payment .my-0 {
359 margin-top: 0 !important;
360 margin-bottom: 0 !important;
361 }
362
363 .better-payment .m-1 {
364 margin: 0.25rem !important;
365 }
366
367 .better-payment .mt-1 {
368 margin-top: 0.25rem !important;
369 }
370
371 .better-payment .mr-1 {
372 margin-right: 0.25rem !important;
373 }
374
375 .better-payment .mb-1 {
376 margin-bottom: 0.25rem !important;
377 }
378
379 .better-payment .ml-1 {
380 margin-left: 0.25rem !important;
381 }
382
383 .better-payment .mx-1 {
384 margin-left: 0.25rem !important;
385 margin-right: 0.25rem !important;
386 }
387
388 .better-payment .my-1 {
389 margin-top: 0.25rem !important;
390 margin-bottom: 0.25rem !important;
391 }
392
393 .better-payment .m-2 {
394 margin: 0.5rem !important;
395 }
396
397 .better-payment .mt-2 {
398 margin-top: 0.5rem !important;
399 }
400
401 .better-payment .mr-2 {
402 margin-right: 0.5rem !important;
403 }
404
405 .better-payment .mb-2 {
406 margin-bottom: 0.5rem !important;
407 }
408
409 .better-payment .ml-2 {
410 margin-left: 0.5rem !important;
411 }
412
413 .better-payment .mx-2 {
414 margin-left: 0.5rem !important;
415 margin-right: 0.5rem !important;
416 }
417
418 .better-payment .my-2 {
419 margin-top: 0.5rem !important;
420 margin-bottom: 0.5rem !important;
421 }
422
423 .better-payment .m-3 {
424 margin: 0.75rem !important;
425 }
426
427 .better-payment .mt-3 {
428 margin-top: 0.75rem !important;
429 }
430
431 .better-payment .mr-3 {
432 margin-right: 0.75rem !important;
433 }
434
435 .better-payment .mb-3 {
436 margin-bottom: 0.75rem !important;
437 }
438
439 .better-payment .ml-3 {
440 margin-left: 0.75rem !important;
441 }
442
443 .better-payment .mx-3 {
444 margin-left: 0.75rem !important;
445 margin-right: 0.75rem !important;
446 }
447
448 .better-payment .my-3 {
449 margin-top: 0.75rem !important;
450 margin-bottom: 0.75rem !important;
451 }
452
453 .better-payment .m-4 {
454 margin: 1rem !important;
455 }
456
457 .better-payment .mt-4 {
458 margin-top: 1rem !important;
459 }
460
461 .better-payment .mr-4 {
462 margin-right: 1rem !important;
463 }
464
465 .better-payment .mb-4 {
466 margin-bottom: 1rem !important;
467 }
468
469 .better-payment .ml-4 {
470 margin-left: 1rem !important;
471 }
472
473 .better-payment .mx-4 {
474 margin-left: 1rem !important;
475 margin-right: 1rem !important;
476 }
477
478 .better-payment .my-4 {
479 margin-top: 1rem !important;
480 margin-bottom: 1rem !important;
481 }
482
483 .better-payment .m-5 {
484 margin: 1.5rem !important;
485 }
486
487 .better-payment .mt-5 {
488 margin-top: 1.5rem !important;
489 }
490
491 .better-payment .mr-5 {
492 margin-right: 1.5rem !important;
493 }
494
495 .better-payment .mb-5 {
496 margin-bottom: 1.5rem !important;
497 }
498
499 .better-payment .ml-5 {
500 margin-left: 1.5rem !important;
501 }
502
503 .better-payment .mx-5 {
504 margin-left: 1.5rem !important;
505 margin-right: 1.5rem !important;
506 }
507
508 .better-payment .my-5 {
509 margin-top: 1.5rem !important;
510 margin-bottom: 1.5rem !important;
511 }
512
513 .better-payment .m-6 {
514 margin: 3rem !important;
515 }
516
517 .better-payment .mt-6 {
518 margin-top: 3rem !important;
519 }
520
521 .better-payment .mr-6 {
522 margin-right: 3rem !important;
523 }
524
525 .better-payment .mb-6 {
526 margin-bottom: 3rem !important;
527 }
528
529 .better-payment .ml-6 {
530 margin-left: 3rem !important;
531 }
532
533 .better-payment .mx-6 {
534 margin-left: 3rem !important;
535 margin-right: 3rem !important;
536 }
537
538 .better-payment .my-6 {
539 margin-top: 3rem !important;
540 margin-bottom: 3rem !important;
541 }
542
543 .better-payment .p-0 {
544 padding: 0 !important;
545 }
546
547 .better-payment .pt-0 {
548 padding-top: 0 !important;
549 }
550
551 .better-payment .pr-0 {
552 padding-right: 0 !important;
553 }
554
555 .better-payment .pb-0 {
556 padding-bottom: 0 !important;
557 }
558
559 .better-payment .pl-0 {
560 padding-left: 0 !important;
561 }
562
563 .better-payment .px-0 {
564 padding-left: 0 !important;
565 padding-right: 0 !important;
566 }
567
568 .better-payment .py-0 {
569 padding-top: 0 !important;
570 padding-bottom: 0 !important;
571 }
572
573 .better-payment .p-1 {
574 padding: 0.25rem !important;
575 }
576
577 .better-payment .pt-1 {
578 padding-top: 0.25rem !important;
579 }
580
581 .better-payment .pr-1 {
582 padding-right: 0.25rem !important;
583 }
584
585 .better-payment .pb-1 {
586 padding-bottom: 0.25rem !important;
587 }
588
589 .better-payment .pl-1 {
590 padding-left: 0.25rem !important;
591 }
592
593 .better-payment .px-1 {
594 padding-left: 0.25rem !important;
595 padding-right: 0.25rem !important;
596 }
597
598 .better-payment .py-1 {
599 padding-top: 0.25rem !important;
600 padding-bottom: 0.25rem !important;
601 }
602
603 .better-payment .p-2 {
604 padding: 0.5rem !important;
605 }
606
607 .better-payment .pt-2 {
608 padding-top: 0.5rem !important;
609 }
610
611 .better-payment .pr-2 {
612 padding-right: 0.5rem !important;
613 }
614
615 .better-payment .pb-2 {
616 padding-bottom: 0.5rem !important;
617 }
618
619 .better-payment .pl-2 {
620 padding-left: 0.5rem !important;
621 }
622
623 .better-payment .px-2 {
624 padding-left: 0.5rem !important;
625 padding-right: 0.5rem !important;
626 }
627
628 .better-payment .py-2 {
629 padding-top: 0.5rem !important;
630 padding-bottom: 0.5rem !important;
631 }
632
633 .better-payment .p-3 {
634 padding: 0.75rem !important;
635 }
636
637 .better-payment .pt-3 {
638 padding-top: 0.75rem !important;
639 }
640
641 .better-payment .pr-3 {
642 padding-right: 0.75rem !important;
643 }
644
645 .better-payment .pb-3 {
646 padding-bottom: 0.75rem !important;
647 }
648
649 .better-payment .pl-3 {
650 padding-left: 0.75rem !important;
651 }
652
653 .better-payment .px-3 {
654 padding-left: 0.75rem !important;
655 padding-right: 0.75rem !important;
656 }
657
658 .better-payment .py-3 {
659 padding-top: 0.75rem !important;
660 padding-bottom: 0.75rem !important;
661 }
662
663 .better-payment .p-4 {
664 padding: 1rem !important;
665 }
666
667 .better-payment .pt-4 {
668 padding-top: 1rem !important;
669 }
670
671 .better-payment .pr-4 {
672 padding-right: 1rem !important;
673 }
674
675 .better-payment .pb-4 {
676 padding-bottom: 1rem !important;
677 }
678
679 .better-payment .pl-4 {
680 padding-left: 1rem !important;
681 }
682
683 .better-payment .px-4 {
684 padding-left: 1rem !important;
685 padding-right: 1rem !important;
686 }
687
688 .better-payment .py-4 {
689 padding-top: 1rem !important;
690 padding-bottom: 1rem !important;
691 }
692
693 .better-payment .p-5 {
694 padding: 1.5rem !important;
695 }
696
697 .better-payment .pt-5 {
698 padding-top: 1.5rem !important;
699 }
700
701 .better-payment .pr-5 {
702 padding-right: 1.5rem !important;
703 }
704
705 .better-payment .pb-5 {
706 padding-bottom: 1.5rem !important;
707 }
708
709 .better-payment .pl-5 {
710 padding-left: 1.5rem !important;
711 }
712
713 .better-payment .px-5 {
714 padding-left: 1.5rem !important;
715 padding-right: 1.5rem !important;
716 }
717
718 .better-payment .py-5 {
719 padding-top: 1.5rem !important;
720 padding-bottom: 1.5rem !important;
721 }
722
723 .better-payment .p-6 {
724 padding: 3rem !important;
725 }
726
727 .better-payment .pt-6 {
728 padding-top: 3rem !important;
729 }
730
731 .better-payment .pr-6 {
732 padding-right: 3rem !important;
733 }
734
735 .better-payment .pb-6 {
736 padding-bottom: 3rem !important;
737 }
738
739 .better-payment .pl-6 {
740 padding-left: 3rem !important;
741 }
742
743 .better-payment .px-6 {
744 padding-left: 3rem !important;
745 padding-right: 3rem !important;
746 }
747
748 .better-payment .py-6 {
749 padding-top: 3rem !important;
750 padding-bottom: 3rem !important;
751 }
752
753 .better-payment .columns.is-gapless:not(:last-child) {
754 margin-bottom: 1.5rem;
755 }
756
757 .better-payment .columns.is-gapless {
758 margin-left: 0;
759 margin-right: 0;
760 margin-top: 0;
761 }
762
763 .better-payment .tile.is-ancestor:not(:last-child) {
764 margin-bottom: 0.75rem;
765 }
766
767 .better-payment .tile.is-ancestor {
768 margin-left: -0.75rem;
769 margin-right: -0.75rem;
770 margin-top: -0.75rem;
771 }
772
773 .better-payment .tile {
774 align-items: stretch;
775 display: block;
776 flex-basis: 0;
777 flex-grow: 1;
778 flex-shrink: 1;
779 min-height: -webkit-min-content;
780 min-height: -moz-min-content;
781 min-height: min-content;
782 }
783
784 .better-payment .tile.is-vertical > .tile.is-child:not(:last-child) {
785 margin-bottom: 1.5rem !important;
786 }
787
788 .better-payment .tile.is-child {
789 margin: 0 !important;
790 }
791
792 .better-payment .notification.is-primary {
793 background-color: #00d1b2;
794 color: #fff;
795 }
796
797 .better-payment .notification.is-warning {
798 background-color: #ffe08a;
799 color: rgba(0, 0, 0, 0.7);
800 }
801
802 .better-payment .notification.is-info {
803 background-color: #3e8ed0;
804 color: #fff;
805 }
806
807 .better-payment .has-background-white {
808 background-color: #ffffff !important;
809 }
810
811 .better-payment .has-background-white-fix {
812 background-color: #ffffff;
813 }
814
815 .better-payment .has-background-black {
816 background-color: #0a0a0a !important;
817 }
818
819 .better-payment .has-background-black-fix {
820 background-color: #0a0a0a;
821 }
822
823 .better-payment .has-background-light {
824 background-color: #f5f5f5 !important;
825 }
826
827 .better-payment .has-background-light-fix {
828 background-color: #f5f5f5;
829 }
830
831 .better-payment .has-background-dark {
832 background-color: #363636 !important;
833 }
834
835 .better-payment .has-background-dark-fix {
836 background-color: #363636;
837 }
838
839 .better-payment .has-background-primary {
840 background-color: #00d1b2 !important;
841 }
842
843 .better-payment .has-background-primary-fix {
844 background-color: #00d1b2;
845 }
846
847 .better-payment .has-background-link {
848 background-color: #485fc7 !important;
849 }
850
851 .better-payment .has-background-link-fix {
852 background-color: #485fc7;
853 }
854
855 .better-payment .has-background-info {
856 background-color: #3e8ed0 !important;
857 }
858
859 .better-payment .has-background-info-fix {
860 background-color: #3e8ed0;
861 }
862
863 .better-payment .has-background-success {
864 background-color: #48c78e !important;
865 }
866
867 .better-payment .has-background-success-fix {
868 background-color: #48c78e;
869 }
870
871 .better-payment .has-background-warning {
872 background-color: #ffe08a !important;
873 }
874
875 .better-payment .has-background-warning-fix {
876 background-color: #ffe08a;
877 }
878
879 .better-payment .has-background-danger {
880 background-color: #f14668 !important;
881 }
882
883 .better-payment .has-background-danger-fix {
884 background-color: #f14668;
885 }
886
887 .better-payment .has-text-centered {
888 text-align: center !important;
889 }
890
891 .better-payment .has-text-justified {
892 text-align: justify !important;
893 }
894
895 .better-payment .has-text-left {
896 text-align: left !important;
897 }
898
899 .better-payment .has-text-right {
900 text-align: right !important;
901 }
902
903 .better-payment .has-text-weight-light {
904 font-weight: 300 !important;
905 }
906
907 .better-payment .has-text-weight-normal {
908 font-weight: 400 !important;
909 }
910
911 .better-payment .has-text-weight-medium {
912 font-weight: 500 !important;
913 }
914
915 .better-payment .has-text-weight-semibold {
916 font-weight: 600 !important;
917 }
918
919 .better-payment .has-text-weight-bold {
920 font-weight: 700 !important;
921 }
922
923 .better-payment .bulma-control-extend,
924 .better-payment .file-cta,
925 .better-payment .file-name,
926 .better-payment .input,
927 .better-payment .pagination-ellipsis,
928 .better-payment .pagination-link,
929 .better-payment .pagination-next,
930 .better-payment .pagination-previous,
931 .better-payment .select select,
932 .better-payment .textarea {
933 -moz-appearance: none;
934 -webkit-appearance: none;
935 align-items: center;
936 border: 1px solid transparent;
937 border-radius: 0.375em;
938 box-shadow: none;
939 display: inline-flex;
940 font-size: 1rem;
941 height: 2.5em;
942 justify-content: flex-start;
943 line-height: 1.5;
944 padding-bottom: calc(0.5em - 1px);
945 padding-left: calc(0.75em - 1px);
946 padding-right: calc(0.75em - 1px);
947 padding-top: calc(0.5em - 1px);
948 position: relative;
949 vertical-align: top;
950 }
951
952 .better-payment .input,
953 .better-payment .select select,
954 .better-payment .textarea {
955 background-color: #fff;
956 border-color: #dbdbdb;
957 border-radius: 0.375em;
958 color: #363636;
959 }
960
961 .better-payment .bulma-control-extend:active,
962 .better-payment .bulma-control-extend:focus,
963 .better-payment .file-cta:active,
964 .better-payment .file-cta:focus,
965 .better-payment .file-name:active,
966 .better-payment .file-name:focus,
967 .better-payment .input:active,
968 .better-payment .input:focus,
969 .better-payment .is-active.bulma-control-extend,
970 .better-payment .is-active.file-cta,
971 .better-payment .is-active.file-name,
972 .better-payment .is-active.input,
973 .better-payment .is-active.pagination-ellipsis,
974 .better-payment .is-active.pagination-link,
975 .better-payment .is-active.pagination-next,
976 .better-payment .is-active.pagination-previous,
977 .better-payment .is-active.textarea,
978 .better-payment .is-focused.bulma-control-extend,
979 .better-payment .is-focused.file-cta,
980 .better-payment .is-focused.file-name,
981 .better-payment .is-focused.input,
982 .better-payment .is-focused.pagination-ellipsis,
983 .better-payment .is-focused.pagination-link,
984 .better-payment .is-focused.pagination-next,
985 .better-payment .is-focused.pagination-previous,
986 .better-payment .is-focused.textarea,
987 .better-payment .pagination-ellipsis:active,
988 .better-payment .pagination-ellipsis:focus,
989 .better-payment .pagination-link:active,
990 .better-payment .pagination-link:focus,
991 .better-payment .pagination-next:active,
992 .better-payment .pagination-next:focus,
993 .better-payment .pagination-previous:active,
994 .better-payment .pagination-previous:focus,
995 .better-payment .select select.is-active,
996 .better-payment .select select.is-focused,
997 .better-payment .select select:active,
998 .better-payment .select select:focus,
999 .better-payment .textarea:active,
1000 .better-payment.textarea:focus {
1001 outline: 0;
1002 }
1003
1004 .better-payment .better-payment-notice.notification.is-danger.is-light {
1005 background-color: rgb(242, 222, 222);
1006 color: rgb(169, 68, 66);
1007 font-size: 85%;
1008 padding: 15px;
1009 border-radius: 3px;
1010 }
1011
1012 .better-payment .better-payment-notice.notification.is-danger.is-light a {
1013 color: rgb(169, 68, 66) !important;
1014 }
1015
1016 .better-payment .notification {
1017 background-color: #f5f5f5;
1018 border-radius: 0.375em;
1019 position: relative;
1020 padding: 1.25rem 2.5rem 1.25rem 1.5rem;
1021 }
1022
1023 .better-payment .notification.is-light {
1024 background-color: #f5f5f5;
1025 color: rgba(0, 0, 0, 0.7);
1026 }
1027
1028 .better-payment .notification.is-danger {
1029 background-color: #f14668;
1030 color: #fff;
1031 }
1032
1033 .better-payment .notification.is-danger.is-light {
1034 background-color: #feecf0;
1035 color: #cc0f35;
1036 }
1037
1038 .better-payment .notification.is-warning {
1039 background-color: #ffe08a;
1040 color: rgba(0, 0, 0, 0.7);
1041 }
1042
1043 .better-payment .notification.is-warning.is-light {
1044 background-color: #fffaeb;
1045 color: #946c00;
1046 }
1047
1048 .better-payment .notification.is-success {
1049 background-color: #48c78e;
1050 color: #fff;
1051 }
1052
1053 .better-payment .notification.is-success.is-light {
1054 background-color: #effaf5;
1055 color: #257953;
1056 }
1057
1058 .better-payment .notification.is-info {
1059 background-color: #3e8ed0;
1060 color: #fff;
1061 }
1062
1063 .better-payment .notification.is-info.is-light {
1064 background-color: #eff5fb;
1065 color: #296fa8;
1066 }
1067
1068 .better-payment .notification.is-link {
1069 background-color: #485fc7;
1070 color: #fff;
1071 }
1072
1073 .better-payment .notification.is-link.is-light {
1074 background-color: #eff1fa;
1075 color: #3850b7;
1076 }
1077
1078 .better-payment .notification.is-primary {
1079 background-color: #00d1b2;
1080 color: #fff;
1081 }
1082
1083 .better-payment .notification.is-primary.is-light {
1084 background-color: #ebfffc;
1085 color: #00947e;
1086 }
1087
1088 .better-payment .box {
1089 background-color: #fff;
1090 border-radius: 6px;
1091 box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
1092 color: #4a4a4a;
1093 display: block;
1094 padding: 0.75rem;
1095 }
1096
1097 /* Layout 2 */
1098 .better-payment .payment-form-layout-1,
1099 .better-payment .payment-form-layout-2 {
1100 font-family: "DM Sans", sans-serif;
1101 box-shadow: 0px 40px 75px rgba(0, 1, 35, 0.08);
1102 }
1103
1104 .better-payment .payment-form-layout-1 .dynamic-amount-section,
1105 .better-payment .payment-form-layout-2 .dynamic-amount-section {
1106 background: url("../img/bg-blue-2.svg") no-repeat center;
1107 background-size: cover;
1108 border-top-left-radius: 10px;
1109 border-bottom-left-radius: 10px;
1110 }
1111
1112 .better-payment .payment-form-layout-2 .dynamic-amount-section-subtitle {
1113 color: #98B9F2;
1114 }
1115
1116 .better-payment .payment-form-layout-3 .dynamic-amount-section-amount {
1117 color: #0042BD;
1118 }
1119
1120 .better-payment .payment-form-layout.payment-form-layout-3 .button {
1121 background-color: #0042BD !important;
1122 }
1123
1124 .better-payment .payment-form-layout-3 .dynamic-amount-section-title {
1125 color: #000;
1126 }
1127
1128 .better-payment .payment-form-layout-3 .dynamic-amount-section-subtitle {
1129 color: #666;
1130 }
1131
1132 .better-payment .payment-form-layout-3 .dynamic-amount-section-icon {
1133 color: #C6CDE4;
1134 }
1135
1136 .better-payment .payment-form-layout-3 .payment-method-checkbox {
1137 border-bottom: 1px solid #E9ECFF;
1138 cursor: pointer;
1139 }
1140
1141 .better-payment .payment-form-layout-3 .payment-method-checkbox input,
1142 .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item input,
1143 .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item input {
1144 visibility: hidden;
1145 }
1146
1147 .better-payment .payment-form-layout-3 .payment-method-checkbox.active,
1148 .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item.active,
1149 .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item.active {
1150 border-bottom: 1px solid #0042BD;
1151 }
1152
1153 .better-payment .payment-form-layout-1 .form-content-section,
1154 .better-payment .payment-form-layout-2 .form-content-section {
1155 border-top-right-radius: 10px;
1156 border-bottom-right-radius: 10px;
1157 }
1158
1159 .better-payment .payment-form-layout-2 .dynamic-amount-section,
1160 .better-payment .payment-form-layout-2 .form-content-section {
1161 border-radius: 10px;
1162 }
1163
1164 .better-payment .payment-form-layout-2 .dynamic-amount-section {
1165 background: linear-gradient(180deg, #006AFF 0%, #004CBF 100%);
1166 }
1167
1168 .better-payment .payment-form-layout-3 .dynamic-amount-section {
1169 background: #FBFCFF;
1170 }
1171
1172 .better-payment .payment-form-layout .button {
1173 background-color: #006AFF !important;
1174 color: #fff !important;
1175 }
1176
1177 .better-payment .button {
1178 -moz-appearance: none;
1179 -webkit-appearance: none;
1180 align-items: center;
1181 border: 1px solid transparent;
1182 border-radius: 0.375em;
1183 box-shadow: none;
1184 display: inline-flex;
1185 font-size: 1rem;
1186 height: 2.5em;
1187 justify-content: flex-start;
1188 line-height: 1.5;
1189 padding-bottom: calc(0.5em - 1px);
1190 padding-left: calc(0.75em - 1px);
1191 padding-right: calc(0.75em - 1px);
1192 padding-top: calc(0.5em - 1px);
1193 position: relative;
1194 vertical-align: top;
1195 }
1196
1197 .better-payment .button.fix-common {
1198 -moz-appearance: none;
1199 -webkit-appearance: none;
1200 align-items: center;
1201 border: 1px solid transparent;
1202 border-radius: 0.375em;
1203 box-shadow: none;
1204 display: inline-flex;
1205 font-size: unset;
1206 height: 2.5em;
1207 justify-content: flex-start;
1208 line-height: 1.5;
1209 padding-bottom: calc(0.5em - 1px);
1210 padding-left: calc(0.75em - 1px);
1211 padding-right: calc(0.75em - 1px);
1212 padding-top: calc(0.5em - 1px);
1213 position: relative;
1214 vertical-align: top;
1215 }
1216
1217 .better-payment .button:active,
1218 .better-payment .button:focus,
1219 .better-payment .is-active.button,
1220 .better-payment .is-focused.button {
1221 outline: 0;
1222 }
1223
1224 .better-payment .buttons .button {
1225 margin-bottom: 0.5rem;
1226 }
1227
1228 .better-payment .button.is-fullwidth {
1229 display: flex;
1230 width: 100%;
1231 }
1232
1233 .better-payment .button.is-medium {
1234 font-size: 1.25rem;
1235 }
1236
1237 .better-payment .button {
1238 background-color: #fff;
1239 border-color: #dbdbdb;
1240 border-width: 1px;
1241 color: #363636;
1242 cursor: pointer;
1243 justify-content: center;
1244 padding-bottom: calc(0.5em - 1px);
1245 padding-left: 1em;
1246 padding-right: 1em;
1247 padding-top: calc(0.5em - 1px);
1248 text-align: center;
1249 white-space: nowrap;
1250 }
1251
1252 .better-payment .button.is-hovered,
1253 .better-payment .button:hover {
1254 border-color: #b5b5b5;
1255 color: #363636;
1256 }
1257
1258 .better-payment .is-hidden {
1259 display: none !important;
1260 }
1261
1262 .better-payment .control .bp-currency-symbol {
1263 color: #b0b7d6;
1264 font-size: 1.5rem;
1265 }
1266
1267 .better-payment .is-full-width,
1268 .better-payment.is-full-width {
1269 width: 100%;
1270 }
1271
1272 .better-payment .is-medium.bp-custom-payment-amount-el-integration {
1273 font-size: unset;
1274 border-color: unset;
1275 border-radius: 3px;
1276 }
1277
1278 .better-payment .control.has-icons-left .is-medium.bp-custom-payment-amount-el-integration ~ .icon {
1279 font-size: unset;
1280 }
1281
1282 .better-payment .is-medium.bp-custom-payment-amount-el-integration:focus {
1283 box-shadow: unset;
1284 }
1285
1286 /* Mobile */
1287 @media screen and (max-width: 768px) {
1288 .better-payment .payment-form-layout-3 .payment-method-checkbox img {
1289 margin-left: -35px;
1290 }
1291 .better-payment .payment-form-layout-1 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box,
1292 .better-payment .payment-form-layout-2 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box {
1293 display: unset;
1294 }
1295 .better-payment .payment-form-layout .button,
1296 .better-payment .form-content-section input,
1297 .better-payment .is-medium.input,
1298 .better-payment .is-medium.textarea,
1299 .better-payment .control.has-icons-left .input.is-medium ~ .icon,
1300 .better-payment .control.has-icons-left .select.is-medium ~ .icon,
1301 .better-payment .control.has-icons-right .input.is-medium ~ .icon,
1302 .better-payment .control.has-icons-right .select.is-medium ~ .icon {
1303 font-size: 16px;
1304 }
1305 }
1306 /* Tablet */
1307 @media screen and (min-width: 769px) {
1308 .better-payment .columns:not(.is-desktop) {
1309 display: flex;
1310 }
1311 .better-payment .column.is-three-quarters,
1312 .better-payment .column.is-three-quarters-tablet {
1313 flex: none;
1314 width: 75%;
1315 }
1316 .better-payment .column.is-two-thirds,
1317 .better-payment .column.is-two-thirds-tablet {
1318 flex: none;
1319 width: 66.6666%;
1320 }
1321 .better-payment .tile:not(.is-child) {
1322 display: flex;
1323 }
1324 .better-payment .tile.is-8 {
1325 flex: none;
1326 width: 66.66667%;
1327 }
1328 .better-payment .column.is-1,
1329 .better-payment .column.is-1-tablet {
1330 flex: none;
1331 width: 8.33333%;
1332 }
1333 .better-payment .column.is-2,
1334 .better-payment .column.is-2-tablet {
1335 flex: none;
1336 width: 16.66667%;
1337 }
1338 .better-payment .column.is-3,
1339 .better-payment .column.is-3-tablet {
1340 flex: none;
1341 width: 25%;
1342 }
1343 .better-payment .column.is-4,
1344 .better-payment .column.is-4-tablet {
1345 flex: none;
1346 width: 33.33333%;
1347 }
1348 .better-payment .column.is-5,
1349 .better-payment .column.is-5-tablet {
1350 flex: none;
1351 width: 41.66667%;
1352 }
1353 .better-payment .column.is-6,
1354 .better-payment .column.is-6-tablet {
1355 flex: none;
1356 width: 50%;
1357 }
1358 .better-payment .column.is-7,
1359 .better-payment .column.is-7-tablet {
1360 flex: none;
1361 width: 58.33333%;
1362 }
1363 .better-payment .column.is-8,
1364 .better-payment .column.is-8-tablet {
1365 flex: none;
1366 width: 66.66667%;
1367 }
1368 .better-payment .column.is-9,
1369 .better-payment .column.is-9-tablet {
1370 flex: none;
1371 width: 75%;
1372 }
1373 .better-payment .column.is-10,
1374 .better-payment .column.is-10-tablet {
1375 flex: none;
1376 width: 83.33333%;
1377 }
1378 .better-payment .column.is-11,
1379 .better-payment .column.is-11-tablet {
1380 flex: none;
1381 width: 91.66667%;
1382 }
1383 .better-payment .column.is-12,
1384 .better-payment .column.is-12-tablet {
1385 flex: none;
1386 width: 100%;
1387 }
1388 .better-payment .column.is-full,
1389 .better-payment .column.is-full-tablet {
1390 flex: none;
1391 width: 100%;
1392 }
1393 .better-payment .column.is-four-fifths,
1394 .better-payment .column.is-four-fifths-tablet {
1395 flex: none;
1396 width: 80%;
1397 }
1398 .better-payment .column.is-three-quarters,
1399 .better-payment .column.is-three-quarters-tablet {
1400 flex: none;
1401 width: 75%;
1402 }
1403 .better-payment .column.is-two-thirds,
1404 .better-payment .column.is-two-thirds-tablet {
1405 flex: none;
1406 width: 66.6666%;
1407 }
1408 .better-payment .column.is-three-fifths,
1409 .better-payment .column.is-three-fifths-tablet {
1410 flex: none;
1411 width: 60%;
1412 }
1413 .better-payment .column.is-half,
1414 .better-payment .column.is-half-tablet {
1415 flex: none;
1416 width: 50%;
1417 }
1418 .better-payment .column.is-two-fifths,
1419 .better-payment .column.is-two-fifths-tablet {
1420 flex: none;
1421 width: 40%;
1422 }
1423 .better-payment .column.is-one-third,
1424 .better-payment .column.is-one-third-tablet {
1425 flex: none;
1426 width: 33.3333%;
1427 }
1428 .better-payment .column.is-one-quarter,
1429 .better-payment .column.is-one-quarter-tablet {
1430 flex: none;
1431 width: 25%;
1432 }
1433 .better-payment .column.is-one-fifth,
1434 .better-payment .column.is-one-fifth-tablet {
1435 flex: none;
1436 width: 20%;
1437 }
1438 .better-payment .tile.is-vertical {
1439 flex-direction: column;
1440 }
1441 .better-payment .tile.is-parent {
1442 padding: 0.75rem;
1443 }
1444 .better-payment .column.is-offset-1,
1445 .better-payment .column.is-offset-1-tablet {
1446 margin-left: 8.33333%;
1447 }
1448 .better-payment .column.is-offset-2,
1449 .better-payment .column.is-offset-2-tablet {
1450 margin-left: 16.66667%;
1451 }
1452 .better-payment .column.is-offset-3,
1453 .better-payment .column.is-offset-3-tablet {
1454 margin-left: 25%;
1455 }
1456 .better-payment .column.is-offset-4,
1457 .better-payment .column.is-offset-4-tablet {
1458 margin-left: 33.33333%;
1459 }
1460 .better-payment .column.is-offset-5,
1461 .better-payment .column.is-offset-5-tablet {
1462 margin-left: 41.66667%;
1463 }
1464 .better-payment .column.is-offset-6,
1465 .better-payment .column.is-offset-6-tablet {
1466 margin-left: 50%;
1467 }
1468 .better-payment .column.is-offset-7,
1469 .better-payment .column.is-offset-7-tablet {
1470 margin-left: 58.33333%;
1471 }
1472 .better-payment .column.is-offset-8,
1473 .better-payment .column.is-offset-8-tablet {
1474 margin-left: 66.66667%;
1475 }
1476 .better-payment .column.is-offset-9,
1477 .better-payment .column.is-offset-9-tablet {
1478 margin-left: 75%;
1479 }
1480 .better-payment .column.is-offset-10,
1481 .better-payment .column.is-offset-10-tablet {
1482 margin-left: 83.33333%;
1483 }
1484 .better-payment .column.is-offset-11,
1485 .better-payment .column.is-offset-11-tablet {
1486 margin-left: 91.66667%;
1487 }
1488 .better-payment .column.is-offset-12,
1489 .better-payment .column.is-offset-12-tablet {
1490 margin-left: 100%;
1491 }
1492 .better-payment .tile.is-offset-2,
1493 .better-payment .tile.is-offset-2-tablet {
1494 margin-left: 16.66667%;
1495 }
1496 .better-payment .bp-modal .modal-card,
1497 .better-payment .bp-modal .modal-content {
1498 width: 740px;
1499 }
1500 }
1501 /* Desktop */
1502 @media screen and (min-width: 992px) {
1503 .better-payment .columns:not(.is-desktop) {
1504 display: flex;
1505 }
1506 .better-payment .column.is-1-desktop {
1507 flex: none;
1508 width: 8.33333%;
1509 }
1510 .better-payment .column.is-2-desktop {
1511 flex: none;
1512 width: 16.66667%;
1513 }
1514 .better-payment .column.is-3-desktop {
1515 flex: none;
1516 width: 25%;
1517 }
1518 .better-payment .column.is-4-desktop {
1519 flex: none;
1520 width: 33.33333%;
1521 }
1522 .better-payment .column.is-5-desktop {
1523 flex: none;
1524 width: 41.66667%;
1525 }
1526 .better-payment .column.is-6-desktop {
1527 flex: none;
1528 width: 50%;
1529 }
1530 .better-payment .column.is-7-desktop {
1531 flex: none;
1532 width: 58.33333%;
1533 }
1534 .better-payment .column.is-8-desktop {
1535 flex: none;
1536 width: 66.66667%;
1537 }
1538 .better-payment .column.is-9-desktop {
1539 flex: none;
1540 width: 75%;
1541 }
1542 .better-payment .column.is-10-desktop {
1543 flex: none;
1544 width: 83.33333%;
1545 }
1546 .better-payment .column.is-11-desktop {
1547 flex: none;
1548 width: 91.66667%;
1549 }
1550 .better-payment .column.is-12-desktop {
1551 flex: none;
1552 width: 100%;
1553 }
1554 .better-payment .bp-modal .modal-card,
1555 .better-payment .bp-modal .modal-content {
1556 width: 950px !important;
1557 }
1558 .better-payment .bp-modal .is-small .modal-card,
1559 .better-payment .bp-modal .is-small .modal-content {
1560 width: 550px;
1561 }
1562 }
1563 /* Large Desktop : widescreen */
1564 @media screen and (min-width: 1200px) {
1565 .better-payment .column.is-1-widescreen {
1566 flex: none;
1567 width: 8.33333%;
1568 }
1569 .better-payment .column.is-2-widescreen {
1570 flex: none;
1571 width: 16.66667%;
1572 }
1573 .better-payment .column.is-3-widescreen {
1574 flex: none;
1575 width: 25%;
1576 }
1577 .better-payment .column.is-4-widescreen {
1578 flex: none;
1579 width: 33.33333%;
1580 }
1581 .better-payment .column.is-5-widescreen {
1582 flex: none;
1583 width: 41.66667%;
1584 }
1585 .better-payment .column.is-6-widescreen {
1586 flex: none;
1587 width: 50%;
1588 }
1589 .better-payment .column.is-7-widescreen {
1590 flex: none;
1591 width: 58.33333%;
1592 }
1593 .better-payment .column.is-8-widescreen {
1594 flex: none;
1595 width: 66.66667%;
1596 }
1597 .better-payment .column.is-9-widescreen {
1598 flex: none;
1599 width: 75%;
1600 }
1601 .better-payment .column.is-10-widescreen {
1602 flex: none;
1603 width: 83.33333%;
1604 }
1605 .better-payment .column.is-11-widescreen {
1606 flex: none;
1607 width: 91.66667%;
1608 }
1609 .better-payment .column.is-12-widescreen {
1610 flex: none;
1611 width: 100%;
1612 }
1613 }
1614 /* Larger Desktop : fullhd */
1615 @media screen and (min-width: 1400px) {
1616 .better-payment .column.is-1-fullhd {
1617 flex: none;
1618 width: 8.33333%;
1619 }
1620 .better-payment .column.is-2-fullhd {
1621 flex: none;
1622 width: 16.66667%;
1623 }
1624 .better-payment .column.is-3-fullhd {
1625 flex: none;
1626 width: 25%;
1627 }
1628 .better-payment .column.is-4-fullhd {
1629 flex: none;
1630 width: 33.33333%;
1631 }
1632 .better-payment .column.is-5-fullhd {
1633 flex: none;
1634 width: 41.66667%;
1635 }
1636 .better-payment .column.is-6-fullhd {
1637 flex: none;
1638 width: 50%;
1639 }
1640 .better-payment .column.is-7-fullhd {
1641 flex: none;
1642 width: 58.33333%;
1643 }
1644 .better-payment .column.is-8-fullhd {
1645 flex: none;
1646 width: 66.66667%;
1647 }
1648 .better-payment .column.is-9-fullhd {
1649 flex: none;
1650 width: 75%;
1651 }
1652 .better-payment .column.is-10-fullhd {
1653 flex: none;
1654 width: 83.33333%;
1655 }
1656 .better-payment .column.is-11-fullhd {
1657 flex: none;
1658 width: 91.66667%;
1659 }
1660 .better-payment .column.is-12-fullhd {
1661 flex: none;
1662 width: 100%;
1663 }
1664 }
1665 /* Larger Desktop Custom : fullhd-custom */
1666 @media screen and (min-width: 1500px) {
1667 .better-payment .column.is-1-fullhd-custom {
1668 flex: none;
1669 width: 8.33333%;
1670 }
1671 .better-payment .column.is-2-fullhd-custom {
1672 flex: none;
1673 width: 16.66667%;
1674 }
1675 .better-payment .column.is-3-fullhd-custom {
1676 flex: none;
1677 width: 25%;
1678 }
1679 .better-payment .column.is-4-fullhd-custom {
1680 flex: none;
1681 width: 33.33333%;
1682 }
1683 .better-payment .column.is-5-fullhd-custom {
1684 flex: none;
1685 width: 41.66667%;
1686 }
1687 .better-payment .column.is-6-fullhd-custom {
1688 flex: none;
1689 width: 50%;
1690 }
1691 .better-payment .column.is-7-fullhd-custom {
1692 flex: none;
1693 width: 58.33333%;
1694 }
1695 .better-payment .column.is-8-fullhd-custom {
1696 flex: none;
1697 width: 66.66667%;
1698 }
1699 .better-payment .column.is-9-fullhd-custom {
1700 flex: none;
1701 width: 75%;
1702 }
1703 .better-payment .column.is-10-fullhd-custom {
1704 flex: none;
1705 width: 83.33333%;
1706 }
1707 .better-payment .column.is-11-fullhd-custom {
1708 flex: none;
1709 width: 91.66667%;
1710 }
1711 .better-payment .column.is-12-fullhd-custom {
1712 flex: none;
1713 width: 100%;
1714 }
1715 }
1716 /* BP Modal : Starts */
1717 .better-payment .bp-modal .modal,
1718 .better-payment .bp-modal .modal-background {
1719 bottom: 0;
1720 left: 0;
1721 position: absolute;
1722 right: 0;
1723 top: 0;
1724 }
1725
1726 .better-payment .bp-modal .modal {
1727 align-items: center;
1728 display: none;
1729 flex-direction: column;
1730 justify-content: center;
1731 overflow: hidden;
1732 position: fixed;
1733 z-index: 40;
1734 }
1735
1736 .better-payment .bp-modal .modal-background {
1737 background-color: rgba(10, 10, 10, 0.86);
1738 }
1739
1740 .better-payment .bp-modal .modal-card,
1741 .better-payment .bp-modal .modal-content {
1742 margin: 0 20px;
1743 max-height: calc(100vh - 160px);
1744 overflow: auto;
1745 position: relative;
1746 width: 100%;
1747 }
1748
1749 .better-payment .bp-modal .modal-card {
1750 display: flex;
1751 flex-direction: column;
1752 max-height: calc(100vh - 40px);
1753 overflow: hidden;
1754 }
1755
1756 .better-payment .bp-modal .modal-card-head {
1757 border-bottom: 1px solid #dbdbdb;
1758 border-top-left-radius: 6px;
1759 border-top-right-radius: 6px;
1760 }
1761
1762 .better-payment .bp-modal .modal-card-foot,
1763 .better-payment .bp-modal .modal-card-head {
1764 align-items: center;
1765 background-color: #f5f5f5;
1766 display: flex;
1767 flex-shrink: 0;
1768 justify-content: flex-end;
1769 padding: 15px 20px;
1770 position: relative;
1771 }
1772
1773 .better-payment .bp-modal .modal-card-body {
1774 -webkit-overflow-scrolling: touch;
1775 background-color: #fff;
1776 flex-grow: 1;
1777 flex-shrink: 1;
1778 overflow: auto;
1779 padding: 20px;
1780 }
1781
1782 .better-payment .bp-modal .modal-card-foot {
1783 border-bottom-left-radius: 6px;
1784 border-bottom-right-radius: 6px;
1785 border-top: 1px solid #dbdbdb;
1786 }
1787
1788 .better-payment .bp-modal .modal-card-title {
1789 color: #363636;
1790 flex-grow: 1;
1791 flex-shrink: 0;
1792 font-size: 1.5rem;
1793 line-height: 1;
1794 }
1795
1796 .better-payment .bp-modal .button,
1797 .better-payment .bp-modal .button:focus {
1798 outline: 0 !important;
1799 border-color: transparent !important;
1800 }
1801
1802 .better-payment .bp-modal .modal.is-active {
1803 display: flex;
1804 }
1805
1806 .better-payment .bp-modal .is-large.modal-close {
1807 height: 32px;
1808 max-height: 32px;
1809 max-width: 32px;
1810 min-height: 32px;
1811 min-width: 32px;
1812 width: 32px;
1813 }
1814
1815 .better-payment .bp-modal .delete,
1816 .better-payment .bp-modal .modal-close {
1817 -webkit-touch-callout: none;
1818 -webkit-user-select: none;
1819 -moz-user-select: none;
1820 -ms-user-select: none;
1821 user-select: none;
1822 -moz-appearance: none;
1823 -webkit-appearance: none;
1824 background-color: rgba(10, 10, 10, 0.2);
1825 border: none;
1826 border-radius: 9999px;
1827 cursor: pointer;
1828 pointer-events: auto;
1829 display: inline-block;
1830 flex-grow: 0;
1831 flex-shrink: 0;
1832 font-size: 0;
1833 height: 20px;
1834 max-height: 20px;
1835 max-width: 20px;
1836 min-height: 20px;
1837 min-width: 20px;
1838 outline: 0;
1839 position: relative;
1840 vertical-align: top;
1841 width: 20px;
1842 }
1843
1844 .better-payment .bp-modal .modal-close {
1845 background: 0 0;
1846 height: 40px;
1847 position: fixed;
1848 right: 20px;
1849 top: 52px;
1850 width: 40px;
1851 }
1852
1853 .better-payment .bp-modal .delete::before,
1854 .better-payment .bp-modal .modal-close::before {
1855 height: 2px;
1856 width: 50%;
1857 }
1858
1859 .better-payment .bp-modal .delete::after,
1860 .better-payment .bp-modal .modal-close::after {
1861 height: 50%;
1862 width: 2px;
1863 }
1864
1865 .better-payment .bp-modal .delete::after,
1866 .better-payment .bp-modal .delete::before,
1867 .better-payment .bp-modal .modal-close::after,
1868 .better-payment .bp-modal .modal-close::before {
1869 background-color: #fff;
1870 content: "";
1871 display: block;
1872 left: 50%;
1873 position: absolute;
1874 top: 50%;
1875 transform: translateX(-50%) translateY(-50%) rotate(45deg);
1876 transform-origin: center center;
1877 }
1878
1879 .better-payment .bp-modal .box {
1880 background-color: #fff;
1881 border-radius: 6px;
1882 box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
1883 color: #4a4a4a;
1884 display: block;
1885 padding: 1.25rem;
1886 }
1887
1888 .better-payment .bp-modal .delete:focus,
1889 .better-payment .bp-modal .delete:hover,
1890 .better-payment .bp-modal .modal-close:focus,
1891 .better-payment .bp-modal .modal-close:hover {
1892 background-color: rgba(10, 10, 10, 0.3);
1893 }
1894
1895 .better-payment .bp-modal .modal-card,
1896 .better-payment .bp-modal .modal-content {
1897 margin: 0 auto;
1898 max-height: calc(100vh - 40px);
1899 }
1900
1901 /* BP Modal : Ends */
1902