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

4,360 lines 116.3 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_multiline textarea,
2603 .merchant-module-page-setting-field-textarea textarea,
2604 .merchant-module-page-setting-field-textarea_code textarea {
2605 padding: 12px;
2606 line-height: 1em;
2607 width: 100%;
2608 max-width: 100%;
2609 min-height: 120px;
2610 border: 1px solid #D6D6D6;
2611 }
2612 .merchant-module-page-setting-field-textarea_multiline textarea:focus,
2613 .merchant-module-page-setting-field-textarea textarea:focus,
2614 .merchant-module-page-setting-field-textarea_code textarea:focus {
2615 outline: none;
2616 -webkit-box-shadow: none;
2617 box-shadow: none;
2618 border-color: #3858E9;
2619 }
2620
2621 .merchant-code-snippets-textarea textarea,
2622 .merchant-code-snippets-textarea_code textarea {
2623 min-height: 200px;
2624 }
2625
2626 .merchant-module-page-setting-field-radio div,
2627 .merchant-module-page-setting-field-radio_alt div,
2628 .merchant-module-page-setting-field-checkbox div {
2629 display: -webkit-box;
2630 display: -ms-flexbox;
2631 display: flex;
2632 grid-gap: 30px;
2633 }
2634 .merchant-module-page-setting-field-radio label,
2635 .merchant-module-page-setting-field-radio_alt label,
2636 .merchant-module-page-setting-field-checkbox label {
2637 display: -webkit-box;
2638 display: -ms-flexbox;
2639 display: flex;
2640 grid-gap: 12px;
2641 -webkit-box-align: center;
2642 -ms-flex-align: center;
2643 align-items: center;
2644 -webkit-user-select: none;
2645 -moz-user-select: none;
2646 -ms-user-select: none;
2647 user-select: none;
2648 }
2649 .merchant-module-page-setting-field-radio span,
2650 .merchant-module-page-setting-field-radio_alt span,
2651 .merchant-module-page-setting-field-checkbox span {
2652 font-size: 14px;
2653 font-weight: 400;
2654 color: #1D2327;
2655 }
2656 .merchant-module-page-setting-field-radio input,
2657 .merchant-module-page-setting-field-radio_alt input,
2658 .merchant-module-page-setting-field-checkbox input {
2659 -ms-flex-negative: 0;
2660 flex-shrink: 0;
2661 margin: 0;
2662 width: 20px;
2663 height: 20px;
2664 border: 1px solid #D6D6D6;
2665 background-color: #fff;
2666 display: -webkit-inline-box;
2667 display: -ms-inline-flexbox;
2668 display: inline-flex;
2669 -webkit-box-align: center;
2670 -ms-flex-align: center;
2671 align-items: center;
2672 -webkit-box-pack: center;
2673 -ms-flex-pack: center;
2674 justify-content: center;
2675 -webkit-transition: none;
2676 transition: none;
2677 -webkit-box-sizing: border-box;
2678 box-sizing: border-box;
2679 -webkit-box-shadow: none;
2680 box-shadow: none;
2681 }
2682 .merchant-module-page-setting-field-radio input:checked,
2683 .merchant-module-page-setting-field-radio_alt input:checked,
2684 .merchant-module-page-setting-field-checkbox input:checked {
2685 -webkit-transition: none;
2686 transition: none;
2687 }
2688 .merchant-module-page-setting-field-radio input:checked::before,
2689 .merchant-module-page-setting-field-radio_alt input:checked::before,
2690 .merchant-module-page-setting-field-checkbox input:checked::before {
2691 content: "";
2692 margin: 0;
2693 padding: 0;
2694 -webkit-box-sizing: border-box;
2695 box-sizing: border-box;
2696 -webkit-transition: none;
2697 transition: none;
2698 }
2699 .merchant-module-page-setting-field-radio input[type=checkbox],
2700 .merchant-module-page-setting-field-radio_alt input[type=checkbox],
2701 .merchant-module-page-setting-field-checkbox input[type=checkbox] {
2702 border-radius: 6px;
2703 }
2704 .merchant-module-page-setting-field-radio input[type=checkbox]:focus,
2705 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus,
2706 .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus {
2707 border-color: #fff;
2708 -webkit-box-shadow: 0 0 0 2px #3858E9;
2709 box-shadow: 0 0 0 2px #3858E9;
2710 }
2711 .merchant-module-page-setting-field-radio input[type=checkbox]:checked,
2712 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked,
2713 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked {
2714 border-color: #fff;
2715 background-color: #3858E9;
2716 }
2717 .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before,
2718 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before,
2719 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before {
2720 width: 100%;
2721 height: 100%;
2722 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");
2723 background-repeat: no-repeat;
2724 background-position: 3px 4px;
2725 }
2726 .merchant-module-page-setting-field-radio input[type=radio],
2727 .merchant-module-page-setting-field-radio_alt input[type=radio],
2728 .merchant-module-page-setting-field-checkbox input[type=radio] {
2729 border-radius: 100%;
2730 }
2731 .merchant-module-page-setting-field-radio input[type=radio]:focus,
2732 .merchant-module-page-setting-field-radio_alt input[type=radio]:focus,
2733 .merchant-module-page-setting-field-checkbox input[type=radio]:focus {
2734 border-color: #fff;
2735 -webkit-box-shadow: none;
2736 box-shadow: none;
2737 }
2738 .merchant-module-page-setting-field-radio input[type=radio]:checked,
2739 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked,
2740 .merchant-module-page-setting-field-checkbox input[type=radio]:checked {
2741 border-color: #3858E9;
2742 background-color: #fff;
2743 -webkit-box-shadow: 0 0 0 1px #3858E9;
2744 box-shadow: 0 0 0 1px #3858E9;
2745 }
2746 .merchant-module-page-setting-field-radio input[type=radio]:checked::before,
2747 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before,
2748 .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before {
2749 width: 12px;
2750 height: 12px;
2751 border-radius: 12px;
2752 background-color: #3858E9;
2753 }
2754
2755 @media (max-width: 1300px) {
2756 .merchant-module-page-setting-field-radio div {
2757 grid-gap: 20px;
2758 }
2759 }
2760 .merchant-module-page-setting-field-radio span {
2761 opacity: 0.8;
2762 }
2763 .merchant-module-page-setting-field-radio input[type=radio]:checked + span {
2764 opacity: 1;
2765 }
2766
2767 .merchant-module-page-setting-field-radio_alt div {
2768 display: -webkit-box;
2769 display: -ms-flexbox;
2770 display: flex;
2771 grid-gap: 10px;
2772 -webkit-box-orient: vertical;
2773 -webkit-box-direction: normal;
2774 -ms-flex-direction: column;
2775 flex-direction: column;
2776 }
2777 .merchant-module-page-setting-field-radio_alt label span {
2778 font-size: 14px;
2779 font-weight: 400;
2780 color: #1D2327;
2781 }
2782 .merchant-module-page-setting-field-radio_alt p {
2783 margin: 0;
2784 color: #757575;
2785 }
2786 .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner {
2787 grid-gap: 30px;
2788 -webkit-box-orient: vertical;
2789 -webkit-box-direction: normal;
2790 -ms-flex-direction: column;
2791 flex-direction: column;
2792 }
2793
2794 .merchant-module-page-setting-field-content {
2795 max-width: 60vw;
2796 }
2797 .merchant-module-page-setting-field-content a {
2798 color: #3858E9;
2799 }
2800 .merchant-module-page-setting-field-content a:focus {
2801 -webkit-box-shadow: none;
2802 box-shadow: none;
2803 }
2804
2805 .merchant-tag-pre-orders {
2806 display: -webkit-box;
2807 display: -ms-flexbox;
2808 display: flex;
2809 grid-gap: 16px;
2810 }
2811 .merchant-tag-pre-orders a {
2812 display: -webkit-box;
2813 display: -ms-flexbox;
2814 display: flex;
2815 -webkit-box-align: center;
2816 -ms-flex-align: center;
2817 align-items: center;
2818 -webkit-box-pack: center;
2819 -ms-flex-pack: center;
2820 justify-content: center;
2821 margin: 0;
2822 padding: 8px 26px;
2823 font-size: 14px;
2824 line-height: 20px;
2825 -webkit-user-select: none;
2826 -moz-user-select: none;
2827 -ms-user-select: none;
2828 user-select: none;
2829 min-width: 145px;
2830 font-weight: 500;
2831 text-decoration: none;
2832 border-radius: 4px;
2833 color: #202223;
2834 border: 1px solid #C9CCCF;
2835 background-color: #fff;
2836 }
2837 .merchant-tag-pre-orders a:focus, .merchant-tag-pre-orders a:active {
2838 outline: none;
2839 -webkit-box-shadow: none;
2840 box-shadow: none;
2841 }
2842 .merchant-tag-pre-orders p {
2843 display: -webkit-box;
2844 display: -ms-flexbox;
2845 display: flex;
2846 -webkit-box-orient: vertical;
2847 -webkit-box-direction: normal;
2848 -ms-flex-direction: column;
2849 flex-direction: column;
2850 -webkit-box-align: start;
2851 -ms-flex-align: start;
2852 align-items: flex-start;
2853 grid-gap: 16px;
2854 font-size: 14px;
2855 line-height: 20px;
2856 margin: 0;
2857 padding: 0;
2858 }
2859 .merchant-tag-pre-orders p i {
2860 -ms-flex-negative: 0;
2861 flex-shrink: 0;
2862 }
2863
2864 .merchant-module-page-setting-field-select select,
2865 .merchant-module-page-setting-field-select_ajax select,
2866 .merchant-module-page-setting-field-select_size_chart select {
2867 padding: 12px 20px 12px 12px;
2868 line-height: 1.3em;
2869 width: 100%;
2870 max-width: 100%;
2871 min-height: auto;
2872 border-radius: 6px;
2873 color: #2F2F2F;
2874 border: 1px solid #D6D6D6;
2875 }
2876 .merchant-module-page-setting-field-select select:hover,
2877 .merchant-module-page-setting-field-select_ajax select:hover,
2878 .merchant-module-page-setting-field-select_size_chart select:hover {
2879 color: #2F2F2F;
2880 }
2881 .merchant-module-page-setting-field-select select:focus,
2882 .merchant-module-page-setting-field-select_ajax select:focus,
2883 .merchant-module-page-setting-field-select_size_chart select:focus {
2884 outline: none;
2885 -webkit-box-shadow: none;
2886 box-shadow: none;
2887 border-color: #3858E9;
2888 }
2889 .merchant-module-page-setting-field-select select option,
2890 .merchant-module-page-setting-field-select_ajax select option,
2891 .merchant-module-page-setting-field-select_size_chart select option {
2892 color: #2F2F2F;
2893 }
2894 .merchant-module-page-setting-field-select .select2-container .select2-selection--single,
2895 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single,
2896 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single {
2897 height: 44px !important;
2898 border: solid #d6d6d6 1px;
2899 }
2900 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
2901 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
2902 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
2903 line-height: 41px !important;
2904 }
2905 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple,
2906 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple,
2907 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple {
2908 display: -webkit-box;
2909 display: -ms-flexbox;
2910 display: flex;
2911 -webkit-box-align: center;
2912 -ms-flex-align: center;
2913 align-items: center;
2914 border: solid #d6d6d6 1px;
2915 }
2916 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__rendered,
2917 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__rendered,
2918 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__rendered {
2919 padding: 5px 10px;
2920 }
2921 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice,
2922 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice,
2923 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice {
2924 margin-top: 6px;
2925 margin-bottom: 0;
2926 }
2927 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
2928 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
2929 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field {
2930 position: relative;
2931 top: 3px;
2932 margin-top: 0;
2933 }
2934 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-search__field,
2935 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-search__field,
2936 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-search__field {
2937 min-height: 0;
2938 }
2939 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--single,
2940 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--multiple,
2941 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--single,
2942 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--multiple,
2943 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--single,
2944 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--multiple {
2945 border-color: #3858E9;
2946 }
2947 .merchant-module-page-setting-field-select .select2-selection__arrow,
2948 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
2949 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
2950 height: 43px !important;
2951 }
2952
2953 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper {
2954 display: -webkit-box;
2955 display: -ms-flexbox;
2956 display: flex;
2957 grid-gap: 15px;
2958 }
2959 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select {
2960 width: 100%;
2961 }
2962 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number {
2963 width: 100px;
2964 }
2965
2966 .merchant-module-page-setting-field-choices input {
2967 display: none;
2968 }
2969 .merchant-module-page-setting-field-choices input:checked + figure {
2970 border-color: #3858E9;
2971 }
2972 .merchant-module-page-setting-field-choices label {
2973 display: -webkit-box;
2974 display: -ms-flexbox;
2975 display: flex;
2976 position: relative;
2977 }
2978 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
2979 opacity: 1;
2980 visibility: visible;
2981 -webkit-transform: translate3d(-50%, 0, 0);
2982 transform: translate3d(-50%, 0, 0);
2983 }
2984 .merchant-module-page-setting-field-choices figure {
2985 display: -webkit-box;
2986 display: -ms-flexbox;
2987 display: flex;
2988 margin: 0;
2989 padding: 2px;
2990 border-radius: 4px;
2991 border: 2px solid transparent;
2992 }
2993 .merchant-module-page-setting-field-choices .merchant-tooltip {
2994 position: absolute;
2995 z-index: 10;
2996 left: 50%;
2997 bottom: calc(100% + 12px);
2998 padding: 3px 12px;
2999 font-size: 11px;
3000 white-space: nowrap;
3001 opacity: 0;
3002 visibility: hidden;
3003 -webkit-transform: translate3d(-50%, 6px, 0);
3004 transform: translate3d(-50%, 6px, 0);
3005 -webkit-transition: all 0.2s;
3006 transition: all 0.2s;
3007 border-radius: 3px;
3008 color: #f7f7f7;
3009 background-color: #212121;
3010 }
3011 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
3012 content: "";
3013 position: absolute;
3014 left: 50%;
3015 bottom: -12px;
3016 border: 6px solid transparent;
3017 border-top-color: #212121;
3018 -webkit-transform: translate3d(-50%, 0, 0);
3019 transform: translate3d(-50%, 0, 0);
3020 }
3021 .merchant-module-page-setting-field-choices .merchant-choices {
3022 display: -webkit-box;
3023 display: -ms-flexbox;
3024 display: flex;
3025 grid-gap: 10px;
3026 }
3027 .merchant-module-page-setting-field-choices .merchant-choices svg {
3028 width: 20px;
3029 height: 20px;
3030 }
3031
3032 .merchant-module-page-setting-field-buttons input {
3033 display: none;
3034 }
3035 .merchant-module-page-setting-field-buttons input:checked + span {
3036 color: #fff;
3037 background-color: #3858E9;
3038 }
3039 .merchant-module-page-setting-field-buttons label {
3040 display: -webkit-box;
3041 display: -ms-flexbox;
3042 display: flex;
3043 }
3044 .merchant-module-page-setting-field-buttons span {
3045 display: -webkit-box;
3046 display: -ms-flexbox;
3047 display: flex;
3048 -webkit-box-align: center;
3049 -ms-flex-align: center;
3050 align-items: center;
3051 -webkit-box-pack: center;
3052 -ms-flex-pack: center;
3053 justify-content: center;
3054 margin: 0;
3055 padding: 10px 15px;
3056 border-radius: 2px;
3057 -webkit-user-select: none;
3058 -moz-user-select: none;
3059 -ms-user-select: none;
3060 user-select: none;
3061 min-width: 120px;
3062 font-weight: 500;
3063 }
3064 .merchant-module-page-setting-field-buttons .merchant-buttons {
3065 display: -webkit-inline-box;
3066 display: -ms-inline-flexbox;
3067 display: inline-flex;
3068 padding: 3px;
3069 border: 1px solid #D6D6D6;
3070 border-radius: 4px;
3071 }
3072 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
3073 text-decoration: underline;
3074 }
3075 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
3076 text-decoration: line-through;
3077 }
3078 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
3079 text-decoration: overline;
3080 }
3081
3082 .merchant-module-page-setting-field-buttons_alt input {
3083 display: none;
3084 }
3085 .merchant-module-page-setting-field-buttons_alt input:checked + span {
3086 color: #fff;
3087 background-color: #3858E9;
3088 }
3089 .merchant-module-page-setting-field-buttons_alt label {
3090 display: -webkit-box;
3091 display: -ms-flexbox;
3092 display: flex;
3093 }
3094 .merchant-module-page-setting-field-buttons_alt label:hover {
3095 position: relative;
3096 z-index: 10;
3097 }
3098 .merchant-module-page-setting-field-buttons_alt span {
3099 display: -webkit-box;
3100 display: -ms-flexbox;
3101 display: flex;
3102 -webkit-box-align: center;
3103 -ms-flex-align: center;
3104 align-items: center;
3105 -webkit-box-pack: center;
3106 -ms-flex-pack: center;
3107 justify-content: center;
3108 margin: 0;
3109 padding: 10px 15px;
3110 border-radius: 2px;
3111 -webkit-user-select: none;
3112 -moz-user-select: none;
3113 -ms-user-select: none;
3114 user-select: none;
3115 min-width: 120px;
3116 font-weight: 500;
3117 border-radius: 4px;
3118 border: 1px solid #D6D6D6;
3119 background-color: #fff;
3120 }
3121 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
3122 display: -webkit-box;
3123 display: -ms-flexbox;
3124 display: flex;
3125 -ms-flex-wrap: wrap;
3126 flex-wrap: wrap;
3127 grid-gap: 5px;
3128 padding: 3px;
3129 }
3130
3131 .merchant-animated-buttons .merchant-buttons {
3132 display: grid;
3133 grid-template-columns: repeat(5, 1fr);
3134 }
3135 .merchant-animated-buttons span {
3136 width: 100%;
3137 }
3138
3139 @media (max-width: 1470px) {
3140 .merchant-animated-buttons .merchant-buttons {
3141 grid-template-columns: repeat(3, 1fr);
3142 }
3143 }
3144 @media (max-width: 1050px) {
3145 .merchant-animated-buttons .merchant-buttons {
3146 grid-template-columns: repeat(2, 1fr);
3147 }
3148 }
3149 /* Sortable Field */
3150 .merchant-sortable {
3151 max-width: 300px;
3152 }
3153 .merchant-sortable ul.ui-sortable li {
3154 position: relative;
3155 overflow: hidden;
3156 padding: 0;
3157 color: #1E1E1E;
3158 border: 1px solid #ddd;
3159 border-radius: 2px;
3160 text-transform: capitalize;
3161 line-height: 36px;
3162 cursor: -webkit-grab;
3163 cursor: grab;
3164 }
3165 .merchant-sortable ul.ui-sortable li .dashicons {
3166 width: 36px;
3167 height: 36px;
3168 -ms-flex-preferred-size: 36px;
3169 flex-basis: 36px;
3170 display: -webkit-box;
3171 display: -ms-flexbox;
3172 display: flex;
3173 -webkit-box-pack: center;
3174 -ms-flex-pack: center;
3175 justify-content: center;
3176 -webkit-box-align: center;
3177 -ms-flex-align: center;
3178 align-items: center;
3179 text-align: center;
3180 -webkit-box-sizing: border-box;
3181 box-sizing: border-box;
3182 }
3183 .merchant-sortable ul.ui-sortable li .dashicons:before {
3184 font-size: 16px;
3185 line-height: 1em;
3186 }
3187 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
3188 float: left;
3189 padding: 0;
3190 margin: 0 10px 0 0;
3191 border: none;
3192 border-right: 1px solid #ddd;
3193 }
3194 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
3195 float: right;
3196 color: #3858E9;
3197 padding: 0;
3198 margin: 0 0 0 10px;
3199 border: none;
3200 border-left: 1px solid #ddd;
3201 }
3202 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
3203 cursor: pointer;
3204 }
3205 .merchant-sortable ul.ui-sortable li.invisible {
3206 color: #6E7780;
3207 border: 1px solid #CAD2F6;
3208 background-color: #EBEEFB;
3209 }
3210 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
3211 content: "\f530";
3212 }
3213
3214 /* Sortable Repeater Field */
3215 .merchant-module-page-setting-field-flexible_content .merchant-module-page-setting-field-title {
3216 margin-bottom: 10px;
3217 }
3218
3219 .merchant-sortable-repeater-control {
3220 max-width: 100%;
3221 }
3222 .merchant-sortable-repeater-control .sortable {
3223 list-style-type: none;
3224 margin: 0;
3225 padding: 0;
3226 }
3227 .merchant-sortable-repeater-control .sortable input[type=text] {
3228 width: 100%;
3229 margin: 0;
3230 border-radius: 4px 0 0 4px;
3231 border: 1px solid #D6D6D6;
3232 padding: 12px;
3233 line-height: 1.3em;
3234 }
3235 .merchant-sortable-repeater-control .sortable input[type=text]:focus {
3236 border-color: #3858E9;
3237 outline: none;
3238 -webkit-box-shadow: none;
3239 box-shadow: none;
3240 }
3241 .merchant-sortable-repeater-control .sortable div {
3242 cursor: -webkit-grab;
3243 cursor: grab;
3244 margin-bottom: 7px;
3245 }
3246 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete {
3247 display: -webkit-box;
3248 display: -ms-flexbox;
3249 display: flex;
3250 -webkit-box-align: center;
3251 -ms-flex-align: center;
3252 align-items: center;
3253 -webkit-box-pack: center;
3254 -ms-flex-pack: center;
3255 justify-content: center;
3256 margin: 0;
3257 width: 44px;
3258 height: auto;
3259 font-size: 1.3em;
3260 line-height: 34px;
3261 color: #d4d4d4;
3262 background: #fff;
3263 padding: 0;
3264 vertical-align: top;
3265 margin-left: -1px;
3266 border: 1px solid #D6D6D6;
3267 text-decoration: none;
3268 }
3269 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt {
3270 width: 100%;
3271 text-decoration: none;
3272 margin: 0;
3273 font-weight: 600;
3274 color: #50575e;
3275 font-size: 1.1em;
3276 line-height: 34px;
3277 height: auto;
3278 }
3279 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus {
3280 outline: none;
3281 -webkit-box-shadow: none;
3282 box-shadow: none;
3283 }
3284 .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 {
3285 color: #a7a7a7;
3286 }
3287 .merchant-sortable-repeater-control .repeater {
3288 display: -webkit-box;
3289 display: -ms-flexbox;
3290 display: flex;
3291 }
3292 .merchant-sortable-repeater-control .repeater .dashicons-menu {
3293 display: -webkit-box;
3294 display: -ms-flexbox;
3295 display: flex;
3296 -webkit-box-align: center;
3297 -ms-flex-align: center;
3298 align-items: center;
3299 -webkit-box-pack: center;
3300 -ms-flex-pack: center;
3301 justify-content: center;
3302 margin: 0;
3303 width: 44px;
3304 height: auto;
3305 font-size: 1.3em;
3306 line-height: 34px;
3307 background: #fff;
3308 padding: 0;
3309 vertical-align: top;
3310 margin-left: -1px;
3311 border: 1px solid #D6D6D6;
3312 }
3313 .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
3314 color: #a7a7a7;
3315 }
3316 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add {
3317 color: #3858E9;
3318 border-color: #3858E9;
3319 background-color: transparent;
3320 margin-top: 10px;
3321 padding: 4px 19px;
3322 }
3323 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus {
3324 outline: none;
3325 -webkit-box-shadow: none;
3326 box-shadow: none;
3327 background-color: #ffffff;
3328 }
3329 .merchant-sortable-repeater-control.disable-sorting .dashicons-menu {
3330 display: none;
3331 }
3332
3333 /* Flexible Content Field */
3334 .merchant-flexible-content-control {
3335 max-width: 100%;
3336 }
3337 .merchant-flexible-content-control .sortable {
3338 list-style-type: none;
3339 margin: 0;
3340 padding: 0;
3341 }
3342 .merchant-flexible-content-control .sortable input[type=text] {
3343 width: 100%;
3344 margin: 0;
3345 border-radius: 4px 0 0 4px;
3346 border: 1px solid #D6D6D6;
3347 padding: 8px;
3348 line-height: 1.3em;
3349 }
3350 .merchant-flexible-content-control .sortable input[type=text]:focus {
3351 border-color: #3858E9;
3352 outline: none;
3353 -webkit-box-shadow: none;
3354 box-shadow: none;
3355 }
3356 .merchant-flexible-content-control .customize-control-flexible-content-move {
3357 cursor: -webkit-grab;
3358 cursor: grab;
3359 }
3360 .merchant-flexible-content-control .customize-control-flexible-content-delete {
3361 display: -webkit-box;
3362 display: -ms-flexbox;
3363 display: flex;
3364 -webkit-box-align: center;
3365 -ms-flex-align: center;
3366 align-items: center;
3367 -webkit-box-pack: center;
3368 -ms-flex-pack: center;
3369 justify-content: center;
3370 margin: 0;
3371 width: 40px;
3372 height: auto;
3373 font-size: 1.3em;
3374 line-height: 34px;
3375 color: #d4d4d4;
3376 background: #fff;
3377 padding: 0;
3378 vertical-align: top;
3379 margin-left: -1px;
3380 text-decoration: none;
3381 }
3382 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt {
3383 width: 100%;
3384 text-decoration: none;
3385 margin: 0;
3386 font-weight: 600;
3387 color: #50575e;
3388 font-size: 1.1em;
3389 line-height: 34px;
3390 height: auto;
3391 }
3392 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus {
3393 outline: none;
3394 -webkit-box-shadow: none;
3395 box-shadow: none;
3396 }
3397 .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 {
3398 color: #a7a7a7;
3399 }
3400 .merchant-flexible-content-control .merchant-flexible-content.empty {
3401 border: 2px dashed #dcdcde;
3402 min-height: 100px;
3403 margin-bottom: 10px;
3404 }
3405 .merchant-flexible-content-control.default-style .layout {
3406 background: white;
3407 border: 1px solid #c3c4c7;
3408 border-left: 3px solid #3858e9;
3409 }
3410 .merchant-flexible-content-control.default-style .layout .layout-header {
3411 padding: 8px 15px;
3412 }
3413 .merchant-flexible-content-control.default-style .layout .layout-body {
3414 padding: 15px;
3415 }
3416 .merchant-flexible-content-control.table-style .layout .layout-header {
3417 padding-bottom: 8px;
3418 margin-bottom: 15px;
3419 }
3420 .merchant-flexible-content-control.table-style .layout .layout-body {
3421 -webkit-box-orient: horizontal;
3422 -webkit-box-direction: normal;
3423 -ms-flex-direction: row;
3424 flex-direction: row;
3425 }
3426 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
3427 display: none;
3428 }
3429 .merchant-flexible-content-control .layouts {
3430 display: none;
3431 }
3432 .merchant-flexible-content-control .layout {
3433 margin-bottom: 20px;
3434 }
3435 .merchant-flexible-content-control .layout .layout-header {
3436 display: -webkit-box;
3437 display: -ms-flexbox;
3438 display: flex;
3439 -webkit-box-align: center;
3440 -ms-flex-align: center;
3441 align-items: center;
3442 border-bottom: 1px solid #f3f3f3;
3443 }
3444 .merchant-flexible-content-control .layout .layout-count {
3445 border-radius: 50%;
3446 width: 24px;
3447 height: 23px;
3448 border: 1px solid #949494;
3449 text-align: center;
3450 display: -webkit-box;
3451 display: -ms-flexbox;
3452 display: flex;
3453 -webkit-box-pack: center;
3454 -ms-flex-pack: center;
3455 justify-content: center;
3456 -webkit-box-orient: vertical;
3457 -webkit-box-direction: normal;
3458 -ms-flex-direction: column;
3459 flex-direction: column;
3460 font-size: 12px;
3461 font-weight: bold;
3462 margin-right: 10px;
3463 }
3464 .merchant-flexible-content-control .layout .layout-title {
3465 font-size: 14px;
3466 font-weight: bold;
3467 }
3468 .merchant-flexible-content-control .layout .layout-actions {
3469 display: -webkit-box;
3470 display: -ms-flexbox;
3471 display: flex;
3472 margin: 0;
3473 padding: 0;
3474 -webkit-box-pack: end;
3475 -ms-flex-pack: end;
3476 justify-content: flex-end;
3477 -webkit-box-flex: 1;
3478 -ms-flex-positive: 1;
3479 flex-grow: 1;
3480 }
3481 .merchant-flexible-content-control .layout .layout-body {
3482 display: -webkit-box;
3483 display: -ms-flexbox;
3484 display: flex;
3485 -webkit-box-orient: vertical;
3486 -webkit-box-direction: normal;
3487 -ms-flex-direction: column;
3488 flex-direction: column;
3489 grid-gap: 20px;
3490 }
3491 .merchant-flexible-content-control .layout .layout-field.flex-grow {
3492 -webkit-box-flex: 1;
3493 -ms-flex-positive: 1;
3494 flex-grow: 1;
3495 }
3496 .merchant-flexible-content-control .layout .dashicons-menu {
3497 display: -webkit-box;
3498 display: -ms-flexbox;
3499 display: flex;
3500 -webkit-box-align: center;
3501 -ms-flex-align: center;
3502 align-items: center;
3503 -webkit-box-pack: center;
3504 -ms-flex-pack: center;
3505 justify-content: center;
3506 margin: 0;
3507 width: 40px;
3508 height: auto;
3509 font-size: 1.3em;
3510 line-height: 34px;
3511 background: #fff;
3512 padding: 0;
3513 vertical-align: top;
3514 margin-left: -1px;
3515 }
3516 .merchant-flexible-content-control .layout .dashicons-menu:hover {
3517 color: #a7a7a7;
3518 }
3519 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
3520 position: relative;
3521 display: inline-block;
3522 }
3523 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
3524 opacity: 0;
3525 visibility: hidden;
3526 position: absolute;
3527 background-color: #ffffff;
3528 border: 1px solid #c3c4c7;
3529 border-left: 3px solid #3858e9;
3530 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3531 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3532 width: 180px;
3533 bottom: 100%;
3534 display: -webkit-box;
3535 display: -ms-flexbox;
3536 display: flex;
3537 -webkit-box-orient: vertical;
3538 -webkit-box-direction: normal;
3539 -ms-flex-direction: column;
3540 flex-direction: column;
3541 left: 50%;
3542 -webkit-transform: translate(-50%, 10px);
3543 transform: translate(-50%, 10px);
3544 padding: 3px 3px 3px 5px;
3545 }
3546 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
3547 z-index: 10;
3548 opacity: 1;
3549 visibility: visible;
3550 -webkit-transform: translate(-50%, -15px);
3551 transform: translate(-50%, -15px);
3552 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3553 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3554 }
3555 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
3556 right: calc(50% - 12px);
3557 bottom: -14px;
3558 border-width: 14px 14px 0 15px;
3559 border-color: #c3c4c7 transparent transparent transparent;
3560 }
3561 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3562 content: "";
3563 right: calc(50% - 10px);
3564 bottom: -12px;
3565 border-width: 12px 12px 0 13px;
3566 border-color: #ffffff transparent transparent transparent;
3567 }
3568 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3569 position: absolute;
3570 z-index: -1;
3571 content: "";
3572 border-style: solid;
3573 -webkit-transition-duration: 0.3s;
3574 transition-duration: 0.3s;
3575 transition-property: -webkit-transform;
3576 -webkit-transition-property: -webkit-transform;
3577 transition-property: transform;
3578 transition-property: transform, -webkit-transform;
3579 }
3580 .merchant-flexible-content-control .customize-control-flexible-content-add {
3581 display: block;
3582 -ms-flex-negative: 0;
3583 flex-shrink: 0;
3584 padding: 10px;
3585 text-decoration: none;
3586 }
3587 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
3588 background: #f0f0f1;
3589 }
3590 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
3591 color: #3858E9;
3592 border-color: #3858E9;
3593 background-color: transparent;
3594 margin-top: 10px;
3595 padding: 4px 19px;
3596 }
3597 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
3598 outline: none;
3599 -webkit-box-shadow: none;
3600 box-shadow: none;
3601 background-color: #ffffff;
3602 }
3603 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
3604 display: none;
3605 }
3606
3607 .flexible-content-template {
3608 display: none;
3609 }
3610
3611 .merchant-module-page-setting-field-range .merchant-range {
3612 position: relative;
3613 width: 100%;
3614 width: 300px;
3615 display: -webkit-box;
3616 display: -ms-flexbox;
3617 display: flex;
3618 -webkit-box-align: center;
3619 -ms-flex-align: center;
3620 align-items: center;
3621 -webkit-box-pack: justify;
3622 -ms-flex-pack: justify;
3623 justify-content: space-between;
3624 }
3625 .merchant-module-page-setting-field-range input[type=range] {
3626 -webkit-appearance: none;
3627 -moz-appearance: none;
3628 appearance: none;
3629 width: calc(100% - 105px);
3630 height: 2px;
3631 border-radius: 5px;
3632 outline: none;
3633 padding: 0;
3634 margin: 0;
3635 background-color: #ddd;
3636 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
3637 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
3638 }
3639 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb {
3640 -webkit-appearance: none;
3641 appearance: none;
3642 width: 15px;
3643 height: 15px;
3644 border-radius: 50%;
3645 background: #3858E9;
3646 cursor: pointer;
3647 -webkit-transition: background 0.15s ease-in-out;
3648 transition: background 0.15s ease-in-out;
3649 }
3650 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover {
3651 background: #3858E9;
3652 }
3653 .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb {
3654 background: #3858E9;
3655 }
3656 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb {
3657 width: 15px;
3658 height: 15px;
3659 border: 0;
3660 border-radius: 50%;
3661 background: #3858E9;
3662 cursor: pointer;
3663 -moz-transition: background 0.15s ease-in-out;
3664 transition: background 0.15s ease-in-out;
3665 }
3666 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover {
3667 background: #3858E9;
3668 }
3669 .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb {
3670 background: #3858E9;
3671 }
3672 .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb {
3673 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3674 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3675 }
3676 .merchant-module-page-setting-field-range input[type=range]::-moz-range-track {
3677 border: 0;
3678 background: #d7dcdf;
3679 }
3680 .merchant-module-page-setting-field-range input[type=number] {
3681 padding: 12px 25px 12px 10px;
3682 line-height: 1.3em;
3683 width: 100%;
3684 max-width: 85px;
3685 min-height: auto;
3686 border: 1px solid #D6D6D6;
3687 }
3688 .merchant-module-page-setting-field-range input[type=number]:focus {
3689 outline: none;
3690 -webkit-box-shadow: none;
3691 box-shadow: none;
3692 border-color: #3858E9;
3693 }
3694 .merchant-module-page-setting-field-range .merchant-range-unit {
3695 color: #3858E9;
3696 position: absolute;
3697 z-index: 1;
3698 right: 10px;
3699 font-size: 11px;
3700 line-height: 1em;
3701 }
3702
3703 .merchant-module-page-setting-field-color input {
3704 padding: 0 10px;
3705 line-height: 1em;
3706 width: 100%;
3707 max-width: 254px;
3708 min-height: auto;
3709 border: 1px solid #D6D6D6;
3710 }
3711 .merchant-module-page-setting-field-color input:focus {
3712 outline: none;
3713 -webkit-box-shadow: none;
3714 box-shadow: none;
3715 border-color: #3858E9;
3716 }
3717 .merchant-module-page-setting-field-color .merchant-color {
3718 display: -webkit-box;
3719 display: -ms-flexbox;
3720 display: flex;
3721 grid-gap: 10px;
3722 }
3723 .merchant-module-page-setting-field-color .merchant-color-picker {
3724 cursor: pointer;
3725 width: 36px;
3726 height: 36px;
3727 border: 1px solid rgba(0, 0, 0, 0.1);
3728 border-radius: 4px;
3729 }
3730
3731 .merchant-module-page-settings-dimensions {
3732 display: -webkit-box;
3733 display: -ms-flexbox;
3734 display: flex;
3735 grid-gap: 10px;
3736 }
3737 .merchant-module-page-settings-dimensions > div {
3738 display: -webkit-box;
3739 display: -ms-flexbox;
3740 display: flex;
3741 -webkit-box-orient: vertical;
3742 -webkit-box-direction: normal;
3743 -ms-flex-direction: column;
3744 flex-direction: column;
3745 }
3746 .merchant-module-page-settings-dimensions label {
3747 color: gray;
3748 font-size: 12px;
3749 margin-top: 7px;
3750 }
3751 .merchant-module-page-settings-dimensions input {
3752 max-width: 70px;
3753 width: 100%;
3754 font-size: 12px;
3755 border: 1px solid #D6D6D6;
3756 }
3757
3758 .merchant-module-page-settings-unit {
3759 margin-bottom: 10px;
3760 }
3761 .merchant-module-page-settings-unit select {
3762 font-size: 13px;
3763 border: 0;
3764 }
3765
3766 .merchant-module-page-settings-devices {
3767 display: -webkit-box;
3768 display: -ms-flexbox;
3769 display: flex;
3770 -webkit-column-gap: 10px;
3771 -moz-column-gap: 10px;
3772 column-gap: 10px;
3773 -webkit-box-pack: end;
3774 -ms-flex-pack: end;
3775 justify-content: flex-end;
3776 }
3777 .merchant-module-page-settings-devices button {
3778 border: 0;
3779 background: transparent;
3780 padding: 0;
3781 cursor: pointer;
3782 }
3783 .merchant-module-page-settings-devices button.active {
3784 color: #3858e9;
3785 }
3786 .merchant-module-page-settings-devices button:hover {
3787 color: #3858e9;
3788 }
3789 .merchant-module-page-settings-devices button i {
3790 font-size: 14px;
3791 line-height: 20px;
3792 width: auto;
3793 }
3794
3795 .merchant-module-page-settings-device-container:not(.active) {
3796 display: none;
3797 }
3798
3799 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
3800 max-width: 320px;
3801 }
3802 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
3803 margin-bottom: -30px;
3804 margin-top: 0;
3805 }
3806
3807 .merchant-module-page-setting-field-warning {
3808 padding: 8px 10px;
3809 font-size: 14px;
3810 line-height: 1.6;
3811 color: #1D2327;
3812 border-radius: 4px;
3813 border: 1px solid #D72C0D;
3814 background-color: #FFF4F4;
3815 }
3816
3817 .merchant-module-page-setting-field-info {
3818 padding: 8px 10px;
3819 font-size: 14px;
3820 line-height: 1.6;
3821 color: #1D2327;
3822 border-radius: 4px;
3823 border: 1px solid #0d65d7;
3824 background-color: #e6effa;
3825 }
3826
3827 .merchant-module-page-setting-field-divider {
3828 border-bottom: 1px solid #F0F0F1;
3829 }
3830 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
3831 font-size: 16px;
3832 }
3833
3834 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
3835 display: -webkit-box;
3836 display: -ms-flexbox;
3837 display: flex;
3838 grid-gap: 5px;
3839 -ms-flex-wrap: wrap;
3840 flex-wrap: wrap;
3841 margin-bottom: 15px;
3842 }
3843 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
3844 display: none;
3845 }
3846 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
3847 position: relative;
3848 display: -webkit-box;
3849 display: -ms-flexbox;
3850 display: flex;
3851 -webkit-box-align: center;
3852 -ms-flex-align: center;
3853 align-items: center;
3854 -webkit-box-pack: center;
3855 -ms-flex-pack: center;
3856 justify-content: center;
3857 border-radius: 4px;
3858 padding: 2px;
3859 border: 1px solid #eee;
3860 background-color: #fff;
3861 }
3862 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
3863 cursor: -webkit-grab;
3864 cursor: grab;
3865 width: 100%;
3866 height: 100%;
3867 max-height: 75px;
3868 -o-object-fit: cover;
3869 object-fit: cover;
3870 }
3871 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
3872 cursor: -webkit-grabbing;
3873 cursor: grabbing;
3874 }
3875 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
3876 cursor: pointer;
3877 position: absolute;
3878 z-index: 1;
3879 top: 5px;
3880 right: 5px;
3881 width: 16px;
3882 height: 16px;
3883 display: -webkit-box;
3884 display: -ms-flexbox;
3885 display: flex;
3886 -webkit-box-pack: center;
3887 -ms-flex-pack: center;
3888 justify-content: center;
3889 -webkit-box-align: center;
3890 -ms-flex-align: center;
3891 align-items: center;
3892 color: #fff;
3893 background-color: #c5280c;
3894 font-size: 14px;
3895 line-height: 1em;
3896 border-radius: 16px;
3897 opacity: 0;
3898 -webkit-transition: all 0.2s;
3899 transition: all 0.2s;
3900 }
3901 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
3902 opacity: 1;
3903 }
3904 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
3905 cursor: pointer;
3906 -webkit-user-select: none;
3907 -moz-user-select: none;
3908 -ms-user-select: none;
3909 user-select: none;
3910 display: -webkit-inline-box;
3911 display: -ms-inline-flexbox;
3912 display: inline-flex;
3913 padding: 0.4375rem 1rem;
3914 font-size: 0.875rem;
3915 font-weight: 600;
3916 line-height: 1.5;
3917 white-space: nowrap;
3918 text-transform: none;
3919 text-decoration: none;
3920 color: #212b36;
3921 background-color: #fff;
3922 border: 1px solid #c4cdd5;
3923 border-radius: 0.25rem;
3924 -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);
3925 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);
3926 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);
3927 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);
3928 }
3929 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
3930 outline: none;
3931 -webkit-box-shadow: none;
3932 box-shadow: none;
3933 }
3934 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
3935 visibility: visible !important;
3936 border: 1px dashed #ddd;
3937 background-color: #f9f9f9;
3938 border-radius: 4px;
3939 }
3940
3941 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
3942 display: -webkit-box;
3943 display: -ms-flexbox;
3944 display: flex;
3945 grid-gap: 5px;
3946 -ms-flex-wrap: wrap;
3947 flex-wrap: wrap;
3948 margin-bottom: 15px;
3949 }
3950 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
3951 display: none;
3952 }
3953 .merchant-module-page-setting-field-upload .merchant-upload-image {
3954 position: relative;
3955 display: -webkit-box;
3956 display: -ms-flexbox;
3957 display: flex;
3958 -webkit-box-align: center;
3959 -ms-flex-align: center;
3960 align-items: center;
3961 -webkit-box-pack: center;
3962 -ms-flex-pack: center;
3963 justify-content: center;
3964 border-radius: 4px;
3965 padding: 2px;
3966 border: 1px solid #eee;
3967 background-color: #fff;
3968 }
3969 .merchant-module-page-setting-field-upload .merchant-upload-image img {
3970 cursor: -webkit-grab;
3971 cursor: grab;
3972 width: 100%;
3973 height: 100%;
3974 max-height: 75px;
3975 -o-object-fit: cover;
3976 object-fit: cover;
3977 }
3978 .merchant-module-page-setting-field-upload .merchant-upload-image i {
3979 cursor: pointer;
3980 position: absolute;
3981 z-index: 1;
3982 top: 5px;
3983 right: 5px;
3984 width: 16px;
3985 height: 16px;
3986 display: -webkit-box;
3987 display: -ms-flexbox;
3988 display: flex;
3989 -webkit-box-pack: center;
3990 -ms-flex-pack: center;
3991 justify-content: center;
3992 -webkit-box-align: center;
3993 -ms-flex-align: center;
3994 align-items: center;
3995 color: #fff;
3996 background-color: #c5280c;
3997 font-size: 14px;
3998 line-height: 1em;
3999 border-radius: 16px;
4000 opacity: 0;
4001 -webkit-transition: all 0.2s;
4002 transition: all 0.2s;
4003 }
4004 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
4005 opacity: 1;
4006 }
4007 .merchant-module-page-setting-field-upload .merchant-upload-button {
4008 cursor: pointer;
4009 -webkit-user-select: none;
4010 -moz-user-select: none;
4011 -ms-user-select: none;
4012 user-select: none;
4013 display: -webkit-inline-box;
4014 display: -ms-inline-flexbox;
4015 display: inline-flex;
4016 padding: 0.4375rem 1rem;
4017 font-size: 0.875rem;
4018 font-weight: 600;
4019 line-height: 1.5;
4020 white-space: nowrap;
4021 text-transform: none;
4022 text-decoration: none;
4023 color: #212b36;
4024 background-color: #fff;
4025 border: 1px solid #c4cdd5;
4026 border-radius: 0.25rem;
4027 -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);
4028 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);
4029 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);
4030 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);
4031 }
4032 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
4033 outline: none;
4034 -webkit-box-shadow: none;
4035 box-shadow: none;
4036 }
4037
4038 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
4039 display: -webkit-box;
4040 display: -ms-flexbox;
4041 display: flex;
4042 -webkit-box-pack: start;
4043 -ms-flex-pack: start;
4044 justify-content: flex-start;
4045 }
4046 .merchant-module-page-setting-field-switcher input {
4047 display: none;
4048 }
4049 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
4050 margin-left: 0;
4051 background: #3858E9;
4052 }
4053 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
4054 right: 1px;
4055 }
4056 .merchant-module-page-setting-field-switcher .toggle-switch {
4057 float: right;
4058 position: relative;
4059 width: 36px;
4060 margin-top: 2px;
4061 -webkit-user-select: none;
4062 -moz-user-select: none;
4063 -ms-user-select: none;
4064 user-select: none;
4065 }
4066 .merchant-module-page-setting-field-switcher .toggle-switch-label {
4067 position: relative;
4068 display: inline-block;
4069 overflow: hidden;
4070 cursor: pointer;
4071 border-radius: 20px;
4072 padding: 0;
4073 margin: 0;
4074 width: 36px;
4075 }
4076 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
4077 display: block;
4078 width: 200%;
4079 margin-left: -100%;
4080 background: #c8c8c8;
4081 height: 18px;
4082 }
4083 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
4084 display: block;
4085 width: 12px;
4086 height: 12px;
4087 margin: 3px;
4088 background-color: #fff;
4089 position: absolute;
4090 top: 0;
4091 bottom: 0;
4092 right: 18px;
4093 border-radius: 20px;
4094 -webkit-transition: all 0.1s ease-in 0s;
4095 transition: all 0.1s ease-in 0s;
4096 }
4097
4098 .merchant-module-alert {
4099 position: fixed;
4100 top: 0;
4101 left: 0;
4102 right: 0;
4103 bottom: 0;
4104 z-index: 99999;
4105 display: -webkit-box;
4106 display: -ms-flexbox;
4107 display: flex;
4108 -webkit-box-pack: center;
4109 -ms-flex-pack: center;
4110 justify-content: center;
4111 -webkit-box-align: center;
4112 -ms-flex-align: center;
4113 align-items: center;
4114 background-color: rgba(0, 0, 0, 0.6);
4115 opacity: 0;
4116 visibility: hidden;
4117 -webkit-user-select: none;
4118 -moz-user-select: none;
4119 -ms-user-select: none;
4120 user-select: none;
4121 pointer-events: none;
4122 -webkit-transition: all 0.2s;
4123 transition: all 0.2s;
4124 }
4125 .merchant-module-alert.merchant-show {
4126 -webkit-user-select: auto;
4127 -moz-user-select: auto;
4128 -ms-user-select: auto;
4129 user-select: auto;
4130 pointer-events: auto;
4131 opacity: 1;
4132 visibility: visible;
4133 }
4134
4135 .merchant-module-alert-wrapper {
4136 display: -webkit-box;
4137 display: -ms-flexbox;
4138 display: flex;
4139 -webkit-box-orient: vertical;
4140 -webkit-box-direction: normal;
4141 -ms-flex-direction: column;
4142 flex-direction: column;
4143 width: 640px;
4144 max-width: 90%;
4145 border-radius: 4px;
4146 background-color: #fff;
4147 }
4148
4149 .merchant-module-alert-header {
4150 display: -webkit-box;
4151 display: -ms-flexbox;
4152 display: flex;
4153 -webkit-box-align: center;
4154 -ms-flex-align: center;
4155 align-items: center;
4156 -webkit-box-pack: justify;
4157 -ms-flex-pack: justify;
4158 justify-content: space-between;
4159 padding: 20px 30px;
4160 }
4161 .merchant-module-alert-header strong {
4162 font-size: 18px;
4163 line-height: 1em;
4164 }
4165 .merchant-module-alert-header a {
4166 position: relative;
4167 right: -5px;
4168 display: -webkit-box;
4169 display: -ms-flexbox;
4170 display: flex;
4171 color: #212121;
4172 text-decoration: none;
4173 -webkit-transition: all 0.2s;
4174 transition: all 0.2s;
4175 }
4176 .merchant-module-alert-header a:hover {
4177 opacity: 0.6;
4178 }
4179 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
4180 outline: none;
4181 -webkit-box-shadow: none;
4182 box-shadow: none;
4183 }
4184 .merchant-module-alert-header i {
4185 font-size: 32px;
4186 line-height: 1em;
4187 width: auto;
4188 height: auto;
4189 }
4190
4191 .merchant-module-alert-content {
4192 display: -webkit-box;
4193 display: -ms-flexbox;
4194 display: flex;
4195 -webkit-box-orient: vertical;
4196 -webkit-box-direction: normal;
4197 -ms-flex-direction: column;
4198 flex-direction: column;
4199 grid-gap: 20px;
4200 padding: 0 30px 30px 30px;
4201 }
4202 .merchant-module-alert-content p {
4203 margin: 0;
4204 padding: 0;
4205 font-size: 15px;
4206 font-weight: 500;
4207 color: #757575;
4208 }
4209 .merchant-module-alert-content figure {
4210 display: -webkit-box;
4211 display: -ms-flexbox;
4212 display: flex;
4213 margin: 0;
4214 padding: 0;
4215 }
4216 .merchant-module-alert-content img {
4217 max-width: 100%;
4218 }
4219
4220 .merchant-module-alert-footer {
4221 display: -webkit-box;
4222 display: -ms-flexbox;
4223 display: flex;
4224 -webkit-box-pack: end;
4225 -ms-flex-pack: end;
4226 justify-content: flex-end;
4227 padding: 30px;
4228 }
4229 .merchant-module-alert-footer a {
4230 font-weight: bold;
4231 font-size: 14px;
4232 padding: 10px 15px;
4233 text-decoration: none;
4234 border-radius: 4px;
4235 color: #212121;
4236 border: 1px solid #e5e5e5;
4237 }
4238 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
4239 outline: none;
4240 -webkit-box-shadow: none;
4241 box-shadow: none;
4242 }
4243
4244 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
4245 pointer-events: none;
4246 opacity: 0.8;
4247 }
4248 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
4249 opacity: 0.5;
4250 }
4251 .merchant-module-page-setting-field-inner.disabled .merchant-range {
4252 opacity: 0.5;
4253 }
4254 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
4255 opacity: 0.5;
4256 }
4257
4258 /* Utils */
4259 .merchant-height-auto {
4260 height: auto;
4261 }
4262
4263 /* Admin Footer Text */
4264 .merchant-admin-page .merchant-admin-footer-text-link {
4265 display: inline-block;
4266 padding-right: 5px;
4267 color: #3858E9;
4268 }
4269 .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 {
4270 color: #3858E9;
4271 }
4272
4273 .merchant-admin-page-module #wpfooter {
4274 display: none;
4275 }
4276 .merchant-admin-page-module #wpbody-content {
4277 padding-bottom: 30px;
4278 }
4279
4280 .merchant-module-footer-text {
4281 display: -webkit-box;
4282 display: -ms-flexbox;
4283 display: flex;
4284 grid-gap: 5px;
4285 -webkit-box-pack: center;
4286 -ms-flex-pack: center;
4287 justify-content: center;
4288 text-align: center;
4289 margin-top: 37px;
4290 }
4291 .merchant-module-footer-text i {
4292 color: #3858E9;
4293 }
4294
4295 /* Responsive */
4296 @media (max-width: 991px) {
4297 .merchant-wrap {
4298 display: -webkit-box;
4299 display: -ms-flexbox;
4300 display: flex;
4301 -webkit-box-orient: vertical;
4302 -webkit-box-direction: normal;
4303 -ms-flex-direction: column;
4304 flex-direction: column;
4305 grid-gap: 20px;
4306 }
4307 .merchant-modules-header-shortlinks {
4308 margin: 0;
4309 }
4310 .merchant-modules-header {
4311 -webkit-box-orient: vertical;
4312 -webkit-box-direction: normal;
4313 -ms-flex-direction: column;
4314 flex-direction: column;
4315 grid-gap: 20px;
4316 }
4317 .merchant-module-page-header-content {
4318 width: 100%;
4319 }
4320 .merchant-module-page-desc {
4321 max-width: none;
4322 }
4323 .merchant-module-page-header-placeholder {
4324 display: none;
4325 }
4326 .merchant-modules-header-image {
4327 display: none;
4328 }
4329 .merchant-modules-list {
4330 grid-template-columns: repeat(1, minmax(0, 1fr));
4331 }
4332 .merchant-modules-header-status {
4333 margin-bottom: 0;
4334 }
4335 .merchant-module-page-setting-box {
4336 -webkit-box-orient: vertical;
4337 -webkit-box-direction: normal;
4338 -ms-flex-direction: column;
4339 flex-direction: column;
4340 grid-gap: 20px;
4341 }
4342 .merchant-module-page-setting-title,
4343 .merchant-module-page-setting-fields {
4344 width: 100%;
4345 }
4346 .merchant-module-page-body {
4347 -webkit-box-orient: vertical;
4348 -webkit-box-direction: reverse;
4349 -ms-flex-direction: column-reverse;
4350 flex-direction: column-reverse;
4351 }
4352 .merchant-module-page-content {
4353 width: 100%;
4354 }
4355 .merchant-module-page-preview {
4356 margin-left: 0;
4357 margin-bottom: 20px;
4358 width: 100%;
4359 }
4360 }