PluginProbe
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More / trunk
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More vtrunk
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 1.0.5 1.0.6 All 66 releases
better-payment / assets / css / common.css

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

3,968 lines 90.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!****************************************************************************************************************************************************************************************************************!*\
2 !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[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, .better-payment .file.is-white:hover .file-cta {
1961 background-color: #f9f9f9;
1962 border-color: transparent;
1963 color: #0a0a0a;
1964 }
1965 .better-payment .file.is-white.is-focused .file-cta, .better-payment .file.is-white:focus .file-cta {
1966 border-color: transparent;
1967 box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
1968 color: #0a0a0a;
1969 }
1970 .better-payment .file.is-white.is-active .file-cta, .better-payment .file.is-white:active .file-cta {
1971 background-color: #f2f2f2;
1972 border-color: transparent;
1973 color: #0a0a0a;
1974 }
1975 .better-payment .file.is-black .file-cta {
1976 background-color: #0a0a0a;
1977 border-color: transparent;
1978 color: #fff;
1979 }
1980 .better-payment .file.is-black.is-hovered .file-cta, .better-payment .file.is-black:hover .file-cta {
1981 background-color: #040404;
1982 border-color: transparent;
1983 color: #fff;
1984 }
1985 .better-payment .file.is-black.is-focused .file-cta, .better-payment .file.is-black:focus .file-cta {
1986 border-color: transparent;
1987 box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
1988 color: #fff;
1989 }
1990 .better-payment .file.is-black.is-active .file-cta, .better-payment .file.is-black:active .file-cta {
1991 background-color: #000;
1992 border-color: transparent;
1993 color: #fff;
1994 }
1995 .better-payment .file.is-light .file-cta {
1996 background-color: #f4f4f4;
1997 border-color: transparent;
1998 color: rgba(0, 0, 0, 0.7);
1999 }
2000 .better-payment .file.is-light.is-hovered .file-cta, .better-payment .file.is-light:hover .file-cta {
2001 background-color: #eee;
2002 border-color: transparent;
2003 color: rgba(0, 0, 0, 0.7);
2004 }
2005 .better-payment .file.is-light.is-focused .file-cta, .better-payment .file.is-light:focus .file-cta {
2006 border-color: transparent;
2007 box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
2008 color: rgba(0, 0, 0, 0.7);
2009 }
2010 .better-payment .file.is-light.is-active .file-cta, .better-payment .file.is-light:active .file-cta {
2011 background-color: #e8e8e8;
2012 border-color: transparent;
2013 color: rgba(0, 0, 0, 0.7);
2014 }
2015 .better-payment .file.is-dark .file-cta {
2016 background-color: #353535;
2017 border-color: transparent;
2018 color: #fff;
2019 }
2020 .better-payment .file.is-dark.is-hovered .file-cta, .better-payment .file.is-dark:hover .file-cta {
2021 background-color: #2f2f2f;
2022 border-color: transparent;
2023 color: #fff;
2024 }
2025 .better-payment .file.is-dark.is-focused .file-cta, .better-payment .file.is-dark:focus .file-cta {
2026 border-color: transparent;
2027 box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
2028 color: #fff;
2029 }
2030 .better-payment .file.is-dark.is-active .file-cta, .better-payment .file.is-dark:active .file-cta {
2031 background-color: #292929;
2032 border-color: transparent;
2033 color: #fff;
2034 }
2035 .better-payment .file.is-primary .file-cta {
2036 background-color: #00d1b1;
2037 border-color: transparent;
2038 color: #fff;
2039 }
2040 .better-payment .file.is-primary.is-hovered .file-cta, .better-payment .file.is-primary:hover .file-cta {
2041 background-color: #00c4a7;
2042 border-color: transparent;
2043 color: #fff;
2044 }
2045 .better-payment .file.is-primary.is-focused .file-cta, .better-payment .file.is-primary:focus .file-cta {
2046 border-color: transparent;
2047 box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
2048 color: #fff;
2049 }
2050 .better-payment .file.is-primary.is-active .file-cta, .better-payment .file.is-primary:active .file-cta {
2051 background-color: #00b89c;
2052 border-color: transparent;
2053 color: #fff;
2054 }
2055 .better-payment .file.is-link .file-cta {
2056 background-color: #475ec6;
2057 border-color: transparent;
2058 color: #fff;
2059 }
2060 .better-payment .file.is-link.is-hovered .file-cta, .better-payment .file.is-link:hover .file-cta {
2061 background-color: #3e56c4;
2062 border-color: transparent;
2063 color: #fff;
2064 }
2065 .better-payment .file.is-link.is-focused .file-cta, .better-payment .file.is-link:focus .file-cta {
2066 border-color: transparent;
2067 box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.25);
2068 color: #fff;
2069 }
2070 .better-payment .file.is-link.is-active .file-cta, .better-payment .file.is-link:active .file-cta {
2071 background-color: #3a51bb;
2072 border-color: transparent;
2073 color: #fff;
2074 }
2075 .better-payment .file.is-info .file-cta {
2076 background-color: #3e8ed0;
2077 border-color: transparent;
2078 color: #fff;
2079 }
2080 .better-payment .file.is-info.is-hovered .file-cta, .better-payment .file.is-info:hover .file-cta {
2081 background-color: #3488ce;
2082 border-color: transparent;
2083 color: #fff;
2084 }
2085 .better-payment .file.is-info.is-focused .file-cta, .better-payment .file.is-info:focus .file-cta {
2086 border-color: transparent;
2087 box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25);
2088 color: #fff;
2089 }
2090 .better-payment .file.is-info.is-active .file-cta, .better-payment .file.is-info:active .file-cta {
2091 background-color: #3082c5;
2092 border-color: transparent;
2093 color: #fff;
2094 }
2095 .better-payment .file.is-success .file-cta {
2096 background-color: #47c68d;
2097 border-color: transparent;
2098 color: #fff;
2099 }
2100 .better-payment .file.is-success.is-hovered .file-cta, .better-payment .file.is-success:hover .file-cta {
2101 background-color: #3ec487;
2102 border-color: transparent;
2103 color: #fff;
2104 }
2105 .better-payment .file.is-success.is-focused .file-cta, .better-payment .file.is-success:focus .file-cta {
2106 border-color: transparent;
2107 box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25);
2108 color: #fff;
2109 }
2110 .better-payment .file.is-success.is-active .file-cta, .better-payment .file.is-success:active .file-cta {
2111 background-color: #3abb81;
2112 border-color: transparent;
2113 color: #fff;
2114 }
2115 .better-payment .file.is-warning .file-cta {
2116 background-color: #ffdf89;
2117 border-color: transparent;
2118 color: rgba(0, 0, 0, 0.7);
2119 }
2120 .better-payment .file.is-warning.is-hovered .file-cta, .better-payment .file.is-warning:hover .file-cta {
2121 background-color: #ffdc7d;
2122 border-color: transparent;
2123 color: rgba(0, 0, 0, 0.7);
2124 }
2125 .better-payment .file.is-warning.is-focused .file-cta, .better-payment .file.is-warning:focus .file-cta {
2126 border-color: transparent;
2127 box-shadow: 0 0 0.5em rgba(255, 224, 138, 0.25);
2128 color: rgba(0, 0, 0, 0.7);
2129 }
2130 .better-payment .file.is-warning.is-active .file-cta, .better-payment .file.is-warning:active .file-cta {
2131 background-color: #ffd970;
2132 border-color: transparent;
2133 color: rgba(0, 0, 0, 0.7);
2134 }
2135 .better-payment .file.is-danger .file-cta {
2136 background-color: #f14668;
2137 border-color: transparent;
2138 color: #fff;
2139 }
2140 .better-payment .file.is-danger.is-hovered .file-cta, .better-payment .file.is-danger:hover .file-cta {
2141 background-color: #f03a5f;
2142 border-color: transparent;
2143 color: #fff;
2144 }
2145 .better-payment .file.is-danger.is-focused .file-cta, .better-payment .file.is-danger:focus .file-cta {
2146 border-color: transparent;
2147 box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25);
2148 color: #fff;
2149 }
2150 .better-payment .file.is-danger.is-active .file-cta, .better-payment .file.is-danger:active .file-cta {
2151 background-color: #ef2e55;
2152 border-color: transparent;
2153 color: #fff;
2154 }
2155 .better-payment .file.is-expo .file-cta {
2156 background-color: #ffd257;
2157 border-color: transparent;
2158 color: #fff;
2159 }
2160 .better-payment .file.is-expo.is-hovered .file-cta, .better-payment .file.is-expo:hover .file-cta {
2161 background-color: #ffcf4a;
2162 border-color: transparent;
2163 color: #fff;
2164 }
2165 .better-payment .file.is-expo.is-focused .file-cta, .better-payment .file.is-expo:focus .file-cta {
2166 border-color: transparent;
2167 box-shadow: 0 0 0.5em rgba(255, 210, 87, 0.25);
2168 color: #fff;
2169 }
2170 .better-payment .file.is-expo.is-active .file-cta, .better-payment .file.is-expo:active .file-cta {
2171 background-color: #ffcb3e;
2172 border-color: transparent;
2173 color: #fff;
2174 }
2175 .better-payment .file.is-love .file-cta {
2176 background-color: #f14668;
2177 border-color: transparent;
2178 color: #fff;
2179 }
2180 .better-payment .file.is-love.is-hovered .file-cta, .better-payment .file.is-love:hover .file-cta {
2181 background-color: #f03a5f;
2182 border-color: transparent;
2183 color: #fff;
2184 }
2185 .better-payment .file.is-love.is-focused .file-cta, .better-payment .file.is-love:focus .file-cta {
2186 border-color: transparent;
2187 box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25);
2188 color: #fff;
2189 }
2190 .better-payment .file.is-love.is-active .file-cta, .better-payment .file.is-love:active .file-cta {
2191 background-color: #ef2e55;
2192 border-color: transparent;
2193 color: #fff;
2194 }
2195 .better-payment .file.is-patreon .file-cta {
2196 background-color: #f96854;
2197 border-color: transparent;
2198 color: #fff;
2199 }
2200 .better-payment .file.is-patreon.is-hovered .file-cta, .better-payment .file.is-patreon:hover .file-cta {
2201 background-color: #f95d48;
2202 border-color: transparent;
2203 color: #fff;
2204 }
2205 .better-payment .file.is-patreon.is-focused .file-cta, .better-payment .file.is-patreon:focus .file-cta {
2206 border-color: transparent;
2207 box-shadow: 0 0 0.5em rgba(249, 104, 84, 0.25);
2208 color: #fff;
2209 }
2210 .better-payment .file.is-patreon.is-active .file-cta, .better-payment .file.is-patreon:active .file-cta {
2211 background-color: #f8523b;
2212 border-color: transparent;
2213 color: #fff;
2214 }
2215 .better-payment .file.is-rss .file-cta {
2216 background-color: #f26522;
2217 border-color: transparent;
2218 color: #fff;
2219 }
2220 .better-payment .file.is-rss.is-hovered .file-cta, .better-payment .file.is-rss:hover .file-cta {
2221 background-color: #f15d16;
2222 border-color: transparent;
2223 color: #fff;
2224 }
2225 .better-payment .file.is-rss.is-focused .file-cta, .better-payment .file.is-rss:focus .file-cta {
2226 border-color: transparent;
2227 box-shadow: 0 0 0.5em rgba(242, 101, 34, 0.25);
2228 color: #fff;
2229 }
2230 .better-payment .file.is-rss.is-active .file-cta, .better-payment .file.is-rss:active .file-cta {
2231 background-color: #ed560e;
2232 border-color: transparent;
2233 color: #fff;
2234 }
2235 .better-payment .file.is-bleeding .file-cta {
2236 background-color: #abf47c;
2237 border-color: transparent;
2238 color: rgba(0, 0, 0, 0.7);
2239 }
2240 .better-payment .file.is-bleeding.is-hovered .file-cta, .better-payment .file.is-bleeding:hover .file-cta {
2241 background-color: #a3f370;
2242 border-color: transparent;
2243 color: rgba(0, 0, 0, 0.7);
2244 }
2245 .better-payment .file.is-bleeding.is-focused .file-cta, .better-payment .file.is-bleeding:focus .file-cta {
2246 border-color: transparent;
2247 box-shadow: 0 0 0.5em rgba(171, 244, 124, 0.25);
2248 color: rgba(0, 0, 0, 0.7);
2249 }
2250 .better-payment .file.is-bleeding.is-active .file-cta, .better-payment .file.is-bleeding:active .file-cta {
2251 background-color: #9cf264;
2252 border-color: transparent;
2253 color: rgba(0, 0, 0, 0.7);
2254 }
2255 .better-payment .file.is-sass .file-cta {
2256 background-color: #bf4080;
2257 border-color: transparent;
2258 color: #fff;
2259 }
2260 .better-payment .file.is-sass.is-hovered .file-cta, .better-payment .file.is-sass:hover .file-cta {
2261 background-color: #b53d7a;
2262 border-color: transparent;
2263 color: #fff;
2264 }
2265 .better-payment .file.is-sass.is-focused .file-cta, .better-payment .file.is-sass:focus .file-cta {
2266 border-color: transparent;
2267 box-shadow: 0 0 0.5em rgba(191, 64, 128, 0.25);
2268 color: #fff;
2269 }
2270 .better-payment .file.is-sass.is-active .file-cta, .better-payment .file.is-sass:active .file-cta {
2271 background-color: #ac3a73;
2272 border-color: transparent;
2273 color: #fff;
2274 }
2275 .better-payment .file.is-amazon .file-cta {
2276 background-color: #ffd863;
2277 border-color: transparent;
2278 color: rgba(0, 0, 0, 0.7);
2279 }
2280 .better-payment .file.is-amazon.is-hovered .file-cta, .better-payment .file.is-amazon:hover .file-cta {
2281 background-color: #ffd556;
2282 border-color: transparent;
2283 color: rgba(0, 0, 0, 0.7);
2284 }
2285 .better-payment .file.is-amazon.is-focused .file-cta, .better-payment .file.is-amazon:focus .file-cta {
2286 border-color: transparent;
2287 box-shadow: 0 0 0.5em rgba(255, 216, 99, 0.25);
2288 color: rgba(0, 0, 0, 0.7);
2289 }
2290 .better-payment .file.is-amazon.is-active .file-cta, .better-payment .file.is-amazon:active .file-cta {
2291 background-color: #ffd24a;
2292 border-color: transparent;
2293 color: rgba(0, 0, 0, 0.7);
2294 }
2295 .better-payment .file.is-sponsor .file-cta {
2296 background-color: #ea4aaa;
2297 border-color: transparent;
2298 color: #fff;
2299 }
2300 .better-payment .file.is-sponsor.is-hovered .file-cta, .better-payment .file.is-sponsor:hover .file-cta {
2301 background-color: #e93fa5;
2302 border-color: transparent;
2303 color: #fff;
2304 }
2305 .better-payment .file.is-sponsor.is-focused .file-cta, .better-payment .file.is-sponsor:focus .file-cta {
2306 border-color: transparent;
2307 box-shadow: 0 0 0.5em rgba(234, 74, 170, 0.25);
2308 color: #fff;
2309 }
2310 .better-payment .file.is-sponsor.is-active .file-cta, .better-payment .file.is-sponsor:active .file-cta {
2311 background-color: #e7339f;
2312 border-color: transparent;
2313 color: #fff;
2314 }
2315 .better-payment .file.is-twitter .file-cta {
2316 background-color: #55acee;
2317 border-color: transparent;
2318 color: #fff;
2319 }
2320 .better-payment .file.is-twitter.is-hovered .file-cta, .better-payment .file.is-twitter:hover .file-cta {
2321 background-color: #49a6ed;
2322 border-color: transparent;
2323 color: #fff;
2324 }
2325 .better-payment .file.is-twitter.is-focused .file-cta, .better-payment .file.is-twitter:focus .file-cta {
2326 border-color: transparent;
2327 box-shadow: 0 0 0.5em rgba(85, 172, 238, 0.25);
2328 color: #fff;
2329 }
2330 .better-payment .file.is-twitter.is-active .file-cta, .better-payment .file.is-twitter:active .file-cta {
2331 background-color: #3ea1ec;
2332 border-color: transparent;
2333 color: #fff;
2334 }
2335 .better-payment .file.is-videos .file-cta {
2336 background-color: #47c68d;
2337 border-color: transparent;
2338 color: #fff;
2339 }
2340 .better-payment .file.is-videos.is-hovered .file-cta, .better-payment .file.is-videos:hover .file-cta {
2341 background-color: #3ec487;
2342 border-color: transparent;
2343 color: #fff;
2344 }
2345 .better-payment .file.is-videos.is-focused .file-cta, .better-payment .file.is-videos:focus .file-cta {
2346 border-color: transparent;
2347 box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25);
2348 color: #fff;
2349 }
2350 .better-payment .file.is-videos.is-active .file-cta, .better-payment .file.is-videos:active .file-cta {
2351 background-color: #3abb81;
2352 border-color: transparent;
2353 color: #fff;
2354 }
2355 .better-payment .file.is-extensions .file-cta {
2356 background-color: #3e8ed0;
2357 border-color: transparent;
2358 color: #fff;
2359 }
2360 .better-payment .file.is-extensions.is-hovered .file-cta, .better-payment .file.is-extensions:hover .file-cta {
2361 background-color: #3488ce;
2362 border-color: transparent;
2363 color: #fff;
2364 }
2365 .better-payment .file.is-extensions.is-focused .file-cta, .better-payment .file.is-extensions:focus .file-cta {
2366 border-color: transparent;
2367 box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25);
2368 color: #fff;
2369 }
2370 .better-payment .file.is-extensions.is-active .file-cta, .better-payment .file.is-extensions:active .file-cta {
2371 background-color: #3082c5;
2372 border-color: transparent;
2373 color: #fff;
2374 }
2375 .better-payment .file.is-bootstrap .file-cta {
2376 background-color: #6f5499;
2377 border-color: transparent;
2378 color: #fff;
2379 }
2380 .better-payment .file.is-bootstrap.is-hovered .file-cta, .better-payment .file.is-bootstrap:hover .file-cta {
2381 background-color: #694f91;
2382 border-color: transparent;
2383 color: #fff;
2384 }
2385 .better-payment .file.is-bootstrap.is-focused .file-cta, .better-payment .file.is-bootstrap:focus .file-cta {
2386 border-color: transparent;
2387 box-shadow: 0 0 0.5em rgba(111, 84, 153, 0.25);
2388 color: #fff;
2389 }
2390 .better-payment .file.is-bootstrap.is-active .file-cta, .better-payment .file.is-bootstrap:active .file-cta {
2391 background-color: #634b89;
2392 border-color: transparent;
2393 color: #fff;
2394 }
2395 .better-payment .file.is-small {
2396 font-size: 0.75rem;
2397 }
2398 .better-payment .file.is-normal {
2399 font-size: 1rem;
2400 }
2401 .better-payment .file.is-medium {
2402 font-size: 1.25rem;
2403 }
2404 .better-payment .file.is-medium .file-icon .fa {
2405 font-size: 21px;
2406 }
2407 .better-payment .file.is-large {
2408 font-size: 1.5rem;
2409 }
2410 .better-payment .file.is-large .file-icon .fa {
2411 font-size: 28px;
2412 }
2413 .better-payment .file.has-name .file-cta {
2414 border-bottom-right-radius: 0;
2415 border-top-right-radius: 0;
2416 }
2417 .better-payment .file.has-name .file-name {
2418 border-bottom-left-radius: 0;
2419 border-top-left-radius: 0;
2420 }
2421 .better-payment .file.has-name.is-empty .file-cta {
2422 border-radius: 0.375em;
2423 }
2424 .better-payment .file.has-name.is-empty .file-name {
2425 display: none;
2426 }
2427 .better-payment .file.is-boxed .file-label {
2428 flex-direction: column;
2429 }
2430 .better-payment .file.is-boxed .file-cta {
2431 flex-direction: column;
2432 height: auto;
2433 padding: 1em 3em;
2434 }
2435 .better-payment .file.is-boxed .file-name {
2436 border-width: 0 1px 1px;
2437 }
2438 .better-payment .file.is-boxed .file-icon {
2439 height: 1.5em;
2440 width: 1.5em;
2441 }
2442 .better-payment .file.is-boxed .file-icon .fa {
2443 font-size: 21px;
2444 }
2445 .better-payment .file.is-boxed.is-small .file-icon .fa {
2446 font-size: 14px;
2447 }
2448 .better-payment .file.is-boxed.is-medium .file-icon .fa {
2449 font-size: 28px;
2450 }
2451 .better-payment .file.is-boxed.is-large .file-icon .fa {
2452 font-size: 35px;
2453 }
2454 .better-payment .file.is-boxed.has-name .file-cta {
2455 border-radius: 0.375em 0.375em 0 0;
2456 }
2457 .better-payment .file.is-boxed.has-name .file-name {
2458 border-radius: 0 0 0.375em 0.375em;
2459 border-width: 0 1px 1px;
2460 }
2461 .better-payment .file.is-centered {
2462 justify-content: center;
2463 }
2464 .better-payment .file.is-fullwidth .file-label {
2465 width: 100%;
2466 }
2467 .better-payment .file.is-fullwidth .file-name {
2468 flex-grow: 1;
2469 max-width: none;
2470 }
2471 .better-payment .file.is-right {
2472 justify-content: flex-end;
2473 }
2474 .better-payment .file.is-right .file-cta {
2475 border-radius: 0 0.375em 0.375em 0;
2476 }
2477 .better-payment .file.is-right .file-name {
2478 border-radius: 0.375em 0 0 0.375em;
2479 border-width: 1px 0 1px 1px;
2480 order: -1;
2481 }
2482 .better-payment .file-label {
2483 align-items: stretch;
2484 display: flex;
2485 cursor: pointer;
2486 justify-content: flex-start;
2487 overflow: hidden;
2488 position: relative;
2489 }
2490 .better-payment .file-label:hover .file-cta {
2491 background-color: #eee;
2492 color: #353535;
2493 }
2494 .better-payment .file-label:hover .file-name {
2495 border-color: #d5d5d5;
2496 }
2497 .better-payment .file-label:active .file-cta {
2498 background-color: #e8e8e8;
2499 color: #353535;
2500 }
2501 .better-payment .file-label:active .file-name {
2502 border-color: #cfcfcf;
2503 }
2504 .better-payment .file-input {
2505 height: 100%;
2506 left: 0;
2507 opacity: 0;
2508 outline: 0;
2509 position: absolute;
2510 top: 0;
2511 width: 100%;
2512 }
2513 .better-payment .file-cta, .better-payment .file-name {
2514 border-color: #dbdbdb;
2515 border-radius: 0.375em;
2516 font-size: 1em;
2517 padding-left: 1em;
2518 padding-right: 1em;
2519 white-space: nowrap;
2520 }
2521 .better-payment .file-cta {
2522 background-color: #f4f4f4;
2523 color: #494949;
2524 }
2525 .better-payment .file-name {
2526 border-color: #dbdbdb;
2527 border-style: solid;
2528 border-width: 1px 1px 1px 0;
2529 display: block;
2530 max-width: 16em;
2531 overflow: hidden;
2532 text-align: inherit;
2533 text-overflow: ellipsis;
2534 }
2535 .better-payment .file-icon {
2536 align-items: center;
2537 display: flex;
2538 height: 1em;
2539 justify-content: center;
2540 margin-right: 0.5em;
2541 width: 1em;
2542 }
2543 .better-payment .file-icon .fa {
2544 font-size: 14px;
2545 }
2546 .better-payment .is-flex {
2547 display: flex !important;
2548 }
2549 .better-payment .is-flex-direction-row {
2550 flex-direction: row !important;
2551 }
2552 .better-payment .is-flex-direction-row-reverse {
2553 flex-direction: row-reverse !important;
2554 }
2555 .better-payment .is-flex-direction-column {
2556 flex-direction: column !important;
2557 }
2558 .better-payment .is-flex-direction-column-reverse {
2559 flex-direction: column-reverse !important;
2560 }
2561 .better-payment .is-flex-wrap-nowrap {
2562 flex-wrap: nowrap !important;
2563 }
2564 .better-payment .is-flex-wrap-wrap {
2565 flex-wrap: wrap !important;
2566 }
2567 .better-payment .is-flex-wrap-wrap-reverse {
2568 flex-wrap: wrap-reverse !important;
2569 }
2570 .better-payment .is-justify-content-flex-start {
2571 justify-content: flex-start !important;
2572 }
2573 .better-payment .is-justify-content-flex-end {
2574 justify-content: flex-end !important;
2575 }
2576 .better-payment .is-justify-content-center {
2577 justify-content: center !important;
2578 }
2579 .better-payment .is-justify-content-space-between {
2580 justify-content: space-between !important;
2581 }
2582 .better-payment .is-justify-content-space-around {
2583 justify-content: space-around !important;
2584 }
2585 .better-payment .is-justify-content-space-evenly {
2586 justify-content: space-evenly !important;
2587 }
2588 .better-payment .is-justify-content-start {
2589 justify-content: start !important;
2590 }
2591 .better-payment .is-justify-content-end {
2592 justify-content: end !important;
2593 }
2594 .better-payment .is-justify-content-left {
2595 justify-content: left !important;
2596 }
2597 .better-payment .is-justify-content-right {
2598 justify-content: right !important;
2599 }
2600 .better-payment .is-align-content-flex-start {
2601 align-content: flex-start !important;
2602 }
2603 .better-payment .is-align-content-flex-end {
2604 align-content: flex-end !important;
2605 }
2606 .better-payment .is-align-content-center {
2607 align-content: center !important;
2608 }
2609 .better-payment .is-align-content-space-between {
2610 align-content: space-between !important;
2611 }
2612 .better-payment .is-align-content-space-around {
2613 align-content: space-around !important;
2614 }
2615 .better-payment .is-align-content-space-evenly {
2616 align-content: space-evenly !important;
2617 }
2618 .better-payment .is-align-content-stretch {
2619 align-content: stretch !important;
2620 }
2621 .better-payment .is-align-content-start {
2622 align-content: start !important;
2623 }
2624 .better-payment .is-align-content-end {
2625 align-content: end !important;
2626 }
2627 .better-payment .is-align-content-baseline {
2628 align-content: baseline !important;
2629 }
2630 .better-payment .is-align-items-stretch {
2631 align-items: stretch !important;
2632 }
2633 .better-payment .is-align-items-flex-start {
2634 align-items: flex-start !important;
2635 }
2636 .better-payment .is-align-items-flex-end {
2637 align-items: flex-end !important;
2638 }
2639 .better-payment .is-align-items-center {
2640 align-items: center !important;
2641 }
2642 .better-payment .is-align-items-baseline {
2643 align-items: baseline !important;
2644 }
2645 .better-payment .is-align-items-start {
2646 align-items: start !important;
2647 }
2648 .better-payment .is-align-items-end {
2649 align-items: end !important;
2650 }
2651 .better-payment .is-align-items-self-start {
2652 align-items: self-start !important;
2653 }
2654 .better-payment .is-align-items-self-end {
2655 align-items: self-end !important;
2656 }
2657 .better-payment .is-align-self-auto {
2658 align-self: auto !important;
2659 }
2660 .better-payment .is-align-self-flex-start {
2661 align-self: flex-start !important;
2662 }
2663 .better-payment .is-align-self-flex-end {
2664 align-self: flex-end !important;
2665 }
2666 .better-payment .is-align-self-center {
2667 align-self: center !important;
2668 }
2669 .better-payment .is-align-self-baseline {
2670 align-self: baseline !important;
2671 }
2672 .better-payment .is-align-self-stretch {
2673 align-self: stretch !important;
2674 }
2675 .better-payment .is-flex-grow-0 {
2676 flex-grow: 0 !important;
2677 }
2678 .better-payment .is-flex-grow-1 {
2679 flex-grow: 1 !important;
2680 }
2681 .better-payment .is-flex-grow-2 {
2682 flex-grow: 2 !important;
2683 }
2684 .better-payment .is-flex-grow-3 {
2685 flex-grow: 3 !important;
2686 }
2687 .better-payment .is-flex-grow-4 {
2688 flex-grow: 4 !important;
2689 }
2690 .better-payment .is-flex-grow-5 {
2691 flex-grow: 5 !important;
2692 }
2693 .better-payment .is-flex-shrink-0 {
2694 flex-shrink: 0 !important;
2695 }
2696 .better-payment .is-flex-shrink-1 {
2697 flex-shrink: 1 !important;
2698 }
2699 .better-payment .is-flex-shrink-2 {
2700 flex-shrink: 2 !important;
2701 }
2702 .better-payment .is-flex-shrink-3 {
2703 flex-shrink: 3 !important;
2704 }
2705 .better-payment .is-flex-shrink-4 {
2706 flex-shrink: 4 !important;
2707 }
2708 .better-payment .is-flex-shrink-5 {
2709 flex-shrink: 5 !important;
2710 }
2711 .better-payment .is-clearfix::after {
2712 clear: both;
2713 content: " ";
2714 display: table;
2715 }
2716 .better-payment .is-pulled-left {
2717 float: left !important;
2718 }
2719 .better-payment .is-pulled-right {
2720 float: right !important;
2721 }
2722 .better-payment .is-radiusless {
2723 border-radius: 0 !important;
2724 }
2725 .better-payment .is-shadowless {
2726 box-shadow: none !important;
2727 }
2728 .better-payment .is-clickable {
2729 cursor: pointer !important;
2730 pointer-events: all !important;
2731 }
2732 .better-payment .is-clipped {
2733 overflow: hidden !important;
2734 }
2735 .better-payment .is-relative {
2736 position: relative !important;
2737 }
2738 .better-payment .file.no-file-name .file-cta {
2739 border-radius: 0.375em;
2740 }
2741 .better-payment .button.is-success {
2742 background-color: #47c68d;
2743 border-color: transparent;
2744 color: #fff;
2745 }
2746 @media screen and (max-width: 768px) {
2747 .better-payment .is-flex-mobile {
2748 display: flex !important;
2749 }
2750 }
2751 @media screen and (min-width: 769px), print {
2752 .better-payment .is-flex-tablet {
2753 display: flex !important;
2754 }
2755 }
2756 @media screen and (min-width: 769px) and (max-width: 1023px) {
2757 .better-payment .is-flex-tablet-only {
2758 display: flex !important;
2759 }
2760 }
2761 @media screen and (max-width: 1023px) {
2762 .better-payment .is-flex-touch {
2763 display: flex !important;
2764 }
2765 }
2766 @media screen and (min-width: 1024px) {
2767 .better-payment .is-flex-desktop {
2768 display: flex !important;
2769 }
2770 }
2771 @media screen and (min-width: 1024px) and (max-width: 1215px) {
2772 .better-payment .is-flex-desktop-only {
2773 display: flex !important;
2774 }
2775 }
2776 @media screen and (min-width: 1216px) {
2777 .better-payment .is-flex-widescreen {
2778 display: flex !important;
2779 }
2780 }
2781 @media screen and (min-width: 1216px) and (max-width: 1407px) {
2782 .better-payment .is-flex-widescreen-only {
2783 display: flex !important;
2784 }
2785 }
2786 @media screen and (min-width: 1408px) {
2787 .better-payment .is-flex-fullhd {
2788 display: flex !important;
2789 }
2790 }
2791
2792 .field-display-inline:nth-child(odd) {
2793 margin-right: 1%;
2794 }
2795
2796 .field-display-inline:nth-child(even) {
2797 margin-left: 1%;
2798 }
2799
2800 .better-payment .d-none {
2801 display: none !important;
2802 }
2803 .better-payment .flex {
2804 display: flex;
2805 }
2806 .better-payment .flex-col {
2807 flex-direction: column;
2808 }
2809 .better-payment .flex-1 {
2810 flex: 1;
2811 }
2812 .better-payment .justify-between {
2813 justify-content: space-between;
2814 }
2815 .better-payment .justify-center {
2816 justify-content: center;
2817 }
2818 .better-payment .justify-end {
2819 justify-content: flex-end;
2820 }
2821 .better-payment .items-start {
2822 align-items: flex-start;
2823 }
2824 .better-payment .items-center {
2825 align-items: center;
2826 }
2827 .better-payment .items-end {
2828 align-items: flex-end;
2829 }
2830 .better-payment .min-h-full {
2831 min-height: 100vh;
2832 }
2833 .better-payment .gap-1 {
2834 gap: 4px;
2835 }
2836 .better-payment .gap-2 {
2837 gap: 8px;
2838 }
2839 .better-payment .gap-3 {
2840 gap: 12px;
2841 }
2842 .better-payment .gap-4 {
2843 gap: 16px;
2844 }
2845 .better-payment .gap-5 {
2846 gap: 20px;
2847 }
2848 .better-payment .gap-6 {
2849 gap: 24px;
2850 }
2851 .better-payment .gap-10 {
2852 gap: 40px;
2853 }
2854 .better-payment .min-w-300 {
2855 min-width: 300px !important;
2856 }
2857 .better-payment .max-w-300 {
2858 max-width: 300px !important;
2859 }
2860 .better-payment .pointer {
2861 cursor: pointer;
2862 }
2863 .better-payment h2 {
2864 font-size: 26px;
2865 line-height: 1.2em;
2866 font-weight: 700;
2867 font-family: "IBM Plex Sans", sans-serif;
2868 color: #2B2748;
2869 }
2870 .better-payment .bp-dashboard-header h2 {
2871 font-weight: 400;
2872 }
2873 .better-payment button {
2874 font-size: 14px;
2875 line-height: 1.1em;
2876 color: #6859FA;
2877 display: inline-flex;
2878 align-items: center;
2879 justify-content: center;
2880 padding: 8px 16px;
2881 background: #F0EEFE;
2882 border-radius: 20px;
2883 border: none;
2884 transition: all 0.25s ease-in-out;
2885 cursor: pointer;
2886 }
2887 .better-payment button.primary-btn {
2888 font-size: 16px;
2889 font-weight: 500;
2890 padding: 12px 18px;
2891 border-radius: 8px;
2892 color: #6859FA;
2893 }
2894 .better-payment button.complete {
2895 color: #FFFFFF;
2896 background: #0ECA86;
2897 }
2898 .better-payment button.incomplete {
2899 color: #FFFFFF;
2900 background: #FFDA15;
2901 }
2902 .better-payment button.active {
2903 color: #00C679;
2904 background: rgba(0, 198, 123, 0.1019607843);
2905 border-radius: 20px;
2906 }
2907 .better-payment button.inactive {
2908 color: #EDAA00;
2909 background: rgba(255, 209, 0, 0.1019607843);
2910 }
2911 .better-payment button.cancel {
2912 color: #FF0000;
2913 background: rgba(255, 0, 0, 0.1490196078);
2914 }
2915 .better-payment .bp--sidebar-wrapper {
2916 padding: 24px;
2917 background: #fff;
2918 min-width: 270px;
2919 min-height: 100vh;
2920 border: 1px solid #f1f1f1;
2921 }
2922 .better-payment .bp--author {
2923 display: flex;
2924 align-items: center;
2925 gap: 16px;
2926 margin-bottom: 40px;
2927 }
2928 .better-payment .bp--author img {
2929 width: 32px !important;
2930 height: 32px !important;
2931 min-width: 32px;
2932 border-radius: 50%;
2933 object-fit: cover;
2934 flex-shrink: 0;
2935 display: block;
2936 }
2937 .better-payment .bp--author h5 {
2938 font-size: 20px;
2939 font-weight: 500;
2940 line-height: 1.1em;
2941 color: #48506D;
2942 }
2943 .better-payment .bp--sidebar-nav-list {
2944 display: flex;
2945 flex-direction: column;
2946 gap: 12px;
2947 }
2948 .better-payment .bp--sidebar-nav {
2949 display: flex;
2950 align-items: center;
2951 gap: 12px;
2952 padding: 4px 8px;
2953 cursor: pointer;
2954 }
2955 .better-payment .bp--nav-icon {
2956 display: inline-flex;
2957 }
2958 .better-payment span.bp--nav-icon svg {
2959 width: 20px;
2960 height: 20px;
2961 }
2962 .better-payment .bp--sidebar-nav.active span.bp--nav-icon svg path {
2963 stroke: #000000;
2964 }
2965 .better-payment .bp--sidebar-nav .bp--nav-text {
2966 color: #48506D;
2967 font-size: 16px;
2968 font-weight: 500;
2969 transition: ease-in-out 0.25s;
2970 }
2971 .better-payment .bp--sidebar-nav.active .bp--nav-text {
2972 color: #000000;
2973 }
2974 .better-payment .bp--sidebar-nav:hover .bp--nav-text {
2975 color: #2B2748;
2976 }
2977 .better-payment .bp--sidebar-nav.active {
2978 color: #2B2748;
2979 }
2980 .better-payment .bp--db-main-wrapper {
2981 padding-right: 24px;
2982 flex-basis: calc(100% - 294px);
2983 max-width: calc(100% - 294px);
2984 }
2985 .better-payment .bp--db-header {
2986 display: flex;
2987 justify-content: space-between;
2988 align-items: center;
2989 padding: 16px 24px;
2990 background: #fff;
2991 margin-bottom: 24px;
2992 border: 1px solid #f1f1f1;
2993 }
2994 .better-payment .bp--db-header img {
2995 max-width: 200px;
2996 }
2997 .better-payment .bp--table-wrapper {
2998 display: flex;
2999 flex-direction: column;
3000 overflow: auto;
3001 }
3002 .better-payment .bp--table-header {
3003 background: rgba(110, 88, 247, 0.1);
3004 border: none;
3005 padding: 10px 24px;
3006 min-width: 1442px;
3007 }
3008 .better-payment .bp--table-header .th,
3009 .better-payment .bp--table-header .th h5 {
3010 font-size: 16px;
3011 line-height: 1.2em;
3012 font-weight: 500;
3013 color: #2A3256;
3014 }
3015 .better-payment .bp--table-body {
3016 padding: 10px 24px;
3017 min-width: 1442px;
3018 background: #FFFFFF;
3019 border-left: 1px solid #f1f1f1;
3020 border-right: 1px solid #f1f1f1;
3021 }
3022 .better-payment .bp--table-body {
3023 border-bottom: 1px solid rgba(110, 88, 247, 0.1);
3024 }
3025 .better-payment .bp--table-body .td h5,
3026 .better-payment .bp--table-body .td h5 span {
3027 font-size: 16px;
3028 font-weight: 400;
3029 line-height: 1.2em;
3030 color: #2A3256;
3031 }
3032 .better-payment .bp--table-body .td p {
3033 font-size: 14px;
3034 color: #48506D;
3035 display: inline-flex;
3036 }
3037 .better-payment .bp--table-body .td span {
3038 font-size: 13px;
3039 color: #797E90;
3040 }
3041 .better-payment .bp--table-body .price {
3042 font-size: 18px;
3043 line-height: 1em;
3044 font-weight: 500;
3045 color: #2B2748;
3046 padding-right: 4px;
3047 }
3048 .better-payment .td.details i {
3049 font-size: 16px;
3050 color: #48506D;
3051 }
3052 .better-payment .td.details .product--img {
3053 max-width: 24px;
3054 }
3055 .better-payment .td.details .source--img {
3056 max-width: 80px;
3057 }
3058 .better-payment .th.details,
3059 .better-payment .td.details {
3060 min-width: 130px;
3061 max-width: 130px;
3062 flex: 1;
3063 }
3064 .better-payment .th.details.user-name,
3065 .better-payment .td.details.user-name {
3066 max-width: 200px;
3067 }
3068 .better-payment .transactions .th.details:first-child,
3069 .better-payment .transactions .td.details:first-child {
3070 min-width: 170px;
3071 }
3072 .better-payment .transactions .th.details:nth-child(2),
3073 .better-payment .transactions .td.details:nth-child(2) {
3074 min-width: 220px;
3075 max-width: 220px;
3076 }
3077 .better-payment .transactions .th.details:nth-child(4),
3078 .better-payment .transactions .td.details:nth-child(4) {
3079 min-width: 220px;
3080 max-width: 220px;
3081 }
3082 .better-payment .bp--table-body .td .action-icon {
3083 border-radius: 4px;
3084 display: flex;
3085 align-items: center;
3086 justify-content: center;
3087 width: 48px;
3088 height: 36px;
3089 background: rgba(110, 88, 247, 0.1);
3090 }
3091 .better-payment .bp--table-body .td span.action-icon i {
3092 font-size: 20px;
3093 line-height: 1.2em;
3094 color: #6e58f7;
3095 }
3096 .better-payment .bp-flexbox-container {
3097 display: flex;
3098 align-items: center;
3099 gap: 5px;
3100 }
3101 .better-payment .bp-shortend-text {
3102 width: 200px;
3103 white-space: nowrap;
3104 overflow: hidden;
3105 text-overflow: ellipsis;
3106 }
3107 .better-payment .bp--table-wrapper .bp--table-header {
3108 min-width: 1640px;
3109 }
3110 .better-payment .bp--table-wrapper .bp--table-header.bp-min_width-1300 {
3111 min-width: 1300px;
3112 padding-left: 14px;
3113 padding-right: 14px;
3114 }
3115 .better-payment .bp--table-wrapper .bp--table-header .th.details.email {
3116 max-width: 200px;
3117 min-width: 200px;
3118 }
3119 .better-payment .bp--table-wrapper .bp--table-header .th.details.transaction {
3120 max-width: 200px;
3121 min-width: 200px;
3122 }
3123 .better-payment .bp--table-wrapper .bp--table-header .th.user-name {
3124 max-width: 200px;
3125 min-width: 200px;
3126 }
3127 .better-payment .bp--table-wrapper .bp--table-body {
3128 min-width: 1640px;
3129 }
3130 .better-payment .bp--table-wrapper .bp--table-body.bp-min_width-1300 {
3131 min-width: 1300px;
3132 padding-left: 14px;
3133 padding-right: 14px;
3134 }
3135 .better-payment .bp--table-wrapper .bp--table-body .td p {
3136 align-items: center;
3137 gap: 4px;
3138 }
3139 .better-payment .bp--table-wrapper .bp--table-body .td span {
3140 font-size: 14px;
3141 color: #48506d;
3142 }
3143 .better-payment .bp--table-wrapper .bp--table-body .td.details.email {
3144 max-width: 200px;
3145 min-width: 200px;
3146 }
3147 .better-payment .bp--table-wrapper .bp--table-body .td.details.email p span:first-child {
3148 max-width: 170px;
3149 white-space: nowrap;
3150 overflow: hidden;
3151 text-overflow: ellipsis;
3152 }
3153 .better-payment .bp--table-wrapper .bp--table-body .td.details.transaction {
3154 max-width: 200px;
3155 min-width: 200px;
3156 }
3157 .better-payment .bp--table-wrapper .bp--table-body .td.details.transaction p span:first-child {
3158 max-width: 170px;
3159 white-space: nowrap;
3160 overflow: hidden;
3161 text-overflow: ellipsis;
3162 }
3163 .better-payment .bp-copy-clipboard-info,
3164 .better-payment .bp-email-copy-clipboard-info {
3165 color: rgb(110, 88, 247) !important;
3166 }
3167 .better-payment .better-payment-user-dashboard-container h1,
3168 .better-payment .better-payment-user-dashboard-container h2,
3169 .better-payment .better-payment-user-dashboard-container h3,
3170 .better-payment .better-payment-user-dashboard-container h4,
3171 .better-payment .better-payment-user-dashboard-container h5,
3172 .better-payment .better-payment-user-dashboard-container h6,
3173 .better-payment .better-payment-user-dashboard-container p {
3174 margin: 0;
3175 padding: 0;
3176 }
3177 .better-payment .bp-logo {
3178 margin-bottom: 55px;
3179 text-align: center;
3180 }
3181 .better-payment .bp-logo img {
3182 max-height: 36px;
3183 width: auto;
3184 }
3185 .better-payment .bp-row {
3186 display: flex;
3187 flex-wrap: wrap;
3188 margin-left: -12px;
3189 margin-right: -12px;
3190 }
3191 .better-payment .bp-col {
3192 position: relative;
3193 width: 100%;
3194 min-height: 1px;
3195 padding-left: 12px;
3196 padding-right: 12px;
3197 }
3198 .better-payment .bp-col1 {
3199 width: 8.333333333%;
3200 }
3201 .better-payment .bp-col_2 {
3202 width: 16.66666666%;
3203 }
3204 .better-payment .bp-col_3 {
3205 width: 20%;
3206 }
3207 .better-payment .bp-col_4 {
3208 width: 25%;
3209 }
3210 .better-payment .bp-col_5 {
3211 width: 33.333333333%;
3212 }
3213 .better-payment .bp-col_6 {
3214 width: 41.3333333%;
3215 }
3216 .better-payment .bp-col_7 {
3217 width: 50%;
3218 }
3219 .better-payment .bp-col_8 {
3220 width: 58.333333333%;
3221 }
3222 .better-payment .bp-col_9 {
3223 width: 66.666666666%;
3224 }
3225 .better-payment .bp-col_10 {
3226 width: 75%;
3227 }
3228 .better-payment .bp-col_11 {
3229 width: 83.333333333%;
3230 }
3231 .better-payment .bp-col_12 {
3232 width: 91.666666666%;
3233 }
3234 .better-payment .bp-col_13 {
3235 width: 100%;
3236 }
3237 .better-payment .w-80 {
3238 width: 80px;
3239 text-align: left;
3240 }
3241 .better-payment .w-195 {
3242 flex-basis: 195px;
3243 }
3244 .better-payment .w-325 {
3245 flex-basis: 325px;
3246 }
3247 .better-payment .w-214 {
3248 flex-basis: 214px;
3249 }
3250 .better-payment .w-130 {
3251 flex-basis: 130px;
3252 }
3253 .better-payment .w-140 {
3254 flex-basis: 140px;
3255 }
3256 .better-payment .bp-amount_wrapper {
3257 margin-bottom: 24px;
3258 }
3259 .better-payment .td-product_logo {
3260 line-height: 0;
3261 max-width: 90px;
3262 }
3263 .better-payment .td-product_logo img {
3264 object-fit: contain;
3265 height: 20px;
3266 width: 100%;
3267 }
3268 .better-payment .bp-dashboard_wrapper {
3269 width: 100%;
3270 background-color: #FFFFFF;
3271 }
3272 .better-payment .bp-dashboard_wrapper .bp-dashboard_title {
3273 font-size: 32px;
3274 font-weight: 600;
3275 text-align: left;
3276 color: #2A3256;
3277 margin-bottom: 36px;
3278 }
3279 .better-payment .bp-amount {
3280 width: 100%;
3281 height: auto;
3282 padding: 0px;
3283 border-radius: 12px;
3284 border: 1px solid #EAECF0;
3285 overflow: hidden;
3286 }
3287 .better-payment .bp-amount h4 {
3288 margin: 16px;
3289 font-size: 16px;
3290 font-weight: 500;
3291 color: #667085;
3292 }
3293 .better-payment .bp-amount_price {
3294 font-size: 30px;
3295 font-weight: 600;
3296 text-align: left;
3297 color: #2A3256;
3298 padding: 16px;
3299 }
3300 .better-payment .bp-transaction {
3301 padding: 10px 16px;
3302 background-color: #FAFAFC;
3303 width: 100%;
3304 font-size: 13px;
3305 font-weight: 400;
3306 color: #667085;
3307 }
3308 @media (min-width: 1500px) {
3309 .better-payment .bp-amount_price {
3310 font-size: 40px;
3311 }
3312 .better-payment .bp-amount h4 {
3313 font-size: 18px;
3314 }
3315 .better-payment .bp-transaction {
3316 font-size: 16px;
3317 }
3318 }
3319 .better-payment .bp-transaction_number {
3320 font-weight: 500;
3321 color: #6E58F7;
3322 }
3323 .better-payment .bp-chart_header .name h3 {
3324 color: #2A3256;
3325 font-size: 20px;
3326 font-weight: 600;
3327 }
3328 .better-payment .bp-analytics_chart-wrapper {
3329 margin-bottom: 24px;
3330 }
3331 .better-payment .bp-analytics_box {
3332 background-color: #ffffff;
3333 border: 1px solid #EAECF0;
3334 border-radius: 16px;
3335 padding: 20px 24px;
3336 }
3337 .better-payment .bp-chart_header {
3338 border-bottom: 1px solid #EAECF0;
3339 padding-top: 8px;
3340 padding-bottom: 16px;
3341 margin-bottom: 24px;
3342 }
3343 .better-payment .bp-form_control {
3344 border: 1px solid #D9E1F4;
3345 border-radius: 8px;
3346 padding: 11px 16px;
3347 }
3348 .better-payment .bp-form_control option {
3349 font-size: 14px;
3350 font-weight: 500;
3351 color: #48506D;
3352 }
3353 .better-payment .filter-btn {
3354 padding: 8px 16px 8px 16px;
3355 border-radius: 8px;
3356 }
3357 .better-payment .bp-recent_box {
3358 background-color: #ffffff;
3359 border: 1px solid #EAECF0;
3360 border-radius: 16px;
3361 padding: 0 16px;
3362 }
3363 .better-payment .bp-recent_header {
3364 padding: 16px 0;
3365 border-bottom: 1px solid #EAECF0;
3366 margin-bottom: 16px;
3367 }
3368 .better-payment .bp-recent_header span {
3369 line-height: 0;
3370 }
3371 .better-payment .bp-view_all-btn {
3372 font-size: 14px;
3373 font-weight: 500;
3374 color: #48506D;
3375 border: 1px solid #D9E1F4;
3376 border-radius: 4px;
3377 padding: 6px 16px;
3378 text-decoration: none;
3379 }
3380 .better-payment .bp-recent_header-title {
3381 color: #2A3256;
3382 font-size: 16px;
3383 font-weight: 600;
3384 }
3385 .better-payment .bp-th {
3386 background-color: #FAFAFC;
3387 border-radius: 4px;
3388 padding: 9px 12px 9px 12px;
3389 margin-bottom: 4px;
3390 }
3391 .better-payment .bp-th h5 {
3392 font-size: 14px;
3393 font-weight: 500;
3394 color: #667085;
3395 }
3396 .better-payment .bp-recent_body {
3397 padding-bottom: 16px;
3398 }
3399 .better-payment .bp-product_scroll {
3400 min-height: 334px;
3401 max-height: 334px;
3402 overflow: auto;
3403 }
3404 .better-payment .td-product {
3405 gap: 6px;
3406 padding: 9px 11px;
3407 }
3408 .better-payment .td-product_name {
3409 font-size: 12px;
3410 font-weight: 500;
3411 color: #2A3256;
3412 margin-bottom: 4px;
3413 }
3414 .better-payment .td-details {
3415 font-size: 10px;
3416 font-weight: 400;
3417 color: #667085;
3418 }
3419 .better-payment .bp-subscription_box {
3420 background-color: #ffffff;
3421 border: 1px solid #EAECF0;
3422 border-radius: 16px;
3423 padding: 0 16px;
3424 }
3425 .better-payment .bp-subscription_box-th {
3426 border-bottom: 1px solid #EAECF0;
3427 padding: 16px 0;
3428 margin-bottom: 20px;
3429 }
3430 .better-payment .bp-subscription_th {
3431 padding: 12px;
3432 background: #FAFAFC;
3433 margin-bottom: 6px;
3434 }
3435 .better-payment .bp-subscription_title {
3436 color: #2A3256;
3437 font-size: 16px;
3438 font-weight: 600;
3439 }
3440 .better-payment .bp-subscription_th h4 {
3441 color: #667085;
3442 font-size: 14px;
3443 font-weight: 500;
3444 text-align: left;
3445 }
3446 .better-payment .bp-subscription_td {
3447 padding: 15px 0px 15px 12px;
3448 }
3449 .better-payment .bp-subscription_td .bp-plan_info h4 {
3450 color: #2A3256;
3451 font-size: 14px;
3452 font-weight: 500;
3453 line-height: 14px;
3454 margin-bottom: 5px;
3455 }
3456 .better-payment .bp-subscription_td .bp-plan_info p {
3457 color: #48506D;
3458 font-size: 10px;
3459 font-weight: 400;
3460 line-height: 10px;
3461 }
3462 .better-payment .bp-subscription_td .starter-plan,
3463 .better-payment .bp-subscription_td .due-plan {
3464 color: #797E90;
3465 font-size: 14px;
3466 font-weight: 400;
3467 }
3468 .better-payment .bp-subscription_td button {
3469 border-radius: 5px;
3470 font-size: 10px;
3471 font-weight: 500;
3472 padding: 5px 11px;
3473 border: 1px solid #9DD0FF;
3474 background: rgba(0, 133, 255, 0.1019607843);
3475 color: #0085FF;
3476 }
3477 .better-payment .bp-subscription_td .active {
3478 color: #00C679;
3479 background: rgba(0, 198, 123, 0.1019607843);
3480 border: 1px solid #A2ECCF;
3481 }
3482 .better-payment .bp-subscription_td .inactive {
3483 border: 1px solid #FFEB91;
3484 color: #EDAA00;
3485 background-color: rgba(255, 209, 0, 0.1019607843);
3486 }
3487 .better-payment .bp-subscription_product-price {
3488 display: flex;
3489 align-items: end;
3490 gap: 2px;
3491 }
3492 .better-payment .bp-subscription_product-td {
3493 border-bottom: 1px solid rgba(110, 88, 247, 0.1);
3494 }
3495 .better-payment .bp-subscription_product-td:last-child {
3496 border: none;
3497 }
3498 .better-payment .bp-subscription_product-price span:first-child {
3499 color: #2B2748;
3500 font-size: 18px;
3501 font-weight: 500;
3502 }
3503 .better-payment .bp-subscription_product-price span:last-child {
3504 color: #797E90;
3505 font-family: "IBM Plex Sans", sans-serif;
3506 font-size: 10.2px;
3507 font-weight: 400;
3508 }
3509 .better-payment .bp-subscripthon_doughnut-box {
3510 margin-bottom: 48px;
3511 justify-content: center;
3512 }
3513 .better-payment .bp-total_title {
3514 color: #667085;
3515 font-size: 16px;
3516 font-weight: 500;
3517 position: absolute;
3518 }
3519 .better-payment .bp-total_count {
3520 font-size: 56px;
3521 font-weight: 600;
3522 text-align: center;
3523 position: absolute;
3524 }
3525 .better-payment .better-payment-user-dashboard-container .dashboard-tab-wrapper .bp-total_count {
3526 margin-bottom: 35px;
3527 }
3528 .better-payment .bp-multi-graph {
3529 width: 400px;
3530 height: 200px;
3531 position: relative;
3532 color: #fff;
3533 font-size: 22px;
3534 font-weight: 600;
3535 display: flex;
3536 align-items: flex-end;
3537 justify-content: center;
3538 overflow: hidden;
3539 box-sizing: border-box;
3540 }
3541 .better-payment .bp-multi-graph:before {
3542 content: "";
3543 width: 400px;
3544 height: 200px;
3545 border: 30px solid rgba(0, 0, 0, 0.15);
3546 border-bottom: none;
3547 position: absolute;
3548 box-sizing: border-box;
3549 transform-origin: 50% 0%;
3550 border-radius: 300px 300px 0 0;
3551 left: 0;
3552 top: 0;
3553 }
3554 .better-payment .bp-graph {
3555 width: 400px;
3556 height: 200px;
3557 border: 30px solid var(--fill);
3558 border-top: none;
3559 position: absolute;
3560 transform-origin: 50% 0%;
3561 border-radius: 0 0 300px 300px;
3562 left: 0;
3563 top: 100%;
3564 z-index: 5;
3565 animation: 1s fillGraphAnimation ease-in;
3566 transform: rotate(calc(1deg * var(--percentage) * 1.8));
3567 box-sizing: border-box;
3568 cursor: pointer;
3569 }
3570 .better-payment .bp-graph:after {
3571 content: attr(data-name) " " counter(varible) "%";
3572 counter-reset: varible var(--percentage);
3573 background: var(--fill);
3574 box-sizing: border-box;
3575 border-radius: 2px;
3576 color: #fff;
3577 font-weight: 200;
3578 font-size: 12px;
3579 height: 20px;
3580 padding: 3px 5px;
3581 position: absolute;
3582 left: 0;
3583 top: 0;
3584 transform: rotate(calc(-1deg * var(--percentage) * 1.8)) translate(-30px, 0);
3585 transition: 0.2s ease-in;
3586 transform-origin: 0 50%;
3587 opacity: 0;
3588 }
3589 @keyframes fillGraphAnimation {
3590 0% {
3591 transform: rotate(0deg);
3592 }
3593 50% {
3594 transform: rotate(180deg);
3595 }
3596 }
3597 .better-payment .bp-doughnut_info {
3598 position: absolute;
3599 width: 132px;
3600 height: auto;
3601 background-color: rgba(0, 0, 0, 0.8509803922);
3602 border-radius: 2px;
3603 padding: 12px;
3604 left: 0;
3605 top: 0;
3606 z-index: 99;
3607 opacity: 0;
3608 cursor: pointer;
3609 transition: all 0.5s;
3610 }
3611 .better-payment .bp-multi-graph:hover .bp-doughnut_info {
3612 opacity: 1;
3613 }
3614 .better-payment .bp-doughnut_info .bp-doughnut_date {
3615 font-size: 9.28px;
3616 font-weight: 500;
3617 color: #fff;
3618 margin-bottom: 7px;
3619 }
3620 .better-payment .bp-doughnut_info .bp-dougnut_color-info {
3621 color: #fff;
3622 font-size: 7.95px;
3623 font-weight: 500;
3624 }
3625 .better-payment .bp-doughnut_info .bp-dougnut_color-info div {
3626 display: inline-block;
3627 width: 9px;
3628 height: 9px;
3629 border-radius: 1px;
3630 background-color: #fff;
3631 padding: 2px;
3632 margin: 5px 5px 5px 0;
3633 }
3634 .better-payment .bp-doughnut_info div .color-B {
3635 background-color: #8673FF;
3636 }
3637 .better-payment .bp-doughnut_info div .color-Y {
3638 background-color: #FFCF66;
3639 }
3640 .better-payment .bp-doughnut_info div .color-R {
3641 background-color: #FF5060;
3642 }
3643 .better-payment .p-0 {
3644 padding: 0 !important;
3645 }
3646 .better-payment .mb-0 {
3647 margin-bottom: 0 !important;
3648 }
3649 .better-payment .pb-0 {
3650 padding-bottom: 0 !important;
3651 }
3652 .better-payment .pl-0 {
3653 padding-left: 0 !important;
3654 }
3655 .better-payment .w-auto {
3656 min-width: auto !important;
3657 width: auto !important;
3658 }
3659 .better-payment .border-bottom_active {
3660 border-left: none !important;
3661 border-right: none !important;
3662 border-top: none !important;
3663 }
3664 .better-payment .min-w_600 {
3665 min-width: 580px !important;
3666 }
3667 .better-payment .line-height-0 {
3668 line-height: 0;
3669 }
3670 .better-payment .better-payment-transaction-import {
3671 margin-bottom: 5px;
3672 }
3673 @media only screen and (max-width: 1200px) {
3674 .better-payment .bp-amount h4,
3675 .better-payment .bp-transaction {
3676 font-size: 14px;
3677 }
3678 .better-payment .bp-amount_price {
3679 font-size: 32px;
3680 }
3681 .better-payment .bp-subscription_wrapper .bp-col_7 {
3682 width: 100%;
3683 }
3684 .better-payment .bp-subscription_box {
3685 margin-bottom: 24px;
3686 }
3687 .better-payment .bp-analytics_chart-wrapper .bp-col_10,
3688 .better-payment .bp-analytics_chart-wrapper .bp-col_4 {
3689 width: 100%;
3690 }
3691 .better-payment .bp-analytics_box {
3692 margin-bottom: 24px;
3693 }
3694 }
3695 @media only screen and (max-width: 1024px) {
3696 .better-payment .bp-logo {
3697 margin-bottom: 45px;
3698 }
3699 .better-payment .bp-amount_wrapper .bp-col_4 {
3700 width: 50%;
3701 }
3702 .better-payment .bp-amount {
3703 margin-bottom: 24px;
3704 }
3705 .better-payment .bp-chart_header .name h3 {
3706 font-size: 16px;
3707 }
3708 .better-payment .bp-th,
3709 .better-payment .bp-td {
3710 justify-content: space-between;
3711 }
3712 .better-payment .bp-th {
3713 padding: 9px 0px 9px 12px;
3714 }
3715 }
3716 @media only screen and (max-width: 800px) {
3717 .better-payment .flex-wrap {
3718 flex-wrap: wrap !important;
3719 }
3720 .better-payment .bp-amount_wrapper .bp-col_4 {
3721 width: 100% !important;
3722 }
3723 .better-payment .bp-multi-graph {
3724 width: 200px !important;
3725 height: 100px !important;
3726 }
3727 .better-payment .bp-multi-graph:before {
3728 width: 200px !important;
3729 height: 100px !important;
3730 }
3731 .better-payment .bp-graph {
3732 width: 200px !important;
3733 height: 100px !important;
3734 }
3735 .better-payment .better-payment-user-dashboard-container .dashboard-tab-wrapper .bp-total_count {
3736 margin-bottom: 20px;
3737 }
3738 .better-payment .bp-total_count {
3739 font-size: 28px !important;
3740 }
3741 .better-payment .bp-total_title {
3742 font-size: 10px !important;
3743 }
3744 }
3745 @media only screen and (max-width: 1024px) {
3746 .better-payment .gap-2 {
3747 gap: 4px;
3748 }
3749 .better-payment .gap-3 {
3750 gap: 6px;
3751 }
3752 .better-payment .gap-4 {
3753 gap: 8px;
3754 }
3755 .better-payment .gap-5 {
3756 gap: 12px;
3757 }
3758 .better-payment .gap-6 {
3759 gap: 16px;
3760 }
3761 .better-payment .gap-10 {
3762 gap: 24px;
3763 }
3764 .better-payment h2 {
3765 font-size: 20px;
3766 }
3767 .better-payment button {
3768 font-size: 12px;
3769 padding: 7px 12px;
3770 }
3771 .better-payment button.primary-btn {
3772 font-size: 14px;
3773 padding: 10px 16px;
3774 }
3775 .better-payment .bp--sidebar-wrapper {
3776 min-width: 200px;
3777 }
3778 .better-payment .bp--sidebar-nav-list {
3779 gap: 10px;
3780 }
3781 .better-payment .bp--sidebar-nav {
3782 gap: 8px;
3783 }
3784 .better-payment .bp--author {
3785 gap: 12px;
3786 margin-bottom: 40px;
3787 }
3788 .better-payment span.bp--nav-icon svg {
3789 width: 20px;
3790 height: 20px;
3791 }
3792 .better-payment .bp--sidebar-nav .bp--nav-text {
3793 font-size: 14px;
3794 }
3795 .better-payment .bp--db-main-wrapper {
3796 padding-right: 16px;
3797 flex-basis: calc(100% - 216px);
3798 max-width: calc(100% - 216px);
3799 }
3800 .better-payment .bp--db-header {
3801 padding: 12px 20px;
3802 margin-bottom: 16px;
3803 }
3804 .better-payment .bp--table-body {
3805 padding: 10px 20px;
3806 }
3807 .better-payment .bp--table-body .td .action-icon {
3808 width: 36px;
3809 height: 30px;
3810 }
3811 .better-payment .bp--table-header .th {
3812 font-size: 14px;
3813 }
3814 .better-payment .bp--table-body .td p {
3815 font-size: 12px;
3816 }
3817 .better-payment .bp--table-body .td span.action-icon i {
3818 font-size: 16px;
3819 }
3820 }
3821 .better-payment .bp-no_subscription-text {
3822 font-size: 14px;
3823 color: #48506d;
3824 font-weight: 400;
3825 }
3826 .better-payment .td-product_price span {
3827 font-size: 13px;
3828 font-weight: 600;
3829 color: #2a3256;
3830 }
3831 .better-payment .padding-0 {
3832 padding: 0px;
3833 }
3834 .better-payment .bp-hidden-xs {
3835 display: block;
3836 }
3837 .better-payment .bp-visible-xs {
3838 display: none;
3839 }
3840 .better-payment {
3841 /* Media Queries : Start */
3842 }
3843 @media (max-width: 767.98px) {
3844 .better-payment .bp-hidden-xs {
3845 display: none;
3846 }
3847 .better-payment .bp-visible-xs {
3848 display: block;
3849 }
3850 .better-payment .bp--db-main-wrapper {
3851 width: 100%;
3852 max-width: 100%;
3853 flex-basis: 100%;
3854 padding-right: 0px;
3855 }
3856 .better-payment .better-payment-user-dashboard-sidebar {
3857 position: absolute;
3858 top: 0;
3859 left: 0;
3860 z-index: 999;
3861 height: 100%;
3862 }
3863 .better-payment .bp-overlay {
3864 position: absolute;
3865 top: 0;
3866 bottom: 0;
3867 left: 0;
3868 right: 0;
3869 background-color: rgba(0, 0, 0, 0.5);
3870 z-index: 1;
3871 display: none;
3872 }
3873 .better-payment .bp-dashboard-hamburger {
3874 background: transparent;
3875 cursor: pointer;
3876 display: flex;
3877 align-items: center;
3878 }
3879 }
3880 .better-payment {
3881 /* Media Queries : End */
3882 }
3883
3884 .better-payment-warning {
3885 font-size: 13px;
3886 line-height: 18px;
3887 background-color: #f3f0ca;
3888 color: #886726;
3889 padding: 10px;
3890 border-radius: 3px;
3891 }
3892
3893 .better-payment-dynamic-value-info {
3894 word-break: break-word;
3895 }
3896
3897 div.bp-thank_page-custom-logo_wrapper-error svg {
3898 width: 70px;
3899 height: 70px;
3900 background: rgba(238, 96, 89, 0.1019607843);
3901 padding: 10px;
3902 border-radius: 16px;
3903 }
3904 div.bp-thank_page-custom-logo_wrapper-error svg path {
3905 stroke: #F44336;
3906 fill: #F44336;
3907 }
3908
3909 .bp-thank_page div.bp-thank_page-custom-logo_wrapper-success svg {
3910 width: 70px;
3911 height: 70px;
3912 background: rgba(107, 89, 238, 0.1019607843);
3913 padding: 10px;
3914 border-radius: 16px;
3915 }
3916 .bp-thank_page div.bp-thank_page-custom-logo_wrapper-success svg path {
3917 stroke: #6B59EE;
3918 fill: #6B59EE;
3919 }
3920
3921 .bp-thank_page-logo {
3922 display: flex;
3923 align-items: center;
3924 justify-content: center;
3925 }
3926
3927 div.bp-thank_page-custom-logo_wrapper-success.pf-block {
3928 display: flex;
3929 align-items: center;
3930 justify-content: center;
3931 line-height: 0;
3932 width: 70px;
3933 height: 70px;
3934 background: rgba(107, 89, 238, 0.1019607843);
3935 padding: 10px;
3936 border-radius: 16px;
3937 }
3938 div.bp-thank_page-custom-logo_wrapper-success.pf-block span,
3939 div.bp-thank_page-custom-logo_wrapper-success.pf-block i {
3940 font-size: 42px;
3941 color: #6B59EE;
3942 height: auto;
3943 width: auto;
3944 }
3945
3946 div.bp-thank_page-custom-logo_wrapper-error.pf-block {
3947 display: flex;
3948 align-items: center;
3949 justify-content: center;
3950 line-height: 0;
3951 width: 70px;
3952 height: 70px;
3953 background: rgba(238, 96, 89, 0.1019607843);
3954 padding: 10px;
3955 border-radius: 16px;
3956 }
3957 div.bp-thank_page-custom-logo_wrapper-error.pf-block span,
3958 div.bp-thank_page-custom-logo_wrapper-error.pf-block i {
3959 font-size: 42px;
3960 color: #F44336;
3961 height: auto;
3962 width: auto;
3963 }
3964
3965 .better-payment a {
3966 text-decoration: none;
3967 }
3968