PluginProbe
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More / 0.0.3
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More v0.0.3
2.4.1 2.4.0 2.3.4 2.3.3 2.3.2 2.3.1 2.3.0 2.2.2 2.2.1 2.2.0 2.1.2 2.1.1 trunk 0.0.1 0.0.2 0.0.3 0.0.4 0.0.5 0.0.6 0.0.7 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 All 68 releases
better-payment / assets / css / style.css

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

2,610 lines 62.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
2 :root {
3 --padding-30: 30px;
4 --padding-40: 40px;
5 --padding-50: 50px;
6 --padding-100: 100px;
7 --h2-fontsize: 24px;
8 --h3-fontsize: 18px;
9 --h4-fontsize: 18px;
10 --h5-fontsize: 18px;
11 --h6-fontsize: 16px;
12 --gutter-50: 50px;
13 --gutter-30: 30px;
14 --gutter-25: 25px
15 }
16
17 ::-moz-selection {
18 color: #fff;
19 background: rgba(110, 88, 247, 0.7)
20 }
21
22 ::selection {
23 color: #fff;
24 background: rgba(110, 88, 247, 0.7)
25 }
26
27 * {
28 margin: 0;
29 padding: 0;
30 outline: none;
31 border: none;
32 -webkit-box-sizing: border-box;
33 box-sizing: border-box
34 }
35
36 .better-payment_page_better-payment-analytics .notice,
37 .better-payment_page_better-payment-transactions .notice,
38 .toplevel_page_better-payment-settings .notice {
39 margin: 15px;
40 margin-right: 20px;
41 }
42 .better-payment_page_better-payment-analytics .e-notice__dismiss,
43 .better-payment_page_better-payment-transactions .e-notice__dismiss,
44 .toplevel_page_better-payment-settings .e-notice__dismiss {
45 box-sizing: content-box;
46 }
47
48 .better-payment {
49 font-family: "DM Sans", sans-serif;
50 line-height: 1.7;
51 font-weight: 400;
52 min-height: 100vh;
53 background: #fff;
54 color: #000;
55 -webkit-font-smoothing: antialiased;
56 -moz-font-smoothing: antialiased;
57 -ms-font-smoothing: antialiased;
58 -o-font-smoothing: antialiased;
59 font-smoothing: antialiased;
60 -webkit-text-rendering: optimizeLegibility;
61 -moz-text-rendering: optimizeLegibility;
62 -ms-text-rendering: optimizeLegibility;
63 -o-text-rendering: optimizeLegibility;
64 text-rendering: optimizeLegibility;
65 -webkit-scroll-behavior: smooth;
66 -moz-scroll-behavior: smooth;
67 -ms-scroll-behavior: smooth;
68 -o-scroll-behavior: smooth;
69 scroll-behavior: smooth;
70 font-size: 16px
71 }
72
73 @media (max-width: 1199.98px) {
74 body {
75 font-size: 14px
76 }
77 }
78
79 @media (max-width: 767.98px) {
80 body {
81 font-size: 13px
82 }
83 }
84
85 .better-payment a {
86 color: inherit;
87 -webkit-transition: all .3s ease 0s;
88 transition: all .3s ease 0s;
89 -webkit-transition-property: background, color, box-shadow, border;
90 -webkit-transition-property: background, color, border, -webkit-box-shadow;
91 transition-property: background, color, border, -webkit-box-shadow;
92 transition-property: background, color, box-shadow, border;
93 transition-property: background, color, box-shadow, border, -webkit-box-shadow;
94 text-decoration: none;
95 display: inline-block
96 }
97
98 .better-payment a:hover {
99 color: inherit;
100 }
101
102 .better-payment a.button:hover {
103 border-color: unset;
104 }
105
106 .better-payment a:focus,
107 .better-payment input:focus,
108 .better-payment textarea:focus,
109 .better-payment select:focus,
110 .better-payment a.button:focus,
111 .better-payment .button:focus {
112 outline: none;
113 box-shadow: none;
114 }
115
116 .better-payment li {
117 margin-bottom: 0;
118 }
119
120 .better-payment label {
121 margin-bottom: 0
122 }
123
124 .better-payment h1,
125 .better-payment h2,
126 .better-payment h3,
127 .better-payment h4,
128 .better-payment h5,
129 .better-payment h6,
130 .better-payment p {
131 margin: 0;
132 padding: 0;
133 font-family: "DM Sans", sans-serif
134 }
135
136 .better-payment h1,
137 .better-payment h2,
138 .better-payment h3,
139 .better-payment h4,
140 .better-payment h5,
141 .better-payment h6 {
142 font-weight: 700;
143 line-height: 1.3
144 }
145
146 .better-payment ul,
147 .better-payment ol {
148 padding: 0;
149 margin: 0;
150 list-style: none
151 }
152
153 .better-payment img,
154 .better-payment video {
155 max-width: 100%
156 }
157
158 .better-payment .button::after,
159 .better-payment .page__title span a::after,
160 .better-payment .statistic .icon::after,
161 .better-payment .pagination ul li a::after,
162 .better-payment .pagination ul li span::after,
163 .better-payment .button.button__active,
164 .better-payment .button.add__button,
165 .better-payment .bp-tabs .tab__menu .tab__list .tab__link.active,
166 .better-payment .pagination ul li a.active,
167 .better-payment .pagination ul li span.active {
168 background: linear-gradient(97.4deg, #A293FF 0%, #6E58F7 100%);
169 color: #fff
170 }
171
172 .better-payment .fix-style.button::after {
173 background: unset;
174 color: unset;
175 }
176
177 .better-payment .button,
178 .better-payment .page__title span a,
179 .better-payment .statistic .icon,
180 .better-payment .pagination ul li a,
181 .better-payment .pagination ul li span {
182 position: relative
183 }
184
185 .better-payment .button::before,
186 .better-payment .page__title span a::before,
187 .better-payment .statistic .icon::before,
188 .better-payment .pagination ul li a::before,
189 .better-payment .pagination ul li span::before,
190 .better-payment .button::after,
191 .better-payment .page__title span a::after,
192 .better-payment .statistic .icon::after,
193 .better-payment .pagination ul li a::after,
194 .better-payment .pagination ul li span::after {
195 position: absolute;
196 top: 0;
197 left: 0;
198 right: 0;
199 bottom: 0;
200 content: '';
201 z-index: -1;
202 -webkit-transition: all .3s ease 0s;
203 transition: all .3s ease 0s
204 }
205
206 .better-payment .button::before,
207 .better-payment .page__title span a::before,
208 .better-payment .statistic .icon::before,
209 .better-payment .pagination ul li a::before,
210 .better-payment .pagination ul li span::before {
211 background: rgba(110, 88, 247, 0.1);
212 opacity: 1
213 }
214
215 .better-payment .fix-style.button::before {
216 background: unset;
217 opacity: unset;
218 }
219
220 .better-payment .button::after,
221 .better-payment .page__title span a::after,
222 .better-payment .statistic .icon::after,
223 .better-payment .pagination ul li a::after,
224 .better-payment .pagination ul li span::after {
225 opacity: 0
226 }
227
228 .better-payment .button:hover,
229 .better-payment .page__title span a:hover,
230 .better-payment .statistic .icon:hover,
231 .better-payment .pagination ul li a:hover,
232 .better-payment .pagination ul li span:hover {
233 color: #fff
234 }
235
236 .better-payment .payment__getway .button:hover,
237 .better-payment .payment__info .button:hover
238 {
239 color: #fff
240 }
241
242 .better-payment .button:hover::before,
243 .better-payment .page__title span a:hover::before,
244 .better-payment .statistic .icon:hover::before,
245 .better-payment .pagination ul li a:hover::before,
246 .better-payment .pagination ul li span:hover::before {
247 opacity: 0
248 }
249
250 .better-payment .button:hover::after,
251 .better-payment .page__title span a:hover::after,
252 .better-payment .statistic .icon:hover::after,
253 .better-payment .pagination ul li a:hover::after,
254 .better-payment .pagination ul li span:hover::after {
255 opacity: 1
256 }
257
258 .better-payment .bp-tabs .tab__menu .tab__list .tab__link i,
259 .better-payment .statistic .icon i,
260 .better-payment .sidebar .sidebar__menu .sidebar__item .sidebar__link.active i,
261 .better-payment .feature__card .icon i,
262 .better-payment .transaction__info__wrap .transaction__info .info__header .title i,
263 .better-payment .payment__info .payment__getway .title i,
264 .better-payment .payment__info .email__activity .title i,
265 .better-payment .payment__info .email__activity .activity__list li .content i {
266 background: linear-gradient(97.4deg, #A293FF 0%, #6E58F7 100%);
267 -webkit-background-clip: text;
268 -webkit-text-fill-color: transparent
269 }
270
271 .better-payment .color__themeColor {
272 color: #6E58F7
273 }
274
275 .better-payment a.color__themeColor:hover,
276 .better-payment a.color__themeColor:focus {
277 color: #4427f5;
278 -webkit-box-shadow: none;
279 box-shadow: none
280 }
281
282 .better-payment .color__themeLite {
283 color: #A293FF
284 }
285
286 .better-payment a.color__themeLite:hover,
287 .better-payment a.color__themeLite:focus {
288 color: #7660ff;
289 -webkit-box-shadow: none;
290 box-shadow: none
291 }
292
293 .better-payment .color__primary {
294 color: #15A15E
295 }
296
297 .better-payment a.color__primary:hover,
298 .better-payment a.color__primary:focus {
299 color: #0f7444;
300 -webkit-box-shadow: none;
301 box-shadow: none
302 }
303
304 .better-payment .color__danger {
305 color: #FE494C
306 }
307
308 .better-payment a.color__danger:hover,
309 .better-payment a.color__danger:focus {
310 color: #fe161a;
311 -webkit-box-shadow: none;
312 box-shadow: none
313 }
314
315 .better-payment .color__warning {
316 color: #FFB03A
317 }
318
319 .better-payment a.color__warning:hover,
320 .better-payment a.color__warning:focus {
321 color: #ff9c07;
322 -webkit-box-shadow: none;
323 box-shadow: none
324 }
325
326 .better-payment .color__white {
327 color: #fff
328 }
329
330 .better-payment a.color__white:hover,
331 .better-payment a.color__white:focus {
332 color: #e6e6e6;
333 -webkit-box-shadow: none;
334 box-shadow: none
335 }
336
337 .better-payment .color__black {
338 color: #000
339 }
340
341 .better-payment .color__dark {
342 color: #2A3256
343 }
344
345 .better-payment a.color__dark:hover,
346 .better-payment a.color__dark:focus {
347 color: #191e34;
348 -webkit-box-shadow: none;
349 box-shadow: none
350 }
351
352 .better-payment .color__grey {
353 color: #F7F8FA
354 }
355
356 .better-payment a.color__grey:hover,
357 .better-payment a.color__grey:focus {
358 color: #d8dde6;
359 -webkit-box-shadow: none;
360 box-shadow: none
361 }
362
363 .better-payment .background__themeColor {
364 background-color: #6E58F7
365 }
366
367 .better-payment .background__themeLite {
368 background-color: #A293FF
369 }
370
371 .better-payment .background__primary {
372 background-color: #15A15E
373 }
374
375 .better-payment .background__danger {
376 background-color: #FE494C
377 }
378
379 .better-payment .background__warning {
380 background-color: #FFB03A
381 }
382
383 .better-payment .background__white {
384 background-color: #fff
385 }
386
387 .better-payment .background__black {
388 background-color: #000
389 }
390
391 .better-payment .background__dark {
392 background-color: #2A3256
393 }
394
395 .better-payment .background__grey {
396 background-color: #F7F8FA
397 }
398
399 .better-payment .gradient__themeColor {
400 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(110, 88, 247, 0.3)), to(rgba(110, 88, 247, 0.05)));
401 background-image: linear-gradient(180deg, rgba(110, 88, 247, 0.3), rgba(110, 88, 247, 0.05));
402 color: #6E58F7
403 }
404
405 .better-payment .gradient__themeLite {
406 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(162, 147, 255, 0.3)), to(rgba(162, 147, 255, 0.05)));
407 background-image: linear-gradient(180deg, rgba(162, 147, 255, 0.3), rgba(162, 147, 255, 0.05));
408 color: #A293FF
409 }
410
411 .better-payment .gradient__primary {
412 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(21, 161, 94, 0.3)), to(rgba(21, 161, 94, 0.05)));
413 background-image: linear-gradient(180deg, rgba(21, 161, 94, 0.3), rgba(21, 161, 94, 0.05));
414 color: #15A15E
415 }
416
417 .better-payment .gradient__danger {
418 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(254, 73, 76, 0.3)), to(rgba(254, 73, 76, 0.05)));
419 background-image: linear-gradient(180deg, rgba(254, 73, 76, 0.3), rgba(254, 73, 76, 0.05));
420 color: #FE494C
421 }
422
423 .better-payment .gradient__warning {
424 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 176, 58, 0.3)), to(rgba(255, 176, 58, 0.05)));
425 background-image: linear-gradient(180deg, rgba(255, 176, 58, 0.3), rgba(255, 176, 58, 0.05));
426 color: #FFB03A
427 }
428
429 .better-payment .gradient__white {
430 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.05)));
431 background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
432 color: #fff
433 }
434
435 .better-payment .gradient__black {
436 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.05)));
437 background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.05));
438 color: #000
439 }
440
441 .better-payment .gradient__dark {
442 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(42, 50, 86, 0.3)), to(rgba(42, 50, 86, 0.05)));
443 background-image: linear-gradient(180deg, rgba(42, 50, 86, 0.3), rgba(42, 50, 86, 0.05));
444 color: #2A3256
445 }
446
447 .better-payment .gradient__grey {
448 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(247, 248, 250, 0.3)), to(rgba(247, 248, 250, 0.05)));
449 background-image: linear-gradient(180deg, rgba(247, 248, 250, 0.3), rgba(247, 248, 250, 0.05));
450 color: #F7F8FA
451 }
452
453 .better-payment .button__themeColor:not(.hover__highlight) {
454 background: #6E58F7;
455 color: #fff;
456 border-color: #6E58F7;
457 -webkit-transition: all .3s ease 0s;
458 transition: all .3s ease 0s;
459 -webkit-transition-property: background, color, box-shadow, border;
460 -webkit-transition-property: background, color, border, -webkit-box-shadow;
461 transition-property: background, color, border, -webkit-box-shadow;
462 transition-property: background, color, box-shadow, border;
463 transition-property: background, color, box-shadow, border, -webkit-box-shadow
464 }
465
466 .better-payment .button__themeColor:not(.hover__highlight):disabled {
467 cursor: not-allowed;
468 background: #FE494C;
469 border-color: #FE494C
470 }
471
472 .better-payment .button__themeColor.hover__highlight {
473 color: #6E58F7;
474 border-color: transparent;
475 background: rgba(110, 88, 247, 0.1)
476 }
477
478 .better-payment .button__themeColor.hover__highlight:hover {
479 border-color: transparent
480 }
481
482 .better-payment a.button__themeColor.active,
483 .better-payment a.button__themeColor:hover,
484 .better-payment button.button__themeColor.active,
485 .better-payment button.button__themeColor:hover {
486 background: #5940f6;
487 color: #fff;
488 border-color: #5940f6;
489 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3)
490 }
491
492 .better-payment a.button__themeColor.active:disabled,
493 .better-payment a.button__themeColor:hover:disabled,
494 .better-payment button.button__themeColor.active:disabled,
495 .better-payment button.button__themeColor:hover:disabled {
496 cursor: not-allowed;
497 background: #FE494C;
498 -webkit-box-shadow: none;
499 box-shadow: none
500 }
501
502 .better-payment .button__themeLite:not(.hover__highlight) {
503 background: #A293FF;
504 color: #fff;
505 border-color: #A293FF;
506 -webkit-transition: all .3s ease 0s;
507 transition: all .3s ease 0s;
508 -webkit-transition-property: background, color, box-shadow, border;
509 -webkit-transition-property: background, color, border, -webkit-box-shadow;
510 transition-property: background, color, border, -webkit-box-shadow;
511 transition-property: background, color, box-shadow, border;
512 transition-property: background, color, box-shadow, border, -webkit-box-shadow
513 }
514
515 .better-payment .button__themeLite:not(.hover__highlight):disabled {
516 cursor: not-allowed;
517 background: #FE494C;
518 border-color: #FE494C
519 }
520
521 .better-payment .button__themeLite.hover__highlight {
522 color: #A293FF;
523 border-color: transparent;
524 background: rgba(162, 147, 255, 0.1)
525 }
526
527 .better-payment .button__themeLite.hover__highlight:hover {
528 border-color: transparent
529 }
530
531 .better-payment a.button__themeLite.active,
532 .better-payment a.button__themeLite:hover,
533 .better-payment button.button__themeLite.active,
534 .better-payment button.button__themeLite:hover {
535 background: #8c7aff;
536 color: #fff;
537 border-color: #8c7aff;
538 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3)
539 }
540
541 .better-payment a.button__themeLite.active:disabled,
542 .better-payment a.button__themeLite:hover:disabled,
543 .better-payment button.button__themeLite.active:disabled,
544 .better-payment button.button__themeLite:hover:disabled {
545 cursor: not-allowed;
546 background: #FE494C;
547 -webkit-box-shadow: none;
548 box-shadow: none
549 }
550
551 .better-payment .button__primary:not(.hover__highlight) {
552 background: #15A15E;
553 color: #fff;
554 border-color: #15A15E;
555 -webkit-transition: all .3s ease 0s;
556 transition: all .3s ease 0s;
557 -webkit-transition-property: background, color, box-shadow, border;
558 -webkit-transition-property: background, color, border, -webkit-box-shadow;
559 transition-property: background, color, border, -webkit-box-shadow;
560 transition-property: background, color, box-shadow, border;
561 transition-property: background, color, box-shadow, border, -webkit-box-shadow
562 }
563
564 .better-payment .button__primary:not(.hover__highlight):disabled {
565 cursor: not-allowed;
566 background: #FE494C;
567 border-color: #FE494C
568 }
569
570 .better-payment .button__primary.hover__highlight {
571 color: #15A15E;
572 border-color: transparent;
573 background: rgba(21, 161, 94, 0.1)
574 }
575
576 .better-payment .button__primary.hover__highlight:hover {
577 border-color: transparent
578 }
579
580 .better-payment a.button__primary.active,
581 .better-payment a.button__primary:hover,
582 .better-payment button.button__primary.active,
583 .better-payment button.button__primary:hover {
584 background: #128a51;
585 color: #fff;
586 border-color: #128a51;
587 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3)
588 }
589
590 .better-payment a.button__primary.active:disabled,
591 .better-payment a.button__primary:hover:disabled,
592 .better-payment button.button__primary.active:disabled,
593 .better-payment button.button__primary:hover:disabled {
594 cursor: not-allowed;
595 background: #FE494C;
596 -webkit-box-shadow: none;
597 box-shadow: none
598 }
599
600 .better-payment .button__danger:not(.hover__highlight) {
601 background: #FE494C;
602 color: #fff;
603 border-color: #FE494C;
604 -webkit-transition: all .3s ease 0s;
605 transition: all .3s ease 0s;
606 -webkit-transition-property: background, color, box-shadow, border;
607 -webkit-transition-property: background, color, border, -webkit-box-shadow;
608 transition-property: background, color, border, -webkit-box-shadow;
609 transition-property: background, color, box-shadow, border;
610 transition-property: background, color, box-shadow, border, -webkit-box-shadow
611 }
612
613 .better-payment .button__danger:not(.hover__highlight):disabled {
614 cursor: not-allowed;
615 background: #FE494C;
616 border-color: #FE494C
617 }
618
619 .better-payment .button__danger.hover__highlight {
620 color: #FE494C;
621 border-color: transparent;
622 background: rgba(254, 73, 76, 0.1)
623 }
624
625 .better-payment .button__danger.hover__highlight:hover {
626 border-color: transparent
627 }
628
629 .better-payment a.button__danger.active,
630 .better-payment a.button__danger:hover,
631 .better-payment button.button__danger.active,
632 .better-payment button.button__danger:hover {
633 background: #fe3033;
634 color: #fff;
635 border-color: #fe3033;
636 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3)
637 }
638
639 .better-payment a.button__danger.active:disabled,
640 .better-payment a.button__danger:hover:disabled,
641 .better-payment button.button__danger.active:disabled,
642 .better-payment button.button__danger:hover:disabled {
643 cursor: not-allowed;
644 background: #FE494C;
645 -webkit-box-shadow: none;
646 box-shadow: none
647 }
648
649 .better-payment .button__warning:not(.hover__highlight) {
650 background: #FFB03A;
651 color: #fff;
652 border-color: #FFB03A;
653 -webkit-transition: all .3s ease 0s;
654 transition: all .3s ease 0s;
655 -webkit-transition-property: background, color, box-shadow, border;
656 -webkit-transition-property: background, color, border, -webkit-box-shadow;
657 transition-property: background, color, border, -webkit-box-shadow;
658 transition-property: background, color, box-shadow, border;
659 transition-property: background, color, box-shadow, border, -webkit-box-shadow
660 }
661
662 .better-payment .button__warning:not(.hover__highlight):disabled {
663 cursor: not-allowed;
664 background: #FE494C;
665 border-color: #FE494C
666 }
667
668 .better-payment .button__warning.hover__highlight {
669 color: #FFB03A;
670 border-color: transparent;
671 background: rgba(255, 176, 58, 0.1)
672 }
673
674 .better-payment .button__warning.hover__highlight:hover {
675 border-color: transparent
676 }
677
678 .better-payment a.button__warning.active,
679 .better-payment a.button__warning:hover,
680 .better-payment button.button__warning.active,
681 .better-payment button.button__warning:hover {
682 background: #ffa621;
683 color: #fff;
684 border-color: #ffa621;
685 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3)
686 }
687
688 .better-payment a.button__warning.active:disabled,
689 .better-payment a.button__warning:hover:disabled,
690 .better-payment button.button__warning.active:disabled,
691 .better-payment button.button__warning:hover:disabled {
692 cursor: not-allowed;
693 background: #FE494C;
694 -webkit-box-shadow: none;
695 box-shadow: none
696 }
697
698 .better-payment .button__white:not(.hover__highlight) {
699 background: #fff;
700 color: #9095a2;
701 border-color: #fff;
702 -webkit-transition: all .3s ease 0s;
703 transition: all .3s ease 0s;
704 -webkit-transition-property: background, color, box-shadow, border;
705 -webkit-transition-property: background, color, border, -webkit-box-shadow;
706 transition-property: background, color, border, -webkit-box-shadow;
707 transition-property: background, color, box-shadow, border;
708 transition-property: background, color, box-shadow, border, -webkit-box-shadow
709 }
710
711 .better-payment .button__white:not(.hover__highlight):disabled {
712 cursor: not-allowed;
713 background: #FE494C;
714 border-color: #FE494C
715 }
716
717 .better-payment .button__white.hover__highlight {
718 color: #fff;
719 border-color: transparent;
720 background: rgba(255, 255, 255, 0.1)
721 }
722
723 .better-payment .button__white.hover__highlight:hover {
724 border-color: transparent
725 }
726
727 .better-payment a.button__white.active,
728 .better-payment a.button__white:hover,
729 .better-payment button.button__white.active,
730 .better-payment button.button__white:hover {
731 background: #f2f2f2;
732 color: #9095a2;
733 border-color: #f2f2f2;
734 text-shadow: 0 1px 1px rgba(144, 149, 162, 0.3)
735 }
736
737 .better-payment a.button__white.active:disabled,
738 .better-payment a.button__white:hover:disabled,
739 .better-payment button.button__white.active:disabled,
740 .better-payment button.button__white:hover:disabled {
741 cursor: not-allowed;
742 background: #FE494C;
743 -webkit-box-shadow: none;
744 box-shadow: none
745 }
746
747 .better-payment .button__black:not(.hover__highlight) {
748 background: #000;
749 color: #fff;
750 border-color: #000;
751 -webkit-transition: all .3s ease 0s;
752 transition: all .3s ease 0s;
753 -webkit-transition-property: background, color, box-shadow, border;
754 -webkit-transition-property: background, color, border, -webkit-box-shadow;
755 transition-property: background, color, border, -webkit-box-shadow;
756 transition-property: background, color, box-shadow, border;
757 transition-property: background, color, box-shadow, border, -webkit-box-shadow
758 }
759
760 .better-payment .button__black:not(.hover__highlight):disabled {
761 cursor: not-allowed;
762 background: #FE494C;
763 border-color: #FE494C
764 }
765
766 .better-payment .button__black.hover__highlight {
767 color: #000;
768 border-color: transparent;
769 background: rgba(0, 0, 0, 0.1)
770 }
771
772 .better-payment .button__black.hover__highlight:hover {
773 border-color: transparent
774 }
775
776 .better-payment a.button__black.active:disabled,
777 .better-payment a.button__black:hover:disabled,
778 .better-payment button.button__black.active:disabled,
779 .better-payment button.button__black:hover:disabled {
780 cursor: not-allowed;
781 background: #FE494C;
782 -webkit-box-shadow: none;
783 box-shadow: none
784 }
785
786 .better-payment .button__dark:not(.hover__highlight) {
787 background: #2A3256;
788 color: #fff;
789 border-color: #2A3256;
790 -webkit-transition: all .3s ease 0s;
791 transition: all .3s ease 0s;
792 -webkit-transition-property: background, color, box-shadow, border;
793 -webkit-transition-property: background, color, border, -webkit-box-shadow;
794 transition-property: background, color, border, -webkit-box-shadow;
795 transition-property: background, color, box-shadow, border;
796 transition-property: background, color, box-shadow, border, -webkit-box-shadow
797 }
798
799 .better-payment .button__dark:not(.hover__highlight):disabled {
800 cursor: not-allowed;
801 background: #FE494C;
802 border-color: #FE494C
803 }
804
805 .better-payment .button__dark.hover__highlight {
806 color: #2A3256;
807 border-color: transparent;
808 background: rgba(42, 50, 86, 0.1)
809 }
810
811 .better-payment .button__dark.hover__highlight:hover {
812 border-color: transparent
813 }
814
815 .better-payment a.button__dark.active,
816 .better-payment a.button__dark:hover,
817 .better-payment button.button__dark.active,
818 .better-payment button.button__dark:hover {
819 background: #222845;
820 color: #fff;
821 border-color: #222845;
822 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3)
823 }
824
825 .better-payment a.button__dark.active:disabled,
826 .better-payment a.button__dark:hover:disabled,
827 .better-payment button.button__dark.active:disabled,
828 .better-payment button.button__dark:hover:disabled {
829 cursor: not-allowed;
830 background: #FE494C;
831 -webkit-box-shadow: none;
832 box-shadow: none
833 }
834
835 .better-payment .button__grey:not(.hover__highlight) {
836 background: #F7F8FA;
837 color: #9095a2;
838 border-color: #F7F8FA;
839 -webkit-transition: all .3s ease 0s;
840 transition: all .3s ease 0s;
841 -webkit-transition-property: background, color, box-shadow, border;
842 -webkit-transition-property: background, color, border, -webkit-box-shadow;
843 transition-property: background, color, border, -webkit-box-shadow;
844 transition-property: background, color, box-shadow, border;
845 transition-property: background, color, box-shadow, border, -webkit-box-shadow
846 }
847
848 .better-payment .button__grey:not(.hover__highlight):disabled {
849 cursor: not-allowed;
850 background: #FE494C;
851 border-color: #FE494C
852 }
853
854 .better-payment .button__grey.hover__highlight {
855 color: #F7F8FA;
856 border-color: transparent;
857 background: rgba(247, 248, 250, 0.1)
858 }
859
860 .better-payment .button__grey.hover__highlight:hover {
861 border-color: transparent
862 }
863
864 .better-payment a.button__grey.active,
865 .better-payment a.button__grey:hover,
866 .better-payment button.button__grey.active,
867 .better-payment button.button__grey:hover {
868 background: #e7eaf0;
869 color: #9095a2;
870 border-color: #e7eaf0;
871 text-shadow: 0 1px 1px rgba(144, 149, 162, 0.3)
872 }
873
874 .better-payment a.button__grey.active:disabled,
875 .better-payment a.button__grey:hover:disabled,
876 .better-payment button.button__grey.active:disabled,
877 .better-payment button.button__grey:hover:disabled {
878 cursor: not-allowed;
879 background: #FE494C;
880 -webkit-box-shadow: none;
881 box-shadow: none
882 }
883
884 .better-payment .button {
885 text-align: center;
886 padding: 12px 30px;
887 line-height: 1.3;
888 color: #6E58F7;
889 border: 1px solid transparent;
890 font-size: 14px;
891 font-weight: 500;
892 font-family: "DM Sans", sans-serif;
893 overflow: hidden;
894 z-index: 1;
895 border-radius: 10px
896 }
897
898 .better-payment .payment__getway .button,
899 .better-payment .payment__info .button
900 {
901 text-align: center;
902 padding: 12px 30px;
903 line-height: 1.3;
904 color: #6E58F7;
905 border: 1px solid transparent;
906 font-size: 14px;
907 font-weight: 500;
908 font-family: "DM Sans", sans-serif;
909 overflow: hidden;
910 z-index: 1;
911 border-radius: 10px;
912 height: unset;
913 background: unset;
914 }
915
916 .better-payment .button.button--sm {
917 padding: 9.5px 20px
918 }
919
920 .better-payment .button.button__active {
921 border: 0;
922 /* padding: 13px 30px; */
923 padding: 20px 30px;
924 }
925
926 .better-payment .button.add__button {
927 /* padding: 7.5px 15px; */
928 padding: 20px 15px;
929 border: 2px solid
930 }
931
932 .better-payment .button.add__button:hover span {
933 color: #6E58F7
934 }
935
936 .better-payment .button.add__button span {
937 height: 30px;
938 width: 30px;
939 border-radius: 50%;
940 background: #fff;
941 line-height: 32px;
942 margin-right: 5px;
943 text-align: center;
944 display: inline-block;
945 font-size: 10px;
946 color: #6E58F7
947 }
948
949 .better-payment button.button {
950 cursor: pointer
951 }
952
953 .better-payment .button__flex {
954 display: -webkit-inline-box;
955 display: -ms-inline-flexbox;
956 display: inline-flex;
957 -webkit-box-align: center;
958 -ms-flex-align: center;
959 align-items: center
960 }
961
962 .better-payment .radius-10 {
963 border-radius: 10px
964 }
965
966 .better-payment .radius-15 {
967 border-radius: 15px
968 }
969
970 .better-payment .radius-20 {
971 border-radius: 20px
972 }
973
974 .better-payment .label__themeColor {
975 background: #6E58F7;
976 color: #fff !important;
977 -webkit-transition: all .3s ease 0s;
978 transition: all .3s ease 0s;
979 -webkit-transition-property: background, color, box-shadow, border;
980 -webkit-transition-property: background, color, border, -webkit-box-shadow;
981 transition-property: background, color, border, -webkit-box-shadow;
982 transition-property: background, color, box-shadow, border;
983 transition-property: background, color, box-shadow, border, -webkit-box-shadow
984 }
985
986 .better-payment .label__themeLite {
987 background: #A293FF;
988 color: #fff !important;
989 -webkit-transition: all .3s ease 0s;
990 transition: all .3s ease 0s;
991 -webkit-transition-property: background, color, box-shadow, border;
992 -webkit-transition-property: background, color, border, -webkit-box-shadow;
993 transition-property: background, color, border, -webkit-box-shadow;
994 transition-property: background, color, box-shadow, border;
995 transition-property: background, color, box-shadow, border, -webkit-box-shadow
996 }
997
998 .better-payment .label__primary {
999 background: #15A15E;
1000 color: #fff !important;
1001 -webkit-transition: all .3s ease 0s;
1002 transition: all .3s ease 0s;
1003 -webkit-transition-property: background, color, box-shadow, border;
1004 -webkit-transition-property: background, color, border, -webkit-box-shadow;
1005 transition-property: background, color, border, -webkit-box-shadow;
1006 transition-property: background, color, box-shadow, border;
1007 transition-property: background, color, box-shadow, border, -webkit-box-shadow
1008 }
1009
1010 .better-payment .label__danger {
1011 background: #FE494C;
1012 color: #fff !important;
1013 -webkit-transition: all .3s ease 0s;
1014 transition: all .3s ease 0s;
1015 -webkit-transition-property: background, color, box-shadow, border;
1016 -webkit-transition-property: background, color, border, -webkit-box-shadow;
1017 transition-property: background, color, border, -webkit-box-shadow;
1018 transition-property: background, color, box-shadow, border;
1019 transition-property: background, color, box-shadow, border, -webkit-box-shadow
1020 }
1021
1022 .better-payment .label__warning {
1023 background: #FFB03A;
1024 color: #fff !important;
1025 -webkit-transition: all .3s ease 0s;
1026 transition: all .3s ease 0s;
1027 -webkit-transition-property: background, color, box-shadow, border;
1028 -webkit-transition-property: background, color, border, -webkit-box-shadow;
1029 transition-property: background, color, border, -webkit-box-shadow;
1030 transition-property: background, color, box-shadow, border;
1031 transition-property: background, color, box-shadow, border, -webkit-box-shadow
1032 }
1033
1034 .better-payment .label__white {
1035 background: #fff;
1036 color: #fff !important;
1037 -webkit-transition: all .3s ease 0s;
1038 transition: all .3s ease 0s;
1039 -webkit-transition-property: background, color, box-shadow, border;
1040 -webkit-transition-property: background, color, border, -webkit-box-shadow;
1041 transition-property: background, color, border, -webkit-box-shadow;
1042 transition-property: background, color, box-shadow, border;
1043 transition-property: background, color, box-shadow, border, -webkit-box-shadow
1044 }
1045
1046 .better-payment .label__black {
1047 background: #000;
1048 color: #fff !important;
1049 -webkit-transition: all .3s ease 0s;
1050 transition: all .3s ease 0s;
1051 -webkit-transition-property: background, color, box-shadow, border;
1052 -webkit-transition-property: background, color, border, -webkit-box-shadow;
1053 transition-property: background, color, border, -webkit-box-shadow;
1054 transition-property: background, color, box-shadow, border;
1055 transition-property: background, color, box-shadow, border, -webkit-box-shadow
1056 }
1057
1058 .better-payment .label__dark {
1059 background: #2A3256;
1060 color: #fff !important;
1061 -webkit-transition: all .3s ease 0s;
1062 transition: all .3s ease 0s;
1063 -webkit-transition-property: background, color, box-shadow, border;
1064 -webkit-transition-property: background, color, border, -webkit-box-shadow;
1065 transition-property: background, color, border, -webkit-box-shadow;
1066 transition-property: background, color, box-shadow, border;
1067 transition-property: background, color, box-shadow, border, -webkit-box-shadow
1068 }
1069
1070 .better-payment .label__grey {
1071 background: #F7F8FA;
1072 color: #fff !important;
1073 -webkit-transition: all .3s ease 0s;
1074 transition: all .3s ease 0s;
1075 -webkit-transition-property: background, color, box-shadow, border;
1076 -webkit-transition-property: background, color, border, -webkit-box-shadow;
1077 transition-property: background, color, border, -webkit-box-shadow;
1078 transition-property: background, color, box-shadow, border;
1079 transition-property: background, color, box-shadow, border, -webkit-box-shadow
1080 }
1081
1082 .better-payment .text__label {
1083 font-size: 14px;
1084 font-weight: 400;
1085 display: inline-block;
1086 border-radius: 20px;
1087 padding: 3px 15px
1088 }
1089
1090 .better-payment .badge__themeColor {
1091 background: rgba(110, 88, 247, 0.1);
1092 color: #6E58F7
1093 }
1094
1095 .better-payment .badge__themeLite {
1096 background: rgba(162, 147, 255, 0.1);
1097 color: #A293FF
1098 }
1099
1100 .better-payment .badge__primary {
1101 background: rgba(21, 161, 94, 0.1);
1102 color: #15A15E
1103 }
1104
1105 .better-payment .badge__danger {
1106 background: rgba(254, 73, 76, 0.1);
1107 color: #FE494C
1108 }
1109
1110 .better-payment .badge__warning {
1111 background: rgba(255, 176, 58, 0.1);
1112 color: #FFB03A
1113 }
1114
1115 .better-payment .badge__white {
1116 background: rgba(255, 255, 255, 0.1);
1117 color: #fff
1118 }
1119
1120 .better-payment .badge__black {
1121 background: rgba(0, 0, 0, 0.1);
1122 color: #000
1123 }
1124
1125 .better-payment .badge__dark {
1126 background: rgba(42, 50, 86, 0.1);
1127 color: #2A3256
1128 }
1129
1130 .better-payment .badge__grey {
1131 background: rgba(247, 248, 250, 0.1);
1132 color: #F7F8FA
1133 }
1134
1135 .better-payment .badge {
1136 font-size: 14px;
1137 font-weight: 500;
1138 color: #9095A2;
1139 padding: 5px 10px;
1140 border-radius: 8px;
1141 display: inline-block
1142 }
1143
1144 @media (max-width: 767.98px) {
1145 .better-payment .badge {
1146 font-size: 12px;
1147 padding: 3px 10px
1148 }
1149 }
1150
1151 .better-payment .template__wrapper {
1152 min-height: 100vh;
1153 padding: 30px 5px;
1154 }
1155
1156 .better-payment .template__wrapper--flex {
1157 display: -webkit-box;
1158 display: -ms-flexbox;
1159 display: flex;
1160 -webkit-box-align: start;
1161 -ms-flex-align: start;
1162 align-items: flex-start
1163 }
1164
1165 .better-payment .o-hidden {
1166 overflow: hidden
1167 }
1168
1169 .better-payment .text-center {
1170 text-align: center
1171 }
1172
1173 .better-payment .text-right {
1174 text-align: right !important;
1175 }
1176
1177 .better-payment .h-100 {
1178 height: 100%
1179 }
1180
1181 .better-payment svg {
1182 font-family: "DM Sans", sans-serif
1183 }
1184
1185 .better-payment .px25 {
1186 padding-right: var(--gutter-25);
1187 padding-left: var(--gutter-25)
1188 }
1189
1190 .better-payment .px30 {
1191 padding-right: var(--gutter-30);
1192 padding-left: var(--gutter-30)
1193 }
1194
1195 .better-payment .px50 {
1196 padding-right: var(--gutter-50);
1197 padding-left: var(--gutter-50)
1198 }
1199
1200 .better-payment .pt30 {
1201 padding-top: var(--padding-30)
1202 }
1203
1204 .better-payment .p50 {
1205 padding: var(--padding-50)
1206 }
1207
1208 .better-payment .pb50 {
1209 padding-bottom: var(--padding-50)
1210 }
1211
1212 .better-payment .pb30 {
1213 padding-bottom: var(--padding-30)
1214 }
1215
1216 .better-payment .mb50 {
1217 margin-bottom: 50px
1218 }
1219
1220 .better-payment .mr10 {
1221 margin-right: 10px
1222 }
1223
1224 .better-payment .mb30 {
1225 margin-bottom: 30px
1226 }
1227
1228 .better-payment .mt30 {
1229 margin-top: 30px
1230 }
1231
1232 .better-payment .mt0 {
1233 margin-top: 0px !important;
1234 }
1235
1236 .better-payment .mt15 {
1237 margin-top: 15px
1238 }
1239
1240 .better-payment .mt20 {
1241 margin-top: 20px
1242 }
1243
1244 .better-payment .mb20 {
1245 margin-bottom: 20px
1246 }
1247
1248 .better-payment .ml0 {
1249 margin-left: 0px;
1250 }
1251
1252 .better-payment .pl0 {
1253 padding-left: 0px !important;
1254 }
1255
1256 .better-payment .container {
1257 padding-left: 15px;
1258 padding-right: 15px
1259 }
1260
1261 .better-payment .row {
1262 margin-left: -15px !important;
1263 margin-right: -15px !important
1264 }
1265
1266 .better-payment .row>* {
1267 padding-left: 15px;
1268 padding-right: 15px
1269 }
1270
1271 @media (max-width: 1199.98px) {
1272 .better-payment .lg-mb30 {
1273 margin-bottom: 30px
1274 }
1275 }
1276 @media (max-width: 991.98px) {
1277 .better-payment .md-mb30 {
1278 margin-bottom: 30px
1279 }
1280 }
1281
1282 .better-payment .sidebar__tab__content {
1283 display: none
1284 }
1285
1286 .better-payment .sidebar__tab__content.show {
1287 display: block
1288 }
1289
1290 .better-payment .bp-container {
1291 padding-right: 15px;
1292 padding-left: 15px;
1293 padding-bottom: 30px;
1294 }
1295
1296 .better-payment .bp-row {
1297 margin-right: -15px;
1298 margin-left: -15px;
1299 display: -webkit-box;
1300 display: -ms-flexbox;
1301 display: flex;
1302 -ms-flex-wrap: wrap;
1303 flex-wrap: wrap
1304 }
1305
1306 .better-payment .bp-row>* {
1307 padding-left: 15px;
1308 padding-right: 15px
1309 }
1310
1311 .better-payment .bp-row::after {
1312 content: '';
1313 display: block;
1314 clear: both
1315 }
1316
1317 .better-payment .bp-col {
1318 -webkit-box-flex: 0;
1319 -ms-flex: 0 0 100%;
1320 flex: 0 0 100%;
1321 overflow: auto;
1322 }
1323
1324 .better-payment .bp-col-9 {
1325 -webkit-box-flex: 0;
1326 -ms-flex: 0 0 auto;
1327 flex: 0 0 auto;
1328 width: calc((100% / 12) * 9)
1329 }
1330
1331 .better-payment .bp-col-3 {
1332 -webkit-box-flex: 0;
1333 -ms-flex: 0 0 auto;
1334 flex: 0 0 auto;
1335 width: calc((100% / 12) * 3)
1336 }
1337
1338 @media (min-width: 576px) {
1339 .better-payment .bp-col-sm-6 {
1340 -webkit-box-flex: 0;
1341 -ms-flex: 0 0 auto;
1342 flex: 0 0 auto;
1343 width: calc((100% / 12) * 6)
1344 }
1345 }
1346
1347 @media (min-width: 768px) {
1348 .better-payment .bp-col-md-6 {
1349 -webkit-box-flex: 0;
1350 -ms-flex: 0 0 auto;
1351 flex: 0 0 auto;
1352 width: calc((100% / 12) * 6)
1353 }
1354
1355 .better-payment .bp-col-md-4 {
1356 -webkit-box-flex: 0;
1357 -ms-flex: 0 0 auto;
1358 flex: 0 0 auto;
1359 width: calc((100% / 12) * 4)
1360 }
1361
1362 }
1363
1364 @media (min-width: 992px) {
1365 .better-payment .bp-col-lg-9 {
1366 -webkit-box-flex: 0;
1367 -ms-flex: 0 0 auto;
1368 flex: 0 0 auto;
1369 width: calc((100% / 12) * 9)
1370 }
1371
1372 .better-payment .bp-col-lg-8 {
1373 -webkit-box-flex: 0;
1374 -ms-flex: 0 0 auto;
1375 flex: 0 0 auto;
1376 width: calc((100% / 12) * 8)
1377 }
1378
1379 .better-payment .bp-col-lg-4 {
1380 -webkit-box-flex: 0;
1381 -ms-flex: 0 0 auto;
1382 flex: 0 0 auto;
1383 width: calc((100% / 12) * 4)
1384 }
1385
1386 .better-payment .bp-col-lg-3 {
1387 -webkit-box-flex: 0;
1388 -ms-flex: 0 0 auto;
1389 flex: 0 0 auto;
1390 width: calc((100% / 12) * 3)
1391 }
1392 }
1393
1394 @media (min-width: 1200px) {
1395 .better-payment .bp-col-xl-3 {
1396 -webkit-box-flex: 0;
1397 -ms-flex: 0 0 auto;
1398 flex: 0 0 auto;
1399 width: calc((100% / 12) * 3)
1400 }
1401 }
1402
1403 @media (min-width: 1200px) {
1404 .better-payment .bp-col-xl-4 {
1405 -webkit-box-flex: 0;
1406 -ms-flex: 0 0 auto;
1407 flex: 0 0 auto;
1408 width: calc((100% / 12) * 4)
1409 }
1410 }
1411
1412 .better-payment .main__content__area {
1413 display: -webkit-box;
1414 display: -ms-flexbox;
1415 display: flex
1416 }
1417
1418 .better-payment .main__content__area .sidebar {
1419 -webkit-box-flex: 0;
1420 -ms-flex: 0 0 220px;
1421 flex: 0 0 220px;
1422 background: rgba(110, 88, 247, 0.1)
1423 }
1424
1425 .better-payment .main__content__area .content__area__body {
1426 -webkit-box-flex: 1;
1427 -ms-flex: 1 1 auto;
1428 flex: 1 1 auto
1429 }
1430
1431 .better-payment .page__title span {
1432 display: -webkit-box;
1433 display: -ms-flexbox;
1434 display: flex;
1435 -webkit-box-align: center;
1436 -ms-flex-align: center;
1437 align-items: center;
1438 font-size: var(--h4-fontsize);
1439 font-weight: 500;
1440 color: #2A3256
1441 }
1442
1443 .better-payment .page__title span a {
1444 background: #FFFFFF;
1445 border: 1px solid rgba(131, 133, 142, 0.3);
1446 border-radius: 2px;
1447 display: inline-block;
1448 height: 40px;
1449 width: 40px;
1450 line-height: 40px;
1451 font-size: 14px;
1452 font-weight: 400;
1453 color: #9095A2;
1454 text-align: center;
1455 overflow: hidden;
1456 z-index: 1;
1457 margin-right: 15px
1458 }
1459
1460 .better-payment .page__title span a::before {
1461 background: #fff
1462 }
1463
1464 .better-payment .page__title span a:hover i {
1465 color: #fff
1466 }
1467
1468 .better-payment .page__title span a i {
1469 -webkit-transition: all .3s ease 0s;
1470 transition: all .3s ease 0s;
1471 -webkit-transition-property: color;
1472 transition-property: color
1473 }
1474
1475 .better-payment .bp-tabs .tab__menu {
1476 padding: 0;
1477 margin: 0;
1478 list-style: none;
1479 display: -webkit-box;
1480 display: -ms-flexbox;
1481 display: flex;
1482 -webkit-box-align: center;
1483 -ms-flex-align: center;
1484 align-items: center;
1485 margin-bottom: 5px
1486 }
1487
1488 .better-payment .bp-tabs .tab__menu .tab__list {
1489 margin-bottom: 5px;
1490 -webkit-box-flex: 0;
1491 -ms-flex: 0 0 calc(25% - 4.5px);
1492 flex: 0 0 calc(25% - 4.5px)
1493 }
1494
1495 .better-payment .bp-tabs .tab__menu .tab__list:not(:last-child) {
1496 margin-right: 6px
1497 }
1498
1499 .better-payment .bp-tabs .tab__menu .tab__list .tab__link {
1500 font-size: 16px;
1501 font-weight: 500;
1502 color: #9095A2;
1503 background: #fff;
1504 padding: 11.5px 30px;
1505 display: -webkit-box;
1506 display: -ms-flexbox;
1507 display: flex;
1508 -webkit-box-align: center;
1509 -ms-flex-align: center;
1510 align-items: center;
1511 -webkit-box-pack: center;
1512 -ms-flex-pack: center;
1513 justify-content: center
1514 }
1515
1516 .better-payment .bp-tabs .tab__menu .tab__list .tab__link.active i {
1517 color: #fff;
1518 -webkit-text-fill-color: unset
1519 }
1520
1521 .better-payment .bp-tabs .tab__menu .tab__list .tab__link i {
1522 font-size: 16px;
1523 margin-right: 10px
1524 }
1525
1526 .better-payment .bp-tabs .tab__content__item {
1527 display: none
1528 }
1529
1530 .better-payment .bp-tabs .tab__content__item.show {
1531 display: block
1532 }
1533
1534 .better-payment .statistic {
1535 background: #fff;
1536 margin-bottom: 30px;
1537 padding: 30px;
1538 display: -webkit-box;
1539 display: -ms-flexbox;
1540 display: flex;
1541 -webkit-box-align: center;
1542 -ms-flex-align: center;
1543 align-items: center;
1544 -webkit-transition: all .3s ease 0s;
1545 transition: all .3s ease 0s;
1546 -webkit-transition-property: box-shadow;
1547 -webkit-transition-property: -webkit-box-shadow;
1548 transition-property: -webkit-box-shadow;
1549 transition-property: box-shadow;
1550 transition-property: box-shadow, -webkit-box-shadow
1551 }
1552
1553 .better-payment .statistic:hover {
1554 -webkit-box-shadow: -30px 30px 150px rgba(0, 0, 0, 0.1);
1555 box-shadow: -30px 30px 150px rgba(0, 0, 0, 0.1)
1556 }
1557
1558 .better-payment .statistic:hover .icon {
1559 color: #fff
1560 }
1561
1562 .better-payment .statistic:hover .icon i {
1563 -webkit-text-fill-color: unset;
1564 color: #fff
1565 }
1566
1567 .better-payment .statistic:hover .icon::before {
1568 opacity: 0
1569 }
1570
1571 .better-payment .statistic:hover .icon::after {
1572 opacity: 1
1573 }
1574
1575 .better-payment .statistic .icon {
1576 height: 80px;
1577 width: 80px;
1578 min-width: 80px;
1579 -webkit-box-flex: 0;
1580 -ms-flex: 0 0 80px;
1581 flex: 0 0 80px;
1582 border-radius: 50%;
1583 line-height: 83px;
1584 text-align: center;
1585 font-size: 30px;
1586 overflow: hidden;
1587 z-index: 1;
1588 margin-right: 20px;
1589 -webkit-transition: all .3s ease 0s;
1590 transition: all .3s ease 0s;
1591 -webkit-transition-property: background;
1592 transition-property: background
1593 }
1594
1595 .better-payment .statistic .icon i {
1596 color: #fff;
1597 -webkit-transition: all .3s ease 0s;
1598 transition: all .3s ease 0s;
1599 -webkit-transition-property: color;
1600 transition-property: color
1601 }
1602
1603 .better-payment .statistic .statistic__body h3 {
1604 font-size: var(--h3-fontsize);
1605 font-weight: 700;
1606 color: #2A3256
1607 }
1608
1609 .better-payment .statistic .statistic__body p {
1610 font-size: var(--h6-fontsize);
1611 font-weight: 400;
1612 color: #9095A2
1613 }
1614
1615 .better-payment .sidebar .sidebar__menu {
1616 padding: 20px 0
1617 }
1618
1619 .better-payment .sidebar .sidebar__menu .sidebar__item {
1620 padding: 8px 0
1621 }
1622
1623 .better-payment .sidebar .sidebar__menu .sidebar__item .sidebar__link {
1624 padding: 2px 20px;
1625 position: relative;
1626 width: 100%;
1627 display: -webkit-box;
1628 display: -ms-flexbox;
1629 display: flex;
1630 -webkit-box-align: center;
1631 -ms-flex-align: center;
1632 align-items: center;
1633 font-size: var(--h6-fontsize);
1634 font-weight: 400;
1635 color: #9095A2
1636 }
1637
1638 .better-payment .sidebar .sidebar__menu .sidebar__item .sidebar__link i {
1639 margin-right: 13px
1640 }
1641
1642 .better-payment .sidebar .sidebar__menu .sidebar__item .sidebar__link.active {
1643 color: #2A3256
1644 }
1645
1646 .better-payment .sidebar .sidebar__menu .sidebar__item .sidebar__link.active::before {
1647 position: absolute;
1648 top: 0;
1649 left: 0;
1650 width: 2px;
1651 height: 100%;
1652 background: #6E58F7;
1653 content: '';
1654 -webkit-transition: all .3s ease 0s;
1655 transition: all .3s ease 0s
1656 }
1657
1658 .better-payment .sidebar .sidebar__menu .sidebar__item .sub__menu {
1659 padding-left: 50px;
1660 margin-top: 5px;
1661 display: none
1662 }
1663
1664 .better-payment .sidebar .sidebar__menu .sidebar__item .sub__menu li:not(:last-child) {
1665 margin-bottom: 5px
1666 }
1667
1668 .better-payment .sidebar .sidebar__menu .sidebar__item .sub__menu li a {
1669 font-size: var(--h6-fontsize);
1670 font-weight: 400;
1671 color: #9095A2
1672 }
1673
1674 .better-payment .sidebar .sidebar__menu .sidebar__item .sub__menu li a.active {
1675 color: #2A3256
1676 }
1677
1678 .better-payment .payment__options .payment__option {
1679 padding: var(--padding-30);
1680 display: -webkit-box;
1681 display: -ms-flexbox;
1682 display: flex;
1683 -webkit-box-pack: justify;
1684 -ms-flex-pack: justify;
1685 justify-content: space-between;
1686 -webkit-box-align: center;
1687 -ms-flex-align: center;
1688 align-items: center
1689 }
1690
1691 .better-payment .payment__options .payment__option:not(:last-child) {
1692 border-bottom: 1px solid rgba(110, 88, 247, 0.1)
1693 }
1694
1695 .better-payment .payment__options .payment__option:first-child {
1696 padding-top: 45px
1697 }
1698
1699 .better-payment .payment__options .payment__option:last-child {
1700 padding-bottom: 45px
1701 }
1702
1703 .better-payment .payment__options .payment__option .payment__option__content {
1704 padding-right: 15px
1705 }
1706
1707 .better-payment .payment__options .payment__option .payment__option__content h4 {
1708 font-size: var(--h4-fontsize);
1709 font-weight: 700;
1710 color: #2A3256;
1711 margin-bottom: 5px
1712 }
1713
1714 .better-payment .payment__options .payment__option .payment__option__content p {
1715 font-size: 14px;
1716 font-weight: 400;
1717 color: #9095A2
1718 }
1719
1720 .better-payment .payment__options .payment__option .active__status.input__wrap {
1721 -webkit-box-flex: 0;
1722 -ms-flex: 0 0 250px;
1723 flex: 0 0 250px
1724 }
1725
1726 .better-payment .payment__options .payment__option .active__status .bp-select select {
1727 min-width: 80px;
1728 background: #fff
1729 }
1730
1731 .better-payment label {
1732 font-size: 14px;
1733 font-weight: 400;
1734 color: #2A3256
1735 }
1736
1737 .better-payment .bp-switch input {
1738 display: none
1739 }
1740
1741 .better-payment .bp-switch input:checked~.switch__btn {
1742 background-color: #6E58F7
1743 }
1744
1745 .better-payment .bp-switch input:checked~.switch__btn::before {
1746 left: 23px
1747 }
1748
1749 .better-payment .bp-switch .switch__btn {
1750 height: 20px;
1751 width: 40px;
1752 border-radius: 20px;
1753 background: #C5C7D3;
1754 display: inline-block;
1755 -webkit-transition: all .3s ease 0s;
1756 transition: all .3s ease 0s;
1757 -webkit-transition-property: background;
1758 transition-property: background;
1759 position: relative;
1760 cursor: pointer
1761 }
1762
1763 .better-payment .bp-switch .switch__btn:before {
1764 position: absolute;
1765 top: 3px;
1766 left: 3px;
1767 width: 14px;
1768 height: 14px;
1769 border-radius: 50%;
1770 background: #fff;
1771 content: '';
1772 -webkit-transition: all .3s ease 0s;
1773 transition: all .3s ease 0s
1774 }
1775
1776 .better-payment .bp-select {
1777 position: relative
1778 }
1779
1780 .better-payment .bp-select:before {
1781 position: absolute;
1782 bottom: 10px;
1783 right: 12px;
1784 content: '\e901';
1785 font-family: 'bp-icon';
1786 color: #C5C7D3;
1787 font-size: 12px;
1788 pointer-events: none
1789 }
1790
1791 .better-payment .fix-style.bp-select:before {
1792 position: unset;
1793 bottom: unset;
1794 right: unset;
1795 content: '';
1796 font-family: unset;
1797 color: unset;
1798 font-size: unset;
1799 pointer-events: none
1800 }
1801
1802 .better-payment .bp-select select {
1803 width: 100%;
1804 max-width: 100%;
1805 border: 1px solid #C5C7D3;
1806 border-radius: 5px;
1807 height: 40px;
1808 font-size: 14px;
1809 font-weight: 400;
1810 color: #2A3256;
1811 padding: 0 15px;
1812 -webkit-appearance: none;
1813 padding-right: 30px;
1814 background: #F7F8FA
1815 }
1816
1817 .better-payment .form__control {
1818 background: #F7F8FA;
1819 border: 1px solid #C5C7D3;
1820 border-radius: 5px;
1821 height: 40px;
1822 font-size: 14px;
1823 padding: 0 20px;
1824 width: 100%;
1825 color: #2A3256;
1826 -webkit-transition: all .3s ease 0s;
1827 transition: all .3s ease 0s;
1828 -webkit-transition-property: background, border-color;
1829 transition-property: background, border-color
1830 }
1831
1832 .better-payment .form__control::-webkit-input-placeholder {
1833 color: #9095A2
1834 }
1835
1836 .better-payment .form__control:-moz-placeholder {
1837 color: #9095A2
1838 }
1839
1840 .better-payment .form__control::-moz-placeholder {
1841 color: #9095A2
1842 }
1843
1844 .better-payment .form__control:-ms-input-placeholder {
1845 color: #9095A2
1846 }
1847
1848 .better-payment .form__control:focus {
1849 border-color: rgba(110, 88, 247, 0.5);
1850 background: #fff
1851 }
1852
1853 .better-payment textarea.form__control {
1854 height: 120px;
1855 resize: none;
1856 padding-top: 13px;
1857 font-family: "DM Sans", sans-serif
1858 }
1859
1860 .better-payment .feature__card__wrapper {
1861 padding-top: 30px;
1862 height: 100%
1863 }
1864
1865 .better-payment .feature__card {
1866 padding: 30px;
1867 background: #fff;
1868 -webkit-transition: all .3s ease 0s;
1869 transition: all .3s ease 0s;
1870 -webkit-transition-property: box-shadow;
1871 -webkit-transition-property: -webkit-box-shadow;
1872 transition-property: -webkit-box-shadow;
1873 transition-property: box-shadow;
1874 transition-property: box-shadow, -webkit-box-shadow;
1875 height: 100%
1876 }
1877
1878 .better-payment .feature__card:hover {
1879 -webkit-box-shadow: -30px 30px 150px rgba(0, 0, 0, 0.1);
1880 box-shadow: -30px 30px 150px rgba(0, 0, 0, 0.1)
1881 }
1882
1883 .better-payment .feature__card .icon {
1884 font-size: 36px;
1885 margin-bottom: 5px;
1886 display: block;
1887 height: unset;
1888 width: unset;
1889 }
1890
1891 .better-payment .feature__card h3 {
1892 font-size: var(--h3-fontsize);
1893 font-weight: 700;
1894 color: #2A3256;
1895 margin-bottom: 15px
1896 }
1897
1898 .better-payment .feature__card p {
1899 font-size: 14px;
1900 font-weight: 400;
1901 color: #9095A2;
1902 margin-bottom: 20px
1903 }
1904
1905 .better-payment .mailing__option .input__wrap {
1906 display: -webkit-box;
1907 display: -ms-flexbox;
1908 display: flex
1909 }
1910
1911 .better-payment .mailing__option .input__wrap:not(:last-child) {
1912 margin-bottom: 30px
1913 }
1914
1915 .better-payment .mailing__option .input__wrap .title {
1916 -webkit-box-flex: 0;
1917 -ms-flex: 0 0 180px;
1918 flex: 0 0 180px;
1919 padding-right: 15px;
1920 font-size: 16px;
1921 font-weight: 400;
1922 color: #2A3256
1923 }
1924
1925 .better-payment .mailing__option .input__wrap .input__area {
1926 -webkit-box-flex: 1;
1927 -ms-flex: 1 1 auto;
1928 flex: 1 1 auto
1929 }
1930
1931 .better-payment .mailing__option .input__wrap .input__area .bp-select,
1932 .better-payment .mailing__option .input__wrap .input__area .form__control {
1933 max-width: 330px
1934 }
1935
1936 .better-payment .mailing__option .input__wrap .input__area p {
1937 font-size: 14px;
1938 font-weight: 400;
1939 color: #9095A2;
1940 margin-top: 7px
1941 }
1942
1943 .better-payment .go__premium h3 {
1944 font-size: var(--h3-fontsize);
1945 font-weight: 700;
1946 color: #2A3256;
1947 margin-bottom: 30px
1948 }
1949
1950 .better-payment .go__premium p {
1951 font-size: 14px;
1952 font-weight: 400;
1953 color: #9095A2;
1954 margin-bottom: 10px;
1955 max-width: 700px;
1956 line-height: 25px;
1957 }
1958
1959 .better-payment .transactions {
1960 background: #fff;
1961 overflow: auto;
1962 }
1963
1964 .better-payment .fix-style.transactions {
1965 overflow: unset;
1966 }
1967
1968 .better-payment .transaction__filter {
1969 padding: 50px 50px 10px
1970 }
1971
1972 @media all and (max-width: 1399.98px) {
1973 .better-payment .transaction__filter {
1974 padding: 30px 30px 10px
1975 }
1976 }
1977
1978 .better-payment .transaction__filter form {
1979 display: -webkit-box;
1980 display: -ms-flexbox;
1981 display: flex;
1982 -webkit-box-align: end;
1983 -ms-flex-align: end;
1984 align-items: flex-end
1985 }
1986
1987 @media all and (max-width: 1399.98px) {
1988 .better-payment .transaction__filter form {
1989 flex-wrap: wrap;
1990 }
1991 }
1992
1993 .better-payment .transaction__filter form>* {
1994 -webkit-box-flex: 0;
1995 -ms-flex: 0 1 20%;
1996 flex: 0 1 20%;
1997 margin-right: 30px
1998 }
1999
2000 @media all and (max-width: 1399.98px) {
2001 .better-payment .transaction__filter form>* {
2002 flex: 0 1 calc(25% - 23px);
2003 }
2004 .better-payment .transaction__filter form>*:nth-child(4) {
2005 margin-right: 0;
2006 }
2007 }
2008
2009 @media all and (max-width: 767.98px) {
2010 .better-payment .transaction__filter form>* {
2011 flex: 0 1 calc(33.33% - 14px);
2012 margin-right: 20px;
2013 }
2014 .better-payment .transaction__filter form>*:nth-child(4) {
2015 margin-right: 20px;
2016 }
2017 .better-payment .transaction__filter form>*:nth-child(3n) {
2018 margin-right: 0;
2019 }
2020 }
2021 @media all and (max-width: 575.98px) {
2022 .better-payment .transaction__filter {
2023 padding: 20px 20px 0;
2024 }
2025 .better-payment .transaction__filter form>* {
2026 flex: 0 1 calc(50% - 10px);
2027 margin-right: 20px;
2028 }
2029 .better-payment .transaction__filter form>*:nth-child(4) {
2030 margin-right: 20px;
2031 }
2032 .better-payment .transaction__filter form>*:nth-child(3n) {
2033 margin-right: 20px;
2034 }
2035 .better-payment .transaction__filter form>*:nth-child(2n) {
2036 margin-right: 0;
2037 }
2038 }
2039
2040 .better-payment .transaction__filter form button.button {
2041 margin-bottom: 20px;
2042 -webkit-box-flex: 0;
2043 -ms-flex: 0 0 auto;
2044 flex: 0 0 auto;
2045 margin-right: 0
2046 }
2047
2048 .better-payment .transaction__filter form button.button.fix-style {
2049 margin-bottom: 0px;
2050 }
2051
2052 .better-payment .transaction__table {
2053 min-width: 979px;
2054 }
2055
2056 .better-payment .transaction__table .table__row {
2057 display: -webkit-box;
2058 display: -ms-flexbox;
2059 display: flex;
2060 -webkit-box-align: center;
2061 -ms-flex-align: center;
2062 align-items: center;
2063 -webkit-transition: all .3s ease 0s;
2064 transition: all .3s ease 0s;
2065 -webkit-transition-property: box-shadow;
2066 -webkit-transition-property: -webkit-box-shadow;
2067 transition-property: -webkit-box-shadow;
2068 transition-property: box-shadow;
2069 transition-property: box-shadow, -webkit-box-shadow
2070 }
2071
2072 .better-payment .transaction__table .table__row:not(.row__head):not(:last-child) {
2073 border-bottom: 1px solid rgba(110, 88, 247, 0.1)
2074 }
2075
2076 .better-payment .transaction__table .table__row:hover:not(.row__head) {
2077 -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.03);
2078 box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.03)
2079 }
2080
2081 .better-payment .transaction__table .table__row:last-child {
2082 padding-bottom: 10px
2083 }
2084
2085 .better-payment .transaction__table .table__row.row__head {
2086 background: rgba(110, 88, 247, 0.1)
2087 }
2088
2089 .better-payment .transaction__table .table__row .table__col {
2090 padding: 10px 5px;
2091 font-size: 14px;
2092 font-weight: 400;
2093 color: #2A3256
2094 }
2095
2096 .better-payment .transaction__table .table__row .table__col p {
2097 word-break: break-all;
2098 }
2099
2100 .better-payment .transaction__table .table__row .table__col.col__head {
2101 font-weight: 600
2102 }
2103
2104 .better-payment .transaction__table .table__row .table__col:first-child {
2105 padding-left: 50px
2106 }
2107
2108 .better-payment .transaction__table .table__row .table__col:last-child {
2109 padding-right: 50px
2110 }
2111
2112 @media all and (max-width: 1399.98px) {
2113 .better-payment .transaction__table .table__row .table__col:first-child {
2114 padding-left: 30px
2115 }
2116 .better-payment .transaction__table .table__row .table__col:last-child {
2117 padding-right: 30px
2118 }
2119 }
2120 @media all and (max-width: 575.98px) {
2121 .better-payment .transaction__table .table__row .table__col:first-child {
2122 padding-left: 20px
2123 }
2124 .better-payment .transaction__table .table__row .table__col:last-child {
2125 padding-right: 20px
2126 }
2127 }
2128
2129 .better-payment .transaction__table .table__row .table__col.col__name {
2130 -webkit-box-flex: 1;
2131 -ms-flex: 1 1 170px;
2132 flex: 1 1 170px
2133 }
2134
2135 .better-payment .transaction__table .table__row .table__col.col__email {
2136 -webkit-box-flex: 1;
2137 -ms-flex: 1 1 200px;
2138 flex: 1 1 200px
2139 }
2140
2141 .better-payment .transaction__table .table__row .table__col.col__amount {
2142 -webkit-box-flex: 1;
2143 -ms-flex: 1 0 120px;
2144 flex: 1 0 120px
2145 }
2146
2147 .better-payment .transaction__table .table__row .table__col.col__trans {
2148 -webkit-box-flex: 1;
2149 -ms-flex: 1 1 260px;
2150 flex: 1 1 260px
2151 }
2152
2153 .better-payment .transaction__table .table__row .table__col.col__source {
2154 -webkit-box-flex: 1;
2155 -ms-flex: 1 0 90px;
2156 flex: 1 0 90px
2157 }
2158
2159 .better-payment .transaction__table .table__row .table__col.col__status {
2160 -webkit-box-flex: 1;
2161 /* -ms-flex: 1 0 80px; */
2162 -ms-flex: 1 0 110px;
2163 flex: 1 0 110px
2164 }
2165
2166 .better-payment .transaction__table .table__row .table__col.col__action {
2167 -webkit-box-flex: 0;
2168 -ms-flex: 0 0 150px;
2169 flex: 0 0 150px;
2170 display: -webkit-box;
2171 display: -ms-flexbox;
2172 display: flex;
2173 -webkit-box-pack: end;
2174 -ms-flex-pack: end;
2175 justify-content: flex-end
2176 }
2177
2178 .better-payment .transaction__table .table__row .table__col.col__action .button {
2179 border-radius: 5px
2180 }
2181
2182 .better-payment .transaction__info__wrap {
2183 background: #fff
2184 }
2185
2186 .better-payment .transaction__info__wrap .transaction__info {
2187 /* padding: var(--padding-50) */
2188 padding: var(--padding-30)
2189 }
2190
2191 .better-payment .transaction__info__wrap .transaction__info:not(:last-child) {
2192 border-bottom: 1px solid rgba(110, 88, 247, 0.1)
2193 }
2194
2195 .better-payment .transaction__info__wrap .transaction__info .info__header {
2196 display: -webkit-box;
2197 display: -ms-flexbox;
2198 display: flex;
2199 -webkit-box-align: center;
2200 -ms-flex-align: center;
2201 align-items: center;
2202 margin-bottom: 10px
2203 }
2204
2205 .better-payment .transaction__info__wrap .transaction__info .info__header .title {
2206 display: -webkit-box;
2207 display: -ms-flexbox;
2208 display: flex;
2209 -webkit-box-align: center;
2210 -ms-flex-align: center;
2211 align-items: center;
2212 margin-right: auto;
2213 font-size: var(--h4-fontsize);
2214 font-weight: 500;
2215 color: #2A3256
2216 }
2217
2218 .better-payment .transaction__info__wrap .transaction__info .info__header .title i {
2219 margin-right: 10px
2220 }
2221
2222 .better-payment .transaction__info__wrap .transaction__info .informations {
2223 padding: 0 0 0 30px;
2224 margin: 0
2225 }
2226
2227 .better-payment .transaction__info__wrap .transaction__info .informations.informations__edit .edit__input__wrap span {
2228 width: 120px
2229 }
2230
2231 .better-payment .transaction__info__wrap .transaction__info .informations.informations__edit .edit__input__wrap .form__control,
2232 .better-payment .transaction__info__wrap .transaction__info .informations.informations__edit .edit__input__wrap .bp-select {
2233 width: 300px
2234 }
2235
2236 .better-payment .transaction__info__wrap .transaction__info .informations li {
2237 font-size: 16px;
2238 font-weight: 400;
2239 color: #9095A2;
2240 display: -webkit-box;
2241 display: -ms-flexbox;
2242 display: flex;
2243 -webkit-box-align: center;
2244 -ms-flex-align: center;
2245 align-items: center
2246 }
2247
2248 .better-payment .transaction__info__wrap .transaction__info .informations li:not(:last-child) {
2249 margin-bottom: 12px
2250 }
2251
2252 .better-payment .transaction__info__wrap .transaction__info .informations li span {
2253 color: #2A3256;
2254 margin-right: 7px;
2255 }
2256 @media all and (max-width: 575.98px) {
2257 .better-payment .transaction__info__wrap .transaction__info .informations li {
2258 display: block;
2259 font-size: 14px;
2260 }
2261 .better-payment .transaction__info__wrap .transaction__info .informations li span {
2262 word-break: break-all;
2263 }
2264 .better-payment .transaction__info__wrap .transaction__info .informations li span:first-child {
2265 display: block;
2266 }
2267 }
2268
2269 .better-payment .transaction__info__wrap .transaction__info .informations li span:first-child {
2270 width: 150px;
2271 }
2272
2273 .better-payment .payment__info {
2274 background: #fff
2275 }
2276
2277 .better-payment .payment__info .payment__getway {
2278 padding: var(--padding-30);
2279 border-bottom: 1px solid rgba(110, 88, 247, 0.1)
2280 }
2281 .better-payment .payment__info .payment__getway.bp-pro-block-wrap {
2282 border-top: 1px solid rgba(110, 88, 247, 0.1)
2283 }
2284 .better-payment .payment__info .payment__getway .title {
2285 display: -webkit-box;
2286 display: -ms-flexbox;
2287 display: flex;
2288 -webkit-box-align: center;
2289 -ms-flex-align: center;
2290 align-items: center;
2291 margin-bottom: 20px;
2292 font-size: var(--h4-fontsize);
2293 font-weight: 500;
2294 color: #2A3256
2295 }
2296
2297 .better-payment .payment__info .payment__getway .title i {
2298 margin-right: 10px
2299 }
2300
2301 .better-payment .payment__info .payment__getway p {
2302 padding-left: 30px;
2303 font-size: 14px;
2304 font-weight: 400;
2305 color: #2A3256;
2306 word-break: break-all;
2307 }
2308
2309 .better-payment .payment__info .payment__getway p:not(:last-child) {
2310 margin-bottom: 10px
2311 }
2312
2313 .better-payment .payment__info .payment__getway p span {
2314 color: #9095A2
2315 }
2316
2317 .better-payment .payment__info .payment__getway .pay__by {
2318 display: -webkit-box;
2319 display: -ms-flexbox;
2320 display: flex;
2321 margin-left: 30px;
2322 margin-bottom: 15px
2323 }
2324
2325 .better-payment .payment__info .payment__getway .pay__by label {
2326 margin-right: 10px
2327 }
2328
2329 .better-payment .payment__info .payment__getway .pay__by label input {
2330 display: none
2331 }
2332
2333 .better-payment .payment__info .payment__getway .pay__by label input:checked~span {
2334 border-color: #6E58F7
2335 }
2336
2337 .better-payment .payment__info .payment__getway .pay__by label span {
2338 background: #F7F8FA;
2339 border-radius: 5px;
2340 border: 1px solid transparent;
2341 padding: 9px 15px;
2342 display: inline-block;
2343 font-size: 0;
2344 cursor: pointer;
2345 -webkit-transition: all .3s ease 0s;
2346 transition: all .3s ease 0s;
2347 -webkit-transition-property: border;
2348 transition-property: border
2349 }
2350
2351 .better-payment .payment__info .payment__getway .pay__by label span img {
2352 max-height: 100%
2353 }
2354
2355 .better-payment .payment__info .email__activity {
2356 padding: 30px 0
2357 }
2358
2359 .better-payment .payment__info .email__activity .title {
2360 display: -webkit-box;
2361 display: -ms-flexbox;
2362 display: flex;
2363 -webkit-box-align: center;
2364 -ms-flex-align: center;
2365 align-items: center;
2366 margin-bottom: 20px;
2367 padding-left: 30px;
2368 font-size: var(--h4-fontsize);
2369 font-weight: 500;
2370 color: #2A3256
2371 }
2372
2373 .better-payment .payment__info .email__activity .title i {
2374 margin-right: 10px
2375 }
2376
2377 .better-payment .payment__info .email__activity .activity__list li {
2378 display: -webkit-box;
2379 display: -ms-flexbox;
2380 display: flex;
2381 -webkit-box-align: center;
2382 -ms-flex-align: center;
2383 align-items: center;
2384 -webkit-box-pack: justify;
2385 -ms-flex-pack: justify;
2386 justify-content: space-between;
2387 padding: 12px 30px 12px 60px;
2388 -webkit-transition: all .3s ease 0s;
2389 transition: all .3s ease 0s;
2390 -webkit-transition-property: background;
2391 transition-property: background
2392 }
2393
2394 .better-payment .payment__info .email__activity .activity__list li:hover {
2395 background: #F7F8FA
2396 }
2397
2398 .better-payment .payment__info .email__activity .activity__list li:hover .action .button {
2399 opacity: 1
2400 }
2401
2402 .better-payment .payment__info .email__activity .activity__list li .content {
2403 padding-left: 30px;
2404 position: relative
2405 }
2406
2407 .better-payment .payment__info .email__activity .activity__list li .content i {
2408 position: absolute;
2409 top: 3px;
2410 left: 0
2411 }
2412
2413 .better-payment .payment__info .email__activity .activity__list li .content h5 {
2414 font-size: var(--h6-fontsize);
2415 font-weight: 400;
2416 color: #2A3256;
2417 word-break: break-all;
2418 }
2419
2420 .better-payment .payment__info .email__activity .activity__list li .content p {
2421 font-size: 14px;
2422 font-weight: 400;
2423 color: #9095A2
2424 }
2425
2426 .better-payment .payment__info .email__activity .activity__list li .action {
2427 font-size: 0
2428 }
2429
2430 .better-payment .payment__info .email__activity .activity__list li .action .button {
2431 border-radius: 5px;
2432 opacity: 0;
2433 -webkit-transition: all .3s ease 0s;
2434 transition: all .3s ease 0s;
2435 -webkit-transition-property: opacity;
2436 transition-property: opacity
2437 }
2438
2439 .better-payment .pagination ul {
2440 text-align: right;
2441 }
2442
2443 .better-payment .pagination ul li{
2444 display: inline-block;
2445 }
2446
2447 .better-payment .pagination ul li:not(:last-child) {
2448 margin-right: 10px
2449 }
2450
2451 .better-payment .pagination ul li a,
2452 .better-payment .pagination ul li span {
2453 background: #FFFFFF;
2454 border: 1px solid rgba(131, 133, 142, 0.3);
2455 border-radius: 2px;
2456 display: inline-block;
2457 height: 40px;
2458 width: 40px;
2459 line-height: 40px;
2460 font-size: 14px;
2461 font-weight: 400;
2462 color: #9095A2;
2463 text-align: center;
2464 overflow: hidden;
2465 z-index: 1;
2466 padding: 0;
2467 }
2468
2469 .better-payment .pagination .showing-entities-html {
2470 font-size: 14px;
2471 color: #9095A2;
2472 }
2473
2474 .better-payment .pagination ul li a::before,
2475 .better-payment .pagination ul li span::before {
2476 background: #fff
2477 }
2478
2479 .better-payment .pagination ul li a.active,
2480 .better-payment .pagination ul li span.active {
2481 border: 0
2482 }
2483
2484 .better-payment .pagination ul li a.active::before,
2485 .better-payment .pagination ul li span.active::before {
2486 background: transparent
2487 }
2488
2489 .better-payment .pagination ul li a:hover i,
2490 .better-payment .pagination ul li a.active i,
2491 .better-payment .pagination ul li span:hover i,
2492 .better-payment .pagination ul li span.active i {
2493 color: #fff
2494 }
2495
2496 .better-payment .pagination ul li a i,
2497 .better-payment .pagination ul li span i {
2498 font-size: 12px;
2499 color: #9095A2;
2500 -webkit-transition: all .3s ease 0s;
2501 transition: all .3s ease 0s;
2502 -webkit-transition-property: color;
2503 transition-property: color
2504 }
2505
2506 .better-payment .bp-d-none,
2507 .better-payment .payment__option.bp-d-none {
2508 display: none;
2509 }
2510
2511 .better-payment .bp-d-block,
2512 .better-payment .payment__option.bp-d-block {
2513 display: block;
2514 }
2515
2516 .better-payment .email-additional-headers-content {
2517 display: none;
2518 }
2519
2520 .wp-admin.toplevel_page_better-payment-settings #wpcontent,
2521 .wp-admin.better-payment_page_better-payment-transactions #wpcontent,
2522 .wp-admin.better-payment_page_better-payment-analytics #wpcontent{
2523 /* padding-left: 0; */
2524 padding-left: 5px;
2525 }
2526
2527 .wp-admin.toplevel_page_better-payment-settings #wpbody-content,
2528 .wp-admin.better-payment_page_better-payment-transactions #wpbody-content,
2529 .wp-admin.better-payment_page_better-payment-analytics #wpbody-content {
2530 padding-bottom: 0;
2531 }
2532
2533 #wpbody-content > .better-payment {
2534 /* margin-left: -20px; */
2535 margin-left: -5px;
2536 }
2537
2538 .admin-bar .toast-top-center {
2539 top: 33px;
2540 }
2541
2542 .better-payment .bp-copy-clipboard {
2543 width: 15px;
2544 margin-left: 5px;
2545 margin-right: 5px;
2546 cursor: pointer;
2547 }
2548
2549 .better-payment .bp-copy-clipboard-input {
2550 visibility: visible;
2551 }
2552
2553 .better-payment .bp-text-black {
2554 color: #000 !important;
2555 }
2556
2557 .better-payment .single-transaction-id-copy-wrap #bp_copy_clipboard_input_2 {
2558 margin-right: 8px;
2559 }
2560 .better-payment .bp-border-danger {
2561 border: 1px solid #ff0000 !important;
2562 }
2563
2564 .better-payment .setup-content .payment-configuration-title {
2565 margin: 40px ​30px 10px 30p;
2566 }
2567
2568 .better-payment .better_payment_settings_opt_in {
2569 height: 20px;
2570 width: 20px;
2571 }
2572 .better-payment .better_payment_settings_opt_in[type=checkbox]:checked::before {
2573 height: 20px;
2574 width: 20px;
2575 }
2576 .better-payment .better-payment-license-key-section {
2577 padding: 30px;
2578 border-radius: 5px;
2579 background: #F1F4FA;
2580 }
2581 .better-payment .better-payment-license-key-input-activate,
2582 .better-payment .better-payment-license-key-input-deactivate {
2583 height: 60px !important;
2584 padding: 10px 20px;
2585 }
2586 .better-payment .better-payment-license-key-button-activate,
2587 .better-payment .better-payment-license-key-button-deactivate {
2588 position: absolute !important;
2589 right: 8px;
2590 top: 8px;
2591 }
2592 .better-payment .better-payment-license-key-step-img {
2593 margin-left: 50px;
2594 margin-bottom: -10px;
2595 }
2596 .better-payment .better-payment-license-key-steps-list {
2597 margin-top: 40px;
2598 margin-bottom: 30px;
2599 }
2600 .better-payment .better-payment-license-key-button-deactivate,
2601 .better-payment .better-payment-license-key-button-deactivate:hover {
2602 background: #FF4141;
2603 color: #fff;
2604 }
2605 .better-payment .better-payment-license-key-button-deactivate::after {
2606 background: unset !important;
2607 }
2608 .better-payment .bp-clearfix {
2609 clear: both;
2610 }