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

4,317 lines 113.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Utilities */
2 .mrc-w-100 {
3 width: 100% !important;
4 }
5
6 .mrc-mb-0 {
7 margin-bottom: 0;
8 }
9
10 .mrc-mt-0 {
11 margin-top: 0;
12 }
13
14 .merchant-animated-buttons .merchant-button-flash:hover {
15 -webkit-animation: merchant-flash 1s infinite both;
16 animation: merchant-flash 1s infinite both;
17 -webkit-animation-iteration-count: 1;
18 animation-iteration-count: 1;
19 }
20 .merchant-animated-buttons .merchant-button-bounce:hover {
21 -webkit-animation: merchant-bounce 0.3s alternate;
22 animation: merchant-bounce 0.3s alternate;
23 -webkit-animation-iteration-count: 4;
24 animation-iteration-count: 4;
25 }
26 .merchant-animated-buttons .merchant-button-zoom-in:hover {
27 -webkit-transform: scale(1.2);
28 transform: scale(1.2);
29 }
30 .merchant-animated-buttons .merchant-button-shake:hover {
31 -webkit-animation: merchant-shake 0.3s;
32 animation: merchant-shake 0.3s;
33 -webkit-animation-iteration-count: 2;
34 animation-iteration-count: 2;
35 }
36 .merchant-animated-buttons .merchant-button-pulse:hover {
37 -webkit-animation: merchant-pulse 1.5s ease-in-out infinite both;
38 animation: merchant-pulse 1.5s ease-in-out infinite both;
39 }
40 .merchant-animated-buttons .merchant-button-jello-shake:hover {
41 -webkit-animation: merchant-jello-shake 1.5s infinite both;
42 animation: merchant-jello-shake 1.5s infinite both;
43 }
44 .merchant-animated-buttons .merchant-button-wobble:hover {
45 -webkit-animation: merchant-wobble 1.5s ease-in-out infinite both;
46 animation: merchant-wobble 1.5s ease-in-out infinite both;
47 }
48 .merchant-animated-buttons .merchant-button-vibrate:hover {
49 -webkit-animation: merchant-vibrate 0.3s linear 4 both;
50 animation: merchant-vibrate 0.3s linear 4 both;
51 }
52 .merchant-animated-buttons .merchant-button-swing:hover {
53 -webkit-animation: merchant-swing 2s ease-in-out infinite alternate;
54 animation: merchant-swing 2s ease-in-out infinite alternate;
55 }
56 .merchant-animated-buttons .merchant-button-tada:hover {
57 -webkit-animation: merchant-tada 1s infinite both;
58 animation: merchant-tada 1s infinite both;
59 }
60
61 @-webkit-keyframes merchant-flash {
62 0%, 50%, to {
63 opacity: 1;
64 }
65 25%, 75% {
66 opacity: 0;
67 }
68 }
69
70 @keyframes merchant-flash {
71 0%, 50%, to {
72 opacity: 1;
73 }
74 25%, 75% {
75 opacity: 0;
76 }
77 }
78 @-webkit-keyframes merchant-bounce {
79 to {
80 -webkit-transform: scale(1.2);
81 transform: scale(1.2);
82 }
83 }
84 @keyframes merchant-bounce {
85 to {
86 -webkit-transform: scale(1.2);
87 transform: scale(1.2);
88 }
89 }
90 @-webkit-keyframes merchant-shake {
91 33% {
92 -webkit-transform: rotate(10deg);
93 transform: rotate(10deg);
94 }
95 67% {
96 -webkit-transform: rotate(-10deg);
97 transform: rotate(-10deg);
98 }
99 to {
100 -webkit-transform: rotate(10deg);
101 transform: rotate(10deg);
102 }
103 }
104 @keyframes merchant-shake {
105 33% {
106 -webkit-transform: rotate(10deg);
107 transform: rotate(10deg);
108 }
109 67% {
110 -webkit-transform: rotate(-10deg);
111 transform: rotate(-10deg);
112 }
113 to {
114 -webkit-transform: rotate(10deg);
115 transform: rotate(10deg);
116 }
117 }
118 @-webkit-keyframes merchant-pulse {
119 0% {
120 -webkit-animation-timing-function: ease-out;
121 animation-timing-function: ease-out;
122 -webkit-transform: scale(1);
123 transform: scale(1);
124 -webkit-transform-origin: center center;
125 transform-origin: center center;
126 }
127 10% {
128 -webkit-animation-timing-function: ease-in;
129 animation-timing-function: ease-in;
130 -webkit-transform: scale(0.91);
131 transform: scale(0.91);
132 }
133 17% {
134 -webkit-animation-timing-function: ease-out;
135 animation-timing-function: ease-out;
136 -webkit-transform: scale(0.98);
137 transform: scale(0.98);
138 }
139 33% {
140 -webkit-animation-timing-function: ease-in;
141 animation-timing-function: ease-in;
142 -webkit-transform: scale(0.87);
143 transform: scale(0.87);
144 }
145 45% {
146 -webkit-animation-timing-function: ease-out;
147 animation-timing-function: ease-out;
148 -webkit-transform: scale(1);
149 transform: scale(1);
150 }
151 }
152 @keyframes merchant-pulse {
153 0% {
154 -webkit-animation-timing-function: ease-out;
155 animation-timing-function: ease-out;
156 -webkit-transform: scale(1);
157 transform: scale(1);
158 -webkit-transform-origin: center center;
159 transform-origin: center center;
160 }
161 10% {
162 -webkit-animation-timing-function: ease-in;
163 animation-timing-function: ease-in;
164 -webkit-transform: scale(0.91);
165 transform: scale(0.91);
166 }
167 17% {
168 -webkit-animation-timing-function: ease-out;
169 animation-timing-function: ease-out;
170 -webkit-transform: scale(0.98);
171 transform: scale(0.98);
172 }
173 33% {
174 -webkit-animation-timing-function: ease-in;
175 animation-timing-function: ease-in;
176 -webkit-transform: scale(0.87);
177 transform: scale(0.87);
178 }
179 45% {
180 -webkit-animation-timing-function: ease-out;
181 animation-timing-function: ease-out;
182 -webkit-transform: scale(1);
183 transform: scale(1);
184 }
185 }
186 @-webkit-keyframes merchant-jello-shake {
187 0% {
188 -webkit-transform: scaleX(1);
189 transform: scaleX(1);
190 }
191 30% {
192 -webkit-transform: scale3d(1.25, 0.75, 1);
193 transform: scale3d(1.25, 0.75, 1);
194 }
195 40% {
196 -webkit-transform: scale3d(0.75, 1.25, 1);
197 transform: scale3d(0.75, 1.25, 1);
198 }
199 50% {
200 -webkit-transform: scale3d(1.15, 0.85, 1);
201 transform: scale3d(1.15, 0.85, 1);
202 }
203 65% {
204 -webkit-transform: scale3d(0.95, 1.05, 1);
205 transform: scale3d(0.95, 1.05, 1);
206 }
207 75% {
208 -webkit-transform: scale3d(1.05, 0.95, 1);
209 transform: scale3d(1.05, 0.95, 1);
210 }
211 to {
212 -webkit-transform: scaleX(1);
213 transform: scaleX(1);
214 }
215 }
216 @keyframes merchant-jello-shake {
217 0% {
218 -webkit-transform: scaleX(1);
219 transform: scaleX(1);
220 }
221 30% {
222 -webkit-transform: scale3d(1.25, 0.75, 1);
223 transform: scale3d(1.25, 0.75, 1);
224 }
225 40% {
226 -webkit-transform: scale3d(0.75, 1.25, 1);
227 transform: scale3d(0.75, 1.25, 1);
228 }
229 50% {
230 -webkit-transform: scale3d(1.15, 0.85, 1);
231 transform: scale3d(1.15, 0.85, 1);
232 }
233 65% {
234 -webkit-transform: scale3d(0.95, 1.05, 1);
235 transform: scale3d(0.95, 1.05, 1);
236 }
237 75% {
238 -webkit-transform: scale3d(1.05, 0.95, 1);
239 transform: scale3d(1.05, 0.95, 1);
240 }
241 to {
242 -webkit-transform: scaleX(1);
243 transform: scaleX(1);
244 }
245 }
246 @-webkit-keyframes merchant-wobble {
247 0%, to {
248 -webkit-transform: translateX(0);
249 transform: translateX(0);
250 -webkit-transform-origin: 50% 50%;
251 transform-origin: 50% 50%;
252 }
253 15% {
254 -webkit-transform: translateX(-30px) rotate(-6deg);
255 transform: translateX(-30px) rotate(-6deg);
256 }
257 30% {
258 -webkit-transform: translateX(15px) rotate(6deg);
259 transform: translateX(15px) rotate(6deg);
260 }
261 45% {
262 -webkit-transform: translateX(-15px) rotate(-3.6deg);
263 transform: translateX(-15px) rotate(-3.6deg);
264 }
265 60% {
266 -webkit-transform: translateX(9px) rotate(2.4deg);
267 transform: translateX(9px) rotate(2.4deg);
268 }
269 75% {
270 -webkit-transform: translateX(-6px) rotate(-1.2deg);
271 transform: translateX(-6px) rotate(-1.2deg);
272 }
273 }
274 @keyframes merchant-wobble {
275 0%, to {
276 -webkit-transform: translateX(0);
277 transform: translateX(0);
278 -webkit-transform-origin: 50% 50%;
279 transform-origin: 50% 50%;
280 }
281 15% {
282 -webkit-transform: translateX(-30px) rotate(-6deg);
283 transform: translateX(-30px) rotate(-6deg);
284 }
285 30% {
286 -webkit-transform: translateX(15px) rotate(6deg);
287 transform: translateX(15px) rotate(6deg);
288 }
289 45% {
290 -webkit-transform: translateX(-15px) rotate(-3.6deg);
291 transform: translateX(-15px) rotate(-3.6deg);
292 }
293 60% {
294 -webkit-transform: translateX(9px) rotate(2.4deg);
295 transform: translateX(9px) rotate(2.4deg);
296 }
297 75% {
298 -webkit-transform: translateX(-6px) rotate(-1.2deg);
299 transform: translateX(-6px) rotate(-1.2deg);
300 }
301 }
302 @-webkit-keyframes merchant-vibrate {
303 0% {
304 -webkit-transform: translate(0);
305 transform: translate(0);
306 }
307 20% {
308 -webkit-transform: translate(-2px, 2px);
309 transform: translate(-2px, 2px);
310 }
311 40% {
312 -webkit-transform: translate(-2px, -2px);
313 transform: translate(-2px, -2px);
314 }
315 60% {
316 -webkit-transform: translate(2px, 2px);
317 transform: translate(2px, 2px);
318 }
319 80% {
320 -webkit-transform: translate(2px, -2px);
321 transform: translate(2px, -2px);
322 }
323 to {
324 -webkit-transform: translate(0);
325 transform: translate(0);
326 }
327 }
328 @keyframes merchant-vibrate {
329 0% {
330 -webkit-transform: translate(0);
331 transform: translate(0);
332 }
333 20% {
334 -webkit-transform: translate(-2px, 2px);
335 transform: translate(-2px, 2px);
336 }
337 40% {
338 -webkit-transform: translate(-2px, -2px);
339 transform: translate(-2px, -2px);
340 }
341 60% {
342 -webkit-transform: translate(2px, 2px);
343 transform: translate(2px, 2px);
344 }
345 80% {
346 -webkit-transform: translate(2px, -2px);
347 transform: translate(2px, -2px);
348 }
349 to {
350 -webkit-transform: translate(0);
351 transform: translate(0);
352 }
353 }
354 @-webkit-keyframes merchant-swing {
355 0% {
356 -webkit-transform: rotate(0deg);
357 transform: rotate(0deg);
358 }
359 20% {
360 -webkit-transform: rotate(3deg);
361 transform: rotate(3deg);
362 }
363 40% {
364 -webkit-transform: rotate(-3deg);
365 transform: rotate(-3deg);
366 }
367 60% {
368 -webkit-transform: rotate(3deg);
369 transform: rotate(3deg);
370 }
371 80% {
372 -webkit-transform: rotate(-3deg);
373 transform: rotate(-3deg);
374 }
375 to {
376 -webkit-transform: rotate(0deg);
377 transform: rotate(0deg);
378 }
379 }
380 @keyframes merchant-swing {
381 0% {
382 -webkit-transform: rotate(0deg);
383 transform: rotate(0deg);
384 }
385 20% {
386 -webkit-transform: rotate(3deg);
387 transform: rotate(3deg);
388 }
389 40% {
390 -webkit-transform: rotate(-3deg);
391 transform: rotate(-3deg);
392 }
393 60% {
394 -webkit-transform: rotate(3deg);
395 transform: rotate(3deg);
396 }
397 80% {
398 -webkit-transform: rotate(-3deg);
399 transform: rotate(-3deg);
400 }
401 to {
402 -webkit-transform: rotate(0deg);
403 transform: rotate(0deg);
404 }
405 }
406 @-webkit-keyframes merchant-tada {
407 0% {
408 -webkit-transform: scaleX(1);
409 transform: scaleX(1);
410 }
411 10%, 20% {
412 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
413 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
414 }
415 30%, 50%, 70%, 90% {
416 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
417 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
418 }
419 40%, 60%, 80% {
420 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
421 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
422 }
423 to {
424 -webkit-transform: scaleX(1);
425 transform: scaleX(1);
426 }
427 }
428 @keyframes merchant-tada {
429 0% {
430 -webkit-transform: scaleX(1);
431 transform: scaleX(1);
432 }
433 10%, 20% {
434 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
435 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
436 }
437 30%, 50%, 70%, 90% {
438 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
439 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
440 }
441 40%, 60%, 80% {
442 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
443 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
444 }
445 to {
446 -webkit-transform: scaleX(1);
447 transform: scaleX(1);
448 }
449 }
450 .merchant-pcr-app * {
451 outline: none;
452 border: none;
453 -webkit-box-sizing: border-box;
454 box-sizing: border-box;
455 }
456
457 .merchant-pcr-app input:focus,
458 .merchant-pcr-app input.pcr-active,
459 .merchant-pcr-app button:focus,
460 .merchant-pcr-app button.pcr-active {
461 -webkit-box-shadow: none;
462 box-shadow: none;
463 }
464
465 .merchant-pcr-app .pcr-palette:focus,
466 .merchant-pcr-app .pcr-slider:focus {
467 -webkit-box-shadow: none;
468 box-shadow: none;
469 }
470
471 .merchant-pcr-app {
472 position: fixed;
473 z-index: 999999;
474 top: 0;
475 left: 0;
476 display: -webkit-box;
477 display: -ms-flexbox;
478 display: flex;
479 -webkit-box-orient: vertical;
480 -webkit-box-direction: normal;
481 -ms-flex-direction: column;
482 flex-direction: column;
483 border-radius: 0.1em;
484 opacity: 0;
485 visibility: hidden;
486 -webkit-transition: opacity 0.2s, visibility 0s 0.2s;
487 transition: opacity 0.2s, visibility 0s 0.2s;
488 -webkit-box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
489 box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
490 background: #fff;
491 }
492
493 .merchant-pcr-app.visible {
494 visibility: visible;
495 opacity: 1;
496 -webkit-transition: opacity 0.2s;
497 transition: opacity 0.2s;
498 }
499
500 .merchant-pcr-app .pcr-swatches {
501 display: -webkit-box;
502 display: -ms-flexbox;
503 display: flex;
504 -webkit-box-pack: justify;
505 -ms-flex-pack: justify;
506 justify-content: space-between;
507 }
508
509 .merchant-pcr-app .pcr-swatches > button {
510 cursor: pointer;
511 font-size: 1em;
512 position: relative;
513 z-index: 1;
514 width: 20px;
515 height: 20px;
516 margin: 0;
517 padding: 0;
518 background: none;
519 }
520
521 .merchant-pcr-app .pcr-swatches > button::before {
522 position: absolute;
523 content: "";
524 top: 0;
525 left: 0;
526 bottom: 0;
527 right: 0;
528 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
529 background-size: 6px;
530 border-radius: 20px;
531 border: 1px solid transparent;
532 z-index: -1;
533 }
534
535 .merchant-pcr-app .pcr-swatches > button::after {
536 content: "";
537 position: absolute;
538 z-index: 1;
539 top: 0;
540 left: 0;
541 right: 0;
542 bottom: 0;
543 border-radius: 20px;
544 border: 1px solid rgba(0, 0, 0, 0.3);
545 background: var(--pcr-color);
546 }
547
548 .merchant-pcr-app .pcr-interaction {
549 display: -webkit-box;
550 display: -ms-flexbox;
551 display: flex;
552 grid-gap: 5px;
553 }
554
555 .merchant-pcr-app .pcr-interaction input {
556 font-size: 11px;
557 border-radius: 3px;
558 }
559 .merchant-pcr-app .pcr-interaction input:focus {
560 border-color: #3858E9;
561 }
562
563 .merchant-pcr-app .pcr-interaction .pcr-result {
564 -webkit-box-flex: 1;
565 -ms-flex: 1;
566 flex: 1;
567 margin: 0;
568 width: 100%;
569 max-width: 100%;
570 }
571
572 .merchant-pcr-app .pcr-interaction .pcr-clear {
573 cursor: pointer;
574 margin: 0;
575 padding: 0 10px;
576 border-radius: 3px;
577 color: #fff;
578 background-color: #3858E9;
579 text-transform: uppercase;
580 }
581
582 .merchant-pcr-app .pcr-selection .pcr-picker {
583 -webkit-user-select: none;
584 -moz-user-select: none;
585 -ms-user-select: none;
586 user-select: none;
587 position: absolute;
588 height: 16px;
589 width: 16px;
590 border-radius: 16px;
591 background-color: #fff !important;
592 -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
593 box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
594 }
595
596 .merchant-pcr-app .pcr-selection .pcr-color-palette,
597 .merchant-pcr-app .pcr-selection .pcr-color-chooser,
598 .merchant-pcr-app .pcr-selection .pcr-color-opacity {
599 -webkit-user-select: none;
600 -moz-user-select: none;
601 -ms-user-select: none;
602 user-select: none;
603 position: relative;
604 display: -webkit-box;
605 display: -ms-flexbox;
606 display: flex;
607 -webkit-box-orient: vertical;
608 -webkit-box-direction: normal;
609 -ms-flex-direction: column;
610 flex-direction: column;
611 cursor: -webkit-grab;
612 cursor: grab;
613 }
614
615 .merchant-pcr-app .pcr-selection .pcr-color-palette:active,
616 .merchant-pcr-app .pcr-selection .pcr-color-chooser:active,
617 .merchant-pcr-app .pcr-selection .pcr-color-opacity:active {
618 cursor: -webkit-grabbing;
619 cursor: grabbing;
620 }
621
622 .merchant-pcr-app[data-theme=merchant] {
623 width: 250px;
624 max-width: 95vw;
625 padding: 10px;
626 -webkit-box-sizing: border-box;
627 box-sizing: border-box;
628 display: -webkit-box;
629 display: -ms-flexbox;
630 display: flex;
631 grid-gap: 10px;
632 -webkit-box-orient: vertical;
633 -webkit-box-direction: normal;
634 -ms-flex-direction: column;
635 flex-direction: column;
636 }
637
638 .merchant-pcr-app[data-theme=merchant] .pcr-selection {
639 display: grid;
640 grid-gap: 10px;
641 grid-template-columns: 1fr 4fr;
642 grid-template-rows: 5fr auto auto;
643 -webkit-box-align: center;
644 -ms-flex-align: center;
645 align-items: center;
646 height: 150px;
647 width: 100%;
648 align-self: flex-start;
649 }
650
651 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview {
652 grid-area: 2/1/4/1;
653 height: 100%;
654 width: 100%;
655 display: -webkit-box;
656 display: -ms-flexbox;
657 display: flex;
658 -webkit-box-align: center;
659 -ms-flex-align: center;
660 align-items: center;
661 -webkit-box-pack: center;
662 -ms-flex-pack: center;
663 justify-content: center;
664 }
665
666 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-last-color {
667 display: none;
668 }
669
670 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color {
671 position: relative;
672 width: 32px;
673 height: 32px;
674 border-radius: 32px;
675 overflow: hidden;
676 border: 1px solid rgba(0, 0, 0, 0.3);
677 background-color: var(--pcr-color);
678 }
679
680 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color::before {
681 position: absolute;
682 content: "";
683 top: 0;
684 left: 0;
685 width: 100%;
686 height: 100%;
687 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
688 background-size: 6px;
689 border-radius: 100%;
690 z-index: -1;
691 }
692
693 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette {
694 grid-area: 1/1/2/3;
695 width: 100%;
696 height: 100%;
697 z-index: 1;
698 }
699
700 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-picker {
701 width: 18px;
702 height: 18px;
703 border: 2px solid #fff;
704 -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
705 box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
706 background-color: transparent !important;
707 }
708
709 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette {
710 width: 100%;
711 height: 100%;
712 }
713
714 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette::before {
715 position: absolute;
716 content: "";
717 top: 0;
718 left: 0;
719 width: 100%;
720 height: 100%;
721 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
722 background-size: 8px;
723 z-index: -1;
724 }
725
726 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser {
727 grid-area: 2/2/2/2;
728 }
729
730 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
731 grid-area: 3/2/3/2;
732 }
733
734 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser,
735 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
736 height: 12px;
737 margin-right: 10px;
738 }
739
740 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-picker,
741 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-picker {
742 top: 50%;
743 -webkit-transform: translateY(-50%);
744 transform: translateY(-50%);
745 }
746
747 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider,
748 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
749 -webkit-box-flex: 1;
750 -ms-flex-positive: 1;
751 flex-grow: 1;
752 }
753
754 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider {
755 background: -webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red));
756 background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
757 }
758
759 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
760 background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
761 background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
762 background-size: 100%, 6px;
763 }
764
765 /* Buttons */
766 .button-tertiary {
767 cursor: pointer;
768 -webkit-user-select: none;
769 -moz-user-select: none;
770 -ms-user-select: none;
771 user-select: none;
772 display: -webkit-inline-box;
773 display: -ms-inline-flexbox;
774 display: inline-flex;
775 padding: 0.4375rem 1rem;
776 font-size: 0.875rem;
777 font-weight: 600;
778 line-height: 1.5;
779 white-space: nowrap;
780 text-transform: none;
781 text-decoration: none;
782 color: #212b36;
783 background-color: #fff;
784 border: 1px solid #c4cdd5;
785 border-radius: 0.25rem;
786 -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
787 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
788 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
789 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
790 }
791 .button-tertiary:hover, .button-tertiary:focus {
792 outline: none;
793 -webkit-box-shadow: none;
794 box-shadow: none;
795 }
796
797 /* Botiga Dashboard Tabs Nav Items */
798 .merchant-tabs-nav {
799 padding: 0 20px;
800 margin-bottom: -100%;
801 -webkit-transform: translate3d(0, 100%, 0);
802 transform: translate3d(0, 100%, 0);
803 }
804 .merchant-tabs-nav ul {
805 display: -webkit-box;
806 display: -ms-flexbox;
807 display: flex;
808 padding: 0;
809 }
810 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link {
811 position: relative;
812 font-size: 14px;
813 line-height: 20px;
814 padding: 16px;
815 color: #6D7175;
816 text-decoration: none;
817 -webkit-transition: ease color 300ms;
818 transition: ease color 300ms;
819 outline: none;
820 -webkit-box-shadow: none;
821 box-shadow: none;
822 }
823 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
824 content: "";
825 position: absolute;
826 bottom: 0;
827 left: 0;
828 width: 100%;
829 height: 3px;
830 background-color: transparent;
831 border-radius: 4px 4px 0 0;
832 }
833 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
834 color: #3858E9;
835 font-weight: 500;
836 }
837 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link:after {
838 background-color: #3858E9;
839 }
840 .merchant-tabs-nav .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
841 color: #3858E9;
842 }
843 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link {
844 position: relative;
845 display: -webkit-box;
846 display: -ms-flexbox;
847 display: flex;
848 -webkit-box-align: center;
849 -ms-flex-align: center;
850 align-items: center;
851 font-size: 18px;
852 font-weight: 600;
853 line-height: 26px;
854 padding: 9px 16px;
855 border-bottom: 0;
856 color: #1e1e1e;
857 -webkit-transition: ease color 200ms;
858 transition: ease color 200ms;
859 }
860 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg {
861 margin-right: 8px;
862 }
863 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg path {
864 -webkit-transition: ease fill 200ms;
865 transition: ease fill 200ms;
866 }
867 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
868 content: none;
869 }
870 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:before {
871 content: "";
872 position: absolute;
873 top: 0;
874 left: 0;
875 background-color: transparent;
876 width: 4px;
877 height: 100%;
878 border-radius: 0 4px 4px 0;
879 opacity: 0;
880 visibility: hidden;
881 -webkit-transition: ease opacity 200ms;
882 transition: ease opacity 200ms;
883 }
884 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
885 color: #757575;
886 }
887 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link svg path {
888 fill: #757575;
889 }
890 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link:before {
891 background-color: #e1e1e1;
892 opacity: 1;
893 visibility: visible;
894 }
895 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
896 color: #3858E9;
897 }
898 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link svg path {
899 fill: #3858E9;
900 }
901 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link:before {
902 background-color: #3858E9;
903 opacity: 1;
904 visibility: visible;
905 }
906 .merchant-tabs-nav.merchant-tabs-nav-vertical {
907 padding: 0;
908 margin-left: -20px;
909 }
910 .merchant-tabs-nav.merchant-tabs-nav-vertical ul {
911 -webkit-box-orient: vertical;
912 -webkit-box-direction: normal;
913 -ms-flex-direction: column;
914 flex-direction: column;
915 margin: 0;
916 }
917 .merchant-tabs-nav.merchant-tabs-nav-no-negative-margin {
918 margin-bottom: 0;
919 -webkit-transform: none;
920 transform: none;
921 }
922
923 /* Botiga Tabs Content */
924 .merchant-tab-content {
925 display: none;
926 }
927 .merchant-tab-content.active {
928 display: block;
929 }
930
931 .toplevel_page_merchant {
932 background-color: #F4F6F8;
933 }
934 .toplevel_page_merchant #wpbody-content > .updated,
935 .toplevel_page_merchant #wpbody-content > .notice {
936 display: none;
937 }
938
939 .merchant-top-bar {
940 display: -webkit-box;
941 display: -ms-flexbox;
942 display: flex;
943 -webkit-box-align: center;
944 -ms-flex-align: center;
945 align-items: center;
946 -webkit-box-pack: justify;
947 -ms-flex-pack: justify;
948 justify-content: space-between;
949 background-color: #FFF;
950 margin: 0 0 30px -20px;
951 padding: 18px 20px;
952 }
953 .merchant-top-bar * {
954 -webkit-box-sizing: border-box;
955 box-sizing: border-box;
956 }
957 .merchant-top-bar * *:before,
958 .merchant-top-bar * *:after {
959 -webkit-box-sizing: border-box;
960 box-sizing: border-box;
961 }
962 .merchant-top-bar .merchant-top-bar-infos {
963 display: -webkit-box;
964 display: -ms-flexbox;
965 display: flex;
966 -webkit-box-align: center;
967 -ms-flex-align: center;
968 align-items: center;
969 }
970 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item {
971 position: relative;
972 padding: 0 10px;
973 }
974 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item + .merchant-top-bar-info-item:before {
975 content: "";
976 position: absolute;
977 top: 50%;
978 left: 0;
979 height: 17px;
980 -webkit-transform: translateY(-50%);
981 transform: translateY(-50%);
982 border-left: 1px solid #F0F0F0;
983 }
984 .merchant-top-bar .merchant-version {
985 font-size: 13px;
986 line-height: 13px;
987 color: #97A3B6;
988 }
989 .merchant-top-bar .merchant-version strong {
990 position: relative;
991 top: 1px;
992 }
993 .merchant-top-bar .merchant-version .merchant-badge {
994 display: -webkit-inline-box;
995 display: -ms-inline-flexbox;
996 display: inline-flex;
997 margin-left: 5px;
998 font-size: 9px;
999 line-height: 10px;
1000 }
1001 .merchant-top-bar .merchant-notifications {
1002 position: relative;
1003 display: -webkit-inline-box;
1004 display: -ms-inline-flexbox;
1005 display: inline-flex;
1006 -webkit-box-align: center;
1007 -ms-flex-align: center;
1008 align-items: center;
1009 -webkit-box-pack: center;
1010 -ms-flex-pack: center;
1011 justify-content: center;
1012 width: 27px;
1013 height: 27px;
1014 border: 1px solid #DFDFDF;
1015 border-radius: 35px;
1016 }
1017 .merchant-top-bar .merchant-notifications:focus {
1018 -webkit-box-shadow: none;
1019 box-shadow: none;
1020 }
1021 .merchant-top-bar .merchant-notifications .merchant-notifications-count {
1022 position: absolute;
1023 top: -8px;
1024 right: -7px;
1025 display: -webkit-box;
1026 display: -ms-flexbox;
1027 display: flex;
1028 -webkit-box-align: center;
1029 -ms-flex-align: center;
1030 align-items: center;
1031 -webkit-box-pack: center;
1032 -ms-flex-pack: center;
1033 justify-content: center;
1034 width: 16px;
1035 height: 16px;
1036 color: #FFF;
1037 background-color: #FA1212;
1038 border-radius: 35px;
1039 font-size: 10px;
1040 line-height: 1;
1041 }
1042 .merchant-top-bar .merchant-notifications.read .merchant-notifications-count {
1043 display: none;
1044 }
1045 .merchant-top-bar .merchant-website {
1046 display: -webkit-box;
1047 display: -ms-flexbox;
1048 display: flex;
1049 -webkit-box-align: center;
1050 -ms-flex-align: center;
1051 align-items: center;
1052 gap: 8px;
1053 font-size: 13px;
1054 line-height: 16px;
1055 color: #3858E9;
1056 text-decoration: none;
1057 }
1058
1059 /* Notifications Sidebar */
1060 .merchant-notifications-sidebar {
1061 position: fixed;
1062 top: 96px;
1063 right: 0;
1064 width: 100%;
1065 max-width: 500px;
1066 height: calc(100vh - 92px);
1067 background-color: #FFF;
1068 -webkit-box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1069 box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1070 opacity: 0;
1071 visibility: hidden;
1072 -webkit-transform: translate3d(100%, 0, 0);
1073 transform: translate3d(100%, 0, 0);
1074 -webkit-transition: ease transform 300ms, ease opacity 300ms;
1075 transition: ease transform 300ms, ease opacity 300ms;
1076 z-index: 1000;
1077 }
1078 .merchant-notifications-sidebar.opened {
1079 opacity: 1;
1080 visibility: visible;
1081 -webkit-transform: none;
1082 transform: none;
1083 }
1084 .merchant-notifications-sidebar.closing {
1085 opacity: 0;
1086 -webkit-transform: translate3d(100%, 0, 0);
1087 transform: translate3d(100%, 0, 0);
1088 }
1089 .merchant-notifications-sidebar .merchant-notifications-sidebar-close {
1090 position: absolute;
1091 top: 15px;
1092 right: 15px;
1093 -webkit-transition: ease opacity 300ms;
1094 transition: ease opacity 300ms;
1095 }
1096 .merchant-notifications-sidebar .merchant-notifications-sidebar-close:hover {
1097 opacity: 0.7;
1098 }
1099 .merchant-notifications-sidebar .merchant-notifications-sidebar-header {
1100 display: -webkit-box;
1101 display: -ms-flexbox;
1102 display: flex;
1103 -webkit-box-align: center;
1104 -ms-flex-align: center;
1105 align-items: center;
1106 gap: 10px;
1107 background-color: #EAEEF2;
1108 padding: 20px 22px;
1109 }
1110 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon {
1111 display: -webkit-box;
1112 display: -ms-flexbox;
1113 display: flex;
1114 -webkit-box-align: center;
1115 -ms-flex-align: center;
1116 align-items: center;
1117 -webkit-box-pack: center;
1118 -ms-flex-pack: center;
1119 justify-content: center;
1120 width: 40px;
1121 height: 40px;
1122 background-color: #FFF;
1123 border: 1px solid #EBEDEF;
1124 border-radius: 35px;
1125 }
1126 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon svg {
1127 position: relative;
1128 top: -2px;
1129 }
1130 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content h3 {
1131 font-size: 16px;
1132 line-height: 26px;
1133 font-weight: 600;
1134 color: #3858E9;
1135 margin: 0;
1136 }
1137 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content p {
1138 font-size: 13px;
1139 line-height: 18px;
1140 color: #757575;
1141 margin: 0;
1142 }
1143 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs {
1144 position: relative;
1145 }
1146 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs:after {
1147 content: "";
1148 position: absolute;
1149 bottom: -10px;
1150 left: 20px;
1151 width: calc(100% - 40px);
1152 border-bottom: 1px solid #F0F0F1;
1153 }
1154 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs + .merchant-notifications-sidebar-body {
1155 max-height: calc(100vh - 232px);
1156 }
1157 .merchant-notifications-sidebar .merchant-notifications-sidebar-body {
1158 padding: 20px;
1159 overflow-y: auto;
1160 max-height: calc(100vh - 230px);
1161 }
1162 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar {
1163 width: 5px;
1164 }
1165 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-track {
1166 background: #e2e2e2;
1167 }
1168 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-thumb {
1169 background-color: #CCC;
1170 }
1171
1172 /* Notifications (card) */
1173 .merchant-notification .merchant-notification-date {
1174 display: block;
1175 font-size: 13px;
1176 line-height: 18px;
1177 color: #757575;
1178 }
1179 .merchant-notification .merchant-notification-date + .merchant-notification-content {
1180 margin-top: 20px;
1181 }
1182 .merchant-notification .changelog-tag {
1183 display: inline-block;
1184 font-size: 10px;
1185 line-height: 18px;
1186 color: #FFF;
1187 padding: 0px 10px;
1188 background-color: #CCC;
1189 border-radius: 3px;
1190 text-transform: uppercase;
1191 font-weight: 600;
1192 margin-bottom: 5px;
1193 }
1194 .merchant-notification .changelog-tag.changelog-added {
1195 background-color: #73B189;
1196 }
1197 .merchant-notification .changelog-tag.changelog-changed {
1198 background-color: #F6CA45;
1199 }
1200 .merchant-notification .changelog-tag.changelog-fixed {
1201 background-color: #967BE3;
1202 }
1203 .merchant-notification .changelog-description {
1204 display: block;
1205 font-size: 13px;
1206 line-height: 21px;
1207 font-weight: 400;
1208 color: #757575;
1209 margin-top: 5px;
1210 }
1211 .merchant-notification .merchant-notification-content ul {
1212 margin: 0;
1213 }
1214 .merchant-notification .merchant-notification-content ul li {
1215 display: -webkit-box;
1216 display: -ms-flexbox;
1217 display: flex;
1218 -webkit-box-orient: vertical;
1219 -webkit-box-direction: normal;
1220 -ms-flex-direction: column;
1221 flex-direction: column;
1222 -webkit-box-align: start;
1223 -ms-flex-align: start;
1224 align-items: flex-start;
1225 font-size: 16px;
1226 line-height: 26px;
1227 font-weight: 600;
1228 color: #101517;
1229 }
1230 .merchant-notification .merchant-notification-content ul li + li {
1231 margin-top: 15px;
1232 padding-top: 15px;
1233 border-top: 1px solid #E7E7E7;
1234 }
1235 .merchant-notification + .merchant-notification {
1236 margin: 20px -20px 0px;
1237 padding: 20px 20px 0px;
1238 border-top: 1px solid #E7E7E7;
1239 }
1240
1241 .merchant-wrap {
1242 padding-left: 5px;
1243 padding-right: 5px;
1244 }
1245 .merchant-wrap * {
1246 -webkit-box-sizing: border-box;
1247 box-sizing: border-box;
1248 }
1249 .merchant-wrap * *:before,
1250 .merchant-wrap * *:after {
1251 -webkit-box-sizing: border-box;
1252 box-sizing: border-box;
1253 }
1254
1255 .merchant-modules-panel {
1256 display: -webkit-box;
1257 display: -ms-flexbox;
1258 display: flex;
1259 grid-gap: 20px;
1260 -webkit-box-orient: vertical;
1261 -webkit-box-direction: normal;
1262 -ms-flex-direction: column;
1263 flex-direction: column;
1264 }
1265
1266 .merchant-modules-header {
1267 display: -webkit-box;
1268 display: -ms-flexbox;
1269 display: flex;
1270 grid-gap: 30px;
1271 }
1272
1273 .merchant-modules-header-left,
1274 .merchant-modules-header-right {
1275 -webkit-box-flex: 1;
1276 -ms-flex: 1;
1277 flex: 1;
1278 display: -webkit-box;
1279 display: -ms-flexbox;
1280 display: flex;
1281 grid-gap: 10px;
1282 -webkit-box-orient: vertical;
1283 -webkit-box-direction: normal;
1284 -ms-flex-direction: column;
1285 flex-direction: column;
1286 -webkit-box-pack: center;
1287 -ms-flex-pack: center;
1288 justify-content: center;
1289 }
1290
1291 .merchant-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 }
2899 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
2900 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
2901 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
2902 line-height: 41px !important;
2903 }
2904 .merchant-module-page-setting-field-select .select2-selection__arrow,
2905 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
2906 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
2907 height: 43px !important;
2908 }
2909
2910 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper {
2911 display: -webkit-box;
2912 display: -ms-flexbox;
2913 display: flex;
2914 grid-gap: 15px;
2915 }
2916 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select {
2917 width: 100%;
2918 }
2919 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number {
2920 width: 100px;
2921 }
2922
2923 .merchant-module-page-setting-field-choices input {
2924 display: none;
2925 }
2926 .merchant-module-page-setting-field-choices input:checked + figure {
2927 border-color: #3858E9;
2928 }
2929 .merchant-module-page-setting-field-choices label {
2930 display: -webkit-box;
2931 display: -ms-flexbox;
2932 display: flex;
2933 position: relative;
2934 }
2935 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
2936 opacity: 1;
2937 visibility: visible;
2938 -webkit-transform: translate3d(-50%, 0, 0);
2939 transform: translate3d(-50%, 0, 0);
2940 }
2941 .merchant-module-page-setting-field-choices figure {
2942 display: -webkit-box;
2943 display: -ms-flexbox;
2944 display: flex;
2945 margin: 0;
2946 padding: 2px;
2947 border-radius: 4px;
2948 border: 2px solid transparent;
2949 }
2950 .merchant-module-page-setting-field-choices .merchant-tooltip {
2951 position: absolute;
2952 z-index: 10;
2953 left: 50%;
2954 bottom: calc(100% + 12px);
2955 padding: 3px 12px;
2956 font-size: 11px;
2957 white-space: nowrap;
2958 opacity: 0;
2959 visibility: hidden;
2960 -webkit-transform: translate3d(-50%, 6px, 0);
2961 transform: translate3d(-50%, 6px, 0);
2962 -webkit-transition: all 0.2s;
2963 transition: all 0.2s;
2964 border-radius: 3px;
2965 color: #f7f7f7;
2966 background-color: #212121;
2967 }
2968 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
2969 content: "";
2970 position: absolute;
2971 left: 50%;
2972 bottom: -12px;
2973 border: 6px solid transparent;
2974 border-top-color: #212121;
2975 -webkit-transform: translate3d(-50%, 0, 0);
2976 transform: translate3d(-50%, 0, 0);
2977 }
2978 .merchant-module-page-setting-field-choices .merchant-choices {
2979 display: -webkit-box;
2980 display: -ms-flexbox;
2981 display: flex;
2982 grid-gap: 10px;
2983 }
2984 .merchant-module-page-setting-field-choices .merchant-choices svg {
2985 width: 20px;
2986 height: 20px;
2987 }
2988
2989 .merchant-module-page-setting-field-buttons input {
2990 display: none;
2991 }
2992 .merchant-module-page-setting-field-buttons input:checked + span {
2993 color: #fff;
2994 background-color: #3858E9;
2995 }
2996 .merchant-module-page-setting-field-buttons label {
2997 display: -webkit-box;
2998 display: -ms-flexbox;
2999 display: flex;
3000 }
3001 .merchant-module-page-setting-field-buttons span {
3002 display: -webkit-box;
3003 display: -ms-flexbox;
3004 display: flex;
3005 -webkit-box-align: center;
3006 -ms-flex-align: center;
3007 align-items: center;
3008 -webkit-box-pack: center;
3009 -ms-flex-pack: center;
3010 justify-content: center;
3011 margin: 0;
3012 padding: 10px 15px;
3013 border-radius: 2px;
3014 -webkit-user-select: none;
3015 -moz-user-select: none;
3016 -ms-user-select: none;
3017 user-select: none;
3018 min-width: 120px;
3019 font-weight: 500;
3020 }
3021 .merchant-module-page-setting-field-buttons .merchant-buttons {
3022 display: -webkit-inline-box;
3023 display: -ms-inline-flexbox;
3024 display: inline-flex;
3025 padding: 3px;
3026 border: 1px solid #D6D6D6;
3027 border-radius: 4px;
3028 }
3029 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
3030 text-decoration: underline;
3031 }
3032 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
3033 text-decoration: line-through;
3034 }
3035 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
3036 text-decoration: overline;
3037 }
3038
3039 .merchant-module-page-setting-field-buttons_alt input {
3040 display: none;
3041 }
3042 .merchant-module-page-setting-field-buttons_alt input:checked + span {
3043 color: #fff;
3044 background-color: #3858E9;
3045 }
3046 .merchant-module-page-setting-field-buttons_alt label {
3047 display: -webkit-box;
3048 display: -ms-flexbox;
3049 display: flex;
3050 }
3051 .merchant-module-page-setting-field-buttons_alt label:hover {
3052 position: relative;
3053 z-index: 10;
3054 }
3055 .merchant-module-page-setting-field-buttons_alt span {
3056 display: -webkit-box;
3057 display: -ms-flexbox;
3058 display: flex;
3059 -webkit-box-align: center;
3060 -ms-flex-align: center;
3061 align-items: center;
3062 -webkit-box-pack: center;
3063 -ms-flex-pack: center;
3064 justify-content: center;
3065 margin: 0;
3066 padding: 10px 15px;
3067 border-radius: 2px;
3068 -webkit-user-select: none;
3069 -moz-user-select: none;
3070 -ms-user-select: none;
3071 user-select: none;
3072 min-width: 120px;
3073 font-weight: 500;
3074 border-radius: 4px;
3075 border: 1px solid #D6D6D6;
3076 background-color: #fff;
3077 }
3078 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
3079 display: -webkit-box;
3080 display: -ms-flexbox;
3081 display: flex;
3082 -ms-flex-wrap: wrap;
3083 flex-wrap: wrap;
3084 grid-gap: 5px;
3085 padding: 3px;
3086 }
3087
3088 .merchant-animated-buttons .merchant-buttons {
3089 display: grid;
3090 grid-template-columns: repeat(5, 1fr);
3091 }
3092 .merchant-animated-buttons span {
3093 width: 100%;
3094 }
3095
3096 @media (max-width: 1470px) {
3097 .merchant-animated-buttons .merchant-buttons {
3098 grid-template-columns: repeat(3, 1fr);
3099 }
3100 }
3101 @media (max-width: 1050px) {
3102 .merchant-animated-buttons .merchant-buttons {
3103 grid-template-columns: repeat(2, 1fr);
3104 }
3105 }
3106 /* Sortable Field */
3107 .merchant-sortable {
3108 max-width: 300px;
3109 }
3110 .merchant-sortable ul.ui-sortable li {
3111 position: relative;
3112 overflow: hidden;
3113 padding: 0;
3114 color: #1E1E1E;
3115 border: 1px solid #ddd;
3116 border-radius: 2px;
3117 text-transform: capitalize;
3118 line-height: 36px;
3119 cursor: -webkit-grab;
3120 cursor: grab;
3121 }
3122 .merchant-sortable ul.ui-sortable li .dashicons {
3123 width: 36px;
3124 height: 36px;
3125 -ms-flex-preferred-size: 36px;
3126 flex-basis: 36px;
3127 display: -webkit-box;
3128 display: -ms-flexbox;
3129 display: flex;
3130 -webkit-box-pack: center;
3131 -ms-flex-pack: center;
3132 justify-content: center;
3133 -webkit-box-align: center;
3134 -ms-flex-align: center;
3135 align-items: center;
3136 text-align: center;
3137 -webkit-box-sizing: border-box;
3138 box-sizing: border-box;
3139 }
3140 .merchant-sortable ul.ui-sortable li .dashicons:before {
3141 font-size: 16px;
3142 line-height: 1em;
3143 }
3144 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
3145 float: left;
3146 padding: 0;
3147 margin: 0 10px 0 0;
3148 border: none;
3149 border-right: 1px solid #ddd;
3150 }
3151 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
3152 float: right;
3153 color: #3858E9;
3154 padding: 0;
3155 margin: 0 0 0 10px;
3156 border: none;
3157 border-left: 1px solid #ddd;
3158 }
3159 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
3160 cursor: pointer;
3161 }
3162 .merchant-sortable ul.ui-sortable li.invisible {
3163 color: #6E7780;
3164 border: 1px solid #CAD2F6;
3165 background-color: #EBEEFB;
3166 }
3167 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
3168 content: "\f530";
3169 }
3170
3171 /* Sortable Repeater Field */
3172 .merchant-module-page-setting-field-flexible_content .merchant-module-page-setting-field-title {
3173 margin-bottom: 10px;
3174 }
3175
3176 .merchant-sortable-repeater-control {
3177 max-width: 100%;
3178 }
3179 .merchant-sortable-repeater-control .sortable {
3180 list-style-type: none;
3181 margin: 0;
3182 padding: 0;
3183 }
3184 .merchant-sortable-repeater-control .sortable input[type=text] {
3185 width: 100%;
3186 margin: 0;
3187 border-radius: 4px 0 0 4px;
3188 border: 1px solid #D6D6D6;
3189 padding: 12px;
3190 line-height: 1.3em;
3191 }
3192 .merchant-sortable-repeater-control .sortable input[type=text]:focus {
3193 border-color: #3858E9;
3194 outline: none;
3195 -webkit-box-shadow: none;
3196 box-shadow: none;
3197 }
3198 .merchant-sortable-repeater-control .sortable div {
3199 cursor: -webkit-grab;
3200 cursor: grab;
3201 margin-bottom: 7px;
3202 }
3203 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete {
3204 display: -webkit-box;
3205 display: -ms-flexbox;
3206 display: flex;
3207 -webkit-box-align: center;
3208 -ms-flex-align: center;
3209 align-items: center;
3210 -webkit-box-pack: center;
3211 -ms-flex-pack: center;
3212 justify-content: center;
3213 margin: 0;
3214 width: 44px;
3215 height: auto;
3216 font-size: 1.3em;
3217 line-height: 34px;
3218 color: #d4d4d4;
3219 background: #fff;
3220 padding: 0;
3221 vertical-align: top;
3222 margin-left: -1px;
3223 border: 1px solid #D6D6D6;
3224 text-decoration: none;
3225 }
3226 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt {
3227 width: 100%;
3228 text-decoration: none;
3229 margin: 0;
3230 font-weight: 600;
3231 color: #50575e;
3232 font-size: 1.1em;
3233 line-height: 34px;
3234 height: auto;
3235 }
3236 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus {
3237 outline: none;
3238 -webkit-box-shadow: none;
3239 box-shadow: none;
3240 }
3241 .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 {
3242 color: #a7a7a7;
3243 }
3244 .merchant-sortable-repeater-control .repeater {
3245 display: -webkit-box;
3246 display: -ms-flexbox;
3247 display: flex;
3248 }
3249 .merchant-sortable-repeater-control .repeater .dashicons-menu {
3250 display: -webkit-box;
3251 display: -ms-flexbox;
3252 display: flex;
3253 -webkit-box-align: center;
3254 -ms-flex-align: center;
3255 align-items: center;
3256 -webkit-box-pack: center;
3257 -ms-flex-pack: center;
3258 justify-content: center;
3259 margin: 0;
3260 width: 44px;
3261 height: auto;
3262 font-size: 1.3em;
3263 line-height: 34px;
3264 background: #fff;
3265 padding: 0;
3266 vertical-align: top;
3267 margin-left: -1px;
3268 border: 1px solid #D6D6D6;
3269 }
3270 .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
3271 color: #a7a7a7;
3272 }
3273 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add {
3274 color: #3858E9;
3275 border-color: #3858E9;
3276 background-color: transparent;
3277 margin-top: 10px;
3278 padding: 4px 19px;
3279 }
3280 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus {
3281 outline: none;
3282 -webkit-box-shadow: none;
3283 box-shadow: none;
3284 background-color: #ffffff;
3285 }
3286 .merchant-sortable-repeater-control.disable-sorting .dashicons-menu {
3287 display: none;
3288 }
3289
3290 /* Flexible Content Field */
3291 .merchant-flexible-content-control {
3292 max-width: 100%;
3293 }
3294 .merchant-flexible-content-control .sortable {
3295 list-style-type: none;
3296 margin: 0;
3297 padding: 0;
3298 }
3299 .merchant-flexible-content-control .sortable input[type=text] {
3300 width: 100%;
3301 margin: 0;
3302 border-radius: 4px 0 0 4px;
3303 border: 1px solid #D6D6D6;
3304 padding: 8px;
3305 line-height: 1.3em;
3306 }
3307 .merchant-flexible-content-control .sortable input[type=text]:focus {
3308 border-color: #3858E9;
3309 outline: none;
3310 -webkit-box-shadow: none;
3311 box-shadow: none;
3312 }
3313 .merchant-flexible-content-control .customize-control-flexible-content-move {
3314 cursor: -webkit-grab;
3315 cursor: grab;
3316 }
3317 .merchant-flexible-content-control .customize-control-flexible-content-delete {
3318 display: -webkit-box;
3319 display: -ms-flexbox;
3320 display: flex;
3321 -webkit-box-align: center;
3322 -ms-flex-align: center;
3323 align-items: center;
3324 -webkit-box-pack: center;
3325 -ms-flex-pack: center;
3326 justify-content: center;
3327 margin: 0;
3328 width: 40px;
3329 height: auto;
3330 font-size: 1.3em;
3331 line-height: 34px;
3332 color: #d4d4d4;
3333 background: #fff;
3334 padding: 0;
3335 vertical-align: top;
3336 margin-left: -1px;
3337 text-decoration: none;
3338 }
3339 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt {
3340 width: 100%;
3341 text-decoration: none;
3342 margin: 0;
3343 font-weight: 600;
3344 color: #50575e;
3345 font-size: 1.1em;
3346 line-height: 34px;
3347 height: auto;
3348 }
3349 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus {
3350 outline: none;
3351 -webkit-box-shadow: none;
3352 box-shadow: none;
3353 }
3354 .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 {
3355 color: #a7a7a7;
3356 }
3357 .merchant-flexible-content-control .merchant-flexible-content.empty {
3358 border: 2px dashed #dcdcde;
3359 min-height: 100px;
3360 margin-bottom: 10px;
3361 }
3362 .merchant-flexible-content-control.default-style .layout {
3363 background: white;
3364 border: 1px solid #c3c4c7;
3365 border-left: 3px solid #3858e9;
3366 }
3367 .merchant-flexible-content-control.default-style .layout .layout-header {
3368 padding: 8px 15px;
3369 }
3370 .merchant-flexible-content-control.default-style .layout .layout-body {
3371 padding: 15px;
3372 }
3373 .merchant-flexible-content-control.table-style .layout .layout-header {
3374 padding-bottom: 8px;
3375 margin-bottom: 15px;
3376 }
3377 .merchant-flexible-content-control.table-style .layout .layout-body {
3378 -webkit-box-orient: horizontal;
3379 -webkit-box-direction: normal;
3380 -ms-flex-direction: row;
3381 flex-direction: row;
3382 }
3383 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
3384 display: none;
3385 }
3386 .merchant-flexible-content-control .layouts {
3387 display: none;
3388 }
3389 .merchant-flexible-content-control .layout {
3390 margin-bottom: 20px;
3391 }
3392 .merchant-flexible-content-control .layout .layout-header {
3393 display: -webkit-box;
3394 display: -ms-flexbox;
3395 display: flex;
3396 -webkit-box-align: center;
3397 -ms-flex-align: center;
3398 align-items: center;
3399 border-bottom: 1px solid #f3f3f3;
3400 }
3401 .merchant-flexible-content-control .layout .layout-count {
3402 border-radius: 50%;
3403 width: 24px;
3404 height: 23px;
3405 border: 1px solid #949494;
3406 text-align: center;
3407 display: -webkit-box;
3408 display: -ms-flexbox;
3409 display: flex;
3410 -webkit-box-pack: center;
3411 -ms-flex-pack: center;
3412 justify-content: center;
3413 -webkit-box-orient: vertical;
3414 -webkit-box-direction: normal;
3415 -ms-flex-direction: column;
3416 flex-direction: column;
3417 font-size: 12px;
3418 font-weight: bold;
3419 margin-right: 10px;
3420 }
3421 .merchant-flexible-content-control .layout .layout-title {
3422 font-size: 14px;
3423 font-weight: bold;
3424 }
3425 .merchant-flexible-content-control .layout .layout-actions {
3426 display: -webkit-box;
3427 display: -ms-flexbox;
3428 display: flex;
3429 margin: 0;
3430 padding: 0;
3431 -webkit-box-pack: end;
3432 -ms-flex-pack: end;
3433 justify-content: flex-end;
3434 -webkit-box-flex: 1;
3435 -ms-flex-positive: 1;
3436 flex-grow: 1;
3437 }
3438 .merchant-flexible-content-control .layout .layout-body {
3439 display: -webkit-box;
3440 display: -ms-flexbox;
3441 display: flex;
3442 -webkit-box-orient: vertical;
3443 -webkit-box-direction: normal;
3444 -ms-flex-direction: column;
3445 flex-direction: column;
3446 grid-gap: 20px;
3447 }
3448 .merchant-flexible-content-control .layout .layout-field.flex-grow {
3449 -webkit-box-flex: 1;
3450 -ms-flex-positive: 1;
3451 flex-grow: 1;
3452 }
3453 .merchant-flexible-content-control .layout .dashicons-menu {
3454 display: -webkit-box;
3455 display: -ms-flexbox;
3456 display: flex;
3457 -webkit-box-align: center;
3458 -ms-flex-align: center;
3459 align-items: center;
3460 -webkit-box-pack: center;
3461 -ms-flex-pack: center;
3462 justify-content: center;
3463 margin: 0;
3464 width: 40px;
3465 height: auto;
3466 font-size: 1.3em;
3467 line-height: 34px;
3468 background: #fff;
3469 padding: 0;
3470 vertical-align: top;
3471 margin-left: -1px;
3472 }
3473 .merchant-flexible-content-control .layout .dashicons-menu:hover {
3474 color: #a7a7a7;
3475 }
3476 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
3477 position: relative;
3478 display: inline-block;
3479 }
3480 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
3481 opacity: 0;
3482 visibility: hidden;
3483 position: absolute;
3484 background-color: #ffffff;
3485 border: 1px solid #c3c4c7;
3486 border-left: 3px solid #3858e9;
3487 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3488 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3489 width: 180px;
3490 bottom: 100%;
3491 display: -webkit-box;
3492 display: -ms-flexbox;
3493 display: flex;
3494 -webkit-box-orient: vertical;
3495 -webkit-box-direction: normal;
3496 -ms-flex-direction: column;
3497 flex-direction: column;
3498 left: 50%;
3499 -webkit-transform: translate(-50%, 10px);
3500 transform: translate(-50%, 10px);
3501 padding: 3px 3px 3px 5px;
3502 }
3503 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
3504 z-index: 10;
3505 opacity: 1;
3506 visibility: visible;
3507 -webkit-transform: translate(-50%, -15px);
3508 transform: translate(-50%, -15px);
3509 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3510 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3511 }
3512 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
3513 right: calc(50% - 12px);
3514 bottom: -14px;
3515 border-width: 14px 14px 0 15px;
3516 border-color: #c3c4c7 transparent transparent transparent;
3517 }
3518 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3519 content: "";
3520 right: calc(50% - 10px);
3521 bottom: -12px;
3522 border-width: 12px 12px 0 13px;
3523 border-color: #ffffff transparent transparent transparent;
3524 }
3525 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3526 position: absolute;
3527 z-index: -1;
3528 content: "";
3529 border-style: solid;
3530 -webkit-transition-duration: 0.3s;
3531 transition-duration: 0.3s;
3532 transition-property: -webkit-transform;
3533 -webkit-transition-property: -webkit-transform;
3534 transition-property: transform;
3535 transition-property: transform, -webkit-transform;
3536 }
3537 .merchant-flexible-content-control .customize-control-flexible-content-add {
3538 display: block;
3539 -ms-flex-negative: 0;
3540 flex-shrink: 0;
3541 padding: 10px;
3542 text-decoration: none;
3543 }
3544 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
3545 background: #f0f0f1;
3546 }
3547 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
3548 color: #3858E9;
3549 border-color: #3858E9;
3550 background-color: transparent;
3551 margin-top: 10px;
3552 padding: 4px 19px;
3553 }
3554 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
3555 outline: none;
3556 -webkit-box-shadow: none;
3557 box-shadow: none;
3558 background-color: #ffffff;
3559 }
3560 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
3561 display: none;
3562 }
3563
3564 .flexible-content-template {
3565 display: none;
3566 }
3567
3568 .merchant-module-page-setting-field-range .merchant-range {
3569 position: relative;
3570 width: 100%;
3571 width: 300px;
3572 display: -webkit-box;
3573 display: -ms-flexbox;
3574 display: flex;
3575 -webkit-box-align: center;
3576 -ms-flex-align: center;
3577 align-items: center;
3578 -webkit-box-pack: justify;
3579 -ms-flex-pack: justify;
3580 justify-content: space-between;
3581 }
3582 .merchant-module-page-setting-field-range input[type=range] {
3583 -webkit-appearance: none;
3584 -moz-appearance: none;
3585 appearance: none;
3586 width: calc(100% - 105px);
3587 height: 2px;
3588 border-radius: 5px;
3589 outline: none;
3590 padding: 0;
3591 margin: 0;
3592 background-color: #ddd;
3593 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
3594 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
3595 }
3596 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb {
3597 -webkit-appearance: none;
3598 appearance: none;
3599 width: 15px;
3600 height: 15px;
3601 border-radius: 50%;
3602 background: #3858E9;
3603 cursor: pointer;
3604 -webkit-transition: background 0.15s ease-in-out;
3605 transition: background 0.15s ease-in-out;
3606 }
3607 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover {
3608 background: #3858E9;
3609 }
3610 .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb {
3611 background: #3858E9;
3612 }
3613 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb {
3614 width: 15px;
3615 height: 15px;
3616 border: 0;
3617 border-radius: 50%;
3618 background: #3858E9;
3619 cursor: pointer;
3620 -moz-transition: background 0.15s ease-in-out;
3621 transition: background 0.15s ease-in-out;
3622 }
3623 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover {
3624 background: #3858E9;
3625 }
3626 .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb {
3627 background: #3858E9;
3628 }
3629 .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb {
3630 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3631 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3632 }
3633 .merchant-module-page-setting-field-range input[type=range]::-moz-range-track {
3634 border: 0;
3635 background: #d7dcdf;
3636 }
3637 .merchant-module-page-setting-field-range input[type=number] {
3638 padding: 12px 25px 12px 10px;
3639 line-height: 1.3em;
3640 width: 100%;
3641 max-width: 85px;
3642 min-height: auto;
3643 border: 1px solid #D6D6D6;
3644 }
3645 .merchant-module-page-setting-field-range input[type=number]:focus {
3646 outline: none;
3647 -webkit-box-shadow: none;
3648 box-shadow: none;
3649 border-color: #3858E9;
3650 }
3651 .merchant-module-page-setting-field-range .merchant-range-unit {
3652 color: #3858E9;
3653 position: absolute;
3654 z-index: 1;
3655 right: 10px;
3656 font-size: 11px;
3657 line-height: 1em;
3658 }
3659
3660 .merchant-module-page-setting-field-color input {
3661 padding: 0 10px;
3662 line-height: 1em;
3663 width: 100%;
3664 max-width: 254px;
3665 min-height: auto;
3666 border: 1px solid #D6D6D6;
3667 }
3668 .merchant-module-page-setting-field-color input:focus {
3669 outline: none;
3670 -webkit-box-shadow: none;
3671 box-shadow: none;
3672 border-color: #3858E9;
3673 }
3674 .merchant-module-page-setting-field-color .merchant-color {
3675 display: -webkit-box;
3676 display: -ms-flexbox;
3677 display: flex;
3678 grid-gap: 10px;
3679 }
3680 .merchant-module-page-setting-field-color .merchant-color-picker {
3681 cursor: pointer;
3682 width: 36px;
3683 height: 36px;
3684 border: 1px solid rgba(0, 0, 0, 0.1);
3685 border-radius: 4px;
3686 }
3687
3688 .merchant-module-page-settings-dimensions {
3689 display: -webkit-box;
3690 display: -ms-flexbox;
3691 display: flex;
3692 grid-gap: 10px;
3693 }
3694 .merchant-module-page-settings-dimensions > div {
3695 display: -webkit-box;
3696 display: -ms-flexbox;
3697 display: flex;
3698 -webkit-box-orient: vertical;
3699 -webkit-box-direction: normal;
3700 -ms-flex-direction: column;
3701 flex-direction: column;
3702 }
3703 .merchant-module-page-settings-dimensions label {
3704 color: gray;
3705 font-size: 12px;
3706 margin-top: 7px;
3707 }
3708 .merchant-module-page-settings-dimensions input {
3709 max-width: 70px;
3710 width: 100%;
3711 font-size: 12px;
3712 border: 1px solid #D6D6D6;
3713 }
3714
3715 .merchant-module-page-settings-unit {
3716 margin-bottom: 10px;
3717 }
3718 .merchant-module-page-settings-unit select {
3719 font-size: 13px;
3720 border: 0;
3721 }
3722
3723 .merchant-module-page-settings-devices {
3724 display: -webkit-box;
3725 display: -ms-flexbox;
3726 display: flex;
3727 -webkit-column-gap: 10px;
3728 -moz-column-gap: 10px;
3729 column-gap: 10px;
3730 -webkit-box-pack: end;
3731 -ms-flex-pack: end;
3732 justify-content: flex-end;
3733 }
3734 .merchant-module-page-settings-devices button {
3735 border: 0;
3736 background: transparent;
3737 padding: 0;
3738 cursor: pointer;
3739 }
3740 .merchant-module-page-settings-devices button.active {
3741 color: #3858e9;
3742 }
3743 .merchant-module-page-settings-devices button:hover {
3744 color: #3858e9;
3745 }
3746 .merchant-module-page-settings-devices button i {
3747 font-size: 14px;
3748 line-height: 20px;
3749 width: auto;
3750 }
3751
3752 .merchant-module-page-settings-device-container:not(.active) {
3753 display: none;
3754 }
3755
3756 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
3757 max-width: 320px;
3758 }
3759 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
3760 margin-bottom: -30px;
3761 margin-top: 0;
3762 }
3763
3764 .merchant-module-page-setting-field-warning {
3765 padding: 8px 10px;
3766 font-size: 14px;
3767 line-height: 1.6;
3768 color: #1D2327;
3769 border-radius: 4px;
3770 border: 1px solid #D72C0D;
3771 background-color: #FFF4F4;
3772 }
3773
3774 .merchant-module-page-setting-field-info {
3775 padding: 8px 10px;
3776 font-size: 14px;
3777 line-height: 1.6;
3778 color: #1D2327;
3779 border-radius: 4px;
3780 border: 1px solid #0d65d7;
3781 background-color: #e6effa;
3782 }
3783
3784 .merchant-module-page-setting-field-divider {
3785 border-bottom: 1px solid #F0F0F1;
3786 }
3787 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
3788 font-size: 16px;
3789 }
3790
3791 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
3792 display: -webkit-box;
3793 display: -ms-flexbox;
3794 display: flex;
3795 grid-gap: 5px;
3796 -ms-flex-wrap: wrap;
3797 flex-wrap: wrap;
3798 margin-bottom: 15px;
3799 }
3800 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
3801 display: none;
3802 }
3803 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
3804 position: relative;
3805 display: -webkit-box;
3806 display: -ms-flexbox;
3807 display: flex;
3808 -webkit-box-align: center;
3809 -ms-flex-align: center;
3810 align-items: center;
3811 -webkit-box-pack: center;
3812 -ms-flex-pack: center;
3813 justify-content: center;
3814 border-radius: 4px;
3815 padding: 2px;
3816 border: 1px solid #eee;
3817 background-color: #fff;
3818 }
3819 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
3820 cursor: -webkit-grab;
3821 cursor: grab;
3822 width: 100%;
3823 height: 100%;
3824 max-height: 75px;
3825 -o-object-fit: cover;
3826 object-fit: cover;
3827 }
3828 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
3829 cursor: -webkit-grabbing;
3830 cursor: grabbing;
3831 }
3832 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
3833 cursor: pointer;
3834 position: absolute;
3835 z-index: 1;
3836 top: 5px;
3837 right: 5px;
3838 width: 16px;
3839 height: 16px;
3840 display: -webkit-box;
3841 display: -ms-flexbox;
3842 display: flex;
3843 -webkit-box-pack: center;
3844 -ms-flex-pack: center;
3845 justify-content: center;
3846 -webkit-box-align: center;
3847 -ms-flex-align: center;
3848 align-items: center;
3849 color: #fff;
3850 background-color: #c5280c;
3851 font-size: 14px;
3852 line-height: 1em;
3853 border-radius: 16px;
3854 opacity: 0;
3855 -webkit-transition: all 0.2s;
3856 transition: all 0.2s;
3857 }
3858 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
3859 opacity: 1;
3860 }
3861 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
3862 cursor: pointer;
3863 -webkit-user-select: none;
3864 -moz-user-select: none;
3865 -ms-user-select: none;
3866 user-select: none;
3867 display: -webkit-inline-box;
3868 display: -ms-inline-flexbox;
3869 display: inline-flex;
3870 padding: 0.4375rem 1rem;
3871 font-size: 0.875rem;
3872 font-weight: 600;
3873 line-height: 1.5;
3874 white-space: nowrap;
3875 text-transform: none;
3876 text-decoration: none;
3877 color: #212b36;
3878 background-color: #fff;
3879 border: 1px solid #c4cdd5;
3880 border-radius: 0.25rem;
3881 -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);
3882 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);
3883 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);
3884 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);
3885 }
3886 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
3887 outline: none;
3888 -webkit-box-shadow: none;
3889 box-shadow: none;
3890 }
3891 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
3892 visibility: visible !important;
3893 border: 1px dashed #ddd;
3894 background-color: #f9f9f9;
3895 border-radius: 4px;
3896 }
3897
3898 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
3899 display: -webkit-box;
3900 display: -ms-flexbox;
3901 display: flex;
3902 grid-gap: 5px;
3903 -ms-flex-wrap: wrap;
3904 flex-wrap: wrap;
3905 margin-bottom: 15px;
3906 }
3907 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
3908 display: none;
3909 }
3910 .merchant-module-page-setting-field-upload .merchant-upload-image {
3911 position: relative;
3912 display: -webkit-box;
3913 display: -ms-flexbox;
3914 display: flex;
3915 -webkit-box-align: center;
3916 -ms-flex-align: center;
3917 align-items: center;
3918 -webkit-box-pack: center;
3919 -ms-flex-pack: center;
3920 justify-content: center;
3921 border-radius: 4px;
3922 padding: 2px;
3923 border: 1px solid #eee;
3924 background-color: #fff;
3925 }
3926 .merchant-module-page-setting-field-upload .merchant-upload-image img {
3927 cursor: -webkit-grab;
3928 cursor: grab;
3929 width: 100%;
3930 height: 100%;
3931 max-height: 75px;
3932 -o-object-fit: cover;
3933 object-fit: cover;
3934 }
3935 .merchant-module-page-setting-field-upload .merchant-upload-image i {
3936 cursor: pointer;
3937 position: absolute;
3938 z-index: 1;
3939 top: 5px;
3940 right: 5px;
3941 width: 16px;
3942 height: 16px;
3943 display: -webkit-box;
3944 display: -ms-flexbox;
3945 display: flex;
3946 -webkit-box-pack: center;
3947 -ms-flex-pack: center;
3948 justify-content: center;
3949 -webkit-box-align: center;
3950 -ms-flex-align: center;
3951 align-items: center;
3952 color: #fff;
3953 background-color: #c5280c;
3954 font-size: 14px;
3955 line-height: 1em;
3956 border-radius: 16px;
3957 opacity: 0;
3958 -webkit-transition: all 0.2s;
3959 transition: all 0.2s;
3960 }
3961 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
3962 opacity: 1;
3963 }
3964 .merchant-module-page-setting-field-upload .merchant-upload-button {
3965 cursor: pointer;
3966 -webkit-user-select: none;
3967 -moz-user-select: none;
3968 -ms-user-select: none;
3969 user-select: none;
3970 display: -webkit-inline-box;
3971 display: -ms-inline-flexbox;
3972 display: inline-flex;
3973 padding: 0.4375rem 1rem;
3974 font-size: 0.875rem;
3975 font-weight: 600;
3976 line-height: 1.5;
3977 white-space: nowrap;
3978 text-transform: none;
3979 text-decoration: none;
3980 color: #212b36;
3981 background-color: #fff;
3982 border: 1px solid #c4cdd5;
3983 border-radius: 0.25rem;
3984 -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);
3985 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);
3986 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);
3987 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);
3988 }
3989 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
3990 outline: none;
3991 -webkit-box-shadow: none;
3992 box-shadow: none;
3993 }
3994
3995 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
3996 display: -webkit-box;
3997 display: -ms-flexbox;
3998 display: flex;
3999 -webkit-box-pack: start;
4000 -ms-flex-pack: start;
4001 justify-content: flex-start;
4002 }
4003 .merchant-module-page-setting-field-switcher input {
4004 display: none;
4005 }
4006 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
4007 margin-left: 0;
4008 background: #3858E9;
4009 }
4010 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
4011 right: 1px;
4012 }
4013 .merchant-module-page-setting-field-switcher .toggle-switch {
4014 float: right;
4015 position: relative;
4016 width: 36px;
4017 margin-top: 2px;
4018 -webkit-user-select: none;
4019 -moz-user-select: none;
4020 -ms-user-select: none;
4021 user-select: none;
4022 }
4023 .merchant-module-page-setting-field-switcher .toggle-switch-label {
4024 position: relative;
4025 display: inline-block;
4026 overflow: hidden;
4027 cursor: pointer;
4028 border-radius: 20px;
4029 padding: 0;
4030 margin: 0;
4031 width: 36px;
4032 }
4033 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
4034 display: block;
4035 width: 200%;
4036 margin-left: -100%;
4037 background: #c8c8c8;
4038 height: 18px;
4039 }
4040 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
4041 display: block;
4042 width: 12px;
4043 height: 12px;
4044 margin: 3px;
4045 background-color: #fff;
4046 position: absolute;
4047 top: 0;
4048 bottom: 0;
4049 right: 18px;
4050 border-radius: 20px;
4051 -webkit-transition: all 0.1s ease-in 0s;
4052 transition: all 0.1s ease-in 0s;
4053 }
4054
4055 .merchant-module-alert {
4056 position: fixed;
4057 top: 0;
4058 left: 0;
4059 right: 0;
4060 bottom: 0;
4061 z-index: 99999;
4062 display: -webkit-box;
4063 display: -ms-flexbox;
4064 display: flex;
4065 -webkit-box-pack: center;
4066 -ms-flex-pack: center;
4067 justify-content: center;
4068 -webkit-box-align: center;
4069 -ms-flex-align: center;
4070 align-items: center;
4071 background-color: rgba(0, 0, 0, 0.6);
4072 opacity: 0;
4073 visibility: hidden;
4074 -webkit-user-select: none;
4075 -moz-user-select: none;
4076 -ms-user-select: none;
4077 user-select: none;
4078 pointer-events: none;
4079 -webkit-transition: all 0.2s;
4080 transition: all 0.2s;
4081 }
4082 .merchant-module-alert.merchant-show {
4083 -webkit-user-select: auto;
4084 -moz-user-select: auto;
4085 -ms-user-select: auto;
4086 user-select: auto;
4087 pointer-events: auto;
4088 opacity: 1;
4089 visibility: visible;
4090 }
4091
4092 .merchant-module-alert-wrapper {
4093 display: -webkit-box;
4094 display: -ms-flexbox;
4095 display: flex;
4096 -webkit-box-orient: vertical;
4097 -webkit-box-direction: normal;
4098 -ms-flex-direction: column;
4099 flex-direction: column;
4100 width: 640px;
4101 max-width: 90%;
4102 border-radius: 4px;
4103 background-color: #fff;
4104 }
4105
4106 .merchant-module-alert-header {
4107 display: -webkit-box;
4108 display: -ms-flexbox;
4109 display: flex;
4110 -webkit-box-align: center;
4111 -ms-flex-align: center;
4112 align-items: center;
4113 -webkit-box-pack: justify;
4114 -ms-flex-pack: justify;
4115 justify-content: space-between;
4116 padding: 20px 30px;
4117 }
4118 .merchant-module-alert-header strong {
4119 font-size: 18px;
4120 line-height: 1em;
4121 }
4122 .merchant-module-alert-header a {
4123 position: relative;
4124 right: -5px;
4125 display: -webkit-box;
4126 display: -ms-flexbox;
4127 display: flex;
4128 color: #212121;
4129 text-decoration: none;
4130 -webkit-transition: all 0.2s;
4131 transition: all 0.2s;
4132 }
4133 .merchant-module-alert-header a:hover {
4134 opacity: 0.6;
4135 }
4136 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
4137 outline: none;
4138 -webkit-box-shadow: none;
4139 box-shadow: none;
4140 }
4141 .merchant-module-alert-header i {
4142 font-size: 32px;
4143 line-height: 1em;
4144 width: auto;
4145 height: auto;
4146 }
4147
4148 .merchant-module-alert-content {
4149 display: -webkit-box;
4150 display: -ms-flexbox;
4151 display: flex;
4152 -webkit-box-orient: vertical;
4153 -webkit-box-direction: normal;
4154 -ms-flex-direction: column;
4155 flex-direction: column;
4156 grid-gap: 20px;
4157 padding: 0 30px 30px 30px;
4158 }
4159 .merchant-module-alert-content p {
4160 margin: 0;
4161 padding: 0;
4162 font-size: 15px;
4163 font-weight: 500;
4164 color: #757575;
4165 }
4166 .merchant-module-alert-content figure {
4167 display: -webkit-box;
4168 display: -ms-flexbox;
4169 display: flex;
4170 margin: 0;
4171 padding: 0;
4172 }
4173 .merchant-module-alert-content img {
4174 max-width: 100%;
4175 }
4176
4177 .merchant-module-alert-footer {
4178 display: -webkit-box;
4179 display: -ms-flexbox;
4180 display: flex;
4181 -webkit-box-pack: end;
4182 -ms-flex-pack: end;
4183 justify-content: flex-end;
4184 padding: 30px;
4185 }
4186 .merchant-module-alert-footer a {
4187 font-weight: bold;
4188 font-size: 14px;
4189 padding: 10px 15px;
4190 text-decoration: none;
4191 border-radius: 4px;
4192 color: #212121;
4193 border: 1px solid #e5e5e5;
4194 }
4195 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
4196 outline: none;
4197 -webkit-box-shadow: none;
4198 box-shadow: none;
4199 }
4200
4201 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
4202 pointer-events: none;
4203 opacity: 0.8;
4204 }
4205 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
4206 opacity: 0.5;
4207 }
4208 .merchant-module-page-setting-field-inner.disabled .merchant-range {
4209 opacity: 0.5;
4210 }
4211 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
4212 opacity: 0.5;
4213 }
4214
4215 /* Utils */
4216 .merchant-height-auto {
4217 height: auto;
4218 }
4219
4220 /* Admin Footer Text */
4221 .merchant-admin-page .merchant-admin-footer-text-link {
4222 display: inline-block;
4223 padding-right: 5px;
4224 color: #3858E9;
4225 }
4226 .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 {
4227 color: #3858E9;
4228 }
4229
4230 .merchant-admin-page-module #wpfooter {
4231 display: none;
4232 }
4233 .merchant-admin-page-module #wpbody-content {
4234 padding-bottom: 30px;
4235 }
4236
4237 .merchant-module-footer-text {
4238 display: -webkit-box;
4239 display: -ms-flexbox;
4240 display: flex;
4241 grid-gap: 5px;
4242 -webkit-box-pack: center;
4243 -ms-flex-pack: center;
4244 justify-content: center;
4245 text-align: center;
4246 margin-top: 37px;
4247 }
4248 .merchant-module-footer-text i {
4249 color: #3858E9;
4250 }
4251
4252 /* Responsive */
4253 @media (max-width: 991px) {
4254 .merchant-wrap {
4255 display: -webkit-box;
4256 display: -ms-flexbox;
4257 display: flex;
4258 -webkit-box-orient: vertical;
4259 -webkit-box-direction: normal;
4260 -ms-flex-direction: column;
4261 flex-direction: column;
4262 grid-gap: 20px;
4263 }
4264 .merchant-modules-header-shortlinks {
4265 margin: 0;
4266 }
4267 .merchant-modules-header {
4268 -webkit-box-orient: vertical;
4269 -webkit-box-direction: normal;
4270 -ms-flex-direction: column;
4271 flex-direction: column;
4272 grid-gap: 20px;
4273 }
4274 .merchant-module-page-header-content {
4275 width: 100%;
4276 }
4277 .merchant-module-page-desc {
4278 max-width: none;
4279 }
4280 .merchant-module-page-header-placeholder {
4281 display: none;
4282 }
4283 .merchant-modules-header-image {
4284 display: none;
4285 }
4286 .merchant-modules-list {
4287 grid-template-columns: repeat(1, minmax(0, 1fr));
4288 }
4289 .merchant-modules-header-status {
4290 margin-bottom: 0;
4291 }
4292 .merchant-module-page-setting-box {
4293 -webkit-box-orient: vertical;
4294 -webkit-box-direction: normal;
4295 -ms-flex-direction: column;
4296 flex-direction: column;
4297 grid-gap: 20px;
4298 }
4299 .merchant-module-page-setting-title,
4300 .merchant-module-page-setting-fields {
4301 width: 100%;
4302 }
4303 .merchant-module-page-body {
4304 -webkit-box-orient: vertical;
4305 -webkit-box-direction: reverse;
4306 -ms-flex-direction: column-reverse;
4307 flex-direction: column-reverse;
4308 }
4309 .merchant-module-page-content {
4310 width: 100%;
4311 }
4312 .merchant-module-page-preview {
4313 margin-left: 0;
4314 margin-bottom: 20px;
4315 width: 100%;
4316 }
4317 }