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

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

2,803 lines 70.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!***************************************************************************************************************************************************************************************************************!*\
2 !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[3]!./src/css/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[6].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[3]!./src/css/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:not(.notice) {
57 min-height: 100vh;
58 }
59 .better-payment {
60 font-family: "DM Sans", sans-serif;
61 line-height: 1.7;
62 font-weight: 400;
63 background: #fff;
64 color: #000;
65 -webkit-font-smoothing: antialiased;
66 -moz-font-smoothing: antialiased;
67 -ms-font-smoothing: antialiased;
68 -o-font-smoothing: antialiased;
69 font-smoothing: antialiased;
70 -webkit-text-rendering: optimizeLegibility;
71 -moz-text-rendering: optimizeLegibility;
72 -ms-text-rendering: optimizeLegibility;
73 -o-text-rendering: optimizeLegibility;
74 text-rendering: optimizeLegibility;
75 -webkit-scroll-behavior: smooth;
76 -moz-scroll-behavior: smooth;
77 -ms-scroll-behavior: smooth;
78 -o-scroll-behavior: smooth;
79 scroll-behavior: smooth;
80 font-size: 16px;
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 {
1470 /* Dismissable Banner Styles */
1471 }
1472 .better-payment .dismissable-banner-wrapper {
1473 margin-bottom: 30px;
1474 }
1475 .better-payment .dismissable-banner-wrapper .setup-banner {
1476 position: relative;
1477 border-radius: 8px;
1478 overflow: hidden;
1479 background: linear-gradient(92.02deg, #F8F5FF 47.66%, #EEEAF7 116.34%);
1480 border: 1px solid #E6E1F1;
1481 }
1482 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content {
1483 display: flex;
1484 }
1485 @media (max-width: 1280px) {
1486 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content {
1487 flex-direction: column;
1488 }
1489 }
1490 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left {
1491 flex: 1 60%;
1492 padding: 24px 10px 24px 24px;
1493 background: transparent;
1494 }
1495 @media (max-width: 1520px) {
1496 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left {
1497 padding: 24px 10px 24px 24px;
1498 }
1499 }
1500 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left h2 {
1501 font-size: 28px;
1502 line-height: 120%;
1503 font-weight: 600;
1504 color: #222B3D;
1505 margin-bottom: 12px;
1506 }
1507 @media (max-width: 1520px) {
1508 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left h2 {
1509 font-size: 20px;
1510 }
1511 }
1512 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left .progress-line {
1513 width: 100%;
1514 max-width: 467px;
1515 height: 8px;
1516 background: #EBE4FF;
1517 border-radius: 8px;
1518 margin-bottom: 20px;
1519 overflow: hidden;
1520 }
1521 @media (max-width: 1520px) {
1522 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left .progress-line {
1523 max-width: 340px;
1524 margin-bottom: 16px;
1525 }
1526 }
1527 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left .progress-line .progress-fill {
1528 width: 60%;
1529 height: 100%;
1530 background: #6C3BFF;
1531 box-shadow: 0px 0.5px 1px 0px #3914A7 inset, 0px -0.5px 1px 0px #9B79FF inset, 0px 0.2px 0.5px 0px #190064;
1532 border-radius: 8px;
1533 transition: width 0.3s ease;
1534 }
1535 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left .setup-steps {
1536 display: flex;
1537 flex-direction: column;
1538 gap: 12px;
1539 }
1540 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left .setup-steps .step-item {
1541 display: flex;
1542 align-items: center;
1543 gap: 8px;
1544 }
1545 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left .setup-steps .step-item .step-icon {
1546 width: 20px;
1547 height: 20px;
1548 display: inline-flex;
1549 align-items: center;
1550 justify-content: center;
1551 }
1552 @media (max-width: 1520px) {
1553 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left .setup-steps .step-item .step-icon {
1554 width: 16px;
1555 height: 16px;
1556 }
1557 }
1558 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left .setup-steps .step-item .step-text {
1559 font-size: 14px;
1560 font-weight: 500;
1561 line-height: 120%;
1562 color: #222B3D;
1563 flex: 1;
1564 }
1565 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-left .setup-steps .step-item .step-text a {
1566 font-size: 14px;
1567 font-weight: 500;
1568 color: #222B3D;
1569 text-decoration: underline;
1570 }
1571 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-right {
1572 flex: 1 40%;
1573 background-image: url(../img/dismiss-bg.webp);
1574 background-repeat: no-repeat;
1575 background-position: bottom center;
1576 background-size: cover;
1577 }
1578 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-right .dashboard-mockup {
1579 position: relative;
1580 height: 100%;
1581 padding: 32px 20px 0;
1582 display: flex;
1583 align-items: flex-end;
1584 justify-content: center;
1585 }
1586 @media (max-width: 1520px) {
1587 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-right .dashboard-mockup {
1588 padding: 0 24px 0;
1589 }
1590 }
1591 @media (max-width: 1280px) {
1592 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-right .dashboard-mockup {
1593 padding: 10px 20px 0;
1594 }
1595 }
1596 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-right .dashboard-mockup img {
1597 max-height: 205px;
1598 }
1599 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-right .dashboard-mockup .play-icon-wrap {
1600 position: absolute;
1601 top: 50%;
1602 left: 50%;
1603 transform: translate(-50%, -35%);
1604 width: 72px;
1605 height: 72px;
1606 background: rgba(108, 59, 255, 0.06);
1607 border: 1px solid rgba(108, 59, 255, 0.6);
1608 border-radius: 50%;
1609 display: flex;
1610 align-items: center;
1611 justify-content: center;
1612 }
1613 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-right .dashboard-mockup .play-icon {
1614 width: 48px;
1615 height: 48px;
1616 background: #FFF;
1617 border-radius: 50%;
1618 display: flex;
1619 align-items: center;
1620 justify-content: center;
1621 box-shadow: 0px 10.6px 14.13px 0px rgba(108, 59, 255, 0.2392156863);
1622 cursor: pointer;
1623 transition: all 0.3s ease;
1624 }
1625 .better-payment .dismissable-banner-wrapper .setup-banner .banner-content .banner-right .dashboard-mockup .play-icon::before {
1626 content: "";
1627 width: 0;
1628 height: 0;
1629 border-style: solid;
1630 border-width: 9px 0 9px 15px;
1631 border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #6C3BFF;
1632 margin-left: 3px;
1633 }
1634 .better-payment .dismissable-banner-wrapper .setup-banner button.dismiss-button {
1635 position: absolute;
1636 top: 12px;
1637 right: 12px;
1638 background: none;
1639 border: none;
1640 color: #6A758C;
1641 font-size: 12px;
1642 text-decoration: underline;
1643 padding: 0;
1644 cursor: pointer;
1645 transition: all 0.25s ease-in-out;
1646 }
1647 .better-payment .dismissable-banner-wrapper .setup-banner button.dismiss-button:hover {
1648 color: #6859fa;
1649 }
1650
1651 .better-payment .bp-tabs .tab__menu {
1652 padding: 0;
1653 margin: 0;
1654 list-style: none;
1655 display: -webkit-box;
1656 display: -ms-flexbox;
1657 display: flex;
1658 -webkit-box-align: center;
1659 -ms-flex-align: center;
1660 align-items: center;
1661 margin-bottom: 5px;
1662 }
1663
1664 .better-payment .bp-tabs .tab__menu .tab__list {
1665 margin-bottom: 5px;
1666 -webkit-box-flex: 0;
1667 -ms-flex: 0 0 calc(25% - 4.5px);
1668 flex: 0 0 calc(25% - 4.5px);
1669 }
1670
1671 .better-payment .bp-tabs .tab__menu .tab__list:not(:last-child) {
1672 margin-right: 6px;
1673 }
1674
1675 .better-payment .bp-tabs .tab__menu .tab__list .tab__link {
1676 font-size: 16px;
1677 font-weight: 500;
1678 color: #9095A2;
1679 background: #fff;
1680 padding: 11.5px 30px;
1681 display: -webkit-box;
1682 display: -ms-flexbox;
1683 display: flex;
1684 -webkit-box-align: center;
1685 -ms-flex-align: center;
1686 align-items: center;
1687 -webkit-box-pack: center;
1688 -ms-flex-pack: center;
1689 justify-content: center;
1690 }
1691
1692 .better-payment .bp-tabs .tab__menu .tab__list .tab__link.active i {
1693 color: #fff;
1694 -webkit-text-fill-color: unset;
1695 }
1696
1697 .better-payment .bp-tabs .tab__menu .tab__list .tab__link i {
1698 font-size: 16px;
1699 margin-right: 10px;
1700 }
1701
1702 .better-payment .bp-tabs .tab__content__item {
1703 display: none;
1704 }
1705
1706 .better-payment .bp-tabs .tab__content__item.show {
1707 display: block;
1708 }
1709
1710 .better-payment .statistic {
1711 background: #fff;
1712 margin-bottom: 30px;
1713 padding: 30px;
1714 display: -webkit-box;
1715 display: -ms-flexbox;
1716 display: flex;
1717 -webkit-box-align: center;
1718 -ms-flex-align: center;
1719 align-items: center;
1720 -webkit-transition: all 0.3s ease 0s;
1721 transition: all 0.3s ease 0s;
1722 -webkit-transition-property: box-shadow;
1723 -webkit-transition-property: -webkit-box-shadow;
1724 transition-property: -webkit-box-shadow;
1725 transition-property: box-shadow;
1726 transition-property: box-shadow, -webkit-box-shadow;
1727 }
1728
1729 .better-payment .statistic:hover {
1730 -webkit-box-shadow: -30px 30px 150px rgba(0, 0, 0, 0.1);
1731 box-shadow: -30px 30px 150px rgba(0, 0, 0, 0.1);
1732 }
1733
1734 .better-payment .statistic:hover .icon {
1735 color: #fff;
1736 }
1737
1738 .better-payment .statistic:hover .icon i {
1739 -webkit-text-fill-color: unset;
1740 color: #fff;
1741 }
1742
1743 .better-payment .statistic:hover .icon::before {
1744 opacity: 0;
1745 }
1746
1747 .better-payment .statistic:hover .icon::after {
1748 opacity: 1;
1749 }
1750
1751 .better-payment .statistic .icon {
1752 height: 80px;
1753 width: 80px;
1754 min-width: 80px;
1755 -webkit-box-flex: 0;
1756 -ms-flex: 0 0 80px;
1757 flex: 0 0 80px;
1758 border-radius: 50%;
1759 line-height: 83px;
1760 text-align: center;
1761 font-size: 30px;
1762 overflow: hidden;
1763 z-index: 1;
1764 margin-right: 20px;
1765 -webkit-transition: all 0.3s ease 0s;
1766 transition: all 0.3s ease 0s;
1767 -webkit-transition-property: background;
1768 transition-property: background;
1769 }
1770
1771 .better-payment .statistic .icon i {
1772 color: #fff;
1773 -webkit-transition: all 0.3s ease 0s;
1774 transition: all 0.3s ease 0s;
1775 -webkit-transition-property: color;
1776 transition-property: color;
1777 }
1778
1779 .better-payment .statistic .statistic__body h3 {
1780 font-size: var(--h3-fontsize);
1781 font-weight: 700;
1782 color: #2A3256;
1783 }
1784
1785 .better-payment .statistic .statistic__body p {
1786 font-size: var(--h6-fontsize);
1787 font-weight: 400;
1788 color: #9095A2;
1789 }
1790
1791 .better-payment .sidebar .sidebar__menu {
1792 padding: 20px 0;
1793 }
1794
1795 .better-payment .sidebar .sidebar__menu .sidebar__item {
1796 padding: 8px 0;
1797 }
1798
1799 .better-payment .sidebar .sidebar__menu .sidebar__item .sidebar__link {
1800 padding: 2px 20px;
1801 position: relative;
1802 width: 100%;
1803 display: -webkit-box;
1804 display: -ms-flexbox;
1805 display: flex;
1806 -webkit-box-align: center;
1807 -ms-flex-align: center;
1808 align-items: center;
1809 font-size: var(--h6-fontsize);
1810 font-weight: 400;
1811 color: #9095A2;
1812 }
1813
1814 .better-payment .sidebar .sidebar__menu .sidebar__item .sidebar__link i {
1815 margin-right: 13px;
1816 }
1817
1818 .better-payment .sidebar .sidebar__menu .sidebar__item .sidebar__link.active {
1819 color: #2A3256;
1820 }
1821
1822 .better-payment .sidebar .sidebar__menu .sidebar__item .sidebar__link.active::before {
1823 position: absolute;
1824 top: 0;
1825 left: 0;
1826 width: 2px;
1827 height: 100%;
1828 background: #6E58F7;
1829 content: "";
1830 -webkit-transition: all 0.3s ease 0s;
1831 transition: all 0.3s ease 0s;
1832 }
1833
1834 .better-payment .sidebar .sidebar__menu .sidebar__item .sub__menu {
1835 padding-left: 50px;
1836 margin-top: 5px;
1837 display: none;
1838 }
1839
1840 .better-payment .sidebar .sidebar__menu .sidebar__item .sub__menu li:not(:last-child) {
1841 margin-bottom: 5px;
1842 }
1843
1844 .better-payment .sidebar .sidebar__menu .sidebar__item .sub__menu li a {
1845 font-size: var(--h6-fontsize);
1846 font-weight: 400;
1847 color: #9095A2;
1848 }
1849
1850 .better-payment .sidebar .sidebar__menu .sidebar__item .sub__menu li a.active {
1851 color: #2A3256;
1852 }
1853
1854 .better-payment .payment__options .payment__option {
1855 padding: var(--padding-30);
1856 display: -webkit-box;
1857 display: -ms-flexbox;
1858 display: flex;
1859 -webkit-box-pack: justify;
1860 -ms-flex-pack: justify;
1861 justify-content: space-between;
1862 -webkit-box-align: center;
1863 -ms-flex-align: center;
1864 align-items: center;
1865 }
1866
1867 .better-payment .payment__options .payment__option:not(:last-child) {
1868 border-bottom: 1px solid rgba(110, 88, 247, 0.1);
1869 }
1870
1871 .better-payment .payment__options .payment__option:first-child {
1872 padding-top: 45px;
1873 }
1874
1875 .better-payment .payment__options .payment__option:last-child {
1876 padding-bottom: 45px;
1877 }
1878
1879 .better-payment .payment__options .payment__option .payment__option__content {
1880 padding-right: 15px;
1881 }
1882
1883 .better-payment .payment__options .payment__option .payment__option__content h4 {
1884 font-size: var(--h4-fontsize);
1885 font-weight: 700;
1886 color: #2A3256;
1887 margin-bottom: 5px;
1888 }
1889
1890 .better-payment .payment__options .payment__option .payment__option__content p {
1891 font-size: 14px;
1892 font-weight: 400;
1893 color: #9095A2;
1894 }
1895
1896 .better-payment .payment__options .payment__option .active__status.input__wrap {
1897 -webkit-box-flex: 0;
1898 -ms-flex: 0 0 250px;
1899 flex: 0 0 250px;
1900 }
1901
1902 .better-payment .payment__options .payment__option .active__status .bp-select select {
1903 min-width: 80px;
1904 background: #fff;
1905 }
1906
1907 .better-payment label {
1908 font-size: 14px;
1909 font-weight: 400;
1910 color: #2A3256;
1911 }
1912
1913 .better-payment .bp-switch input {
1914 display: none;
1915 }
1916
1917 .better-payment .bp-switch input:checked ~ .switch__btn {
1918 background-color: #6E58F7;
1919 }
1920
1921 .better-payment .bp-switch input:checked ~ .switch__btn::before {
1922 left: 23px;
1923 }
1924
1925 .better-payment .bp-switch .switch__btn {
1926 height: 20px;
1927 width: 40px;
1928 border-radius: 20px;
1929 background: #C5C7D3;
1930 display: inline-block;
1931 -webkit-transition: all 0.3s ease 0s;
1932 transition: all 0.3s ease 0s;
1933 -webkit-transition-property: background;
1934 transition-property: background;
1935 position: relative;
1936 cursor: pointer;
1937 }
1938
1939 .better-payment .bp-switch .switch__btn:before {
1940 position: absolute;
1941 top: 3px;
1942 left: 3px;
1943 width: 14px;
1944 height: 14px;
1945 border-radius: 50%;
1946 background: #fff;
1947 content: "";
1948 -webkit-transition: all 0.3s ease 0s;
1949 transition: all 0.3s ease 0s;
1950 }
1951
1952 .better-payment .bp-select {
1953 position: relative;
1954 }
1955
1956 .better-payment .bp-select:before {
1957 position: absolute;
1958 bottom: 10px;
1959 right: 12px;
1960 content: "\e901";
1961 font-family: "bp-icon";
1962 color: #C5C7D3;
1963 font-size: 12px;
1964 pointer-events: none;
1965 }
1966
1967 .better-payment .fix-style.bp-select:before {
1968 position: unset;
1969 bottom: unset;
1970 right: unset;
1971 content: "";
1972 font-family: unset;
1973 color: unset;
1974 font-size: unset;
1975 pointer-events: none;
1976 }
1977
1978 .better-payment .bp-select select {
1979 width: 100%;
1980 max-width: 100%;
1981 border: 1px solid #C5C7D3;
1982 border-radius: 5px;
1983 height: 40px;
1984 font-size: 14px;
1985 font-weight: 400;
1986 color: #2A3256;
1987 padding: 0 15px;
1988 -webkit-appearance: none;
1989 padding-right: 30px;
1990 background: #F7F8FA;
1991 }
1992
1993 .better-payment .form__control {
1994 background: #F7F8FA;
1995 border: 1px solid #C5C7D3;
1996 border-radius: 5px;
1997 height: 40px;
1998 font-size: 14px;
1999 padding: 0 20px;
2000 width: 100%;
2001 color: #2A3256;
2002 -webkit-transition: all 0.3s ease 0s;
2003 transition: all 0.3s ease 0s;
2004 -webkit-transition-property: background, border-color;
2005 transition-property: background, border-color;
2006 }
2007
2008 .better-payment .form__control::-webkit-input-placeholder {
2009 color: #9095A2;
2010 }
2011
2012 .better-payment .form__control:-moz-placeholder {
2013 color: #9095A2;
2014 }
2015
2016 .better-payment .form__control::-moz-placeholder {
2017 color: #9095A2;
2018 }
2019
2020 .better-payment .form__control:-ms-input-placeholder {
2021 color: #9095A2;
2022 }
2023
2024 .better-payment .form__control:focus {
2025 border-color: rgba(110, 88, 247, 0.5);
2026 background: #fff;
2027 }
2028
2029 .better-payment textarea.form__control {
2030 height: 120px;
2031 resize: none;
2032 padding-top: 13px;
2033 font-family: "DM Sans", sans-serif;
2034 }
2035
2036 .better-payment .feature__card__wrapper {
2037 padding-top: 30px;
2038 height: 100%;
2039 }
2040
2041 .better-payment .feature__card {
2042 padding: 30px;
2043 background: #fff;
2044 -webkit-transition: all 0.3s ease 0s;
2045 transition: all 0.3s ease 0s;
2046 -webkit-transition-property: box-shadow;
2047 -webkit-transition-property: -webkit-box-shadow;
2048 transition-property: -webkit-box-shadow;
2049 transition-property: box-shadow;
2050 transition-property: box-shadow, -webkit-box-shadow;
2051 height: 100%;
2052 }
2053
2054 .better-payment .feature__card:hover {
2055 -webkit-box-shadow: -30px 30px 150px rgba(0, 0, 0, 0.1);
2056 box-shadow: -30px 30px 150px rgba(0, 0, 0, 0.1);
2057 }
2058
2059 .better-payment .feature__card .icon {
2060 font-size: 36px;
2061 margin-bottom: 5px;
2062 display: block;
2063 height: unset;
2064 width: unset;
2065 }
2066
2067 .better-payment .feature__card h3 {
2068 font-size: var(--h3-fontsize);
2069 font-weight: 700;
2070 color: #2A3256;
2071 margin-bottom: 15px;
2072 }
2073
2074 .better-payment .feature__card p {
2075 font-size: 14px;
2076 font-weight: 400;
2077 color: #9095A2;
2078 margin-bottom: 20px;
2079 }
2080
2081 .better-payment .mailing__option .input__wrap {
2082 display: -webkit-box;
2083 display: -ms-flexbox;
2084 display: flex;
2085 }
2086
2087 .better-payment .mailing__option .input__wrap:not(:last-child) {
2088 margin-bottom: 30px;
2089 }
2090
2091 .better-payment .mailing__option .input__wrap .title {
2092 -webkit-box-flex: 0;
2093 -ms-flex: 0 0 180px;
2094 flex: 0 0 180px;
2095 padding-right: 15px;
2096 font-size: 16px;
2097 font-weight: 400;
2098 color: #2A3256;
2099 }
2100
2101 .better-payment .mailing__option .input__wrap .input__area {
2102 -webkit-box-flex: 1;
2103 -ms-flex: 1 1 auto;
2104 flex: 1 1 auto;
2105 }
2106
2107 .better-payment .mailing__option .input__wrap .input__area .bp-select,
2108 .better-payment .mailing__option .input__wrap .input__area .form__control {
2109 max-width: 330px;
2110 }
2111
2112 .better-payment .mailing__option .input__wrap .input__area p {
2113 font-size: 14px;
2114 font-weight: 400;
2115 color: #9095A2;
2116 margin-top: 7px;
2117 }
2118
2119 .better-payment .go__premium h3 {
2120 font-size: var(--h3-fontsize);
2121 font-weight: 700;
2122 color: #2A3256;
2123 margin-bottom: 30px;
2124 }
2125
2126 .better-payment .go__premium p {
2127 font-size: 14px;
2128 font-weight: 400;
2129 color: #9095A2;
2130 margin-bottom: 10px;
2131 max-width: 700px;
2132 line-height: 25px;
2133 }
2134
2135 .better-payment .transactions {
2136 background: #fff;
2137 overflow: auto;
2138 }
2139
2140 .better-payment .fix-style.transactions {
2141 overflow: unset;
2142 }
2143
2144 .better-payment .transaction__filter {
2145 padding: 50px 50px 10px;
2146 }
2147
2148 @media all and (max-width: 1399.98px) {
2149 .better-payment .transaction__filter {
2150 padding: 30px 30px 10px;
2151 }
2152 }
2153 .better-payment .transaction__filter form {
2154 display: -webkit-box;
2155 display: -ms-flexbox;
2156 display: flex;
2157 -webkit-box-align: end;
2158 -ms-flex-align: end;
2159 align-items: flex-end;
2160 }
2161
2162 @media all and (max-width: 1399.98px) {
2163 .better-payment .transaction__filter form {
2164 flex-wrap: wrap;
2165 }
2166 }
2167 .better-payment .transaction__filter form > * {
2168 -webkit-box-flex: 0;
2169 -ms-flex: 0 1 20%;
2170 flex: 0 1 20%;
2171 margin-right: 30px;
2172 }
2173
2174 @media all and (max-width: 1399.98px) {
2175 .better-payment .transaction__filter form > * {
2176 flex: 0 1 calc(25% - 23px);
2177 }
2178 .better-payment .transaction__filter form > *:nth-child(4) {
2179 margin-right: 0;
2180 }
2181 }
2182 @media all and (max-width: 767.98px) {
2183 .better-payment .transaction__filter form > * {
2184 flex: 0 1 calc(33.33% - 14px);
2185 margin-right: 20px;
2186 }
2187 .better-payment .transaction__filter form > *:nth-child(4) {
2188 margin-right: 20px;
2189 }
2190 .better-payment .transaction__filter form > *:nth-child(3n) {
2191 margin-right: 0;
2192 }
2193 }
2194 @media all and (max-width: 575.98px) {
2195 .better-payment .transaction__filter {
2196 padding: 20px 20px 0;
2197 }
2198 .better-payment .transaction__filter form > * {
2199 flex: 0 1 calc(50% - 10px);
2200 margin-right: 20px;
2201 }
2202 .better-payment .transaction__filter form > *:nth-child(4) {
2203 margin-right: 20px;
2204 }
2205 .better-payment .transaction__filter form > *:nth-child(3n) {
2206 margin-right: 20px;
2207 }
2208 .better-payment .transaction__filter form > *:nth-child(2n) {
2209 margin-right: 0;
2210 }
2211 }
2212 .better-payment .transaction__filter form button.button {
2213 margin-bottom: 20px;
2214 -webkit-box-flex: 0;
2215 -ms-flex: 0 0 auto;
2216 flex: 0 0 auto;
2217 margin-right: 0;
2218 }
2219
2220 .better-payment .transaction__filter form button.button.fix-style {
2221 margin-bottom: 0px;
2222 }
2223
2224 .better-payment .transaction__table {
2225 min-width: 979px;
2226 }
2227
2228 .better-payment .transaction__table .table__row {
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 -webkit-transition: all 0.3s ease 0s;
2236 transition: all 0.3s ease 0s;
2237 -webkit-transition-property: box-shadow;
2238 -webkit-transition-property: -webkit-box-shadow;
2239 transition-property: -webkit-box-shadow;
2240 transition-property: box-shadow;
2241 transition-property: box-shadow, -webkit-box-shadow;
2242 }
2243
2244 .better-payment .transaction__table .table__row:not(.row__head):not(:last-child) {
2245 border-bottom: 1px solid rgba(110, 88, 247, 0.1);
2246 }
2247
2248 .better-payment .transaction__table .table__row:hover:not(.row__head) {
2249 -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.03);
2250 box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.03);
2251 }
2252
2253 .better-payment .transaction__table .table__row:last-child {
2254 padding-bottom: 10px;
2255 }
2256
2257 .better-payment .transaction__table .table__row.row__head {
2258 background: rgba(110, 88, 247, 0.1);
2259 }
2260
2261 .better-payment .transaction__table .table__row .table__col {
2262 padding: 10px 5px;
2263 font-size: 14px;
2264 font-weight: 400;
2265 color: #2A3256;
2266 }
2267
2268 .better-payment .transaction__table .table__row .table__col p {
2269 word-break: break-all;
2270 }
2271
2272 .better-payment .transaction__table .table__row .table__col.col__head {
2273 font-weight: 600;
2274 }
2275
2276 .better-payment .transaction__table .table__row .table__col:first-child {
2277 padding-left: 50px;
2278 }
2279
2280 .better-payment .transaction__table .table__row .table__col:last-child {
2281 padding-right: 50px;
2282 }
2283
2284 @media all and (max-width: 1399.98px) {
2285 .better-payment .transaction__table .table__row .table__col:first-child {
2286 padding-left: 30px;
2287 }
2288 .better-payment .transaction__table .table__row .table__col:last-child {
2289 padding-right: 30px;
2290 }
2291 }
2292 @media all and (max-width: 575.98px) {
2293 .better-payment .transaction__table .table__row .table__col:first-child {
2294 padding-left: 20px;
2295 }
2296 .better-payment .transaction__table .table__row .table__col:last-child {
2297 padding-right: 20px;
2298 }
2299 }
2300 .better-payment .transaction__table .table__row .table__col.col__name {
2301 -webkit-box-flex: 1;
2302 -ms-flex: 1 1 170px;
2303 flex: 1 1 170px;
2304 }
2305
2306 .better-payment .transaction__table .table__row .table__col.col__email {
2307 -webkit-box-flex: 1;
2308 -ms-flex: 1 1 200px;
2309 flex: 1 1 200px;
2310 }
2311
2312 .better-payment .transaction__table .table__row .table__col.col__amount {
2313 -webkit-box-flex: 1;
2314 -ms-flex: 1 0 120px;
2315 flex: 1 0 120px;
2316 }
2317
2318 .better-payment .transaction__table .table__row .table__col.col__trans {
2319 -webkit-box-flex: 1;
2320 -ms-flex: 1 1 260px;
2321 flex: 1 1 260px;
2322 }
2323
2324 .better-payment .transaction__table .table__row .table__col.col__source {
2325 -webkit-box-flex: 1;
2326 -ms-flex: 1 0 90px;
2327 flex: 1 0 90px;
2328 }
2329
2330 .better-payment .transaction__table .table__row .table__col.col__status {
2331 -webkit-box-flex: 1;
2332 /* -ms-flex: 1 0 80px; */
2333 -ms-flex: 1 0 110px;
2334 flex: 1 0 110px;
2335 }
2336
2337 .better-payment .transaction__table .table__row .table__col.col__action {
2338 -webkit-box-flex: 0;
2339 -ms-flex: 0 0 150px;
2340 flex: 0 0 150px;
2341 display: -webkit-box;
2342 display: -ms-flexbox;
2343 display: flex;
2344 -webkit-box-pack: end;
2345 -ms-flex-pack: end;
2346 justify-content: flex-end;
2347 }
2348
2349 .better-payment .transaction__table .table__row .table__col.col__action .button {
2350 border-radius: 5px;
2351 }
2352
2353 .better-payment .transaction__info__wrap {
2354 background: #fff;
2355 }
2356
2357 .better-payment .transaction__info__wrap .transaction__info {
2358 /* padding: var(--padding-50) */
2359 padding: var(--padding-30);
2360 }
2361
2362 .better-payment .transaction__info__wrap .transaction__info:not(:last-child) {
2363 border-bottom: 1px solid rgba(110, 88, 247, 0.1);
2364 }
2365
2366 .better-payment .transaction__info__wrap .transaction__info .info__header {
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 margin-bottom: 10px;
2374 }
2375
2376 .better-payment .transaction__info__wrap .transaction__info .info__header .title {
2377 display: -webkit-box;
2378 display: -ms-flexbox;
2379 display: flex;
2380 -webkit-box-align: center;
2381 -ms-flex-align: center;
2382 align-items: center;
2383 margin-right: auto;
2384 font-size: var(--h4-fontsize);
2385 font-weight: 500;
2386 color: #2A3256;
2387 }
2388
2389 .better-payment .transaction__info__wrap .transaction__info .info__header .title i {
2390 margin-right: 10px;
2391 }
2392
2393 .better-payment .transaction__info__wrap .transaction__info .informations {
2394 padding: 0 0 0 30px;
2395 margin: 0;
2396 }
2397
2398 .better-payment .transaction__info__wrap .transaction__info .informations.informations__edit .edit__input__wrap span {
2399 width: 120px;
2400 }
2401
2402 .better-payment .transaction__info__wrap .transaction__info .informations.informations__edit .edit__input__wrap .form__control,
2403 .better-payment .transaction__info__wrap .transaction__info .informations.informations__edit .edit__input__wrap .bp-select {
2404 width: 300px;
2405 }
2406
2407 .better-payment .transaction__info__wrap .transaction__info .informations li {
2408 font-size: 16px;
2409 font-weight: 400;
2410 color: #9095A2;
2411 display: -webkit-box;
2412 display: -ms-flexbox;
2413 display: flex;
2414 -webkit-box-align: center;
2415 -ms-flex-align: center;
2416 align-items: center;
2417 }
2418
2419 .better-payment .transaction__info__wrap .transaction__info .informations li:not(:last-child) {
2420 margin-bottom: 12px;
2421 }
2422
2423 .better-payment .transaction__info__wrap .transaction__info .informations li span {
2424 color: #2A3256;
2425 margin-right: 7px;
2426 }
2427
2428 @media all and (max-width: 575.98px) {
2429 .better-payment .transaction__info__wrap .transaction__info .informations li {
2430 display: block;
2431 font-size: 14px;
2432 }
2433 .better-payment .transaction__info__wrap .transaction__info .informations li span {
2434 word-break: break-all;
2435 }
2436 .better-payment .transaction__info__wrap .transaction__info .informations li span:first-child {
2437 display: block;
2438 }
2439 }
2440 .better-payment .transaction__info__wrap .transaction__info .informations li span:first-child {
2441 width: 150px;
2442 }
2443
2444 .better-payment .payment__info {
2445 background: #fff;
2446 }
2447
2448 .better-payment .payment__info .payment__getway {
2449 padding: var(--padding-30);
2450 border-bottom: 1px solid rgba(110, 88, 247, 0.1);
2451 }
2452
2453 .better-payment .payment__info .payment__getway.bp-pro-block-wrap {
2454 border-top: 1px solid rgba(110, 88, 247, 0.1);
2455 }
2456
2457 .better-payment .payment__info .payment__getway .title {
2458 display: -webkit-box;
2459 display: -ms-flexbox;
2460 display: flex;
2461 -webkit-box-align: center;
2462 -ms-flex-align: center;
2463 align-items: center;
2464 margin-bottom: 20px;
2465 font-size: var(--h4-fontsize);
2466 font-weight: 500;
2467 color: #2A3256;
2468 }
2469
2470 .better-payment .payment__info .payment__getway .title i {
2471 margin-right: 10px;
2472 }
2473
2474 .better-payment .payment__info .payment__getway p {
2475 padding-left: 30px;
2476 font-size: 14px;
2477 font-weight: 400;
2478 color: #2A3256;
2479 word-break: break-all;
2480 }
2481
2482 .better-payment .payment__info .payment__getway p:not(:last-child) {
2483 margin-bottom: 10px;
2484 }
2485
2486 .better-payment .payment__info .payment__getway p span {
2487 color: #9095A2;
2488 }
2489
2490 .better-payment .payment__info .payment__getway p span.bp-copy-clipboard {
2491 color: #000;
2492 }
2493
2494 .better-payment .payment__info .payment__getway .pay__by {
2495 display: -webkit-box;
2496 display: -ms-flexbox;
2497 display: flex;
2498 margin-left: 30px;
2499 margin-bottom: 15px;
2500 }
2501
2502 .better-payment .payment__info .payment__getway .pay__by label {
2503 margin-right: 10px;
2504 cursor: unset;
2505 }
2506
2507 .better-payment .payment__info .payment__getway .pay__by label input {
2508 display: none;
2509 }
2510
2511 .better-payment .payment__info .payment__getway .pay__by label span {
2512 background: #F7F8FA;
2513 border-radius: 5px;
2514 border: 1px solid transparent;
2515 padding: 9px 15px;
2516 display: inline-block;
2517 font-size: 0;
2518 -webkit-transition: all 0.3s ease 0s;
2519 transition: all 0.3s ease 0s;
2520 -webkit-transition-property: border;
2521 transition-property: border;
2522 }
2523
2524 .better-payment .payment__info .payment__getway .pay__by label span img {
2525 max-height: 100%;
2526 }
2527
2528 .better-payment .payment__info .email__activity {
2529 padding: 30px 0;
2530 }
2531
2532 .better-payment .payment__info .email__activity .title {
2533 display: -webkit-box;
2534 display: -ms-flexbox;
2535 display: flex;
2536 -webkit-box-align: center;
2537 -ms-flex-align: center;
2538 align-items: center;
2539 margin-bottom: 20px;
2540 padding-left: 30px;
2541 font-size: var(--h4-fontsize);
2542 font-weight: 500;
2543 color: #2A3256;
2544 }
2545
2546 .better-payment .payment__info .email__activity .title i {
2547 margin-right: 10px;
2548 }
2549
2550 .better-payment .payment__info .email__activity .activity__list li {
2551 display: -webkit-box;
2552 display: -ms-flexbox;
2553 display: flex;
2554 -webkit-box-align: center;
2555 -ms-flex-align: center;
2556 align-items: center;
2557 -webkit-box-pack: justify;
2558 -ms-flex-pack: justify;
2559 justify-content: space-between;
2560 padding: 12px 30px 12px 60px;
2561 -webkit-transition: all 0.3s ease 0s;
2562 transition: all 0.3s ease 0s;
2563 -webkit-transition-property: background;
2564 transition-property: background;
2565 }
2566
2567 .better-payment .payment__info .email__activity .activity__list li:hover {
2568 background: #F7F8FA;
2569 }
2570
2571 .better-payment .payment__info .email__activity .activity__list li:hover .action .button {
2572 opacity: 1;
2573 }
2574
2575 .better-payment .payment__info .email__activity .activity__list li .content {
2576 padding-left: 30px;
2577 position: relative;
2578 }
2579
2580 .better-payment .payment__info .email__activity .activity__list li .content i {
2581 position: absolute;
2582 top: 3px;
2583 left: 0;
2584 }
2585
2586 .better-payment .payment__info .email__activity .activity__list li .content h5 {
2587 font-size: var(--h6-fontsize);
2588 font-weight: 400;
2589 color: #2A3256;
2590 word-break: break-all;
2591 }
2592
2593 .better-payment .payment__info .email__activity .activity__list li .content p {
2594 font-size: 14px;
2595 font-weight: 400;
2596 color: #9095A2;
2597 }
2598
2599 .better-payment .payment__info .email__activity .activity__list li .action {
2600 font-size: 0;
2601 }
2602
2603 .better-payment .payment__info .email__activity .activity__list li .action .button {
2604 border-radius: 5px;
2605 opacity: 0;
2606 -webkit-transition: all 0.3s ease 0s;
2607 transition: all 0.3s ease 0s;
2608 -webkit-transition-property: opacity;
2609 transition-property: opacity;
2610 }
2611
2612 .better-payment .pagination ul {
2613 text-align: right;
2614 }
2615
2616 .better-payment .pagination ul li {
2617 display: inline-block;
2618 }
2619
2620 .better-payment .pagination ul li:not(:last-child) {
2621 margin-right: 10px;
2622 }
2623
2624 .better-payment .pagination ul li a,
2625 .better-payment .pagination ul li span {
2626 background: #FFFFFF;
2627 border: 1px solid rgba(131, 133, 142, 0.3);
2628 border-radius: 2px;
2629 display: inline-block;
2630 height: 40px;
2631 width: 40px;
2632 line-height: 40px;
2633 font-size: 14px;
2634 font-weight: 400;
2635 color: #9095A2;
2636 text-align: center;
2637 overflow: hidden;
2638 z-index: 1;
2639 padding: 0;
2640 }
2641
2642 .better-payment .pagination .showing-entities-html {
2643 font-size: 14px;
2644 color: #9095A2;
2645 }
2646
2647 .better-payment .pagination ul li a::before,
2648 .better-payment .pagination ul li span::before {
2649 background: #fff;
2650 }
2651
2652 .better-payment .pagination ul li a.active,
2653 .better-payment .pagination ul li span.active {
2654 border: 0;
2655 }
2656
2657 .better-payment .pagination ul li a.active::before,
2658 .better-payment .pagination ul li span.active::before {
2659 background: transparent;
2660 }
2661
2662 .better-payment .pagination ul li a:hover i,
2663 .better-payment .pagination ul li a.active i,
2664 .better-payment .pagination ul li span:hover i,
2665 .better-payment .pagination ul li span.active i {
2666 color: #fff;
2667 }
2668
2669 .better-payment .pagination ul li a i,
2670 .better-payment .pagination ul li span i {
2671 font-size: 12px;
2672 color: #9095A2;
2673 -webkit-transition: all 0.3s ease 0s;
2674 transition: all 0.3s ease 0s;
2675 -webkit-transition-property: color;
2676 transition-property: color;
2677 }
2678
2679 .better-payment .bp-d-none,
2680 .better-payment .payment__option.bp-d-none {
2681 display: none;
2682 }
2683
2684 .better-payment .bp-d-block,
2685 .better-payment .payment__option.bp-d-block {
2686 display: block;
2687 }
2688
2689 .better-payment .email-additional-headers-content {
2690 display: none;
2691 }
2692
2693 .wp-admin.toplevel_page_better-payment-settings #wpcontent,
2694 .wp-admin.better-payment_page_better-payment-transactions #wpcontent,
2695 .wp-admin.better-payment_page_better-payment-analytics #wpcontent {
2696 /* padding-left: 0; */
2697 padding-left: 5px;
2698 }
2699
2700 .wp-admin.toplevel_page_better-payment-settings #wpbody-content,
2701 .wp-admin.better-payment_page_better-payment-transactions #wpbody-content,
2702 .wp-admin.better-payment_page_better-payment-analytics #wpbody-content {
2703 padding-bottom: 0;
2704 }
2705
2706 #wpbody-content > .better-payment:not(.notice) {
2707 /* margin-left: -20px; */
2708 margin-left: -5px;
2709 }
2710
2711 .admin-bar .toast-top-center {
2712 top: 33px;
2713 }
2714
2715 .better-payment .bp-copy-clipboard {
2716 width: 15px;
2717 margin-left: 5px;
2718 margin-right: 5px;
2719 cursor: pointer;
2720 }
2721
2722 .better-payment .bp-email-copy-clipboard {
2723 cursor: pointer;
2724 }
2725
2726 .better-payment .bp-copy-clipboard-input {
2727 visibility: visible;
2728 }
2729
2730 .better-payment .bp-text-black {
2731 color: #000 !important;
2732 }
2733
2734 .better-payment .single-transaction-id-copy-wrap #bp_copy_clipboard_input_2 {
2735 margin-right: 8px;
2736 }
2737
2738 .better-payment .bp-border-danger {
2739 border: 1px solid #ff0000 !important;
2740 }
2741
2742 .better-payment .setup-content .payment-configuration-title {
2743 margin: 40px30px 10px 30p;
2744 }
2745
2746 .better-payment .better_payment_settings_opt_in {
2747 height: 20px;
2748 width: 20px;
2749 }
2750
2751 .better-payment .better_payment_settings_opt_in[type=checkbox]:checked::before {
2752 height: 20px;
2753 width: 20px;
2754 }
2755
2756 .better-payment .better-payment-license-key-section {
2757 padding: 30px;
2758 border-radius: 5px;
2759 background: #F1F4FA;
2760 }
2761
2762 .better-payment .better-payment-license-key-input-activate,
2763 .better-payment .better-payment-license-key-input-deactivate {
2764 height: 55px;
2765 padding: 10px 20px;
2766 }
2767
2768 .better-payment .better-payment-license-key-button-activate,
2769 .better-payment .better-payment-license-key-button-deactivate {
2770 position: absolute !important;
2771 right: 6px;
2772 top: 6px;
2773 height: unset;
2774 }
2775 .better-payment .better-payment-license-key-button-activate.button__active,
2776 .better-payment .better-payment-license-key-button-deactivate.button__active {
2777 padding: 12px 20px;
2778 }
2779
2780 .better-payment .better-payment-license-key-step-img {
2781 margin-left: 50px;
2782 margin-bottom: -10px;
2783 }
2784
2785 .better-payment .better-payment-license-key-steps-list {
2786 margin-top: 40px;
2787 margin-bottom: 30px;
2788 }
2789
2790 .better-payment .better-payment-license-key-button-deactivate,
2791 .better-payment .better-payment-license-key-button-deactivate:hover {
2792 background: #FF4141;
2793 color: #fff;
2794 }
2795
2796 .better-payment .better-payment-license-key-button-deactivate::after {
2797 background: unset !important;
2798 }
2799
2800 .better-payment .bp-clearfix {
2801 clear: both;
2802 }
2803