PluginProbe
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More / 1.0.2
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More v1.0.2
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.2, at assets/css/style.css

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