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

3,744 lines 84.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!****************************************************************************************************************************************************************************************************************!*\
2 !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[3]!./src/css/common.scss ***!
3 \****************************************************************************************************************************************************************************************************************/
4 .better-payment .width-100 {
5 display: inline-block;
6 width: 100%;
7 max-height: 465px;
8 min-height: 465px;
9 overflow: hidden;
10 border-radius: 16px;
11 }
12 .better-payment .width-100.height-auto {
13 min-height: auto;
14 }
15 .better-payment .width-100 img {
16 object-fit: cover;
17 height: 100%;
18 }
19 .better-payment .payment-form-layout-1 .field-payment_method .bp-radio-box,
20 .better-payment .payment-form-layout-1 .field-payment_method .bp-radio-box label,
21 .better-payment .payment-form-layout-2 .field-payment_method .bp-radio-box,
22 .better-payment .payment-form-layout-2 .field-payment_method .bp-radio-box label {
23 display: flex;
24 align-items: center;
25 }
26 .better-payment .payment-form-layout-1 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box,
27 .better-payment .payment-form-layout-2 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box {
28 display: flex;
29 justify-content: space-between;
30 align-items: center;
31 }
32 .better-payment .bp-three-items-enabled.pr-6 {
33 padding-right: unset !important;
34 }
35
36 .better-payment .bp-radio-box input[type=radio]:checked {
37 border: 2px solid #006aff;
38 }
39
40 .better-payment .bp-radio-box input[type=radio] {
41 width: 20px;
42 height: 20px;
43 outline: 0;
44 border-radius: 50%;
45 position: relative;
46 border: 2px solid #cbc9da;
47 background: #fff;
48 margin-bottom: -3px;
49 margin-right: 10px;
50 }
51
52 .better-payment .bp-radio-box input[type=radio]:after {
53 content: "";
54 opacity: 0;
55 display: block;
56 left: 4px;
57 top: 4px;
58 position: absolute;
59 width: 8px;
60 height: 8px;
61 border-radius: 50%;
62 background: #006aff;
63 }
64
65 .better-payment .form-content-section-fields .payment-method-checkbox input[type=radio]:after {
66 width: 12px;
67 height: 12px;
68 }
69
70 .better-payment .bp-radio-box input[type=radio]:checked:after {
71 opacity: 1;
72 }
73
74 .better-payment .control {
75 box-sizing: border-box;
76 clear: both;
77 font-size: 1rem;
78 position: relative;
79 text-align: inherit;
80 }
81
82 .better-payment .control.has-icons-right .input,
83 .better-payment .control.has-icons-right .select select {
84 padding-right: 2.5em;
85 }
86
87 .better-payment .control.has-icons-left .input,
88 .better-payment .control.has-icons-left .select select {
89 padding-left: 2.5em;
90 }
91
92 .better-payment .is-large.input,
93 .better-payment .is-large.textarea {
94 font-size: 1.5rem;
95 }
96
97 .better-payment .control.has-icons-left .input.is-large ~ .icon,
98 .better-payment .control.has-icons-left .select.is-large ~ .icon,
99 .better-payment .control.has-icons-right .input.is-large ~ .icon,
100 .better-payment .control.has-icons-right .select.is-large ~ .icon {
101 font-size: 1.5rem;
102 }
103
104 .better-payment .control.has-icons-left .icon.is-left {
105 left: 0;
106 }
107
108 .better-payment .control.has-icons-left .icon,
109 .better-payment .control.has-icons-right .icon {
110 color: #dbdbdb;
111 height: 2.5em;
112 pointer-events: none;
113 position: absolute;
114 top: 0;
115 width: 2.5em;
116 z-index: 4;
117 }
118
119 .better-payment .icon.is-medium {
120 height: 2rem;
121 width: 2rem;
122 }
123
124 .better-payment .icon {
125 align-items: center;
126 display: inline-flex;
127 justify-content: center;
128 height: 1.5rem;
129 width: 1.5rem;
130 }
131
132 .better-payment .control.has-icons-right .icon.is-right {
133 right: 0;
134 }
135
136 .better-payment .control.has-icons-left .icon,
137 .better-payment .control.has-icons-right .icon {
138 color: #dbdbdb;
139 height: 2.5em;
140 pointer-events: none;
141 position: absolute;
142 top: 0;
143 width: 2.5em;
144 z-index: 4;
145 }
146
147 .better-payment .input:active,
148 .better-payment .input:focus,
149 .better-payment .is-active.input,
150 .better-payment .is-active.textarea,
151 .better-payment .is-focused.input,
152 .better-payment .is-focused.textarea,
153 .better-payment .select select.is-active,
154 .better-payment .select select.is-focused,
155 .better-payment .select select:active,
156 .better-payment .select select:focus,
157 .better-payment .textarea:active,
158 .better-payment .textarea:focus {
159 border-color: #485fc7;
160 box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
161 }
162
163 .better-payment .input:hover,
164 .better-payment .is-hovered.input,
165 .better-payment .is-hovered.textarea,
166 .better-payment .select select.is-hovered,
167 .better-payment .select select:hover,
168 .better-payment .textarea:hover {
169 border-color: #b5b5b5;
170 }
171
172 .better-payment .input,
173 .better-payment .textarea {
174 box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
175 max-width: 100%;
176 width: 100%;
177 }
178
179 .better-payment .is-medium.input,
180 .better-payment .is-medium.textarea {
181 font-size: 1.25rem;
182 }
183
184 .better-payment .control.has-icons-left .input.is-medium ~ .icon,
185 .better-payment .control.has-icons-left .select.is-medium ~ .icon,
186 .better-payment .control.has-icons-right .input.is-medium ~ .icon,
187 .better-payment .control.has-icons-right .select.is-medium ~ .icon {
188 font-size: 1.25rem;
189 }
190
191 /* FontAwesome icon styling to match BP custom icons */
192 .better-payment .control.has-icons-left .icon svg,
193 .better-payment .control.has-icons-right .icon svg {
194 width: 20px;
195 }
196
197 .better-payment .control.has-icons-left .icon svg path,
198 .better-payment .control.has-icons-right .icon svg path {
199 fill: #b0b7d6;
200 stroke: #b0b7d6;
201 }
202
203 /* Helper Classes */
204 .better-payment .columns.is-mobile {
205 display: flex;
206 }
207
208 .better-payment .columns:not(:last-child) {
209 margin-bottom: 0.75rem;
210 }
211
212 .better-payment .columns {
213 margin-left: -0.75rem;
214 margin-right: -0.75rem;
215 margin-top: -0.75rem;
216 }
217
218 .better-payment .column {
219 display: block;
220 flex-basis: 0;
221 flex-grow: 1;
222 flex-shrink: 1;
223 padding: 0.75rem;
224 }
225
226 .better-payment .is-size-1 {
227 font-size: 3rem !important;
228 }
229
230 .better-payment .is-size-1-fix {
231 font-size: 3rem;
232 }
233
234 .better-payment .is-size-2 {
235 font-size: 2.5rem !important;
236 }
237
238 .better-payment .is-size-2-fix {
239 font-size: 2.5rem;
240 }
241
242 .better-payment .is-size-3 {
243 font-size: 2rem !important;
244 }
245
246 .better-payment .is-size-3-fix {
247 font-size: 2rem;
248 }
249
250 .better-payment .is-size-4 {
251 font-size: 1.5rem !important;
252 }
253
254 .better-payment .is-size-4-fix {
255 font-size: 1.5rem;
256 }
257
258 .better-payment .is-size-5 {
259 font-size: 1.25rem !important;
260 }
261
262 .better-payment .is-size-5-fix {
263 font-size: 1.25rem;
264 }
265
266 .better-payment .is-size-6 {
267 font-size: 1rem !important;
268 }
269
270 .better-payment .is-size-6-fix {
271 font-size: 1rem;
272 }
273
274 .better-payment .is-size-7 {
275 font-size: 0.75rem !important;
276 }
277
278 .better-payment .is-size-7-fix {
279 font-size: 0.75rem;
280 }
281
282 .better-payment .has-text-white {
283 color: #fff !important;
284 }
285
286 .better-payment .has-text-white-fix {
287 color: #fff;
288 }
289
290 .better-payment .has-text-black {
291 color: #000 !important;
292 }
293
294 .better-payment .has-text-black-fix {
295 color: #000;
296 }
297
298 .better-payment .has-text-light {
299 color: #f5f5f5 !important;
300 }
301
302 .better-payment .has-text-light-fix {
303 color: #f5f5f5;
304 }
305
306 .better-payment .has-text-dark {
307 color: #363636 !important;
308 }
309
310 .better-payment .has-text-dark-fix {
311 color: #363636;
312 }
313
314 .better-payment .has-text-primary {
315 color: #00d1b2 !important;
316 }
317
318 .better-payment .has-text-primary-fix {
319 color: #00d1b2;
320 }
321
322 .better-payment .has-text-link {
323 color: #485fc7 !important;
324 }
325
326 .better-payment .has-text-link-fix {
327 color: #485fc7;
328 }
329
330 .better-payment .has-text-info {
331 color: #3e8ed0 !important;
332 }
333
334 .better-payment .has-text-info-fix {
335 color: #3e8ed0;
336 }
337
338 .better-payment .has-text-success {
339 color: #48c78e !important;
340 }
341
342 .better-payment .has-text-success-fix {
343 color: #48c78e;
344 }
345
346 .better-payment .has-text-warning {
347 color: #ffe08a !important;
348 }
349
350 .better-payment .has-text-warning-fix {
351 color: #ffe08a;
352 }
353
354 .better-payment .has-text-danger {
355 color: #f14668 !important;
356 }
357
358 .better-payment .has-text-danger-fix {
359 color: #f14668;
360 }
361
362 .better-payment .m-0 {
363 margin: 0 !important;
364 }
365
366 .better-payment .mt-0 {
367 margin-top: 0 !important;
368 }
369
370 .better-payment .mr-0 {
371 margin-right: 0 !important;
372 }
373
374 .better-payment .mb-0 {
375 margin-bottom: 0 !important;
376 }
377
378 .better-payment .ml-0 {
379 margin-left: 0 !important;
380 }
381
382 .better-payment .mx-0 {
383 margin-left: 0 !important;
384 margin-right: 0 !important;
385 }
386
387 .better-payment .my-0 {
388 margin-top: 0 !important;
389 margin-bottom: 0 !important;
390 }
391
392 .better-payment .m-1 {
393 margin: 0.25rem !important;
394 }
395
396 .better-payment .mt-1 {
397 margin-top: 0.25rem !important;
398 }
399
400 .better-payment .mr-1 {
401 margin-right: 0.25rem !important;
402 }
403
404 .better-payment .mb-1 {
405 margin-bottom: 0.25rem !important;
406 }
407
408 .better-payment .ml-1 {
409 margin-left: 0.25rem !important;
410 }
411
412 .better-payment .mx-1 {
413 margin-left: 0.25rem !important;
414 margin-right: 0.25rem !important;
415 }
416
417 .better-payment .my-1 {
418 margin-top: 0.25rem !important;
419 margin-bottom: 0.25rem !important;
420 }
421
422 .better-payment .m-2 {
423 margin: 0.5rem !important;
424 }
425
426 .better-payment .mt-2 {
427 margin-top: 0.5rem !important;
428 }
429
430 .better-payment .mr-2 {
431 margin-right: 0.5rem !important;
432 }
433
434 .better-payment .mb-2 {
435 margin-bottom: 0.5rem !important;
436 }
437
438 .better-payment .ml-2 {
439 margin-left: 0.5rem !important;
440 }
441
442 .better-payment .mx-2 {
443 margin-left: 0.5rem !important;
444 margin-right: 0.5rem !important;
445 }
446
447 .better-payment .my-2 {
448 margin-top: 0.5rem !important;
449 margin-bottom: 0.5rem !important;
450 }
451
452 .better-payment .m-3 {
453 margin: 0.75rem !important;
454 }
455
456 .better-payment .mt-3 {
457 margin-top: 0.75rem !important;
458 }
459
460 .better-payment .mr-3 {
461 margin-right: 0.75rem !important;
462 }
463
464 .better-payment .mb-3 {
465 margin-bottom: 0.75rem !important;
466 }
467
468 .better-payment .ml-3 {
469 margin-left: 0.75rem !important;
470 }
471
472 .better-payment .mx-3 {
473 margin-left: 0.75rem !important;
474 margin-right: 0.75rem !important;
475 }
476
477 .better-payment .my-3 {
478 margin-top: 0.75rem !important;
479 margin-bottom: 0.75rem !important;
480 }
481
482 .better-payment .m-4 {
483 margin: 1rem !important;
484 }
485
486 .better-payment .mt-4 {
487 margin-top: 1rem !important;
488 }
489
490 .better-payment .mr-4 {
491 margin-right: 1rem !important;
492 }
493
494 .better-payment .mb-4 {
495 margin-bottom: 1rem !important;
496 }
497
498 .better-payment .ml-4 {
499 margin-left: 1rem !important;
500 }
501
502 .better-payment .mx-4 {
503 margin-left: 1rem !important;
504 margin-right: 1rem !important;
505 }
506
507 .better-payment .my-4 {
508 margin-top: 1rem !important;
509 margin-bottom: 1rem !important;
510 }
511
512 .better-payment .m-5 {
513 margin: 1.5rem !important;
514 }
515
516 .better-payment .mt-5 {
517 margin-top: 1.5rem !important;
518 }
519
520 .better-payment .mr-5 {
521 margin-right: 1.5rem !important;
522 }
523
524 .better-payment .mb-5 {
525 margin-bottom: 1.5rem !important;
526 }
527
528 .better-payment .ml-5 {
529 margin-left: 1.5rem !important;
530 }
531
532 .better-payment .mx-5 {
533 margin-left: 1.5rem !important;
534 margin-right: 1.5rem !important;
535 }
536
537 .better-payment .my-5 {
538 margin-top: 1.5rem !important;
539 margin-bottom: 1.5rem !important;
540 }
541
542 .better-payment .m-6 {
543 margin: 3rem !important;
544 }
545
546 .better-payment .mt-6 {
547 margin-top: 3rem !important;
548 }
549
550 .better-payment .mr-6 {
551 margin-right: 3rem !important;
552 }
553
554 .better-payment .mb-6 {
555 margin-bottom: 3rem !important;
556 }
557
558 .better-payment .ml-6 {
559 margin-left: 3rem !important;
560 }
561
562 .better-payment .mx-6 {
563 margin-left: 3rem !important;
564 margin-right: 3rem !important;
565 }
566
567 .better-payment .my-6 {
568 margin-top: 3rem !important;
569 margin-bottom: 3rem !important;
570 }
571
572 .better-payment .p-0 {
573 padding: 0 !important;
574 }
575
576 .better-payment .pt-0 {
577 padding-top: 0 !important;
578 }
579
580 .better-payment .pr-0 {
581 padding-right: 0 !important;
582 }
583
584 .better-payment .pb-0 {
585 padding-bottom: 0 !important;
586 }
587
588 .better-payment .pl-0 {
589 padding-left: 0 !important;
590 }
591
592 .better-payment .px-0 {
593 padding-left: 0 !important;
594 padding-right: 0 !important;
595 }
596
597 .better-payment .py-0 {
598 padding-top: 0 !important;
599 padding-bottom: 0 !important;
600 }
601
602 .better-payment .p-1 {
603 padding: 0.25rem !important;
604 }
605
606 .better-payment .pt-1 {
607 padding-top: 0.25rem !important;
608 }
609
610 .better-payment .pr-1 {
611 padding-right: 0.25rem !important;
612 }
613
614 .better-payment .pb-1 {
615 padding-bottom: 0.25rem !important;
616 }
617
618 .better-payment .pl-1 {
619 padding-left: 0.25rem !important;
620 }
621
622 .better-payment .px-1 {
623 padding-left: 0.25rem !important;
624 padding-right: 0.25rem !important;
625 }
626
627 .better-payment .py-1 {
628 padding-top: 0.25rem !important;
629 padding-bottom: 0.25rem !important;
630 }
631
632 .better-payment .p-2 {
633 padding: 0.5rem !important;
634 }
635
636 .better-payment .pt-2 {
637 padding-top: 0.5rem !important;
638 }
639
640 .better-payment .pr-2 {
641 padding-right: 0.5rem !important;
642 }
643
644 .better-payment .pb-2 {
645 padding-bottom: 0.5rem !important;
646 }
647
648 .better-payment .pl-2 {
649 padding-left: 0.5rem !important;
650 }
651
652 .better-payment .px-2 {
653 padding-left: 0.5rem !important;
654 padding-right: 0.5rem !important;
655 }
656
657 .better-payment .py-2 {
658 padding-top: 0.5rem !important;
659 padding-bottom: 0.5rem !important;
660 }
661
662 .better-payment .p-3 {
663 padding: 0.75rem !important;
664 }
665
666 .better-payment .pt-3 {
667 padding-top: 0.75rem !important;
668 }
669
670 .better-payment .pr-3 {
671 padding-right: 0.75rem !important;
672 }
673
674 .better-payment .pb-3 {
675 padding-bottom: 0.75rem !important;
676 }
677
678 .better-payment .pl-3 {
679 padding-left: 0.75rem !important;
680 }
681
682 .better-payment .px-3 {
683 padding-left: 0.75rem !important;
684 padding-right: 0.75rem !important;
685 }
686
687 .better-payment .py-3 {
688 padding-top: 0.75rem !important;
689 padding-bottom: 0.75rem !important;
690 }
691
692 .better-payment .p-4 {
693 padding: 1rem !important;
694 }
695
696 .better-payment .pt-4 {
697 padding-top: 1rem !important;
698 }
699
700 .better-payment .pr-4 {
701 padding-right: 1rem !important;
702 }
703
704 .better-payment .pb-4 {
705 padding-bottom: 1rem !important;
706 }
707
708 .better-payment .pl-4 {
709 padding-left: 1rem !important;
710 }
711
712 .better-payment .px-4 {
713 padding-left: 1rem !important;
714 padding-right: 1rem !important;
715 }
716
717 .better-payment .py-4 {
718 padding-top: 1rem !important;
719 padding-bottom: 1rem !important;
720 }
721
722 .better-payment .p-5 {
723 padding: 1.5rem !important;
724 }
725
726 .better-payment .pt-5 {
727 padding-top: 1.5rem !important;
728 }
729
730 .better-payment .pr-5 {
731 padding-right: 1.5rem !important;
732 }
733
734 .better-payment .pb-5 {
735 padding-bottom: 1.5rem !important;
736 }
737
738 .better-payment .pl-5 {
739 padding-left: 1.5rem !important;
740 }
741
742 .better-payment .px-5 {
743 padding-left: 1.5rem !important;
744 padding-right: 1.5rem !important;
745 }
746
747 .better-payment .py-5 {
748 padding-top: 1.5rem !important;
749 padding-bottom: 1.5rem !important;
750 }
751
752 .better-payment .p-6 {
753 padding: 3rem !important;
754 }
755
756 .better-payment .pt-6 {
757 padding-top: 3rem !important;
758 }
759
760 .better-payment .pr-6 {
761 padding-right: 3rem !important;
762 }
763
764 .better-payment .pb-6 {
765 padding-bottom: 3rem !important;
766 }
767
768 .better-payment .pl-6 {
769 padding-left: 3rem !important;
770 }
771
772 .better-payment .px-6 {
773 padding-left: 3rem !important;
774 padding-right: 3rem !important;
775 }
776
777 .better-payment .py-6 {
778 padding-top: 3rem !important;
779 padding-bottom: 3rem !important;
780 }
781
782 .better-payment .columns.is-gapless:not(:last-child) {
783 margin-bottom: 1.5rem;
784 }
785
786 .better-payment .columns.is-gapless {
787 margin-left: 0;
788 margin-right: 0;
789 margin-top: 0;
790 }
791
792 .better-payment .tile.is-ancestor:not(:last-child) {
793 margin-bottom: 0.75rem;
794 }
795
796 .better-payment .tile.is-ancestor {
797 margin-left: -0.75rem;
798 margin-right: -0.75rem;
799 margin-top: -0.75rem;
800 }
801
802 .better-payment .tile {
803 align-items: stretch;
804 display: block;
805 flex-basis: 0;
806 flex-grow: 1;
807 flex-shrink: 1;
808 min-height: -webkit-min-content;
809 min-height: -moz-min-content;
810 min-height: min-content;
811 }
812
813 .better-payment .tile.is-vertical > .tile.is-child:not(:last-child) {
814 margin-bottom: 1.5rem !important;
815 }
816
817 .better-payment .tile.is-child {
818 margin: 0 !important;
819 }
820
821 .better-payment .notification.is-primary {
822 background-color: #00d1b2;
823 color: #fff;
824 }
825
826 .better-payment .notification.is-warning {
827 background-color: #ffe08a;
828 color: rgba(0, 0, 0, 0.7);
829 }
830
831 .better-payment .notification.is-info {
832 background-color: #3e8ed0;
833 color: #fff;
834 }
835
836 .better-payment .has-background-white {
837 background-color: #ffffff !important;
838 }
839
840 .better-payment .has-background-white-fix {
841 background-color: #ffffff;
842 }
843
844 .better-payment .has-background-black {
845 background-color: #0a0a0a !important;
846 }
847
848 .better-payment .has-background-black-fix {
849 background-color: #0a0a0a;
850 }
851
852 .better-payment .has-background-light {
853 background-color: #f5f5f5 !important;
854 }
855
856 .better-payment .has-background-light-fix {
857 background-color: #f5f5f5;
858 }
859
860 .better-payment .has-background-dark {
861 background-color: #363636 !important;
862 }
863
864 .better-payment .has-background-dark-fix {
865 background-color: #363636;
866 }
867
868 .better-payment .has-background-primary {
869 background-color: #00d1b2 !important;
870 }
871
872 .better-payment .has-background-primary-fix {
873 background-color: #00d1b2;
874 }
875
876 .better-payment .has-background-link {
877 background-color: #485fc7 !important;
878 }
879
880 .better-payment .has-background-link-fix {
881 background-color: #485fc7;
882 }
883
884 .better-payment .has-background-info {
885 background-color: #3e8ed0 !important;
886 }
887
888 .better-payment .has-background-info-fix {
889 background-color: #3e8ed0;
890 }
891
892 .better-payment .has-background-success {
893 background-color: #48c78e !important;
894 }
895
896 .better-payment .has-background-success-fix {
897 background-color: #48c78e;
898 }
899
900 .better-payment .has-background-warning {
901 background-color: #ffe08a !important;
902 }
903
904 .better-payment .has-background-warning-fix {
905 background-color: #ffe08a;
906 }
907
908 .better-payment .has-background-danger {
909 background-color: #f14668 !important;
910 }
911
912 .better-payment .has-background-danger-fix {
913 background-color: #f14668;
914 }
915
916 .better-payment .has-text-centered {
917 text-align: center !important;
918 }
919
920 .better-payment .has-text-justified {
921 text-align: justify !important;
922 }
923
924 .better-payment .has-text-left {
925 text-align: left !important;
926 }
927
928 .better-payment .has-text-right {
929 text-align: right !important;
930 }
931
932 .better-payment .has-text-weight-light {
933 font-weight: 300 !important;
934 }
935
936 .better-payment .has-text-weight-normal {
937 font-weight: 400 !important;
938 }
939
940 .better-payment .has-text-weight-medium {
941 font-weight: 500 !important;
942 }
943
944 .better-payment .has-text-weight-semibold {
945 font-weight: 600 !important;
946 }
947
948 .better-payment .has-text-weight-bold {
949 font-weight: 700 !important;
950 }
951
952 .better-payment .bulma-control-extend,
953 .better-payment .file-cta,
954 .better-payment .file-name,
955 .better-payment .input,
956 .better-payment .pagination-ellipsis,
957 .better-payment .pagination-link,
958 .better-payment .pagination-next,
959 .better-payment .pagination-previous,
960 .better-payment .select select,
961 .better-payment .textarea {
962 -moz-appearance: none;
963 -webkit-appearance: none;
964 align-items: center;
965 border: 1px solid transparent;
966 border-radius: 0.375em;
967 box-shadow: none;
968 display: inline-flex;
969 font-size: 1rem;
970 height: 2.5em;
971 justify-content: flex-start;
972 line-height: 1.5;
973 padding-bottom: calc(0.5em - 1px);
974 padding-left: calc(0.75em - 1px);
975 padding-right: calc(0.75em - 1px);
976 padding-top: calc(0.5em - 1px);
977 position: relative;
978 vertical-align: top;
979 }
980
981 .better-payment .input,
982 .better-payment .select select,
983 .better-payment .textarea {
984 background-color: #fff;
985 border-color: #dbdbdb;
986 border-radius: 0.375em;
987 color: #363636;
988 }
989
990 .better-payment .bulma-control-extend:active,
991 .better-payment .bulma-control-extend:focus,
992 .better-payment .file-cta:active,
993 .better-payment .file-cta:focus,
994 .better-payment .file-name:active,
995 .better-payment .file-name:focus,
996 .better-payment .input:active,
997 .better-payment .input:focus,
998 .better-payment .is-active.bulma-control-extend,
999 .better-payment .is-active.file-cta,
1000 .better-payment .is-active.file-name,
1001 .better-payment .is-active.input,
1002 .better-payment .is-active.pagination-ellipsis,
1003 .better-payment .is-active.pagination-link,
1004 .better-payment .is-active.pagination-next,
1005 .better-payment .is-active.pagination-previous,
1006 .better-payment .is-active.textarea,
1007 .better-payment .is-focused.bulma-control-extend,
1008 .better-payment .is-focused.file-cta,
1009 .better-payment .is-focused.file-name,
1010 .better-payment .is-focused.input,
1011 .better-payment .is-focused.pagination-ellipsis,
1012 .better-payment .is-focused.pagination-link,
1013 .better-payment .is-focused.pagination-next,
1014 .better-payment .is-focused.pagination-previous,
1015 .better-payment .is-focused.textarea,
1016 .better-payment .pagination-ellipsis:active,
1017 .better-payment .pagination-ellipsis:focus,
1018 .better-payment .pagination-link:active,
1019 .better-payment .pagination-link:focus,
1020 .better-payment .pagination-next:active,
1021 .better-payment .pagination-next:focus,
1022 .better-payment .pagination-previous:active,
1023 .better-payment .pagination-previous:focus,
1024 .better-payment .select select.is-active,
1025 .better-payment .select select.is-focused,
1026 .better-payment .select select:active,
1027 .better-payment .select select:focus,
1028 .better-payment .textarea:active,
1029 .better-payment.textarea:focus {
1030 outline: 0;
1031 }
1032
1033 .better-payment .better-payment-notice.notification.is-danger.is-light {
1034 background-color: rgb(242, 222, 222);
1035 color: rgb(169, 68, 66);
1036 font-size: 85%;
1037 padding: 15px;
1038 border-radius: 3px;
1039 }
1040
1041 .better-payment .better-payment-notice.notification.is-danger.is-light a {
1042 color: rgb(169, 68, 66) !important;
1043 }
1044
1045 .better-payment .notification {
1046 background-color: #f5f5f5;
1047 border-radius: 0.375em;
1048 position: relative;
1049 padding: 1.25rem 2.5rem 1.25rem 1.5rem;
1050 }
1051
1052 .better-payment .notification.is-light {
1053 background-color: #f5f5f5;
1054 color: rgba(0, 0, 0, 0.7);
1055 }
1056
1057 .better-payment .notification.is-danger {
1058 background-color: #f14668;
1059 color: #fff;
1060 }
1061
1062 .better-payment .notification.is-danger.is-light {
1063 background-color: #feecf0;
1064 color: #cc0f35;
1065 }
1066
1067 .better-payment .notification.is-warning {
1068 background-color: #ffe08a;
1069 color: rgba(0, 0, 0, 0.7);
1070 }
1071
1072 .better-payment .notification.is-warning.is-light {
1073 background-color: #fffaeb;
1074 color: #946c00;
1075 }
1076
1077 .better-payment .notification.is-success {
1078 background-color: #48c78e;
1079 color: #fff;
1080 }
1081
1082 .better-payment .notification.is-success.is-light {
1083 background-color: #effaf5;
1084 color: #257953;
1085 }
1086
1087 .better-payment .notification.is-info {
1088 background-color: #3e8ed0;
1089 color: #fff;
1090 }
1091
1092 .better-payment .notification.is-info.is-light {
1093 background-color: #eff5fb;
1094 color: #296fa8;
1095 }
1096
1097 .better-payment .notification.is-link {
1098 background-color: #485fc7;
1099 color: #fff;
1100 }
1101
1102 .better-payment .notification.is-link.is-light {
1103 background-color: #eff1fa;
1104 color: #3850b7;
1105 }
1106
1107 .better-payment .notification.is-primary {
1108 background-color: #00d1b2;
1109 color: #fff;
1110 }
1111
1112 .better-payment .notification.is-primary.is-light {
1113 background-color: #ebfffc;
1114 color: #00947e;
1115 }
1116
1117 .better-payment .box {
1118 background-color: #fff;
1119 border-radius: 6px;
1120 box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
1121 color: #4a4a4a;
1122 display: block;
1123 padding: 0.75rem;
1124 }
1125
1126 /* Layout 2 */
1127 .better-payment .payment-form-layout-1,
1128 .better-payment .payment-form-layout-2 {
1129 font-family: "DM Sans", sans-serif;
1130 box-shadow: 0px 40px 75px rgba(0, 1, 35, 0.08);
1131 }
1132
1133 .better-payment .payment-form-layout-1 .dynamic-amount-section,
1134 .better-payment .payment-form-layout-2 .dynamic-amount-section {
1135 position: relative;
1136 background-color: #006aff;
1137 background-image: url("../img/bg-blue-2.svg");
1138 background-repeat: no-repeat;
1139 background-position: center;
1140 background-size: cover;
1141 border-top-left-radius: 10px;
1142 border-bottom-left-radius: 10px;
1143 }
1144
1145 .better-payment .payment-form-layout-2 .dynamic-amount-section-subtitle {
1146 color: #98b9f2;
1147 }
1148
1149 .better-payment .payment-form-layout-3 .dynamic-amount-section-amount {
1150 color: #0042bd;
1151 }
1152
1153 .better-payment .payment-form-layout.payment-form-layout-3 .button {
1154 background-color: #0042bd !important;
1155 }
1156
1157 .better-payment .payment-form-layout-3 .dynamic-amount-section-title {
1158 color: #000;
1159 }
1160
1161 .better-payment .payment-form-layout-3 .dynamic-amount-section-subtitle {
1162 color: #666;
1163 }
1164
1165 .better-payment .payment-form-layout-3 .dynamic-amount-section-icon {
1166 color: #c6cde4;
1167 }
1168
1169 .better-payment .payment-form-layout-3 .payment-method-checkbox {
1170 border-bottom: 1px solid #e9ecff;
1171 cursor: pointer;
1172 display: flex;
1173 align-items: center;
1174 justify-content: center;
1175 }
1176
1177 .better-payment .payment-form-layout-3 .payment-method-checkbox input {
1178 display: none;
1179 }
1180
1181 .better-payment .payment-form-layout-3 .payment-method-checkbox img {
1182 object-fit: contain;
1183 height: 25px;
1184 }
1185
1186 .better-payment .payment-form-layout-3 .payment-method-checkbox input,
1187 .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item input,
1188 .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item input {
1189 visibility: hidden;
1190 }
1191
1192 .better-payment .payment-form-layout-3 .payment-method-checkbox.active,
1193 .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item.active,
1194 .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item.active {
1195 border-bottom: 1px solid #0042bd;
1196 }
1197
1198 .better-payment .payment-form-layout-1 .form-content-section,
1199 .better-payment .payment-form-layout-2 .form-content-section {
1200 border-top-right-radius: 10px;
1201 border-bottom-right-radius: 10px;
1202 }
1203
1204 .better-payment .payment-form-layout-2 .dynamic-amount-section,
1205 .better-payment .payment-form-layout-2 .form-content-section {
1206 border-radius: 10px;
1207 }
1208
1209 .better-payment .payment-form-layout-2 .dynamic-amount-section {
1210 background-color: #006aff;
1211 background-image: linear-gradient(180deg, #006aff 0%, #004cbf 100%);
1212 }
1213
1214 .better-payment .payment-form-layout-3 .dynamic-amount-section {
1215 background: #fbfcff;
1216 }
1217
1218 .better-payment .payment-form-layout .button {
1219 background-color: #006aff !important;
1220 color: #fff !important;
1221 }
1222
1223 .better-payment .button {
1224 -moz-appearance: none;
1225 -webkit-appearance: none;
1226 align-items: center;
1227 border: 1px solid transparent;
1228 border-radius: 0.375em;
1229 box-shadow: none;
1230 display: inline-flex;
1231 font-size: 1rem;
1232 height: 2.5em;
1233 justify-content: flex-start;
1234 line-height: 1.5;
1235 padding-bottom: calc(0.5em - 1px);
1236 padding-left: calc(0.75em - 1px);
1237 padding-right: calc(0.75em - 1px);
1238 padding-top: calc(0.5em - 1px);
1239 position: relative;
1240 vertical-align: top;
1241 }
1242
1243 .better-payment .button.fix-common {
1244 -moz-appearance: none;
1245 -webkit-appearance: none;
1246 align-items: center;
1247 border: 1px solid transparent;
1248 border-radius: 0.375em;
1249 box-shadow: none;
1250 display: inline-flex;
1251 font-size: unset;
1252 height: 2.5em;
1253 justify-content: flex-start;
1254 line-height: 1.5;
1255 padding-bottom: calc(0.5em - 1px);
1256 padding-left: calc(0.75em - 1px);
1257 padding-right: calc(0.75em - 1px);
1258 padding-top: calc(0.5em - 1px);
1259 position: relative;
1260 vertical-align: top;
1261 }
1262
1263 .better-payment .button:active,
1264 .better-payment .button:focus,
1265 .better-payment .is-active.button,
1266 .better-payment .is-focused.button {
1267 outline: 0;
1268 }
1269
1270 .better-payment .buttons .button {
1271 margin-bottom: 0.5rem;
1272 }
1273
1274 .better-payment .button.is-fullwidth {
1275 display: flex;
1276 width: 100%;
1277 }
1278
1279 .better-payment .button.is-medium {
1280 font-size: 1.25rem;
1281 }
1282
1283 .better-payment .button {
1284 background-color: #fff;
1285 border-color: #dbdbdb;
1286 border-width: 1px;
1287 color: #363636;
1288 cursor: pointer;
1289 justify-content: center;
1290 padding-bottom: calc(0.5em - 1px);
1291 padding-left: 1em;
1292 padding-right: 1em;
1293 padding-top: calc(0.5em - 1px);
1294 text-align: center;
1295 white-space: nowrap;
1296 }
1297
1298 .better-payment .button.is-hovered,
1299 .better-payment .button:hover {
1300 border-color: #b5b5b5;
1301 color: #363636;
1302 }
1303
1304 .better-payment .is-hidden {
1305 display: none !important;
1306 }
1307
1308 .better-payment .control .bp-currency-symbol {
1309 color: #b0b7d6;
1310 font-size: 1.5rem;
1311 }
1312
1313 .better-payment .is-full-width,
1314 .better-payment.is-full-width {
1315 width: 100%;
1316 }
1317
1318 .better-payment .is-medium.bp-custom-payment-amount-el-integration {
1319 font-size: unset;
1320 border-color: unset;
1321 border-radius: 3px;
1322 }
1323
1324 .better-payment .control.has-icons-left .is-medium.bp-custom-payment-amount-el-integration ~ .icon {
1325 font-size: unset;
1326 }
1327
1328 .better-payment .is-medium.bp-custom-payment-amount-el-integration:focus {
1329 box-shadow: unset;
1330 }
1331
1332 /* Mobile */
1333 @media screen and (max-width: 768px) {
1334 .better-payment .payment-form-layout-3 .payment-method-checkbox img {
1335 margin-left: -35px;
1336 }
1337 .better-payment .payment-form-layout-1 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box,
1338 .better-payment .payment-form-layout-2 .bp-three-items-enabled-wrap.field-payment_method .bp-radio-box {
1339 display: unset;
1340 }
1341 .better-payment .payment-form-layout .button,
1342 .better-payment .form-content-section input,
1343 .better-payment .is-medium.input,
1344 .better-payment .is-medium.textarea,
1345 .better-payment .control.has-icons-left .input.is-medium ~ .icon,
1346 .better-payment .control.has-icons-left .select.is-medium ~ .icon,
1347 .better-payment .control.has-icons-right .input.is-medium ~ .icon,
1348 .better-payment .control.has-icons-right .select.is-medium ~ .icon {
1349 font-size: 16px;
1350 }
1351 }
1352 /* Tablet */
1353 @media screen and (min-width: 769px) {
1354 .better-payment .columns:not(.is-desktop) {
1355 display: flex;
1356 }
1357 .better-payment .column.is-three-quarters,
1358 .better-payment .column.is-three-quarters-tablet {
1359 flex: none;
1360 width: 75%;
1361 }
1362 .better-payment .column.is-two-thirds,
1363 .better-payment .column.is-two-thirds-tablet {
1364 flex: none;
1365 width: 66.6666%;
1366 }
1367 .better-payment .tile:not(.is-child) {
1368 display: flex;
1369 }
1370 .better-payment .tile.is-8 {
1371 flex: none;
1372 width: 66.66667%;
1373 }
1374 .better-payment .column.is-1,
1375 .better-payment .column.is-1-tablet {
1376 flex: none;
1377 width: 8.33333%;
1378 }
1379 .better-payment .column.is-2,
1380 .better-payment .column.is-2-tablet {
1381 flex: none;
1382 width: 16.66667%;
1383 }
1384 .better-payment .column.is-3,
1385 .better-payment .column.is-3-tablet {
1386 flex: none;
1387 width: 25%;
1388 }
1389 .better-payment .column.is-4,
1390 .better-payment .column.is-4-tablet {
1391 flex: none;
1392 width: 33.33333%;
1393 }
1394 .better-payment .column.is-5,
1395 .better-payment .column.is-5-tablet {
1396 flex: none;
1397 width: 41.66667%;
1398 }
1399 .better-payment .column.is-6,
1400 .better-payment .column.is-6-tablet {
1401 flex: none;
1402 width: 50%;
1403 }
1404 .better-payment .column.is-7,
1405 .better-payment .column.is-7-tablet {
1406 flex: none;
1407 width: 58.33333%;
1408 }
1409 .better-payment .column.is-8,
1410 .better-payment .column.is-8-tablet {
1411 flex: none;
1412 width: 66.66667%;
1413 }
1414 .better-payment .column.is-9,
1415 .better-payment .column.is-9-tablet {
1416 flex: none;
1417 width: 75%;
1418 }
1419 .better-payment .column.is-10,
1420 .better-payment .column.is-10-tablet {
1421 flex: none;
1422 width: 83.33333%;
1423 }
1424 .better-payment .column.is-11,
1425 .better-payment .column.is-11-tablet {
1426 flex: none;
1427 width: 91.66667%;
1428 }
1429 .better-payment .column.is-12,
1430 .better-payment .column.is-12-tablet {
1431 flex: none;
1432 width: 100%;
1433 }
1434 .better-payment .column.is-full,
1435 .better-payment .column.is-full-tablet {
1436 flex: none;
1437 width: 100%;
1438 }
1439 .better-payment .column.is-four-fifths,
1440 .better-payment .column.is-four-fifths-tablet {
1441 flex: none;
1442 width: 80%;
1443 }
1444 .better-payment .column.is-three-quarters,
1445 .better-payment .column.is-three-quarters-tablet {
1446 flex: none;
1447 width: 75%;
1448 }
1449 .better-payment .column.is-two-thirds,
1450 .better-payment .column.is-two-thirds-tablet {
1451 flex: none;
1452 width: 66.6666%;
1453 }
1454 .better-payment .column.is-three-fifths,
1455 .better-payment .column.is-three-fifths-tablet {
1456 flex: none;
1457 width: 60%;
1458 }
1459 .better-payment .column.is-half,
1460 .better-payment .column.is-half-tablet {
1461 flex: none;
1462 width: 50%;
1463 }
1464 .better-payment .column.is-two-fifths,
1465 .better-payment .column.is-two-fifths-tablet {
1466 flex: none;
1467 width: 40%;
1468 }
1469 .better-payment .column.is-one-third,
1470 .better-payment .column.is-one-third-tablet {
1471 flex: none;
1472 width: 33.3333%;
1473 }
1474 .better-payment .column.is-one-quarter,
1475 .better-payment .column.is-one-quarter-tablet {
1476 flex: none;
1477 width: 25%;
1478 }
1479 .better-payment .column.is-one-fifth,
1480 .better-payment .column.is-one-fifth-tablet {
1481 flex: none;
1482 width: 20%;
1483 }
1484 .better-payment .tile.is-vertical {
1485 flex-direction: column;
1486 }
1487 .better-payment .tile.is-parent {
1488 padding: 0.75rem;
1489 }
1490 .better-payment .column.is-offset-1,
1491 .better-payment .column.is-offset-1-tablet {
1492 margin-left: 8.33333%;
1493 }
1494 .better-payment .column.is-offset-2,
1495 .better-payment .column.is-offset-2-tablet {
1496 margin-left: 16.66667%;
1497 }
1498 .better-payment .column.is-offset-3,
1499 .better-payment .column.is-offset-3-tablet {
1500 margin-left: 25%;
1501 }
1502 .better-payment .column.is-offset-4,
1503 .better-payment .column.is-offset-4-tablet {
1504 margin-left: 33.33333%;
1505 }
1506 .better-payment .column.is-offset-5,
1507 .better-payment .column.is-offset-5-tablet {
1508 margin-left: 41.66667%;
1509 }
1510 .better-payment .column.is-offset-6,
1511 .better-payment .column.is-offset-6-tablet {
1512 margin-left: 50%;
1513 }
1514 .better-payment .column.is-offset-7,
1515 .better-payment .column.is-offset-7-tablet {
1516 margin-left: 58.33333%;
1517 }
1518 .better-payment .column.is-offset-8,
1519 .better-payment .column.is-offset-8-tablet {
1520 margin-left: 66.66667%;
1521 }
1522 .better-payment .column.is-offset-9,
1523 .better-payment .column.is-offset-9-tablet {
1524 margin-left: 75%;
1525 }
1526 .better-payment .column.is-offset-10,
1527 .better-payment .column.is-offset-10-tablet {
1528 margin-left: 83.33333%;
1529 }
1530 .better-payment .column.is-offset-11,
1531 .better-payment .column.is-offset-11-tablet {
1532 margin-left: 91.66667%;
1533 }
1534 .better-payment .column.is-offset-12,
1535 .better-payment .column.is-offset-12-tablet {
1536 margin-left: 100%;
1537 }
1538 .better-payment .tile.is-offset-2,
1539 .better-payment .tile.is-offset-2-tablet {
1540 margin-left: 16.66667%;
1541 }
1542 .better-payment .bp-modal .modal-card,
1543 .better-payment .bp-modal .modal-content {
1544 width: 740px;
1545 }
1546 }
1547 /* Desktop */
1548 @media screen and (min-width: 992px) {
1549 .better-payment .columns:not(.is-desktop) {
1550 display: flex;
1551 }
1552 .better-payment .column.is-1-desktop {
1553 flex: none;
1554 width: 8.33333%;
1555 }
1556 .better-payment .column.is-2-desktop {
1557 flex: none;
1558 width: 16.66667%;
1559 }
1560 .better-payment .column.is-3-desktop {
1561 flex: none;
1562 width: 25%;
1563 }
1564 .better-payment .column.is-4-desktop {
1565 flex: none;
1566 width: 33.33333%;
1567 }
1568 .better-payment .column.is-5-desktop {
1569 flex: none;
1570 width: 41.66667%;
1571 }
1572 .better-payment .column.is-6-desktop {
1573 flex: none;
1574 width: 50%;
1575 }
1576 .better-payment .column.is-7-desktop {
1577 flex: none;
1578 width: 58.33333%;
1579 }
1580 .better-payment .column.is-8-desktop {
1581 flex: none;
1582 width: 66.66667%;
1583 }
1584 .better-payment .column.is-9-desktop {
1585 flex: none;
1586 width: 75%;
1587 }
1588 .better-payment .column.is-10-desktop {
1589 flex: none;
1590 width: 83.33333%;
1591 }
1592 .better-payment .column.is-11-desktop {
1593 flex: none;
1594 width: 91.66667%;
1595 }
1596 .better-payment .column.is-12-desktop {
1597 flex: none;
1598 width: 100%;
1599 }
1600 .better-payment .bp-modal .modal-card,
1601 .better-payment .bp-modal .modal-content {
1602 width: 950px !important;
1603 }
1604 .better-payment .bp-modal .is-small .modal-card,
1605 .better-payment .bp-modal .is-small .modal-content {
1606 width: 550px;
1607 }
1608 }
1609 /* Large Desktop : widescreen */
1610 @media screen and (min-width: 1200px) {
1611 .better-payment .column.is-1-widescreen {
1612 flex: none;
1613 width: 8.33333%;
1614 }
1615 .better-payment .column.is-2-widescreen {
1616 flex: none;
1617 width: 16.66667%;
1618 }
1619 .better-payment .column.is-3-widescreen {
1620 flex: none;
1621 width: 25%;
1622 }
1623 .better-payment .column.is-4-widescreen {
1624 flex: none;
1625 width: 33.33333%;
1626 }
1627 .better-payment .column.is-5-widescreen {
1628 flex: none;
1629 width: 41.66667%;
1630 }
1631 .better-payment .column.is-6-widescreen {
1632 flex: none;
1633 width: 50%;
1634 }
1635 .better-payment .column.is-7-widescreen {
1636 flex: none;
1637 width: 58.33333%;
1638 }
1639 .better-payment .column.is-8-widescreen {
1640 flex: none;
1641 width: 66.66667%;
1642 }
1643 .better-payment .column.is-9-widescreen {
1644 flex: none;
1645 width: 75%;
1646 }
1647 .better-payment .column.is-10-widescreen {
1648 flex: none;
1649 width: 83.33333%;
1650 }
1651 .better-payment .column.is-11-widescreen {
1652 flex: none;
1653 width: 91.66667%;
1654 }
1655 .better-payment .column.is-12-widescreen {
1656 flex: none;
1657 width: 100%;
1658 }
1659 }
1660 /* Larger Desktop : fullhd */
1661 @media screen and (min-width: 1400px) {
1662 .better-payment .column.is-1-fullhd {
1663 flex: none;
1664 width: 8.33333%;
1665 }
1666 .better-payment .column.is-2-fullhd {
1667 flex: none;
1668 width: 16.66667%;
1669 }
1670 .better-payment .column.is-3-fullhd {
1671 flex: none;
1672 width: 25%;
1673 }
1674 .better-payment .column.is-4-fullhd {
1675 flex: none;
1676 width: 33.33333%;
1677 }
1678 .better-payment .column.is-5-fullhd {
1679 flex: none;
1680 width: 41.66667%;
1681 }
1682 .better-payment .column.is-6-fullhd {
1683 flex: none;
1684 width: 50%;
1685 }
1686 .better-payment .column.is-7-fullhd {
1687 flex: none;
1688 width: 58.33333%;
1689 }
1690 .better-payment .column.is-8-fullhd {
1691 flex: none;
1692 width: 66.66667%;
1693 }
1694 .better-payment .column.is-9-fullhd {
1695 flex: none;
1696 width: 75%;
1697 }
1698 .better-payment .column.is-10-fullhd {
1699 flex: none;
1700 width: 83.33333%;
1701 }
1702 .better-payment .column.is-11-fullhd {
1703 flex: none;
1704 width: 91.66667%;
1705 }
1706 .better-payment .column.is-12-fullhd {
1707 flex: none;
1708 width: 100%;
1709 }
1710 }
1711 /* Larger Desktop Custom : fullhd-custom */
1712 @media screen and (min-width: 1500px) {
1713 .better-payment .column.is-1-fullhd-custom {
1714 flex: none;
1715 width: 8.33333%;
1716 }
1717 .better-payment .column.is-2-fullhd-custom {
1718 flex: none;
1719 width: 16.66667%;
1720 }
1721 .better-payment .column.is-3-fullhd-custom {
1722 flex: none;
1723 width: 25%;
1724 }
1725 .better-payment .column.is-4-fullhd-custom {
1726 flex: none;
1727 width: 33.33333%;
1728 }
1729 .better-payment .column.is-5-fullhd-custom {
1730 flex: none;
1731 width: 41.66667%;
1732 }
1733 .better-payment .column.is-6-fullhd-custom {
1734 flex: none;
1735 width: 50%;
1736 }
1737 .better-payment .column.is-7-fullhd-custom {
1738 flex: none;
1739 width: 58.33333%;
1740 }
1741 .better-payment .column.is-8-fullhd-custom {
1742 flex: none;
1743 width: 66.66667%;
1744 }
1745 .better-payment .column.is-9-fullhd-custom {
1746 flex: none;
1747 width: 75%;
1748 }
1749 .better-payment .column.is-10-fullhd-custom {
1750 flex: none;
1751 width: 83.33333%;
1752 }
1753 .better-payment .column.is-11-fullhd-custom {
1754 flex: none;
1755 width: 91.66667%;
1756 }
1757 .better-payment .column.is-12-fullhd-custom {
1758 flex: none;
1759 width: 100%;
1760 }
1761 }
1762 /* BP Modal : Starts */
1763 .better-payment .bp-modal .modal,
1764 .better-payment .bp-modal .modal-background {
1765 bottom: 0;
1766 left: 0;
1767 position: absolute;
1768 right: 0;
1769 top: 0;
1770 }
1771
1772 .better-payment .bp-modal .modal {
1773 align-items: center;
1774 display: none;
1775 flex-direction: column;
1776 justify-content: center;
1777 overflow: hidden;
1778 position: fixed;
1779 z-index: 40;
1780 }
1781
1782 .better-payment .bp-modal .modal-background {
1783 background-color: rgba(10, 10, 10, 0.86);
1784 }
1785
1786 .better-payment .bp-modal .modal-card,
1787 .better-payment .bp-modal .modal-content {
1788 margin: 0 20px;
1789 max-height: calc(100vh - 160px);
1790 overflow: auto;
1791 position: relative;
1792 width: 100%;
1793 }
1794
1795 .better-payment .bp-modal .modal-card {
1796 display: flex;
1797 flex-direction: column;
1798 max-height: calc(100vh - 40px);
1799 overflow: hidden;
1800 }
1801
1802 .better-payment .bp-modal .modal-card-head {
1803 border-bottom: 1px solid #dbdbdb;
1804 border-top-left-radius: 6px;
1805 border-top-right-radius: 6px;
1806 }
1807
1808 .better-payment .bp-modal .modal-card-foot,
1809 .better-payment .bp-modal .modal-card-head {
1810 align-items: center;
1811 background-color: #f5f5f5;
1812 display: flex;
1813 flex-shrink: 0;
1814 justify-content: flex-end;
1815 padding: 15px 20px;
1816 position: relative;
1817 }
1818
1819 .better-payment .bp-modal .modal-card-body {
1820 -webkit-overflow-scrolling: touch;
1821 background-color: #fff;
1822 flex-grow: 1;
1823 flex-shrink: 1;
1824 overflow: auto;
1825 padding: 20px;
1826 }
1827
1828 .better-payment .bp-modal .modal-card-foot {
1829 border-bottom-left-radius: 6px;
1830 border-bottom-right-radius: 6px;
1831 border-top: 1px solid #dbdbdb;
1832 }
1833
1834 .better-payment .bp-modal .modal-card-title {
1835 color: #363636;
1836 flex-grow: 1;
1837 flex-shrink: 0;
1838 font-size: 1.5rem;
1839 line-height: 1;
1840 }
1841
1842 .better-payment .bp-modal .button,
1843 .better-payment .bp-modal .button:focus {
1844 outline: 0 !important;
1845 border-color: transparent !important;
1846 }
1847
1848 .better-payment .bp-modal .modal.is-active {
1849 display: flex;
1850 }
1851
1852 .better-payment .bp-modal .is-large.modal-close {
1853 height: 32px;
1854 max-height: 32px;
1855 max-width: 32px;
1856 min-height: 32px;
1857 min-width: 32px;
1858 width: 32px;
1859 }
1860
1861 .better-payment .bp-modal .delete,
1862 .better-payment .bp-modal .modal-close {
1863 -webkit-touch-callout: none;
1864 -webkit-user-select: none;
1865 -moz-user-select: none;
1866 -ms-user-select: none;
1867 user-select: none;
1868 -moz-appearance: none;
1869 -webkit-appearance: none;
1870 background-color: rgba(10, 10, 10, 0.2);
1871 border: none;
1872 border-radius: 9999px;
1873 cursor: pointer;
1874 pointer-events: auto;
1875 display: inline-block;
1876 flex-grow: 0;
1877 flex-shrink: 0;
1878 font-size: 0;
1879 height: 20px;
1880 max-height: 20px;
1881 max-width: 20px;
1882 min-height: 20px;
1883 min-width: 20px;
1884 outline: 0;
1885 position: relative;
1886 vertical-align: top;
1887 width: 20px;
1888 }
1889
1890 .better-payment .bp-modal .modal-close {
1891 background: 0 0;
1892 height: 40px;
1893 position: fixed;
1894 right: 20px;
1895 top: 52px;
1896 width: 40px;
1897 }
1898
1899 .better-payment .bp-modal .delete::before,
1900 .better-payment .bp-modal .modal-close::before {
1901 height: 2px;
1902 width: 50%;
1903 }
1904
1905 .better-payment .bp-modal .delete::after,
1906 .better-payment .bp-modal .modal-close::after {
1907 height: 50%;
1908 width: 2px;
1909 }
1910
1911 .better-payment .bp-modal .delete::after,
1912 .better-payment .bp-modal .delete::before,
1913 .better-payment .bp-modal .modal-close::after,
1914 .better-payment .bp-modal .modal-close::before {
1915 background-color: #fff;
1916 content: "";
1917 display: block;
1918 left: 50%;
1919 position: absolute;
1920 top: 50%;
1921 transform: translateX(-50%) translateY(-50%) rotate(45deg);
1922 transform-origin: center center;
1923 }
1924
1925 .better-payment .bp-modal .box {
1926 background-color: #fff;
1927 border-radius: 6px;
1928 box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
1929 color: #4a4a4a;
1930 display: block;
1931 padding: 1.25rem;
1932 }
1933
1934 .better-payment .bp-modal .delete:focus,
1935 .better-payment .bp-modal .delete:hover,
1936 .better-payment .bp-modal .modal-close:focus,
1937 .better-payment .bp-modal .modal-close:hover {
1938 background-color: rgba(10, 10, 10, 0.3);
1939 }
1940
1941 .better-payment .bp-modal .modal-card,
1942 .better-payment .bp-modal .modal-content {
1943 margin: 0 auto;
1944 max-height: calc(100vh - 40px);
1945 }
1946
1947 /* BP Modal : Ends */
1948 /* BP Transactions Page */
1949 .better-payment .file {
1950 align-items: stretch;
1951 display: flex;
1952 justify-content: flex-start;
1953 position: relative;
1954 }
1955 .better-payment .file.is-white .file-cta {
1956 background-color: #fff;
1957 border-color: transparent;
1958 color: #0a0a0a;
1959 }
1960 .better-payment .file.is-white.is-hovered .file-cta,
1961 .better-payment .file.is-white:hover .file-cta {
1962 background-color: #f9f9f9;
1963 border-color: transparent;
1964 color: #0a0a0a;
1965 }
1966 .better-payment .file.is-white.is-focused .file-cta,
1967 .better-payment .file.is-white:focus .file-cta {
1968 border-color: transparent;
1969 box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
1970 color: #0a0a0a;
1971 }
1972 .better-payment .file.is-white.is-active .file-cta,
1973 .better-payment .file.is-white:active .file-cta {
1974 background-color: #f2f2f2;
1975 border-color: transparent;
1976 color: #0a0a0a;
1977 }
1978 .better-payment .file.is-black .file-cta {
1979 background-color: #0a0a0a;
1980 border-color: transparent;
1981 color: #fff;
1982 }
1983 .better-payment .file.is-black.is-hovered .file-cta,
1984 .better-payment .file.is-black:hover .file-cta {
1985 background-color: #040404;
1986 border-color: transparent;
1987 color: #fff;
1988 }
1989 .better-payment .file.is-black.is-focused .file-cta,
1990 .better-payment .file.is-black:focus .file-cta {
1991 border-color: transparent;
1992 box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
1993 color: #fff;
1994 }
1995 .better-payment .file.is-black.is-active .file-cta,
1996 .better-payment .file.is-black:active .file-cta {
1997 background-color: #000;
1998 border-color: transparent;
1999 color: #fff;
2000 }
2001 .better-payment .file.is-light .file-cta {
2002 background-color: #f4f4f4;
2003 border-color: transparent;
2004 color: rgba(0, 0, 0, 0.7);
2005 }
2006 .better-payment .file.is-light.is-hovered .file-cta,
2007 .better-payment .file.is-light:hover .file-cta {
2008 background-color: #eee;
2009 border-color: transparent;
2010 color: rgba(0, 0, 0, 0.7);
2011 }
2012 .better-payment .file.is-light.is-focused .file-cta,
2013 .better-payment .file.is-light:focus .file-cta {
2014 border-color: transparent;
2015 box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
2016 color: rgba(0, 0, 0, 0.7);
2017 }
2018 .better-payment .file.is-light.is-active .file-cta,
2019 .better-payment .file.is-light:active .file-cta {
2020 background-color: #e8e8e8;
2021 border-color: transparent;
2022 color: rgba(0, 0, 0, 0.7);
2023 }
2024 .better-payment .file.is-dark .file-cta {
2025 background-color: #353535;
2026 border-color: transparent;
2027 color: #fff;
2028 }
2029 .better-payment .file.is-dark.is-hovered .file-cta,
2030 .better-payment .file.is-dark:hover .file-cta {
2031 background-color: #2f2f2f;
2032 border-color: transparent;
2033 color: #fff;
2034 }
2035 .better-payment .file.is-dark.is-focused .file-cta,
2036 .better-payment .file.is-dark:focus .file-cta {
2037 border-color: transparent;
2038 box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
2039 color: #fff;
2040 }
2041 .better-payment .file.is-dark.is-active .file-cta,
2042 .better-payment .file.is-dark:active .file-cta {
2043 background-color: #292929;
2044 border-color: transparent;
2045 color: #fff;
2046 }
2047 .better-payment .file.is-primary .file-cta {
2048 background-color: #00d1b1;
2049 border-color: transparent;
2050 color: #fff;
2051 }
2052 .better-payment .file.is-primary.is-hovered .file-cta,
2053 .better-payment .file.is-primary:hover .file-cta {
2054 background-color: #00c4a7;
2055 border-color: transparent;
2056 color: #fff;
2057 }
2058 .better-payment .file.is-primary.is-focused .file-cta,
2059 .better-payment .file.is-primary:focus .file-cta {
2060 border-color: transparent;
2061 box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
2062 color: #fff;
2063 }
2064 .better-payment .file.is-primary.is-active .file-cta,
2065 .better-payment .file.is-primary:active .file-cta {
2066 background-color: #00b89c;
2067 border-color: transparent;
2068 color: #fff;
2069 }
2070 .better-payment .file.is-link .file-cta {
2071 background-color: #475ec6;
2072 border-color: transparent;
2073 color: #fff;
2074 }
2075 .better-payment .file.is-link.is-hovered .file-cta,
2076 .better-payment .file.is-link:hover .file-cta {
2077 background-color: #3e56c4;
2078 border-color: transparent;
2079 color: #fff;
2080 }
2081 .better-payment .file.is-link.is-focused .file-cta,
2082 .better-payment .file.is-link:focus .file-cta {
2083 border-color: transparent;
2084 box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.25);
2085 color: #fff;
2086 }
2087 .better-payment .file.is-link.is-active .file-cta,
2088 .better-payment .file.is-link:active .file-cta {
2089 background-color: #3a51bb;
2090 border-color: transparent;
2091 color: #fff;
2092 }
2093 .better-payment .file.is-info .file-cta {
2094 background-color: #3e8ed0;
2095 border-color: transparent;
2096 color: #fff;
2097 }
2098 .better-payment .file.is-info.is-hovered .file-cta,
2099 .better-payment .file.is-info:hover .file-cta {
2100 background-color: #3488ce;
2101 border-color: transparent;
2102 color: #fff;
2103 }
2104 .better-payment .file.is-info.is-focused .file-cta,
2105 .better-payment .file.is-info:focus .file-cta {
2106 border-color: transparent;
2107 box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25);
2108 color: #fff;
2109 }
2110 .better-payment .file.is-info.is-active .file-cta,
2111 .better-payment .file.is-info:active .file-cta {
2112 background-color: #3082c5;
2113 border-color: transparent;
2114 color: #fff;
2115 }
2116 .better-payment .file.is-success .file-cta {
2117 background-color: #47c68d;
2118 border-color: transparent;
2119 color: #fff;
2120 }
2121 .better-payment .file.is-success.is-hovered .file-cta,
2122 .better-payment .file.is-success:hover .file-cta {
2123 background-color: #3ec487;
2124 border-color: transparent;
2125 color: #fff;
2126 }
2127 .better-payment .file.is-success.is-focused .file-cta,
2128 .better-payment .file.is-success:focus .file-cta {
2129 border-color: transparent;
2130 box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25);
2131 color: #fff;
2132 }
2133 .better-payment .file.is-success.is-active .file-cta,
2134 .better-payment .file.is-success:active .file-cta {
2135 background-color: #3abb81;
2136 border-color: transparent;
2137 color: #fff;
2138 }
2139 .better-payment .file.is-warning .file-cta {
2140 background-color: #ffdf89;
2141 border-color: transparent;
2142 color: rgba(0, 0, 0, 0.7);
2143 }
2144 .better-payment .file.is-warning.is-hovered .file-cta,
2145 .better-payment .file.is-warning:hover .file-cta {
2146 background-color: #ffdc7d;
2147 border-color: transparent;
2148 color: rgba(0, 0, 0, 0.7);
2149 }
2150 .better-payment .file.is-warning.is-focused .file-cta,
2151 .better-payment .file.is-warning:focus .file-cta {
2152 border-color: transparent;
2153 box-shadow: 0 0 0.5em rgba(255, 224, 138, 0.25);
2154 color: rgba(0, 0, 0, 0.7);
2155 }
2156 .better-payment .file.is-warning.is-active .file-cta,
2157 .better-payment .file.is-warning:active .file-cta {
2158 background-color: #ffd970;
2159 border-color: transparent;
2160 color: rgba(0, 0, 0, 0.7);
2161 }
2162 .better-payment .file.is-danger .file-cta {
2163 background-color: #f14668;
2164 border-color: transparent;
2165 color: #fff;
2166 }
2167 .better-payment .file.is-danger.is-hovered .file-cta,
2168 .better-payment .file.is-danger:hover .file-cta {
2169 background-color: #f03a5f;
2170 border-color: transparent;
2171 color: #fff;
2172 }
2173 .better-payment .file.is-danger.is-focused .file-cta,
2174 .better-payment .file.is-danger:focus .file-cta {
2175 border-color: transparent;
2176 box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25);
2177 color: #fff;
2178 }
2179 .better-payment .file.is-danger.is-active .file-cta,
2180 .better-payment .file.is-danger:active .file-cta {
2181 background-color: #ef2e55;
2182 border-color: transparent;
2183 color: #fff;
2184 }
2185 .better-payment .file.is-expo .file-cta {
2186 background-color: #ffd257;
2187 border-color: transparent;
2188 color: #fff;
2189 }
2190 .better-payment .file.is-expo.is-hovered .file-cta,
2191 .better-payment .file.is-expo:hover .file-cta {
2192 background-color: #ffcf4a;
2193 border-color: transparent;
2194 color: #fff;
2195 }
2196 .better-payment .file.is-expo.is-focused .file-cta,
2197 .better-payment .file.is-expo:focus .file-cta {
2198 border-color: transparent;
2199 box-shadow: 0 0 0.5em rgba(255, 210, 87, 0.25);
2200 color: #fff;
2201 }
2202 .better-payment .file.is-expo.is-active .file-cta,
2203 .better-payment .file.is-expo:active .file-cta {
2204 background-color: #ffcb3e;
2205 border-color: transparent;
2206 color: #fff;
2207 }
2208 .better-payment .file.is-love .file-cta {
2209 background-color: #f14668;
2210 border-color: transparent;
2211 color: #fff;
2212 }
2213 .better-payment .file.is-love.is-hovered .file-cta,
2214 .better-payment .file.is-love:hover .file-cta {
2215 background-color: #f03a5f;
2216 border-color: transparent;
2217 color: #fff;
2218 }
2219 .better-payment .file.is-love.is-focused .file-cta,
2220 .better-payment .file.is-love:focus .file-cta {
2221 border-color: transparent;
2222 box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25);
2223 color: #fff;
2224 }
2225 .better-payment .file.is-love.is-active .file-cta,
2226 .better-payment .file.is-love:active .file-cta {
2227 background-color: #ef2e55;
2228 border-color: transparent;
2229 color: #fff;
2230 }
2231 .better-payment .file.is-patreon .file-cta {
2232 background-color: #f96854;
2233 border-color: transparent;
2234 color: #fff;
2235 }
2236 .better-payment .file.is-patreon.is-hovered .file-cta,
2237 .better-payment .file.is-patreon:hover .file-cta {
2238 background-color: #f95d48;
2239 border-color: transparent;
2240 color: #fff;
2241 }
2242 .better-payment .file.is-patreon.is-focused .file-cta,
2243 .better-payment .file.is-patreon:focus .file-cta {
2244 border-color: transparent;
2245 box-shadow: 0 0 0.5em rgba(249, 104, 84, 0.25);
2246 color: #fff;
2247 }
2248 .better-payment .file.is-patreon.is-active .file-cta,
2249 .better-payment .file.is-patreon:active .file-cta {
2250 background-color: #f8523b;
2251 border-color: transparent;
2252 color: #fff;
2253 }
2254 .better-payment .file.is-rss .file-cta {
2255 background-color: #f26522;
2256 border-color: transparent;
2257 color: #fff;
2258 }
2259 .better-payment .file.is-rss.is-hovered .file-cta,
2260 .better-payment .file.is-rss:hover .file-cta {
2261 background-color: #f15d16;
2262 border-color: transparent;
2263 color: #fff;
2264 }
2265 .better-payment .file.is-rss.is-focused .file-cta,
2266 .better-payment .file.is-rss:focus .file-cta {
2267 border-color: transparent;
2268 box-shadow: 0 0 0.5em rgba(242, 101, 34, 0.25);
2269 color: #fff;
2270 }
2271 .better-payment .file.is-rss.is-active .file-cta,
2272 .better-payment .file.is-rss:active .file-cta {
2273 background-color: #ed560e;
2274 border-color: transparent;
2275 color: #fff;
2276 }
2277 .better-payment .file.is-bleeding .file-cta {
2278 background-color: #abf47c;
2279 border-color: transparent;
2280 color: rgba(0, 0, 0, 0.7);
2281 }
2282 .better-payment .file.is-bleeding.is-hovered .file-cta,
2283 .better-payment .file.is-bleeding:hover .file-cta {
2284 background-color: #a3f370;
2285 border-color: transparent;
2286 color: rgba(0, 0, 0, 0.7);
2287 }
2288 .better-payment .file.is-bleeding.is-focused .file-cta,
2289 .better-payment .file.is-bleeding:focus .file-cta {
2290 border-color: transparent;
2291 box-shadow: 0 0 0.5em rgba(171, 244, 124, 0.25);
2292 color: rgba(0, 0, 0, 0.7);
2293 }
2294 .better-payment .file.is-bleeding.is-active .file-cta,
2295 .better-payment .file.is-bleeding:active .file-cta {
2296 background-color: #9cf264;
2297 border-color: transparent;
2298 color: rgba(0, 0, 0, 0.7);
2299 }
2300 .better-payment .file.is-sass .file-cta {
2301 background-color: #bf4080;
2302 border-color: transparent;
2303 color: #fff;
2304 }
2305 .better-payment .file.is-sass.is-hovered .file-cta,
2306 .better-payment .file.is-sass:hover .file-cta {
2307 background-color: #b53d7a;
2308 border-color: transparent;
2309 color: #fff;
2310 }
2311 .better-payment .file.is-sass.is-focused .file-cta,
2312 .better-payment .file.is-sass:focus .file-cta {
2313 border-color: transparent;
2314 box-shadow: 0 0 0.5em rgba(191, 64, 128, 0.25);
2315 color: #fff;
2316 }
2317 .better-payment .file.is-sass.is-active .file-cta,
2318 .better-payment .file.is-sass:active .file-cta {
2319 background-color: #ac3a73;
2320 border-color: transparent;
2321 color: #fff;
2322 }
2323 .better-payment .file.is-amazon .file-cta {
2324 background-color: #ffd863;
2325 border-color: transparent;
2326 color: rgba(0, 0, 0, 0.7);
2327 }
2328 .better-payment .file.is-amazon.is-hovered .file-cta,
2329 .better-payment .file.is-amazon:hover .file-cta {
2330 background-color: #ffd556;
2331 border-color: transparent;
2332 color: rgba(0, 0, 0, 0.7);
2333 }
2334 .better-payment .file.is-amazon.is-focused .file-cta,
2335 .better-payment .file.is-amazon:focus .file-cta {
2336 border-color: transparent;
2337 box-shadow: 0 0 0.5em rgba(255, 216, 99, 0.25);
2338 color: rgba(0, 0, 0, 0.7);
2339 }
2340 .better-payment .file.is-amazon.is-active .file-cta,
2341 .better-payment .file.is-amazon:active .file-cta {
2342 background-color: #ffd24a;
2343 border-color: transparent;
2344 color: rgba(0, 0, 0, 0.7);
2345 }
2346 .better-payment .file.is-sponsor .file-cta {
2347 background-color: #ea4aaa;
2348 border-color: transparent;
2349 color: #fff;
2350 }
2351 .better-payment .file.is-sponsor.is-hovered .file-cta,
2352 .better-payment .file.is-sponsor:hover .file-cta {
2353 background-color: #e93fa5;
2354 border-color: transparent;
2355 color: #fff;
2356 }
2357 .better-payment .file.is-sponsor.is-focused .file-cta,
2358 .better-payment .file.is-sponsor:focus .file-cta {
2359 border-color: transparent;
2360 box-shadow: 0 0 0.5em rgba(234, 74, 170, 0.25);
2361 color: #fff;
2362 }
2363 .better-payment .file.is-sponsor.is-active .file-cta,
2364 .better-payment .file.is-sponsor:active .file-cta {
2365 background-color: #e7339f;
2366 border-color: transparent;
2367 color: #fff;
2368 }
2369 .better-payment .file.is-twitter .file-cta {
2370 background-color: #55acee;
2371 border-color: transparent;
2372 color: #fff;
2373 }
2374 .better-payment .file.is-twitter.is-hovered .file-cta,
2375 .better-payment .file.is-twitter:hover .file-cta {
2376 background-color: #49a6ed;
2377 border-color: transparent;
2378 color: #fff;
2379 }
2380 .better-payment .file.is-twitter.is-focused .file-cta,
2381 .better-payment .file.is-twitter:focus .file-cta {
2382 border-color: transparent;
2383 box-shadow: 0 0 0.5em rgba(85, 172, 238, 0.25);
2384 color: #fff;
2385 }
2386 .better-payment .file.is-twitter.is-active .file-cta,
2387 .better-payment .file.is-twitter:active .file-cta {
2388 background-color: #3ea1ec;
2389 border-color: transparent;
2390 color: #fff;
2391 }
2392 .better-payment .file.is-videos .file-cta {
2393 background-color: #47c68d;
2394 border-color: transparent;
2395 color: #fff;
2396 }
2397 .better-payment .file.is-videos.is-hovered .file-cta,
2398 .better-payment .file.is-videos:hover .file-cta {
2399 background-color: #3ec487;
2400 border-color: transparent;
2401 color: #fff;
2402 }
2403 .better-payment .file.is-videos.is-focused .file-cta,
2404 .better-payment .file.is-videos:focus .file-cta {
2405 border-color: transparent;
2406 box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25);
2407 color: #fff;
2408 }
2409 .better-payment .file.is-videos.is-active .file-cta,
2410 .better-payment .file.is-videos:active .file-cta {
2411 background-color: #3abb81;
2412 border-color: transparent;
2413 color: #fff;
2414 }
2415 .better-payment .file.is-extensions .file-cta {
2416 background-color: #3e8ed0;
2417 border-color: transparent;
2418 color: #fff;
2419 }
2420 .better-payment .file.is-extensions.is-hovered .file-cta,
2421 .better-payment .file.is-extensions:hover .file-cta {
2422 background-color: #3488ce;
2423 border-color: transparent;
2424 color: #fff;
2425 }
2426 .better-payment .file.is-extensions.is-focused .file-cta,
2427 .better-payment .file.is-extensions:focus .file-cta {
2428 border-color: transparent;
2429 box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25);
2430 color: #fff;
2431 }
2432 .better-payment .file.is-extensions.is-active .file-cta,
2433 .better-payment .file.is-extensions:active .file-cta {
2434 background-color: #3082c5;
2435 border-color: transparent;
2436 color: #fff;
2437 }
2438 .better-payment .file.is-bootstrap .file-cta {
2439 background-color: #6f5499;
2440 border-color: transparent;
2441 color: #fff;
2442 }
2443 .better-payment .file.is-bootstrap.is-hovered .file-cta,
2444 .better-payment .file.is-bootstrap:hover .file-cta {
2445 background-color: #694f91;
2446 border-color: transparent;
2447 color: #fff;
2448 }
2449 .better-payment .file.is-bootstrap.is-focused .file-cta,
2450 .better-payment .file.is-bootstrap:focus .file-cta {
2451 border-color: transparent;
2452 box-shadow: 0 0 0.5em rgba(111, 84, 153, 0.25);
2453 color: #fff;
2454 }
2455 .better-payment .file.is-bootstrap.is-active .file-cta,
2456 .better-payment .file.is-bootstrap:active .file-cta {
2457 background-color: #634b89;
2458 border-color: transparent;
2459 color: #fff;
2460 }
2461 .better-payment .file.is-small {
2462 font-size: 0.75rem;
2463 }
2464 .better-payment .file.is-normal {
2465 font-size: 1rem;
2466 }
2467 .better-payment .file.is-medium {
2468 font-size: 1.25rem;
2469 }
2470 .better-payment .file.is-medium .file-icon .fa {
2471 font-size: 21px;
2472 }
2473 .better-payment .file.is-large {
2474 font-size: 1.5rem;
2475 }
2476 .better-payment .file.is-large .file-icon .fa {
2477 font-size: 28px;
2478 }
2479 .better-payment .file.has-name .file-cta {
2480 border-bottom-right-radius: 0;
2481 border-top-right-radius: 0;
2482 }
2483 .better-payment .file.has-name .file-name {
2484 border-bottom-left-radius: 0;
2485 border-top-left-radius: 0;
2486 }
2487 .better-payment .file.has-name.is-empty .file-cta {
2488 border-radius: 0.375em;
2489 }
2490 .better-payment .file.has-name.is-empty .file-name {
2491 display: none;
2492 }
2493 .better-payment .file.is-boxed .file-label {
2494 flex-direction: column;
2495 }
2496 .better-payment .file.is-boxed .file-cta {
2497 flex-direction: column;
2498 height: auto;
2499 padding: 1em 3em;
2500 }
2501 .better-payment .file.is-boxed .file-name {
2502 border-width: 0 1px 1px;
2503 }
2504 .better-payment .file.is-boxed .file-icon {
2505 height: 1.5em;
2506 width: 1.5em;
2507 }
2508 .better-payment .file.is-boxed .file-icon .fa {
2509 font-size: 21px;
2510 }
2511 .better-payment .file.is-boxed.is-small .file-icon .fa {
2512 font-size: 14px;
2513 }
2514 .better-payment .file.is-boxed.is-medium .file-icon .fa {
2515 font-size: 28px;
2516 }
2517 .better-payment .file.is-boxed.is-large .file-icon .fa {
2518 font-size: 35px;
2519 }
2520 .better-payment .file.is-boxed.has-name .file-cta {
2521 border-radius: 0.375em 0.375em 0 0;
2522 }
2523 .better-payment .file.is-boxed.has-name .file-name {
2524 border-radius: 0 0 0.375em 0.375em;
2525 border-width: 0 1px 1px;
2526 }
2527 .better-payment .file.is-centered {
2528 justify-content: center;
2529 }
2530 .better-payment .file.is-fullwidth .file-label {
2531 width: 100%;
2532 }
2533 .better-payment .file.is-fullwidth .file-name {
2534 flex-grow: 1;
2535 max-width: none;
2536 }
2537 .better-payment .file.is-right {
2538 justify-content: flex-end;
2539 }
2540 .better-payment .file.is-right .file-cta {
2541 border-radius: 0 0.375em 0.375em 0;
2542 }
2543 .better-payment .file.is-right .file-name {
2544 border-radius: 0.375em 0 0 0.375em;
2545 border-width: 1px 0 1px 1px;
2546 order: -1;
2547 }
2548 .better-payment .file-label {
2549 align-items: stretch;
2550 display: flex;
2551 cursor: pointer;
2552 justify-content: flex-start;
2553 overflow: hidden;
2554 position: relative;
2555 }
2556 .better-payment .file-label:hover .file-cta {
2557 background-color: #eee;
2558 color: #353535;
2559 }
2560 .better-payment .file-label:hover .file-name {
2561 border-color: #d5d5d5;
2562 }
2563 .better-payment .file-label:active .file-cta {
2564 background-color: #e8e8e8;
2565 color: #353535;
2566 }
2567 .better-payment .file-label:active .file-name {
2568 border-color: #cfcfcf;
2569 }
2570 .better-payment .file-input {
2571 height: 100%;
2572 left: 0;
2573 opacity: 0;
2574 outline: 0;
2575 position: absolute;
2576 top: 0;
2577 width: 100%;
2578 }
2579 .better-payment .file-cta,
2580 .better-payment .file-name {
2581 border-color: #dbdbdb;
2582 border-radius: 0.375em;
2583 font-size: 1em;
2584 padding-left: 1em;
2585 padding-right: 1em;
2586 white-space: nowrap;
2587 }
2588 .better-payment .file-cta {
2589 background-color: #f4f4f4;
2590 color: #494949;
2591 }
2592 .better-payment .file-name {
2593 border-color: #dbdbdb;
2594 border-style: solid;
2595 border-width: 1px 1px 1px 0;
2596 display: block;
2597 max-width: 16em;
2598 overflow: hidden;
2599 text-align: inherit;
2600 text-overflow: ellipsis;
2601 }
2602 .better-payment .file-icon {
2603 align-items: center;
2604 display: flex;
2605 height: 1em;
2606 justify-content: center;
2607 margin-right: 0.5em;
2608 width: 1em;
2609 }
2610 .better-payment .file-icon .fa {
2611 font-size: 14px;
2612 }
2613 .better-payment .is-flex {
2614 display: flex !important;
2615 }
2616 .better-payment .is-flex-direction-row {
2617 flex-direction: row !important;
2618 }
2619 .better-payment .is-flex-direction-row-reverse {
2620 flex-direction: row-reverse !important;
2621 }
2622 .better-payment .is-flex-direction-column {
2623 flex-direction: column !important;
2624 }
2625 .better-payment .is-flex-direction-column-reverse {
2626 flex-direction: column-reverse !important;
2627 }
2628 .better-payment .is-flex-wrap-nowrap {
2629 flex-wrap: nowrap !important;
2630 }
2631 .better-payment .is-flex-wrap-wrap {
2632 flex-wrap: wrap !important;
2633 }
2634 .better-payment .is-flex-wrap-wrap-reverse {
2635 flex-wrap: wrap-reverse !important;
2636 }
2637 .better-payment .is-justify-content-flex-start {
2638 justify-content: flex-start !important;
2639 }
2640 .better-payment .is-justify-content-flex-end {
2641 justify-content: flex-end !important;
2642 }
2643 .better-payment .is-justify-content-center {
2644 justify-content: center !important;
2645 }
2646 .better-payment .is-justify-content-space-between {
2647 justify-content: space-between !important;
2648 }
2649 .better-payment .is-justify-content-space-around {
2650 justify-content: space-around !important;
2651 }
2652 .better-payment .is-justify-content-space-evenly {
2653 justify-content: space-evenly !important;
2654 }
2655 .better-payment .is-justify-content-start {
2656 justify-content: start !important;
2657 }
2658 .better-payment .is-justify-content-end {
2659 justify-content: end !important;
2660 }
2661 .better-payment .is-justify-content-left {
2662 justify-content: left !important;
2663 }
2664 .better-payment .is-justify-content-right {
2665 justify-content: right !important;
2666 }
2667 .better-payment .is-align-content-flex-start {
2668 align-content: flex-start !important;
2669 }
2670 .better-payment .is-align-content-flex-end {
2671 align-content: flex-end !important;
2672 }
2673 .better-payment .is-align-content-center {
2674 align-content: center !important;
2675 }
2676 .better-payment .is-align-content-space-between {
2677 align-content: space-between !important;
2678 }
2679 .better-payment .is-align-content-space-around {
2680 align-content: space-around !important;
2681 }
2682 .better-payment .is-align-content-space-evenly {
2683 align-content: space-evenly !important;
2684 }
2685 .better-payment .is-align-content-stretch {
2686 align-content: stretch !important;
2687 }
2688 .better-payment .is-align-content-start {
2689 align-content: start !important;
2690 }
2691 .better-payment .is-align-content-end {
2692 align-content: end !important;
2693 }
2694 .better-payment .is-align-content-baseline {
2695 align-content: baseline !important;
2696 }
2697 .better-payment .is-align-items-stretch {
2698 align-items: stretch !important;
2699 }
2700 .better-payment .is-align-items-flex-start {
2701 align-items: flex-start !important;
2702 }
2703 .better-payment .is-align-items-flex-end {
2704 align-items: flex-end !important;
2705 }
2706 .better-payment .is-align-items-center {
2707 align-items: center !important;
2708 }
2709 .better-payment .is-align-items-baseline {
2710 align-items: baseline !important;
2711 }
2712 .better-payment .is-align-items-start {
2713 align-items: start !important;
2714 }
2715 .better-payment .is-align-items-end {
2716 align-items: end !important;
2717 }
2718 .better-payment .is-align-items-self-start {
2719 align-items: self-start !important;
2720 }
2721 .better-payment .is-align-items-self-end {
2722 align-items: self-end !important;
2723 }
2724 .better-payment .is-align-self-auto {
2725 align-self: auto !important;
2726 }
2727 .better-payment .is-align-self-flex-start {
2728 align-self: flex-start !important;
2729 }
2730 .better-payment .is-align-self-flex-end {
2731 align-self: flex-end !important;
2732 }
2733 .better-payment .is-align-self-center {
2734 align-self: center !important;
2735 }
2736 .better-payment .is-align-self-baseline {
2737 align-self: baseline !important;
2738 }
2739 .better-payment .is-align-self-stretch {
2740 align-self: stretch !important;
2741 }
2742 .better-payment .is-flex-grow-0 {
2743 flex-grow: 0 !important;
2744 }
2745 .better-payment .is-flex-grow-1 {
2746 flex-grow: 1 !important;
2747 }
2748 .better-payment .is-flex-grow-2 {
2749 flex-grow: 2 !important;
2750 }
2751 .better-payment .is-flex-grow-3 {
2752 flex-grow: 3 !important;
2753 }
2754 .better-payment .is-flex-grow-4 {
2755 flex-grow: 4 !important;
2756 }
2757 .better-payment .is-flex-grow-5 {
2758 flex-grow: 5 !important;
2759 }
2760 .better-payment .is-flex-shrink-0 {
2761 flex-shrink: 0 !important;
2762 }
2763 .better-payment .is-flex-shrink-1 {
2764 flex-shrink: 1 !important;
2765 }
2766 .better-payment .is-flex-shrink-2 {
2767 flex-shrink: 2 !important;
2768 }
2769 .better-payment .is-flex-shrink-3 {
2770 flex-shrink: 3 !important;
2771 }
2772 .better-payment .is-flex-shrink-4 {
2773 flex-shrink: 4 !important;
2774 }
2775 .better-payment .is-flex-shrink-5 {
2776 flex-shrink: 5 !important;
2777 }
2778 .better-payment .is-clearfix::after {
2779 clear: both;
2780 content: " ";
2781 display: table;
2782 }
2783 .better-payment .is-pulled-left {
2784 float: left !important;
2785 }
2786 .better-payment .is-pulled-right {
2787 float: right !important;
2788 }
2789 .better-payment .is-radiusless {
2790 border-radius: 0 !important;
2791 }
2792 .better-payment .is-shadowless {
2793 box-shadow: none !important;
2794 }
2795 .better-payment .is-clickable {
2796 cursor: pointer !important;
2797 pointer-events: all !important;
2798 }
2799 .better-payment .is-clipped {
2800 overflow: hidden !important;
2801 }
2802 .better-payment .is-relative {
2803 position: relative !important;
2804 }
2805 .better-payment .file.no-file-name .file-cta {
2806 border-radius: 0.375em;
2807 }
2808 .better-payment .button.is-success {
2809 background-color: #47c68d;
2810 border-color: transparent;
2811 color: #fff;
2812 }
2813 @media screen and (max-width: 768px) {
2814 .better-payment .is-flex-mobile {
2815 display: flex !important;
2816 }
2817 }
2818 @media screen and (min-width: 769px), print {
2819 .better-payment .is-flex-tablet {
2820 display: flex !important;
2821 }
2822 }
2823 @media screen and (min-width: 769px) and (max-width: 1023px) {
2824 .better-payment .is-flex-tablet-only {
2825 display: flex !important;
2826 }
2827 }
2828 @media screen and (max-width: 1023px) {
2829 .better-payment .is-flex-touch {
2830 display: flex !important;
2831 }
2832 }
2833 @media screen and (min-width: 1024px) {
2834 .better-payment .is-flex-desktop {
2835 display: flex !important;
2836 }
2837 }
2838 @media screen and (min-width: 1024px) and (max-width: 1215px) {
2839 .better-payment .is-flex-desktop-only {
2840 display: flex !important;
2841 }
2842 }
2843 @media screen and (min-width: 1216px) {
2844 .better-payment .is-flex-widescreen {
2845 display: flex !important;
2846 }
2847 }
2848 @media screen and (min-width: 1216px) and (max-width: 1407px) {
2849 .better-payment .is-flex-widescreen-only {
2850 display: flex !important;
2851 }
2852 }
2853 @media screen and (min-width: 1408px) {
2854 .better-payment .is-flex-fullhd {
2855 display: flex !important;
2856 }
2857 }
2858
2859 .field-display-inline:nth-child(odd) {
2860 margin-right: 1%;
2861 }
2862
2863 .field-display-inline:nth-child(even) {
2864 margin-left: 1%;
2865 }
2866
2867 .better-payment .d-none {
2868 display: none !important;
2869 }
2870 .better-payment .flex {
2871 display: flex;
2872 }
2873 .better-payment .flex-col {
2874 flex-direction: column;
2875 }
2876 .better-payment .flex-1 {
2877 flex: 1;
2878 }
2879 .better-payment .justify-between {
2880 justify-content: space-between;
2881 }
2882 .better-payment .justify-center {
2883 justify-content: center;
2884 }
2885 .better-payment .justify-end {
2886 justify-content: flex-end;
2887 }
2888 .better-payment .items-start {
2889 align-items: flex-start;
2890 }
2891 .better-payment .items-center {
2892 align-items: center;
2893 }
2894 .better-payment .items-end {
2895 align-items: flex-end;
2896 }
2897 .better-payment .min-h-full {
2898 min-height: 100vh;
2899 }
2900 .better-payment .gap-1 {
2901 gap: 4px;
2902 }
2903 .better-payment .gap-2 {
2904 gap: 8px;
2905 }
2906 .better-payment .gap-3 {
2907 gap: 12px;
2908 }
2909 .better-payment .gap-4 {
2910 gap: 16px;
2911 }
2912 .better-payment .gap-5 {
2913 gap: 20px;
2914 }
2915 .better-payment .gap-6 {
2916 gap: 24px;
2917 }
2918 .better-payment .gap-10 {
2919 gap: 40px;
2920 }
2921 .better-payment .min-w-300 {
2922 min-width: 300px !important;
2923 }
2924 .better-payment .max-w-300 {
2925 max-width: 300px !important;
2926 }
2927 .better-payment .pointer {
2928 cursor: pointer;
2929 }
2930 .better-payment h2 {
2931 font-size: 26px;
2932 line-height: 1.2em;
2933 font-weight: 700;
2934 font-family: "IBM Plex Sans", sans-serif;
2935 color: #2b2748;
2936 }
2937 .better-payment .bp-dashboard-header h2 {
2938 font-weight: 400;
2939 }
2940 .better-payment button {
2941 font-size: 14px;
2942 line-height: 1.1em;
2943 color: #6859fa;
2944 display: inline-flex;
2945 align-items: center;
2946 justify-content: center;
2947 padding: 8px 16px;
2948 background: #f0eefe;
2949 border-radius: 20px;
2950 border: none;
2951 transition: all 0.25s ease-in-out;
2952 cursor: pointer;
2953 }
2954 .better-payment button.primary-btn {
2955 font-size: 16px;
2956 font-weight: 500;
2957 padding: 12px 18px;
2958 border-radius: 8px;
2959 color: #6859fa;
2960 }
2961 .better-payment button.complete {
2962 color: #ffffff;
2963 background: #0eca86;
2964 }
2965 .better-payment button.incomplete {
2966 color: #ffffff;
2967 background: #ffda15;
2968 }
2969 .better-payment button.active {
2970 color: #00c679;
2971 background: rgba(0, 198, 123, 0.1019607843);
2972 border-radius: 20px;
2973 }
2974 .better-payment button.inactive {
2975 color: #edaa00;
2976 background: rgba(255, 209, 0, 0.1019607843);
2977 }
2978 .better-payment button.cancel {
2979 color: #ff0000;
2980 background: rgba(255, 0, 0, 0.1490196078);
2981 }
2982 .better-payment .bp--sidebar-wrapper {
2983 padding: 24px;
2984 background: #fff;
2985 min-width: 270px;
2986 min-height: 100vh;
2987 border: 1px solid #f1f1f1;
2988 }
2989 .better-payment .bp--author {
2990 display: flex;
2991 align-items: center;
2992 gap: 16px;
2993 margin-bottom: 40px;
2994 }
2995 .better-payment .bp--author img {
2996 width: 32px !important;
2997 height: 32px !important;
2998 min-width: 32px;
2999 border-radius: 50%;
3000 object-fit: cover;
3001 flex-shrink: 0;
3002 display: block;
3003 }
3004 .better-payment .bp--author h5 {
3005 font-size: 20px;
3006 font-weight: 500;
3007 line-height: 1.1em;
3008 color: #48506d;
3009 }
3010 .better-payment .bp--sidebar-nav-list {
3011 display: flex;
3012 flex-direction: column;
3013 gap: 12px;
3014 }
3015 .better-payment .bp--sidebar-nav {
3016 display: flex;
3017 align-items: center;
3018 gap: 12px;
3019 padding: 4px 8px;
3020 cursor: pointer;
3021 }
3022 .better-payment .bp--nav-icon {
3023 display: inline-flex;
3024 }
3025 .better-payment span.bp--nav-icon svg {
3026 width: 20px;
3027 height: 20px;
3028 }
3029 .better-payment .bp--sidebar-nav.active span.bp--nav-icon svg path {
3030 stroke: #000000;
3031 }
3032 .better-payment .bp--sidebar-nav .bp--nav-text {
3033 color: #48506d;
3034 font-size: 16px;
3035 font-weight: 500;
3036 transition: ease-in-out 0.25s;
3037 }
3038 .better-payment .bp--sidebar-nav.active .bp--nav-text {
3039 color: #000000;
3040 }
3041 .better-payment .bp--sidebar-nav:hover .bp--nav-text {
3042 color: #2b2748;
3043 }
3044 .better-payment .bp--sidebar-nav.active {
3045 color: #2b2748;
3046 }
3047 .better-payment .bp--db-main-wrapper {
3048 padding-right: 24px;
3049 flex-basis: calc(100% - 294px);
3050 max-width: calc(100% - 294px);
3051 }
3052 .better-payment .bp--db-header {
3053 display: flex;
3054 justify-content: space-between;
3055 align-items: center;
3056 padding: 16px 24px;
3057 background: #fff;
3058 margin-bottom: 24px;
3059 border: 1px solid #f1f1f1;
3060 }
3061 .better-payment .bp--db-header img {
3062 max-width: 200px;
3063 }
3064 .better-payment .bp--table-wrapper {
3065 display: flex;
3066 flex-direction: column;
3067 overflow: auto;
3068 }
3069 .better-payment .bp--table-header {
3070 background: rgba(110, 88, 247, 0.1);
3071 border: none;
3072 padding: 10px 24px;
3073 min-width: 1442px;
3074 }
3075 .better-payment .bp--table-header .th,
3076 .better-payment .bp--table-header .th h5 {
3077 font-size: 16px;
3078 line-height: 1.2em;
3079 font-weight: 500;
3080 color: #2a3256;
3081 }
3082 .better-payment .bp--table-body {
3083 padding: 10px 24px;
3084 min-width: 1442px;
3085 background: #ffffff;
3086 border-left: 1px solid #f1f1f1;
3087 border-right: 1px solid #f1f1f1;
3088 }
3089 .better-payment .bp--table-body {
3090 border-bottom: 1px solid rgba(110, 88, 247, 0.1);
3091 }
3092 .better-payment .bp--table-body .td h5,
3093 .better-payment .bp--table-body .td h5 span {
3094 font-size: 16px;
3095 font-weight: 400;
3096 line-height: 1.2em;
3097 color: #2a3256;
3098 }
3099 .better-payment .bp--table-body .td p {
3100 font-size: 14px;
3101 color: #48506d;
3102 display: inline-flex;
3103 }
3104 .better-payment .bp--table-body .td span {
3105 font-size: 13px;
3106 color: #797e90;
3107 }
3108 .better-payment .bp--table-body .price {
3109 font-size: 18px;
3110 line-height: 1em;
3111 font-weight: 500;
3112 color: #2b2748;
3113 padding-right: 4px;
3114 }
3115 .better-payment .td.details i {
3116 font-size: 16px;
3117 color: #48506d;
3118 }
3119 .better-payment .td.details .product--img {
3120 max-width: 24px;
3121 }
3122 .better-payment .td.details .source--img {
3123 max-width: 80px;
3124 }
3125 .better-payment .th.details,
3126 .better-payment .td.details {
3127 min-width: 130px;
3128 max-width: 130px;
3129 flex: 1;
3130 }
3131 .better-payment .th.details.user-name,
3132 .better-payment .td.details.user-name {
3133 max-width: 200px;
3134 }
3135 .better-payment .transactions .th.details:first-child,
3136 .better-payment .transactions .td.details:first-child {
3137 min-width: 170px;
3138 }
3139 .better-payment .transactions .th.details:nth-child(2),
3140 .better-payment .transactions .td.details:nth-child(2) {
3141 min-width: 220px;
3142 max-width: 220px;
3143 }
3144 .better-payment .transactions .th.details:nth-child(4),
3145 .better-payment .transactions .td.details:nth-child(4) {
3146 min-width: 220px;
3147 max-width: 220px;
3148 }
3149 .better-payment .bp--table-body .td .action-icon {
3150 border-radius: 4px;
3151 display: flex;
3152 align-items: center;
3153 justify-content: center;
3154 width: 48px;
3155 height: 36px;
3156 background: rgba(110, 88, 247, 0.1);
3157 }
3158 .better-payment .bp--table-body .td span.action-icon i {
3159 font-size: 20px;
3160 line-height: 1.2em;
3161 color: #6e58f7;
3162 }
3163 .better-payment .bp-flexbox-container {
3164 display: flex;
3165 align-items: center;
3166 gap: 5px;
3167 }
3168 .better-payment .bp-shortend-text {
3169 width: 200px;
3170 white-space: nowrap;
3171 overflow: hidden;
3172 text-overflow: ellipsis;
3173 }
3174 .better-payment .bp--table-wrapper .bp--table-header {
3175 min-width: 1640px;
3176 }
3177 .better-payment .bp--table-wrapper .bp--table-header.bp-min_width-1300 {
3178 min-width: 1300px;
3179 padding-left: 14px;
3180 padding-right: 14px;
3181 }
3182 .better-payment .bp--table-wrapper .bp--table-header .th.details.email {
3183 max-width: 200px;
3184 min-width: 200px;
3185 }
3186 .better-payment .bp--table-wrapper .bp--table-header .th.details.transaction {
3187 max-width: 200px;
3188 min-width: 200px;
3189 }
3190 .better-payment .bp--table-wrapper .bp--table-header .th.user-name {
3191 max-width: 200px;
3192 min-width: 200px;
3193 }
3194 .better-payment .bp--table-wrapper .bp--table-body {
3195 min-width: 1640px;
3196 }
3197 .better-payment .bp--table-wrapper .bp--table-body.bp-min_width-1300 {
3198 min-width: 1300px;
3199 padding-left: 14px;
3200 padding-right: 14px;
3201 }
3202 .better-payment .bp--table-wrapper .bp--table-body .td p {
3203 align-items: center;
3204 gap: 4px;
3205 }
3206 .better-payment .bp--table-wrapper .bp--table-body .td span {
3207 font-size: 14px;
3208 color: #48506d;
3209 }
3210 .better-payment .bp--table-wrapper .bp--table-body .td.details.email {
3211 max-width: 200px;
3212 min-width: 200px;
3213 }
3214 .better-payment .bp--table-wrapper .bp--table-body .td.details.email p span:first-child {
3215 max-width: 170px;
3216 white-space: nowrap;
3217 overflow: hidden;
3218 text-overflow: ellipsis;
3219 }
3220 .better-payment .bp--table-wrapper .bp--table-body .td.details.transaction {
3221 max-width: 200px;
3222 min-width: 200px;
3223 }
3224 .better-payment .bp--table-wrapper .bp--table-body .td.details.transaction p span:first-child {
3225 max-width: 170px;
3226 white-space: nowrap;
3227 overflow: hidden;
3228 text-overflow: ellipsis;
3229 }
3230 .better-payment .bp-copy-clipboard-info,
3231 .better-payment .bp-email-copy-clipboard-info {
3232 color: rgb(110, 88, 247) !important;
3233 }
3234 .better-payment .better-payment-user-dashboard-container h1,
3235 .better-payment .better-payment-user-dashboard-container h2,
3236 .better-payment .better-payment-user-dashboard-container h3,
3237 .better-payment .better-payment-user-dashboard-container h4,
3238 .better-payment .better-payment-user-dashboard-container h5,
3239 .better-payment .better-payment-user-dashboard-container h6,
3240 .better-payment .better-payment-user-dashboard-container p {
3241 margin: 0;
3242 padding: 0;
3243 }
3244 .better-payment .bp-logo {
3245 margin-bottom: 55px;
3246 text-align: center;
3247 }
3248 .better-payment .bp-logo img {
3249 max-height: 36px;
3250 width: auto;
3251 }
3252 .better-payment .bp-row {
3253 display: flex;
3254 flex-wrap: wrap;
3255 margin-left: -12px;
3256 margin-right: -12px;
3257 }
3258 .better-payment .bp-col {
3259 position: relative;
3260 width: 100%;
3261 min-height: 1px;
3262 padding-left: 12px;
3263 padding-right: 12px;
3264 }
3265 .better-payment .bp-col1 {
3266 width: 8.333333333%;
3267 }
3268 .better-payment .bp-col_2 {
3269 width: 16.66666666%;
3270 }
3271 .better-payment .bp-col_3 {
3272 width: 20%;
3273 }
3274 .better-payment .bp-col_4 {
3275 width: 25%;
3276 }
3277 .better-payment .bp-col_5 {
3278 width: 33.333333333%;
3279 }
3280 .better-payment .bp-col_6 {
3281 width: 41.3333333%;
3282 }
3283 .better-payment .bp-col_7 {
3284 width: 50%;
3285 }
3286 .better-payment .bp-col_8 {
3287 width: 58.333333333%;
3288 }
3289 .better-payment .bp-col_9 {
3290 width: 66.666666666%;
3291 }
3292 .better-payment .bp-col_10 {
3293 width: 75%;
3294 }
3295 .better-payment .bp-col_11 {
3296 width: 83.333333333%;
3297 }
3298 .better-payment .bp-col_12 {
3299 width: 91.666666666%;
3300 }
3301 .better-payment .bp-col_13 {
3302 width: 100%;
3303 }
3304 .better-payment .w-80 {
3305 width: 80px;
3306 text-align: left;
3307 }
3308 .better-payment .w-195 {
3309 flex-basis: 195px;
3310 }
3311 .better-payment .bp-amount_wrapper {
3312 margin-bottom: 24px;
3313 }
3314 .better-payment .td-product_logo {
3315 line-height: 0;
3316 max-width: 90px;
3317 }
3318 .better-payment .td-product_logo img {
3319 object-fit: contain;
3320 height: 20px;
3321 width: 100%;
3322 }
3323 .better-payment .bp-dashboard_wrapper {
3324 width: 100%;
3325 background-color: #ffffff;
3326 }
3327 .better-payment .bp-dashboard_wrapper .bp-dashboard_title {
3328 font-size: 32px;
3329 font-weight: 600;
3330 text-align: left;
3331 color: #2a3256;
3332 margin-bottom: 36px;
3333 }
3334 .better-payment .bp-amount {
3335 width: 100%;
3336 height: auto;
3337 padding: 0px;
3338 border-radius: 12px;
3339 border: 1px solid #eaecf0;
3340 overflow: hidden;
3341 }
3342 .better-payment .bp-amount h4 {
3343 margin: 16px;
3344 font-size: 16px;
3345 font-weight: 500;
3346 color: #667085;
3347 }
3348 .better-payment .bp-amount_price {
3349 font-size: 30px;
3350 font-weight: 600;
3351 text-align: left;
3352 color: #2a3256;
3353 padding: 16px;
3354 }
3355 .better-payment .bp-transaction {
3356 padding: 10px 16px;
3357 background-color: #fafafc;
3358 width: 100%;
3359 font-size: 13px;
3360 font-weight: 400;
3361 color: #667085;
3362 }
3363 @media (min-width: 1500px) {
3364 .better-payment .bp-amount_price {
3365 font-size: 40px;
3366 }
3367 .better-payment .bp-amount h4 {
3368 font-size: 18px;
3369 }
3370 .better-payment .bp-transaction {
3371 font-size: 16px;
3372 }
3373 }
3374 .better-payment .bp-transaction_number {
3375 font-weight: 500;
3376 color: #6e58f7;
3377 }
3378 .better-payment .bp-analytics_chart-wrapper {
3379 margin-bottom: 24px;
3380 }
3381 .better-payment .bp-form_control {
3382 border: 1px solid #d9e1f4;
3383 border-radius: 8px;
3384 padding: 11px 16px;
3385 }
3386 .better-payment .bp-form_control option {
3387 font-size: 14px;
3388 font-weight: 500;
3389 color: #48506d;
3390 }
3391 .better-payment .filter-btn {
3392 padding: 8px 16px 8px 16px;
3393 border-radius: 8px;
3394 }
3395 .better-payment .bp-recent_box {
3396 background-color: #ffffff;
3397 border: 1px solid #eaecf0;
3398 border-radius: 16px;
3399 padding: 0 16px;
3400 }
3401 .better-payment .bp-recent_header {
3402 padding: 16px 0;
3403 border-bottom: 1px solid #eaecf0;
3404 margin-bottom: 16px;
3405 }
3406 .better-payment .bp-recent_header span {
3407 line-height: 0;
3408 }
3409 .better-payment .bp-view_all-btn {
3410 font-size: 14px;
3411 font-weight: 500;
3412 color: #48506d;
3413 border: 1px solid #d9e1f4;
3414 border-radius: 4px;
3415 padding: 6px 16px;
3416 text-decoration: none;
3417 }
3418 .better-payment .bp-recent_header-title {
3419 color: #2a3256;
3420 font-size: 16px;
3421 font-weight: 600;
3422 }
3423 .better-payment .bp-th {
3424 background-color: #fafafc;
3425 border-radius: 4px;
3426 padding: 9px 12px 9px 12px;
3427 margin-bottom: 4px;
3428 }
3429 .better-payment .bp-th h5 {
3430 font-size: 14px;
3431 font-weight: 500;
3432 color: #667085;
3433 }
3434 .better-payment .bp-recent_body {
3435 padding-bottom: 16px;
3436 }
3437 .better-payment .bp-product_scroll {
3438 min-height: 334px;
3439 max-height: 334px;
3440 overflow: auto;
3441 }
3442 .better-payment .td-product {
3443 gap: 6px;
3444 padding: 9px 11px;
3445 }
3446 .better-payment .td-product_name {
3447 font-size: 12px;
3448 font-weight: 500;
3449 color: #2a3256;
3450 margin-bottom: 4px;
3451 }
3452 .better-payment .td-details {
3453 font-size: 10px;
3454 font-weight: 400;
3455 color: #667085;
3456 }
3457 .better-payment .p-0 {
3458 padding: 0 !important;
3459 }
3460 .better-payment .mb-0 {
3461 margin-bottom: 0 !important;
3462 }
3463 .better-payment .pb-0 {
3464 padding-bottom: 0 !important;
3465 }
3466 .better-payment .pl-0 {
3467 padding-left: 0 !important;
3468 }
3469 .better-payment .w-auto {
3470 min-width: auto !important;
3471 width: auto !important;
3472 }
3473 .better-payment .line-height-0 {
3474 line-height: 0;
3475 }
3476 .better-payment .better-payment-transaction-import {
3477 margin-bottom: 5px;
3478 }
3479 @media only screen and (max-width: 1200px) {
3480 .better-payment .bp-amount h4,
3481 .better-payment .bp-transaction {
3482 font-size: 14px;
3483 }
3484 .better-payment .bp-amount_price {
3485 font-size: 32px;
3486 }
3487 .better-payment .bp-subscription_wrapper .bp-col_7 {
3488 width: 100%;
3489 }
3490 .better-payment .bp-analytics_chart-wrapper .bp-col_10,
3491 .better-payment .bp-analytics_chart-wrapper .bp-col_4 {
3492 width: 100%;
3493 }
3494 }
3495 @media only screen and (max-width: 1024px) {
3496 .better-payment .bp-logo {
3497 margin-bottom: 45px;
3498 }
3499 .better-payment .bp-amount_wrapper .bp-col_4 {
3500 width: 50%;
3501 }
3502 .better-payment .bp-amount {
3503 margin-bottom: 24px;
3504 }
3505 .better-payment .bp-th,
3506 .better-payment .bp-td {
3507 justify-content: space-between;
3508 }
3509 .better-payment .bp-th {
3510 padding: 9px 0px 9px 12px;
3511 }
3512 }
3513 @media only screen and (max-width: 800px) {
3514 .better-payment .flex-wrap {
3515 flex-wrap: wrap !important;
3516 }
3517 .better-payment .bp-amount_wrapper .bp-col_4 {
3518 width: 100% !important;
3519 }
3520 }
3521 @media only screen and (max-width: 1024px) {
3522 .better-payment .gap-2 {
3523 gap: 4px;
3524 }
3525 .better-payment .gap-3 {
3526 gap: 6px;
3527 }
3528 .better-payment .gap-4 {
3529 gap: 8px;
3530 }
3531 .better-payment .gap-5 {
3532 gap: 12px;
3533 }
3534 .better-payment .gap-6 {
3535 gap: 16px;
3536 }
3537 .better-payment .gap-10 {
3538 gap: 24px;
3539 }
3540 .better-payment h2 {
3541 font-size: 20px;
3542 }
3543 .better-payment button {
3544 font-size: 12px;
3545 padding: 7px 12px;
3546 }
3547 .better-payment button.primary-btn {
3548 font-size: 14px;
3549 padding: 10px 16px;
3550 }
3551 .better-payment .bp--sidebar-wrapper {
3552 min-width: 200px;
3553 }
3554 .better-payment .bp--sidebar-nav-list {
3555 gap: 10px;
3556 }
3557 .better-payment .bp--sidebar-nav {
3558 gap: 8px;
3559 }
3560 .better-payment .bp--author {
3561 gap: 12px;
3562 margin-bottom: 40px;
3563 }
3564 .better-payment span.bp--nav-icon svg {
3565 width: 20px;
3566 height: 20px;
3567 }
3568 .better-payment .bp--sidebar-nav .bp--nav-text {
3569 font-size: 14px;
3570 }
3571 .better-payment .bp--db-main-wrapper {
3572 padding-right: 16px;
3573 flex-basis: calc(100% - 216px);
3574 max-width: calc(100% - 216px);
3575 }
3576 .better-payment .bp--db-header {
3577 padding: 12px 20px;
3578 margin-bottom: 16px;
3579 }
3580 .better-payment .bp--table-body {
3581 padding: 10px 20px;
3582 }
3583 .better-payment .bp--table-body .td .action-icon {
3584 width: 36px;
3585 height: 30px;
3586 }
3587 .better-payment .bp--table-header .th {
3588 font-size: 14px;
3589 }
3590 .better-payment .bp--table-body .td p {
3591 font-size: 12px;
3592 }
3593 .better-payment .bp--table-body .td span.action-icon i {
3594 font-size: 16px;
3595 }
3596 }
3597 .better-payment .bp-no_subscription-text {
3598 font-size: 14px;
3599 color: #48506d;
3600 font-weight: 400;
3601 }
3602 .better-payment .td-product_price span {
3603 font-size: 13px;
3604 font-weight: 600;
3605 color: #2a3256;
3606 }
3607 .better-payment .padding-0 {
3608 padding: 0px;
3609 }
3610 .better-payment .bp-hidden-xs {
3611 display: block;
3612 }
3613 .better-payment .bp-visible-xs {
3614 display: none;
3615 }
3616 .better-payment {
3617 /* Media Queries : Start */
3618 }
3619 @media (max-width: 767.98px) {
3620 .better-payment .bp-hidden-xs {
3621 display: none;
3622 }
3623 .better-payment .bp-visible-xs {
3624 display: block;
3625 }
3626 .better-payment .bp--db-main-wrapper {
3627 width: 100%;
3628 max-width: 100%;
3629 flex-basis: 100%;
3630 padding-right: 0px;
3631 }
3632 .better-payment .better-payment-user-dashboard-sidebar {
3633 position: absolute;
3634 top: 0;
3635 left: 0;
3636 z-index: 999;
3637 height: 100%;
3638 }
3639 .better-payment .bp-overlay {
3640 position: absolute;
3641 top: 0;
3642 bottom: 0;
3643 left: 0;
3644 right: 0;
3645 background-color: rgba(0, 0, 0, 0.5);
3646 z-index: 1;
3647 display: none;
3648 }
3649 .better-payment .bp-dashboard-hamburger {
3650 background: transparent;
3651 cursor: pointer;
3652 display: flex;
3653 align-items: center;
3654 }
3655 }
3656 .better-payment {
3657 /* Media Queries : End */
3658 }
3659
3660 .better-payment-warning {
3661 font-size: 13px;
3662 line-height: 18px;
3663 background-color: #f3f0ca;
3664 color: #886726;
3665 padding: 10px;
3666 border-radius: 3px;
3667 }
3668
3669 .better-payment-dynamic-value-info {
3670 word-break: break-word;
3671 }
3672
3673 div.bp-thank_page-custom-logo_wrapper-error svg {
3674 width: 70px;
3675 height: 70px;
3676 background: rgba(238, 96, 89, 0.1019607843);
3677 padding: 10px;
3678 border-radius: 16px;
3679 }
3680 div.bp-thank_page-custom-logo_wrapper-error svg path {
3681 stroke: #f44336;
3682 fill: #f44336;
3683 }
3684
3685 .bp-thank_page div.bp-thank_page-custom-logo_wrapper-success svg {
3686 width: 70px;
3687 height: 70px;
3688 background: rgba(107, 89, 238, 0.1019607843);
3689 padding: 10px;
3690 border-radius: 16px;
3691 }
3692 .bp-thank_page div.bp-thank_page-custom-logo_wrapper-success svg path {
3693 stroke: #6b59ee;
3694 fill: #6b59ee;
3695 }
3696
3697 .bp-thank_page-logo {
3698 display: flex;
3699 align-items: center;
3700 justify-content: center;
3701 }
3702
3703 div.bp-thank_page-custom-logo_wrapper-success.pf-block {
3704 display: flex;
3705 align-items: center;
3706 justify-content: center;
3707 line-height: 0;
3708 width: 70px;
3709 height: 70px;
3710 background: rgba(107, 89, 238, 0.1019607843);
3711 padding: 10px;
3712 border-radius: 16px;
3713 }
3714 div.bp-thank_page-custom-logo_wrapper-success.pf-block span,
3715 div.bp-thank_page-custom-logo_wrapper-success.pf-block i {
3716 font-size: 42px;
3717 color: #6b59ee;
3718 height: auto;
3719 width: auto;
3720 }
3721
3722 div.bp-thank_page-custom-logo_wrapper-error.pf-block {
3723 display: flex;
3724 align-items: center;
3725 justify-content: center;
3726 line-height: 0;
3727 width: 70px;
3728 height: 70px;
3729 background: rgba(238, 96, 89, 0.1019607843);
3730 padding: 10px;
3731 border-radius: 16px;
3732 }
3733 div.bp-thank_page-custom-logo_wrapper-error.pf-block span,
3734 div.bp-thank_page-custom-logo_wrapper-error.pf-block i {
3735 font-size: 42px;
3736 color: #f44336;
3737 height: auto;
3738 width: auto;
3739 }
3740
3741 .better-payment a {
3742 text-decoration: none;
3743 }
3744