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

2,750 lines 64.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 .width-100 {
5 width: 100%;
6 }
7 .better-payment .payment-form-layout-1 .field-payment_method .bp-radio-box,
8 .better-payment .payment-form-layout-1 .field-payment_method .bp-radio-box label,
9 .better-payment .payment-form-layout-2 .field-payment_method .bp-radio-box,
10 .better-payment .payment-form-layout-2 .field-payment_method .bp-radio-box label {
11 display: flex;
12 align-items: center;
13 }
14 .better-payment .payment-form-layout-1 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box,
15 .better-payment .payment-form-layout-2 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box {
16 display: flex;
17 justify-content: space-between;
18 align-items: center;
19 }
20 .better-payment .bp-three-items-enabled.pr-6 {
21 padding-right: unset !important;
22 }
23
24 .better-payment .bp-radio-box input[type=radio]:checked {
25 border: 2px solid #006AFF;
26 }
27
28 .better-payment .bp-radio-box input[type=radio] {
29 width: 20px;
30 height: 20px;
31 outline: 0;
32 border-radius: 50%;
33 position: relative;
34 border: 2px solid #CBC9DA;
35 background: #fff;
36 margin-bottom: -3px;
37 margin-right: 10px;
38 }
39
40 .better-payment .bp-radio-box input[type=radio]:after {
41 content: "";
42 opacity: 0;
43 display: block;
44 left: 4px;
45 top: 4px;
46 position: absolute;
47 width: 8px;
48 height: 8px;
49 border-radius: 50%;
50 background: #006AFF;
51 }
52
53 .better-payment .form-content-section-fields .payment-method-checkbox input[type=radio]:after {
54 width: 12px;
55 height: 12px;
56 }
57
58 .better-payment .bp-radio-box input[type=radio]:checked:after {
59 opacity: 1;
60 }
61
62 .better-payment .control {
63 box-sizing: border-box;
64 clear: both;
65 font-size: 1rem;
66 position: relative;
67 text-align: inherit;
68 }
69
70 .better-payment .control.has-icons-right .input,
71 .better-payment .control.has-icons-right .select select {
72 padding-right: 2.5em;
73 }
74
75 .better-payment .control.has-icons-left .input,
76 .better-payment .control.has-icons-left .select select {
77 padding-left: 2.5em;
78 }
79
80 .better-payment .is-large.input,
81 .better-payment .is-large.textarea {
82 font-size: 1.5rem;
83 }
84
85 .better-payment .control.has-icons-left .input.is-large ~ .icon,
86 .better-payment .control.has-icons-left .select.is-large ~ .icon,
87 .better-payment .control.has-icons-right .input.is-large ~ .icon,
88 .better-payment .control.has-icons-right .select.is-large ~ .icon {
89 font-size: 1.5rem;
90 }
91
92 .better-payment .control.has-icons-left .icon.is-left {
93 left: 0;
94 }
95
96 .better-payment .control.has-icons-left .icon,
97 .better-payment .control.has-icons-right .icon {
98 color: #dbdbdb;
99 height: 2.5em;
100 pointer-events: none;
101 position: absolute;
102 top: 0;
103 width: 2.5em;
104 z-index: 4;
105 }
106
107 .better-payment .icon.is-medium {
108 height: 2rem;
109 width: 2rem;
110 }
111
112 .better-payment .icon {
113 align-items: center;
114 display: inline-flex;
115 justify-content: center;
116 height: 1.5rem;
117 width: 1.5rem;
118 }
119
120 .better-payment .control.has-icons-right .icon.is-right {
121 right: 0;
122 }
123
124 .better-payment .control.has-icons-left .icon,
125 .better-payment .control.has-icons-right .icon {
126 color: #dbdbdb;
127 height: 2.5em;
128 pointer-events: none;
129 position: absolute;
130 top: 0;
131 width: 2.5em;
132 z-index: 4;
133 }
134
135 .better-payment .input:active,
136 .better-payment .input:focus,
137 .better-payment .is-active.input,
138 .better-payment .is-active.textarea,
139 .better-payment .is-focused.input,
140 .better-payment .is-focused.textarea,
141 .better-payment .select select.is-active,
142 .better-payment .select select.is-focused,
143 .better-payment .select select:active,
144 .better-payment .select select:focus,
145 .better-payment .textarea:active,
146 .better-payment .textarea:focus {
147 border-color: #485fc7;
148 box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
149 }
150
151 .better-payment .input:hover,
152 .better-payment .is-hovered.input,
153 .better-payment .is-hovered.textarea,
154 .better-payment .select select.is-hovered,
155 .better-payment .select select:hover,
156 .better-payment .textarea:hover {
157 border-color: #b5b5b5;
158 }
159
160 .better-payment .input,
161 .better-payment .textarea {
162 box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
163 max-width: 100%;
164 width: 100%;
165 }
166
167 .better-payment .is-medium.input,
168 .better-payment .is-medium.textarea {
169 font-size: 1.25rem;
170 }
171
172 .better-payment .control.has-icons-left .input.is-medium ~ .icon,
173 .better-payment .control.has-icons-left .select.is-medium ~ .icon,
174 .better-payment .control.has-icons-right .input.is-medium ~ .icon,
175 .better-payment .control.has-icons-right .select.is-medium ~ .icon {
176 font-size: 1.25rem;
177 }
178
179 /* Helper Classes */
180 .better-payment .columns.is-mobile {
181 display: flex;
182 }
183
184 .better-payment .columns:not(:last-child) {
185 margin-bottom: 0.75rem;
186 }
187
188 .better-payment .columns {
189 margin-left: -0.75rem;
190 margin-right: -0.75rem;
191 margin-top: -0.75rem;
192 }
193
194 .better-payment .column {
195 display: block;
196 flex-basis: 0;
197 flex-grow: 1;
198 flex-shrink: 1;
199 padding: 0.75rem;
200 }
201
202 .better-payment .is-size-1 {
203 font-size: 3rem !important;
204 }
205
206 .better-payment .is-size-1-fix {
207 font-size: 3rem;
208 }
209
210 .better-payment .is-size-2 {
211 font-size: 2.5rem !important;
212 }
213
214 .better-payment .is-size-2-fix {
215 font-size: 2.5rem;
216 }
217
218 .better-payment .is-size-3 {
219 font-size: 2rem !important;
220 }
221
222 .better-payment .is-size-3-fix {
223 font-size: 2rem;
224 }
225
226 .better-payment .is-size-4 {
227 font-size: 1.5rem !important;
228 }
229
230 .better-payment .is-size-4-fix {
231 font-size: 1.5rem;
232 }
233
234 .better-payment .is-size-5 {
235 font-size: 1.25rem !important;
236 }
237
238 .better-payment .is-size-5-fix {
239 font-size: 1.25rem;
240 }
241
242 .better-payment .is-size-6 {
243 font-size: 1rem !important;
244 }
245
246 .better-payment .is-size-6-fix {
247 font-size: 1rem;
248 }
249
250 .better-payment .is-size-7 {
251 font-size: 0.75rem !important;
252 }
253
254 .better-payment .is-size-7-fix {
255 font-size: 0.75rem;
256 }
257
258 .better-payment .has-text-white {
259 color: #fff !important;
260 }
261
262 .better-payment .has-text-white-fix {
263 color: #fff;
264 }
265
266 .better-payment .has-text-black {
267 color: #000 !important;
268 }
269
270 .better-payment .has-text-black-fix {
271 color: #000;
272 }
273
274 .better-payment .has-text-light {
275 color: #f5f5f5 !important;
276 }
277
278 .better-payment .has-text-light-fix {
279 color: #f5f5f5;
280 }
281
282 .better-payment .has-text-dark {
283 color: #363636 !important;
284 }
285
286 .better-payment .has-text-dark-fix {
287 color: #363636;
288 }
289
290 .better-payment .has-text-primary {
291 color: #00d1b2 !important;
292 }
293
294 .better-payment .has-text-primary-fix {
295 color: #00d1b2;
296 }
297
298 .better-payment .has-text-link {
299 color: #485fc7 !important;
300 }
301
302 .better-payment .has-text-link-fix {
303 color: #485fc7;
304 }
305
306 .better-payment .has-text-info {
307 color: #3e8ed0 !important;
308 }
309
310 .better-payment .has-text-info-fix {
311 color: #3e8ed0;
312 }
313
314 .better-payment .has-text-success {
315 color: #48c78e !important;
316 }
317
318 .better-payment .has-text-success-fix {
319 color: #48c78e;
320 }
321
322 .better-payment .has-text-warning {
323 color: #ffe08a !important;
324 }
325
326 .better-payment .has-text-warning-fix {
327 color: #ffe08a;
328 }
329
330 .better-payment .has-text-danger {
331 color: #f14668 !important;
332 }
333
334 .better-payment .has-text-danger-fix {
335 color: #f14668;
336 }
337
338 .better-payment .m-0 {
339 margin: 0 !important;
340 }
341
342 .better-payment .mt-0 {
343 margin-top: 0 !important;
344 }
345
346 .better-payment .mr-0 {
347 margin-right: 0 !important;
348 }
349
350 .better-payment .mb-0 {
351 margin-bottom: 0 !important;
352 }
353
354 .better-payment .ml-0 {
355 margin-left: 0 !important;
356 }
357
358 .better-payment .mx-0 {
359 margin-left: 0 !important;
360 margin-right: 0 !important;
361 }
362
363 .better-payment .my-0 {
364 margin-top: 0 !important;
365 margin-bottom: 0 !important;
366 }
367
368 .better-payment .m-1 {
369 margin: 0.25rem !important;
370 }
371
372 .better-payment .mt-1 {
373 margin-top: 0.25rem !important;
374 }
375
376 .better-payment .mr-1 {
377 margin-right: 0.25rem !important;
378 }
379
380 .better-payment .mb-1 {
381 margin-bottom: 0.25rem !important;
382 }
383
384 .better-payment .ml-1 {
385 margin-left: 0.25rem !important;
386 }
387
388 .better-payment .mx-1 {
389 margin-left: 0.25rem !important;
390 margin-right: 0.25rem !important;
391 }
392
393 .better-payment .my-1 {
394 margin-top: 0.25rem !important;
395 margin-bottom: 0.25rem !important;
396 }
397
398 .better-payment .m-2 {
399 margin: 0.5rem !important;
400 }
401
402 .better-payment .mt-2 {
403 margin-top: 0.5rem !important;
404 }
405
406 .better-payment .mr-2 {
407 margin-right: 0.5rem !important;
408 }
409
410 .better-payment .mb-2 {
411 margin-bottom: 0.5rem !important;
412 }
413
414 .better-payment .ml-2 {
415 margin-left: 0.5rem !important;
416 }
417
418 .better-payment .mx-2 {
419 margin-left: 0.5rem !important;
420 margin-right: 0.5rem !important;
421 }
422
423 .better-payment .my-2 {
424 margin-top: 0.5rem !important;
425 margin-bottom: 0.5rem !important;
426 }
427
428 .better-payment .m-3 {
429 margin: 0.75rem !important;
430 }
431
432 .better-payment .mt-3 {
433 margin-top: 0.75rem !important;
434 }
435
436 .better-payment .mr-3 {
437 margin-right: 0.75rem !important;
438 }
439
440 .better-payment .mb-3 {
441 margin-bottom: 0.75rem !important;
442 }
443
444 .better-payment .ml-3 {
445 margin-left: 0.75rem !important;
446 }
447
448 .better-payment .mx-3 {
449 margin-left: 0.75rem !important;
450 margin-right: 0.75rem !important;
451 }
452
453 .better-payment .my-3 {
454 margin-top: 0.75rem !important;
455 margin-bottom: 0.75rem !important;
456 }
457
458 .better-payment .m-4 {
459 margin: 1rem !important;
460 }
461
462 .better-payment .mt-4 {
463 margin-top: 1rem !important;
464 }
465
466 .better-payment .mr-4 {
467 margin-right: 1rem !important;
468 }
469
470 .better-payment .mb-4 {
471 margin-bottom: 1rem !important;
472 }
473
474 .better-payment .ml-4 {
475 margin-left: 1rem !important;
476 }
477
478 .better-payment .mx-4 {
479 margin-left: 1rem !important;
480 margin-right: 1rem !important;
481 }
482
483 .better-payment .my-4 {
484 margin-top: 1rem !important;
485 margin-bottom: 1rem !important;
486 }
487
488 .better-payment .m-5 {
489 margin: 1.5rem !important;
490 }
491
492 .better-payment .mt-5 {
493 margin-top: 1.5rem !important;
494 }
495
496 .better-payment .mr-5 {
497 margin-right: 1.5rem !important;
498 }
499
500 .better-payment .mb-5 {
501 margin-bottom: 1.5rem !important;
502 }
503
504 .better-payment .ml-5 {
505 margin-left: 1.5rem !important;
506 }
507
508 .better-payment .mx-5 {
509 margin-left: 1.5rem !important;
510 margin-right: 1.5rem !important;
511 }
512
513 .better-payment .my-5 {
514 margin-top: 1.5rem !important;
515 margin-bottom: 1.5rem !important;
516 }
517
518 .better-payment .m-6 {
519 margin: 3rem !important;
520 }
521
522 .better-payment .mt-6 {
523 margin-top: 3rem !important;
524 }
525
526 .better-payment .mr-6 {
527 margin-right: 3rem !important;
528 }
529
530 .better-payment .mb-6 {
531 margin-bottom: 3rem !important;
532 }
533
534 .better-payment .ml-6 {
535 margin-left: 3rem !important;
536 }
537
538 .better-payment .mx-6 {
539 margin-left: 3rem !important;
540 margin-right: 3rem !important;
541 }
542
543 .better-payment .my-6 {
544 margin-top: 3rem !important;
545 margin-bottom: 3rem !important;
546 }
547
548 .better-payment .p-0 {
549 padding: 0 !important;
550 }
551
552 .better-payment .pt-0 {
553 padding-top: 0 !important;
554 }
555
556 .better-payment .pr-0 {
557 padding-right: 0 !important;
558 }
559
560 .better-payment .pb-0 {
561 padding-bottom: 0 !important;
562 }
563
564 .better-payment .pl-0 {
565 padding-left: 0 !important;
566 }
567
568 .better-payment .px-0 {
569 padding-left: 0 !important;
570 padding-right: 0 !important;
571 }
572
573 .better-payment .py-0 {
574 padding-top: 0 !important;
575 padding-bottom: 0 !important;
576 }
577
578 .better-payment .p-1 {
579 padding: 0.25rem !important;
580 }
581
582 .better-payment .pt-1 {
583 padding-top: 0.25rem !important;
584 }
585
586 .better-payment .pr-1 {
587 padding-right: 0.25rem !important;
588 }
589
590 .better-payment .pb-1 {
591 padding-bottom: 0.25rem !important;
592 }
593
594 .better-payment .pl-1 {
595 padding-left: 0.25rem !important;
596 }
597
598 .better-payment .px-1 {
599 padding-left: 0.25rem !important;
600 padding-right: 0.25rem !important;
601 }
602
603 .better-payment .py-1 {
604 padding-top: 0.25rem !important;
605 padding-bottom: 0.25rem !important;
606 }
607
608 .better-payment .p-2 {
609 padding: 0.5rem !important;
610 }
611
612 .better-payment .pt-2 {
613 padding-top: 0.5rem !important;
614 }
615
616 .better-payment .pr-2 {
617 padding-right: 0.5rem !important;
618 }
619
620 .better-payment .pb-2 {
621 padding-bottom: 0.5rem !important;
622 }
623
624 .better-payment .pl-2 {
625 padding-left: 0.5rem !important;
626 }
627
628 .better-payment .px-2 {
629 padding-left: 0.5rem !important;
630 padding-right: 0.5rem !important;
631 }
632
633 .better-payment .py-2 {
634 padding-top: 0.5rem !important;
635 padding-bottom: 0.5rem !important;
636 }
637
638 .better-payment .p-3 {
639 padding: 0.75rem !important;
640 }
641
642 .better-payment .pt-3 {
643 padding-top: 0.75rem !important;
644 }
645
646 .better-payment .pr-3 {
647 padding-right: 0.75rem !important;
648 }
649
650 .better-payment .pb-3 {
651 padding-bottom: 0.75rem !important;
652 }
653
654 .better-payment .pl-3 {
655 padding-left: 0.75rem !important;
656 }
657
658 .better-payment .px-3 {
659 padding-left: 0.75rem !important;
660 padding-right: 0.75rem !important;
661 }
662
663 .better-payment .py-3 {
664 padding-top: 0.75rem !important;
665 padding-bottom: 0.75rem !important;
666 }
667
668 .better-payment .p-4 {
669 padding: 1rem !important;
670 }
671
672 .better-payment .pt-4 {
673 padding-top: 1rem !important;
674 }
675
676 .better-payment .pr-4 {
677 padding-right: 1rem !important;
678 }
679
680 .better-payment .pb-4 {
681 padding-bottom: 1rem !important;
682 }
683
684 .better-payment .pl-4 {
685 padding-left: 1rem !important;
686 }
687
688 .better-payment .px-4 {
689 padding-left: 1rem !important;
690 padding-right: 1rem !important;
691 }
692
693 .better-payment .py-4 {
694 padding-top: 1rem !important;
695 padding-bottom: 1rem !important;
696 }
697
698 .better-payment .p-5 {
699 padding: 1.5rem !important;
700 }
701
702 .better-payment .pt-5 {
703 padding-top: 1.5rem !important;
704 }
705
706 .better-payment .pr-5 {
707 padding-right: 1.5rem !important;
708 }
709
710 .better-payment .pb-5 {
711 padding-bottom: 1.5rem !important;
712 }
713
714 .better-payment .pl-5 {
715 padding-left: 1.5rem !important;
716 }
717
718 .better-payment .px-5 {
719 padding-left: 1.5rem !important;
720 padding-right: 1.5rem !important;
721 }
722
723 .better-payment .py-5 {
724 padding-top: 1.5rem !important;
725 padding-bottom: 1.5rem !important;
726 }
727
728 .better-payment .p-6 {
729 padding: 3rem !important;
730 }
731
732 .better-payment .pt-6 {
733 padding-top: 3rem !important;
734 }
735
736 .better-payment .pr-6 {
737 padding-right: 3rem !important;
738 }
739
740 .better-payment .pb-6 {
741 padding-bottom: 3rem !important;
742 }
743
744 .better-payment .pl-6 {
745 padding-left: 3rem !important;
746 }
747
748 .better-payment .px-6 {
749 padding-left: 3rem !important;
750 padding-right: 3rem !important;
751 }
752
753 .better-payment .py-6 {
754 padding-top: 3rem !important;
755 padding-bottom: 3rem !important;
756 }
757
758 .better-payment .columns.is-gapless:not(:last-child) {
759 margin-bottom: 1.5rem;
760 }
761
762 .better-payment .columns.is-gapless {
763 margin-left: 0;
764 margin-right: 0;
765 margin-top: 0;
766 }
767
768 .better-payment .tile.is-ancestor:not(:last-child) {
769 margin-bottom: 0.75rem;
770 }
771
772 .better-payment .tile.is-ancestor {
773 margin-left: -0.75rem;
774 margin-right: -0.75rem;
775 margin-top: -0.75rem;
776 }
777
778 .better-payment .tile {
779 align-items: stretch;
780 display: block;
781 flex-basis: 0;
782 flex-grow: 1;
783 flex-shrink: 1;
784 min-height: -webkit-min-content;
785 min-height: -moz-min-content;
786 min-height: min-content;
787 }
788
789 .better-payment .tile.is-vertical > .tile.is-child:not(:last-child) {
790 margin-bottom: 1.5rem !important;
791 }
792
793 .better-payment .tile.is-child {
794 margin: 0 !important;
795 }
796
797 .better-payment .notification.is-primary {
798 background-color: #00d1b2;
799 color: #fff;
800 }
801
802 .better-payment .notification.is-warning {
803 background-color: #ffe08a;
804 color: rgba(0, 0, 0, 0.7);
805 }
806
807 .better-payment .notification.is-info {
808 background-color: #3e8ed0;
809 color: #fff;
810 }
811
812 .better-payment .has-background-white {
813 background-color: #ffffff !important;
814 }
815
816 .better-payment .has-background-white-fix {
817 background-color: #ffffff;
818 }
819
820 .better-payment .has-background-black {
821 background-color: #0a0a0a !important;
822 }
823
824 .better-payment .has-background-black-fix {
825 background-color: #0a0a0a;
826 }
827
828 .better-payment .has-background-light {
829 background-color: #f5f5f5 !important;
830 }
831
832 .better-payment .has-background-light-fix {
833 background-color: #f5f5f5;
834 }
835
836 .better-payment .has-background-dark {
837 background-color: #363636 !important;
838 }
839
840 .better-payment .has-background-dark-fix {
841 background-color: #363636;
842 }
843
844 .better-payment .has-background-primary {
845 background-color: #00d1b2 !important;
846 }
847
848 .better-payment .has-background-primary-fix {
849 background-color: #00d1b2;
850 }
851
852 .better-payment .has-background-link {
853 background-color: #485fc7 !important;
854 }
855
856 .better-payment .has-background-link-fix {
857 background-color: #485fc7;
858 }
859
860 .better-payment .has-background-info {
861 background-color: #3e8ed0 !important;
862 }
863
864 .better-payment .has-background-info-fix {
865 background-color: #3e8ed0;
866 }
867
868 .better-payment .has-background-success {
869 background-color: #48c78e !important;
870 }
871
872 .better-payment .has-background-success-fix {
873 background-color: #48c78e;
874 }
875
876 .better-payment .has-background-warning {
877 background-color: #ffe08a !important;
878 }
879
880 .better-payment .has-background-warning-fix {
881 background-color: #ffe08a;
882 }
883
884 .better-payment .has-background-danger {
885 background-color: #f14668 !important;
886 }
887
888 .better-payment .has-background-danger-fix {
889 background-color: #f14668;
890 }
891
892 .better-payment .has-text-centered {
893 text-align: center !important;
894 }
895
896 .better-payment .has-text-justified {
897 text-align: justify !important;
898 }
899
900 .better-payment .has-text-left {
901 text-align: left !important;
902 }
903
904 .better-payment .has-text-right {
905 text-align: right !important;
906 }
907
908 .better-payment .has-text-weight-light {
909 font-weight: 300 !important;
910 }
911
912 .better-payment .has-text-weight-normal {
913 font-weight: 400 !important;
914 }
915
916 .better-payment .has-text-weight-medium {
917 font-weight: 500 !important;
918 }
919
920 .better-payment .has-text-weight-semibold {
921 font-weight: 600 !important;
922 }
923
924 .better-payment .has-text-weight-bold {
925 font-weight: 700 !important;
926 }
927
928 .better-payment .bulma-control-extend,
929 .better-payment .file-cta,
930 .better-payment .file-name,
931 .better-payment .input,
932 .better-payment .pagination-ellipsis,
933 .better-payment .pagination-link,
934 .better-payment .pagination-next,
935 .better-payment .pagination-previous,
936 .better-payment .select select,
937 .better-payment .textarea {
938 -moz-appearance: none;
939 -webkit-appearance: none;
940 align-items: center;
941 border: 1px solid transparent;
942 border-radius: 0.375em;
943 box-shadow: none;
944 display: inline-flex;
945 font-size: 1rem;
946 height: 2.5em;
947 justify-content: flex-start;
948 line-height: 1.5;
949 padding-bottom: calc(0.5em - 1px);
950 padding-left: calc(0.75em - 1px);
951 padding-right: calc(0.75em - 1px);
952 padding-top: calc(0.5em - 1px);
953 position: relative;
954 vertical-align: top;
955 }
956
957 .better-payment .input,
958 .better-payment .select select,
959 .better-payment .textarea {
960 background-color: #fff;
961 border-color: #dbdbdb;
962 border-radius: 0.375em;
963 color: #363636;
964 }
965
966 .better-payment .bulma-control-extend:active,
967 .better-payment .bulma-control-extend:focus,
968 .better-payment .file-cta:active,
969 .better-payment .file-cta:focus,
970 .better-payment .file-name:active,
971 .better-payment .file-name:focus,
972 .better-payment .input:active,
973 .better-payment .input:focus,
974 .better-payment .is-active.bulma-control-extend,
975 .better-payment .is-active.file-cta,
976 .better-payment .is-active.file-name,
977 .better-payment .is-active.input,
978 .better-payment .is-active.pagination-ellipsis,
979 .better-payment .is-active.pagination-link,
980 .better-payment .is-active.pagination-next,
981 .better-payment .is-active.pagination-previous,
982 .better-payment .is-active.textarea,
983 .better-payment .is-focused.bulma-control-extend,
984 .better-payment .is-focused.file-cta,
985 .better-payment .is-focused.file-name,
986 .better-payment .is-focused.input,
987 .better-payment .is-focused.pagination-ellipsis,
988 .better-payment .is-focused.pagination-link,
989 .better-payment .is-focused.pagination-next,
990 .better-payment .is-focused.pagination-previous,
991 .better-payment .is-focused.textarea,
992 .better-payment .pagination-ellipsis:active,
993 .better-payment .pagination-ellipsis:focus,
994 .better-payment .pagination-link:active,
995 .better-payment .pagination-link:focus,
996 .better-payment .pagination-next:active,
997 .better-payment .pagination-next:focus,
998 .better-payment .pagination-previous:active,
999 .better-payment .pagination-previous:focus,
1000 .better-payment .select select.is-active,
1001 .better-payment .select select.is-focused,
1002 .better-payment .select select:active,
1003 .better-payment .select select:focus,
1004 .better-payment .textarea:active,
1005 .better-payment.textarea:focus {
1006 outline: 0;
1007 }
1008
1009 .better-payment .better-payment-notice.notification.is-danger.is-light {
1010 background-color: rgb(242, 222, 222);
1011 color: rgb(169, 68, 66);
1012 font-size: 85%;
1013 padding: 15px;
1014 border-radius: 3px;
1015 }
1016
1017 .better-payment .better-payment-notice.notification.is-danger.is-light a {
1018 color: rgb(169, 68, 66) !important;
1019 }
1020
1021 .better-payment .notification {
1022 background-color: #f5f5f5;
1023 border-radius: 0.375em;
1024 position: relative;
1025 padding: 1.25rem 2.5rem 1.25rem 1.5rem;
1026 }
1027
1028 .better-payment .notification.is-light {
1029 background-color: #f5f5f5;
1030 color: rgba(0, 0, 0, 0.7);
1031 }
1032
1033 .better-payment .notification.is-danger {
1034 background-color: #f14668;
1035 color: #fff;
1036 }
1037
1038 .better-payment .notification.is-danger.is-light {
1039 background-color: #feecf0;
1040 color: #cc0f35;
1041 }
1042
1043 .better-payment .notification.is-warning {
1044 background-color: #ffe08a;
1045 color: rgba(0, 0, 0, 0.7);
1046 }
1047
1048 .better-payment .notification.is-warning.is-light {
1049 background-color: #fffaeb;
1050 color: #946c00;
1051 }
1052
1053 .better-payment .notification.is-success {
1054 background-color: #48c78e;
1055 color: #fff;
1056 }
1057
1058 .better-payment .notification.is-success.is-light {
1059 background-color: #effaf5;
1060 color: #257953;
1061 }
1062
1063 .better-payment .notification.is-info {
1064 background-color: #3e8ed0;
1065 color: #fff;
1066 }
1067
1068 .better-payment .notification.is-info.is-light {
1069 background-color: #eff5fb;
1070 color: #296fa8;
1071 }
1072
1073 .better-payment .notification.is-link {
1074 background-color: #485fc7;
1075 color: #fff;
1076 }
1077
1078 .better-payment .notification.is-link.is-light {
1079 background-color: #eff1fa;
1080 color: #3850b7;
1081 }
1082
1083 .better-payment .notification.is-primary {
1084 background-color: #00d1b2;
1085 color: #fff;
1086 }
1087
1088 .better-payment .notification.is-primary.is-light {
1089 background-color: #ebfffc;
1090 color: #00947e;
1091 }
1092
1093 .better-payment .box {
1094 background-color: #fff;
1095 border-radius: 6px;
1096 box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
1097 color: #4a4a4a;
1098 display: block;
1099 padding: 0.75rem;
1100 }
1101
1102 /* Layout 2 */
1103 .better-payment .payment-form-layout-1,
1104 .better-payment .payment-form-layout-2 {
1105 font-family: "DM Sans", sans-serif;
1106 box-shadow: 0px 40px 75px rgba(0, 1, 35, 0.08);
1107 }
1108
1109 .better-payment .payment-form-layout-1 .dynamic-amount-section,
1110 .better-payment .payment-form-layout-2 .dynamic-amount-section {
1111 background: url("../img/bg-blue-2.svg") no-repeat center;
1112 background-size: cover;
1113 border-top-left-radius: 10px;
1114 border-bottom-left-radius: 10px;
1115 }
1116
1117 .better-payment .payment-form-layout-2 .dynamic-amount-section-subtitle {
1118 color: #98B9F2;
1119 }
1120
1121 .better-payment .payment-form-layout-3 .dynamic-amount-section-amount {
1122 color: #0042BD;
1123 }
1124
1125 .better-payment .payment-form-layout.payment-form-layout-3 .button {
1126 background-color: #0042BD !important;
1127 }
1128
1129 .better-payment .payment-form-layout-3 .dynamic-amount-section-title {
1130 color: #000;
1131 }
1132
1133 .better-payment .payment-form-layout-3 .dynamic-amount-section-subtitle {
1134 color: #666;
1135 }
1136
1137 .better-payment .payment-form-layout-3 .dynamic-amount-section-icon {
1138 color: #C6CDE4;
1139 }
1140
1141 .better-payment .payment-form-layout-3 .payment-method-checkbox {
1142 border-bottom: 1px solid #E9ECFF;
1143 cursor: pointer;
1144 }
1145
1146 .better-payment .payment-form-layout-3 .payment-method-checkbox input,
1147 .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item input,
1148 .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item input {
1149 visibility: hidden;
1150 }
1151
1152 .better-payment .payment-form-layout-3 .payment-method-checkbox.active,
1153 .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item.active,
1154 .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item.active {
1155 border-bottom: 1px solid #0042BD;
1156 }
1157
1158 .better-payment .payment-form-layout-1 .form-content-section,
1159 .better-payment .payment-form-layout-2 .form-content-section {
1160 border-top-right-radius: 10px;
1161 border-bottom-right-radius: 10px;
1162 }
1163
1164 .better-payment .payment-form-layout-2 .dynamic-amount-section,
1165 .better-payment .payment-form-layout-2 .form-content-section {
1166 border-radius: 10px;
1167 }
1168
1169 .better-payment .payment-form-layout-2 .dynamic-amount-section {
1170 background: linear-gradient(180deg, #006AFF 0%, #004CBF 100%);
1171 }
1172
1173 .better-payment .payment-form-layout-3 .dynamic-amount-section {
1174 background: #FBFCFF;
1175 }
1176
1177 .better-payment .payment-form-layout .button {
1178 background-color: #006AFF !important;
1179 color: #fff !important;
1180 }
1181
1182 .better-payment .button {
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: 1rem;
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.fix-common {
1203 -moz-appearance: none;
1204 -webkit-appearance: none;
1205 align-items: center;
1206 border: 1px solid transparent;
1207 border-radius: 0.375em;
1208 box-shadow: none;
1209 display: inline-flex;
1210 font-size: unset;
1211 height: 2.5em;
1212 justify-content: flex-start;
1213 line-height: 1.5;
1214 padding-bottom: calc(0.5em - 1px);
1215 padding-left: calc(0.75em - 1px);
1216 padding-right: calc(0.75em - 1px);
1217 padding-top: calc(0.5em - 1px);
1218 position: relative;
1219 vertical-align: top;
1220 }
1221
1222 .better-payment .button:active,
1223 .better-payment .button:focus,
1224 .better-payment .is-active.button,
1225 .better-payment .is-focused.button {
1226 outline: 0;
1227 }
1228
1229 .better-payment .buttons .button {
1230 margin-bottom: 0.5rem;
1231 }
1232
1233 .better-payment .button.is-fullwidth {
1234 display: flex;
1235 width: 100%;
1236 }
1237
1238 .better-payment .button.is-medium {
1239 font-size: 1.25rem;
1240 }
1241
1242 .better-payment .button {
1243 background-color: #fff;
1244 border-color: #dbdbdb;
1245 border-width: 1px;
1246 color: #363636;
1247 cursor: pointer;
1248 justify-content: center;
1249 padding-bottom: calc(0.5em - 1px);
1250 padding-left: 1em;
1251 padding-right: 1em;
1252 padding-top: calc(0.5em - 1px);
1253 text-align: center;
1254 white-space: nowrap;
1255 }
1256
1257 .better-payment .button.is-hovered,
1258 .better-payment .button:hover {
1259 border-color: #b5b5b5;
1260 color: #363636;
1261 }
1262
1263 .better-payment .is-hidden {
1264 display: none !important;
1265 }
1266
1267 .better-payment .control .bp-currency-symbol {
1268 color: #b0b7d6;
1269 font-size: 1.5rem;
1270 }
1271
1272 .better-payment .is-full-width,
1273 .better-payment.is-full-width {
1274 width: 100%;
1275 }
1276
1277 .better-payment .is-medium.bp-custom-payment-amount-el-integration {
1278 font-size: unset;
1279 border-color: unset;
1280 border-radius: 3px;
1281 }
1282
1283 .better-payment .control.has-icons-left .is-medium.bp-custom-payment-amount-el-integration ~ .icon {
1284 font-size: unset;
1285 }
1286
1287 .better-payment .is-medium.bp-custom-payment-amount-el-integration:focus {
1288 box-shadow: unset;
1289 }
1290
1291 /* Mobile */
1292 @media screen and (max-width: 768px) {
1293 .better-payment .payment-form-layout-3 .payment-method-checkbox img {
1294 margin-left: -35px;
1295 }
1296 .better-payment .payment-form-layout-1 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box,
1297 .better-payment .payment-form-layout-2 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box {
1298 display: unset;
1299 }
1300 .better-payment .payment-form-layout .button,
1301 .better-payment .form-content-section input,
1302 .better-payment .is-medium.input,
1303 .better-payment .is-medium.textarea,
1304 .better-payment .control.has-icons-left .input.is-medium ~ .icon,
1305 .better-payment .control.has-icons-left .select.is-medium ~ .icon,
1306 .better-payment .control.has-icons-right .input.is-medium ~ .icon,
1307 .better-payment .control.has-icons-right .select.is-medium ~ .icon {
1308 font-size: 16px;
1309 }
1310 }
1311 /* Tablet */
1312 @media screen and (min-width: 769px) {
1313 .better-payment .columns:not(.is-desktop) {
1314 display: flex;
1315 }
1316 .better-payment .column.is-three-quarters,
1317 .better-payment .column.is-three-quarters-tablet {
1318 flex: none;
1319 width: 75%;
1320 }
1321 .better-payment .column.is-two-thirds,
1322 .better-payment .column.is-two-thirds-tablet {
1323 flex: none;
1324 width: 66.6666%;
1325 }
1326 .better-payment .tile:not(.is-child) {
1327 display: flex;
1328 }
1329 .better-payment .tile.is-8 {
1330 flex: none;
1331 width: 66.66667%;
1332 }
1333 .better-payment .column.is-1,
1334 .better-payment .column.is-1-tablet {
1335 flex: none;
1336 width: 8.33333%;
1337 }
1338 .better-payment .column.is-2,
1339 .better-payment .column.is-2-tablet {
1340 flex: none;
1341 width: 16.66667%;
1342 }
1343 .better-payment .column.is-3,
1344 .better-payment .column.is-3-tablet {
1345 flex: none;
1346 width: 25%;
1347 }
1348 .better-payment .column.is-4,
1349 .better-payment .column.is-4-tablet {
1350 flex: none;
1351 width: 33.33333%;
1352 }
1353 .better-payment .column.is-5,
1354 .better-payment .column.is-5-tablet {
1355 flex: none;
1356 width: 41.66667%;
1357 }
1358 .better-payment .column.is-6,
1359 .better-payment .column.is-6-tablet {
1360 flex: none;
1361 width: 50%;
1362 }
1363 .better-payment .column.is-7,
1364 .better-payment .column.is-7-tablet {
1365 flex: none;
1366 width: 58.33333%;
1367 }
1368 .better-payment .column.is-8,
1369 .better-payment .column.is-8-tablet {
1370 flex: none;
1371 width: 66.66667%;
1372 }
1373 .better-payment .column.is-9,
1374 .better-payment .column.is-9-tablet {
1375 flex: none;
1376 width: 75%;
1377 }
1378 .better-payment .column.is-10,
1379 .better-payment .column.is-10-tablet {
1380 flex: none;
1381 width: 83.33333%;
1382 }
1383 .better-payment .column.is-11,
1384 .better-payment .column.is-11-tablet {
1385 flex: none;
1386 width: 91.66667%;
1387 }
1388 .better-payment .column.is-12,
1389 .better-payment .column.is-12-tablet {
1390 flex: none;
1391 width: 100%;
1392 }
1393 .better-payment .column.is-full,
1394 .better-payment .column.is-full-tablet {
1395 flex: none;
1396 width: 100%;
1397 }
1398 .better-payment .column.is-four-fifths,
1399 .better-payment .column.is-four-fifths-tablet {
1400 flex: none;
1401 width: 80%;
1402 }
1403 .better-payment .column.is-three-quarters,
1404 .better-payment .column.is-three-quarters-tablet {
1405 flex: none;
1406 width: 75%;
1407 }
1408 .better-payment .column.is-two-thirds,
1409 .better-payment .column.is-two-thirds-tablet {
1410 flex: none;
1411 width: 66.6666%;
1412 }
1413 .better-payment .column.is-three-fifths,
1414 .better-payment .column.is-three-fifths-tablet {
1415 flex: none;
1416 width: 60%;
1417 }
1418 .better-payment .column.is-half,
1419 .better-payment .column.is-half-tablet {
1420 flex: none;
1421 width: 50%;
1422 }
1423 .better-payment .column.is-two-fifths,
1424 .better-payment .column.is-two-fifths-tablet {
1425 flex: none;
1426 width: 40%;
1427 }
1428 .better-payment .column.is-one-third,
1429 .better-payment .column.is-one-third-tablet {
1430 flex: none;
1431 width: 33.3333%;
1432 }
1433 .better-payment .column.is-one-quarter,
1434 .better-payment .column.is-one-quarter-tablet {
1435 flex: none;
1436 width: 25%;
1437 }
1438 .better-payment .column.is-one-fifth,
1439 .better-payment .column.is-one-fifth-tablet {
1440 flex: none;
1441 width: 20%;
1442 }
1443 .better-payment .tile.is-vertical {
1444 flex-direction: column;
1445 }
1446 .better-payment .tile.is-parent {
1447 padding: 0.75rem;
1448 }
1449 .better-payment .column.is-offset-1,
1450 .better-payment .column.is-offset-1-tablet {
1451 margin-left: 8.33333%;
1452 }
1453 .better-payment .column.is-offset-2,
1454 .better-payment .column.is-offset-2-tablet {
1455 margin-left: 16.66667%;
1456 }
1457 .better-payment .column.is-offset-3,
1458 .better-payment .column.is-offset-3-tablet {
1459 margin-left: 25%;
1460 }
1461 .better-payment .column.is-offset-4,
1462 .better-payment .column.is-offset-4-tablet {
1463 margin-left: 33.33333%;
1464 }
1465 .better-payment .column.is-offset-5,
1466 .better-payment .column.is-offset-5-tablet {
1467 margin-left: 41.66667%;
1468 }
1469 .better-payment .column.is-offset-6,
1470 .better-payment .column.is-offset-6-tablet {
1471 margin-left: 50%;
1472 }
1473 .better-payment .column.is-offset-7,
1474 .better-payment .column.is-offset-7-tablet {
1475 margin-left: 58.33333%;
1476 }
1477 .better-payment .column.is-offset-8,
1478 .better-payment .column.is-offset-8-tablet {
1479 margin-left: 66.66667%;
1480 }
1481 .better-payment .column.is-offset-9,
1482 .better-payment .column.is-offset-9-tablet {
1483 margin-left: 75%;
1484 }
1485 .better-payment .column.is-offset-10,
1486 .better-payment .column.is-offset-10-tablet {
1487 margin-left: 83.33333%;
1488 }
1489 .better-payment .column.is-offset-11,
1490 .better-payment .column.is-offset-11-tablet {
1491 margin-left: 91.66667%;
1492 }
1493 .better-payment .column.is-offset-12,
1494 .better-payment .column.is-offset-12-tablet {
1495 margin-left: 100%;
1496 }
1497 .better-payment .tile.is-offset-2,
1498 .better-payment .tile.is-offset-2-tablet {
1499 margin-left: 16.66667%;
1500 }
1501 .better-payment .bp-modal .modal-card,
1502 .better-payment .bp-modal .modal-content {
1503 width: 740px;
1504 }
1505 }
1506 /* Desktop */
1507 @media screen and (min-width: 992px) {
1508 .better-payment .columns:not(.is-desktop) {
1509 display: flex;
1510 }
1511 .better-payment .column.is-1-desktop {
1512 flex: none;
1513 width: 8.33333%;
1514 }
1515 .better-payment .column.is-2-desktop {
1516 flex: none;
1517 width: 16.66667%;
1518 }
1519 .better-payment .column.is-3-desktop {
1520 flex: none;
1521 width: 25%;
1522 }
1523 .better-payment .column.is-4-desktop {
1524 flex: none;
1525 width: 33.33333%;
1526 }
1527 .better-payment .column.is-5-desktop {
1528 flex: none;
1529 width: 41.66667%;
1530 }
1531 .better-payment .column.is-6-desktop {
1532 flex: none;
1533 width: 50%;
1534 }
1535 .better-payment .column.is-7-desktop {
1536 flex: none;
1537 width: 58.33333%;
1538 }
1539 .better-payment .column.is-8-desktop {
1540 flex: none;
1541 width: 66.66667%;
1542 }
1543 .better-payment .column.is-9-desktop {
1544 flex: none;
1545 width: 75%;
1546 }
1547 .better-payment .column.is-10-desktop {
1548 flex: none;
1549 width: 83.33333%;
1550 }
1551 .better-payment .column.is-11-desktop {
1552 flex: none;
1553 width: 91.66667%;
1554 }
1555 .better-payment .column.is-12-desktop {
1556 flex: none;
1557 width: 100%;
1558 }
1559 .better-payment .bp-modal .modal-card,
1560 .better-payment .bp-modal .modal-content {
1561 width: 950px !important;
1562 }
1563 .better-payment .bp-modal .is-small .modal-card,
1564 .better-payment .bp-modal .is-small .modal-content {
1565 width: 550px;
1566 }
1567 }
1568 /* Large Desktop : widescreen */
1569 @media screen and (min-width: 1200px) {
1570 .better-payment .column.is-1-widescreen {
1571 flex: none;
1572 width: 8.33333%;
1573 }
1574 .better-payment .column.is-2-widescreen {
1575 flex: none;
1576 width: 16.66667%;
1577 }
1578 .better-payment .column.is-3-widescreen {
1579 flex: none;
1580 width: 25%;
1581 }
1582 .better-payment .column.is-4-widescreen {
1583 flex: none;
1584 width: 33.33333%;
1585 }
1586 .better-payment .column.is-5-widescreen {
1587 flex: none;
1588 width: 41.66667%;
1589 }
1590 .better-payment .column.is-6-widescreen {
1591 flex: none;
1592 width: 50%;
1593 }
1594 .better-payment .column.is-7-widescreen {
1595 flex: none;
1596 width: 58.33333%;
1597 }
1598 .better-payment .column.is-8-widescreen {
1599 flex: none;
1600 width: 66.66667%;
1601 }
1602 .better-payment .column.is-9-widescreen {
1603 flex: none;
1604 width: 75%;
1605 }
1606 .better-payment .column.is-10-widescreen {
1607 flex: none;
1608 width: 83.33333%;
1609 }
1610 .better-payment .column.is-11-widescreen {
1611 flex: none;
1612 width: 91.66667%;
1613 }
1614 .better-payment .column.is-12-widescreen {
1615 flex: none;
1616 width: 100%;
1617 }
1618 }
1619 /* Larger Desktop : fullhd */
1620 @media screen and (min-width: 1400px) {
1621 .better-payment .column.is-1-fullhd {
1622 flex: none;
1623 width: 8.33333%;
1624 }
1625 .better-payment .column.is-2-fullhd {
1626 flex: none;
1627 width: 16.66667%;
1628 }
1629 .better-payment .column.is-3-fullhd {
1630 flex: none;
1631 width: 25%;
1632 }
1633 .better-payment .column.is-4-fullhd {
1634 flex: none;
1635 width: 33.33333%;
1636 }
1637 .better-payment .column.is-5-fullhd {
1638 flex: none;
1639 width: 41.66667%;
1640 }
1641 .better-payment .column.is-6-fullhd {
1642 flex: none;
1643 width: 50%;
1644 }
1645 .better-payment .column.is-7-fullhd {
1646 flex: none;
1647 width: 58.33333%;
1648 }
1649 .better-payment .column.is-8-fullhd {
1650 flex: none;
1651 width: 66.66667%;
1652 }
1653 .better-payment .column.is-9-fullhd {
1654 flex: none;
1655 width: 75%;
1656 }
1657 .better-payment .column.is-10-fullhd {
1658 flex: none;
1659 width: 83.33333%;
1660 }
1661 .better-payment .column.is-11-fullhd {
1662 flex: none;
1663 width: 91.66667%;
1664 }
1665 .better-payment .column.is-12-fullhd {
1666 flex: none;
1667 width: 100%;
1668 }
1669 }
1670 /* Larger Desktop Custom : fullhd-custom */
1671 @media screen and (min-width: 1500px) {
1672 .better-payment .column.is-1-fullhd-custom {
1673 flex: none;
1674 width: 8.33333%;
1675 }
1676 .better-payment .column.is-2-fullhd-custom {
1677 flex: none;
1678 width: 16.66667%;
1679 }
1680 .better-payment .column.is-3-fullhd-custom {
1681 flex: none;
1682 width: 25%;
1683 }
1684 .better-payment .column.is-4-fullhd-custom {
1685 flex: none;
1686 width: 33.33333%;
1687 }
1688 .better-payment .column.is-5-fullhd-custom {
1689 flex: none;
1690 width: 41.66667%;
1691 }
1692 .better-payment .column.is-6-fullhd-custom {
1693 flex: none;
1694 width: 50%;
1695 }
1696 .better-payment .column.is-7-fullhd-custom {
1697 flex: none;
1698 width: 58.33333%;
1699 }
1700 .better-payment .column.is-8-fullhd-custom {
1701 flex: none;
1702 width: 66.66667%;
1703 }
1704 .better-payment .column.is-9-fullhd-custom {
1705 flex: none;
1706 width: 75%;
1707 }
1708 .better-payment .column.is-10-fullhd-custom {
1709 flex: none;
1710 width: 83.33333%;
1711 }
1712 .better-payment .column.is-11-fullhd-custom {
1713 flex: none;
1714 width: 91.66667%;
1715 }
1716 .better-payment .column.is-12-fullhd-custom {
1717 flex: none;
1718 width: 100%;
1719 }
1720 }
1721 /* BP Modal : Starts */
1722 .better-payment .bp-modal .modal,
1723 .better-payment .bp-modal .modal-background {
1724 bottom: 0;
1725 left: 0;
1726 position: absolute;
1727 right: 0;
1728 top: 0;
1729 }
1730
1731 .better-payment .bp-modal .modal {
1732 align-items: center;
1733 display: none;
1734 flex-direction: column;
1735 justify-content: center;
1736 overflow: hidden;
1737 position: fixed;
1738 z-index: 40;
1739 }
1740
1741 .better-payment .bp-modal .modal-background {
1742 background-color: rgba(10, 10, 10, 0.86);
1743 }
1744
1745 .better-payment .bp-modal .modal-card,
1746 .better-payment .bp-modal .modal-content {
1747 margin: 0 20px;
1748 max-height: calc(100vh - 160px);
1749 overflow: auto;
1750 position: relative;
1751 width: 100%;
1752 }
1753
1754 .better-payment .bp-modal .modal-card {
1755 display: flex;
1756 flex-direction: column;
1757 max-height: calc(100vh - 40px);
1758 overflow: hidden;
1759 }
1760
1761 .better-payment .bp-modal .modal-card-head {
1762 border-bottom: 1px solid #dbdbdb;
1763 border-top-left-radius: 6px;
1764 border-top-right-radius: 6px;
1765 }
1766
1767 .better-payment .bp-modal .modal-card-foot,
1768 .better-payment .bp-modal .modal-card-head {
1769 align-items: center;
1770 background-color: #f5f5f5;
1771 display: flex;
1772 flex-shrink: 0;
1773 justify-content: flex-end;
1774 padding: 15px 20px;
1775 position: relative;
1776 }
1777
1778 .better-payment .bp-modal .modal-card-body {
1779 -webkit-overflow-scrolling: touch;
1780 background-color: #fff;
1781 flex-grow: 1;
1782 flex-shrink: 1;
1783 overflow: auto;
1784 padding: 20px;
1785 }
1786
1787 .better-payment .bp-modal .modal-card-foot {
1788 border-bottom-left-radius: 6px;
1789 border-bottom-right-radius: 6px;
1790 border-top: 1px solid #dbdbdb;
1791 }
1792
1793 .better-payment .bp-modal .modal-card-title {
1794 color: #363636;
1795 flex-grow: 1;
1796 flex-shrink: 0;
1797 font-size: 1.5rem;
1798 line-height: 1;
1799 }
1800
1801 .better-payment .bp-modal .button,
1802 .better-payment .bp-modal .button:focus {
1803 outline: 0 !important;
1804 border-color: transparent !important;
1805 }
1806
1807 .better-payment .bp-modal .modal.is-active {
1808 display: flex;
1809 }
1810
1811 .better-payment .bp-modal .is-large.modal-close {
1812 height: 32px;
1813 max-height: 32px;
1814 max-width: 32px;
1815 min-height: 32px;
1816 min-width: 32px;
1817 width: 32px;
1818 }
1819
1820 .better-payment .bp-modal .delete,
1821 .better-payment .bp-modal .modal-close {
1822 -webkit-touch-callout: none;
1823 -webkit-user-select: none;
1824 -moz-user-select: none;
1825 -ms-user-select: none;
1826 user-select: none;
1827 -moz-appearance: none;
1828 -webkit-appearance: none;
1829 background-color: rgba(10, 10, 10, 0.2);
1830 border: none;
1831 border-radius: 9999px;
1832 cursor: pointer;
1833 pointer-events: auto;
1834 display: inline-block;
1835 flex-grow: 0;
1836 flex-shrink: 0;
1837 font-size: 0;
1838 height: 20px;
1839 max-height: 20px;
1840 max-width: 20px;
1841 min-height: 20px;
1842 min-width: 20px;
1843 outline: 0;
1844 position: relative;
1845 vertical-align: top;
1846 width: 20px;
1847 }
1848
1849 .better-payment .bp-modal .modal-close {
1850 background: 0 0;
1851 height: 40px;
1852 position: fixed;
1853 right: 20px;
1854 top: 52px;
1855 width: 40px;
1856 }
1857
1858 .better-payment .bp-modal .delete::before,
1859 .better-payment .bp-modal .modal-close::before {
1860 height: 2px;
1861 width: 50%;
1862 }
1863
1864 .better-payment .bp-modal .delete::after,
1865 .better-payment .bp-modal .modal-close::after {
1866 height: 50%;
1867 width: 2px;
1868 }
1869
1870 .better-payment .bp-modal .delete::after,
1871 .better-payment .bp-modal .delete::before,
1872 .better-payment .bp-modal .modal-close::after,
1873 .better-payment .bp-modal .modal-close::before {
1874 background-color: #fff;
1875 content: "";
1876 display: block;
1877 left: 50%;
1878 position: absolute;
1879 top: 50%;
1880 transform: translateX(-50%) translateY(-50%) rotate(45deg);
1881 transform-origin: center center;
1882 }
1883
1884 .better-payment .bp-modal .box {
1885 background-color: #fff;
1886 border-radius: 6px;
1887 box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
1888 color: #4a4a4a;
1889 display: block;
1890 padding: 1.25rem;
1891 }
1892
1893 .better-payment .bp-modal .delete:focus,
1894 .better-payment .bp-modal .delete:hover,
1895 .better-payment .bp-modal .modal-close:focus,
1896 .better-payment .bp-modal .modal-close:hover {
1897 background-color: rgba(10, 10, 10, 0.3);
1898 }
1899
1900 .better-payment .bp-modal .modal-card,
1901 .better-payment .bp-modal .modal-content {
1902 margin: 0 auto;
1903 max-height: calc(100vh - 40px);
1904 }
1905
1906 /* BP Modal : Ends */
1907 /* BP Transactions Page */
1908 .better-payment .file {
1909 align-items: stretch;
1910 display: flex;
1911 justify-content: flex-start;
1912 position: relative;
1913 }
1914 .better-payment .file.is-white .file-cta {
1915 background-color: #fff;
1916 border-color: transparent;
1917 color: #0a0a0a;
1918 }
1919 .better-payment .file.is-white.is-hovered .file-cta, .better-payment .file.is-white:hover .file-cta {
1920 background-color: #f9f9f9;
1921 border-color: transparent;
1922 color: #0a0a0a;
1923 }
1924 .better-payment .file.is-white.is-focused .file-cta, .better-payment .file.is-white:focus .file-cta {
1925 border-color: transparent;
1926 box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
1927 color: #0a0a0a;
1928 }
1929 .better-payment .file.is-white.is-active .file-cta, .better-payment .file.is-white:active .file-cta {
1930 background-color: #f2f2f2;
1931 border-color: transparent;
1932 color: #0a0a0a;
1933 }
1934 .better-payment .file.is-black .file-cta {
1935 background-color: #0a0a0a;
1936 border-color: transparent;
1937 color: #fff;
1938 }
1939 .better-payment .file.is-black.is-hovered .file-cta, .better-payment .file.is-black:hover .file-cta {
1940 background-color: #040404;
1941 border-color: transparent;
1942 color: #fff;
1943 }
1944 .better-payment .file.is-black.is-focused .file-cta, .better-payment .file.is-black:focus .file-cta {
1945 border-color: transparent;
1946 box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
1947 color: #fff;
1948 }
1949 .better-payment .file.is-black.is-active .file-cta, .better-payment .file.is-black:active .file-cta {
1950 background-color: #000;
1951 border-color: transparent;
1952 color: #fff;
1953 }
1954 .better-payment .file.is-light .file-cta {
1955 background-color: #f4f4f4;
1956 border-color: transparent;
1957 color: rgba(0, 0, 0, 0.7);
1958 }
1959 .better-payment .file.is-light.is-hovered .file-cta, .better-payment .file.is-light:hover .file-cta {
1960 background-color: #eee;
1961 border-color: transparent;
1962 color: rgba(0, 0, 0, 0.7);
1963 }
1964 .better-payment .file.is-light.is-focused .file-cta, .better-payment .file.is-light:focus .file-cta {
1965 border-color: transparent;
1966 box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
1967 color: rgba(0, 0, 0, 0.7);
1968 }
1969 .better-payment .file.is-light.is-active .file-cta, .better-payment .file.is-light:active .file-cta {
1970 background-color: #e8e8e8;
1971 border-color: transparent;
1972 color: rgba(0, 0, 0, 0.7);
1973 }
1974 .better-payment .file.is-dark .file-cta {
1975 background-color: #353535;
1976 border-color: transparent;
1977 color: #fff;
1978 }
1979 .better-payment .file.is-dark.is-hovered .file-cta, .better-payment .file.is-dark:hover .file-cta {
1980 background-color: #2f2f2f;
1981 border-color: transparent;
1982 color: #fff;
1983 }
1984 .better-payment .file.is-dark.is-focused .file-cta, .better-payment .file.is-dark:focus .file-cta {
1985 border-color: transparent;
1986 box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
1987 color: #fff;
1988 }
1989 .better-payment .file.is-dark.is-active .file-cta, .better-payment .file.is-dark:active .file-cta {
1990 background-color: #292929;
1991 border-color: transparent;
1992 color: #fff;
1993 }
1994 .better-payment .file.is-primary .file-cta {
1995 background-color: #00d1b1;
1996 border-color: transparent;
1997 color: #fff;
1998 }
1999 .better-payment .file.is-primary.is-hovered .file-cta, .better-payment .file.is-primary:hover .file-cta {
2000 background-color: #00c4a7;
2001 border-color: transparent;
2002 color: #fff;
2003 }
2004 .better-payment .file.is-primary.is-focused .file-cta, .better-payment .file.is-primary:focus .file-cta {
2005 border-color: transparent;
2006 box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
2007 color: #fff;
2008 }
2009 .better-payment .file.is-primary.is-active .file-cta, .better-payment .file.is-primary:active .file-cta {
2010 background-color: #00b89c;
2011 border-color: transparent;
2012 color: #fff;
2013 }
2014 .better-payment .file.is-link .file-cta {
2015 background-color: #475ec6;
2016 border-color: transparent;
2017 color: #fff;
2018 }
2019 .better-payment .file.is-link.is-hovered .file-cta, .better-payment .file.is-link:hover .file-cta {
2020 background-color: #3e56c4;
2021 border-color: transparent;
2022 color: #fff;
2023 }
2024 .better-payment .file.is-link.is-focused .file-cta, .better-payment .file.is-link:focus .file-cta {
2025 border-color: transparent;
2026 box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.25);
2027 color: #fff;
2028 }
2029 .better-payment .file.is-link.is-active .file-cta, .better-payment .file.is-link:active .file-cta {
2030 background-color: #3a51bb;
2031 border-color: transparent;
2032 color: #fff;
2033 }
2034 .better-payment .file.is-info .file-cta {
2035 background-color: #3e8ed0;
2036 border-color: transparent;
2037 color: #fff;
2038 }
2039 .better-payment .file.is-info.is-hovered .file-cta, .better-payment .file.is-info:hover .file-cta {
2040 background-color: #3488ce;
2041 border-color: transparent;
2042 color: #fff;
2043 }
2044 .better-payment .file.is-info.is-focused .file-cta, .better-payment .file.is-info:focus .file-cta {
2045 border-color: transparent;
2046 box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25);
2047 color: #fff;
2048 }
2049 .better-payment .file.is-info.is-active .file-cta, .better-payment .file.is-info:active .file-cta {
2050 background-color: #3082c5;
2051 border-color: transparent;
2052 color: #fff;
2053 }
2054 .better-payment .file.is-success .file-cta {
2055 background-color: #47c68d;
2056 border-color: transparent;
2057 color: #fff;
2058 }
2059 .better-payment .file.is-success.is-hovered .file-cta, .better-payment .file.is-success:hover .file-cta {
2060 background-color: #3ec487;
2061 border-color: transparent;
2062 color: #fff;
2063 }
2064 .better-payment .file.is-success.is-focused .file-cta, .better-payment .file.is-success:focus .file-cta {
2065 border-color: transparent;
2066 box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25);
2067 color: #fff;
2068 }
2069 .better-payment .file.is-success.is-active .file-cta, .better-payment .file.is-success:active .file-cta {
2070 background-color: #3abb81;
2071 border-color: transparent;
2072 color: #fff;
2073 }
2074 .better-payment .file.is-warning .file-cta {
2075 background-color: #ffdf89;
2076 border-color: transparent;
2077 color: rgba(0, 0, 0, 0.7);
2078 }
2079 .better-payment .file.is-warning.is-hovered .file-cta, .better-payment .file.is-warning:hover .file-cta {
2080 background-color: #ffdc7d;
2081 border-color: transparent;
2082 color: rgba(0, 0, 0, 0.7);
2083 }
2084 .better-payment .file.is-warning.is-focused .file-cta, .better-payment .file.is-warning:focus .file-cta {
2085 border-color: transparent;
2086 box-shadow: 0 0 0.5em rgba(255, 224, 138, 0.25);
2087 color: rgba(0, 0, 0, 0.7);
2088 }
2089 .better-payment .file.is-warning.is-active .file-cta, .better-payment .file.is-warning:active .file-cta {
2090 background-color: #ffd970;
2091 border-color: transparent;
2092 color: rgba(0, 0, 0, 0.7);
2093 }
2094 .better-payment .file.is-danger .file-cta {
2095 background-color: #f14668;
2096 border-color: transparent;
2097 color: #fff;
2098 }
2099 .better-payment .file.is-danger.is-hovered .file-cta, .better-payment .file.is-danger:hover .file-cta {
2100 background-color: #f03a5f;
2101 border-color: transparent;
2102 color: #fff;
2103 }
2104 .better-payment .file.is-danger.is-focused .file-cta, .better-payment .file.is-danger:focus .file-cta {
2105 border-color: transparent;
2106 box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25);
2107 color: #fff;
2108 }
2109 .better-payment .file.is-danger.is-active .file-cta, .better-payment .file.is-danger:active .file-cta {
2110 background-color: #ef2e55;
2111 border-color: transparent;
2112 color: #fff;
2113 }
2114 .better-payment .file.is-expo .file-cta {
2115 background-color: #ffd257;
2116 border-color: transparent;
2117 color: #fff;
2118 }
2119 .better-payment .file.is-expo.is-hovered .file-cta, .better-payment .file.is-expo:hover .file-cta {
2120 background-color: #ffcf4a;
2121 border-color: transparent;
2122 color: #fff;
2123 }
2124 .better-payment .file.is-expo.is-focused .file-cta, .better-payment .file.is-expo:focus .file-cta {
2125 border-color: transparent;
2126 box-shadow: 0 0 0.5em rgba(255, 210, 87, 0.25);
2127 color: #fff;
2128 }
2129 .better-payment .file.is-expo.is-active .file-cta, .better-payment .file.is-expo:active .file-cta {
2130 background-color: #ffcb3e;
2131 border-color: transparent;
2132 color: #fff;
2133 }
2134 .better-payment .file.is-love .file-cta {
2135 background-color: #f14668;
2136 border-color: transparent;
2137 color: #fff;
2138 }
2139 .better-payment .file.is-love.is-hovered .file-cta, .better-payment .file.is-love:hover .file-cta {
2140 background-color: #f03a5f;
2141 border-color: transparent;
2142 color: #fff;
2143 }
2144 .better-payment .file.is-love.is-focused .file-cta, .better-payment .file.is-love:focus .file-cta {
2145 border-color: transparent;
2146 box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25);
2147 color: #fff;
2148 }
2149 .better-payment .file.is-love.is-active .file-cta, .better-payment .file.is-love:active .file-cta {
2150 background-color: #ef2e55;
2151 border-color: transparent;
2152 color: #fff;
2153 }
2154 .better-payment .file.is-patreon .file-cta {
2155 background-color: #f96854;
2156 border-color: transparent;
2157 color: #fff;
2158 }
2159 .better-payment .file.is-patreon.is-hovered .file-cta, .better-payment .file.is-patreon:hover .file-cta {
2160 background-color: #f95d48;
2161 border-color: transparent;
2162 color: #fff;
2163 }
2164 .better-payment .file.is-patreon.is-focused .file-cta, .better-payment .file.is-patreon:focus .file-cta {
2165 border-color: transparent;
2166 box-shadow: 0 0 0.5em rgba(249, 104, 84, 0.25);
2167 color: #fff;
2168 }
2169 .better-payment .file.is-patreon.is-active .file-cta, .better-payment .file.is-patreon:active .file-cta {
2170 background-color: #f8523b;
2171 border-color: transparent;
2172 color: #fff;
2173 }
2174 .better-payment .file.is-rss .file-cta {
2175 background-color: #f26522;
2176 border-color: transparent;
2177 color: #fff;
2178 }
2179 .better-payment .file.is-rss.is-hovered .file-cta, .better-payment .file.is-rss:hover .file-cta {
2180 background-color: #f15d16;
2181 border-color: transparent;
2182 color: #fff;
2183 }
2184 .better-payment .file.is-rss.is-focused .file-cta, .better-payment .file.is-rss:focus .file-cta {
2185 border-color: transparent;
2186 box-shadow: 0 0 0.5em rgba(242, 101, 34, 0.25);
2187 color: #fff;
2188 }
2189 .better-payment .file.is-rss.is-active .file-cta, .better-payment .file.is-rss:active .file-cta {
2190 background-color: #ed560e;
2191 border-color: transparent;
2192 color: #fff;
2193 }
2194 .better-payment .file.is-bleeding .file-cta {
2195 background-color: #abf47c;
2196 border-color: transparent;
2197 color: rgba(0, 0, 0, 0.7);
2198 }
2199 .better-payment .file.is-bleeding.is-hovered .file-cta, .better-payment .file.is-bleeding:hover .file-cta {
2200 background-color: #a3f370;
2201 border-color: transparent;
2202 color: rgba(0, 0, 0, 0.7);
2203 }
2204 .better-payment .file.is-bleeding.is-focused .file-cta, .better-payment .file.is-bleeding:focus .file-cta {
2205 border-color: transparent;
2206 box-shadow: 0 0 0.5em rgba(171, 244, 124, 0.25);
2207 color: rgba(0, 0, 0, 0.7);
2208 }
2209 .better-payment .file.is-bleeding.is-active .file-cta, .better-payment .file.is-bleeding:active .file-cta {
2210 background-color: #9cf264;
2211 border-color: transparent;
2212 color: rgba(0, 0, 0, 0.7);
2213 }
2214 .better-payment .file.is-sass .file-cta {
2215 background-color: #bf4080;
2216 border-color: transparent;
2217 color: #fff;
2218 }
2219 .better-payment .file.is-sass.is-hovered .file-cta, .better-payment .file.is-sass:hover .file-cta {
2220 background-color: #b53d7a;
2221 border-color: transparent;
2222 color: #fff;
2223 }
2224 .better-payment .file.is-sass.is-focused .file-cta, .better-payment .file.is-sass:focus .file-cta {
2225 border-color: transparent;
2226 box-shadow: 0 0 0.5em rgba(191, 64, 128, 0.25);
2227 color: #fff;
2228 }
2229 .better-payment .file.is-sass.is-active .file-cta, .better-payment .file.is-sass:active .file-cta {
2230 background-color: #ac3a73;
2231 border-color: transparent;
2232 color: #fff;
2233 }
2234 .better-payment .file.is-amazon .file-cta {
2235 background-color: #ffd863;
2236 border-color: transparent;
2237 color: rgba(0, 0, 0, 0.7);
2238 }
2239 .better-payment .file.is-amazon.is-hovered .file-cta, .better-payment .file.is-amazon:hover .file-cta {
2240 background-color: #ffd556;
2241 border-color: transparent;
2242 color: rgba(0, 0, 0, 0.7);
2243 }
2244 .better-payment .file.is-amazon.is-focused .file-cta, .better-payment .file.is-amazon:focus .file-cta {
2245 border-color: transparent;
2246 box-shadow: 0 0 0.5em rgba(255, 216, 99, 0.25);
2247 color: rgba(0, 0, 0, 0.7);
2248 }
2249 .better-payment .file.is-amazon.is-active .file-cta, .better-payment .file.is-amazon:active .file-cta {
2250 background-color: #ffd24a;
2251 border-color: transparent;
2252 color: rgba(0, 0, 0, 0.7);
2253 }
2254 .better-payment .file.is-sponsor .file-cta {
2255 background-color: #ea4aaa;
2256 border-color: transparent;
2257 color: #fff;
2258 }
2259 .better-payment .file.is-sponsor.is-hovered .file-cta, .better-payment .file.is-sponsor:hover .file-cta {
2260 background-color: #e93fa5;
2261 border-color: transparent;
2262 color: #fff;
2263 }
2264 .better-payment .file.is-sponsor.is-focused .file-cta, .better-payment .file.is-sponsor:focus .file-cta {
2265 border-color: transparent;
2266 box-shadow: 0 0 0.5em rgba(234, 74, 170, 0.25);
2267 color: #fff;
2268 }
2269 .better-payment .file.is-sponsor.is-active .file-cta, .better-payment .file.is-sponsor:active .file-cta {
2270 background-color: #e7339f;
2271 border-color: transparent;
2272 color: #fff;
2273 }
2274 .better-payment .file.is-twitter .file-cta {
2275 background-color: #55acee;
2276 border-color: transparent;
2277 color: #fff;
2278 }
2279 .better-payment .file.is-twitter.is-hovered .file-cta, .better-payment .file.is-twitter:hover .file-cta {
2280 background-color: #49a6ed;
2281 border-color: transparent;
2282 color: #fff;
2283 }
2284 .better-payment .file.is-twitter.is-focused .file-cta, .better-payment .file.is-twitter:focus .file-cta {
2285 border-color: transparent;
2286 box-shadow: 0 0 0.5em rgba(85, 172, 238, 0.25);
2287 color: #fff;
2288 }
2289 .better-payment .file.is-twitter.is-active .file-cta, .better-payment .file.is-twitter:active .file-cta {
2290 background-color: #3ea1ec;
2291 border-color: transparent;
2292 color: #fff;
2293 }
2294 .better-payment .file.is-videos .file-cta {
2295 background-color: #47c68d;
2296 border-color: transparent;
2297 color: #fff;
2298 }
2299 .better-payment .file.is-videos.is-hovered .file-cta, .better-payment .file.is-videos:hover .file-cta {
2300 background-color: #3ec487;
2301 border-color: transparent;
2302 color: #fff;
2303 }
2304 .better-payment .file.is-videos.is-focused .file-cta, .better-payment .file.is-videos:focus .file-cta {
2305 border-color: transparent;
2306 box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25);
2307 color: #fff;
2308 }
2309 .better-payment .file.is-videos.is-active .file-cta, .better-payment .file.is-videos:active .file-cta {
2310 background-color: #3abb81;
2311 border-color: transparent;
2312 color: #fff;
2313 }
2314 .better-payment .file.is-extensions .file-cta {
2315 background-color: #3e8ed0;
2316 border-color: transparent;
2317 color: #fff;
2318 }
2319 .better-payment .file.is-extensions.is-hovered .file-cta, .better-payment .file.is-extensions:hover .file-cta {
2320 background-color: #3488ce;
2321 border-color: transparent;
2322 color: #fff;
2323 }
2324 .better-payment .file.is-extensions.is-focused .file-cta, .better-payment .file.is-extensions:focus .file-cta {
2325 border-color: transparent;
2326 box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25);
2327 color: #fff;
2328 }
2329 .better-payment .file.is-extensions.is-active .file-cta, .better-payment .file.is-extensions:active .file-cta {
2330 background-color: #3082c5;
2331 border-color: transparent;
2332 color: #fff;
2333 }
2334 .better-payment .file.is-bootstrap .file-cta {
2335 background-color: #6f5499;
2336 border-color: transparent;
2337 color: #fff;
2338 }
2339 .better-payment .file.is-bootstrap.is-hovered .file-cta, .better-payment .file.is-bootstrap:hover .file-cta {
2340 background-color: #694f91;
2341 border-color: transparent;
2342 color: #fff;
2343 }
2344 .better-payment .file.is-bootstrap.is-focused .file-cta, .better-payment .file.is-bootstrap:focus .file-cta {
2345 border-color: transparent;
2346 box-shadow: 0 0 0.5em rgba(111, 84, 153, 0.25);
2347 color: #fff;
2348 }
2349 .better-payment .file.is-bootstrap.is-active .file-cta, .better-payment .file.is-bootstrap:active .file-cta {
2350 background-color: #634b89;
2351 border-color: transparent;
2352 color: #fff;
2353 }
2354 .better-payment .file.is-small {
2355 font-size: 0.75rem;
2356 }
2357 .better-payment .file.is-normal {
2358 font-size: 1rem;
2359 }
2360 .better-payment .file.is-medium {
2361 font-size: 1.25rem;
2362 }
2363 .better-payment .file.is-medium .file-icon .fa {
2364 font-size: 21px;
2365 }
2366 .better-payment .file.is-large {
2367 font-size: 1.5rem;
2368 }
2369 .better-payment .file.is-large .file-icon .fa {
2370 font-size: 28px;
2371 }
2372 .better-payment .file.has-name .file-cta {
2373 border-bottom-right-radius: 0;
2374 border-top-right-radius: 0;
2375 }
2376 .better-payment .file.has-name .file-name {
2377 border-bottom-left-radius: 0;
2378 border-top-left-radius: 0;
2379 }
2380 .better-payment .file.has-name.is-empty .file-cta {
2381 border-radius: 0.375em;
2382 }
2383 .better-payment .file.has-name.is-empty .file-name {
2384 display: none;
2385 }
2386 .better-payment .file.is-boxed .file-label {
2387 flex-direction: column;
2388 }
2389 .better-payment .file.is-boxed .file-cta {
2390 flex-direction: column;
2391 height: auto;
2392 padding: 1em 3em;
2393 }
2394 .better-payment .file.is-boxed .file-name {
2395 border-width: 0 1px 1px;
2396 }
2397 .better-payment .file.is-boxed .file-icon {
2398 height: 1.5em;
2399 width: 1.5em;
2400 }
2401 .better-payment .file.is-boxed .file-icon .fa {
2402 font-size: 21px;
2403 }
2404 .better-payment .file.is-boxed.is-small .file-icon .fa {
2405 font-size: 14px;
2406 }
2407 .better-payment .file.is-boxed.is-medium .file-icon .fa {
2408 font-size: 28px;
2409 }
2410 .better-payment .file.is-boxed.is-large .file-icon .fa {
2411 font-size: 35px;
2412 }
2413 .better-payment .file.is-boxed.has-name .file-cta {
2414 border-radius: 0.375em 0.375em 0 0;
2415 }
2416 .better-payment .file.is-boxed.has-name .file-name {
2417 border-radius: 0 0 0.375em 0.375em;
2418 border-width: 0 1px 1px;
2419 }
2420 .better-payment .file.is-centered {
2421 justify-content: center;
2422 }
2423 .better-payment .file.is-fullwidth .file-label {
2424 width: 100%;
2425 }
2426 .better-payment .file.is-fullwidth .file-name {
2427 flex-grow: 1;
2428 max-width: none;
2429 }
2430 .better-payment .file.is-right {
2431 justify-content: flex-end;
2432 }
2433 .better-payment .file.is-right .file-cta {
2434 border-radius: 0 0.375em 0.375em 0;
2435 }
2436 .better-payment .file.is-right .file-name {
2437 border-radius: 0.375em 0 0 0.375em;
2438 border-width: 1px 0 1px 1px;
2439 order: -1;
2440 }
2441 .better-payment .file-label {
2442 align-items: stretch;
2443 display: flex;
2444 cursor: pointer;
2445 justify-content: flex-start;
2446 overflow: hidden;
2447 position: relative;
2448 }
2449 .better-payment .file-label:hover .file-cta {
2450 background-color: #eee;
2451 color: #353535;
2452 }
2453 .better-payment .file-label:hover .file-name {
2454 border-color: #d5d5d5;
2455 }
2456 .better-payment .file-label:active .file-cta {
2457 background-color: #e8e8e8;
2458 color: #353535;
2459 }
2460 .better-payment .file-label:active .file-name {
2461 border-color: #cfcfcf;
2462 }
2463 .better-payment .file-input {
2464 height: 100%;
2465 left: 0;
2466 opacity: 0;
2467 outline: 0;
2468 position: absolute;
2469 top: 0;
2470 width: 100%;
2471 }
2472 .better-payment .file-cta, .better-payment .file-name {
2473 border-color: #dbdbdb;
2474 border-radius: 0.375em;
2475 font-size: 1em;
2476 padding-left: 1em;
2477 padding-right: 1em;
2478 white-space: nowrap;
2479 }
2480 .better-payment .file-cta {
2481 background-color: #f4f4f4;
2482 color: #494949;
2483 }
2484 .better-payment .file-name {
2485 border-color: #dbdbdb;
2486 border-style: solid;
2487 border-width: 1px 1px 1px 0;
2488 display: block;
2489 max-width: 16em;
2490 overflow: hidden;
2491 text-align: inherit;
2492 text-overflow: ellipsis;
2493 }
2494 .better-payment .file-icon {
2495 align-items: center;
2496 display: flex;
2497 height: 1em;
2498 justify-content: center;
2499 margin-right: 0.5em;
2500 width: 1em;
2501 }
2502 .better-payment .file-icon .fa {
2503 font-size: 14px;
2504 }
2505 .better-payment .is-flex {
2506 display: flex !important;
2507 }
2508 .better-payment .is-flex-direction-row {
2509 flex-direction: row !important;
2510 }
2511 .better-payment .is-flex-direction-row-reverse {
2512 flex-direction: row-reverse !important;
2513 }
2514 .better-payment .is-flex-direction-column {
2515 flex-direction: column !important;
2516 }
2517 .better-payment .is-flex-direction-column-reverse {
2518 flex-direction: column-reverse !important;
2519 }
2520 .better-payment .is-flex-wrap-nowrap {
2521 flex-wrap: nowrap !important;
2522 }
2523 .better-payment .is-flex-wrap-wrap {
2524 flex-wrap: wrap !important;
2525 }
2526 .better-payment .is-flex-wrap-wrap-reverse {
2527 flex-wrap: wrap-reverse !important;
2528 }
2529 .better-payment .is-justify-content-flex-start {
2530 justify-content: flex-start !important;
2531 }
2532 .better-payment .is-justify-content-flex-end {
2533 justify-content: flex-end !important;
2534 }
2535 .better-payment .is-justify-content-center {
2536 justify-content: center !important;
2537 }
2538 .better-payment .is-justify-content-space-between {
2539 justify-content: space-between !important;
2540 }
2541 .better-payment .is-justify-content-space-around {
2542 justify-content: space-around !important;
2543 }
2544 .better-payment .is-justify-content-space-evenly {
2545 justify-content: space-evenly !important;
2546 }
2547 .better-payment .is-justify-content-start {
2548 justify-content: start !important;
2549 }
2550 .better-payment .is-justify-content-end {
2551 justify-content: end !important;
2552 }
2553 .better-payment .is-justify-content-left {
2554 justify-content: left !important;
2555 }
2556 .better-payment .is-justify-content-right {
2557 justify-content: right !important;
2558 }
2559 .better-payment .is-align-content-flex-start {
2560 align-content: flex-start !important;
2561 }
2562 .better-payment .is-align-content-flex-end {
2563 align-content: flex-end !important;
2564 }
2565 .better-payment .is-align-content-center {
2566 align-content: center !important;
2567 }
2568 .better-payment .is-align-content-space-between {
2569 align-content: space-between !important;
2570 }
2571 .better-payment .is-align-content-space-around {
2572 align-content: space-around !important;
2573 }
2574 .better-payment .is-align-content-space-evenly {
2575 align-content: space-evenly !important;
2576 }
2577 .better-payment .is-align-content-stretch {
2578 align-content: stretch !important;
2579 }
2580 .better-payment .is-align-content-start {
2581 align-content: start !important;
2582 }
2583 .better-payment .is-align-content-end {
2584 align-content: end !important;
2585 }
2586 .better-payment .is-align-content-baseline {
2587 align-content: baseline !important;
2588 }
2589 .better-payment .is-align-items-stretch {
2590 align-items: stretch !important;
2591 }
2592 .better-payment .is-align-items-flex-start {
2593 align-items: flex-start !important;
2594 }
2595 .better-payment .is-align-items-flex-end {
2596 align-items: flex-end !important;
2597 }
2598 .better-payment .is-align-items-center {
2599 align-items: center !important;
2600 }
2601 .better-payment .is-align-items-baseline {
2602 align-items: baseline !important;
2603 }
2604 .better-payment .is-align-items-start {
2605 align-items: start !important;
2606 }
2607 .better-payment .is-align-items-end {
2608 align-items: end !important;
2609 }
2610 .better-payment .is-align-items-self-start {
2611 align-items: self-start !important;
2612 }
2613 .better-payment .is-align-items-self-end {
2614 align-items: self-end !important;
2615 }
2616 .better-payment .is-align-self-auto {
2617 align-self: auto !important;
2618 }
2619 .better-payment .is-align-self-flex-start {
2620 align-self: flex-start !important;
2621 }
2622 .better-payment .is-align-self-flex-end {
2623 align-self: flex-end !important;
2624 }
2625 .better-payment .is-align-self-center {
2626 align-self: center !important;
2627 }
2628 .better-payment .is-align-self-baseline {
2629 align-self: baseline !important;
2630 }
2631 .better-payment .is-align-self-stretch {
2632 align-self: stretch !important;
2633 }
2634 .better-payment .is-flex-grow-0 {
2635 flex-grow: 0 !important;
2636 }
2637 .better-payment .is-flex-grow-1 {
2638 flex-grow: 1 !important;
2639 }
2640 .better-payment .is-flex-grow-2 {
2641 flex-grow: 2 !important;
2642 }
2643 .better-payment .is-flex-grow-3 {
2644 flex-grow: 3 !important;
2645 }
2646 .better-payment .is-flex-grow-4 {
2647 flex-grow: 4 !important;
2648 }
2649 .better-payment .is-flex-grow-5 {
2650 flex-grow: 5 !important;
2651 }
2652 .better-payment .is-flex-shrink-0 {
2653 flex-shrink: 0 !important;
2654 }
2655 .better-payment .is-flex-shrink-1 {
2656 flex-shrink: 1 !important;
2657 }
2658 .better-payment .is-flex-shrink-2 {
2659 flex-shrink: 2 !important;
2660 }
2661 .better-payment .is-flex-shrink-3 {
2662 flex-shrink: 3 !important;
2663 }
2664 .better-payment .is-flex-shrink-4 {
2665 flex-shrink: 4 !important;
2666 }
2667 .better-payment .is-flex-shrink-5 {
2668 flex-shrink: 5 !important;
2669 }
2670 .better-payment .is-clearfix::after {
2671 clear: both;
2672 content: " ";
2673 display: table;
2674 }
2675 .better-payment .is-pulled-left {
2676 float: left !important;
2677 }
2678 .better-payment .is-pulled-right {
2679 float: right !important;
2680 }
2681 .better-payment .is-radiusless {
2682 border-radius: 0 !important;
2683 }
2684 .better-payment .is-shadowless {
2685 box-shadow: none !important;
2686 }
2687 .better-payment .is-clickable {
2688 cursor: pointer !important;
2689 pointer-events: all !important;
2690 }
2691 .better-payment .is-clipped {
2692 overflow: hidden !important;
2693 }
2694 .better-payment .is-relative {
2695 position: relative !important;
2696 }
2697 .better-payment .file.no-file-name .file-cta {
2698 border-radius: 0.375em;
2699 }
2700 .better-payment .button.is-success {
2701 background-color: #47c68d;
2702 border-color: transparent;
2703 color: #fff;
2704 }
2705 @media screen and (max-width: 768px) {
2706 .better-payment .is-flex-mobile {
2707 display: flex !important;
2708 }
2709 }
2710 @media screen and (min-width: 769px), print {
2711 .better-payment .is-flex-tablet {
2712 display: flex !important;
2713 }
2714 }
2715 @media screen and (min-width: 769px) and (max-width: 1023px) {
2716 .better-payment .is-flex-tablet-only {
2717 display: flex !important;
2718 }
2719 }
2720 @media screen and (max-width: 1023px) {
2721 .better-payment .is-flex-touch {
2722 display: flex !important;
2723 }
2724 }
2725 @media screen and (min-width: 1024px) {
2726 .better-payment .is-flex-desktop {
2727 display: flex !important;
2728 }
2729 }
2730 @media screen and (min-width: 1024px) and (max-width: 1215px) {
2731 .better-payment .is-flex-desktop-only {
2732 display: flex !important;
2733 }
2734 }
2735 @media screen and (min-width: 1216px) {
2736 .better-payment .is-flex-widescreen {
2737 display: flex !important;
2738 }
2739 }
2740 @media screen and (min-width: 1216px) and (max-width: 1407px) {
2741 .better-payment .is-flex-widescreen-only {
2742 display: flex !important;
2743 }
2744 }
2745 @media screen and (min-width: 1408px) {
2746 .better-payment .is-flex-fullhd {
2747 display: flex !important;
2748 }
2749 }
2750