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

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

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