PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 1.7
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v1.7
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 1.9.12 All 59 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.7, at assets/css/admin/admin.css

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