PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 1.6
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v1.6
2.3.2 2.3.1 2.3.0 2.2.8 2.2.7 trunk 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.10.5 1.11.0 1.11.1 1.11.2 1.6 1.7 1.8 1.8.1 1.8.2 1.8.3 1.9.0 1.9.1 1.9.10 1.9.11 All 60 releases
merchant / assets / css / admin / admin.css

admin.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 1.6, at assets/css/admin/admin.css

4,637 lines 112.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Utilities */
2 .mrc-w-100 {
3 width: 100% !important;
4 }
5
6 .mrc-mb-0 {
7 margin-bottom: 0;
8 }
9
10 .mrc-mt-0 {
11 margin-top: 0;
12 }
13
14 .merchant-animated-buttons .merchant-button-flash:hover {
15 -webkit-animation: merchant-flash 1s infinite both;
16 animation: merchant-flash 1s infinite both;
17 -webkit-animation-iteration-count: 1;
18 animation-iteration-count: 1;
19 }
20
21 .merchant-animated-buttons .merchant-button-bounce:hover {
22 -webkit-animation: merchant-bounce .3s alternate;
23 animation: merchant-bounce .3s alternate;
24 -webkit-animation-iteration-count: 4;
25 animation-iteration-count: 4;
26 }
27
28 .merchant-animated-buttons .merchant-button-zoom-in:hover {
29 -webkit-transform: scale(1.2);
30 transform: scale(1.2);
31 }
32
33 .merchant-animated-buttons .merchant-button-shake:hover {
34 -webkit-animation: merchant-shake .3s;
35 animation: merchant-shake .3s;
36 -webkit-animation-iteration-count: 2;
37 animation-iteration-count: 2;
38 }
39
40 .merchant-animated-buttons .merchant-button-pulse:hover {
41 -webkit-animation: merchant-pulse 1.5s ease-in-out infinite both;
42 animation: merchant-pulse 1.5s ease-in-out infinite both;
43 }
44
45 .merchant-animated-buttons .merchant-button-jello-shake:hover {
46 -webkit-animation: merchant-jello-shake 1.5s infinite both;
47 animation: merchant-jello-shake 1.5s infinite both;
48 }
49
50 .merchant-animated-buttons .merchant-button-wobble:hover {
51 -webkit-animation: merchant-wobble 1.5s ease-in-out infinite both;
52 animation: merchant-wobble 1.5s ease-in-out infinite both;
53 }
54
55 .merchant-animated-buttons .merchant-button-vibrate:hover {
56 -webkit-animation: merchant-vibrate .3s linear 4 both;
57 animation: merchant-vibrate .3s linear 4 both;
58 }
59
60 .merchant-animated-buttons .merchant-button-swing:hover {
61 -webkit-animation: merchant-swing 2s ease-in-out infinite alternate;
62 animation: merchant-swing 2s ease-in-out infinite alternate;
63 }
64
65 .merchant-animated-buttons .merchant-button-tada:hover {
66 -webkit-animation: merchant-tada 1s infinite both;
67 animation: merchant-tada 1s infinite both;
68 }
69
70 @-webkit-keyframes merchant-flash {
71 0%, 50%, to {
72 opacity: 1;
73 }
74 25%, 75% {
75 opacity: 0;
76 }
77 }
78
79 @keyframes merchant-flash {
80 0%, 50%, to {
81 opacity: 1;
82 }
83 25%, 75% {
84 opacity: 0;
85 }
86 }
87
88 @-webkit-keyframes merchant-bounce {
89 to {
90 -webkit-transform: scale(1.2);
91 transform: scale(1.2);
92 }
93 }
94
95 @keyframes merchant-bounce {
96 to {
97 -webkit-transform: scale(1.2);
98 transform: scale(1.2);
99 }
100 }
101
102 @-webkit-keyframes merchant-shake {
103 33% {
104 -webkit-transform: rotate(10deg);
105 transform: rotate(10deg);
106 }
107 67% {
108 -webkit-transform: rotate(-10deg);
109 transform: rotate(-10deg);
110 }
111 to {
112 -webkit-transform: rotate(10deg);
113 transform: rotate(10deg);
114 }
115 }
116
117 @keyframes merchant-shake {
118 33% {
119 -webkit-transform: rotate(10deg);
120 transform: rotate(10deg);
121 }
122 67% {
123 -webkit-transform: rotate(-10deg);
124 transform: rotate(-10deg);
125 }
126 to {
127 -webkit-transform: rotate(10deg);
128 transform: rotate(10deg);
129 }
130 }
131
132 @-webkit-keyframes merchant-pulse {
133 0% {
134 -webkit-animation-timing-function: ease-out;
135 animation-timing-function: ease-out;
136 -webkit-transform: scale(1);
137 transform: scale(1);
138 -webkit-transform-origin: center center;
139 transform-origin: center center;
140 }
141 10% {
142 -webkit-animation-timing-function: ease-in;
143 animation-timing-function: ease-in;
144 -webkit-transform: scale(0.91);
145 transform: scale(0.91);
146 }
147 17% {
148 -webkit-animation-timing-function: ease-out;
149 animation-timing-function: ease-out;
150 -webkit-transform: scale(0.98);
151 transform: scale(0.98);
152 }
153 33% {
154 -webkit-animation-timing-function: ease-in;
155 animation-timing-function: ease-in;
156 -webkit-transform: scale(0.87);
157 transform: scale(0.87);
158 }
159 45% {
160 -webkit-animation-timing-function: ease-out;
161 animation-timing-function: ease-out;
162 -webkit-transform: scale(1);
163 transform: scale(1);
164 }
165 }
166
167 @keyframes merchant-pulse {
168 0% {
169 -webkit-animation-timing-function: ease-out;
170 animation-timing-function: ease-out;
171 -webkit-transform: scale(1);
172 transform: scale(1);
173 -webkit-transform-origin: center center;
174 transform-origin: center center;
175 }
176 10% {
177 -webkit-animation-timing-function: ease-in;
178 animation-timing-function: ease-in;
179 -webkit-transform: scale(0.91);
180 transform: scale(0.91);
181 }
182 17% {
183 -webkit-animation-timing-function: ease-out;
184 animation-timing-function: ease-out;
185 -webkit-transform: scale(0.98);
186 transform: scale(0.98);
187 }
188 33% {
189 -webkit-animation-timing-function: ease-in;
190 animation-timing-function: ease-in;
191 -webkit-transform: scale(0.87);
192 transform: scale(0.87);
193 }
194 45% {
195 -webkit-animation-timing-function: ease-out;
196 animation-timing-function: ease-out;
197 -webkit-transform: scale(1);
198 transform: scale(1);
199 }
200 }
201
202 @-webkit-keyframes merchant-jello-shake {
203 0% {
204 -webkit-transform: scaleX(1);
205 transform: scaleX(1);
206 }
207 30% {
208 -webkit-transform: scale3d(1.25, 0.75, 1);
209 transform: scale3d(1.25, 0.75, 1);
210 }
211 40% {
212 -webkit-transform: scale3d(0.75, 1.25, 1);
213 transform: scale3d(0.75, 1.25, 1);
214 }
215 50% {
216 -webkit-transform: scale3d(1.15, 0.85, 1);
217 transform: scale3d(1.15, 0.85, 1);
218 }
219 65% {
220 -webkit-transform: scale3d(0.95, 1.05, 1);
221 transform: scale3d(0.95, 1.05, 1);
222 }
223 75% {
224 -webkit-transform: scale3d(1.05, 0.95, 1);
225 transform: scale3d(1.05, 0.95, 1);
226 }
227 to {
228 -webkit-transform: scaleX(1);
229 transform: scaleX(1);
230 }
231 }
232
233 @keyframes merchant-jello-shake {
234 0% {
235 -webkit-transform: scaleX(1);
236 transform: scaleX(1);
237 }
238 30% {
239 -webkit-transform: scale3d(1.25, 0.75, 1);
240 transform: scale3d(1.25, 0.75, 1);
241 }
242 40% {
243 -webkit-transform: scale3d(0.75, 1.25, 1);
244 transform: scale3d(0.75, 1.25, 1);
245 }
246 50% {
247 -webkit-transform: scale3d(1.15, 0.85, 1);
248 transform: scale3d(1.15, 0.85, 1);
249 }
250 65% {
251 -webkit-transform: scale3d(0.95, 1.05, 1);
252 transform: scale3d(0.95, 1.05, 1);
253 }
254 75% {
255 -webkit-transform: scale3d(1.05, 0.95, 1);
256 transform: scale3d(1.05, 0.95, 1);
257 }
258 to {
259 -webkit-transform: scaleX(1);
260 transform: scaleX(1);
261 }
262 }
263
264 @-webkit-keyframes merchant-wobble {
265 0%, to {
266 -webkit-transform: translateX(0);
267 transform: translateX(0);
268 -webkit-transform-origin: 50% 50%;
269 transform-origin: 50% 50%;
270 }
271 15% {
272 -webkit-transform: translateX(-30px) rotate(-6deg);
273 transform: translateX(-30px) rotate(-6deg);
274 }
275 30% {
276 -webkit-transform: translateX(15px) rotate(6deg);
277 transform: translateX(15px) rotate(6deg);
278 }
279 45% {
280 -webkit-transform: translateX(-15px) rotate(-3.6deg);
281 transform: translateX(-15px) rotate(-3.6deg);
282 }
283 60% {
284 -webkit-transform: translateX(9px) rotate(2.4deg);
285 transform: translateX(9px) rotate(2.4deg);
286 }
287 75% {
288 -webkit-transform: translateX(-6px) rotate(-1.2deg);
289 transform: translateX(-6px) rotate(-1.2deg);
290 }
291 }
292
293 @keyframes merchant-wobble {
294 0%, to {
295 -webkit-transform: translateX(0);
296 transform: translateX(0);
297 -webkit-transform-origin: 50% 50%;
298 transform-origin: 50% 50%;
299 }
300 15% {
301 -webkit-transform: translateX(-30px) rotate(-6deg);
302 transform: translateX(-30px) rotate(-6deg);
303 }
304 30% {
305 -webkit-transform: translateX(15px) rotate(6deg);
306 transform: translateX(15px) rotate(6deg);
307 }
308 45% {
309 -webkit-transform: translateX(-15px) rotate(-3.6deg);
310 transform: translateX(-15px) rotate(-3.6deg);
311 }
312 60% {
313 -webkit-transform: translateX(9px) rotate(2.4deg);
314 transform: translateX(9px) rotate(2.4deg);
315 }
316 75% {
317 -webkit-transform: translateX(-6px) rotate(-1.2deg);
318 transform: translateX(-6px) rotate(-1.2deg);
319 }
320 }
321
322 @-webkit-keyframes merchant-vibrate {
323 0% {
324 -webkit-transform: translate(0);
325 transform: translate(0);
326 }
327 20% {
328 -webkit-transform: translate(-2px, 2px);
329 transform: translate(-2px, 2px);
330 }
331 40% {
332 -webkit-transform: translate(-2px, -2px);
333 transform: translate(-2px, -2px);
334 }
335 60% {
336 -webkit-transform: translate(2px, 2px);
337 transform: translate(2px, 2px);
338 }
339 80% {
340 -webkit-transform: translate(2px, -2px);
341 transform: translate(2px, -2px);
342 }
343 to {
344 -webkit-transform: translate(0);
345 transform: translate(0);
346 }
347 }
348
349 @keyframes merchant-vibrate {
350 0% {
351 -webkit-transform: translate(0);
352 transform: translate(0);
353 }
354 20% {
355 -webkit-transform: translate(-2px, 2px);
356 transform: translate(-2px, 2px);
357 }
358 40% {
359 -webkit-transform: translate(-2px, -2px);
360 transform: translate(-2px, -2px);
361 }
362 60% {
363 -webkit-transform: translate(2px, 2px);
364 transform: translate(2px, 2px);
365 }
366 80% {
367 -webkit-transform: translate(2px, -2px);
368 transform: translate(2px, -2px);
369 }
370 to {
371 -webkit-transform: translate(0);
372 transform: translate(0);
373 }
374 }
375
376 @-webkit-keyframes merchant-swing {
377 0% {
378 -webkit-transform: rotate(0deg);
379 transform: rotate(0deg);
380 }
381 20% {
382 -webkit-transform: rotate(3deg);
383 transform: rotate(3deg);
384 }
385 40% {
386 -webkit-transform: rotate(-3deg);
387 transform: rotate(-3deg);
388 }
389 60% {
390 -webkit-transform: rotate(3deg);
391 transform: rotate(3deg);
392 }
393 80% {
394 -webkit-transform: rotate(-3deg);
395 transform: rotate(-3deg);
396 }
397 to {
398 -webkit-transform: rotate(0deg);
399 transform: rotate(0deg);
400 }
401 }
402
403 @keyframes merchant-swing {
404 0% {
405 -webkit-transform: rotate(0deg);
406 transform: rotate(0deg);
407 }
408 20% {
409 -webkit-transform: rotate(3deg);
410 transform: rotate(3deg);
411 }
412 40% {
413 -webkit-transform: rotate(-3deg);
414 transform: rotate(-3deg);
415 }
416 60% {
417 -webkit-transform: rotate(3deg);
418 transform: rotate(3deg);
419 }
420 80% {
421 -webkit-transform: rotate(-3deg);
422 transform: rotate(-3deg);
423 }
424 to {
425 -webkit-transform: rotate(0deg);
426 transform: rotate(0deg);
427 }
428 }
429
430 @-webkit-keyframes merchant-tada {
431 0% {
432 -webkit-transform: scaleX(1);
433 transform: scaleX(1);
434 }
435 10%, 20% {
436 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
437 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
438 }
439 30%, 50%, 70%, 90% {
440 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
441 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
442 }
443 40%, 60%, 80% {
444 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
445 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
446 }
447 to {
448 -webkit-transform: scaleX(1);
449 transform: scaleX(1);
450 }
451 }
452
453 @keyframes merchant-tada {
454 0% {
455 -webkit-transform: scaleX(1);
456 transform: scaleX(1);
457 }
458 10%, 20% {
459 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
460 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
461 }
462 30%, 50%, 70%, 90% {
463 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
464 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
465 }
466 40%, 60%, 80% {
467 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
468 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
469 }
470 to {
471 -webkit-transform: scaleX(1);
472 transform: scaleX(1);
473 }
474 }
475
476 .merchant-pcr-app * {
477 outline: none;
478 border: none;
479 -webkit-box-sizing: border-box;
480 box-sizing: border-box;
481 }
482
483 .merchant-pcr-app input:focus,
484 .merchant-pcr-app input.pcr-active,
485 .merchant-pcr-app button:focus,
486 .merchant-pcr-app button.pcr-active {
487 -webkit-box-shadow: none;
488 box-shadow: none;
489 }
490
491 .merchant-pcr-app .pcr-palette:focus,
492 .merchant-pcr-app .pcr-slider:focus {
493 -webkit-box-shadow: none;
494 box-shadow: none;
495 }
496
497 .merchant-pcr-app {
498 position: fixed;
499 z-index: 999999;
500 top: 0;
501 left: 0;
502 display: -webkit-box;
503 display: -ms-flexbox;
504 display: flex;
505 -webkit-box-orient: vertical;
506 -webkit-box-direction: normal;
507 -ms-flex-direction: column;
508 flex-direction: column;
509 border-radius: 0.1em;
510 opacity: 0;
511 visibility: hidden;
512 -webkit-transition: opacity 0.2s, visibility 0s 0.2s;
513 transition: opacity 0.2s, visibility 0s 0.2s;
514 -webkit-box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
515 box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
516 background: #fff;
517 }
518
519 .merchant-pcr-app.visible {
520 visibility: visible;
521 opacity: 1;
522 -webkit-transition: opacity 0.2s;
523 transition: opacity 0.2s;
524 }
525
526 .merchant-pcr-app .pcr-swatches {
527 display: -webkit-box;
528 display: -ms-flexbox;
529 display: flex;
530 -webkit-box-pack: justify;
531 -ms-flex-pack: justify;
532 justify-content: space-between;
533 }
534
535 .merchant-pcr-app .pcr-swatches > button {
536 cursor: pointer;
537 font-size: 1em;
538 position: relative;
539 z-index: 1;
540 width: 20px;
541 height: 20px;
542 margin: 0;
543 padding: 0;
544 background: none;
545 }
546
547 .merchant-pcr-app .pcr-swatches > button::before {
548 position: absolute;
549 content: '';
550 top: 0;
551 left: 0;
552 bottom: 0;
553 right: 0;
554 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
555 background-size: 6px;
556 border-radius: 20px;
557 border: 1px solid transparent;
558 z-index: -1;
559 }
560
561 .merchant-pcr-app .pcr-swatches > button::after {
562 content: '';
563 position: absolute;
564 z-index: 1;
565 top: 0;
566 left: 0;
567 right: 0;
568 bottom: 0;
569 border-radius: 20px;
570 border: 1px solid rgba(0, 0, 0, 0.3);
571 background: var(--pcr-color);
572 }
573
574 .merchant-pcr-app .pcr-interaction {
575 display: -webkit-box;
576 display: -ms-flexbox;
577 display: flex;
578 grid-gap: 5px;
579 }
580
581 .merchant-pcr-app .pcr-interaction input {
582 font-size: 11px;
583 border-radius: 3px;
584 }
585
586 .merchant-pcr-app .pcr-interaction input:focus {
587 border-color: #3858E9;
588 }
589
590 .merchant-pcr-app .pcr-interaction .pcr-result {
591 -webkit-box-flex: 1;
592 -ms-flex: 1;
593 flex: 1;
594 margin: 0;
595 width: 100%;
596 max-width: 100%;
597 }
598
599 .merchant-pcr-app .pcr-interaction .pcr-clear {
600 cursor: pointer;
601 margin: 0;
602 padding: 0 10px;
603 border-radius: 3px;
604 color: #fff;
605 background-color: #3858E9;
606 text-transform: uppercase;
607 }
608
609 .merchant-pcr-app .pcr-selection .pcr-picker {
610 -webkit-user-select: none;
611 -moz-user-select: none;
612 -ms-user-select: none;
613 user-select: none;
614 position: absolute;
615 height: 16px;
616 width: 16px;
617 border-radius: 16px;
618 background-color: #fff !important;
619 -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
620 box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
621 }
622
623 .merchant-pcr-app .pcr-selection .pcr-color-palette,
624 .merchant-pcr-app .pcr-selection .pcr-color-chooser,
625 .merchant-pcr-app .pcr-selection .pcr-color-opacity {
626 -webkit-user-select: none;
627 -moz-user-select: none;
628 -ms-user-select: none;
629 user-select: none;
630 position: relative;
631 display: -webkit-box;
632 display: -ms-flexbox;
633 display: flex;
634 -webkit-box-orient: vertical;
635 -webkit-box-direction: normal;
636 -ms-flex-direction: column;
637 flex-direction: column;
638 cursor: -webkit-grab;
639 cursor: grab;
640 }
641
642 .merchant-pcr-app .pcr-selection .pcr-color-palette:active,
643 .merchant-pcr-app .pcr-selection .pcr-color-chooser:active,
644 .merchant-pcr-app .pcr-selection .pcr-color-opacity:active {
645 cursor: -webkit-grabbing;
646 cursor: grabbing;
647 }
648
649 .merchant-pcr-app[data-theme='merchant'] {
650 width: 250px;
651 max-width: 95vw;
652 padding: 10px;
653 -webkit-box-sizing: border-box;
654 box-sizing: border-box;
655 display: -webkit-box;
656 display: -ms-flexbox;
657 display: flex;
658 grid-gap: 10px;
659 -webkit-box-orient: vertical;
660 -webkit-box-direction: normal;
661 -ms-flex-direction: column;
662 flex-direction: column;
663 }
664
665 .merchant-pcr-app[data-theme='merchant'] .pcr-selection {
666 display: grid;
667 grid-gap: 10px;
668 grid-template-columns: 1fr 4fr;
669 grid-template-rows: 5fr auto auto;
670 -webkit-box-align: center;
671 -ms-flex-align: center;
672 align-items: center;
673 height: 150px;
674 width: 100%;
675 align-self: flex-start;
676 }
677
678 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-preview {
679 grid-area: 2 / 1 / 4 / 1;
680 height: 100%;
681 width: 100%;
682 display: -webkit-box;
683 display: -ms-flexbox;
684 display: flex;
685 -webkit-box-align: center;
686 -ms-flex-align: center;
687 align-items: center;
688 -webkit-box-pack: center;
689 -ms-flex-pack: center;
690 justify-content: center;
691 }
692
693 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-preview .pcr-last-color {
694 display: none;
695 }
696
697 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-preview .pcr-current-color {
698 position: relative;
699 width: 32px;
700 height: 32px;
701 border-radius: 32px;
702 overflow: hidden;
703 border: 1px solid rgba(0, 0, 0, 0.3);
704 background-color: var(--pcr-color);
705 }
706
707 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-preview .pcr-current-color::before {
708 position: absolute;
709 content: '';
710 top: 0;
711 left: 0;
712 width: 100%;
713 height: 100%;
714 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
715 background-size: 6px;
716 border-radius: 100%;
717 z-index: -1;
718 }
719
720 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-palette {
721 grid-area: 1 / 1 / 2 / 3;
722 width: 100%;
723 height: 100%;
724 z-index: 1;
725 }
726
727 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-palette .pcr-picker {
728 width: 18px;
729 height: 18px;
730 border: 2px solid #fff;
731 -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
732 box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
733 background-color: transparent !important;
734 }
735
736 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-palette .pcr-palette {
737 width: 100%;
738 height: 100%;
739 }
740
741 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-palette .pcr-palette::before {
742 position: absolute;
743 content: '';
744 top: 0;
745 left: 0;
746 width: 100%;
747 height: 100%;
748 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
749 background-size: 8px;
750 z-index: -1;
751 }
752
753 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-chooser {
754 grid-area: 2 / 2 / 2 / 2;
755 }
756
757 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-opacity {
758 grid-area: 3 / 2 / 3 / 2;
759 }
760
761 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-chooser,
762 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-opacity {
763 height: 12px;
764 margin-right: 10px;
765 }
766
767 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-chooser .pcr-picker,
768 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-opacity .pcr-picker {
769 top: 50%;
770 -webkit-transform: translateY(-50%);
771 transform: translateY(-50%);
772 }
773
774 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-chooser .pcr-slider,
775 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-opacity .pcr-slider {
776 -webkit-box-flex: 1;
777 -ms-flex-positive: 1;
778 flex-grow: 1;
779 }
780
781 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-chooser .pcr-slider {
782 background: -webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red));
783 background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
784 }
785
786 .merchant-pcr-app[data-theme='merchant'] .pcr-selection .pcr-color-opacity .pcr-slider {
787 background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
788 background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
789 background-size: 100%, 6px;
790 }
791
792 /* Buttons */
793 .button-tertiary {
794 cursor: pointer;
795 -webkit-user-select: none;
796 -moz-user-select: none;
797 -ms-user-select: none;
798 user-select: none;
799 display: -webkit-inline-box;
800 display: -ms-inline-flexbox;
801 display: inline-flex;
802 padding: 0.4375rem 1rem;
803 font-size: .875rem;
804 font-weight: 600;
805 line-height: 1.5;
806 white-space: nowrap;
807 text-transform: none;
808 text-decoration: none;
809 color: #212b36;
810 background-color: #fff;
811 border: 1px solid #c4cdd5;
812 border-radius: 0.25rem;
813 -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
814 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
815 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
816 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
817 }
818
819 .button-tertiary:hover, .button-tertiary:focus {
820 outline: none;
821 -webkit-box-shadow: none;
822 box-shadow: none;
823 }
824
825 /* Botiga Dashboard Tabs Nav Items */
826 .merchant-tabs-nav {
827 padding: 0 20px;
828 margin-bottom: -100%;
829 -webkit-transform: translate3d(0, 100%, 0);
830 transform: translate3d(0, 100%, 0);
831 }
832
833 .merchant-tabs-nav ul {
834 display: -webkit-box;
835 display: -ms-flexbox;
836 display: flex;
837 padding: 0;
838 }
839
840 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link {
841 position: relative;
842 font-size: 14px;
843 line-height: 20px;
844 padding: 16px;
845 color: #6D7175;
846 text-decoration: none;
847 -webkit-transition: ease color 300ms;
848 transition: ease color 300ms;
849 outline: none;
850 -webkit-box-shadow: none;
851 box-shadow: none;
852 }
853
854 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
855 content: '';
856 position: absolute;
857 bottom: 0;
858 left: 0;
859 width: 100%;
860 height: 3px;
861 background-color: transparent;
862 border-radius: 4px 4px 0 0;
863 }
864
865 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
866 color: #3858E9;
867 font-weight: 500;
868 }
869
870 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link:after {
871 background-color: #3858E9;
872 }
873
874 .merchant-tabs-nav .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
875 color: #3858E9;
876 }
877
878 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link {
879 position: relative;
880 display: -webkit-box;
881 display: -ms-flexbox;
882 display: flex;
883 -webkit-box-align: center;
884 -ms-flex-align: center;
885 align-items: center;
886 font-size: 18px;
887 font-weight: 600;
888 line-height: 26px;
889 padding: 9px 16px;
890 border-bottom: 0;
891 color: #1e1e1e;
892 -webkit-transition: ease color 200ms;
893 transition: ease color 200ms;
894 }
895
896 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg {
897 margin-right: 8px;
898 }
899
900 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg path {
901 -webkit-transition: ease fill 200ms;
902 transition: ease fill 200ms;
903 }
904
905 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
906 content: none;
907 }
908
909 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:before {
910 content: '';
911 position: absolute;
912 top: 0;
913 left: 0;
914 background-color: transparent;
915 width: 4px;
916 height: 100%;
917 border-radius: 0 4px 4px 0;
918 opacity: 0;
919 visibility: hidden;
920 -webkit-transition: ease opacity 200ms;
921 transition: ease opacity 200ms;
922 }
923
924 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
925 color: #757575;
926 }
927
928 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link svg path {
929 fill: #757575;
930 }
931
932 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link:before {
933 background-color: #e1e1e1;
934 opacity: 1;
935 visibility: visible;
936 }
937
938 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
939 color: #3858E9;
940 }
941
942 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link svg path {
943 fill: #3858E9;
944 }
945
946 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link:before {
947 background-color: #3858E9;
948 opacity: 1;
949 visibility: visible;
950 }
951
952 .merchant-tabs-nav.merchant-tabs-nav-vertical {
953 padding: 0;
954 margin-left: -20px;
955 }
956
957 .merchant-tabs-nav.merchant-tabs-nav-vertical ul {
958 -webkit-box-orient: vertical;
959 -webkit-box-direction: normal;
960 -ms-flex-direction: column;
961 flex-direction: column;
962 margin: 0;
963 }
964
965 .merchant-tabs-nav.merchant-tabs-nav-no-negative-margin {
966 margin-bottom: 0;
967 -webkit-transform: none;
968 transform: none;
969 }
970
971 /* Botiga Tabs Content */
972 .merchant-tab-content {
973 display: none;
974 }
975
976 .merchant-tab-content.active {
977 display: block;
978 }
979
980 .toplevel_page_merchant {
981 background-color: #F4F6F8;
982 }
983
984 .toplevel_page_merchant #wpbody-content > .updated,
985 .toplevel_page_merchant #wpbody-content > .notice {
986 display: none;
987 }
988
989 .merchant-top-bar {
990 display: -webkit-box;
991 display: -ms-flexbox;
992 display: flex;
993 -webkit-box-align: center;
994 -ms-flex-align: center;
995 align-items: center;
996 -webkit-box-pack: justify;
997 -ms-flex-pack: justify;
998 justify-content: space-between;
999 background-color: #FFF;
1000 margin: 0 0 30px -20px;
1001 padding: 18px 20px;
1002 }
1003
1004 .merchant-top-bar * {
1005 -webkit-box-sizing: border-box;
1006 box-sizing: border-box;
1007 }
1008
1009 .merchant-top-bar * *:before,
1010 .merchant-top-bar * *:after {
1011 -webkit-box-sizing: border-box;
1012 box-sizing: border-box;
1013 }
1014
1015 .merchant-top-bar .merchant-top-bar-infos {
1016 display: -webkit-box;
1017 display: -ms-flexbox;
1018 display: flex;
1019 -webkit-box-align: center;
1020 -ms-flex-align: center;
1021 align-items: center;
1022 }
1023
1024 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item {
1025 position: relative;
1026 padding: 0 10px;
1027 }
1028
1029 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item + .merchant-top-bar-info-item:before {
1030 content: '';
1031 position: absolute;
1032 top: 50%;
1033 left: 0;
1034 height: 17px;
1035 -webkit-transform: translateY(-50%);
1036 transform: translateY(-50%);
1037 border-left: 1px solid #F0F0F0;
1038 }
1039
1040 .merchant-top-bar .merchant-version {
1041 font-size: 13px;
1042 line-height: 13px;
1043 color: #97A3B6;
1044 }
1045
1046 .merchant-top-bar .merchant-version strong {
1047 position: relative;
1048 top: 1px;
1049 }
1050
1051 .merchant-top-bar .merchant-version .merchant-badge {
1052 display: -webkit-inline-box;
1053 display: -ms-inline-flexbox;
1054 display: inline-flex;
1055 margin-left: 5px;
1056 font-size: 9px;
1057 line-height: 10px;
1058 }
1059
1060 .merchant-top-bar .merchant-notifications {
1061 position: relative;
1062 display: -webkit-inline-box;
1063 display: -ms-inline-flexbox;
1064 display: inline-flex;
1065 -webkit-box-align: center;
1066 -ms-flex-align: center;
1067 align-items: center;
1068 -webkit-box-pack: center;
1069 -ms-flex-pack: center;
1070 justify-content: center;
1071 width: 27px;
1072 height: 27px;
1073 border: 1px solid #DFDFDF;
1074 border-radius: 35px;
1075 }
1076
1077 .merchant-top-bar .merchant-notifications:focus {
1078 -webkit-box-shadow: none;
1079 box-shadow: none;
1080 }
1081
1082 .merchant-top-bar .merchant-notifications .merchant-notifications-count {
1083 position: absolute;
1084 top: -8px;
1085 right: -7px;
1086 display: -webkit-box;
1087 display: -ms-flexbox;
1088 display: flex;
1089 -webkit-box-align: center;
1090 -ms-flex-align: center;
1091 align-items: center;
1092 -webkit-box-pack: center;
1093 -ms-flex-pack: center;
1094 justify-content: center;
1095 width: 16px;
1096 height: 16px;
1097 color: #FFF;
1098 background-color: #FA1212;
1099 border-radius: 35px;
1100 font-size: 10px;
1101 line-height: 1;
1102 }
1103
1104 .merchant-top-bar .merchant-notifications.read .merchant-notifications-count {
1105 display: none;
1106 }
1107
1108 .merchant-top-bar .merchant-website {
1109 display: -webkit-box;
1110 display: -ms-flexbox;
1111 display: flex;
1112 -webkit-box-align: center;
1113 -ms-flex-align: center;
1114 align-items: center;
1115 gap: 8px;
1116 font-size: 13px;
1117 line-height: 16px;
1118 color: #3858E9;
1119 text-decoration: none;
1120 }
1121
1122 /* Notifications Sidebar */
1123 .merchant-notifications-sidebar {
1124 position: fixed;
1125 top: calc(32px + 64px);
1126 right: 0;
1127 width: 100%;
1128 max-width: 500px;
1129 height: calc(100vh - 92px);
1130 background-color: #FFF;
1131 -webkit-box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1132 box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1133 opacity: 0;
1134 visibility: hidden;
1135 -webkit-transform: translate3d(100%, 0, 0);
1136 transform: translate3d(100%, 0, 0);
1137 -webkit-transition: ease transform 300ms, ease opacity 300ms;
1138 transition: ease transform 300ms, ease opacity 300ms;
1139 z-index: 1000;
1140 }
1141
1142 .merchant-notifications-sidebar.opened {
1143 opacity: 1;
1144 visibility: visible;
1145 -webkit-transform: none;
1146 transform: none;
1147 }
1148
1149 .merchant-notifications-sidebar.closing {
1150 opacity: 0;
1151 -webkit-transform: translate3d(100%, 0, 0);
1152 transform: translate3d(100%, 0, 0);
1153 }
1154
1155 .merchant-notifications-sidebar .merchant-notifications-sidebar-close {
1156 position: absolute;
1157 top: 15px;
1158 right: 15px;
1159 -webkit-transition: ease opacity 300ms;
1160 transition: ease opacity 300ms;
1161 }
1162
1163 .merchant-notifications-sidebar .merchant-notifications-sidebar-close:hover {
1164 opacity: 0.7;
1165 }
1166
1167 .merchant-notifications-sidebar .merchant-notifications-sidebar-header {
1168 display: -webkit-box;
1169 display: -ms-flexbox;
1170 display: flex;
1171 -webkit-box-align: center;
1172 -ms-flex-align: center;
1173 align-items: center;
1174 gap: 10px;
1175 background-color: #EAEEF2;
1176 padding: 20px 22px;
1177 }
1178
1179 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon {
1180 display: -webkit-box;
1181 display: -ms-flexbox;
1182 display: flex;
1183 -webkit-box-align: center;
1184 -ms-flex-align: center;
1185 align-items: center;
1186 -webkit-box-pack: center;
1187 -ms-flex-pack: center;
1188 justify-content: center;
1189 width: 40px;
1190 height: 40px;
1191 background-color: #FFF;
1192 border: 1px solid #EBEDEF;
1193 border-radius: 35px;
1194 }
1195
1196 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon svg {
1197 position: relative;
1198 top: -2px;
1199 }
1200
1201 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content h3 {
1202 font-size: 16px;
1203 line-height: 26px;
1204 font-weight: 600;
1205 color: #3858E9;
1206 margin: 0;
1207 }
1208
1209 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content p {
1210 font-size: 13px;
1211 line-height: 18px;
1212 color: #757575;
1213 margin: 0;
1214 }
1215
1216 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs {
1217 position: relative;
1218 }
1219
1220 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs:after {
1221 content: '';
1222 position: absolute;
1223 bottom: -10px;
1224 left: 20px;
1225 width: calc(100% - 40px);
1226 border-bottom: 1px solid #F0F0F1;
1227 }
1228
1229 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs + .merchant-notifications-sidebar-body {
1230 max-height: calc(100vh - 232px);
1231 }
1232
1233 .merchant-notifications-sidebar .merchant-notifications-sidebar-body {
1234 padding: 20px;
1235 overflow-y: auto;
1236 max-height: calc(100vh - 230px);
1237 }
1238
1239 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar {
1240 width: 5px;
1241 }
1242
1243 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-track {
1244 background: #e2e2e2;
1245 }
1246
1247 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-thumb {
1248 background-color: #CCC;
1249 }
1250
1251 /* Notifications (card) */
1252 .merchant-notification .merchant-notification-date {
1253 display: block;
1254 font-size: 13px;
1255 line-height: 18px;
1256 color: #757575;
1257 }
1258
1259 .merchant-notification .merchant-notification-date + .merchant-notification-content {
1260 margin-top: 20px;
1261 }
1262
1263 .merchant-notification .changelog-tag {
1264 display: inline-block;
1265 font-size: 10px;
1266 line-height: 18px;
1267 color: #FFF;
1268 padding: 0px 10px;
1269 background-color: #CCC;
1270 border-radius: 3px;
1271 text-transform: uppercase;
1272 font-weight: 600;
1273 margin-bottom: 5px;
1274 }
1275
1276 .merchant-notification .changelog-tag.changelog-added {
1277 background-color: #73B189;
1278 }
1279
1280 .merchant-notification .changelog-tag.changelog-changed {
1281 background-color: #F6CA45;
1282 }
1283
1284 .merchant-notification .changelog-tag.changelog-fixed {
1285 background-color: #967BE3;
1286 }
1287
1288 .merchant-notification .changelog-description {
1289 display: block;
1290 font-size: 13px;
1291 line-height: 21px;
1292 font-weight: 400;
1293 color: #757575;
1294 margin-top: 5px;
1295 }
1296
1297 .merchant-notification .merchant-notification-content ul {
1298 margin: 0;
1299 }
1300
1301 .merchant-notification .merchant-notification-content ul li {
1302 display: -webkit-box;
1303 display: -ms-flexbox;
1304 display: flex;
1305 -webkit-box-orient: vertical;
1306 -webkit-box-direction: normal;
1307 -ms-flex-direction: column;
1308 flex-direction: column;
1309 -webkit-box-align: start;
1310 -ms-flex-align: start;
1311 align-items: flex-start;
1312 font-size: 16px;
1313 line-height: 26px;
1314 font-weight: 600;
1315 color: #101517;
1316 }
1317
1318 .merchant-notification .merchant-notification-content ul li + li {
1319 margin-top: 15px;
1320 padding-top: 15px;
1321 border-top: 1px solid #E7E7E7;
1322 }
1323
1324 .merchant-notification + .merchant-notification {
1325 margin: 20px -20px 0px;
1326 padding: 20px 20px 0px;
1327 border-top: 1px solid #E7E7E7;
1328 }
1329
1330 .merchant-wrap {
1331 padding-left: 5px;
1332 padding-right: 5px;
1333 }
1334
1335 .merchant-wrap * {
1336 -webkit-box-sizing: border-box;
1337 box-sizing: border-box;
1338 }
1339
1340 .merchant-wrap * *:before,
1341 .merchant-wrap * *:after {
1342 -webkit-box-sizing: border-box;
1343 box-sizing: border-box;
1344 }
1345
1346 .merchant-modules-panel {
1347 display: -webkit-box;
1348 display: -ms-flexbox;
1349 display: flex;
1350 grid-gap: 20px;
1351 -webkit-box-orient: vertical;
1352 -webkit-box-direction: normal;
1353 -ms-flex-direction: column;
1354 flex-direction: column;
1355 }
1356
1357 .merchant-modules-header {
1358 display: -webkit-box;
1359 display: -ms-flexbox;
1360 display: flex;
1361 grid-gap: 30px;
1362 }
1363
1364 .merchant-modules-header-left,
1365 .merchant-modules-header-right {
1366 -webkit-box-flex: 1;
1367 -ms-flex: 1;
1368 flex: 1;
1369 display: -webkit-box;
1370 display: -ms-flexbox;
1371 display: flex;
1372 grid-gap: 10px;
1373 -webkit-box-orient: vertical;
1374 -webkit-box-direction: normal;
1375 -ms-flex-direction: column;
1376 flex-direction: column;
1377 -webkit-box-pack: center;
1378 -ms-flex-pack: center;
1379 justify-content: center;
1380 }
1381
1382 .merchant-modules-header-heading {
1383 font-size: 24px;
1384 line-height: 34px;
1385 font-weight: 500;
1386 color: #101517;
1387 }
1388
1389 .merchant-modules-header-subheading {
1390 font-size: 16px;
1391 line-height: 1.35em;
1392 color: #7B7B7B;
1393 font-weight: 400;
1394 }
1395
1396 .merchant-modules-header-status {
1397 margin-top: 20px;
1398 margin-bottom: 40px;
1399 display: -webkit-box;
1400 display: -ms-flexbox;
1401 display: flex;
1402 grid-gap: 20px;
1403 }
1404
1405 .merchant-modules-header-status-box {
1406 min-width: 175px;
1407 display: -webkit-box;
1408 display: -ms-flexbox;
1409 display: flex;
1410 grid-gap: 10px;
1411 -webkit-box-orient: vertical;
1412 -webkit-box-direction: normal;
1413 -ms-flex-direction: column;
1414 flex-direction: column;
1415 -webkit-box-align: center;
1416 -ms-flex-align: center;
1417 align-items: center;
1418 padding: 20px;
1419 font-size: 14px;
1420 font-weight: 500;
1421 color: #101517;
1422 background-color: #fff;
1423 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1424 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1425 border-radius: 4px;
1426 }
1427
1428 .merchant-modules-header-status-box span {
1429 display: -webkit-box;
1430 display: -ms-flexbox;
1431 display: flex;
1432 grid-gap: 5px;
1433 -webkit-box-align: center;
1434 -ms-flex-align: center;
1435 align-items: center;
1436 }
1437
1438 .merchant-modules-header-status-box strong {
1439 color: #101517;
1440 font-size: 40px;
1441 line-height: 1em;
1442 }
1443
1444 .merchant-modules-header-image {
1445 height: 100%;
1446 display: -webkit-box;
1447 display: -ms-flexbox;
1448 display: flex;
1449 -webkit-box-pack: center;
1450 -ms-flex-pack: center;
1451 justify-content: center;
1452 -webkit-box-align: end;
1453 -ms-flex-align: end;
1454 align-items: flex-end;
1455 }
1456
1457 .merchant-modules-header-image svg {
1458 width: 300px;
1459 }
1460
1461 @media (max-width: 1400px) {
1462 .merchant-modules-header-image img {
1463 max-width: 450px;
1464 margin-top: 20px;
1465 }
1466 }
1467
1468 .merchant-modules-header-shortlinks {
1469 margin: 20px 0;
1470 padding: 0;
1471 list-style: none;
1472 display: -webkit-box;
1473 display: -ms-flexbox;
1474 display: flex;
1475 -webkit-box-orient: vertical;
1476 -webkit-box-direction: normal;
1477 -ms-flex-direction: column;
1478 flex-direction: column;
1479 border-radius: 4px;
1480 border: 2px solid #F0F0F1;
1481 background-color: #fff;
1482 border-radius: 4px;
1483 }
1484
1485 .merchant-modules-header-shortlinks li {
1486 margin: 0 15px;
1487 border-bottom: 1px solid #EFEFEF;
1488 }
1489
1490 .merchant-modules-header-shortlinks li:last-child {
1491 border-bottom: none;
1492 margin-bottom: 5px;
1493 }
1494
1495 .merchant-modules-header-shortlinks li:first-child {
1496 margin-top: 5px;
1497 }
1498
1499 .merchant-modules-header-shortlinks a {
1500 font-size: 14px;
1501 display: -webkit-box;
1502 display: -ms-flexbox;
1503 display: flex;
1504 grid-gap: 8px;
1505 -webkit-box-align: center;
1506 -ms-flex-align: center;
1507 align-items: center;
1508 -webkit-box-pack: justify;
1509 -ms-flex-pack: justify;
1510 justify-content: space-between;
1511 color: #757575;
1512 text-decoration: none;
1513 padding: 10px 0;
1514 }
1515
1516 .merchant-modules-header-shortlinks a:focus {
1517 outline: none;
1518 -webkit-box-shadow: none;
1519 box-shadow: none;
1520 }
1521
1522 .merchant-modules-header-shortlinks span {
1523 -webkit-box-flex: 1;
1524 -ms-flex: 1;
1525 flex: 1;
1526 }
1527
1528 .merchant-modules-header-shortlinks strong {
1529 color: #101517;
1530 font-weight: 500;
1531 }
1532
1533 .merchant-modules-box {
1534 display: -webkit-box;
1535 display: -ms-flexbox;
1536 display: flex;
1537 grid-gap: 20px;
1538 -webkit-box-orient: vertical;
1539 -webkit-box-direction: normal;
1540 -ms-flex-direction: column;
1541 flex-direction: column;
1542 padding: 20px;
1543 background-color: #fff;
1544 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1545 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1546 border-radius: 4px;
1547 }
1548
1549 .merchant-modules-box-heading {
1550 font-size: 20px;
1551 font-weight: 500;
1552 line-height: 30px;
1553 color: #101517;
1554 }
1555
1556 .merchant-modules-list {
1557 display: grid;
1558 grid-template-columns: repeat(3, minmax(0, 1fr));
1559 grid-gap: 20px;
1560 }
1561
1562 .merchant-modules-list-item {
1563 position: relative;
1564 display: -webkit-box;
1565 display: -ms-flexbox;
1566 display: flex;
1567 grid-gap: 10px;
1568 padding: 20px;
1569 text-decoration: none;
1570 border: 2px solid #F0F0F1;
1571 background-color: #fff;
1572 border-radius: 4px;
1573 -webkit-transition: all .2s;
1574 transition: all .2s;
1575 }
1576
1577 .merchant-modules-list-item.merchant-module-deactivated-by-bp {
1578 text-transform: uppsercase;
1579 }
1580
1581 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-icon,
1582 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-content {
1583 opacity: 0.5;
1584 }
1585
1586 .merchant-modules-list-item:hover {
1587 -webkit-box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
1588 box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
1589 }
1590
1591 .merchant-modules-list-item:focus {
1592 outline: none;
1593 -webkit-box-shadow: none;
1594 box-shadow: none;
1595 }
1596
1597 .merchant-badge {
1598 color: #99A5B8;
1599 padding: 3px 6px;
1600 border: 1px solid #DFDFDF;
1601 border-radius: 2px;
1602 font-weight: 700;
1603 }
1604
1605 .merchant-badge.merchant-badge-pro {
1606 color: #3858e9;
1607 border-color: #3858e9;
1608 }
1609
1610 .merchant-pro-badge.merchant-pro-tooltip {
1611 position: relative;
1612 }
1613
1614 .merchant-pro-badge.merchant-pro-tooltip:before {
1615 content: attr(data-tooltip-message);
1616 position: absolute;
1617 right: -30px;
1618 bottom: calc(100% + 11px);
1619 color: #FFF;
1620 font-size: 11px;
1621 line-height: 16px;
1622 padding: 3px 6px;
1623 background-color: #1E1E1E;
1624 white-space: nowrap;
1625 opacity: 0;
1626 visibility: hidden;
1627 -webkit-transform: translate3d(0, 6px, 0);
1628 transform: translate3d(0, 6px, 0);
1629 -webkit-transition: ease opacity 300ms, ease transform 300ms;
1630 transition: ease opacity 300ms, ease transform 300ms;
1631 z-index: 2;
1632 }
1633
1634 .merchant-pro-badge.merchant-pro-tooltip:after {
1635 content: '';
1636 position: absolute;
1637 bottom: calc(100% + 3px);
1638 right: 10px;
1639 width: 0;
1640 height: 0;
1641 border-style: solid;
1642 border-width: 4px 4px 4px 4px;
1643 border-color: #1E1E1E transparent transparent transparent;
1644 opacity: 0;
1645 visibility: hidden;
1646 -webkit-transform: translate3d(0, 6px, 0);
1647 transform: translate3d(0, 6px, 0);
1648 -webkit-transition: ease opacity 300ms, ease transform 300ms;
1649 transition: ease opacity 300ms, ease transform 300ms;
1650 z-index: 2;
1651 }
1652
1653 .merchant-pro-badge.merchant-pro-tooltip:hover:before, .merchant-pro-badge.merchant-pro-tooltip:hover:after {
1654 opacity: 1;
1655 visibility: visible;
1656 -webkit-transform: translate3d(0, 0, 0);
1657 transform: translate3d(0, 0, 0);
1658 }
1659
1660 .merchant-modules-list-item-badge-wrapper {
1661 position: absolute;
1662 top: 20px;
1663 right: 20px;
1664 }
1665
1666 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge {
1667 padding: 3px 7px;
1668 color: #FFF;
1669 border: 1px solid #212121;
1670 background-color: #212121;
1671 border-radius: 3px;
1672 font-size: 10px;
1673 line-height: 1.2;
1674 font-weight: 400;
1675 display: -webkit-inline-box;
1676 display: -ms-inline-flexbox;
1677 display: inline-flex;
1678 top: -2px;
1679 text-transform: uppercase;
1680 }
1681
1682 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge:before {
1683 font-weight: 400;
1684 text-transform: none;
1685 }
1686
1687 .merchant-modules-list-item-woo-required .merchant-pro-badge {
1688 padding: 1px 2px;
1689 color: #674399;
1690 border: 1px solid #674399;
1691 border-radius: 3px;
1692 font-size: 9px;
1693 line-height: 1.2;
1694 font-weight: 700;
1695 display: -webkit-inline-box;
1696 display: -ms-inline-flexbox;
1697 display: inline-flex;
1698 top: -2px;
1699 }
1700
1701 .merchant-modules-list-item-woo-required .merchant-pro-badge:before {
1702 font-weight: 400;
1703 }
1704
1705 .merchant-modules-list-item-woo-required + .merchant-modules-list-item-upsell {
1706 right: 53px;
1707 }
1708
1709 .merchant-modules-list-item-icon {
1710 display: -webkit-box;
1711 display: -ms-flexbox;
1712 display: flex;
1713 }
1714
1715 .merchant-modules-list-item-icon svg {
1716 width: 18px;
1717 height: 26px;
1718 fill: #787C82;
1719 }
1720
1721 .merchant-modules-list-item-icon svg.stroke-based {
1722 fill: none;
1723 stroke: #787C82;
1724 }
1725
1726 .merchant-modules-list-item-content {
1727 display: -webkit-box;
1728 display: -ms-flexbox;
1729 display: flex;
1730 grid-gap: 8px;
1731 -webkit-box-orient: vertical;
1732 -webkit-box-direction: normal;
1733 -ms-flex-direction: column;
1734 flex-direction: column;
1735 }
1736
1737 .merchant-modules-list-item-title {
1738 display: -webkit-box;
1739 display: -ms-flexbox;
1740 display: flex;
1741 -webkit-box-align: center;
1742 -ms-flex-align: center;
1743 align-items: center;
1744 grid-gap: 5px;
1745 font-size: 16px;
1746 line-height: 26px;
1747 font-weight: 500;
1748 color: #101517;
1749 }
1750
1751 .merchant-modules-indicator {
1752 width: 10px;
1753 height: 10px;
1754 border-radius: 10px;
1755 background-color: #3c8733;
1756 }
1757
1758 .merchant-modules-list-item-desc {
1759 color: #757575;
1760 font-size: 13px;
1761 line-height: 20px;
1762 max-width: 400px;
1763 }
1764
1765 .merchant-module-page {
1766 display: -webkit-box;
1767 display: -ms-flexbox;
1768 display: flex;
1769 }
1770
1771 .merchant-module-page-back a {
1772 display: -webkit-box;
1773 display: -ms-flexbox;
1774 display: flex;
1775 grid-gap: 5px;
1776 -webkit-box-align: center;
1777 -ms-flex-align: center;
1778 align-items: center;
1779 -webkit-transition: all .2s;
1780 transition: all .2s;
1781 text-decoration: none;
1782 color: #1D2327;
1783 font-weight: 500;
1784 }
1785
1786 .merchant-module-page-back a:focus, .merchant-module-page-back a:active {
1787 -webkit-box-shadow: none;
1788 box-shadow: none;
1789 outline: none;
1790 }
1791
1792 .merchant-module-page-content {
1793 width: 50%;
1794 -webkit-box-flex: 1;
1795 -ms-flex: 1;
1796 flex: 1;
1797 display: -webkit-box;
1798 display: -ms-flexbox;
1799 display: flex;
1800 grid-gap: 20px;
1801 -webkit-box-orient: vertical;
1802 -webkit-box-direction: normal;
1803 -ms-flex-direction: column;
1804 flex-direction: column;
1805 }
1806
1807 .merchant-module-page-body {
1808 display: -webkit-box;
1809 display: -ms-flexbox;
1810 display: flex;
1811 }
1812
1813 .merchant-module-page-preview {
1814 width: 50%;
1815 margin-left: 20px;
1816 }
1817
1818 .merchant-module-page-body.has-preview .merchant-module-page-setting-box {
1819 -webkit-box-orient: vertical;
1820 -webkit-box-direction: normal;
1821 -ms-flex-direction: column;
1822 flex-direction: column;
1823 grid-gap: 20px;
1824 }
1825
1826 .merchant-module-page-body.has-preview .merchant-module-page-setting-title,
1827 .merchant-module-page-body.has-preview .merchant-module-page-setting-fields {
1828 width: 100%;
1829 }
1830
1831 .merchant-module-page-ajax-form {
1832 -webkit-box-flex: 1;
1833 -ms-flex: 1;
1834 flex: 1;
1835 display: -webkit-box;
1836 display: -ms-flexbox;
1837 display: flex;
1838 grid-gap: 20px;
1839 -webkit-box-orient: vertical;
1840 -webkit-box-direction: normal;
1841 -ms-flex-direction: column;
1842 flex-direction: column;
1843 }
1844
1845 .merchant-module-page-header {
1846 display: -webkit-box;
1847 display: -ms-flexbox;
1848 display: flex;
1849 -webkit-box-align: center;
1850 -ms-flex-align: center;
1851 align-items: center;
1852 background-color: #fff;
1853 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1854 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1855 border-radius: 4px;
1856 }
1857
1858 .merchant-module-page-header-content {
1859 width: 100%;
1860 display: -webkit-box;
1861 display: -ms-flexbox;
1862 display: flex;
1863 grid-gap: 20px;
1864 -webkit-box-orient: vertical;
1865 -webkit-box-direction: normal;
1866 -ms-flex-direction: column;
1867 flex-direction: column;
1868 padding: 30px;
1869 }
1870
1871 .merchant-module-page-header-placeholder {
1872 width: 40%;
1873 display: -webkit-box;
1874 display: -ms-flexbox;
1875 display: flex;
1876 -ms-flex-item-align: end;
1877 align-self: flex-end;
1878 -webkit-box-pack: center;
1879 -ms-flex-pack: center;
1880 justify-content: center;
1881 margin: 40px 60px 0 60px;
1882 }
1883
1884 .merchant-module-page-header-placeholder img {
1885 max-width: 100%;
1886 max-height: 300px;
1887 }
1888
1889 body.merchant-has-admin-preview .merchant-module-page-header-content {
1890 width: 100%;
1891 }
1892
1893 body.merchant-has-admin-preview .merchant-module-page-header-placeholder {
1894 display: none;
1895 }
1896
1897 body.merchant-has-admin-preview .merchant-module-page-desc {
1898 max-width: none;
1899 }
1900
1901 .merchant-module-page-heading {
1902 display: -webkit-box;
1903 display: -ms-flexbox;
1904 display: flex;
1905 grid-gap: 12px;
1906 }
1907
1908 .merchant-module-page-info {
1909 display: -webkit-box;
1910 display: -ms-flexbox;
1911 display: flex;
1912 grid-gap: 10px;
1913 -webkit-box-orient: vertical;
1914 -webkit-box-direction: normal;
1915 -ms-flex-direction: column;
1916 flex-direction: column;
1917 }
1918
1919 .merchant-module-page-title {
1920 font-size: 32px;
1921 line-height: 40px;
1922 font-weight: 500;
1923 color: #101517;
1924 display: -webkit-box;
1925 display: -ms-flexbox;
1926 display: flex;
1927 grid-gap: 15px;
1928 -webkit-box-align: center;
1929 -ms-flex-align: center;
1930 align-items: center;
1931 }
1932
1933 .merchant-module-page-title svg {
1934 width: 28px;
1935 height: 28px;
1936 fill: #787C82;
1937 }
1938
1939 .merchant-module-page-desc {
1940 font-size: 18px;
1941 line-height: 28px;
1942 font-weight: normal;
1943 color: #757575;
1944 max-width: none;
1945 }
1946
1947 .merchant-module-page-actions {
1948 display: -webkit-box;
1949 display: -ms-flexbox;
1950 display: flex;
1951 grid-gap: 10px;
1952 -webkit-box-pack: justify;
1953 -ms-flex-pack: justify;
1954 justify-content: space-between;
1955 }
1956
1957 .merchant-module-page-actions-inner {
1958 display: -webkit-box;
1959 display: -ms-flexbox;
1960 display: flex;
1961 grid-gap: 15px;
1962 }
1963
1964 .merchant-module-page-button {
1965 cursor: pointer;
1966 display: -webkit-box;
1967 display: -ms-flexbox;
1968 display: flex;
1969 grid-gap: 7px;
1970 -webkit-box-pack: center;
1971 -ms-flex-pack: center;
1972 justify-content: center;
1973 -webkit-box-align: center;
1974 -ms-flex-align: center;
1975 align-items: center;
1976 padding: 14px 25px;
1977 font-size: 16px;
1978 line-height: 1em;
1979 font-weight: 500;
1980 -webkit-user-select: none;
1981 -moz-user-select: none;
1982 -ms-user-select: none;
1983 user-select: none;
1984 text-decoration: none;
1985 border-radius: 4px;
1986 border: none;
1987 color: #fff;
1988 border: 1px solid transparent;
1989 background-color: #3858E9;
1990 }
1991
1992 .merchant-module-page-button:focus, .merchant-module-page-button:hover {
1993 outline: none;
1994 -webkit-box-shadow: none;
1995 box-shadow: none;
1996 color: #fff;
1997 }
1998
1999 .merchant-module-page-button svg {
2000 width: 8px;
2001 height: 8px;
2002 }
2003
2004 .merchant-module-deactivate {
2005 display: none;
2006 }
2007
2008 .merchant-module-action {
2009 position: relative;
2010 }
2011
2012 .merchant-module-action.merchant-enabled .merchant-module-activate {
2013 display: none;
2014 }
2015
2016 .merchant-module-action.merchant-enabled .merchant-module-deactivate {
2017 display: block;
2018 }
2019
2020 .merchant-module-deactivate-dropdown {
2021 cursor: pointer;
2022 position: absolute;
2023 top: 100%;
2024 left: 0;
2025 padding: 5px;
2026 white-space: nowrap;
2027 border-radius: 8px;
2028 background-color: #fff;
2029 font-size: 14px;
2030 line-height: 16px;
2031 margin: 0;
2032 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2033 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2034 opacity: 0;
2035 pointer-events: none;
2036 -webkit-transition: all .1s;
2037 transition: all .1s;
2038 }
2039
2040 .merchant-module-deactivate-dropdown.merchant-show {
2041 opacity: 1;
2042 pointer-events: auto;
2043 margin-top: 10px;
2044 }
2045
2046 .merchant-module-dropdown {
2047 position: absolute;
2048 overflow: hidden;
2049 top: 100%;
2050 left: 0;
2051 min-width: 275px;
2052 white-space: nowrap;
2053 border-radius: 8px;
2054 background-color: #fff;
2055 font-size: 13px;
2056 line-height: 14px;
2057 margin: 0;
2058 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2059 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2060 opacity: 0;
2061 pointer-events: none;
2062 -webkit-transition: all .1s;
2063 transition: all .1s;
2064 }
2065
2066 .merchant-module-dropdown.merchant-show {
2067 opacity: 1;
2068 pointer-events: auto;
2069 margin-top: 10px;
2070 }
2071
2072 .merchant-module-dropdown ul {
2073 margin: 0;
2074 padding: 0;
2075 list-style: none;
2076 display: -webkit-box;
2077 display: -ms-flexbox;
2078 display: flex;
2079 -webkit-box-orient: vertical;
2080 -webkit-box-direction: normal;
2081 -ms-flex-direction: column;
2082 flex-direction: column;
2083 }
2084
2085 .merchant-module-dropdown ul li {
2086 cursor: pointer;
2087 position: relative;
2088 margin: 0;
2089 padding: 0;
2090 display: -webkit-box;
2091 display: -ms-flexbox;
2092 display: flex;
2093 -webkit-box-align: center;
2094 -ms-flex-align: center;
2095 align-items: center;
2096 -webkit-box-pack: justify;
2097 -ms-flex-pack: justify;
2098 justify-content: space-between;
2099 white-space: nowrap;
2100 padding: 15px 15px 0 15px;
2101 color: #202223;
2102 -webkit-transition: all .2s;
2103 transition: all .2s;
2104 }
2105
2106 .merchant-module-dropdown ul li:before {
2107 content: "";
2108 position: absolute;
2109 z-index: 1;
2110 top: 0;
2111 left: 0;
2112 bottom: 0;
2113 width: 0;
2114 opacity: 0;
2115 -webkit-transition: all .2s;
2116 transition: all .2s;
2117 background-color: #3858E9;
2118 }
2119
2120 .merchant-module-dropdown ul li:hover {
2121 background-color: #F2F7FE;
2122 }
2123
2124 .merchant-module-dropdown ul li:hover:before {
2125 opacity: 1;
2126 width: 3px;
2127 }
2128
2129 .merchant-module-dropdown ul li span {
2130 width: 100%;
2131 padding-bottom: 15px;
2132 border-bottom: 1px solid #eee;
2133 }
2134
2135 .merchant-module-dropdown ul li:last-child span {
2136 border-bottom: none;
2137 }
2138
2139 .merchant-module-dropdown-close {
2140 cursor: pointer;
2141 }
2142
2143 .merchant-module-question-title {
2144 display: -webkit-box;
2145 display: -ms-flexbox;
2146 display: flex;
2147 grid-gap: 15px;
2148 -webkit-box-align: center;
2149 -ms-flex-align: center;
2150 align-items: center;
2151 -webkit-box-pack: justify;
2152 -ms-flex-pack: justify;
2153 justify-content: space-between;
2154 white-space: nowrap;
2155 padding: 15px 15px 5px 15px;
2156 font-size: 14px;
2157 line-height: 16px;
2158 color: #202223;
2159 font-weight: 500;
2160 }
2161
2162 .merchant-module-question-title i {
2163 width: auto;
2164 height: auto;
2165 font-size: 24px;
2166 line-height: 1;
2167 }
2168
2169 .merchant-module-question-answer-title {
2170 display: none;
2171 grid-gap: 15px;
2172 -webkit-box-align: center;
2173 -ms-flex-align: center;
2174 align-items: center;
2175 -webkit-box-pack: justify;
2176 -ms-flex-pack: justify;
2177 justify-content: space-between;
2178 white-space: nowrap;
2179 padding: 15px;
2180 font-size: 14px;
2181 line-height: 16px;
2182 color: #202223;
2183 font-weight: 500;
2184 }
2185
2186 .merchant-module-question-answer-title i {
2187 width: auto;
2188 height: auto;
2189 font-size: 20px;
2190 line-height: 1;
2191 }
2192
2193 .merchant-module-question-answer-title.merchant-show {
2194 display: -webkit-box;
2195 display: -ms-flexbox;
2196 display: flex;
2197 }
2198
2199 .merchant-module-question-answer-form {
2200 padding: 5px 15px 15px 15px;
2201 display: -webkit-box;
2202 display: -ms-flexbox;
2203 display: flex;
2204 grid-gap: 10px;
2205 -webkit-box-orient: vertical;
2206 -webkit-box-direction: normal;
2207 -ms-flex-direction: column;
2208 flex-direction: column;
2209 }
2210
2211 .merchant-module-question-answer-form textarea {
2212 width: 100%;
2213 height: 100px;
2214 padding: 12px;
2215 line-height: 1em;
2216 width: 100%;
2217 max-width: 100%;
2218 min-height: auto;
2219 border: 1px solid #D6D6D6;
2220 }
2221
2222 .merchant-module-question-answer-form textarea:focus {
2223 outline: none;
2224 -webkit-box-shadow: none;
2225 box-shadow: none;
2226 border-color: #3858E9;
2227 }
2228
2229 .merchant-module-question-answer-form button {
2230 -ms-flex-item-align: end;
2231 align-self: flex-end;
2232 padding: 8px 10px;
2233 font-size: 13px;
2234 font-weight: 400;
2235 }
2236
2237 .merchant-module-question-answer-thank-you-text {
2238 padding: 5px 15px 15px 15px;
2239 }
2240
2241 .merchant-module-question-thank-you-dropdown .merchant-module-question-answer-title {
2242 display: -webkit-box;
2243 display: -ms-flexbox;
2244 display: flex;
2245 }
2246
2247 .merchant-module-page-button-action-deactivate {
2248 border-radius: 8px;
2249 padding: 12px 16px;
2250 display: -webkit-box;
2251 display: -ms-flexbox;
2252 display: flex;
2253 justify-items: center;
2254 -webkit-box-align: center;
2255 -ms-flex-align: center;
2256 align-items: center;
2257 text-decoration: none;
2258 color: #d82c0d;
2259 }
2260
2261 .merchant-module-page-button-action-deactivate:hover {
2262 background-color: #fff4f4;
2263 }
2264
2265 .merchant-module-page-button-deactivate {
2266 color: #3858E9;
2267 border-color: #3858E9;
2268 background-color: transparent;
2269 }
2270
2271 .merchant-module-page-button-deactivate:focus, .merchant-module-page-button-deactivate:hover {
2272 color: #3858E9;
2273 }
2274
2275 .merchant-module-page-button-deactivate.merchant-show .merchant-module-deactivate-dropdown {
2276 pointer-events: auto;
2277 }
2278
2279 .merchant-module-page-actions-links {
2280 display: -webkit-box;
2281 display: -ms-flexbox;
2282 display: flex;
2283 }
2284
2285 .merchant-module-page-link {
2286 display: -webkit-box;
2287 display: -ms-flexbox;
2288 display: flex;
2289 grid-gap: 5px;
2290 -webkit-box-pack: center;
2291 -ms-flex-pack: center;
2292 justify-content: center;
2293 -webkit-box-align: center;
2294 -ms-flex-align: center;
2295 align-items: center;
2296 padding: 10px;
2297 font-size: 13px;
2298 font-weight: 500;
2299 text-decoration: none;
2300 color: #3858E9;
2301 }
2302
2303 .merchant-module-page-link span {
2304 text-decoration: underline;
2305 }
2306
2307 .merchant-module-page-link:focus, .merchant-module-page-link:hover {
2308 outline: none;
2309 -webkit-box-shadow: none;
2310 box-shadow: none;
2311 color: #3858E9;
2312 }
2313
2314 body.merchant-module-disabled .merchant-module-page-link-preview {
2315 pointer-events: none;
2316 color: #CCC;
2317 }
2318
2319 body.merchant-module-disabled .merchant-module-page-link-preview span {
2320 text-decoration: none;
2321 }
2322
2323 body.merchant-module-disabled .merchant-module-page-link-preview svg path {
2324 fill: #CCC;
2325 }
2326
2327 .merchant-module-page-ajax-header {
2328 display: -webkit-box;
2329 display: -ms-flexbox;
2330 display: flex;
2331 -webkit-box-pack: justify;
2332 -ms-flex-pack: justify;
2333 justify-content: space-between;
2334 -webkit-box-align: center;
2335 -ms-flex-align: center;
2336 align-items: center;
2337 position: fixed;
2338 z-index: 10000;
2339 overflow: hidden;
2340 padding-left: 20px;
2341 padding-right: 20px;
2342 top: 32px;
2343 left: 160px;
2344 right: 0;
2345 height: 56px;
2346 opacity: 0;
2347 pointer-events: none;
2348 background-color: #1d2327;
2349 -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2350 transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2351 }
2352
2353 .merchant-module-page-ajax-header.merchant-show {
2354 opacity: 1;
2355 pointer-events: auto;
2356 }
2357
2358 .merchant-module-page-ajax-header.merchant-saving {
2359 -webkit-user-select: none;
2360 -moz-user-select: none;
2361 -ms-user-select: none;
2362 user-select: none;
2363 }
2364
2365 .merchant-module-page-ajax-header.merchant-saving i {
2366 opacity: 1;
2367 }
2368
2369 .merchant-module-page-ajax-header.merchant-saving span {
2370 opacity: 0;
2371 }
2372
2373 .merchant-module-page-ajax-header.merchant-saving .merchant-module-page-ajax-buttons {
2374 -webkit-user-select: none;
2375 -moz-user-select: none;
2376 -ms-user-select: none;
2377 user-select: none;
2378 pointer-events: none;
2379 }
2380
2381 .merchant-module-page-ajax-notice {
2382 font-size: 14px;
2383 font-weight: 500;
2384 color: #e3e5e7;
2385 }
2386
2387 .merchant-module-page-ajax-buttons {
2388 display: -webkit-box;
2389 display: -ms-flexbox;
2390 display: flex;
2391 -webkit-box-align: center;
2392 -ms-flex-align: center;
2393 align-items: center;
2394 grid-gap: 15px;
2395 }
2396
2397 .merchant-module-save-button {
2398 position: relative;
2399 cursor: pointer;
2400 display: -webkit-box;
2401 display: -ms-flexbox;
2402 display: flex;
2403 -webkit-box-pack: center;
2404 -ms-flex-pack: center;
2405 justify-content: center;
2406 -webkit-box-align: center;
2407 -ms-flex-align: center;
2408 align-items: center;
2409 font-size: 14px;
2410 line-height: 16px;
2411 border: 0;
2412 border-radius: 4px;
2413 min-width: 60px;
2414 min-height: 36px;
2415 padding-left: 16px;
2416 padding-right: 16px;
2417 color: #fff;
2418 background-color: #3858E9;
2419 }
2420
2421 .merchant-module-save-button i {
2422 position: absolute;
2423 width: auto;
2424 height: auto;
2425 font-size: 20px;
2426 opacity: 0;
2427 -webkit-animation: merchant-spin 1.5s infinite linear;
2428 animation: merchant-spin 1.5s infinite linear;
2429 }
2430
2431 @-webkit-keyframes merchant-spin {
2432 0% {
2433 -webkit-transform: rotate(0deg);
2434 transform: rotate(0deg);
2435 }
2436 100% {
2437 -webkit-transform: rotate(359deg);
2438 transform: rotate(359deg);
2439 }
2440 }
2441
2442 @keyframes merchant-spin {
2443 0% {
2444 -webkit-transform: rotate(0deg);
2445 transform: rotate(0deg);
2446 }
2447 100% {
2448 -webkit-transform: rotate(359deg);
2449 transform: rotate(359deg);
2450 }
2451 }
2452
2453 .merchant-module-discard-button {
2454 cursor: pointer;
2455 display: -webkit-box;
2456 display: -ms-flexbox;
2457 display: flex;
2458 -webkit-box-pack: center;
2459 -ms-flex-pack: center;
2460 justify-content: center;
2461 -webkit-box-align: center;
2462 -ms-flex-align: center;
2463 align-items: center;
2464 font-size: 14px;
2465 line-height: 16px;
2466 min-width: 36px;
2467 min-height: 36px;
2468 color: #fff;
2469 text-decoration: none;
2470 }
2471
2472 .merchant-module-discard-button:hover {
2473 color: #fff;
2474 opacity: 0.75;
2475 }
2476
2477 .merchant-module-discard-button:focus {
2478 outline: none;
2479 -webkit-box-shadow: none;
2480 box-shadow: none;
2481 }
2482
2483 .merchant-module-page-preview-browser-top {
2484 background: #323232;
2485 display: -webkit-box;
2486 display: -ms-flexbox;
2487 display: flex;
2488 -webkit-box-align: center;
2489 -ms-flex-align: center;
2490 align-items: center;
2491 height: 45px;
2492 padding-left: 9px;
2493 }
2494
2495 .merchant-module-page-preview-browser-top-circle {
2496 background: #616161;
2497 width: 12px;
2498 height: 12px;
2499 border-radius: 50%;
2500 display: block;
2501 margin-left: 7px;
2502 }
2503
2504 .merchant-module-page-preview-browser {
2505 border-top-left-radius: 5px;
2506 border-top-right-radius: 5px;
2507 overflow: hidden;
2508 -webkit-box-shadow: 0 0 50px #0000001f;
2509 box-shadow: 0 0 50px #0000001f;
2510 margin-bottom: -29px;
2511 display: -webkit-box;
2512 display: -ms-flexbox;
2513 display: flex;
2514 -webkit-box-orient: vertical;
2515 -webkit-box-direction: normal;
2516 -ms-flex-direction: column;
2517 flex-direction: column;
2518 }
2519
2520 .merchant-module-page-preview-browser-inner {
2521 -webkit-box-flex: 1;
2522 -ms-flex-positive: 1;
2523 flex-grow: 1;
2524 position: relative;
2525 display: block;
2526 }
2527
2528 .merchant-module-page-preview-box {
2529 overflow: hidden;
2530 position: sticky;
2531 top: 45px;
2532 }
2533
2534 .merchant-module-page-settings,
2535 .merchant-module-page-preview-box {
2536 display: -webkit-box;
2537 display: -ms-flexbox;
2538 display: flex;
2539 grid-gap: 30px;
2540 -webkit-box-orient: vertical;
2541 -webkit-box-direction: normal;
2542 -ms-flex-direction: column;
2543 flex-direction: column;
2544 padding: 30px;
2545 background-color: #fff;
2546 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2547 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2548 border-radius: 4px;
2549 }
2550
2551 .merchant-module-page-setting-box {
2552 display: -webkit-box;
2553 display: -ms-flexbox;
2554 display: flex;
2555 }
2556
2557 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 {
2558 -webkit-box-orient: vertical;
2559 -webkit-box-direction: normal;
2560 -ms-flex-direction: column;
2561 flex-direction: column;
2562 grid-gap: 20px;
2563 }
2564
2565 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-title,
2566 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-fields {
2567 width: 100%;
2568 }
2569
2570 .merchant-module-page-preview-title,
2571 .merchant-module-page-setting-title {
2572 margin-top: 10px;
2573 padding-right: 50px;
2574 font-size: 20px;
2575 font-weight: 500;
2576 color: #2F2F2F;
2577 }
2578
2579 .merchant-module-page-setting-title {
2580 width: 40%;
2581 }
2582
2583 .merchant-module-page-setting-subtitle {
2584 margin-top: 20px;
2585 font-size: 13px;
2586 font-weight: 400;
2587 color: #757575;
2588 }
2589
2590 .merchant-module-page-setting-fields {
2591 display: -webkit-box;
2592 display: -ms-flexbox;
2593 display: flex;
2594 grid-gap: 24px;
2595 -webkit-box-orient: vertical;
2596 -webkit-box-direction: normal;
2597 -ms-flex-direction: column;
2598 flex-direction: column;
2599 width: 60%;
2600 padding: 30px;
2601 border-radius: 4px;
2602 border: 2px solid #F0F0F1;
2603 background-color: #fff;
2604 }
2605
2606 .merchant-module-page-setting-field {
2607 display: -webkit-box;
2608 display: -ms-flexbox;
2609 display: flex;
2610 grid-gap: 10px;
2611 -webkit-box-orient: vertical;
2612 -webkit-box-direction: normal;
2613 -ms-flex-direction: column;
2614 flex-direction: column;
2615 }
2616
2617 .merchant-module-page-setting-field.merchant-show {
2618 display: -webkit-box;
2619 display: -ms-flexbox;
2620 display: flex;
2621 }
2622
2623 .merchant-module-page-setting-field.merchant-hide {
2624 display: none;
2625 }
2626
2627 .merchant-module-page-setting-field-title {
2628 font-size: 14px;
2629 font-weight: 500;
2630 color: #2F2F2F;
2631 }
2632
2633 .merchant-module-page-setting-field-desc {
2634 font-size: 13px;
2635 font-weight: 400;
2636 color: #777;
2637 }
2638
2639 .merchant-module-page-setting-field-desc a {
2640 color: #3858E9;
2641 }
2642
2643 .merchant-module-page-setting-field-desc a:focus {
2644 -webkit-box-shadow: none;
2645 box-shadow: none;
2646 }
2647
2648 .merchant-license-form-wrapper .merchant-license-form {
2649 display: -webkit-box;
2650 display: -ms-flexbox;
2651 display: flex;
2652 -ms-flex-wrap: wrap;
2653 flex-wrap: wrap;
2654 grid-gap: 10px;
2655 }
2656
2657 .merchant-license-form-wrapper .merchant-license-form input {
2658 width: 400px;
2659 max-width: 100%;
2660 padding-left: 36px;
2661 min-height: 36px;
2662 }
2663
2664 .merchant-license-form-wrapper .merchant-license-form input::-webkit-input-placeholder {
2665 opacity: 0.75;
2666 }
2667
2668 .merchant-license-form-wrapper .merchant-license-form input::-moz-placeholder {
2669 opacity: 0.75;
2670 }
2671
2672 .merchant-license-form-wrapper .merchant-license-form input:-ms-input-placeholder {
2673 opacity: 0.75;
2674 }
2675
2676 .merchant-license-form-wrapper .merchant-license-form input::-ms-input-placeholder {
2677 opacity: 0.75;
2678 }
2679
2680 .merchant-license-form-wrapper .merchant-license-form input::placeholder {
2681 opacity: 0.75;
2682 }
2683
2684 .merchant-license-form-wrapper .merchant-license-form button {
2685 position: relative;
2686 display: -webkit-box;
2687 display: -ms-flexbox;
2688 display: flex;
2689 grid-gap: 2px;
2690 -webkit-box-align: center;
2691 -ms-flex-align: center;
2692 align-items: center;
2693 line-height: 1em;
2694 min-height: 36px;
2695 padding: 10px 40px !important;
2696 background-color: transparent;
2697 color: #3858E9;
2698 border-color: #3858E9;
2699 }
2700
2701 .merchant-license-form-wrapper .merchant-license-form button:hover, .merchant-license-form-wrapper .merchant-license-form button:focus, .merchant-license-form-wrapper .merchant-license-form button:active {
2702 color: #FFF;
2703 background-color: #3452da;
2704 border-color: #3452da;
2705 }
2706
2707 .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate {
2708 color: #d82c0d;
2709 border-color: #d82c0d;
2710 }
2711
2712 .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate:hover, .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate:focus, .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate:active {
2713 color: #FFF;
2714 background-color: #d82c0d;
2715 border-color: #d82c0d;
2716 }
2717
2718 .merchant-license-form-wrapper .merchant-license-key-input {
2719 position: relative;
2720 display: -webkit-box;
2721 display: -ms-flexbox;
2722 display: flex;
2723 }
2724
2725 .merchant-license-form-wrapper .merchant-license-key-input i {
2726 position: absolute;
2727 z-index: 1;
2728 top: 50%;
2729 left: 10px;
2730 -webkit-transform: translateY(-50%);
2731 transform: translateY(-50%);
2732 margin-top: -1px;
2733 font-size: 20px !important;
2734 color: #5C5F62;
2735 }
2736
2737 .mechant-license-response-wrapper,
2738 .merchant-dashboard-license-success {
2739 display: block;
2740 margin-top: 10px;
2741 color: #757575;
2742 }
2743
2744 .mechant-license-response-wrapper span,
2745 .merchant-dashboard-license-success span {
2746 margin-left: 5px;
2747 }
2748
2749 .merchant-module-page-setting-field-text input,
2750 .merchant-module-page-setting-field-number input,
2751 .merchant-module-page-setting-field-text_readonly input {
2752 padding: 12px;
2753 line-height: 1.3em;
2754 width: 100%;
2755 max-width: 100%;
2756 min-height: auto;
2757 border: 1px solid #D6D6D6;
2758 }
2759
2760 .merchant-module-page-setting-field-text input:focus,
2761 .merchant-module-page-setting-field-number input:focus,
2762 .merchant-module-page-setting-field-text_readonly input:focus {
2763 outline: none;
2764 -webkit-box-shadow: none;
2765 box-shadow: none;
2766 border-color: #3858E9;
2767 }
2768
2769 .merchant-module-page-setting-field-textarea textarea,
2770 .merchant-module-page-setting-field-textarea_code textarea {
2771 padding: 12px;
2772 line-height: 1em;
2773 width: 100%;
2774 max-width: 100%;
2775 min-height: 120px;
2776 border: 1px solid #D6D6D6;
2777 }
2778
2779 .merchant-module-page-setting-field-textarea textarea:focus,
2780 .merchant-module-page-setting-field-textarea_code textarea:focus {
2781 outline: none;
2782 -webkit-box-shadow: none;
2783 box-shadow: none;
2784 border-color: #3858E9;
2785 }
2786
2787 .merchant-code-snippets-textarea textarea,
2788 .merchant-code-snippets-textarea_code textarea {
2789 min-height: 200px;
2790 }
2791
2792 .merchant-module-page-setting-field-radio div,
2793 .merchant-module-page-setting-field-radio_alt div,
2794 .merchant-module-page-setting-field-checkbox div {
2795 display: -webkit-box;
2796 display: -ms-flexbox;
2797 display: flex;
2798 grid-gap: 30px;
2799 }
2800
2801 .merchant-module-page-setting-field-radio label,
2802 .merchant-module-page-setting-field-radio_alt label,
2803 .merchant-module-page-setting-field-checkbox label {
2804 display: -webkit-box;
2805 display: -ms-flexbox;
2806 display: flex;
2807 grid-gap: 12px;
2808 -webkit-box-align: center;
2809 -ms-flex-align: center;
2810 align-items: center;
2811 -webkit-user-select: none;
2812 -moz-user-select: none;
2813 -ms-user-select: none;
2814 user-select: none;
2815 }
2816
2817 .merchant-module-page-setting-field-radio span,
2818 .merchant-module-page-setting-field-radio_alt span,
2819 .merchant-module-page-setting-field-checkbox span {
2820 font-size: 14px;
2821 font-weight: 400;
2822 color: #1D2327;
2823 }
2824
2825 .merchant-module-page-setting-field-radio input,
2826 .merchant-module-page-setting-field-radio_alt input,
2827 .merchant-module-page-setting-field-checkbox input {
2828 -ms-flex-negative: 0;
2829 flex-shrink: 0;
2830 margin: 0;
2831 width: 20px;
2832 height: 20px;
2833 border: 1px solid #D6D6D6;
2834 background-color: #fff;
2835 display: -webkit-inline-box;
2836 display: -ms-inline-flexbox;
2837 display: inline-flex;
2838 -webkit-box-align: center;
2839 -ms-flex-align: center;
2840 align-items: center;
2841 -webkit-box-pack: center;
2842 -ms-flex-pack: center;
2843 justify-content: center;
2844 -webkit-transition: none;
2845 transition: none;
2846 -webkit-box-sizing: border-box;
2847 box-sizing: border-box;
2848 -webkit-box-shadow: none;
2849 box-shadow: none;
2850 }
2851
2852 .merchant-module-page-setting-field-radio input:checked,
2853 .merchant-module-page-setting-field-radio_alt input:checked,
2854 .merchant-module-page-setting-field-checkbox input:checked {
2855 -webkit-transition: none;
2856 transition: none;
2857 }
2858
2859 .merchant-module-page-setting-field-radio input:checked::before,
2860 .merchant-module-page-setting-field-radio_alt input:checked::before,
2861 .merchant-module-page-setting-field-checkbox input:checked::before {
2862 content: "";
2863 margin: 0;
2864 padding: 0;
2865 -webkit-box-sizing: border-box;
2866 box-sizing: border-box;
2867 -webkit-transition: none;
2868 transition: none;
2869 }
2870
2871 .merchant-module-page-setting-field-radio input[type=checkbox],
2872 .merchant-module-page-setting-field-radio_alt input[type=checkbox],
2873 .merchant-module-page-setting-field-checkbox input[type=checkbox] {
2874 border-radius: 6px;
2875 }
2876
2877 .merchant-module-page-setting-field-radio input[type=checkbox]:focus,
2878 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus,
2879 .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus {
2880 border-color: #fff;
2881 -webkit-box-shadow: 0 0 0 2px #3858E9;
2882 box-shadow: 0 0 0 2px #3858E9;
2883 }
2884
2885 .merchant-module-page-setting-field-radio input[type=checkbox]:checked,
2886 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked,
2887 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked {
2888 border-color: #fff;
2889 background-color: #3858E9;
2890 }
2891
2892 .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before,
2893 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before,
2894 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before {
2895 width: 100%;
2896 height: 100%;
2897 background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.7.89-6 8.07-3.77-2.8.75-1L4.44 7.2 9.69.14l1 .75Z' fill='%23fff'/%3E%3C/svg%3E");
2898 background-repeat: no-repeat;
2899 background-position: 3px 4px;
2900 }
2901
2902 .merchant-module-page-setting-field-radio input[type=radio],
2903 .merchant-module-page-setting-field-radio_alt input[type=radio],
2904 .merchant-module-page-setting-field-checkbox input[type=radio] {
2905 border-radius: 100%;
2906 }
2907
2908 .merchant-module-page-setting-field-radio input[type=radio]:focus,
2909 .merchant-module-page-setting-field-radio_alt input[type=radio]:focus,
2910 .merchant-module-page-setting-field-checkbox input[type=radio]:focus {
2911 border-color: #fff;
2912 -webkit-box-shadow: none;
2913 box-shadow: none;
2914 }
2915
2916 .merchant-module-page-setting-field-radio input[type=radio]:checked,
2917 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked,
2918 .merchant-module-page-setting-field-checkbox input[type=radio]:checked {
2919 border-color: #3858E9;
2920 background-color: #fff;
2921 -webkit-box-shadow: 0 0 0 1px #3858E9;
2922 box-shadow: 0 0 0 1px #3858E9;
2923 }
2924
2925 .merchant-module-page-setting-field-radio input[type=radio]:checked::before,
2926 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before,
2927 .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before {
2928 width: 12px;
2929 height: 12px;
2930 border-radius: 12px;
2931 background-color: #3858E9;
2932 }
2933
2934 @media (max-width: 1300px) {
2935 .merchant-module-page-setting-field-radio div {
2936 grid-gap: 20px;
2937 }
2938 }
2939
2940 .merchant-module-page-setting-field-radio span {
2941 opacity: 0.80;
2942 }
2943
2944 .merchant-module-page-setting-field-radio input[type=radio]:checked + span {
2945 opacity: 1;
2946 }
2947
2948 .merchant-module-page-setting-field-radio_alt div {
2949 display: -webkit-box;
2950 display: -ms-flexbox;
2951 display: flex;
2952 grid-gap: 10px;
2953 -webkit-box-orient: vertical;
2954 -webkit-box-direction: normal;
2955 -ms-flex-direction: column;
2956 flex-direction: column;
2957 }
2958
2959 .merchant-module-page-setting-field-radio_alt label span {
2960 font-size: 14px;
2961 font-weight: 400;
2962 color: #1D2327;
2963 }
2964
2965 .merchant-module-page-setting-field-radio_alt p {
2966 margin: 0;
2967 color: #757575;
2968 }
2969
2970 .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner {
2971 grid-gap: 30px;
2972 -webkit-box-orient: vertical;
2973 -webkit-box-direction: normal;
2974 -ms-flex-direction: column;
2975 flex-direction: column;
2976 }
2977
2978 .merchant-module-page-setting-field-content {
2979 max-width: 60vw;
2980 }
2981
2982 .merchant-module-page-setting-field-content a {
2983 color: #3858E9;
2984 }
2985
2986 .merchant-module-page-setting-field-content a:focus {
2987 -webkit-box-shadow: none;
2988 box-shadow: none;
2989 }
2990
2991 .merchant-tag-pre-orders {
2992 display: -webkit-box;
2993 display: -ms-flexbox;
2994 display: flex;
2995 grid-gap: 16px;
2996 }
2997
2998 .merchant-tag-pre-orders a {
2999 display: -webkit-box;
3000 display: -ms-flexbox;
3001 display: flex;
3002 -webkit-box-align: center;
3003 -ms-flex-align: center;
3004 align-items: center;
3005 -webkit-box-pack: center;
3006 -ms-flex-pack: center;
3007 justify-content: center;
3008 margin: 0;
3009 padding: 8px 26px;
3010 font-size: 14px;
3011 line-height: 20px;
3012 -webkit-user-select: none;
3013 -moz-user-select: none;
3014 -ms-user-select: none;
3015 user-select: none;
3016 min-width: 145px;
3017 font-weight: 500;
3018 text-decoration: none;
3019 border-radius: 4px;
3020 color: #202223;
3021 border: 1px solid #C9CCCF;
3022 background-color: #fff;
3023 }
3024
3025 .merchant-tag-pre-orders a:focus, .merchant-tag-pre-orders a:active {
3026 outline: none;
3027 -webkit-box-shadow: none;
3028 box-shadow: none;
3029 }
3030
3031 .merchant-tag-pre-orders p {
3032 display: -webkit-box;
3033 display: -ms-flexbox;
3034 display: flex;
3035 -webkit-box-orient: vertical;
3036 -webkit-box-direction: normal;
3037 -ms-flex-direction: column;
3038 flex-direction: column;
3039 -webkit-box-align: start;
3040 -ms-flex-align: start;
3041 align-items: flex-start;
3042 grid-gap: 16px;
3043 font-size: 14px;
3044 line-height: 20px;
3045 margin: 0;
3046 padding: 0;
3047 }
3048
3049 .merchant-tag-pre-orders p i {
3050 -ms-flex-negative: 0;
3051 flex-shrink: 0;
3052 }
3053
3054 .merchant-module-page-setting-field-select select,
3055 .merchant-module-page-setting-field-select_ajax select,
3056 .merchant-module-page-setting-field-select_size_chart select {
3057 padding: 12px 20px 12px 12px;
3058 line-height: 1.3em;
3059 width: 100%;
3060 max-width: 100%;
3061 min-height: auto;
3062 border-radius: 6px;
3063 color: #2F2F2F;
3064 border: 1px solid #D6D6D6;
3065 }
3066
3067 .merchant-module-page-setting-field-select select:hover,
3068 .merchant-module-page-setting-field-select_ajax select:hover,
3069 .merchant-module-page-setting-field-select_size_chart select:hover {
3070 color: #2F2F2F;
3071 }
3072
3073 .merchant-module-page-setting-field-select select:focus,
3074 .merchant-module-page-setting-field-select_ajax select:focus,
3075 .merchant-module-page-setting-field-select_size_chart select:focus {
3076 outline: none;
3077 -webkit-box-shadow: none;
3078 box-shadow: none;
3079 border-color: #3858E9;
3080 }
3081
3082 .merchant-module-page-setting-field-select select option,
3083 .merchant-module-page-setting-field-select_ajax select option,
3084 .merchant-module-page-setting-field-select_size_chart select option {
3085 color: #2F2F2F;
3086 }
3087
3088 .merchant-module-page-setting-field-select .select2-container .select2-selection--single,
3089 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single,
3090 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single {
3091 height: 44px !important;
3092 }
3093
3094 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
3095 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
3096 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
3097 line-height: 41px !important;
3098 }
3099
3100 .merchant-module-page-setting-field-select .select2-selection__arrow,
3101 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
3102 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
3103 height: 43px !important;
3104 }
3105
3106 .merchant-module-page-setting-field-choices input {
3107 display: none;
3108 }
3109
3110 .merchant-module-page-setting-field-choices input:checked + figure {
3111 border-color: #3858E9;
3112 }
3113
3114 .merchant-module-page-setting-field-choices label {
3115 display: -webkit-box;
3116 display: -ms-flexbox;
3117 display: flex;
3118 position: relative;
3119 }
3120
3121 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
3122 opacity: 1;
3123 visibility: visible;
3124 -webkit-transform: translate3d(-50%, 0, 0);
3125 transform: translate3d(-50%, 0, 0);
3126 }
3127
3128 .merchant-module-page-setting-field-choices figure {
3129 display: -webkit-box;
3130 display: -ms-flexbox;
3131 display: flex;
3132 margin: 0;
3133 padding: 2px;
3134 border-radius: 4px;
3135 border: 2px solid transparent;
3136 }
3137
3138 .merchant-module-page-setting-field-choices .merchant-tooltip {
3139 position: absolute;
3140 z-index: 10;
3141 left: 50%;
3142 bottom: calc(100% + 12px);
3143 padding: 3px 12px;
3144 font-size: 11px;
3145 white-space: nowrap;
3146 opacity: 0;
3147 visibility: hidden;
3148 -webkit-transform: translate3d(-50%, 6px, 0);
3149 transform: translate3d(-50%, 6px, 0);
3150 -webkit-transition: all .2s;
3151 transition: all .2s;
3152 border-radius: 3px;
3153 color: #f7f7f7;
3154 background-color: #212121;
3155 }
3156
3157 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
3158 content: '';
3159 position: absolute;
3160 left: 50%;
3161 bottom: -12px;
3162 border: 6px solid transparent;
3163 border-top-color: #212121;
3164 -webkit-transform: translate3d(-50%, 0, 0);
3165 transform: translate3d(-50%, 0, 0);
3166 }
3167
3168 .merchant-module-page-setting-field-choices .merchant-choices {
3169 display: -webkit-box;
3170 display: -ms-flexbox;
3171 display: flex;
3172 grid-gap: 10px;
3173 }
3174
3175 .merchant-module-page-setting-field-choices .merchant-choices svg {
3176 width: 20px;
3177 height: 20px;
3178 }
3179
3180 .merchant-module-page-setting-field-buttons input {
3181 display: none;
3182 }
3183
3184 .merchant-module-page-setting-field-buttons input:checked + span {
3185 color: #fff;
3186 background-color: #3858E9;
3187 }
3188
3189 .merchant-module-page-setting-field-buttons label {
3190 display: -webkit-box;
3191 display: -ms-flexbox;
3192 display: flex;
3193 }
3194
3195 .merchant-module-page-setting-field-buttons span {
3196 display: -webkit-box;
3197 display: -ms-flexbox;
3198 display: flex;
3199 -webkit-box-align: center;
3200 -ms-flex-align: center;
3201 align-items: center;
3202 -webkit-box-pack: center;
3203 -ms-flex-pack: center;
3204 justify-content: center;
3205 margin: 0;
3206 padding: 10px 15px;
3207 border-radius: 2px;
3208 -webkit-user-select: none;
3209 -moz-user-select: none;
3210 -ms-user-select: none;
3211 user-select: none;
3212 min-width: 120px;
3213 font-weight: 500;
3214 }
3215
3216 .merchant-module-page-setting-field-buttons .merchant-buttons {
3217 display: -webkit-inline-box;
3218 display: -ms-inline-flexbox;
3219 display: inline-flex;
3220 padding: 3px;
3221 border: 1px solid #D6D6D6;
3222 border-radius: 4px;
3223 }
3224
3225 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
3226 text-decoration: underline;
3227 }
3228
3229 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
3230 text-decoration: line-through;
3231 }
3232
3233 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
3234 text-decoration: overline;
3235 }
3236
3237 .merchant-module-page-setting-field-buttons_alt input {
3238 display: none;
3239 }
3240
3241 .merchant-module-page-setting-field-buttons_alt input:checked + span {
3242 color: #fff;
3243 background-color: #3858E9;
3244 }
3245
3246 .merchant-module-page-setting-field-buttons_alt label {
3247 display: -webkit-box;
3248 display: -ms-flexbox;
3249 display: flex;
3250 }
3251
3252 .merchant-module-page-setting-field-buttons_alt label:hover {
3253 position: relative;
3254 z-index: 10;
3255 }
3256
3257 .merchant-module-page-setting-field-buttons_alt span {
3258 display: -webkit-box;
3259 display: -ms-flexbox;
3260 display: flex;
3261 -webkit-box-align: center;
3262 -ms-flex-align: center;
3263 align-items: center;
3264 -webkit-box-pack: center;
3265 -ms-flex-pack: center;
3266 justify-content: center;
3267 margin: 0;
3268 padding: 10px 15px;
3269 border-radius: 2px;
3270 -webkit-user-select: none;
3271 -moz-user-select: none;
3272 -ms-user-select: none;
3273 user-select: none;
3274 min-width: 120px;
3275 font-weight: 500;
3276 border-radius: 4px;
3277 border: 1px solid #D6D6D6;
3278 background-color: #fff;
3279 }
3280
3281 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
3282 display: -webkit-box;
3283 display: -ms-flexbox;
3284 display: flex;
3285 -ms-flex-wrap: wrap;
3286 flex-wrap: wrap;
3287 grid-gap: 5px;
3288 padding: 3px;
3289 }
3290
3291 .merchant-animated-buttons .merchant-buttons {
3292 display: grid;
3293 grid-template-columns: repeat(5, 1fr);
3294 }
3295
3296 .merchant-animated-buttons span {
3297 width: 100%;
3298 }
3299
3300 @media (max-width: 1470px) {
3301 .merchant-animated-buttons .merchant-buttons {
3302 grid-template-columns: repeat(3, 1fr);
3303 }
3304 }
3305
3306 @media (max-width: 1050px) {
3307 .merchant-animated-buttons .merchant-buttons {
3308 grid-template-columns: repeat(2, 1fr);
3309 }
3310 }
3311
3312 /* Sortable Field */
3313 .merchant-sortable {
3314 max-width: 300px;
3315 }
3316
3317 .merchant-sortable ul.ui-sortable li {
3318 position: relative;
3319 overflow: hidden;
3320 padding: 0;
3321 color: #1E1E1E;
3322 border: 1px solid #ddd;
3323 border-radius: 2px;
3324 text-transform: capitalize;
3325 line-height: 36px;
3326 cursor: -webkit-grab;
3327 cursor: grab;
3328 }
3329
3330 .merchant-sortable ul.ui-sortable li .dashicons {
3331 width: 36px;
3332 height: 36px;
3333 -ms-flex-preferred-size: 36px;
3334 flex-basis: 36px;
3335 display: -webkit-box;
3336 display: -ms-flexbox;
3337 display: flex;
3338 -webkit-box-pack: center;
3339 -ms-flex-pack: center;
3340 justify-content: center;
3341 -webkit-box-align: center;
3342 -ms-flex-align: center;
3343 align-items: center;
3344 text-align: center;
3345 -webkit-box-sizing: border-box;
3346 box-sizing: border-box;
3347 }
3348
3349 .merchant-sortable ul.ui-sortable li .dashicons:before {
3350 font-size: 16px;
3351 line-height: 1em;
3352 }
3353
3354 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
3355 float: left;
3356 padding: 0;
3357 margin: 0 10px 0 0;
3358 border: none;
3359 border-right: 1px solid #ddd;
3360 }
3361
3362 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
3363 float: right;
3364 color: #3858E9;
3365 padding: 0;
3366 margin: 0 0 0 10px;
3367 border: none;
3368 border-left: 1px solid #ddd;
3369 }
3370
3371 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
3372 cursor: pointer;
3373 }
3374
3375 .merchant-sortable ul.ui-sortable li.invisible {
3376 color: #6E7780;
3377 border: 1px solid #CAD2F6;
3378 background-color: #EBEEFB;
3379 }
3380
3381 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
3382 content: "\f530";
3383 }
3384
3385 /* Sortable Repeater Field */
3386 .merchant-module-page-setting-field-flexible_content .merchant-module-page-setting-field-title {
3387 margin-bottom: 10px;
3388 }
3389
3390 .merchant-sortable-repeater-control {
3391 max-width: 100%;
3392 }
3393
3394 .merchant-sortable-repeater-control .sortable {
3395 list-style-type: none;
3396 margin: 0;
3397 padding: 0;
3398 }
3399
3400 .merchant-sortable-repeater-control .sortable input[type="text"] {
3401 width: 100%;
3402 margin: 0;
3403 border-radius: 4px 0 0 4px;
3404 border: 1px solid #D6D6D6;
3405 padding: 12px;
3406 line-height: 1.3em;
3407 }
3408
3409 .merchant-sortable-repeater-control .sortable input[type="text"]:focus {
3410 border-color: #3858E9;
3411 outline: none;
3412 -webkit-box-shadow: none;
3413 box-shadow: none;
3414 }
3415
3416 .merchant-sortable-repeater-control .sortable div {
3417 cursor: -webkit-grab;
3418 cursor: grab;
3419 margin-bottom: 7px;
3420 }
3421
3422 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete {
3423 display: -webkit-box;
3424 display: -ms-flexbox;
3425 display: flex;
3426 -webkit-box-align: center;
3427 -ms-flex-align: center;
3428 align-items: center;
3429 -webkit-box-pack: center;
3430 -ms-flex-pack: center;
3431 justify-content: center;
3432 margin: 0;
3433 width: 44px;
3434 height: auto;
3435 font-size: 1.3em;
3436 line-height: 34px;
3437 color: #d4d4d4;
3438 background: #fff;
3439 padding: 0;
3440 vertical-align: top;
3441 margin-left: -1px;
3442 border: 1px solid #D6D6D6;
3443 text-decoration: none;
3444 }
3445
3446 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt {
3447 width: 100%;
3448 text-decoration: none;
3449 margin: 0;
3450 font-weight: 600;
3451 color: #50575e;
3452 font-size: 1.1em;
3453 line-height: 34px;
3454 height: auto;
3455 }
3456
3457 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus {
3458 outline: none;
3459 -webkit-box-shadow: none;
3460 box-shadow: none;
3461 }
3462
3463 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover .dashicons-no-alt, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus .dashicons-no-alt {
3464 color: #a7a7a7;
3465 }
3466
3467 .merchant-sortable-repeater-control .repeater {
3468 display: -webkit-box;
3469 display: -ms-flexbox;
3470 display: flex;
3471 }
3472
3473 .merchant-sortable-repeater-control .repeater .dashicons-menu {
3474 display: -webkit-box;
3475 display: -ms-flexbox;
3476 display: flex;
3477 -webkit-box-align: center;
3478 -ms-flex-align: center;
3479 align-items: center;
3480 -webkit-box-pack: center;
3481 -ms-flex-pack: center;
3482 justify-content: center;
3483 margin: 0;
3484 width: 44px;
3485 height: auto;
3486 font-size: 1.3em;
3487 line-height: 34px;
3488 background: #fff;
3489 padding: 0;
3490 vertical-align: top;
3491 margin-left: -1px;
3492 border: 1px solid #D6D6D6;
3493 }
3494
3495 .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
3496 color: #a7a7a7;
3497 }
3498
3499 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add {
3500 color: #3858E9;
3501 border-color: #3858E9;
3502 background-color: transparent;
3503 margin-top: 10px;
3504 padding: 4px 19px;
3505 }
3506
3507 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus {
3508 outline: none;
3509 -webkit-box-shadow: none;
3510 box-shadow: none;
3511 background-color: #ffffff;
3512 }
3513
3514 .merchant-sortable-repeater-control.disable-sorting .dashicons-menu {
3515 display: none;
3516 }
3517
3518 /* Flexible Content Field */
3519 .merchant-flexible-content-control {
3520 max-width: 100%;
3521 }
3522
3523 .merchant-flexible-content-control .sortable {
3524 list-style-type: none;
3525 margin: 0;
3526 padding: 0;
3527 }
3528
3529 .merchant-flexible-content-control .sortable input[type="text"] {
3530 width: 100%;
3531 margin: 0;
3532 border-radius: 4px 0 0 4px;
3533 border: 1px solid #D6D6D6;
3534 padding: 12px;
3535 line-height: 1.3em;
3536 }
3537
3538 .merchant-flexible-content-control .sortable input[type="text"]:focus {
3539 border-color: #3858E9;
3540 outline: none;
3541 -webkit-box-shadow: none;
3542 box-shadow: none;
3543 }
3544
3545 .merchant-flexible-content-control .customize-control-flexible-content-move {
3546 cursor: -webkit-grab;
3547 cursor: grab;
3548 }
3549
3550 .merchant-flexible-content-control .customize-control-flexible-content-delete {
3551 display: -webkit-box;
3552 display: -ms-flexbox;
3553 display: flex;
3554 -webkit-box-align: center;
3555 -ms-flex-align: center;
3556 align-items: center;
3557 -webkit-box-pack: center;
3558 -ms-flex-pack: center;
3559 justify-content: center;
3560 margin: 0;
3561 width: 40px;
3562 height: auto;
3563 font-size: 1.3em;
3564 line-height: 34px;
3565 color: #d4d4d4;
3566 background: #fff;
3567 padding: 0;
3568 vertical-align: top;
3569 margin-left: -1px;
3570 text-decoration: none;
3571 }
3572
3573 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt {
3574 width: 100%;
3575 text-decoration: none;
3576 margin: 0;
3577 font-weight: 600;
3578 color: #50575e;
3579 font-size: 1.1em;
3580 line-height: 34px;
3581 height: auto;
3582 }
3583
3584 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus {
3585 outline: none;
3586 -webkit-box-shadow: none;
3587 box-shadow: none;
3588 }
3589
3590 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover .dashicons-no-alt, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus .dashicons-no-alt {
3591 color: #a7a7a7;
3592 }
3593
3594 .merchant-flexible-content-control .merchant-flexible-content.empty {
3595 border: 2px dashed #dcdcde;
3596 min-height: 100px;
3597 margin-bottom: 10px;
3598 }
3599
3600 .merchant-flexible-content-control.default-style .layout {
3601 background: white;
3602 border: 1px solid #c3c4c7;
3603 border-left: 3px solid #3858e9;
3604 }
3605
3606 .merchant-flexible-content-control.default-style .layout .layout-header {
3607 padding: 8px 15px;
3608 }
3609
3610 .merchant-flexible-content-control.default-style .layout .layout-body {
3611 padding: 15px;
3612 }
3613
3614 .merchant-flexible-content-control.table-style .layout .layout-header {
3615 padding-bottom: 8px;
3616 margin-bottom: 15px;
3617 }
3618
3619 .merchant-flexible-content-control.table-style .layout .layout-body {
3620 -webkit-box-orient: horizontal;
3621 -webkit-box-direction: normal;
3622 -ms-flex-direction: row;
3623 flex-direction: row;
3624 }
3625
3626 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
3627 display: none;
3628 }
3629
3630 .merchant-flexible-content-control .layouts {
3631 display: none;
3632 }
3633
3634 .merchant-flexible-content-control .layout {
3635 margin-bottom: 20px;
3636 }
3637
3638 .merchant-flexible-content-control .layout .layout-header {
3639 display: -webkit-box;
3640 display: -ms-flexbox;
3641 display: flex;
3642 -webkit-box-align: center;
3643 -ms-flex-align: center;
3644 align-items: center;
3645 border-bottom: 1px solid #f3f3f3;
3646 }
3647
3648 .merchant-flexible-content-control .layout .layout-count {
3649 border-radius: 50%;
3650 width: 24px;
3651 height: 23px;
3652 border: 1px solid #949494;
3653 text-align: center;
3654 display: -webkit-box;
3655 display: -ms-flexbox;
3656 display: flex;
3657 -webkit-box-pack: center;
3658 -ms-flex-pack: center;
3659 justify-content: center;
3660 -webkit-box-orient: vertical;
3661 -webkit-box-direction: normal;
3662 -ms-flex-direction: column;
3663 flex-direction: column;
3664 font-size: 12px;
3665 font-weight: bold;
3666 margin-right: 10px;
3667 }
3668
3669 .merchant-flexible-content-control .layout .layout-title {
3670 font-size: 14px;
3671 font-weight: bold;
3672 }
3673
3674 .merchant-flexible-content-control .layout .layout-actions {
3675 display: -webkit-box;
3676 display: -ms-flexbox;
3677 display: flex;
3678 margin: 0;
3679 padding: 0;
3680 -webkit-box-pack: end;
3681 -ms-flex-pack: end;
3682 justify-content: flex-end;
3683 -webkit-box-flex: 1;
3684 -ms-flex-positive: 1;
3685 flex-grow: 1;
3686 }
3687
3688 .merchant-flexible-content-control .layout .layout-body {
3689 display: -webkit-box;
3690 display: -ms-flexbox;
3691 display: flex;
3692 -webkit-box-orient: vertical;
3693 -webkit-box-direction: normal;
3694 -ms-flex-direction: column;
3695 flex-direction: column;
3696 grid-gap: 20px;
3697 }
3698
3699 .merchant-flexible-content-control .layout .layout-field.flex-grow {
3700 -webkit-box-flex: 1;
3701 -ms-flex-positive: 1;
3702 flex-grow: 1;
3703 }
3704
3705 .merchant-flexible-content-control .layout .dashicons-menu {
3706 display: -webkit-box;
3707 display: -ms-flexbox;
3708 display: flex;
3709 -webkit-box-align: center;
3710 -ms-flex-align: center;
3711 align-items: center;
3712 -webkit-box-pack: center;
3713 -ms-flex-pack: center;
3714 justify-content: center;
3715 margin: 0;
3716 width: 40px;
3717 height: auto;
3718 font-size: 1.3em;
3719 line-height: 34px;
3720 background: #fff;
3721 padding: 0;
3722 vertical-align: top;
3723 margin-left: -1px;
3724 }
3725
3726 .merchant-flexible-content-control .layout .dashicons-menu:hover {
3727 color: #a7a7a7;
3728 }
3729
3730 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
3731 position: relative;
3732 display: inline-block;
3733 }
3734
3735 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
3736 opacity: 0;
3737 visibility: hidden;
3738 position: absolute;
3739 background-color: #ffffff;
3740 border: 1px solid #c3c4c7;
3741 border-left: 3px solid #3858e9;
3742 -webkit-box-shadow: 0 2px 10px 0 #0000001a;
3743 box-shadow: 0 2px 10px 0 #0000001a;
3744 width: 180px;
3745 bottom: 100%;
3746 display: -webkit-box;
3747 display: -ms-flexbox;
3748 display: flex;
3749 -webkit-box-orient: vertical;
3750 -webkit-box-direction: normal;
3751 -ms-flex-direction: column;
3752 flex-direction: column;
3753 left: 50%;
3754 -webkit-transform: translate(-50%, 10px);
3755 transform: translate(-50%, 10px);
3756 padding: 3px 3px 3px 5px;
3757 }
3758
3759 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
3760 z-index: 10;
3761 opacity: 1;
3762 visibility: visible;
3763 -webkit-transform: translate(-50%, -15px);
3764 transform: translate(-50%, -15px);
3765 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3766 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3767 }
3768
3769 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
3770 right: calc(50% - 12px);
3771 bottom: -14px;
3772 border-width: 14px 14px 0 15px;
3773 border-color: #c3c4c7 transparent transparent transparent;
3774 }
3775
3776 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3777 content: "";
3778 right: calc(50% - 10px);
3779 bottom: -12px;
3780 border-width: 12px 12px 0 13px;
3781 border-color: #ffffff transparent transparent transparent;
3782 }
3783
3784 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3785 position: absolute;
3786 z-index: -1;
3787 content: "";
3788 border-style: solid;
3789 -webkit-transition-duration: 0.3s;
3790 transition-duration: 0.3s;
3791 transition-property: -webkit-transform;
3792 -webkit-transition-property: -webkit-transform;
3793 transition-property: transform;
3794 transition-property: transform, -webkit-transform;
3795 }
3796
3797 .merchant-flexible-content-control .customize-control-flexible-content-add {
3798 display: block;
3799 -ms-flex-negative: 0;
3800 flex-shrink: 0;
3801 padding: 10px;
3802 text-decoration: none;
3803 }
3804
3805 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
3806 background: #f0f0f1;
3807 }
3808
3809 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
3810 color: #3858E9;
3811 border-color: #3858E9;
3812 background-color: transparent;
3813 margin-top: 10px;
3814 padding: 4px 19px;
3815 }
3816
3817 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
3818 outline: none;
3819 -webkit-box-shadow: none;
3820 box-shadow: none;
3821 background-color: #ffffff;
3822 }
3823
3824 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
3825 display: none;
3826 }
3827
3828 .flexible-content-template {
3829 display: none;
3830 }
3831
3832 .merchant-module-page-setting-field-range .merchant-range {
3833 position: relative;
3834 width: 100%;
3835 width: 300px;
3836 display: -webkit-box;
3837 display: -ms-flexbox;
3838 display: flex;
3839 -webkit-box-align: center;
3840 -ms-flex-align: center;
3841 align-items: center;
3842 -webkit-box-pack: justify;
3843 -ms-flex-pack: justify;
3844 justify-content: space-between;
3845 }
3846
3847 .merchant-module-page-setting-field-range input[type="range"] {
3848 -webkit-appearance: none;
3849 -moz-appearance: none;
3850 appearance: none;
3851 width: calc(100% - 105px);
3852 height: 2px;
3853 border-radius: 5px;
3854 outline: none;
3855 padding: 0;
3856 margin: 0;
3857 background-color: #ddd;
3858 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
3859 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
3860 }
3861
3862 .merchant-module-page-setting-field-range input[type="range"]::-webkit-slider-thumb {
3863 -webkit-appearance: none;
3864 appearance: none;
3865 width: 15px;
3866 height: 15px;
3867 border-radius: 50%;
3868 background: #3858E9;
3869 cursor: pointer;
3870 -webkit-transition: background 0.15s ease-in-out;
3871 transition: background 0.15s ease-in-out;
3872 }
3873
3874 .merchant-module-page-setting-field-range input[type="range"]::-webkit-slider-thumb:hover {
3875 background: #3858E9;
3876 }
3877
3878 .merchant-module-page-setting-field-range input[type="range"]:active::-webkit-slider-thumb {
3879 background: #3858E9;
3880 }
3881
3882 .merchant-module-page-setting-field-range input[type="range"]::-moz-range-thumb {
3883 width: 15px;
3884 height: 15px;
3885 border: 0;
3886 border-radius: 50%;
3887 background: #3858E9;
3888 cursor: pointer;
3889 -moz-transition: background 0.15s ease-in-out;
3890 transition: background 0.15s ease-in-out;
3891 }
3892
3893 .merchant-module-page-setting-field-range input[type="range"]::-moz-range-thumb:hover {
3894 background: #3858E9;
3895 }
3896
3897 .merchant-module-page-setting-field-range input[type="range"]:active::-moz-range-thumb {
3898 background: #3858E9;
3899 }
3900
3901 .merchant-module-page-setting-field-range input[type="range"]:focus::-webkit-slider-thumb {
3902 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3903 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3904 }
3905
3906 .merchant-module-page-setting-field-range input[type="range"]::-moz-range-track {
3907 border: 0;
3908 background: #d7dcdf;
3909 }
3910
3911 .merchant-module-page-setting-field-range input[type="number"] {
3912 padding: 12px 25px 12px 10px;
3913 line-height: 1.3em;
3914 width: 100%;
3915 max-width: 85px;
3916 min-height: auto;
3917 border: 1px solid #D6D6D6;
3918 }
3919
3920 .merchant-module-page-setting-field-range input[type="number"]:focus {
3921 outline: none;
3922 -webkit-box-shadow: none;
3923 box-shadow: none;
3924 border-color: #3858E9;
3925 }
3926
3927 .merchant-module-page-setting-field-range .merchant-range-unit {
3928 color: #3858E9;
3929 position: absolute;
3930 z-index: 1;
3931 right: 10px;
3932 font-size: 11px;
3933 line-height: 1em;
3934 }
3935
3936 .merchant-module-page-setting-field-color input {
3937 padding: 0 10px;
3938 line-height: 1em;
3939 width: 100%;
3940 max-width: 254px;
3941 min-height: auto;
3942 border: 1px solid #D6D6D6;
3943 }
3944
3945 .merchant-module-page-setting-field-color input:focus {
3946 outline: none;
3947 -webkit-box-shadow: none;
3948 box-shadow: none;
3949 border-color: #3858E9;
3950 }
3951
3952 .merchant-module-page-setting-field-color .merchant-color {
3953 display: -webkit-box;
3954 display: -ms-flexbox;
3955 display: flex;
3956 grid-gap: 10px;
3957 }
3958
3959 .merchant-module-page-setting-field-color .merchant-color-picker {
3960 cursor: pointer;
3961 width: 36px;
3962 height: 36px;
3963 border: 1px solid rgba(0, 0, 0, 0.1);
3964 border-radius: 4px;
3965 }
3966
3967 .merchant-module-page-settings-dimensions {
3968 display: -webkit-box;
3969 display: -ms-flexbox;
3970 display: flex;
3971 grid-gap: 10px;
3972 }
3973
3974 .merchant-module-page-settings-dimensions > div {
3975 display: -webkit-box;
3976 display: -ms-flexbox;
3977 display: flex;
3978 -webkit-box-orient: vertical;
3979 -webkit-box-direction: normal;
3980 -ms-flex-direction: column;
3981 flex-direction: column;
3982 }
3983
3984 .merchant-module-page-settings-dimensions label {
3985 color: gray;
3986 font-size: 12px;
3987 margin-top: 7px;
3988 }
3989
3990 .merchant-module-page-settings-dimensions input {
3991 max-width: 70px;
3992 width: 100%;
3993 font-size: 12px;
3994 border: 1px solid #D6D6D6;
3995 }
3996
3997 .merchant-module-page-settings-unit {
3998 margin-bottom: 10px;
3999 }
4000
4001 .merchant-module-page-settings-unit select {
4002 font-size: 13px;
4003 border: 0;
4004 }
4005
4006 .merchant-module-page-settings-devices {
4007 display: -webkit-box;
4008 display: -ms-flexbox;
4009 display: flex;
4010 -webkit-column-gap: 10px;
4011 -moz-column-gap: 10px;
4012 column-gap: 10px;
4013 -webkit-box-pack: end;
4014 -ms-flex-pack: end;
4015 justify-content: flex-end;
4016 }
4017
4018 .merchant-module-page-settings-devices button {
4019 border: 0;
4020 background: transparent;
4021 padding: 0;
4022 cursor: pointer;
4023 }
4024
4025 .merchant-module-page-settings-devices button.active {
4026 color: #3858e9;
4027 }
4028
4029 .merchant-module-page-settings-devices button:hover {
4030 color: #3858e9;
4031 }
4032
4033 .merchant-module-page-settings-devices button i {
4034 font-size: 14px;
4035 line-height: 20px;
4036 width: auto;
4037 }
4038
4039 .merchant-module-page-settings-device-container:not(.active) {
4040 display: none;
4041 }
4042
4043 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
4044 max-width: 320px;
4045 }
4046
4047 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
4048 margin-bottom: -30px;
4049 margin-top: 0;
4050 }
4051
4052 .merchant-module-page-setting-field-warning {
4053 padding: 8px 10px;
4054 font-size: 14px;
4055 line-height: 1.6;
4056 color: #1D2327;
4057 border-radius: 4px;
4058 border: 1px solid #D72C0D;
4059 background-color: #FFF4F4;
4060 }
4061
4062 .merchant-module-page-setting-field-divider {
4063 border-bottom: 1px solid #F0F0F1;
4064 }
4065
4066 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
4067 font-size: 16px;
4068 }
4069
4070 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
4071 display: -webkit-box;
4072 display: -ms-flexbox;
4073 display: flex;
4074 grid-gap: 5px;
4075 -ms-flex-wrap: wrap;
4076 flex-wrap: wrap;
4077 margin-bottom: 15px;
4078 }
4079
4080 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
4081 display: none;
4082 }
4083
4084 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
4085 position: relative;
4086 display: -webkit-box;
4087 display: -ms-flexbox;
4088 display: flex;
4089 -webkit-box-align: center;
4090 -ms-flex-align: center;
4091 align-items: center;
4092 -webkit-box-pack: center;
4093 -ms-flex-pack: center;
4094 justify-content: center;
4095 border-radius: 4px;
4096 padding: 2px;
4097 border: 1px solid #eee;
4098 background-color: #fff;
4099 }
4100
4101 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
4102 cursor: -webkit-grab;
4103 cursor: grab;
4104 width: 100%;
4105 height: 100%;
4106 max-height: 75px;
4107 -o-object-fit: cover;
4108 object-fit: cover;
4109 }
4110
4111 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
4112 cursor: -webkit-grabbing;
4113 cursor: grabbing;
4114 }
4115
4116 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
4117 cursor: pointer;
4118 position: absolute;
4119 z-index: 1;
4120 top: 5px;
4121 right: 5px;
4122 width: 16px;
4123 height: 16px;
4124 display: -webkit-box;
4125 display: -ms-flexbox;
4126 display: flex;
4127 -webkit-box-pack: center;
4128 -ms-flex-pack: center;
4129 justify-content: center;
4130 -webkit-box-align: center;
4131 -ms-flex-align: center;
4132 align-items: center;
4133 color: #fff;
4134 background-color: #c5280c;
4135 font-size: 14px;
4136 line-height: 1em;
4137 border-radius: 16px;
4138 opacity: 0;
4139 -webkit-transition: all .2s;
4140 transition: all .2s;
4141 }
4142
4143 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
4144 opacity: 1;
4145 }
4146
4147 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
4148 cursor: pointer;
4149 -webkit-user-select: none;
4150 -moz-user-select: none;
4151 -ms-user-select: none;
4152 user-select: none;
4153 display: -webkit-inline-box;
4154 display: -ms-inline-flexbox;
4155 display: inline-flex;
4156 padding: 0.4375rem 1rem;
4157 font-size: .875rem;
4158 font-weight: 600;
4159 line-height: 1.5;
4160 white-space: nowrap;
4161 text-transform: none;
4162 text-decoration: none;
4163 color: #212b36;
4164 background-color: #fff;
4165 border: 1px solid #c4cdd5;
4166 border-radius: 0.25rem;
4167 -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
4168 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
4169 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
4170 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
4171 }
4172
4173 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
4174 outline: none;
4175 -webkit-box-shadow: none;
4176 box-shadow: none;
4177 }
4178
4179 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
4180 visibility: visible !important;
4181 border: 1px dashed #ddd;
4182 background-color: #f9f9f9;
4183 border-radius: 4px;
4184 }
4185
4186 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
4187 display: -webkit-box;
4188 display: -ms-flexbox;
4189 display: flex;
4190 grid-gap: 5px;
4191 -ms-flex-wrap: wrap;
4192 flex-wrap: wrap;
4193 margin-bottom: 15px;
4194 }
4195
4196 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
4197 display: none;
4198 }
4199
4200 .merchant-module-page-setting-field-upload .merchant-upload-image {
4201 position: relative;
4202 display: -webkit-box;
4203 display: -ms-flexbox;
4204 display: flex;
4205 -webkit-box-align: center;
4206 -ms-flex-align: center;
4207 align-items: center;
4208 -webkit-box-pack: center;
4209 -ms-flex-pack: center;
4210 justify-content: center;
4211 border-radius: 4px;
4212 padding: 2px;
4213 border: 1px solid #eee;
4214 background-color: #fff;
4215 }
4216
4217 .merchant-module-page-setting-field-upload .merchant-upload-image img {
4218 cursor: -webkit-grab;
4219 cursor: grab;
4220 width: 100%;
4221 height: 100%;
4222 max-height: 75px;
4223 -o-object-fit: cover;
4224 object-fit: cover;
4225 }
4226
4227 .merchant-module-page-setting-field-upload .merchant-upload-image i {
4228 cursor: pointer;
4229 position: absolute;
4230 z-index: 1;
4231 top: 5px;
4232 right: 5px;
4233 width: 16px;
4234 height: 16px;
4235 display: -webkit-box;
4236 display: -ms-flexbox;
4237 display: flex;
4238 -webkit-box-pack: center;
4239 -ms-flex-pack: center;
4240 justify-content: center;
4241 -webkit-box-align: center;
4242 -ms-flex-align: center;
4243 align-items: center;
4244 color: #fff;
4245 background-color: #c5280c;
4246 font-size: 14px;
4247 line-height: 1em;
4248 border-radius: 16px;
4249 opacity: 0;
4250 -webkit-transition: all .2s;
4251 transition: all .2s;
4252 }
4253
4254 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
4255 opacity: 1;
4256 }
4257
4258 .merchant-module-page-setting-field-upload .merchant-upload-button {
4259 cursor: pointer;
4260 -webkit-user-select: none;
4261 -moz-user-select: none;
4262 -ms-user-select: none;
4263 user-select: none;
4264 display: -webkit-inline-box;
4265 display: -ms-inline-flexbox;
4266 display: inline-flex;
4267 padding: 0.4375rem 1rem;
4268 font-size: .875rem;
4269 font-weight: 600;
4270 line-height: 1.5;
4271 white-space: nowrap;
4272 text-transform: none;
4273 text-decoration: none;
4274 color: #212b36;
4275 background-color: #fff;
4276 border: 1px solid #c4cdd5;
4277 border-radius: 0.25rem;
4278 -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
4279 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
4280 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
4281 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
4282 }
4283
4284 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
4285 outline: none;
4286 -webkit-box-shadow: none;
4287 box-shadow: none;
4288 }
4289
4290 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
4291 display: -webkit-box;
4292 display: -ms-flexbox;
4293 display: flex;
4294 -webkit-box-pack: start;
4295 -ms-flex-pack: start;
4296 justify-content: flex-start;
4297 }
4298
4299 .merchant-module-page-setting-field-switcher input {
4300 display: none;
4301 }
4302
4303 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
4304 margin-left: 0;
4305 background: #3858E9;
4306 }
4307
4308 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
4309 right: 1px;
4310 }
4311
4312 .merchant-module-page-setting-field-switcher .toggle-switch {
4313 float: right;
4314 position: relative;
4315 width: 36px;
4316 margin-top: 2px;
4317 -webkit-user-select: none;
4318 -moz-user-select: none;
4319 -ms-user-select: none;
4320 user-select: none;
4321 }
4322
4323 .merchant-module-page-setting-field-switcher .toggle-switch-label {
4324 position: relative;
4325 display: inline-block;
4326 overflow: hidden;
4327 cursor: pointer;
4328 border-radius: 20px;
4329 padding: 0;
4330 margin: 0;
4331 width: 36px;
4332 }
4333
4334 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
4335 display: block;
4336 width: 200%;
4337 margin-left: -100%;
4338 background: #c8c8c8;
4339 height: 18px;
4340 }
4341
4342 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
4343 display: block;
4344 width: 12px;
4345 height: 12px;
4346 margin: 3px;
4347 background-color: #fff;
4348 position: absolute;
4349 top: 0;
4350 bottom: 0;
4351 right: 18px;
4352 border-radius: 20px;
4353 -webkit-transition: all 0.1s ease-in 0s;
4354 transition: all 0.1s ease-in 0s;
4355 }
4356
4357 .merchant-module-alert {
4358 position: fixed;
4359 top: 0;
4360 left: 0;
4361 right: 0;
4362 bottom: 0;
4363 z-index: 99999;
4364 display: -webkit-box;
4365 display: -ms-flexbox;
4366 display: flex;
4367 -webkit-box-pack: center;
4368 -ms-flex-pack: center;
4369 justify-content: center;
4370 -webkit-box-align: center;
4371 -ms-flex-align: center;
4372 align-items: center;
4373 background-color: rgba(0, 0, 0, 0.6);
4374 opacity: 0;
4375 visibility: hidden;
4376 -webkit-user-select: none;
4377 -moz-user-select: none;
4378 -ms-user-select: none;
4379 user-select: none;
4380 pointer-events: none;
4381 -webkit-transition: all .2s;
4382 transition: all .2s;
4383 }
4384
4385 .merchant-module-alert.merchant-show {
4386 -webkit-user-select: auto;
4387 -moz-user-select: auto;
4388 -ms-user-select: auto;
4389 user-select: auto;
4390 pointer-events: auto;
4391 opacity: 1;
4392 visibility: visible;
4393 }
4394
4395 .merchant-module-alert-wrapper {
4396 display: -webkit-box;
4397 display: -ms-flexbox;
4398 display: flex;
4399 -webkit-box-orient: vertical;
4400 -webkit-box-direction: normal;
4401 -ms-flex-direction: column;
4402 flex-direction: column;
4403 width: 640px;
4404 max-width: 90%;
4405 border-radius: 4px;
4406 background-color: #fff;
4407 }
4408
4409 .merchant-module-alert-header {
4410 display: -webkit-box;
4411 display: -ms-flexbox;
4412 display: flex;
4413 -webkit-box-align: center;
4414 -ms-flex-align: center;
4415 align-items: center;
4416 -webkit-box-pack: justify;
4417 -ms-flex-pack: justify;
4418 justify-content: space-between;
4419 padding: 20px 30px;
4420 }
4421
4422 .merchant-module-alert-header strong {
4423 font-size: 18px;
4424 line-height: 1em;
4425 }
4426
4427 .merchant-module-alert-header a {
4428 position: relative;
4429 right: -5px;
4430 display: -webkit-box;
4431 display: -ms-flexbox;
4432 display: flex;
4433 color: #212121;
4434 text-decoration: none;
4435 -webkit-transition: all .2s;
4436 transition: all .2s;
4437 }
4438
4439 .merchant-module-alert-header a:hover {
4440 opacity: 0.6;
4441 }
4442
4443 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
4444 outline: none;
4445 -webkit-box-shadow: none;
4446 box-shadow: none;
4447 }
4448
4449 .merchant-module-alert-header i {
4450 font-size: 32px;
4451 line-height: 1em;
4452 width: auto;
4453 height: auto;
4454 }
4455
4456 .merchant-module-alert-content {
4457 display: -webkit-box;
4458 display: -ms-flexbox;
4459 display: flex;
4460 -webkit-box-orient: vertical;
4461 -webkit-box-direction: normal;
4462 -ms-flex-direction: column;
4463 flex-direction: column;
4464 grid-gap: 20px;
4465 padding: 0 30px 30px 30px;
4466 }
4467
4468 .merchant-module-alert-content p {
4469 margin: 0;
4470 padding: 0;
4471 font-size: 15px;
4472 font-weight: 500;
4473 color: #757575;
4474 }
4475
4476 .merchant-module-alert-content figure {
4477 display: -webkit-box;
4478 display: -ms-flexbox;
4479 display: flex;
4480 margin: 0;
4481 padding: 0;
4482 }
4483
4484 .merchant-module-alert-content img {
4485 max-width: 100%;
4486 }
4487
4488 .merchant-module-alert-footer {
4489 display: -webkit-box;
4490 display: -ms-flexbox;
4491 display: flex;
4492 -webkit-box-pack: end;
4493 -ms-flex-pack: end;
4494 justify-content: flex-end;
4495 padding: 30px;
4496 }
4497
4498 .merchant-module-alert-footer a {
4499 font-weight: bold;
4500 font-size: 14px;
4501 padding: 10px 15px;
4502 text-decoration: none;
4503 border-radius: 4px;
4504 color: #212121;
4505 border: 1px solid #e5e5e5;
4506 }
4507
4508 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
4509 outline: none;
4510 -webkit-box-shadow: none;
4511 box-shadow: none;
4512 }
4513
4514 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
4515 pointer-events: none;
4516 opacity: 0.8;
4517 }
4518
4519 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
4520 opacity: 0.5;
4521 }
4522
4523 .merchant-module-page-setting-field-inner.disabled .merchant-range {
4524 opacity: 0.5;
4525 }
4526
4527 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
4528 opacity: 0.5;
4529 }
4530
4531 /* Utils */
4532 .merchant-height-auto {
4533 height: auto;
4534 }
4535
4536 /* Admin Footer Text */
4537 .merchant-admin-page .merchant-admin-footer-text-link {
4538 display: inline-block;
4539 padding-right: 5px;
4540 color: #3858E9;
4541 }
4542
4543 .merchant-admin-page .merchant-admin-footer-text-link:hover, .merchant-admin-page .merchant-admin-footer-text-link:active, .merchant-admin-page .merchant-admin-footer-text-link:visited {
4544 color: #3858E9;
4545 }
4546
4547 .merchant-admin-page-module #wpfooter {
4548 display: none;
4549 }
4550
4551 .merchant-admin-page-module #wpbody-content {
4552 padding-bottom: 30px;
4553 }
4554
4555 .merchant-module-footer-text {
4556 display: -webkit-box;
4557 display: -ms-flexbox;
4558 display: flex;
4559 grid-gap: 5px;
4560 -webkit-box-pack: center;
4561 -ms-flex-pack: center;
4562 justify-content: center;
4563 text-align: center;
4564 margin-top: 37px;
4565 }
4566
4567 .merchant-module-footer-text i {
4568 color: #3858E9;
4569 }
4570
4571 /* Responsive */
4572 @media (max-width: 991px) {
4573 .merchant-wrap {
4574 display: -webkit-box;
4575 display: -ms-flexbox;
4576 display: flex;
4577 -webkit-box-orient: vertical;
4578 -webkit-box-direction: normal;
4579 -ms-flex-direction: column;
4580 flex-direction: column;
4581 grid-gap: 20px;
4582 }
4583 .merchant-modules-header-shortlinks {
4584 margin: 0;
4585 }
4586 .merchant-modules-header {
4587 -webkit-box-orient: vertical;
4588 -webkit-box-direction: normal;
4589 -ms-flex-direction: column;
4590 flex-direction: column;
4591 grid-gap: 20px;
4592 }
4593 .merchant-module-page-header-content {
4594 width: 100%;
4595 }
4596 .merchant-module-page-desc {
4597 max-width: none;
4598 }
4599 .merchant-module-page-header-placeholder {
4600 display: none;
4601 }
4602 .merchant-modules-header-image {
4603 display: none;
4604 }
4605 .merchant-modules-list {
4606 grid-template-columns: repeat(1, minmax(0, 1fr));
4607 }
4608 .merchant-modules-header-status {
4609 margin-bottom: 0;
4610 }
4611 .merchant-module-page-setting-box {
4612 -webkit-box-orient: vertical;
4613 -webkit-box-direction: normal;
4614 -ms-flex-direction: column;
4615 flex-direction: column;
4616 grid-gap: 20px;
4617 }
4618 .merchant-module-page-setting-title,
4619 .merchant-module-page-setting-fields {
4620 width: 100%;
4621 }
4622 .merchant-module-page-body {
4623 -webkit-box-orient: vertical;
4624 -webkit-box-direction: reverse;
4625 -ms-flex-direction: column-reverse;
4626 flex-direction: column-reverse;
4627 }
4628 .merchant-module-page-content {
4629 width: 100%;
4630 }
4631 .merchant-module-page-preview {
4632 margin-left: 0;
4633 margin-bottom: 20px;
4634 width: 100%;
4635 }
4636 }
4637