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

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

4,305 lines 117.2 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-admin-hand-icon {
1292 width: 24px;
1293 height: auto;
1294 margin-left: 7px;
1295 position: relative;
1296 top: 2px;
1297 }
1298
1299 .merchant-modules-header-heading {
1300 font-size: 24px;
1301 line-height: 34px;
1302 font-weight: 500;
1303 color: #101517;
1304 }
1305
1306 .merchant-modules-header-subheading {
1307 font-size: 16px;
1308 line-height: 1.35em;
1309 color: #7B7B7B;
1310 font-weight: 400;
1311 }
1312
1313 .merchant-modules-header-status {
1314 margin-top: 20px;
1315 margin-bottom: 40px;
1316 display: -webkit-box;
1317 display: -ms-flexbox;
1318 display: flex;
1319 grid-gap: 20px;
1320 }
1321
1322 .merchant-modules-header-status-box {
1323 min-width: 175px;
1324 display: -webkit-box;
1325 display: -ms-flexbox;
1326 display: flex;
1327 grid-gap: 10px;
1328 -webkit-box-orient: vertical;
1329 -webkit-box-direction: normal;
1330 -ms-flex-direction: column;
1331 flex-direction: column;
1332 -webkit-box-align: center;
1333 -ms-flex-align: center;
1334 align-items: center;
1335 padding: 20px;
1336 font-size: 14px;
1337 font-weight: 500;
1338 color: #101517;
1339 background-color: #fff;
1340 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1341 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1342 border-radius: 4px;
1343 }
1344 .merchant-modules-header-status-box span {
1345 display: -webkit-box;
1346 display: -ms-flexbox;
1347 display: flex;
1348 grid-gap: 5px;
1349 -webkit-box-align: center;
1350 -ms-flex-align: center;
1351 align-items: center;
1352 }
1353 .merchant-modules-header-status-box strong {
1354 color: #101517;
1355 font-size: 40px;
1356 line-height: 1em;
1357 }
1358
1359 .merchant-modules-header-image {
1360 height: 100%;
1361 display: -webkit-box;
1362 display: -ms-flexbox;
1363 display: flex;
1364 -webkit-box-pack: center;
1365 -ms-flex-pack: center;
1366 justify-content: center;
1367 -webkit-box-align: end;
1368 -ms-flex-align: end;
1369 align-items: flex-end;
1370 }
1371 .merchant-modules-header-image svg {
1372 width: 300px;
1373 }
1374 @media (max-width: 1400px) {
1375 .merchant-modules-header-image img {
1376 max-width: 450px;
1377 margin-top: 20px;
1378 }
1379 }
1380
1381 .merchant-modules-header-shortlinks {
1382 margin: 20px 0;
1383 padding: 0;
1384 list-style: none;
1385 display: -webkit-box;
1386 display: -ms-flexbox;
1387 display: flex;
1388 -webkit-box-orient: vertical;
1389 -webkit-box-direction: normal;
1390 -ms-flex-direction: column;
1391 flex-direction: column;
1392 border-radius: 4px;
1393 border: 2px solid #F0F0F1;
1394 background-color: #fff;
1395 border-radius: 4px;
1396 }
1397 .merchant-modules-header-shortlinks li {
1398 margin: 0 15px;
1399 border-bottom: 1px solid #EFEFEF;
1400 }
1401 .merchant-modules-header-shortlinks li:last-child {
1402 border-bottom: none;
1403 margin-bottom: 5px;
1404 }
1405 .merchant-modules-header-shortlinks li:first-child {
1406 margin-top: 5px;
1407 }
1408 .merchant-modules-header-shortlinks a {
1409 font-size: 14px;
1410 display: -webkit-box;
1411 display: -ms-flexbox;
1412 display: flex;
1413 grid-gap: 8px;
1414 -webkit-box-align: center;
1415 -ms-flex-align: center;
1416 align-items: center;
1417 -webkit-box-pack: justify;
1418 -ms-flex-pack: justify;
1419 justify-content: space-between;
1420 color: #757575;
1421 text-decoration: none;
1422 padding: 10px 0;
1423 }
1424 .merchant-modules-header-shortlinks a:focus {
1425 outline: none;
1426 -webkit-box-shadow: none;
1427 box-shadow: none;
1428 }
1429 .merchant-modules-header-shortlinks span {
1430 -webkit-box-flex: 1;
1431 -ms-flex: 1;
1432 flex: 1;
1433 }
1434 .merchant-modules-header-shortlinks strong {
1435 color: #101517;
1436 font-weight: 500;
1437 }
1438
1439 .merchant-modules-box {
1440 display: -webkit-box;
1441 display: -ms-flexbox;
1442 display: flex;
1443 grid-gap: 20px;
1444 -webkit-box-orient: vertical;
1445 -webkit-box-direction: normal;
1446 -ms-flex-direction: column;
1447 flex-direction: column;
1448 padding: 20px;
1449 background-color: #fff;
1450 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1451 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1452 border-radius: 4px;
1453 }
1454
1455 .merchant-modules-box-heading {
1456 font-size: 20px;
1457 font-weight: 500;
1458 line-height: 30px;
1459 color: #101517;
1460 }
1461
1462 .merchant-modules-list {
1463 display: grid;
1464 grid-template-columns: repeat(3, minmax(0, 1fr));
1465 grid-gap: 20px;
1466 }
1467
1468 .merchant-modules-list-item {
1469 position: relative;
1470 display: -webkit-box;
1471 display: -ms-flexbox;
1472 display: flex;
1473 grid-gap: 10px;
1474 padding: 20px;
1475 text-decoration: none;
1476 border: 2px solid #F0F0F1;
1477 background-color: #fff;
1478 border-radius: 4px;
1479 -webkit-transition: all 0.2s;
1480 transition: all 0.2s;
1481 }
1482 .merchant-modules-list-item.merchant-module-deactivated-by-bp {
1483 text-transform: uppsercase;
1484 }
1485 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-icon,
1486 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-content {
1487 opacity: 0.5;
1488 }
1489 .merchant-modules-list-item:hover {
1490 -webkit-box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
1491 box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
1492 }
1493 .merchant-modules-list-item:focus {
1494 outline: none;
1495 -webkit-box-shadow: none;
1496 box-shadow: none;
1497 }
1498
1499 .merchant-badge {
1500 color: #99A5B8;
1501 padding: 3px 6px;
1502 border: 1px solid #DFDFDF;
1503 border-radius: 2px;
1504 font-weight: 700;
1505 }
1506 .merchant-badge.merchant-badge-pro {
1507 color: #3858e9;
1508 border-color: #3858e9;
1509 }
1510
1511 .merchant-pro-badge.merchant-pro-tooltip {
1512 position: relative;
1513 }
1514 .merchant-pro-badge.merchant-pro-tooltip:before {
1515 content: attr(data-tooltip-message);
1516 position: absolute;
1517 right: -30px;
1518 bottom: calc(100% + 11px);
1519 color: #FFF;
1520 font-size: 11px;
1521 line-height: 16px;
1522 padding: 3px 6px;
1523 background-color: #1E1E1E;
1524 white-space: nowrap;
1525 opacity: 0;
1526 visibility: hidden;
1527 -webkit-transform: translate3d(0, 6px, 0);
1528 transform: translate3d(0, 6px, 0);
1529 -webkit-transition: ease opacity 300ms, ease transform 300ms;
1530 transition: ease opacity 300ms, ease transform 300ms;
1531 z-index: 2;
1532 }
1533 .merchant-pro-badge.merchant-pro-tooltip:after {
1534 content: "";
1535 position: absolute;
1536 bottom: calc(100% + 3px);
1537 right: 10px;
1538 width: 0;
1539 height: 0;
1540 border-style: solid;
1541 border-width: 4px 4px 4px 4px;
1542 border-color: #1E1E1E transparent transparent transparent;
1543 opacity: 0;
1544 visibility: hidden;
1545 -webkit-transform: translate3d(0, 6px, 0);
1546 transform: translate3d(0, 6px, 0);
1547 -webkit-transition: ease opacity 300ms, ease transform 300ms;
1548 transition: ease opacity 300ms, ease transform 300ms;
1549 z-index: 2;
1550 }
1551 .merchant-pro-badge.merchant-pro-tooltip:hover:before, .merchant-pro-badge.merchant-pro-tooltip:hover:after {
1552 opacity: 1;
1553 visibility: visible;
1554 -webkit-transform: translate3d(0, 0, 0);
1555 transform: translate3d(0, 0, 0);
1556 }
1557
1558 .merchant-modules-list-item-badge-wrapper {
1559 position: absolute;
1560 top: 20px;
1561 right: 20px;
1562 }
1563
1564 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge {
1565 padding: 3px 7px;
1566 color: #FFF;
1567 border: 1px solid #212121;
1568 background-color: #212121;
1569 border-radius: 3px;
1570 font-size: 10px;
1571 line-height: 1.2;
1572 font-weight: 400;
1573 display: -webkit-inline-box;
1574 display: -ms-inline-flexbox;
1575 display: inline-flex;
1576 top: -2px;
1577 text-transform: uppercase;
1578 }
1579 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge:before {
1580 font-weight: 400;
1581 text-transform: none;
1582 }
1583
1584 .merchant-modules-list-item-woo-required .merchant-pro-badge {
1585 padding: 1px 2px;
1586 color: #674399;
1587 border: 1px solid #674399;
1588 border-radius: 3px;
1589 font-size: 9px;
1590 line-height: 1.2;
1591 font-weight: 700;
1592 display: -webkit-inline-box;
1593 display: -ms-inline-flexbox;
1594 display: inline-flex;
1595 top: -2px;
1596 }
1597 .merchant-modules-list-item-woo-required .merchant-pro-badge:before {
1598 font-weight: 400;
1599 }
1600 .merchant-modules-list-item-woo-required + .merchant-modules-list-item-upsell {
1601 right: 53px;
1602 }
1603
1604 .merchant-modules-list-item-icon {
1605 display: -webkit-box;
1606 display: -ms-flexbox;
1607 display: flex;
1608 }
1609 .merchant-modules-list-item-icon svg {
1610 width: 18px;
1611 height: 26px;
1612 fill: #787C82;
1613 }
1614 .merchant-modules-list-item-icon svg.stroke-based {
1615 fill: none;
1616 stroke: #787C82;
1617 }
1618
1619 .merchant-modules-list-item-content {
1620 display: -webkit-box;
1621 display: -ms-flexbox;
1622 display: flex;
1623 grid-gap: 8px;
1624 -webkit-box-orient: vertical;
1625 -webkit-box-direction: normal;
1626 -ms-flex-direction: column;
1627 flex-direction: column;
1628 }
1629
1630 .merchant-modules-list-item-title {
1631 display: -webkit-box;
1632 display: -ms-flexbox;
1633 display: flex;
1634 -webkit-box-align: center;
1635 -ms-flex-align: center;
1636 align-items: center;
1637 grid-gap: 5px;
1638 font-size: 16px;
1639 line-height: 26px;
1640 font-weight: 500;
1641 color: #101517;
1642 }
1643
1644 .merchant-modules-indicator {
1645 width: 10px;
1646 height: 10px;
1647 border-radius: 10px;
1648 background-color: #3c8733;
1649 }
1650
1651 .merchant-modules-list-item-desc {
1652 color: #757575;
1653 font-size: 13px;
1654 line-height: 20px;
1655 max-width: 400px;
1656 }
1657
1658 .merchant-module-page {
1659 display: -webkit-box;
1660 display: -ms-flexbox;
1661 display: flex;
1662 }
1663
1664 .merchant-module-page-back a {
1665 display: -webkit-box;
1666 display: -ms-flexbox;
1667 display: flex;
1668 grid-gap: 5px;
1669 -webkit-box-align: center;
1670 -ms-flex-align: center;
1671 align-items: center;
1672 -webkit-transition: all 0.2s;
1673 transition: all 0.2s;
1674 text-decoration: none;
1675 color: #1D2327;
1676 font-weight: 500;
1677 }
1678 .merchant-module-page-back a:focus, .merchant-module-page-back a:active {
1679 -webkit-box-shadow: none;
1680 box-shadow: none;
1681 outline: none;
1682 }
1683
1684 .merchant-module-page-content {
1685 width: 50%;
1686 -webkit-box-flex: 1;
1687 -ms-flex: 1;
1688 flex: 1;
1689 display: -webkit-box;
1690 display: -ms-flexbox;
1691 display: flex;
1692 grid-gap: 20px;
1693 -webkit-box-orient: vertical;
1694 -webkit-box-direction: normal;
1695 -ms-flex-direction: column;
1696 flex-direction: column;
1697 }
1698
1699 .merchant-module-page-body {
1700 display: -webkit-box;
1701 display: -ms-flexbox;
1702 display: flex;
1703 }
1704
1705 .merchant-module-page-preview {
1706 width: 50%;
1707 margin-left: 20px;
1708 }
1709
1710 .merchant-module-page-body.has-preview .merchant-module-page-setting-box {
1711 -webkit-box-orient: vertical;
1712 -webkit-box-direction: normal;
1713 -ms-flex-direction: column;
1714 flex-direction: column;
1715 grid-gap: 20px;
1716 }
1717 .merchant-module-page-body.has-preview .merchant-module-page-setting-title,
1718 .merchant-module-page-body.has-preview .merchant-module-page-setting-fields {
1719 width: 100%;
1720 }
1721
1722 .merchant-module-page-ajax-form {
1723 -webkit-box-flex: 1;
1724 -ms-flex: 1;
1725 flex: 1;
1726 display: -webkit-box;
1727 display: -ms-flexbox;
1728 display: flex;
1729 grid-gap: 20px;
1730 -webkit-box-orient: vertical;
1731 -webkit-box-direction: normal;
1732 -ms-flex-direction: column;
1733 flex-direction: column;
1734 }
1735
1736 .merchant-module-page-header {
1737 display: -webkit-box;
1738 display: -ms-flexbox;
1739 display: flex;
1740 -webkit-box-align: center;
1741 -ms-flex-align: center;
1742 align-items: center;
1743 background-color: #fff;
1744 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1745 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1746 border-radius: 4px;
1747 }
1748
1749 .merchant-module-page-header-content {
1750 width: 100%;
1751 display: -webkit-box;
1752 display: -ms-flexbox;
1753 display: flex;
1754 grid-gap: 20px;
1755 -webkit-box-orient: vertical;
1756 -webkit-box-direction: normal;
1757 -ms-flex-direction: column;
1758 flex-direction: column;
1759 padding: 30px;
1760 }
1761
1762 .merchant-module-page-header-placeholder {
1763 width: 40%;
1764 display: -webkit-box;
1765 display: -ms-flexbox;
1766 display: flex;
1767 -ms-flex-item-align: end;
1768 align-self: flex-end;
1769 -webkit-box-pack: center;
1770 -ms-flex-pack: center;
1771 justify-content: center;
1772 margin: 40px 60px 0 60px;
1773 }
1774 .merchant-module-page-header-placeholder img {
1775 max-width: 100%;
1776 max-height: 300px;
1777 }
1778
1779 body.merchant-has-admin-preview .merchant-module-page-header-content {
1780 width: 100%;
1781 }
1782 body.merchant-has-admin-preview .merchant-module-page-header-placeholder {
1783 display: none;
1784 }
1785 body.merchant-has-admin-preview .merchant-module-page-desc {
1786 max-width: none;
1787 }
1788
1789 .merchant-module-page-heading {
1790 display: -webkit-box;
1791 display: -ms-flexbox;
1792 display: flex;
1793 grid-gap: 12px;
1794 }
1795
1796 .merchant-module-page-info {
1797 display: -webkit-box;
1798 display: -ms-flexbox;
1799 display: flex;
1800 grid-gap: 10px;
1801 -webkit-box-orient: vertical;
1802 -webkit-box-direction: normal;
1803 -ms-flex-direction: column;
1804 flex-direction: column;
1805 }
1806
1807 .merchant-module-page-title {
1808 font-size: 32px;
1809 line-height: 40px;
1810 font-weight: 500;
1811 color: #101517;
1812 display: -webkit-box;
1813 display: -ms-flexbox;
1814 display: flex;
1815 grid-gap: 15px;
1816 -webkit-box-align: center;
1817 -ms-flex-align: center;
1818 align-items: center;
1819 }
1820 .merchant-module-page-title svg {
1821 width: 28px;
1822 height: 28px;
1823 fill: #787C82;
1824 }
1825
1826 .merchant-module-page-desc {
1827 font-size: 18px;
1828 line-height: 28px;
1829 font-weight: normal;
1830 color: #757575;
1831 max-width: none;
1832 }
1833
1834 .merchant-module-page-actions {
1835 display: -webkit-box;
1836 display: -ms-flexbox;
1837 display: flex;
1838 grid-gap: 10px;
1839 -webkit-box-pack: justify;
1840 -ms-flex-pack: justify;
1841 justify-content: space-between;
1842 }
1843
1844 .merchant-module-page-actions-inner {
1845 display: -webkit-box;
1846 display: -ms-flexbox;
1847 display: flex;
1848 grid-gap: 15px;
1849 }
1850
1851 .merchant-module-page-button {
1852 cursor: pointer;
1853 display: -webkit-box;
1854 display: -ms-flexbox;
1855 display: flex;
1856 grid-gap: 7px;
1857 -webkit-box-pack: center;
1858 -ms-flex-pack: center;
1859 justify-content: center;
1860 -webkit-box-align: center;
1861 -ms-flex-align: center;
1862 align-items: center;
1863 padding: 14px 25px;
1864 font-size: 16px;
1865 line-height: 1em;
1866 font-weight: 500;
1867 -webkit-user-select: none;
1868 -moz-user-select: none;
1869 -ms-user-select: none;
1870 user-select: none;
1871 text-decoration: none;
1872 border-radius: 4px;
1873 border: none;
1874 color: #fff;
1875 border: 1px solid transparent;
1876 background-color: #3858E9;
1877 }
1878 .merchant-module-page-button:focus, .merchant-module-page-button:hover {
1879 outline: none;
1880 -webkit-box-shadow: none;
1881 box-shadow: none;
1882 color: #fff;
1883 }
1884 .merchant-module-page-button svg {
1885 width: 8px;
1886 height: 8px;
1887 }
1888
1889 .merchant-module-deactivate {
1890 display: none;
1891 }
1892
1893 .merchant-module-action {
1894 position: relative;
1895 }
1896 .merchant-module-action.merchant-enabled .merchant-module-activate {
1897 display: none;
1898 }
1899 .merchant-module-action.merchant-enabled .merchant-module-deactivate {
1900 display: block;
1901 }
1902
1903 .merchant-module-deactivate-dropdown {
1904 cursor: pointer;
1905 position: absolute;
1906 top: 100%;
1907 left: 0;
1908 padding: 5px;
1909 white-space: nowrap;
1910 border-radius: 8px;
1911 background-color: #fff;
1912 font-size: 14px;
1913 line-height: 16px;
1914 margin: 0;
1915 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1916 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1917 opacity: 0;
1918 pointer-events: none;
1919 -webkit-transition: all 0.1s;
1920 transition: all 0.1s;
1921 }
1922 .merchant-module-deactivate-dropdown.merchant-show {
1923 opacity: 1;
1924 pointer-events: auto;
1925 margin-top: 10px;
1926 }
1927
1928 .merchant-module-dropdown {
1929 position: absolute;
1930 overflow: hidden;
1931 top: 100%;
1932 left: 0;
1933 min-width: 275px;
1934 white-space: nowrap;
1935 border-radius: 8px;
1936 background-color: #fff;
1937 font-size: 13px;
1938 line-height: 14px;
1939 margin: 0;
1940 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1941 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1942 opacity: 0;
1943 pointer-events: none;
1944 -webkit-transition: all 0.1s;
1945 transition: all 0.1s;
1946 z-index: 1;
1947 }
1948 .merchant-module-dropdown.merchant-show {
1949 opacity: 1;
1950 pointer-events: auto;
1951 margin-top: 10px;
1952 }
1953 .merchant-module-dropdown ul {
1954 margin: 0;
1955 padding: 0;
1956 list-style: none;
1957 display: -webkit-box;
1958 display: -ms-flexbox;
1959 display: flex;
1960 -webkit-box-orient: vertical;
1961 -webkit-box-direction: normal;
1962 -ms-flex-direction: column;
1963 flex-direction: column;
1964 }
1965 .merchant-module-dropdown ul li {
1966 cursor: pointer;
1967 position: relative;
1968 margin: 0;
1969 padding: 0;
1970 display: -webkit-box;
1971 display: -ms-flexbox;
1972 display: flex;
1973 -webkit-box-align: center;
1974 -ms-flex-align: center;
1975 align-items: center;
1976 -webkit-box-pack: justify;
1977 -ms-flex-pack: justify;
1978 justify-content: space-between;
1979 white-space: nowrap;
1980 padding: 15px 15px 0 15px;
1981 color: #202223;
1982 -webkit-transition: all 0.2s;
1983 transition: all 0.2s;
1984 }
1985 .merchant-module-dropdown ul li:before {
1986 content: "";
1987 position: absolute;
1988 z-index: 1;
1989 top: 0;
1990 left: 0;
1991 bottom: 0;
1992 width: 0;
1993 opacity: 0;
1994 -webkit-transition: all 0.2s;
1995 transition: all 0.2s;
1996 background-color: #3858E9;
1997 }
1998 .merchant-module-dropdown ul li:hover {
1999 background-color: #F2F7FE;
2000 }
2001 .merchant-module-dropdown ul li:hover:before {
2002 opacity: 1;
2003 width: 3px;
2004 }
2005 .merchant-module-dropdown ul li span {
2006 width: 100%;
2007 padding-bottom: 15px;
2008 border-bottom: 1px solid #eee;
2009 }
2010 .merchant-module-dropdown ul li:last-child span {
2011 border-bottom: none;
2012 }
2013
2014 .merchant-module-dropdown-close {
2015 cursor: pointer;
2016 }
2017
2018 .merchant-module-question-title {
2019 display: -webkit-box;
2020 display: -ms-flexbox;
2021 display: flex;
2022 grid-gap: 15px;
2023 -webkit-box-align: center;
2024 -ms-flex-align: center;
2025 align-items: center;
2026 -webkit-box-pack: justify;
2027 -ms-flex-pack: justify;
2028 justify-content: space-between;
2029 white-space: nowrap;
2030 padding: 15px 15px 5px 15px;
2031 font-size: 14px;
2032 line-height: 16px;
2033 color: #202223;
2034 font-weight: 500;
2035 }
2036 .merchant-module-question-title i {
2037 width: auto;
2038 height: auto;
2039 font-size: 24px;
2040 line-height: 1;
2041 }
2042
2043 .merchant-module-question-answer-title {
2044 display: none;
2045 grid-gap: 15px;
2046 -webkit-box-align: center;
2047 -ms-flex-align: center;
2048 align-items: center;
2049 -webkit-box-pack: justify;
2050 -ms-flex-pack: justify;
2051 justify-content: space-between;
2052 white-space: nowrap;
2053 padding: 15px;
2054 font-size: 14px;
2055 line-height: 16px;
2056 color: #202223;
2057 font-weight: 500;
2058 }
2059 .merchant-module-question-answer-title i {
2060 width: auto;
2061 height: auto;
2062 font-size: 20px;
2063 line-height: 1;
2064 }
2065 .merchant-module-question-answer-title.merchant-show {
2066 display: -webkit-box;
2067 display: -ms-flexbox;
2068 display: flex;
2069 }
2070
2071 .merchant-module-question-answer-form {
2072 padding: 5px 15px 15px 15px;
2073 display: -webkit-box;
2074 display: -ms-flexbox;
2075 display: flex;
2076 grid-gap: 10px;
2077 -webkit-box-orient: vertical;
2078 -webkit-box-direction: normal;
2079 -ms-flex-direction: column;
2080 flex-direction: column;
2081 }
2082 .merchant-module-question-answer-form textarea {
2083 width: 100%;
2084 height: 100px;
2085 padding: 12px;
2086 line-height: 1em;
2087 width: 100%;
2088 max-width: 100%;
2089 min-height: auto;
2090 border: 1px solid #D6D6D6;
2091 }
2092 .merchant-module-question-answer-form textarea:focus {
2093 outline: none;
2094 -webkit-box-shadow: none;
2095 box-shadow: none;
2096 border-color: #3858E9;
2097 }
2098 .merchant-module-question-answer-form button {
2099 -ms-flex-item-align: end;
2100 align-self: flex-end;
2101 padding: 8px 10px;
2102 font-size: 13px;
2103 font-weight: 400;
2104 }
2105
2106 .merchant-module-question-answer-thank-you-text {
2107 padding: 5px 15px 15px 15px;
2108 }
2109
2110 .merchant-module-question-thank-you-dropdown .merchant-module-question-answer-title {
2111 display: -webkit-box;
2112 display: -ms-flexbox;
2113 display: flex;
2114 }
2115
2116 .merchant-module-page-button-action-deactivate {
2117 border-radius: 8px;
2118 padding: 12px 16px;
2119 display: -webkit-box;
2120 display: -ms-flexbox;
2121 display: flex;
2122 justify-items: center;
2123 -webkit-box-align: center;
2124 -ms-flex-align: center;
2125 align-items: center;
2126 text-decoration: none;
2127 color: #d82c0d;
2128 }
2129 .merchant-module-page-button-action-deactivate:hover {
2130 background-color: #fff4f4;
2131 }
2132
2133 .merchant-module-page-button-deactivate {
2134 color: #3858E9;
2135 border-color: #3858E9;
2136 background-color: transparent;
2137 }
2138 .merchant-module-page-button-deactivate:focus, .merchant-module-page-button-deactivate:hover {
2139 color: #3858E9;
2140 }
2141 .merchant-module-page-button-deactivate.merchant-show .merchant-module-deactivate-dropdown {
2142 pointer-events: auto;
2143 }
2144
2145 .merchant-module-page-actions-links {
2146 display: -webkit-box;
2147 display: -ms-flexbox;
2148 display: flex;
2149 }
2150
2151 .merchant-module-page-link {
2152 display: -webkit-box;
2153 display: -ms-flexbox;
2154 display: flex;
2155 grid-gap: 5px;
2156 -webkit-box-pack: center;
2157 -ms-flex-pack: center;
2158 justify-content: center;
2159 -webkit-box-align: center;
2160 -ms-flex-align: center;
2161 align-items: center;
2162 padding: 10px;
2163 font-size: 13px;
2164 font-weight: 500;
2165 text-decoration: none;
2166 color: #3858E9;
2167 }
2168 .merchant-module-page-link span {
2169 text-decoration: underline;
2170 }
2171 .merchant-module-page-link:focus, .merchant-module-page-link:hover {
2172 outline: none;
2173 -webkit-box-shadow: none;
2174 box-shadow: none;
2175 color: #3858E9;
2176 }
2177
2178 body.merchant-module-disabled .merchant-module-page-link-preview {
2179 pointer-events: none;
2180 color: #CCC;
2181 }
2182 body.merchant-module-disabled .merchant-module-page-link-preview span {
2183 text-decoration: none;
2184 }
2185 body.merchant-module-disabled .merchant-module-page-link-preview svg path {
2186 fill: #CCC;
2187 }
2188
2189 .merchant-module-page-ajax-header {
2190 display: -webkit-box;
2191 display: -ms-flexbox;
2192 display: flex;
2193 -webkit-box-pack: justify;
2194 -ms-flex-pack: justify;
2195 justify-content: space-between;
2196 -webkit-box-align: center;
2197 -ms-flex-align: center;
2198 align-items: center;
2199 position: fixed;
2200 z-index: 10000;
2201 overflow: hidden;
2202 padding-left: 20px;
2203 padding-right: 20px;
2204 top: 32px;
2205 left: 160px;
2206 right: 0;
2207 height: 56px;
2208 opacity: 0;
2209 pointer-events: none;
2210 background-color: #1d2327;
2211 -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2212 transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2213 }
2214 .merchant-module-page-ajax-header.merchant-show {
2215 opacity: 1;
2216 pointer-events: auto;
2217 }
2218 .merchant-module-page-ajax-header.merchant-saving {
2219 -webkit-user-select: none;
2220 -moz-user-select: none;
2221 -ms-user-select: none;
2222 user-select: none;
2223 }
2224 .merchant-module-page-ajax-header.merchant-saving i {
2225 opacity: 1;
2226 }
2227 .merchant-module-page-ajax-header.merchant-saving span {
2228 opacity: 0;
2229 }
2230 .merchant-module-page-ajax-header.merchant-saving .merchant-module-page-ajax-buttons {
2231 -webkit-user-select: none;
2232 -moz-user-select: none;
2233 -ms-user-select: none;
2234 user-select: none;
2235 pointer-events: none;
2236 }
2237
2238 .merchant-module-page-ajax-notice {
2239 font-size: 14px;
2240 font-weight: 500;
2241 color: #e3e5e7;
2242 }
2243
2244 .merchant-module-page-ajax-buttons {
2245 display: -webkit-box;
2246 display: -ms-flexbox;
2247 display: flex;
2248 -webkit-box-align: center;
2249 -ms-flex-align: center;
2250 align-items: center;
2251 grid-gap: 15px;
2252 }
2253
2254 .merchant-module-save-button {
2255 position: relative;
2256 cursor: pointer;
2257 display: -webkit-box;
2258 display: -ms-flexbox;
2259 display: flex;
2260 -webkit-box-pack: center;
2261 -ms-flex-pack: center;
2262 justify-content: center;
2263 -webkit-box-align: center;
2264 -ms-flex-align: center;
2265 align-items: center;
2266 font-size: 14px;
2267 line-height: 16px;
2268 border: 0;
2269 border-radius: 4px;
2270 min-width: 60px;
2271 min-height: 36px;
2272 padding-left: 16px;
2273 padding-right: 16px;
2274 color: #fff;
2275 background-color: #3858E9;
2276 }
2277 .merchant-module-save-button i {
2278 position: absolute;
2279 width: auto;
2280 height: auto;
2281 font-size: 20px;
2282 opacity: 0;
2283 -webkit-animation: merchant-spin 1.5s infinite linear;
2284 animation: merchant-spin 1.5s infinite linear;
2285 }
2286
2287 @-webkit-keyframes merchant-spin {
2288 0% {
2289 -webkit-transform: rotate(0deg);
2290 transform: rotate(0deg);
2291 }
2292 100% {
2293 -webkit-transform: rotate(359deg);
2294 transform: rotate(359deg);
2295 }
2296 }
2297
2298 @keyframes merchant-spin {
2299 0% {
2300 -webkit-transform: rotate(0deg);
2301 transform: rotate(0deg);
2302 }
2303 100% {
2304 -webkit-transform: rotate(359deg);
2305 transform: rotate(359deg);
2306 }
2307 }
2308 .merchant-module-discard-button {
2309 cursor: pointer;
2310 display: -webkit-box;
2311 display: -ms-flexbox;
2312 display: flex;
2313 -webkit-box-pack: center;
2314 -ms-flex-pack: center;
2315 justify-content: center;
2316 -webkit-box-align: center;
2317 -ms-flex-align: center;
2318 align-items: center;
2319 font-size: 14px;
2320 line-height: 16px;
2321 min-width: 36px;
2322 min-height: 36px;
2323 color: #fff;
2324 text-decoration: none;
2325 }
2326 .merchant-module-discard-button:hover {
2327 color: #fff;
2328 opacity: 0.75;
2329 }
2330 .merchant-module-discard-button:focus {
2331 outline: none;
2332 -webkit-box-shadow: none;
2333 box-shadow: none;
2334 }
2335
2336 .merchant-module-page-preview-browser-top {
2337 background: #323232;
2338 display: -webkit-box;
2339 display: -ms-flexbox;
2340 display: flex;
2341 -webkit-box-align: center;
2342 -ms-flex-align: center;
2343 align-items: center;
2344 height: 45px;
2345 padding-left: 9px;
2346 }
2347
2348 .merchant-module-page-preview-browser-top-circle {
2349 background: #616161;
2350 width: 12px;
2351 height: 12px;
2352 border-radius: 50%;
2353 display: block;
2354 margin-left: 7px;
2355 }
2356
2357 .merchant-module-page-preview-browser {
2358 border-top-left-radius: 5px;
2359 border-top-right-radius: 5px;
2360 overflow: hidden;
2361 -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2362 box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2363 margin-bottom: -29px;
2364 display: -webkit-box;
2365 display: -ms-flexbox;
2366 display: flex;
2367 -webkit-box-orient: vertical;
2368 -webkit-box-direction: normal;
2369 -ms-flex-direction: column;
2370 flex-direction: column;
2371 }
2372
2373 .merchant-module-page-preview-browser-inner {
2374 -webkit-box-flex: 1;
2375 -ms-flex-positive: 1;
2376 flex-grow: 1;
2377 position: relative;
2378 display: block;
2379 }
2380
2381 .merchant-module-page-preview-box {
2382 overflow: hidden;
2383 position: sticky;
2384 top: 45px;
2385 }
2386
2387 .merchant-module-page-settings,
2388 .merchant-module-page-preview-box {
2389 display: -webkit-box;
2390 display: -ms-flexbox;
2391 display: flex;
2392 grid-gap: 30px;
2393 -webkit-box-orient: vertical;
2394 -webkit-box-direction: normal;
2395 -ms-flex-direction: column;
2396 flex-direction: column;
2397 padding: 30px;
2398 background-color: #fff;
2399 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2400 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2401 border-radius: 4px;
2402 }
2403
2404 .merchant-module-page-setting-box {
2405 display: -webkit-box;
2406 display: -ms-flexbox;
2407 display: flex;
2408 }
2409 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 {
2410 -webkit-box-orient: vertical;
2411 -webkit-box-direction: normal;
2412 -ms-flex-direction: column;
2413 flex-direction: column;
2414 grid-gap: 20px;
2415 }
2416 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-title,
2417 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-fields {
2418 width: 100%;
2419 }
2420
2421 .merchant-module-page-preview-title,
2422 .merchant-module-page-setting-title {
2423 margin-top: 10px;
2424 padding-right: 50px;
2425 font-size: 20px;
2426 font-weight: 500;
2427 color: #2F2F2F;
2428 }
2429
2430 .merchant-module-page-setting-title {
2431 width: 40%;
2432 }
2433
2434 .merchant-module-page-setting-subtitle {
2435 margin-top: 20px;
2436 font-size: 13px;
2437 font-weight: 400;
2438 color: #757575;
2439 }
2440
2441 .merchant-module-page-setting-fields {
2442 display: -webkit-box;
2443 display: -ms-flexbox;
2444 display: flex;
2445 grid-gap: 24px;
2446 -webkit-box-orient: vertical;
2447 -webkit-box-direction: normal;
2448 -ms-flex-direction: column;
2449 flex-direction: column;
2450 width: 60%;
2451 padding: 30px;
2452 border-radius: 4px;
2453 border: 2px solid #F0F0F1;
2454 background-color: #fff;
2455 }
2456
2457 .merchant-module-page-setting-field {
2458 display: -webkit-box;
2459 display: -ms-flexbox;
2460 display: flex;
2461 grid-gap: 10px;
2462 -webkit-box-orient: vertical;
2463 -webkit-box-direction: normal;
2464 -ms-flex-direction: column;
2465 flex-direction: column;
2466 }
2467 .merchant-module-page-setting-field.merchant-show {
2468 display: -webkit-box;
2469 display: -ms-flexbox;
2470 display: flex;
2471 }
2472 .merchant-module-page-setting-field.merchant-hide {
2473 display: none;
2474 }
2475
2476 .merchant-module-page-setting-field-title {
2477 font-size: 14px;
2478 font-weight: 500;
2479 color: #2F2F2F;
2480 }
2481
2482 .merchant-module-page-setting-field-desc {
2483 font-size: 13px;
2484 font-weight: 400;
2485 color: #777;
2486 }
2487 .merchant-module-page-setting-field-desc a {
2488 color: #3858E9;
2489 }
2490 .merchant-module-page-setting-field-desc a:focus {
2491 -webkit-box-shadow: none;
2492 box-shadow: none;
2493 }
2494
2495 .merchant-license-form-wrapper .merchant-license-form {
2496 display: -webkit-box;
2497 display: -ms-flexbox;
2498 display: flex;
2499 -ms-flex-wrap: wrap;
2500 flex-wrap: wrap;
2501 grid-gap: 10px;
2502 }
2503 .merchant-license-form-wrapper .merchant-license-form input {
2504 width: 400px;
2505 max-width: 100%;
2506 padding-left: 36px;
2507 min-height: 36px;
2508 }
2509 .merchant-license-form-wrapper .merchant-license-form input::-webkit-input-placeholder {
2510 opacity: 0.75;
2511 }
2512 .merchant-license-form-wrapper .merchant-license-form input::-moz-placeholder {
2513 opacity: 0.75;
2514 }
2515 .merchant-license-form-wrapper .merchant-license-form input:-ms-input-placeholder {
2516 opacity: 0.75;
2517 }
2518 .merchant-license-form-wrapper .merchant-license-form input::-ms-input-placeholder {
2519 opacity: 0.75;
2520 }
2521 .merchant-license-form-wrapper .merchant-license-form input::placeholder {
2522 opacity: 0.75;
2523 }
2524 .merchant-license-form-wrapper .merchant-license-form button {
2525 position: relative;
2526 display: -webkit-box;
2527 display: -ms-flexbox;
2528 display: flex;
2529 grid-gap: 2px;
2530 -webkit-box-align: center;
2531 -ms-flex-align: center;
2532 align-items: center;
2533 line-height: 1em;
2534 min-height: 36px;
2535 padding: 10px 40px !important;
2536 background-color: transparent;
2537 color: #3858E9;
2538 border-color: #3858E9;
2539 }
2540 .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 {
2541 color: #FFF;
2542 background-color: #3452da;
2543 border-color: #3452da;
2544 }
2545 .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate {
2546 color: #d82c0d;
2547 border-color: #d82c0d;
2548 }
2549 .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 {
2550 color: #FFF;
2551 background-color: #d82c0d;
2552 border-color: #d82c0d;
2553 }
2554 .merchant-license-form-wrapper .merchant-license-key-input {
2555 position: relative;
2556 display: -webkit-box;
2557 display: -ms-flexbox;
2558 display: flex;
2559 }
2560 .merchant-license-form-wrapper .merchant-license-key-input i {
2561 position: absolute;
2562 z-index: 1;
2563 top: 50%;
2564 left: 10px;
2565 -webkit-transform: translateY(-50%);
2566 transform: translateY(-50%);
2567 margin-top: -1px;
2568 font-size: 20px !important;
2569 color: #5C5F62;
2570 }
2571
2572 .mechant-license-response-wrapper,
2573 .merchant-dashboard-license-success {
2574 display: block;
2575 margin-top: 10px;
2576 color: #757575;
2577 }
2578 .mechant-license-response-wrapper span,
2579 .merchant-dashboard-license-success span {
2580 margin-left: 5px;
2581 }
2582
2583 .merchant-module-page-setting-field-text input,
2584 .merchant-module-page-setting-field-number input,
2585 .merchant-module-page-setting-field-text_readonly input {
2586 padding: 12px;
2587 line-height: 1.3em;
2588 width: 100%;
2589 max-width: 100%;
2590 min-height: auto;
2591 border: 1px solid #D6D6D6;
2592 }
2593 .merchant-module-page-setting-field-text input:focus,
2594 .merchant-module-page-setting-field-number input:focus,
2595 .merchant-module-page-setting-field-text_readonly input:focus {
2596 outline: none;
2597 -webkit-box-shadow: none;
2598 box-shadow: none;
2599 border-color: #3858E9;
2600 }
2601
2602 .merchant-module-page-setting-field-textarea textarea,
2603 .merchant-module-page-setting-field-textarea_code textarea {
2604 padding: 12px;
2605 line-height: 1em;
2606 width: 100%;
2607 max-width: 100%;
2608 min-height: 120px;
2609 border: 1px solid #D6D6D6;
2610 }
2611 .merchant-module-page-setting-field-textarea textarea:focus,
2612 .merchant-module-page-setting-field-textarea_code textarea:focus {
2613 outline: none;
2614 -webkit-box-shadow: none;
2615 box-shadow: none;
2616 border-color: #3858E9;
2617 }
2618
2619 .merchant-code-snippets-textarea textarea,
2620 .merchant-code-snippets-textarea_code textarea {
2621 min-height: 200px;
2622 }
2623
2624 .merchant-module-page-setting-field-radio div,
2625 .merchant-module-page-setting-field-radio_alt div,
2626 .merchant-module-page-setting-field-checkbox div {
2627 display: -webkit-box;
2628 display: -ms-flexbox;
2629 display: flex;
2630 grid-gap: 30px;
2631 }
2632 .merchant-module-page-setting-field-radio label,
2633 .merchant-module-page-setting-field-radio_alt label,
2634 .merchant-module-page-setting-field-checkbox label {
2635 display: -webkit-box;
2636 display: -ms-flexbox;
2637 display: flex;
2638 grid-gap: 12px;
2639 -webkit-box-align: center;
2640 -ms-flex-align: center;
2641 align-items: center;
2642 -webkit-user-select: none;
2643 -moz-user-select: none;
2644 -ms-user-select: none;
2645 user-select: none;
2646 }
2647 .merchant-module-page-setting-field-radio span,
2648 .merchant-module-page-setting-field-radio_alt span,
2649 .merchant-module-page-setting-field-checkbox span {
2650 font-size: 14px;
2651 font-weight: 400;
2652 color: #1D2327;
2653 }
2654 .merchant-module-page-setting-field-radio input,
2655 .merchant-module-page-setting-field-radio_alt input,
2656 .merchant-module-page-setting-field-checkbox input {
2657 -ms-flex-negative: 0;
2658 flex-shrink: 0;
2659 margin: 0;
2660 width: 20px;
2661 height: 20px;
2662 border: 1px solid #D6D6D6;
2663 background-color: #fff;
2664 display: -webkit-inline-box;
2665 display: -ms-inline-flexbox;
2666 display: inline-flex;
2667 -webkit-box-align: center;
2668 -ms-flex-align: center;
2669 align-items: center;
2670 -webkit-box-pack: center;
2671 -ms-flex-pack: center;
2672 justify-content: center;
2673 -webkit-transition: none;
2674 transition: none;
2675 -webkit-box-sizing: border-box;
2676 box-sizing: border-box;
2677 -webkit-box-shadow: none;
2678 box-shadow: none;
2679 }
2680 .merchant-module-page-setting-field-radio input:checked,
2681 .merchant-module-page-setting-field-radio_alt input:checked,
2682 .merchant-module-page-setting-field-checkbox input:checked {
2683 -webkit-transition: none;
2684 transition: none;
2685 }
2686 .merchant-module-page-setting-field-radio input:checked::before,
2687 .merchant-module-page-setting-field-radio_alt input:checked::before,
2688 .merchant-module-page-setting-field-checkbox input:checked::before {
2689 content: "";
2690 margin: 0;
2691 padding: 0;
2692 -webkit-box-sizing: border-box;
2693 box-sizing: border-box;
2694 -webkit-transition: none;
2695 transition: none;
2696 }
2697 .merchant-module-page-setting-field-radio input[type=checkbox],
2698 .merchant-module-page-setting-field-radio_alt input[type=checkbox],
2699 .merchant-module-page-setting-field-checkbox input[type=checkbox] {
2700 border-radius: 6px;
2701 }
2702 .merchant-module-page-setting-field-radio input[type=checkbox]:focus,
2703 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus,
2704 .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus {
2705 border-color: #fff;
2706 -webkit-box-shadow: 0 0 0 2px #3858E9;
2707 box-shadow: 0 0 0 2px #3858E9;
2708 }
2709 .merchant-module-page-setting-field-radio input[type=checkbox]:checked,
2710 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked,
2711 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked {
2712 border-color: #fff;
2713 background-color: #3858E9;
2714 }
2715 .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before,
2716 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before,
2717 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before {
2718 width: 100%;
2719 height: 100%;
2720 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");
2721 background-repeat: no-repeat;
2722 background-position: 3px 4px;
2723 }
2724 .merchant-module-page-setting-field-radio input[type=radio],
2725 .merchant-module-page-setting-field-radio_alt input[type=radio],
2726 .merchant-module-page-setting-field-checkbox input[type=radio] {
2727 border-radius: 100%;
2728 }
2729 .merchant-module-page-setting-field-radio input[type=radio]:focus,
2730 .merchant-module-page-setting-field-radio_alt input[type=radio]:focus,
2731 .merchant-module-page-setting-field-checkbox input[type=radio]:focus {
2732 border-color: #fff;
2733 -webkit-box-shadow: none;
2734 box-shadow: none;
2735 }
2736 .merchant-module-page-setting-field-radio input[type=radio]:checked,
2737 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked,
2738 .merchant-module-page-setting-field-checkbox input[type=radio]:checked {
2739 border-color: #3858E9;
2740 background-color: #fff;
2741 -webkit-box-shadow: 0 0 0 1px #3858E9;
2742 box-shadow: 0 0 0 1px #3858E9;
2743 }
2744 .merchant-module-page-setting-field-radio input[type=radio]:checked::before,
2745 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before,
2746 .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before {
2747 width: 12px;
2748 height: 12px;
2749 border-radius: 12px;
2750 background-color: #3858E9;
2751 }
2752
2753 @media (max-width: 1300px) {
2754 .merchant-module-page-setting-field-radio div {
2755 grid-gap: 20px;
2756 }
2757 }
2758 .merchant-module-page-setting-field-radio span {
2759 opacity: 0.8;
2760 }
2761 .merchant-module-page-setting-field-radio input[type=radio]:checked + span {
2762 opacity: 1;
2763 }
2764
2765 .merchant-module-page-setting-field-radio_alt div {
2766 display: -webkit-box;
2767 display: -ms-flexbox;
2768 display: flex;
2769 grid-gap: 10px;
2770 -webkit-box-orient: vertical;
2771 -webkit-box-direction: normal;
2772 -ms-flex-direction: column;
2773 flex-direction: column;
2774 }
2775 .merchant-module-page-setting-field-radio_alt label span {
2776 font-size: 14px;
2777 font-weight: 400;
2778 color: #1D2327;
2779 }
2780 .merchant-module-page-setting-field-radio_alt p {
2781 margin: 0;
2782 color: #757575;
2783 }
2784 .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner {
2785 grid-gap: 30px;
2786 -webkit-box-orient: vertical;
2787 -webkit-box-direction: normal;
2788 -ms-flex-direction: column;
2789 flex-direction: column;
2790 }
2791
2792 .merchant-module-page-setting-field-content {
2793 max-width: 60vw;
2794 }
2795 .merchant-module-page-setting-field-content a {
2796 color: #3858E9;
2797 }
2798 .merchant-module-page-setting-field-content a:focus {
2799 -webkit-box-shadow: none;
2800 box-shadow: none;
2801 }
2802
2803 .merchant-tag-pre-orders {
2804 display: -webkit-box;
2805 display: -ms-flexbox;
2806 display: flex;
2807 grid-gap: 16px;
2808 }
2809 .merchant-tag-pre-orders a {
2810 display: -webkit-box;
2811 display: -ms-flexbox;
2812 display: flex;
2813 -webkit-box-align: center;
2814 -ms-flex-align: center;
2815 align-items: center;
2816 -webkit-box-pack: center;
2817 -ms-flex-pack: center;
2818 justify-content: center;
2819 margin: 0;
2820 padding: 8px 26px;
2821 font-size: 14px;
2822 line-height: 20px;
2823 -webkit-user-select: none;
2824 -moz-user-select: none;
2825 -ms-user-select: none;
2826 user-select: none;
2827 min-width: 145px;
2828 font-weight: 500;
2829 text-decoration: none;
2830 border-radius: 4px;
2831 color: #202223;
2832 border: 1px solid #C9CCCF;
2833 background-color: #fff;
2834 }
2835 .merchant-tag-pre-orders a:focus, .merchant-tag-pre-orders a:active {
2836 outline: none;
2837 -webkit-box-shadow: none;
2838 box-shadow: none;
2839 }
2840 .merchant-tag-pre-orders p {
2841 display: -webkit-box;
2842 display: -ms-flexbox;
2843 display: flex;
2844 -webkit-box-orient: vertical;
2845 -webkit-box-direction: normal;
2846 -ms-flex-direction: column;
2847 flex-direction: column;
2848 -webkit-box-align: start;
2849 -ms-flex-align: start;
2850 align-items: flex-start;
2851 grid-gap: 16px;
2852 font-size: 14px;
2853 line-height: 20px;
2854 margin: 0;
2855 padding: 0;
2856 }
2857 .merchant-tag-pre-orders p i {
2858 -ms-flex-negative: 0;
2859 flex-shrink: 0;
2860 }
2861
2862 .merchant-module-page-setting-field-select select,
2863 .merchant-module-page-setting-field-select_ajax select,
2864 .merchant-module-page-setting-field-select_size_chart select {
2865 padding: 12px 20px 12px 12px;
2866 line-height: 1.3em;
2867 width: 100%;
2868 max-width: 100%;
2869 min-height: auto;
2870 border-radius: 6px;
2871 color: #2F2F2F;
2872 border: 1px solid #D6D6D6;
2873 }
2874 .merchant-module-page-setting-field-select select:hover,
2875 .merchant-module-page-setting-field-select_ajax select:hover,
2876 .merchant-module-page-setting-field-select_size_chart select:hover {
2877 color: #2F2F2F;
2878 }
2879 .merchant-module-page-setting-field-select select:focus,
2880 .merchant-module-page-setting-field-select_ajax select:focus,
2881 .merchant-module-page-setting-field-select_size_chart select:focus {
2882 outline: none;
2883 -webkit-box-shadow: none;
2884 box-shadow: none;
2885 border-color: #3858E9;
2886 }
2887 .merchant-module-page-setting-field-select select option,
2888 .merchant-module-page-setting-field-select_ajax select option,
2889 .merchant-module-page-setting-field-select_size_chart select option {
2890 color: #2F2F2F;
2891 }
2892 .merchant-module-page-setting-field-select .select2-container .select2-selection--single,
2893 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single,
2894 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single {
2895 height: 44px !important;
2896 }
2897 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
2898 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
2899 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
2900 line-height: 41px !important;
2901 }
2902 .merchant-module-page-setting-field-select .select2-selection__arrow,
2903 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
2904 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
2905 height: 43px !important;
2906 }
2907
2908 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper {
2909 display: -webkit-box;
2910 display: -ms-flexbox;
2911 display: flex;
2912 grid-gap: 15px;
2913 }
2914 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select {
2915 width: 100%;
2916 }
2917 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number {
2918 width: 100px;
2919 }
2920
2921 .merchant-module-page-setting-field-choices input {
2922 display: none;
2923 }
2924 .merchant-module-page-setting-field-choices input:checked + figure {
2925 border-color: #3858E9;
2926 }
2927 .merchant-module-page-setting-field-choices label {
2928 display: -webkit-box;
2929 display: -ms-flexbox;
2930 display: flex;
2931 position: relative;
2932 }
2933 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
2934 opacity: 1;
2935 visibility: visible;
2936 -webkit-transform: translate3d(-50%, 0, 0);
2937 transform: translate3d(-50%, 0, 0);
2938 }
2939 .merchant-module-page-setting-field-choices figure {
2940 display: -webkit-box;
2941 display: -ms-flexbox;
2942 display: flex;
2943 margin: 0;
2944 padding: 2px;
2945 border-radius: 4px;
2946 border: 2px solid transparent;
2947 }
2948 .merchant-module-page-setting-field-choices .merchant-tooltip {
2949 position: absolute;
2950 z-index: 10;
2951 left: 50%;
2952 bottom: calc(100% + 12px);
2953 padding: 3px 12px;
2954 font-size: 11px;
2955 white-space: nowrap;
2956 opacity: 0;
2957 visibility: hidden;
2958 -webkit-transform: translate3d(-50%, 6px, 0);
2959 transform: translate3d(-50%, 6px, 0);
2960 -webkit-transition: all 0.2s;
2961 transition: all 0.2s;
2962 border-radius: 3px;
2963 color: #f7f7f7;
2964 background-color: #212121;
2965 }
2966 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
2967 content: "";
2968 position: absolute;
2969 left: 50%;
2970 bottom: -12px;
2971 border: 6px solid transparent;
2972 border-top-color: #212121;
2973 -webkit-transform: translate3d(-50%, 0, 0);
2974 transform: translate3d(-50%, 0, 0);
2975 }
2976 .merchant-module-page-setting-field-choices .merchant-choices {
2977 display: -webkit-box;
2978 display: -ms-flexbox;
2979 display: flex;
2980 grid-gap: 10px;
2981 }
2982 .merchant-module-page-setting-field-choices .merchant-choices svg {
2983 width: 20px;
2984 height: 20px;
2985 }
2986
2987 .merchant-module-page-setting-field-buttons input {
2988 display: none;
2989 }
2990 .merchant-module-page-setting-field-buttons input:checked + span {
2991 color: #fff;
2992 background-color: #3858E9;
2993 }
2994 .merchant-module-page-setting-field-buttons label {
2995 display: -webkit-box;
2996 display: -ms-flexbox;
2997 display: flex;
2998 }
2999 .merchant-module-page-setting-field-buttons span {
3000 display: -webkit-box;
3001 display: -ms-flexbox;
3002 display: flex;
3003 -webkit-box-align: center;
3004 -ms-flex-align: center;
3005 align-items: center;
3006 -webkit-box-pack: center;
3007 -ms-flex-pack: center;
3008 justify-content: center;
3009 margin: 0;
3010 padding: 10px 15px;
3011 border-radius: 2px;
3012 -webkit-user-select: none;
3013 -moz-user-select: none;
3014 -ms-user-select: none;
3015 user-select: none;
3016 min-width: 120px;
3017 font-weight: 500;
3018 }
3019 .merchant-module-page-setting-field-buttons .merchant-buttons {
3020 display: -webkit-inline-box;
3021 display: -ms-inline-flexbox;
3022 display: inline-flex;
3023 padding: 3px;
3024 border: 1px solid #D6D6D6;
3025 border-radius: 4px;
3026 }
3027 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
3028 text-decoration: underline;
3029 }
3030 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
3031 text-decoration: line-through;
3032 }
3033 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
3034 text-decoration: overline;
3035 }
3036
3037 .merchant-module-page-setting-field-buttons_alt input {
3038 display: none;
3039 }
3040 .merchant-module-page-setting-field-buttons_alt input:checked + span {
3041 color: #fff;
3042 background-color: #3858E9;
3043 }
3044 .merchant-module-page-setting-field-buttons_alt label {
3045 display: -webkit-box;
3046 display: -ms-flexbox;
3047 display: flex;
3048 }
3049 .merchant-module-page-setting-field-buttons_alt label:hover {
3050 position: relative;
3051 z-index: 10;
3052 }
3053 .merchant-module-page-setting-field-buttons_alt span {
3054 display: -webkit-box;
3055 display: -ms-flexbox;
3056 display: flex;
3057 -webkit-box-align: center;
3058 -ms-flex-align: center;
3059 align-items: center;
3060 -webkit-box-pack: center;
3061 -ms-flex-pack: center;
3062 justify-content: center;
3063 margin: 0;
3064 padding: 10px 15px;
3065 border-radius: 2px;
3066 -webkit-user-select: none;
3067 -moz-user-select: none;
3068 -ms-user-select: none;
3069 user-select: none;
3070 min-width: 120px;
3071 font-weight: 500;
3072 border-radius: 4px;
3073 border: 1px solid #D6D6D6;
3074 background-color: #fff;
3075 }
3076 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
3077 display: -webkit-box;
3078 display: -ms-flexbox;
3079 display: flex;
3080 -ms-flex-wrap: wrap;
3081 flex-wrap: wrap;
3082 grid-gap: 5px;
3083 padding: 3px;
3084 }
3085
3086 .merchant-animated-buttons .merchant-buttons {
3087 display: grid;
3088 grid-template-columns: repeat(5, 1fr);
3089 }
3090 .merchant-animated-buttons span {
3091 width: 100%;
3092 }
3093
3094 @media (max-width: 1470px) {
3095 .merchant-animated-buttons .merchant-buttons {
3096 grid-template-columns: repeat(3, 1fr);
3097 }
3098 }
3099 @media (max-width: 1050px) {
3100 .merchant-animated-buttons .merchant-buttons {
3101 grid-template-columns: repeat(2, 1fr);
3102 }
3103 }
3104 /* Sortable Field */
3105 .merchant-sortable {
3106 max-width: 300px;
3107 }
3108 .merchant-sortable ul.ui-sortable li {
3109 position: relative;
3110 overflow: hidden;
3111 padding: 0;
3112 color: #1E1E1E;
3113 border: 1px solid #ddd;
3114 border-radius: 2px;
3115 text-transform: capitalize;
3116 line-height: 36px;
3117 cursor: -webkit-grab;
3118 cursor: grab;
3119 }
3120 .merchant-sortable ul.ui-sortable li .dashicons {
3121 width: 36px;
3122 height: 36px;
3123 -ms-flex-preferred-size: 36px;
3124 flex-basis: 36px;
3125 display: -webkit-box;
3126 display: -ms-flexbox;
3127 display: flex;
3128 -webkit-box-pack: center;
3129 -ms-flex-pack: center;
3130 justify-content: center;
3131 -webkit-box-align: center;
3132 -ms-flex-align: center;
3133 align-items: center;
3134 text-align: center;
3135 -webkit-box-sizing: border-box;
3136 box-sizing: border-box;
3137 }
3138 .merchant-sortable ul.ui-sortable li .dashicons:before {
3139 font-size: 16px;
3140 line-height: 1em;
3141 }
3142 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
3143 float: left;
3144 padding: 0;
3145 margin: 0 10px 0 0;
3146 border: none;
3147 border-right: 1px solid #ddd;
3148 }
3149 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
3150 float: right;
3151 color: #3858E9;
3152 padding: 0;
3153 margin: 0 0 0 10px;
3154 border: none;
3155 border-left: 1px solid #ddd;
3156 }
3157 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
3158 cursor: pointer;
3159 }
3160 .merchant-sortable ul.ui-sortable li.invisible {
3161 color: #6E7780;
3162 border: 1px solid #CAD2F6;
3163 background-color: #EBEEFB;
3164 }
3165 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
3166 content: "\f530";
3167 }
3168
3169 /* Sortable Repeater Field */
3170 .merchant-module-page-setting-field-flexible_content .merchant-module-page-setting-field-title {
3171 margin-bottom: 10px;
3172 }
3173
3174 .merchant-sortable-repeater-control {
3175 max-width: 100%;
3176 }
3177 .merchant-sortable-repeater-control .sortable {
3178 list-style-type: none;
3179 margin: 0;
3180 padding: 0;
3181 }
3182 .merchant-sortable-repeater-control .sortable input[type=text] {
3183 width: 100%;
3184 margin: 0;
3185 border-radius: 4px 0 0 4px;
3186 border: 1px solid #D6D6D6;
3187 padding: 12px;
3188 line-height: 1.3em;
3189 }
3190 .merchant-sortable-repeater-control .sortable input[type=text]:focus {
3191 border-color: #3858E9;
3192 outline: none;
3193 -webkit-box-shadow: none;
3194 box-shadow: none;
3195 }
3196 .merchant-sortable-repeater-control .sortable div {
3197 cursor: -webkit-grab;
3198 cursor: grab;
3199 margin-bottom: 7px;
3200 }
3201 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete {
3202 display: -webkit-box;
3203 display: -ms-flexbox;
3204 display: flex;
3205 -webkit-box-align: center;
3206 -ms-flex-align: center;
3207 align-items: center;
3208 -webkit-box-pack: center;
3209 -ms-flex-pack: center;
3210 justify-content: center;
3211 margin: 0;
3212 width: 44px;
3213 height: auto;
3214 font-size: 1.3em;
3215 line-height: 34px;
3216 color: #d4d4d4;
3217 background: #fff;
3218 padding: 0;
3219 vertical-align: top;
3220 margin-left: -1px;
3221 border: 1px solid #D6D6D6;
3222 text-decoration: none;
3223 }
3224 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt {
3225 width: 100%;
3226 text-decoration: none;
3227 margin: 0;
3228 font-weight: 600;
3229 color: #50575e;
3230 font-size: 1.1em;
3231 line-height: 34px;
3232 height: auto;
3233 }
3234 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus {
3235 outline: none;
3236 -webkit-box-shadow: none;
3237 box-shadow: none;
3238 }
3239 .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 {
3240 color: #a7a7a7;
3241 }
3242 .merchant-sortable-repeater-control .repeater {
3243 display: -webkit-box;
3244 display: -ms-flexbox;
3245 display: flex;
3246 }
3247 .merchant-sortable-repeater-control .repeater .dashicons-menu {
3248 display: -webkit-box;
3249 display: -ms-flexbox;
3250 display: flex;
3251 -webkit-box-align: center;
3252 -ms-flex-align: center;
3253 align-items: center;
3254 -webkit-box-pack: center;
3255 -ms-flex-pack: center;
3256 justify-content: center;
3257 margin: 0;
3258 width: 44px;
3259 height: auto;
3260 font-size: 1.3em;
3261 line-height: 34px;
3262 background: #fff;
3263 padding: 0;
3264 vertical-align: top;
3265 margin-left: -1px;
3266 border: 1px solid #D6D6D6;
3267 }
3268 .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
3269 color: #a7a7a7;
3270 }
3271 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add {
3272 color: #3858E9;
3273 border-color: #3858E9;
3274 background-color: transparent;
3275 margin-top: 10px;
3276 padding: 4px 19px;
3277 }
3278 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus {
3279 outline: none;
3280 -webkit-box-shadow: none;
3281 box-shadow: none;
3282 background-color: #ffffff;
3283 }
3284 .merchant-sortable-repeater-control.disable-sorting .dashicons-menu {
3285 display: none;
3286 }
3287
3288 /* Flexible Content Field */
3289 .merchant-flexible-content-control {
3290 max-width: 100%;
3291 }
3292 .merchant-flexible-content-control .sortable {
3293 list-style-type: none;
3294 margin: 0;
3295 padding: 0;
3296 }
3297 .merchant-flexible-content-control .sortable input[type=text] {
3298 width: 100%;
3299 margin: 0;
3300 border-radius: 4px 0 0 4px;
3301 border: 1px solid #D6D6D6;
3302 padding: 8px;
3303 line-height: 1.3em;
3304 }
3305 .merchant-flexible-content-control .sortable input[type=text]:focus {
3306 border-color: #3858E9;
3307 outline: none;
3308 -webkit-box-shadow: none;
3309 box-shadow: none;
3310 }
3311 .merchant-flexible-content-control .customize-control-flexible-content-move {
3312 cursor: -webkit-grab;
3313 cursor: grab;
3314 }
3315 .merchant-flexible-content-control .customize-control-flexible-content-delete {
3316 display: -webkit-box;
3317 display: -ms-flexbox;
3318 display: flex;
3319 -webkit-box-align: center;
3320 -ms-flex-align: center;
3321 align-items: center;
3322 -webkit-box-pack: center;
3323 -ms-flex-pack: center;
3324 justify-content: center;
3325 margin: 0;
3326 width: 40px;
3327 height: auto;
3328 font-size: 1.3em;
3329 line-height: 34px;
3330 color: #d4d4d4;
3331 background: #fff;
3332 padding: 0;
3333 vertical-align: top;
3334 margin-left: -1px;
3335 text-decoration: none;
3336 }
3337 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt {
3338 width: 100%;
3339 text-decoration: none;
3340 margin: 0;
3341 font-weight: 600;
3342 color: #50575e;
3343 font-size: 1.1em;
3344 line-height: 34px;
3345 height: auto;
3346 }
3347 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus {
3348 outline: none;
3349 -webkit-box-shadow: none;
3350 box-shadow: none;
3351 }
3352 .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 {
3353 color: #a7a7a7;
3354 }
3355 .merchant-flexible-content-control .merchant-flexible-content.empty {
3356 border: 2px dashed #dcdcde;
3357 min-height: 100px;
3358 margin-bottom: 10px;
3359 }
3360 .merchant-flexible-content-control.default-style .layout {
3361 background: white;
3362 border: 1px solid #c3c4c7;
3363 border-left: 3px solid #3858e9;
3364 }
3365 .merchant-flexible-content-control.default-style .layout .layout-header {
3366 padding: 8px 15px;
3367 }
3368 .merchant-flexible-content-control.default-style .layout .layout-body {
3369 padding: 15px;
3370 }
3371 .merchant-flexible-content-control.table-style .layout .layout-header {
3372 padding-bottom: 8px;
3373 margin-bottom: 15px;
3374 }
3375 .merchant-flexible-content-control.table-style .layout .layout-body {
3376 -webkit-box-orient: horizontal;
3377 -webkit-box-direction: normal;
3378 -ms-flex-direction: row;
3379 flex-direction: row;
3380 }
3381 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
3382 display: none;
3383 }
3384 .merchant-flexible-content-control .layouts {
3385 display: none;
3386 }
3387 .merchant-flexible-content-control .layout {
3388 margin-bottom: 20px;
3389 }
3390 .merchant-flexible-content-control .layout .layout-header {
3391 display: -webkit-box;
3392 display: -ms-flexbox;
3393 display: flex;
3394 -webkit-box-align: center;
3395 -ms-flex-align: center;
3396 align-items: center;
3397 border-bottom: 1px solid #f3f3f3;
3398 }
3399 .merchant-flexible-content-control .layout .layout-count {
3400 border-radius: 50%;
3401 width: 24px;
3402 height: 23px;
3403 border: 1px solid #949494;
3404 text-align: center;
3405 display: -webkit-box;
3406 display: -ms-flexbox;
3407 display: flex;
3408 -webkit-box-pack: center;
3409 -ms-flex-pack: center;
3410 justify-content: center;
3411 -webkit-box-orient: vertical;
3412 -webkit-box-direction: normal;
3413 -ms-flex-direction: column;
3414 flex-direction: column;
3415 font-size: 12px;
3416 font-weight: bold;
3417 margin-right: 10px;
3418 }
3419 .merchant-flexible-content-control .layout .layout-title {
3420 font-size: 14px;
3421 font-weight: bold;
3422 }
3423 .merchant-flexible-content-control .layout .layout-actions {
3424 display: -webkit-box;
3425 display: -ms-flexbox;
3426 display: flex;
3427 margin: 0;
3428 padding: 0;
3429 -webkit-box-pack: end;
3430 -ms-flex-pack: end;
3431 justify-content: flex-end;
3432 -webkit-box-flex: 1;
3433 -ms-flex-positive: 1;
3434 flex-grow: 1;
3435 }
3436 .merchant-flexible-content-control .layout .layout-body {
3437 display: -webkit-box;
3438 display: -ms-flexbox;
3439 display: flex;
3440 -webkit-box-orient: vertical;
3441 -webkit-box-direction: normal;
3442 -ms-flex-direction: column;
3443 flex-direction: column;
3444 grid-gap: 20px;
3445 }
3446 .merchant-flexible-content-control .layout .layout-field.flex-grow {
3447 -webkit-box-flex: 1;
3448 -ms-flex-positive: 1;
3449 flex-grow: 1;
3450 }
3451 .merchant-flexible-content-control .layout .dashicons-menu {
3452 display: -webkit-box;
3453 display: -ms-flexbox;
3454 display: flex;
3455 -webkit-box-align: center;
3456 -ms-flex-align: center;
3457 align-items: center;
3458 -webkit-box-pack: center;
3459 -ms-flex-pack: center;
3460 justify-content: center;
3461 margin: 0;
3462 width: 40px;
3463 height: auto;
3464 font-size: 1.3em;
3465 line-height: 34px;
3466 background: #fff;
3467 padding: 0;
3468 vertical-align: top;
3469 margin-left: -1px;
3470 }
3471 .merchant-flexible-content-control .layout .dashicons-menu:hover {
3472 color: #a7a7a7;
3473 }
3474 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
3475 position: relative;
3476 display: inline-block;
3477 }
3478 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
3479 opacity: 0;
3480 visibility: hidden;
3481 position: absolute;
3482 background-color: #ffffff;
3483 border: 1px solid #c3c4c7;
3484 border-left: 3px solid #3858e9;
3485 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3486 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3487 width: 180px;
3488 bottom: 100%;
3489 display: -webkit-box;
3490 display: -ms-flexbox;
3491 display: flex;
3492 -webkit-box-orient: vertical;
3493 -webkit-box-direction: normal;
3494 -ms-flex-direction: column;
3495 flex-direction: column;
3496 left: 50%;
3497 -webkit-transform: translate(-50%, 10px);
3498 transform: translate(-50%, 10px);
3499 padding: 3px 3px 3px 5px;
3500 }
3501 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
3502 z-index: 10;
3503 opacity: 1;
3504 visibility: visible;
3505 -webkit-transform: translate(-50%, -15px);
3506 transform: translate(-50%, -15px);
3507 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3508 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3509 }
3510 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
3511 right: calc(50% - 12px);
3512 bottom: -14px;
3513 border-width: 14px 14px 0 15px;
3514 border-color: #c3c4c7 transparent transparent transparent;
3515 }
3516 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3517 content: "";
3518 right: calc(50% - 10px);
3519 bottom: -12px;
3520 border-width: 12px 12px 0 13px;
3521 border-color: #ffffff transparent transparent transparent;
3522 }
3523 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3524 position: absolute;
3525 z-index: -1;
3526 content: "";
3527 border-style: solid;
3528 -webkit-transition-duration: 0.3s;
3529 transition-duration: 0.3s;
3530 transition-property: -webkit-transform;
3531 -webkit-transition-property: -webkit-transform;
3532 transition-property: transform;
3533 transition-property: transform, -webkit-transform;
3534 }
3535 .merchant-flexible-content-control .customize-control-flexible-content-add {
3536 display: block;
3537 -ms-flex-negative: 0;
3538 flex-shrink: 0;
3539 padding: 10px;
3540 text-decoration: none;
3541 }
3542 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
3543 background: #f0f0f1;
3544 }
3545 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
3546 color: #3858E9;
3547 border-color: #3858E9;
3548 background-color: transparent;
3549 margin-top: 10px;
3550 padding: 4px 19px;
3551 }
3552 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
3553 outline: none;
3554 -webkit-box-shadow: none;
3555 box-shadow: none;
3556 background-color: #ffffff;
3557 }
3558 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
3559 display: none;
3560 }
3561
3562 .flexible-content-template {
3563 display: none;
3564 }
3565
3566 .merchant-module-page-setting-field-range .merchant-range {
3567 position: relative;
3568 width: 100%;
3569 width: 300px;
3570 display: -webkit-box;
3571 display: -ms-flexbox;
3572 display: flex;
3573 -webkit-box-align: center;
3574 -ms-flex-align: center;
3575 align-items: center;
3576 -webkit-box-pack: justify;
3577 -ms-flex-pack: justify;
3578 justify-content: space-between;
3579 }
3580 .merchant-module-page-setting-field-range input[type=range] {
3581 -webkit-appearance: none;
3582 -moz-appearance: none;
3583 appearance: none;
3584 width: calc(100% - 105px);
3585 height: 2px;
3586 border-radius: 5px;
3587 outline: none;
3588 padding: 0;
3589 margin: 0;
3590 background-color: #ddd;
3591 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
3592 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
3593 }
3594 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb {
3595 -webkit-appearance: none;
3596 appearance: none;
3597 width: 15px;
3598 height: 15px;
3599 border-radius: 50%;
3600 background: #3858E9;
3601 cursor: pointer;
3602 -webkit-transition: background 0.15s ease-in-out;
3603 transition: background 0.15s ease-in-out;
3604 }
3605 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover {
3606 background: #3858E9;
3607 }
3608 .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb {
3609 background: #3858E9;
3610 }
3611 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb {
3612 width: 15px;
3613 height: 15px;
3614 border: 0;
3615 border-radius: 50%;
3616 background: #3858E9;
3617 cursor: pointer;
3618 -moz-transition: background 0.15s ease-in-out;
3619 transition: background 0.15s ease-in-out;
3620 }
3621 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover {
3622 background: #3858E9;
3623 }
3624 .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb {
3625 background: #3858E9;
3626 }
3627 .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb {
3628 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3629 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3630 }
3631 .merchant-module-page-setting-field-range input[type=range]::-moz-range-track {
3632 border: 0;
3633 background: #d7dcdf;
3634 }
3635 .merchant-module-page-setting-field-range input[type=number] {
3636 padding: 12px 25px 12px 10px;
3637 line-height: 1.3em;
3638 width: 100%;
3639 max-width: 85px;
3640 min-height: auto;
3641 border: 1px solid #D6D6D6;
3642 }
3643 .merchant-module-page-setting-field-range input[type=number]:focus {
3644 outline: none;
3645 -webkit-box-shadow: none;
3646 box-shadow: none;
3647 border-color: #3858E9;
3648 }
3649 .merchant-module-page-setting-field-range .merchant-range-unit {
3650 color: #3858E9;
3651 position: absolute;
3652 z-index: 1;
3653 right: 10px;
3654 font-size: 11px;
3655 line-height: 1em;
3656 }
3657
3658 .merchant-module-page-setting-field-color input {
3659 padding: 0 10px;
3660 line-height: 1em;
3661 width: 100%;
3662 max-width: 254px;
3663 min-height: auto;
3664 border: 1px solid #D6D6D6;
3665 }
3666 .merchant-module-page-setting-field-color input:focus {
3667 outline: none;
3668 -webkit-box-shadow: none;
3669 box-shadow: none;
3670 border-color: #3858E9;
3671 }
3672 .merchant-module-page-setting-field-color .merchant-color {
3673 display: -webkit-box;
3674 display: -ms-flexbox;
3675 display: flex;
3676 grid-gap: 10px;
3677 }
3678 .merchant-module-page-setting-field-color .merchant-color-picker {
3679 cursor: pointer;
3680 width: 36px;
3681 height: 36px;
3682 border: 1px solid rgba(0, 0, 0, 0.1);
3683 border-radius: 4px;
3684 }
3685
3686 .merchant-module-page-settings-dimensions {
3687 display: -webkit-box;
3688 display: -ms-flexbox;
3689 display: flex;
3690 grid-gap: 10px;
3691 }
3692 .merchant-module-page-settings-dimensions > div {
3693 display: -webkit-box;
3694 display: -ms-flexbox;
3695 display: flex;
3696 -webkit-box-orient: vertical;
3697 -webkit-box-direction: normal;
3698 -ms-flex-direction: column;
3699 flex-direction: column;
3700 }
3701 .merchant-module-page-settings-dimensions label {
3702 color: gray;
3703 font-size: 12px;
3704 margin-top: 7px;
3705 }
3706 .merchant-module-page-settings-dimensions input {
3707 max-width: 70px;
3708 width: 100%;
3709 font-size: 12px;
3710 border: 1px solid #D6D6D6;
3711 }
3712
3713 .merchant-module-page-settings-unit {
3714 margin-bottom: 10px;
3715 }
3716 .merchant-module-page-settings-unit select {
3717 font-size: 13px;
3718 border: 0;
3719 }
3720
3721 .merchant-module-page-settings-devices {
3722 display: -webkit-box;
3723 display: -ms-flexbox;
3724 display: flex;
3725 -webkit-column-gap: 10px;
3726 -moz-column-gap: 10px;
3727 column-gap: 10px;
3728 -webkit-box-pack: end;
3729 -ms-flex-pack: end;
3730 justify-content: flex-end;
3731 }
3732 .merchant-module-page-settings-devices button {
3733 border: 0;
3734 background: transparent;
3735 padding: 0;
3736 cursor: pointer;
3737 }
3738 .merchant-module-page-settings-devices button.active {
3739 color: #3858e9;
3740 }
3741 .merchant-module-page-settings-devices button:hover {
3742 color: #3858e9;
3743 }
3744 .merchant-module-page-settings-devices button i {
3745 font-size: 14px;
3746 line-height: 20px;
3747 width: auto;
3748 }
3749
3750 .merchant-module-page-settings-device-container:not(.active) {
3751 display: none;
3752 }
3753
3754 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
3755 max-width: 320px;
3756 }
3757 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
3758 margin-bottom: -30px;
3759 margin-top: 0;
3760 }
3761
3762 .merchant-module-page-setting-field-warning {
3763 padding: 8px 10px;
3764 font-size: 14px;
3765 line-height: 1.6;
3766 color: #1D2327;
3767 border-radius: 4px;
3768 border: 1px solid #D72C0D;
3769 background-color: #FFF4F4;
3770 }
3771
3772 .merchant-module-page-setting-field-divider {
3773 border-bottom: 1px solid #F0F0F1;
3774 }
3775 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
3776 font-size: 16px;
3777 }
3778
3779 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
3780 display: -webkit-box;
3781 display: -ms-flexbox;
3782 display: flex;
3783 grid-gap: 5px;
3784 -ms-flex-wrap: wrap;
3785 flex-wrap: wrap;
3786 margin-bottom: 15px;
3787 }
3788 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
3789 display: none;
3790 }
3791 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
3792 position: relative;
3793 display: -webkit-box;
3794 display: -ms-flexbox;
3795 display: flex;
3796 -webkit-box-align: center;
3797 -ms-flex-align: center;
3798 align-items: center;
3799 -webkit-box-pack: center;
3800 -ms-flex-pack: center;
3801 justify-content: center;
3802 border-radius: 4px;
3803 padding: 2px;
3804 border: 1px solid #eee;
3805 background-color: #fff;
3806 }
3807 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
3808 cursor: -webkit-grab;
3809 cursor: grab;
3810 width: 100%;
3811 height: 100%;
3812 max-height: 75px;
3813 -o-object-fit: cover;
3814 object-fit: cover;
3815 }
3816 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
3817 cursor: -webkit-grabbing;
3818 cursor: grabbing;
3819 }
3820 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
3821 cursor: pointer;
3822 position: absolute;
3823 z-index: 1;
3824 top: 5px;
3825 right: 5px;
3826 width: 16px;
3827 height: 16px;
3828 display: -webkit-box;
3829 display: -ms-flexbox;
3830 display: flex;
3831 -webkit-box-pack: center;
3832 -ms-flex-pack: center;
3833 justify-content: center;
3834 -webkit-box-align: center;
3835 -ms-flex-align: center;
3836 align-items: center;
3837 color: #fff;
3838 background-color: #c5280c;
3839 font-size: 14px;
3840 line-height: 1em;
3841 border-radius: 16px;
3842 opacity: 0;
3843 -webkit-transition: all 0.2s;
3844 transition: all 0.2s;
3845 }
3846 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
3847 opacity: 1;
3848 }
3849 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
3850 cursor: pointer;
3851 -webkit-user-select: none;
3852 -moz-user-select: none;
3853 -ms-user-select: none;
3854 user-select: none;
3855 display: -webkit-inline-box;
3856 display: -ms-inline-flexbox;
3857 display: inline-flex;
3858 padding: 0.4375rem 1rem;
3859 font-size: 0.875rem;
3860 font-weight: 600;
3861 line-height: 1.5;
3862 white-space: nowrap;
3863 text-transform: none;
3864 text-decoration: none;
3865 color: #212b36;
3866 background-color: #fff;
3867 border: 1px solid #c4cdd5;
3868 border-radius: 0.25rem;
3869 -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);
3870 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);
3871 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);
3872 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);
3873 }
3874 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
3875 outline: none;
3876 -webkit-box-shadow: none;
3877 box-shadow: none;
3878 }
3879 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
3880 visibility: visible !important;
3881 border: 1px dashed #ddd;
3882 background-color: #f9f9f9;
3883 border-radius: 4px;
3884 }
3885
3886 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
3887 display: -webkit-box;
3888 display: -ms-flexbox;
3889 display: flex;
3890 grid-gap: 5px;
3891 -ms-flex-wrap: wrap;
3892 flex-wrap: wrap;
3893 margin-bottom: 15px;
3894 }
3895 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
3896 display: none;
3897 }
3898 .merchant-module-page-setting-field-upload .merchant-upload-image {
3899 position: relative;
3900 display: -webkit-box;
3901 display: -ms-flexbox;
3902 display: flex;
3903 -webkit-box-align: center;
3904 -ms-flex-align: center;
3905 align-items: center;
3906 -webkit-box-pack: center;
3907 -ms-flex-pack: center;
3908 justify-content: center;
3909 border-radius: 4px;
3910 padding: 2px;
3911 border: 1px solid #eee;
3912 background-color: #fff;
3913 }
3914 .merchant-module-page-setting-field-upload .merchant-upload-image img {
3915 cursor: -webkit-grab;
3916 cursor: grab;
3917 width: 100%;
3918 height: 100%;
3919 max-height: 75px;
3920 -o-object-fit: cover;
3921 object-fit: cover;
3922 }
3923 .merchant-module-page-setting-field-upload .merchant-upload-image i {
3924 cursor: pointer;
3925 position: absolute;
3926 z-index: 1;
3927 top: 5px;
3928 right: 5px;
3929 width: 16px;
3930 height: 16px;
3931 display: -webkit-box;
3932 display: -ms-flexbox;
3933 display: flex;
3934 -webkit-box-pack: center;
3935 -ms-flex-pack: center;
3936 justify-content: center;
3937 -webkit-box-align: center;
3938 -ms-flex-align: center;
3939 align-items: center;
3940 color: #fff;
3941 background-color: #c5280c;
3942 font-size: 14px;
3943 line-height: 1em;
3944 border-radius: 16px;
3945 opacity: 0;
3946 -webkit-transition: all 0.2s;
3947 transition: all 0.2s;
3948 }
3949 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
3950 opacity: 1;
3951 }
3952 .merchant-module-page-setting-field-upload .merchant-upload-button {
3953 cursor: pointer;
3954 -webkit-user-select: none;
3955 -moz-user-select: none;
3956 -ms-user-select: none;
3957 user-select: none;
3958 display: -webkit-inline-box;
3959 display: -ms-inline-flexbox;
3960 display: inline-flex;
3961 padding: 0.4375rem 1rem;
3962 font-size: 0.875rem;
3963 font-weight: 600;
3964 line-height: 1.5;
3965 white-space: nowrap;
3966 text-transform: none;
3967 text-decoration: none;
3968 color: #212b36;
3969 background-color: #fff;
3970 border: 1px solid #c4cdd5;
3971 border-radius: 0.25rem;
3972 -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);
3973 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);
3974 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);
3975 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);
3976 }
3977 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
3978 outline: none;
3979 -webkit-box-shadow: none;
3980 box-shadow: none;
3981 }
3982
3983 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
3984 display: -webkit-box;
3985 display: -ms-flexbox;
3986 display: flex;
3987 -webkit-box-pack: start;
3988 -ms-flex-pack: start;
3989 justify-content: flex-start;
3990 }
3991 .merchant-module-page-setting-field-switcher input {
3992 display: none;
3993 }
3994 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
3995 margin-left: 0;
3996 background: #3858E9;
3997 }
3998 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
3999 right: 1px;
4000 }
4001 .merchant-module-page-setting-field-switcher .toggle-switch {
4002 float: right;
4003 position: relative;
4004 width: 36px;
4005 margin-top: 2px;
4006 -webkit-user-select: none;
4007 -moz-user-select: none;
4008 -ms-user-select: none;
4009 user-select: none;
4010 }
4011 .merchant-module-page-setting-field-switcher .toggle-switch-label {
4012 position: relative;
4013 display: inline-block;
4014 overflow: hidden;
4015 cursor: pointer;
4016 border-radius: 20px;
4017 padding: 0;
4018 margin: 0;
4019 width: 36px;
4020 }
4021 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
4022 display: block;
4023 width: 200%;
4024 margin-left: -100%;
4025 background: #c8c8c8;
4026 height: 18px;
4027 }
4028 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
4029 display: block;
4030 width: 12px;
4031 height: 12px;
4032 margin: 3px;
4033 background-color: #fff;
4034 position: absolute;
4035 top: 0;
4036 bottom: 0;
4037 right: 18px;
4038 border-radius: 20px;
4039 -webkit-transition: all 0.1s ease-in 0s;
4040 transition: all 0.1s ease-in 0s;
4041 }
4042
4043 .merchant-module-alert {
4044 position: fixed;
4045 top: 0;
4046 left: 0;
4047 right: 0;
4048 bottom: 0;
4049 z-index: 99999;
4050 display: -webkit-box;
4051 display: -ms-flexbox;
4052 display: flex;
4053 -webkit-box-pack: center;
4054 -ms-flex-pack: center;
4055 justify-content: center;
4056 -webkit-box-align: center;
4057 -ms-flex-align: center;
4058 align-items: center;
4059 background-color: rgba(0, 0, 0, 0.6);
4060 opacity: 0;
4061 visibility: hidden;
4062 -webkit-user-select: none;
4063 -moz-user-select: none;
4064 -ms-user-select: none;
4065 user-select: none;
4066 pointer-events: none;
4067 -webkit-transition: all 0.2s;
4068 transition: all 0.2s;
4069 }
4070 .merchant-module-alert.merchant-show {
4071 -webkit-user-select: auto;
4072 -moz-user-select: auto;
4073 -ms-user-select: auto;
4074 user-select: auto;
4075 pointer-events: auto;
4076 opacity: 1;
4077 visibility: visible;
4078 }
4079
4080 .merchant-module-alert-wrapper {
4081 display: -webkit-box;
4082 display: -ms-flexbox;
4083 display: flex;
4084 -webkit-box-orient: vertical;
4085 -webkit-box-direction: normal;
4086 -ms-flex-direction: column;
4087 flex-direction: column;
4088 width: 640px;
4089 max-width: 90%;
4090 border-radius: 4px;
4091 background-color: #fff;
4092 }
4093
4094 .merchant-module-alert-header {
4095 display: -webkit-box;
4096 display: -ms-flexbox;
4097 display: flex;
4098 -webkit-box-align: center;
4099 -ms-flex-align: center;
4100 align-items: center;
4101 -webkit-box-pack: justify;
4102 -ms-flex-pack: justify;
4103 justify-content: space-between;
4104 padding: 20px 30px;
4105 }
4106 .merchant-module-alert-header strong {
4107 font-size: 18px;
4108 line-height: 1em;
4109 }
4110 .merchant-module-alert-header a {
4111 position: relative;
4112 right: -5px;
4113 display: -webkit-box;
4114 display: -ms-flexbox;
4115 display: flex;
4116 color: #212121;
4117 text-decoration: none;
4118 -webkit-transition: all 0.2s;
4119 transition: all 0.2s;
4120 }
4121 .merchant-module-alert-header a:hover {
4122 opacity: 0.6;
4123 }
4124 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
4125 outline: none;
4126 -webkit-box-shadow: none;
4127 box-shadow: none;
4128 }
4129 .merchant-module-alert-header i {
4130 font-size: 32px;
4131 line-height: 1em;
4132 width: auto;
4133 height: auto;
4134 }
4135
4136 .merchant-module-alert-content {
4137 display: -webkit-box;
4138 display: -ms-flexbox;
4139 display: flex;
4140 -webkit-box-orient: vertical;
4141 -webkit-box-direction: normal;
4142 -ms-flex-direction: column;
4143 flex-direction: column;
4144 grid-gap: 20px;
4145 padding: 0 30px 30px 30px;
4146 }
4147 .merchant-module-alert-content p {
4148 margin: 0;
4149 padding: 0;
4150 font-size: 15px;
4151 font-weight: 500;
4152 color: #757575;
4153 }
4154 .merchant-module-alert-content figure {
4155 display: -webkit-box;
4156 display: -ms-flexbox;
4157 display: flex;
4158 margin: 0;
4159 padding: 0;
4160 }
4161 .merchant-module-alert-content img {
4162 max-width: 100%;
4163 }
4164
4165 .merchant-module-alert-footer {
4166 display: -webkit-box;
4167 display: -ms-flexbox;
4168 display: flex;
4169 -webkit-box-pack: end;
4170 -ms-flex-pack: end;
4171 justify-content: flex-end;
4172 padding: 30px;
4173 }
4174 .merchant-module-alert-footer a {
4175 font-weight: bold;
4176 font-size: 14px;
4177 padding: 10px 15px;
4178 text-decoration: none;
4179 border-radius: 4px;
4180 color: #212121;
4181 border: 1px solid #e5e5e5;
4182 }
4183 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
4184 outline: none;
4185 -webkit-box-shadow: none;
4186 box-shadow: none;
4187 }
4188
4189 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
4190 pointer-events: none;
4191 opacity: 0.8;
4192 }
4193 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
4194 opacity: 0.5;
4195 }
4196 .merchant-module-page-setting-field-inner.disabled .merchant-range {
4197 opacity: 0.5;
4198 }
4199 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
4200 opacity: 0.5;
4201 }
4202
4203 /* Utils */
4204 .merchant-height-auto {
4205 height: auto;
4206 }
4207
4208 /* Admin Footer Text */
4209 .merchant-admin-page .merchant-admin-footer-text-link {
4210 display: inline-block;
4211 padding-right: 5px;
4212 color: #3858E9;
4213 }
4214 .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 {
4215 color: #3858E9;
4216 }
4217
4218 .merchant-admin-page-module #wpfooter {
4219 display: none;
4220 }
4221 .merchant-admin-page-module #wpbody-content {
4222 padding-bottom: 30px;
4223 }
4224
4225 .merchant-module-footer-text {
4226 display: -webkit-box;
4227 display: -ms-flexbox;
4228 display: flex;
4229 grid-gap: 5px;
4230 -webkit-box-pack: center;
4231 -ms-flex-pack: center;
4232 justify-content: center;
4233 text-align: center;
4234 margin-top: 37px;
4235 }
4236 .merchant-module-footer-text i {
4237 color: #3858E9;
4238 }
4239
4240 /* Responsive */
4241 @media (max-width: 991px) {
4242 .merchant-wrap {
4243 display: -webkit-box;
4244 display: -ms-flexbox;
4245 display: flex;
4246 -webkit-box-orient: vertical;
4247 -webkit-box-direction: normal;
4248 -ms-flex-direction: column;
4249 flex-direction: column;
4250 grid-gap: 20px;
4251 }
4252 .merchant-modules-header-shortlinks {
4253 margin: 0;
4254 }
4255 .merchant-modules-header {
4256 -webkit-box-orient: vertical;
4257 -webkit-box-direction: normal;
4258 -ms-flex-direction: column;
4259 flex-direction: column;
4260 grid-gap: 20px;
4261 }
4262 .merchant-module-page-header-content {
4263 width: 100%;
4264 }
4265 .merchant-module-page-desc {
4266 max-width: none;
4267 }
4268 .merchant-module-page-header-placeholder {
4269 display: none;
4270 }
4271 .merchant-modules-header-image {
4272 display: none;
4273 }
4274 .merchant-modules-list {
4275 grid-template-columns: repeat(1, minmax(0, 1fr));
4276 }
4277 .merchant-modules-header-status {
4278 margin-bottom: 0;
4279 }
4280 .merchant-module-page-setting-box {
4281 -webkit-box-orient: vertical;
4282 -webkit-box-direction: normal;
4283 -ms-flex-direction: column;
4284 flex-direction: column;
4285 grid-gap: 20px;
4286 }
4287 .merchant-module-page-setting-title,
4288 .merchant-module-page-setting-fields {
4289 width: 100%;
4290 }
4291 .merchant-module-page-body {
4292 -webkit-box-orient: vertical;
4293 -webkit-box-direction: reverse;
4294 -ms-flex-direction: column-reverse;
4295 flex-direction: column-reverse;
4296 }
4297 .merchant-module-page-content {
4298 width: 100%;
4299 }
4300 .merchant-module-page-preview {
4301 margin-left: 0;
4302 margin-bottom: 20px;
4303 width: 100%;
4304 }
4305 }