PluginProbe
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More / 0.0.6
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More v0.0.6
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 0.0.6, at assets/css/common.css

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