PluginProbe
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More / 1.0.0
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More v1.0.0
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.0, at assets/css/common.css

1,892 lines 39.6 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 }
1296 /* Tablet */
1297 @media screen and (min-width: 769px) {
1298 .better-payment .columns:not(.is-desktop) {
1299 display: flex;
1300 }
1301 .better-payment .column.is-three-quarters,
1302 .better-payment .column.is-three-quarters-tablet {
1303 flex: none;
1304 width: 75%;
1305 }
1306 .better-payment .column.is-two-thirds,
1307 .better-payment .column.is-two-thirds-tablet {
1308 flex: none;
1309 width: 66.6666%;
1310 }
1311 .better-payment .tile:not(.is-child) {
1312 display: flex;
1313 }
1314 .better-payment .tile.is-8 {
1315 flex: none;
1316 width: 66.66667%;
1317 }
1318 .better-payment .column.is-1,
1319 .better-payment .column.is-1-tablet {
1320 flex: none;
1321 width: 8.33333%;
1322 }
1323 .better-payment .column.is-2,
1324 .better-payment .column.is-2-tablet {
1325 flex: none;
1326 width: 16.66667%;
1327 }
1328 .better-payment .column.is-3,
1329 .better-payment .column.is-3-tablet {
1330 flex: none;
1331 width: 25%;
1332 }
1333 .better-payment .column.is-4,
1334 .better-payment .column.is-4-tablet {
1335 flex: none;
1336 width: 33.33333%;
1337 }
1338 .better-payment .column.is-5,
1339 .better-payment .column.is-5-tablet {
1340 flex: none;
1341 width: 41.66667%;
1342 }
1343 .better-payment .column.is-6,
1344 .better-payment .column.is-6-tablet {
1345 flex: none;
1346 width: 50%;
1347 }
1348 .better-payment .column.is-7,
1349 .better-payment .column.is-7-tablet {
1350 flex: none;
1351 width: 58.33333%;
1352 }
1353 .better-payment .column.is-8,
1354 .better-payment .column.is-8-tablet {
1355 flex: none;
1356 width: 66.66667%;
1357 }
1358 .better-payment .column.is-9,
1359 .better-payment .column.is-9-tablet {
1360 flex: none;
1361 width: 75%;
1362 }
1363 .better-payment .column.is-10,
1364 .better-payment .column.is-10-tablet {
1365 flex: none;
1366 width: 83.33333%;
1367 }
1368 .better-payment .column.is-11,
1369 .better-payment .column.is-11-tablet {
1370 flex: none;
1371 width: 91.66667%;
1372 }
1373 .better-payment .column.is-12,
1374 .better-payment .column.is-12-tablet {
1375 flex: none;
1376 width: 100%;
1377 }
1378 .better-payment .column.is-full,
1379 .better-payment .column.is-full-tablet {
1380 flex: none;
1381 width: 100%;
1382 }
1383 .better-payment .column.is-four-fifths,
1384 .better-payment .column.is-four-fifths-tablet {
1385 flex: none;
1386 width: 80%;
1387 }
1388 .better-payment .column.is-three-quarters,
1389 .better-payment .column.is-three-quarters-tablet {
1390 flex: none;
1391 width: 75%;
1392 }
1393 .better-payment .column.is-two-thirds,
1394 .better-payment .column.is-two-thirds-tablet {
1395 flex: none;
1396 width: 66.6666%;
1397 }
1398 .better-payment .column.is-three-fifths,
1399 .better-payment .column.is-three-fifths-tablet {
1400 flex: none;
1401 width: 60%;
1402 }
1403 .better-payment .column.is-half,
1404 .better-payment .column.is-half-tablet {
1405 flex: none;
1406 width: 50%;
1407 }
1408 .better-payment .column.is-two-fifths,
1409 .better-payment .column.is-two-fifths-tablet {
1410 flex: none;
1411 width: 40%;
1412 }
1413 .better-payment .column.is-one-third,
1414 .better-payment .column.is-one-third-tablet {
1415 flex: none;
1416 width: 33.3333%;
1417 }
1418 .better-payment .column.is-one-quarter,
1419 .better-payment .column.is-one-quarter-tablet {
1420 flex: none;
1421 width: 25%;
1422 }
1423 .better-payment .column.is-one-fifth,
1424 .better-payment .column.is-one-fifth-tablet {
1425 flex: none;
1426 width: 20%;
1427 }
1428 .better-payment .tile.is-vertical {
1429 flex-direction: column;
1430 }
1431 .better-payment .tile.is-parent {
1432 padding: 0.75rem;
1433 }
1434 .better-payment .column.is-offset-1,
1435 .better-payment .column.is-offset-1-tablet {
1436 margin-left: 8.33333%;
1437 }
1438 .better-payment .column.is-offset-2,
1439 .better-payment .column.is-offset-2-tablet {
1440 margin-left: 16.66667%;
1441 }
1442 .better-payment .column.is-offset-3,
1443 .better-payment .column.is-offset-3-tablet {
1444 margin-left: 25%;
1445 }
1446 .better-payment .column.is-offset-4,
1447 .better-payment .column.is-offset-4-tablet {
1448 margin-left: 33.33333%;
1449 }
1450 .better-payment .column.is-offset-5,
1451 .better-payment .column.is-offset-5-tablet {
1452 margin-left: 41.66667%;
1453 }
1454 .better-payment .column.is-offset-6,
1455 .better-payment .column.is-offset-6-tablet {
1456 margin-left: 50%;
1457 }
1458 .better-payment .column.is-offset-7,
1459 .better-payment .column.is-offset-7-tablet {
1460 margin-left: 58.33333%;
1461 }
1462 .better-payment .column.is-offset-8,
1463 .better-payment .column.is-offset-8-tablet {
1464 margin-left: 66.66667%;
1465 }
1466 .better-payment .column.is-offset-9,
1467 .better-payment .column.is-offset-9-tablet {
1468 margin-left: 75%;
1469 }
1470 .better-payment .column.is-offset-10,
1471 .better-payment .column.is-offset-10-tablet {
1472 margin-left: 83.33333%;
1473 }
1474 .better-payment .column.is-offset-11,
1475 .better-payment .column.is-offset-11-tablet {
1476 margin-left: 91.66667%;
1477 }
1478 .better-payment .column.is-offset-12,
1479 .better-payment .column.is-offset-12-tablet {
1480 margin-left: 100%;
1481 }
1482 .better-payment .tile.is-offset-2,
1483 .better-payment .tile.is-offset-2-tablet {
1484 margin-left: 16.66667%;
1485 }
1486 .better-payment .bp-modal .modal-card,
1487 .better-payment .bp-modal .modal-content {
1488 width: 740px;
1489 }
1490 }
1491 /* Desktop */
1492 @media screen and (min-width: 992px) {
1493 .better-payment .columns:not(.is-desktop) {
1494 display: flex;
1495 }
1496 .better-payment .column.is-1-desktop {
1497 flex: none;
1498 width: 8.33333%;
1499 }
1500 .better-payment .column.is-2-desktop {
1501 flex: none;
1502 width: 16.66667%;
1503 }
1504 .better-payment .column.is-3-desktop {
1505 flex: none;
1506 width: 25%;
1507 }
1508 .better-payment .column.is-4-desktop {
1509 flex: none;
1510 width: 33.33333%;
1511 }
1512 .better-payment .column.is-5-desktop {
1513 flex: none;
1514 width: 41.66667%;
1515 }
1516 .better-payment .column.is-6-desktop {
1517 flex: none;
1518 width: 50%;
1519 }
1520 .better-payment .column.is-7-desktop {
1521 flex: none;
1522 width: 58.33333%;
1523 }
1524 .better-payment .column.is-8-desktop {
1525 flex: none;
1526 width: 66.66667%;
1527 }
1528 .better-payment .column.is-9-desktop {
1529 flex: none;
1530 width: 75%;
1531 }
1532 .better-payment .column.is-10-desktop {
1533 flex: none;
1534 width: 83.33333%;
1535 }
1536 .better-payment .column.is-11-desktop {
1537 flex: none;
1538 width: 91.66667%;
1539 }
1540 .better-payment .column.is-12-desktop {
1541 flex: none;
1542 width: 100%;
1543 }
1544 .better-payment .bp-modal .modal-card,
1545 .better-payment .bp-modal .modal-content {
1546 width: 950px !important;
1547 }
1548 .better-payment .bp-modal .is-small .modal-card,
1549 .better-payment .bp-modal .is-small .modal-content {
1550 width: 550px;
1551 }
1552 }
1553 /* Large Desktop : widescreen */
1554 @media screen and (min-width: 1200px) {
1555 .better-payment .column.is-1-widescreen {
1556 flex: none;
1557 width: 8.33333%;
1558 }
1559 .better-payment .column.is-2-widescreen {
1560 flex: none;
1561 width: 16.66667%;
1562 }
1563 .better-payment .column.is-3-widescreen {
1564 flex: none;
1565 width: 25%;
1566 }
1567 .better-payment .column.is-4-widescreen {
1568 flex: none;
1569 width: 33.33333%;
1570 }
1571 .better-payment .column.is-5-widescreen {
1572 flex: none;
1573 width: 41.66667%;
1574 }
1575 .better-payment .column.is-6-widescreen {
1576 flex: none;
1577 width: 50%;
1578 }
1579 .better-payment .column.is-7-widescreen {
1580 flex: none;
1581 width: 58.33333%;
1582 }
1583 .better-payment .column.is-8-widescreen {
1584 flex: none;
1585 width: 66.66667%;
1586 }
1587 .better-payment .column.is-9-widescreen {
1588 flex: none;
1589 width: 75%;
1590 }
1591 .better-payment .column.is-10-widescreen {
1592 flex: none;
1593 width: 83.33333%;
1594 }
1595 .better-payment .column.is-11-widescreen {
1596 flex: none;
1597 width: 91.66667%;
1598 }
1599 .better-payment .column.is-12-widescreen {
1600 flex: none;
1601 width: 100%;
1602 }
1603 }
1604 /* Larger Desktop : fullhd */
1605 @media screen and (min-width: 1400px) {
1606 .better-payment .column.is-1-fullhd {
1607 flex: none;
1608 width: 8.33333%;
1609 }
1610 .better-payment .column.is-2-fullhd {
1611 flex: none;
1612 width: 16.66667%;
1613 }
1614 .better-payment .column.is-3-fullhd {
1615 flex: none;
1616 width: 25%;
1617 }
1618 .better-payment .column.is-4-fullhd {
1619 flex: none;
1620 width: 33.33333%;
1621 }
1622 .better-payment .column.is-5-fullhd {
1623 flex: none;
1624 width: 41.66667%;
1625 }
1626 .better-payment .column.is-6-fullhd {
1627 flex: none;
1628 width: 50%;
1629 }
1630 .better-payment .column.is-7-fullhd {
1631 flex: none;
1632 width: 58.33333%;
1633 }
1634 .better-payment .column.is-8-fullhd {
1635 flex: none;
1636 width: 66.66667%;
1637 }
1638 .better-payment .column.is-9-fullhd {
1639 flex: none;
1640 width: 75%;
1641 }
1642 .better-payment .column.is-10-fullhd {
1643 flex: none;
1644 width: 83.33333%;
1645 }
1646 .better-payment .column.is-11-fullhd {
1647 flex: none;
1648 width: 91.66667%;
1649 }
1650 .better-payment .column.is-12-fullhd {
1651 flex: none;
1652 width: 100%;
1653 }
1654 }
1655 /* Larger Desktop Custom : fullhd-custom */
1656 @media screen and (min-width: 1500px) {
1657 .better-payment .column.is-1-fullhd-custom {
1658 flex: none;
1659 width: 8.33333%;
1660 }
1661 .better-payment .column.is-2-fullhd-custom {
1662 flex: none;
1663 width: 16.66667%;
1664 }
1665 .better-payment .column.is-3-fullhd-custom {
1666 flex: none;
1667 width: 25%;
1668 }
1669 .better-payment .column.is-4-fullhd-custom {
1670 flex: none;
1671 width: 33.33333%;
1672 }
1673 .better-payment .column.is-5-fullhd-custom {
1674 flex: none;
1675 width: 41.66667%;
1676 }
1677 .better-payment .column.is-6-fullhd-custom {
1678 flex: none;
1679 width: 50%;
1680 }
1681 .better-payment .column.is-7-fullhd-custom {
1682 flex: none;
1683 width: 58.33333%;
1684 }
1685 .better-payment .column.is-8-fullhd-custom {
1686 flex: none;
1687 width: 66.66667%;
1688 }
1689 .better-payment .column.is-9-fullhd-custom {
1690 flex: none;
1691 width: 75%;
1692 }
1693 .better-payment .column.is-10-fullhd-custom {
1694 flex: none;
1695 width: 83.33333%;
1696 }
1697 .better-payment .column.is-11-fullhd-custom {
1698 flex: none;
1699 width: 91.66667%;
1700 }
1701 .better-payment .column.is-12-fullhd-custom {
1702 flex: none;
1703 width: 100%;
1704 }
1705 }
1706 /* BP Modal : Starts */
1707 .better-payment .bp-modal .modal,
1708 .better-payment .bp-modal .modal-background {
1709 bottom: 0;
1710 left: 0;
1711 position: absolute;
1712 right: 0;
1713 top: 0;
1714 }
1715
1716 .better-payment .bp-modal .modal {
1717 align-items: center;
1718 display: none;
1719 flex-direction: column;
1720 justify-content: center;
1721 overflow: hidden;
1722 position: fixed;
1723 z-index: 40;
1724 }
1725
1726 .better-payment .bp-modal .modal-background {
1727 background-color: rgba(10, 10, 10, 0.86);
1728 }
1729
1730 .better-payment .bp-modal .modal-card,
1731 .better-payment .bp-modal .modal-content {
1732 margin: 0 20px;
1733 max-height: calc(100vh - 160px);
1734 overflow: auto;
1735 position: relative;
1736 width: 100%;
1737 }
1738
1739 .better-payment .bp-modal .modal-card {
1740 display: flex;
1741 flex-direction: column;
1742 max-height: calc(100vh - 40px);
1743 overflow: hidden;
1744 }
1745
1746 .better-payment .bp-modal .modal-card-head {
1747 border-bottom: 1px solid #dbdbdb;
1748 border-top-left-radius: 6px;
1749 border-top-right-radius: 6px;
1750 }
1751
1752 .better-payment .bp-modal .modal-card-foot,
1753 .better-payment .bp-modal .modal-card-head {
1754 align-items: center;
1755 background-color: #f5f5f5;
1756 display: flex;
1757 flex-shrink: 0;
1758 justify-content: flex-end;
1759 padding: 15px 20px;
1760 position: relative;
1761 }
1762
1763 .better-payment .bp-modal .modal-card-body {
1764 -webkit-overflow-scrolling: touch;
1765 background-color: #fff;
1766 flex-grow: 1;
1767 flex-shrink: 1;
1768 overflow: auto;
1769 padding: 20px;
1770 }
1771
1772 .better-payment .bp-modal .modal-card-foot {
1773 border-bottom-left-radius: 6px;
1774 border-bottom-right-radius: 6px;
1775 border-top: 1px solid #dbdbdb;
1776 }
1777
1778 .better-payment .bp-modal .modal-card-title {
1779 color: #363636;
1780 flex-grow: 1;
1781 flex-shrink: 0;
1782 font-size: 1.5rem;
1783 line-height: 1;
1784 }
1785
1786 .better-payment .bp-modal .button,
1787 .better-payment .bp-modal .button:focus {
1788 outline: 0 !important;
1789 border-color: transparent !important;
1790 }
1791
1792 .better-payment .bp-modal .modal.is-active {
1793 display: flex;
1794 }
1795
1796 .better-payment .bp-modal .is-large.modal-close {
1797 height: 32px;
1798 max-height: 32px;
1799 max-width: 32px;
1800 min-height: 32px;
1801 min-width: 32px;
1802 width: 32px;
1803 }
1804
1805 .better-payment .bp-modal .delete,
1806 .better-payment .bp-modal .modal-close {
1807 -webkit-touch-callout: none;
1808 -webkit-user-select: none;
1809 -moz-user-select: none;
1810 -ms-user-select: none;
1811 user-select: none;
1812 -moz-appearance: none;
1813 -webkit-appearance: none;
1814 background-color: rgba(10, 10, 10, 0.2);
1815 border: none;
1816 border-radius: 9999px;
1817 cursor: pointer;
1818 pointer-events: auto;
1819 display: inline-block;
1820 flex-grow: 0;
1821 flex-shrink: 0;
1822 font-size: 0;
1823 height: 20px;
1824 max-height: 20px;
1825 max-width: 20px;
1826 min-height: 20px;
1827 min-width: 20px;
1828 outline: 0;
1829 position: relative;
1830 vertical-align: top;
1831 width: 20px;
1832 }
1833
1834 .better-payment .bp-modal .modal-close {
1835 background: 0 0;
1836 height: 40px;
1837 position: fixed;
1838 right: 20px;
1839 top: 52px;
1840 width: 40px;
1841 }
1842
1843 .better-payment .bp-modal .delete::before,
1844 .better-payment .bp-modal .modal-close::before {
1845 height: 2px;
1846 width: 50%;
1847 }
1848
1849 .better-payment .bp-modal .delete::after,
1850 .better-payment .bp-modal .modal-close::after {
1851 height: 50%;
1852 width: 2px;
1853 }
1854
1855 .better-payment .bp-modal .delete::after,
1856 .better-payment .bp-modal .delete::before,
1857 .better-payment .bp-modal .modal-close::after,
1858 .better-payment .bp-modal .modal-close::before {
1859 background-color: #fff;
1860 content: "";
1861 display: block;
1862 left: 50%;
1863 position: absolute;
1864 top: 50%;
1865 transform: translateX(-50%) translateY(-50%) rotate(45deg);
1866 transform-origin: center center;
1867 }
1868
1869 .better-payment .bp-modal .box {
1870 background-color: #fff;
1871 border-radius: 6px;
1872 box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
1873 color: #4a4a4a;
1874 display: block;
1875 padding: 1.25rem;
1876 }
1877
1878 .better-payment .bp-modal .delete:focus,
1879 .better-payment .bp-modal .delete:hover,
1880 .better-payment .bp-modal .modal-close:focus,
1881 .better-payment .bp-modal .modal-close:hover {
1882 background-color: rgba(10, 10, 10, 0.3);
1883 }
1884
1885 .better-payment .bp-modal .modal-card,
1886 .better-payment .bp-modal .modal-content {
1887 margin: 0 auto;
1888 max-height: calc(100vh - 40px);
1889 }
1890
1891 /* BP Modal : Ends */
1892