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

4,304 lines 113.0 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 }
1947 .merchant-module-dropdown.merchant-show {
1948 opacity: 1;
1949 pointer-events: auto;
1950 margin-top: 10px;
1951 }
1952 .merchant-module-dropdown ul {
1953 margin: 0;
1954 padding: 0;
1955 list-style: none;
1956 display: -webkit-box;
1957 display: -ms-flexbox;
1958 display: flex;
1959 -webkit-box-orient: vertical;
1960 -webkit-box-direction: normal;
1961 -ms-flex-direction: column;
1962 flex-direction: column;
1963 }
1964 .merchant-module-dropdown ul li {
1965 cursor: pointer;
1966 position: relative;
1967 margin: 0;
1968 padding: 0;
1969 display: -webkit-box;
1970 display: -ms-flexbox;
1971 display: flex;
1972 -webkit-box-align: center;
1973 -ms-flex-align: center;
1974 align-items: center;
1975 -webkit-box-pack: justify;
1976 -ms-flex-pack: justify;
1977 justify-content: space-between;
1978 white-space: nowrap;
1979 padding: 15px 15px 0 15px;
1980 color: #202223;
1981 -webkit-transition: all 0.2s;
1982 transition: all 0.2s;
1983 }
1984 .merchant-module-dropdown ul li:before {
1985 content: "";
1986 position: absolute;
1987 z-index: 1;
1988 top: 0;
1989 left: 0;
1990 bottom: 0;
1991 width: 0;
1992 opacity: 0;
1993 -webkit-transition: all 0.2s;
1994 transition: all 0.2s;
1995 background-color: #3858E9;
1996 }
1997 .merchant-module-dropdown ul li:hover {
1998 background-color: #F2F7FE;
1999 }
2000 .merchant-module-dropdown ul li:hover:before {
2001 opacity: 1;
2002 width: 3px;
2003 }
2004 .merchant-module-dropdown ul li span {
2005 width: 100%;
2006 padding-bottom: 15px;
2007 border-bottom: 1px solid #eee;
2008 }
2009 .merchant-module-dropdown ul li:last-child span {
2010 border-bottom: none;
2011 }
2012
2013 .merchant-module-dropdown-close {
2014 cursor: pointer;
2015 }
2016
2017 .merchant-module-question-title {
2018 display: -webkit-box;
2019 display: -ms-flexbox;
2020 display: flex;
2021 grid-gap: 15px;
2022 -webkit-box-align: center;
2023 -ms-flex-align: center;
2024 align-items: center;
2025 -webkit-box-pack: justify;
2026 -ms-flex-pack: justify;
2027 justify-content: space-between;
2028 white-space: nowrap;
2029 padding: 15px 15px 5px 15px;
2030 font-size: 14px;
2031 line-height: 16px;
2032 color: #202223;
2033 font-weight: 500;
2034 }
2035 .merchant-module-question-title i {
2036 width: auto;
2037 height: auto;
2038 font-size: 24px;
2039 line-height: 1;
2040 }
2041
2042 .merchant-module-question-answer-title {
2043 display: none;
2044 grid-gap: 15px;
2045 -webkit-box-align: center;
2046 -ms-flex-align: center;
2047 align-items: center;
2048 -webkit-box-pack: justify;
2049 -ms-flex-pack: justify;
2050 justify-content: space-between;
2051 white-space: nowrap;
2052 padding: 15px;
2053 font-size: 14px;
2054 line-height: 16px;
2055 color: #202223;
2056 font-weight: 500;
2057 }
2058 .merchant-module-question-answer-title i {
2059 width: auto;
2060 height: auto;
2061 font-size: 20px;
2062 line-height: 1;
2063 }
2064 .merchant-module-question-answer-title.merchant-show {
2065 display: -webkit-box;
2066 display: -ms-flexbox;
2067 display: flex;
2068 }
2069
2070 .merchant-module-question-answer-form {
2071 padding: 5px 15px 15px 15px;
2072 display: -webkit-box;
2073 display: -ms-flexbox;
2074 display: flex;
2075 grid-gap: 10px;
2076 -webkit-box-orient: vertical;
2077 -webkit-box-direction: normal;
2078 -ms-flex-direction: column;
2079 flex-direction: column;
2080 }
2081 .merchant-module-question-answer-form textarea {
2082 width: 100%;
2083 height: 100px;
2084 padding: 12px;
2085 line-height: 1em;
2086 width: 100%;
2087 max-width: 100%;
2088 min-height: auto;
2089 border: 1px solid #D6D6D6;
2090 }
2091 .merchant-module-question-answer-form textarea:focus {
2092 outline: none;
2093 -webkit-box-shadow: none;
2094 box-shadow: none;
2095 border-color: #3858E9;
2096 }
2097 .merchant-module-question-answer-form button {
2098 -ms-flex-item-align: end;
2099 align-self: flex-end;
2100 padding: 8px 10px;
2101 font-size: 13px;
2102 font-weight: 400;
2103 }
2104
2105 .merchant-module-question-answer-thank-you-text {
2106 padding: 5px 15px 15px 15px;
2107 }
2108
2109 .merchant-module-question-thank-you-dropdown .merchant-module-question-answer-title {
2110 display: -webkit-box;
2111 display: -ms-flexbox;
2112 display: flex;
2113 }
2114
2115 .merchant-module-page-button-action-deactivate {
2116 border-radius: 8px;
2117 padding: 12px 16px;
2118 display: -webkit-box;
2119 display: -ms-flexbox;
2120 display: flex;
2121 justify-items: center;
2122 -webkit-box-align: center;
2123 -ms-flex-align: center;
2124 align-items: center;
2125 text-decoration: none;
2126 color: #d82c0d;
2127 }
2128 .merchant-module-page-button-action-deactivate:hover {
2129 background-color: #fff4f4;
2130 }
2131
2132 .merchant-module-page-button-deactivate {
2133 color: #3858E9;
2134 border-color: #3858E9;
2135 background-color: transparent;
2136 }
2137 .merchant-module-page-button-deactivate:focus, .merchant-module-page-button-deactivate:hover {
2138 color: #3858E9;
2139 }
2140 .merchant-module-page-button-deactivate.merchant-show .merchant-module-deactivate-dropdown {
2141 pointer-events: auto;
2142 }
2143
2144 .merchant-module-page-actions-links {
2145 display: -webkit-box;
2146 display: -ms-flexbox;
2147 display: flex;
2148 }
2149
2150 .merchant-module-page-link {
2151 display: -webkit-box;
2152 display: -ms-flexbox;
2153 display: flex;
2154 grid-gap: 5px;
2155 -webkit-box-pack: center;
2156 -ms-flex-pack: center;
2157 justify-content: center;
2158 -webkit-box-align: center;
2159 -ms-flex-align: center;
2160 align-items: center;
2161 padding: 10px;
2162 font-size: 13px;
2163 font-weight: 500;
2164 text-decoration: none;
2165 color: #3858E9;
2166 }
2167 .merchant-module-page-link span {
2168 text-decoration: underline;
2169 }
2170 .merchant-module-page-link:focus, .merchant-module-page-link:hover {
2171 outline: none;
2172 -webkit-box-shadow: none;
2173 box-shadow: none;
2174 color: #3858E9;
2175 }
2176
2177 body.merchant-module-disabled .merchant-module-page-link-preview {
2178 pointer-events: none;
2179 color: #CCC;
2180 }
2181 body.merchant-module-disabled .merchant-module-page-link-preview span {
2182 text-decoration: none;
2183 }
2184 body.merchant-module-disabled .merchant-module-page-link-preview svg path {
2185 fill: #CCC;
2186 }
2187
2188 .merchant-module-page-ajax-header {
2189 display: -webkit-box;
2190 display: -ms-flexbox;
2191 display: flex;
2192 -webkit-box-pack: justify;
2193 -ms-flex-pack: justify;
2194 justify-content: space-between;
2195 -webkit-box-align: center;
2196 -ms-flex-align: center;
2197 align-items: center;
2198 position: fixed;
2199 z-index: 10000;
2200 overflow: hidden;
2201 padding-left: 20px;
2202 padding-right: 20px;
2203 top: 32px;
2204 left: 160px;
2205 right: 0;
2206 height: 56px;
2207 opacity: 0;
2208 pointer-events: none;
2209 background-color: #1d2327;
2210 -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2211 transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2212 }
2213 .merchant-module-page-ajax-header.merchant-show {
2214 opacity: 1;
2215 pointer-events: auto;
2216 }
2217 .merchant-module-page-ajax-header.merchant-saving {
2218 -webkit-user-select: none;
2219 -moz-user-select: none;
2220 -ms-user-select: none;
2221 user-select: none;
2222 }
2223 .merchant-module-page-ajax-header.merchant-saving i {
2224 opacity: 1;
2225 }
2226 .merchant-module-page-ajax-header.merchant-saving span {
2227 opacity: 0;
2228 }
2229 .merchant-module-page-ajax-header.merchant-saving .merchant-module-page-ajax-buttons {
2230 -webkit-user-select: none;
2231 -moz-user-select: none;
2232 -ms-user-select: none;
2233 user-select: none;
2234 pointer-events: none;
2235 }
2236
2237 .merchant-module-page-ajax-notice {
2238 font-size: 14px;
2239 font-weight: 500;
2240 color: #e3e5e7;
2241 }
2242
2243 .merchant-module-page-ajax-buttons {
2244 display: -webkit-box;
2245 display: -ms-flexbox;
2246 display: flex;
2247 -webkit-box-align: center;
2248 -ms-flex-align: center;
2249 align-items: center;
2250 grid-gap: 15px;
2251 }
2252
2253 .merchant-module-save-button {
2254 position: relative;
2255 cursor: pointer;
2256 display: -webkit-box;
2257 display: -ms-flexbox;
2258 display: flex;
2259 -webkit-box-pack: center;
2260 -ms-flex-pack: center;
2261 justify-content: center;
2262 -webkit-box-align: center;
2263 -ms-flex-align: center;
2264 align-items: center;
2265 font-size: 14px;
2266 line-height: 16px;
2267 border: 0;
2268 border-radius: 4px;
2269 min-width: 60px;
2270 min-height: 36px;
2271 padding-left: 16px;
2272 padding-right: 16px;
2273 color: #fff;
2274 background-color: #3858E9;
2275 }
2276 .merchant-module-save-button i {
2277 position: absolute;
2278 width: auto;
2279 height: auto;
2280 font-size: 20px;
2281 opacity: 0;
2282 -webkit-animation: merchant-spin 1.5s infinite linear;
2283 animation: merchant-spin 1.5s infinite linear;
2284 }
2285
2286 @-webkit-keyframes merchant-spin {
2287 0% {
2288 -webkit-transform: rotate(0deg);
2289 transform: rotate(0deg);
2290 }
2291 100% {
2292 -webkit-transform: rotate(359deg);
2293 transform: rotate(359deg);
2294 }
2295 }
2296
2297 @keyframes merchant-spin {
2298 0% {
2299 -webkit-transform: rotate(0deg);
2300 transform: rotate(0deg);
2301 }
2302 100% {
2303 -webkit-transform: rotate(359deg);
2304 transform: rotate(359deg);
2305 }
2306 }
2307 .merchant-module-discard-button {
2308 cursor: pointer;
2309 display: -webkit-box;
2310 display: -ms-flexbox;
2311 display: flex;
2312 -webkit-box-pack: center;
2313 -ms-flex-pack: center;
2314 justify-content: center;
2315 -webkit-box-align: center;
2316 -ms-flex-align: center;
2317 align-items: center;
2318 font-size: 14px;
2319 line-height: 16px;
2320 min-width: 36px;
2321 min-height: 36px;
2322 color: #fff;
2323 text-decoration: none;
2324 }
2325 .merchant-module-discard-button:hover {
2326 color: #fff;
2327 opacity: 0.75;
2328 }
2329 .merchant-module-discard-button:focus {
2330 outline: none;
2331 -webkit-box-shadow: none;
2332 box-shadow: none;
2333 }
2334
2335 .merchant-module-page-preview-browser-top {
2336 background: #323232;
2337 display: -webkit-box;
2338 display: -ms-flexbox;
2339 display: flex;
2340 -webkit-box-align: center;
2341 -ms-flex-align: center;
2342 align-items: center;
2343 height: 45px;
2344 padding-left: 9px;
2345 }
2346
2347 .merchant-module-page-preview-browser-top-circle {
2348 background: #616161;
2349 width: 12px;
2350 height: 12px;
2351 border-radius: 50%;
2352 display: block;
2353 margin-left: 7px;
2354 }
2355
2356 .merchant-module-page-preview-browser {
2357 border-top-left-radius: 5px;
2358 border-top-right-radius: 5px;
2359 overflow: hidden;
2360 -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2361 box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2362 margin-bottom: -29px;
2363 display: -webkit-box;
2364 display: -ms-flexbox;
2365 display: flex;
2366 -webkit-box-orient: vertical;
2367 -webkit-box-direction: normal;
2368 -ms-flex-direction: column;
2369 flex-direction: column;
2370 }
2371
2372 .merchant-module-page-preview-browser-inner {
2373 -webkit-box-flex: 1;
2374 -ms-flex-positive: 1;
2375 flex-grow: 1;
2376 position: relative;
2377 display: block;
2378 }
2379
2380 .merchant-module-page-preview-box {
2381 overflow: hidden;
2382 position: sticky;
2383 top: 45px;
2384 }
2385
2386 .merchant-module-page-settings,
2387 .merchant-module-page-preview-box {
2388 display: -webkit-box;
2389 display: -ms-flexbox;
2390 display: flex;
2391 grid-gap: 30px;
2392 -webkit-box-orient: vertical;
2393 -webkit-box-direction: normal;
2394 -ms-flex-direction: column;
2395 flex-direction: column;
2396 padding: 30px;
2397 background-color: #fff;
2398 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2399 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2400 border-radius: 4px;
2401 }
2402
2403 .merchant-module-page-setting-box {
2404 display: -webkit-box;
2405 display: -ms-flexbox;
2406 display: flex;
2407 }
2408 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 {
2409 -webkit-box-orient: vertical;
2410 -webkit-box-direction: normal;
2411 -ms-flex-direction: column;
2412 flex-direction: column;
2413 grid-gap: 20px;
2414 }
2415 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-title,
2416 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-fields {
2417 width: 100%;
2418 }
2419
2420 .merchant-module-page-preview-title,
2421 .merchant-module-page-setting-title {
2422 margin-top: 10px;
2423 padding-right: 50px;
2424 font-size: 20px;
2425 font-weight: 500;
2426 color: #2F2F2F;
2427 }
2428
2429 .merchant-module-page-setting-title {
2430 width: 40%;
2431 }
2432
2433 .merchant-module-page-setting-subtitle {
2434 margin-top: 20px;
2435 font-size: 13px;
2436 font-weight: 400;
2437 color: #757575;
2438 }
2439
2440 .merchant-module-page-setting-fields {
2441 display: -webkit-box;
2442 display: -ms-flexbox;
2443 display: flex;
2444 grid-gap: 24px;
2445 -webkit-box-orient: vertical;
2446 -webkit-box-direction: normal;
2447 -ms-flex-direction: column;
2448 flex-direction: column;
2449 width: 60%;
2450 padding: 30px;
2451 border-radius: 4px;
2452 border: 2px solid #F0F0F1;
2453 background-color: #fff;
2454 }
2455
2456 .merchant-module-page-setting-field {
2457 display: -webkit-box;
2458 display: -ms-flexbox;
2459 display: flex;
2460 grid-gap: 10px;
2461 -webkit-box-orient: vertical;
2462 -webkit-box-direction: normal;
2463 -ms-flex-direction: column;
2464 flex-direction: column;
2465 }
2466 .merchant-module-page-setting-field.merchant-show {
2467 display: -webkit-box;
2468 display: -ms-flexbox;
2469 display: flex;
2470 }
2471 .merchant-module-page-setting-field.merchant-hide {
2472 display: none;
2473 }
2474
2475 .merchant-module-page-setting-field-title {
2476 font-size: 14px;
2477 font-weight: 500;
2478 color: #2F2F2F;
2479 }
2480
2481 .merchant-module-page-setting-field-desc {
2482 font-size: 13px;
2483 font-weight: 400;
2484 color: #777;
2485 }
2486 .merchant-module-page-setting-field-desc a {
2487 color: #3858E9;
2488 }
2489 .merchant-module-page-setting-field-desc a:focus {
2490 -webkit-box-shadow: none;
2491 box-shadow: none;
2492 }
2493
2494 .merchant-license-form-wrapper .merchant-license-form {
2495 display: -webkit-box;
2496 display: -ms-flexbox;
2497 display: flex;
2498 -ms-flex-wrap: wrap;
2499 flex-wrap: wrap;
2500 grid-gap: 10px;
2501 }
2502 .merchant-license-form-wrapper .merchant-license-form input {
2503 width: 400px;
2504 max-width: 100%;
2505 padding-left: 36px;
2506 min-height: 36px;
2507 }
2508 .merchant-license-form-wrapper .merchant-license-form input::-webkit-input-placeholder {
2509 opacity: 0.75;
2510 }
2511 .merchant-license-form-wrapper .merchant-license-form input::-moz-placeholder {
2512 opacity: 0.75;
2513 }
2514 .merchant-license-form-wrapper .merchant-license-form input:-ms-input-placeholder {
2515 opacity: 0.75;
2516 }
2517 .merchant-license-form-wrapper .merchant-license-form input::-ms-input-placeholder {
2518 opacity: 0.75;
2519 }
2520 .merchant-license-form-wrapper .merchant-license-form input::placeholder {
2521 opacity: 0.75;
2522 }
2523 .merchant-license-form-wrapper .merchant-license-form button {
2524 position: relative;
2525 display: -webkit-box;
2526 display: -ms-flexbox;
2527 display: flex;
2528 grid-gap: 2px;
2529 -webkit-box-align: center;
2530 -ms-flex-align: center;
2531 align-items: center;
2532 line-height: 1em;
2533 min-height: 36px;
2534 padding: 10px 40px !important;
2535 background-color: transparent;
2536 color: #3858E9;
2537 border-color: #3858E9;
2538 }
2539 .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 {
2540 color: #FFF;
2541 background-color: #3452da;
2542 border-color: #3452da;
2543 }
2544 .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate {
2545 color: #d82c0d;
2546 border-color: #d82c0d;
2547 }
2548 .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 {
2549 color: #FFF;
2550 background-color: #d82c0d;
2551 border-color: #d82c0d;
2552 }
2553 .merchant-license-form-wrapper .merchant-license-key-input {
2554 position: relative;
2555 display: -webkit-box;
2556 display: -ms-flexbox;
2557 display: flex;
2558 }
2559 .merchant-license-form-wrapper .merchant-license-key-input i {
2560 position: absolute;
2561 z-index: 1;
2562 top: 50%;
2563 left: 10px;
2564 -webkit-transform: translateY(-50%);
2565 transform: translateY(-50%);
2566 margin-top: -1px;
2567 font-size: 20px !important;
2568 color: #5C5F62;
2569 }
2570
2571 .mechant-license-response-wrapper,
2572 .merchant-dashboard-license-success {
2573 display: block;
2574 margin-top: 10px;
2575 color: #757575;
2576 }
2577 .mechant-license-response-wrapper span,
2578 .merchant-dashboard-license-success span {
2579 margin-left: 5px;
2580 }
2581
2582 .merchant-module-page-setting-field-text input,
2583 .merchant-module-page-setting-field-number input,
2584 .merchant-module-page-setting-field-text_readonly input {
2585 padding: 12px;
2586 line-height: 1.3em;
2587 width: 100%;
2588 max-width: 100%;
2589 min-height: auto;
2590 border: 1px solid #D6D6D6;
2591 }
2592 .merchant-module-page-setting-field-text input:focus,
2593 .merchant-module-page-setting-field-number input:focus,
2594 .merchant-module-page-setting-field-text_readonly input:focus {
2595 outline: none;
2596 -webkit-box-shadow: none;
2597 box-shadow: none;
2598 border-color: #3858E9;
2599 }
2600
2601 .merchant-module-page-setting-field-textarea textarea,
2602 .merchant-module-page-setting-field-textarea_code textarea {
2603 padding: 12px;
2604 line-height: 1em;
2605 width: 100%;
2606 max-width: 100%;
2607 min-height: 120px;
2608 border: 1px solid #D6D6D6;
2609 }
2610 .merchant-module-page-setting-field-textarea textarea:focus,
2611 .merchant-module-page-setting-field-textarea_code textarea:focus {
2612 outline: none;
2613 -webkit-box-shadow: none;
2614 box-shadow: none;
2615 border-color: #3858E9;
2616 }
2617
2618 .merchant-code-snippets-textarea textarea,
2619 .merchant-code-snippets-textarea_code textarea {
2620 min-height: 200px;
2621 }
2622
2623 .merchant-module-page-setting-field-radio div,
2624 .merchant-module-page-setting-field-radio_alt div,
2625 .merchant-module-page-setting-field-checkbox div {
2626 display: -webkit-box;
2627 display: -ms-flexbox;
2628 display: flex;
2629 grid-gap: 30px;
2630 }
2631 .merchant-module-page-setting-field-radio label,
2632 .merchant-module-page-setting-field-radio_alt label,
2633 .merchant-module-page-setting-field-checkbox label {
2634 display: -webkit-box;
2635 display: -ms-flexbox;
2636 display: flex;
2637 grid-gap: 12px;
2638 -webkit-box-align: center;
2639 -ms-flex-align: center;
2640 align-items: center;
2641 -webkit-user-select: none;
2642 -moz-user-select: none;
2643 -ms-user-select: none;
2644 user-select: none;
2645 }
2646 .merchant-module-page-setting-field-radio span,
2647 .merchant-module-page-setting-field-radio_alt span,
2648 .merchant-module-page-setting-field-checkbox span {
2649 font-size: 14px;
2650 font-weight: 400;
2651 color: #1D2327;
2652 }
2653 .merchant-module-page-setting-field-radio input,
2654 .merchant-module-page-setting-field-radio_alt input,
2655 .merchant-module-page-setting-field-checkbox input {
2656 -ms-flex-negative: 0;
2657 flex-shrink: 0;
2658 margin: 0;
2659 width: 20px;
2660 height: 20px;
2661 border: 1px solid #D6D6D6;
2662 background-color: #fff;
2663 display: -webkit-inline-box;
2664 display: -ms-inline-flexbox;
2665 display: inline-flex;
2666 -webkit-box-align: center;
2667 -ms-flex-align: center;
2668 align-items: center;
2669 -webkit-box-pack: center;
2670 -ms-flex-pack: center;
2671 justify-content: center;
2672 -webkit-transition: none;
2673 transition: none;
2674 -webkit-box-sizing: border-box;
2675 box-sizing: border-box;
2676 -webkit-box-shadow: none;
2677 box-shadow: none;
2678 }
2679 .merchant-module-page-setting-field-radio input:checked,
2680 .merchant-module-page-setting-field-radio_alt input:checked,
2681 .merchant-module-page-setting-field-checkbox input:checked {
2682 -webkit-transition: none;
2683 transition: none;
2684 }
2685 .merchant-module-page-setting-field-radio input:checked::before,
2686 .merchant-module-page-setting-field-radio_alt input:checked::before,
2687 .merchant-module-page-setting-field-checkbox input:checked::before {
2688 content: "";
2689 margin: 0;
2690 padding: 0;
2691 -webkit-box-sizing: border-box;
2692 box-sizing: border-box;
2693 -webkit-transition: none;
2694 transition: none;
2695 }
2696 .merchant-module-page-setting-field-radio input[type=checkbox],
2697 .merchant-module-page-setting-field-radio_alt input[type=checkbox],
2698 .merchant-module-page-setting-field-checkbox input[type=checkbox] {
2699 border-radius: 6px;
2700 }
2701 .merchant-module-page-setting-field-radio input[type=checkbox]:focus,
2702 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus,
2703 .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus {
2704 border-color: #fff;
2705 -webkit-box-shadow: 0 0 0 2px #3858E9;
2706 box-shadow: 0 0 0 2px #3858E9;
2707 }
2708 .merchant-module-page-setting-field-radio input[type=checkbox]:checked,
2709 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked,
2710 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked {
2711 border-color: #fff;
2712 background-color: #3858E9;
2713 }
2714 .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before,
2715 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before,
2716 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before {
2717 width: 100%;
2718 height: 100%;
2719 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");
2720 background-repeat: no-repeat;
2721 background-position: 3px 4px;
2722 }
2723 .merchant-module-page-setting-field-radio input[type=radio],
2724 .merchant-module-page-setting-field-radio_alt input[type=radio],
2725 .merchant-module-page-setting-field-checkbox input[type=radio] {
2726 border-radius: 100%;
2727 }
2728 .merchant-module-page-setting-field-radio input[type=radio]:focus,
2729 .merchant-module-page-setting-field-radio_alt input[type=radio]:focus,
2730 .merchant-module-page-setting-field-checkbox input[type=radio]:focus {
2731 border-color: #fff;
2732 -webkit-box-shadow: none;
2733 box-shadow: none;
2734 }
2735 .merchant-module-page-setting-field-radio input[type=radio]:checked,
2736 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked,
2737 .merchant-module-page-setting-field-checkbox input[type=radio]:checked {
2738 border-color: #3858E9;
2739 background-color: #fff;
2740 -webkit-box-shadow: 0 0 0 1px #3858E9;
2741 box-shadow: 0 0 0 1px #3858E9;
2742 }
2743 .merchant-module-page-setting-field-radio input[type=radio]:checked::before,
2744 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before,
2745 .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before {
2746 width: 12px;
2747 height: 12px;
2748 border-radius: 12px;
2749 background-color: #3858E9;
2750 }
2751
2752 @media (max-width: 1300px) {
2753 .merchant-module-page-setting-field-radio div {
2754 grid-gap: 20px;
2755 }
2756 }
2757 .merchant-module-page-setting-field-radio span {
2758 opacity: 0.8;
2759 }
2760 .merchant-module-page-setting-field-radio input[type=radio]:checked + span {
2761 opacity: 1;
2762 }
2763
2764 .merchant-module-page-setting-field-radio_alt div {
2765 display: -webkit-box;
2766 display: -ms-flexbox;
2767 display: flex;
2768 grid-gap: 10px;
2769 -webkit-box-orient: vertical;
2770 -webkit-box-direction: normal;
2771 -ms-flex-direction: column;
2772 flex-direction: column;
2773 }
2774 .merchant-module-page-setting-field-radio_alt label span {
2775 font-size: 14px;
2776 font-weight: 400;
2777 color: #1D2327;
2778 }
2779 .merchant-module-page-setting-field-radio_alt p {
2780 margin: 0;
2781 color: #757575;
2782 }
2783 .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner {
2784 grid-gap: 30px;
2785 -webkit-box-orient: vertical;
2786 -webkit-box-direction: normal;
2787 -ms-flex-direction: column;
2788 flex-direction: column;
2789 }
2790
2791 .merchant-module-page-setting-field-content {
2792 max-width: 60vw;
2793 }
2794 .merchant-module-page-setting-field-content a {
2795 color: #3858E9;
2796 }
2797 .merchant-module-page-setting-field-content a:focus {
2798 -webkit-box-shadow: none;
2799 box-shadow: none;
2800 }
2801
2802 .merchant-tag-pre-orders {
2803 display: -webkit-box;
2804 display: -ms-flexbox;
2805 display: flex;
2806 grid-gap: 16px;
2807 }
2808 .merchant-tag-pre-orders a {
2809 display: -webkit-box;
2810 display: -ms-flexbox;
2811 display: flex;
2812 -webkit-box-align: center;
2813 -ms-flex-align: center;
2814 align-items: center;
2815 -webkit-box-pack: center;
2816 -ms-flex-pack: center;
2817 justify-content: center;
2818 margin: 0;
2819 padding: 8px 26px;
2820 font-size: 14px;
2821 line-height: 20px;
2822 -webkit-user-select: none;
2823 -moz-user-select: none;
2824 -ms-user-select: none;
2825 user-select: none;
2826 min-width: 145px;
2827 font-weight: 500;
2828 text-decoration: none;
2829 border-radius: 4px;
2830 color: #202223;
2831 border: 1px solid #C9CCCF;
2832 background-color: #fff;
2833 }
2834 .merchant-tag-pre-orders a:focus, .merchant-tag-pre-orders a:active {
2835 outline: none;
2836 -webkit-box-shadow: none;
2837 box-shadow: none;
2838 }
2839 .merchant-tag-pre-orders p {
2840 display: -webkit-box;
2841 display: -ms-flexbox;
2842 display: flex;
2843 -webkit-box-orient: vertical;
2844 -webkit-box-direction: normal;
2845 -ms-flex-direction: column;
2846 flex-direction: column;
2847 -webkit-box-align: start;
2848 -ms-flex-align: start;
2849 align-items: flex-start;
2850 grid-gap: 16px;
2851 font-size: 14px;
2852 line-height: 20px;
2853 margin: 0;
2854 padding: 0;
2855 }
2856 .merchant-tag-pre-orders p i {
2857 -ms-flex-negative: 0;
2858 flex-shrink: 0;
2859 }
2860
2861 .merchant-module-page-setting-field-select select,
2862 .merchant-module-page-setting-field-select_ajax select,
2863 .merchant-module-page-setting-field-select_size_chart select {
2864 padding: 12px 20px 12px 12px;
2865 line-height: 1.3em;
2866 width: 100%;
2867 max-width: 100%;
2868 min-height: auto;
2869 border-radius: 6px;
2870 color: #2F2F2F;
2871 border: 1px solid #D6D6D6;
2872 }
2873 .merchant-module-page-setting-field-select select:hover,
2874 .merchant-module-page-setting-field-select_ajax select:hover,
2875 .merchant-module-page-setting-field-select_size_chart select:hover {
2876 color: #2F2F2F;
2877 }
2878 .merchant-module-page-setting-field-select select:focus,
2879 .merchant-module-page-setting-field-select_ajax select:focus,
2880 .merchant-module-page-setting-field-select_size_chart select:focus {
2881 outline: none;
2882 -webkit-box-shadow: none;
2883 box-shadow: none;
2884 border-color: #3858E9;
2885 }
2886 .merchant-module-page-setting-field-select select option,
2887 .merchant-module-page-setting-field-select_ajax select option,
2888 .merchant-module-page-setting-field-select_size_chart select option {
2889 color: #2F2F2F;
2890 }
2891 .merchant-module-page-setting-field-select .select2-container .select2-selection--single,
2892 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single,
2893 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single {
2894 height: 44px !important;
2895 }
2896 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
2897 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
2898 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
2899 line-height: 41px !important;
2900 }
2901 .merchant-module-page-setting-field-select .select2-selection__arrow,
2902 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
2903 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
2904 height: 43px !important;
2905 }
2906
2907 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper {
2908 display: -webkit-box;
2909 display: -ms-flexbox;
2910 display: flex;
2911 grid-gap: 15px;
2912 }
2913 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select {
2914 width: 100%;
2915 }
2916 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number {
2917 width: 100px;
2918 }
2919
2920 .merchant-module-page-setting-field-choices input {
2921 display: none;
2922 }
2923 .merchant-module-page-setting-field-choices input:checked + figure {
2924 border-color: #3858E9;
2925 }
2926 .merchant-module-page-setting-field-choices label {
2927 display: -webkit-box;
2928 display: -ms-flexbox;
2929 display: flex;
2930 position: relative;
2931 }
2932 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
2933 opacity: 1;
2934 visibility: visible;
2935 -webkit-transform: translate3d(-50%, 0, 0);
2936 transform: translate3d(-50%, 0, 0);
2937 }
2938 .merchant-module-page-setting-field-choices figure {
2939 display: -webkit-box;
2940 display: -ms-flexbox;
2941 display: flex;
2942 margin: 0;
2943 padding: 2px;
2944 border-radius: 4px;
2945 border: 2px solid transparent;
2946 }
2947 .merchant-module-page-setting-field-choices .merchant-tooltip {
2948 position: absolute;
2949 z-index: 10;
2950 left: 50%;
2951 bottom: calc(100% + 12px);
2952 padding: 3px 12px;
2953 font-size: 11px;
2954 white-space: nowrap;
2955 opacity: 0;
2956 visibility: hidden;
2957 -webkit-transform: translate3d(-50%, 6px, 0);
2958 transform: translate3d(-50%, 6px, 0);
2959 -webkit-transition: all 0.2s;
2960 transition: all 0.2s;
2961 border-radius: 3px;
2962 color: #f7f7f7;
2963 background-color: #212121;
2964 }
2965 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
2966 content: "";
2967 position: absolute;
2968 left: 50%;
2969 bottom: -12px;
2970 border: 6px solid transparent;
2971 border-top-color: #212121;
2972 -webkit-transform: translate3d(-50%, 0, 0);
2973 transform: translate3d(-50%, 0, 0);
2974 }
2975 .merchant-module-page-setting-field-choices .merchant-choices {
2976 display: -webkit-box;
2977 display: -ms-flexbox;
2978 display: flex;
2979 grid-gap: 10px;
2980 }
2981 .merchant-module-page-setting-field-choices .merchant-choices svg {
2982 width: 20px;
2983 height: 20px;
2984 }
2985
2986 .merchant-module-page-setting-field-buttons input {
2987 display: none;
2988 }
2989 .merchant-module-page-setting-field-buttons input:checked + span {
2990 color: #fff;
2991 background-color: #3858E9;
2992 }
2993 .merchant-module-page-setting-field-buttons label {
2994 display: -webkit-box;
2995 display: -ms-flexbox;
2996 display: flex;
2997 }
2998 .merchant-module-page-setting-field-buttons span {
2999 display: -webkit-box;
3000 display: -ms-flexbox;
3001 display: flex;
3002 -webkit-box-align: center;
3003 -ms-flex-align: center;
3004 align-items: center;
3005 -webkit-box-pack: center;
3006 -ms-flex-pack: center;
3007 justify-content: center;
3008 margin: 0;
3009 padding: 10px 15px;
3010 border-radius: 2px;
3011 -webkit-user-select: none;
3012 -moz-user-select: none;
3013 -ms-user-select: none;
3014 user-select: none;
3015 min-width: 120px;
3016 font-weight: 500;
3017 }
3018 .merchant-module-page-setting-field-buttons .merchant-buttons {
3019 display: -webkit-inline-box;
3020 display: -ms-inline-flexbox;
3021 display: inline-flex;
3022 padding: 3px;
3023 border: 1px solid #D6D6D6;
3024 border-radius: 4px;
3025 }
3026 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
3027 text-decoration: underline;
3028 }
3029 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
3030 text-decoration: line-through;
3031 }
3032 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
3033 text-decoration: overline;
3034 }
3035
3036 .merchant-module-page-setting-field-buttons_alt input {
3037 display: none;
3038 }
3039 .merchant-module-page-setting-field-buttons_alt input:checked + span {
3040 color: #fff;
3041 background-color: #3858E9;
3042 }
3043 .merchant-module-page-setting-field-buttons_alt label {
3044 display: -webkit-box;
3045 display: -ms-flexbox;
3046 display: flex;
3047 }
3048 .merchant-module-page-setting-field-buttons_alt label:hover {
3049 position: relative;
3050 z-index: 10;
3051 }
3052 .merchant-module-page-setting-field-buttons_alt span {
3053 display: -webkit-box;
3054 display: -ms-flexbox;
3055 display: flex;
3056 -webkit-box-align: center;
3057 -ms-flex-align: center;
3058 align-items: center;
3059 -webkit-box-pack: center;
3060 -ms-flex-pack: center;
3061 justify-content: center;
3062 margin: 0;
3063 padding: 10px 15px;
3064 border-radius: 2px;
3065 -webkit-user-select: none;
3066 -moz-user-select: none;
3067 -ms-user-select: none;
3068 user-select: none;
3069 min-width: 120px;
3070 font-weight: 500;
3071 border-radius: 4px;
3072 border: 1px solid #D6D6D6;
3073 background-color: #fff;
3074 }
3075 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
3076 display: -webkit-box;
3077 display: -ms-flexbox;
3078 display: flex;
3079 -ms-flex-wrap: wrap;
3080 flex-wrap: wrap;
3081 grid-gap: 5px;
3082 padding: 3px;
3083 }
3084
3085 .merchant-animated-buttons .merchant-buttons {
3086 display: grid;
3087 grid-template-columns: repeat(5, 1fr);
3088 }
3089 .merchant-animated-buttons span {
3090 width: 100%;
3091 }
3092
3093 @media (max-width: 1470px) {
3094 .merchant-animated-buttons .merchant-buttons {
3095 grid-template-columns: repeat(3, 1fr);
3096 }
3097 }
3098 @media (max-width: 1050px) {
3099 .merchant-animated-buttons .merchant-buttons {
3100 grid-template-columns: repeat(2, 1fr);
3101 }
3102 }
3103 /* Sortable Field */
3104 .merchant-sortable {
3105 max-width: 300px;
3106 }
3107 .merchant-sortable ul.ui-sortable li {
3108 position: relative;
3109 overflow: hidden;
3110 padding: 0;
3111 color: #1E1E1E;
3112 border: 1px solid #ddd;
3113 border-radius: 2px;
3114 text-transform: capitalize;
3115 line-height: 36px;
3116 cursor: -webkit-grab;
3117 cursor: grab;
3118 }
3119 .merchant-sortable ul.ui-sortable li .dashicons {
3120 width: 36px;
3121 height: 36px;
3122 -ms-flex-preferred-size: 36px;
3123 flex-basis: 36px;
3124 display: -webkit-box;
3125 display: -ms-flexbox;
3126 display: flex;
3127 -webkit-box-pack: center;
3128 -ms-flex-pack: center;
3129 justify-content: center;
3130 -webkit-box-align: center;
3131 -ms-flex-align: center;
3132 align-items: center;
3133 text-align: center;
3134 -webkit-box-sizing: border-box;
3135 box-sizing: border-box;
3136 }
3137 .merchant-sortable ul.ui-sortable li .dashicons:before {
3138 font-size: 16px;
3139 line-height: 1em;
3140 }
3141 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
3142 float: left;
3143 padding: 0;
3144 margin: 0 10px 0 0;
3145 border: none;
3146 border-right: 1px solid #ddd;
3147 }
3148 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
3149 float: right;
3150 color: #3858E9;
3151 padding: 0;
3152 margin: 0 0 0 10px;
3153 border: none;
3154 border-left: 1px solid #ddd;
3155 }
3156 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
3157 cursor: pointer;
3158 }
3159 .merchant-sortable ul.ui-sortable li.invisible {
3160 color: #6E7780;
3161 border: 1px solid #CAD2F6;
3162 background-color: #EBEEFB;
3163 }
3164 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
3165 content: "\f530";
3166 }
3167
3168 /* Sortable Repeater Field */
3169 .merchant-module-page-setting-field-flexible_content .merchant-module-page-setting-field-title {
3170 margin-bottom: 10px;
3171 }
3172
3173 .merchant-sortable-repeater-control {
3174 max-width: 100%;
3175 }
3176 .merchant-sortable-repeater-control .sortable {
3177 list-style-type: none;
3178 margin: 0;
3179 padding: 0;
3180 }
3181 .merchant-sortable-repeater-control .sortable input[type=text] {
3182 width: 100%;
3183 margin: 0;
3184 border-radius: 4px 0 0 4px;
3185 border: 1px solid #D6D6D6;
3186 padding: 12px;
3187 line-height: 1.3em;
3188 }
3189 .merchant-sortable-repeater-control .sortable input[type=text]:focus {
3190 border-color: #3858E9;
3191 outline: none;
3192 -webkit-box-shadow: none;
3193 box-shadow: none;
3194 }
3195 .merchant-sortable-repeater-control .sortable div {
3196 cursor: -webkit-grab;
3197 cursor: grab;
3198 margin-bottom: 7px;
3199 }
3200 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete {
3201 display: -webkit-box;
3202 display: -ms-flexbox;
3203 display: flex;
3204 -webkit-box-align: center;
3205 -ms-flex-align: center;
3206 align-items: center;
3207 -webkit-box-pack: center;
3208 -ms-flex-pack: center;
3209 justify-content: center;
3210 margin: 0;
3211 width: 44px;
3212 height: auto;
3213 font-size: 1.3em;
3214 line-height: 34px;
3215 color: #d4d4d4;
3216 background: #fff;
3217 padding: 0;
3218 vertical-align: top;
3219 margin-left: -1px;
3220 border: 1px solid #D6D6D6;
3221 text-decoration: none;
3222 }
3223 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt {
3224 width: 100%;
3225 text-decoration: none;
3226 margin: 0;
3227 font-weight: 600;
3228 color: #50575e;
3229 font-size: 1.1em;
3230 line-height: 34px;
3231 height: auto;
3232 }
3233 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus {
3234 outline: none;
3235 -webkit-box-shadow: none;
3236 box-shadow: none;
3237 }
3238 .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 {
3239 color: #a7a7a7;
3240 }
3241 .merchant-sortable-repeater-control .repeater {
3242 display: -webkit-box;
3243 display: -ms-flexbox;
3244 display: flex;
3245 }
3246 .merchant-sortable-repeater-control .repeater .dashicons-menu {
3247 display: -webkit-box;
3248 display: -ms-flexbox;
3249 display: flex;
3250 -webkit-box-align: center;
3251 -ms-flex-align: center;
3252 align-items: center;
3253 -webkit-box-pack: center;
3254 -ms-flex-pack: center;
3255 justify-content: center;
3256 margin: 0;
3257 width: 44px;
3258 height: auto;
3259 font-size: 1.3em;
3260 line-height: 34px;
3261 background: #fff;
3262 padding: 0;
3263 vertical-align: top;
3264 margin-left: -1px;
3265 border: 1px solid #D6D6D6;
3266 }
3267 .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
3268 color: #a7a7a7;
3269 }
3270 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add {
3271 color: #3858E9;
3272 border-color: #3858E9;
3273 background-color: transparent;
3274 margin-top: 10px;
3275 padding: 4px 19px;
3276 }
3277 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus {
3278 outline: none;
3279 -webkit-box-shadow: none;
3280 box-shadow: none;
3281 background-color: #ffffff;
3282 }
3283 .merchant-sortable-repeater-control.disable-sorting .dashicons-menu {
3284 display: none;
3285 }
3286
3287 /* Flexible Content Field */
3288 .merchant-flexible-content-control {
3289 max-width: 100%;
3290 }
3291 .merchant-flexible-content-control .sortable {
3292 list-style-type: none;
3293 margin: 0;
3294 padding: 0;
3295 }
3296 .merchant-flexible-content-control .sortable input[type=text] {
3297 width: 100%;
3298 margin: 0;
3299 border-radius: 4px 0 0 4px;
3300 border: 1px solid #D6D6D6;
3301 padding: 8px;
3302 line-height: 1.3em;
3303 }
3304 .merchant-flexible-content-control .sortable input[type=text]:focus {
3305 border-color: #3858E9;
3306 outline: none;
3307 -webkit-box-shadow: none;
3308 box-shadow: none;
3309 }
3310 .merchant-flexible-content-control .customize-control-flexible-content-move {
3311 cursor: -webkit-grab;
3312 cursor: grab;
3313 }
3314 .merchant-flexible-content-control .customize-control-flexible-content-delete {
3315 display: -webkit-box;
3316 display: -ms-flexbox;
3317 display: flex;
3318 -webkit-box-align: center;
3319 -ms-flex-align: center;
3320 align-items: center;
3321 -webkit-box-pack: center;
3322 -ms-flex-pack: center;
3323 justify-content: center;
3324 margin: 0;
3325 width: 40px;
3326 height: auto;
3327 font-size: 1.3em;
3328 line-height: 34px;
3329 color: #d4d4d4;
3330 background: #fff;
3331 padding: 0;
3332 vertical-align: top;
3333 margin-left: -1px;
3334 text-decoration: none;
3335 }
3336 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt {
3337 width: 100%;
3338 text-decoration: none;
3339 margin: 0;
3340 font-weight: 600;
3341 color: #50575e;
3342 font-size: 1.1em;
3343 line-height: 34px;
3344 height: auto;
3345 }
3346 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus {
3347 outline: none;
3348 -webkit-box-shadow: none;
3349 box-shadow: none;
3350 }
3351 .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 {
3352 color: #a7a7a7;
3353 }
3354 .merchant-flexible-content-control .merchant-flexible-content.empty {
3355 border: 2px dashed #dcdcde;
3356 min-height: 100px;
3357 margin-bottom: 10px;
3358 }
3359 .merchant-flexible-content-control.default-style .layout {
3360 background: white;
3361 border: 1px solid #c3c4c7;
3362 border-left: 3px solid #3858e9;
3363 }
3364 .merchant-flexible-content-control.default-style .layout .layout-header {
3365 padding: 8px 15px;
3366 }
3367 .merchant-flexible-content-control.default-style .layout .layout-body {
3368 padding: 15px;
3369 }
3370 .merchant-flexible-content-control.table-style .layout .layout-header {
3371 padding-bottom: 8px;
3372 margin-bottom: 15px;
3373 }
3374 .merchant-flexible-content-control.table-style .layout .layout-body {
3375 -webkit-box-orient: horizontal;
3376 -webkit-box-direction: normal;
3377 -ms-flex-direction: row;
3378 flex-direction: row;
3379 }
3380 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
3381 display: none;
3382 }
3383 .merchant-flexible-content-control .layouts {
3384 display: none;
3385 }
3386 .merchant-flexible-content-control .layout {
3387 margin-bottom: 20px;
3388 }
3389 .merchant-flexible-content-control .layout .layout-header {
3390 display: -webkit-box;
3391 display: -ms-flexbox;
3392 display: flex;
3393 -webkit-box-align: center;
3394 -ms-flex-align: center;
3395 align-items: center;
3396 border-bottom: 1px solid #f3f3f3;
3397 }
3398 .merchant-flexible-content-control .layout .layout-count {
3399 border-radius: 50%;
3400 width: 24px;
3401 height: 23px;
3402 border: 1px solid #949494;
3403 text-align: center;
3404 display: -webkit-box;
3405 display: -ms-flexbox;
3406 display: flex;
3407 -webkit-box-pack: center;
3408 -ms-flex-pack: center;
3409 justify-content: center;
3410 -webkit-box-orient: vertical;
3411 -webkit-box-direction: normal;
3412 -ms-flex-direction: column;
3413 flex-direction: column;
3414 font-size: 12px;
3415 font-weight: bold;
3416 margin-right: 10px;
3417 }
3418 .merchant-flexible-content-control .layout .layout-title {
3419 font-size: 14px;
3420 font-weight: bold;
3421 }
3422 .merchant-flexible-content-control .layout .layout-actions {
3423 display: -webkit-box;
3424 display: -ms-flexbox;
3425 display: flex;
3426 margin: 0;
3427 padding: 0;
3428 -webkit-box-pack: end;
3429 -ms-flex-pack: end;
3430 justify-content: flex-end;
3431 -webkit-box-flex: 1;
3432 -ms-flex-positive: 1;
3433 flex-grow: 1;
3434 }
3435 .merchant-flexible-content-control .layout .layout-body {
3436 display: -webkit-box;
3437 display: -ms-flexbox;
3438 display: flex;
3439 -webkit-box-orient: vertical;
3440 -webkit-box-direction: normal;
3441 -ms-flex-direction: column;
3442 flex-direction: column;
3443 grid-gap: 20px;
3444 }
3445 .merchant-flexible-content-control .layout .layout-field.flex-grow {
3446 -webkit-box-flex: 1;
3447 -ms-flex-positive: 1;
3448 flex-grow: 1;
3449 }
3450 .merchant-flexible-content-control .layout .dashicons-menu {
3451 display: -webkit-box;
3452 display: -ms-flexbox;
3453 display: flex;
3454 -webkit-box-align: center;
3455 -ms-flex-align: center;
3456 align-items: center;
3457 -webkit-box-pack: center;
3458 -ms-flex-pack: center;
3459 justify-content: center;
3460 margin: 0;
3461 width: 40px;
3462 height: auto;
3463 font-size: 1.3em;
3464 line-height: 34px;
3465 background: #fff;
3466 padding: 0;
3467 vertical-align: top;
3468 margin-left: -1px;
3469 }
3470 .merchant-flexible-content-control .layout .dashicons-menu:hover {
3471 color: #a7a7a7;
3472 }
3473 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
3474 position: relative;
3475 display: inline-block;
3476 }
3477 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
3478 opacity: 0;
3479 visibility: hidden;
3480 position: absolute;
3481 background-color: #ffffff;
3482 border: 1px solid #c3c4c7;
3483 border-left: 3px solid #3858e9;
3484 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3485 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3486 width: 180px;
3487 bottom: 100%;
3488 display: -webkit-box;
3489 display: -ms-flexbox;
3490 display: flex;
3491 -webkit-box-orient: vertical;
3492 -webkit-box-direction: normal;
3493 -ms-flex-direction: column;
3494 flex-direction: column;
3495 left: 50%;
3496 -webkit-transform: translate(-50%, 10px);
3497 transform: translate(-50%, 10px);
3498 padding: 3px 3px 3px 5px;
3499 }
3500 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
3501 z-index: 10;
3502 opacity: 1;
3503 visibility: visible;
3504 -webkit-transform: translate(-50%, -15px);
3505 transform: translate(-50%, -15px);
3506 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3507 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3508 }
3509 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
3510 right: calc(50% - 12px);
3511 bottom: -14px;
3512 border-width: 14px 14px 0 15px;
3513 border-color: #c3c4c7 transparent transparent transparent;
3514 }
3515 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3516 content: "";
3517 right: calc(50% - 10px);
3518 bottom: -12px;
3519 border-width: 12px 12px 0 13px;
3520 border-color: #ffffff transparent transparent transparent;
3521 }
3522 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3523 position: absolute;
3524 z-index: -1;
3525 content: "";
3526 border-style: solid;
3527 -webkit-transition-duration: 0.3s;
3528 transition-duration: 0.3s;
3529 transition-property: -webkit-transform;
3530 -webkit-transition-property: -webkit-transform;
3531 transition-property: transform;
3532 transition-property: transform, -webkit-transform;
3533 }
3534 .merchant-flexible-content-control .customize-control-flexible-content-add {
3535 display: block;
3536 -ms-flex-negative: 0;
3537 flex-shrink: 0;
3538 padding: 10px;
3539 text-decoration: none;
3540 }
3541 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
3542 background: #f0f0f1;
3543 }
3544 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
3545 color: #3858E9;
3546 border-color: #3858E9;
3547 background-color: transparent;
3548 margin-top: 10px;
3549 padding: 4px 19px;
3550 }
3551 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
3552 outline: none;
3553 -webkit-box-shadow: none;
3554 box-shadow: none;
3555 background-color: #ffffff;
3556 }
3557 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
3558 display: none;
3559 }
3560
3561 .flexible-content-template {
3562 display: none;
3563 }
3564
3565 .merchant-module-page-setting-field-range .merchant-range {
3566 position: relative;
3567 width: 100%;
3568 width: 300px;
3569 display: -webkit-box;
3570 display: -ms-flexbox;
3571 display: flex;
3572 -webkit-box-align: center;
3573 -ms-flex-align: center;
3574 align-items: center;
3575 -webkit-box-pack: justify;
3576 -ms-flex-pack: justify;
3577 justify-content: space-between;
3578 }
3579 .merchant-module-page-setting-field-range input[type=range] {
3580 -webkit-appearance: none;
3581 -moz-appearance: none;
3582 appearance: none;
3583 width: calc(100% - 105px);
3584 height: 2px;
3585 border-radius: 5px;
3586 outline: none;
3587 padding: 0;
3588 margin: 0;
3589 background-color: #ddd;
3590 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
3591 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
3592 }
3593 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb {
3594 -webkit-appearance: none;
3595 appearance: none;
3596 width: 15px;
3597 height: 15px;
3598 border-radius: 50%;
3599 background: #3858E9;
3600 cursor: pointer;
3601 -webkit-transition: background 0.15s ease-in-out;
3602 transition: background 0.15s ease-in-out;
3603 }
3604 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover {
3605 background: #3858E9;
3606 }
3607 .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb {
3608 background: #3858E9;
3609 }
3610 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb {
3611 width: 15px;
3612 height: 15px;
3613 border: 0;
3614 border-radius: 50%;
3615 background: #3858E9;
3616 cursor: pointer;
3617 -moz-transition: background 0.15s ease-in-out;
3618 transition: background 0.15s ease-in-out;
3619 }
3620 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover {
3621 background: #3858E9;
3622 }
3623 .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb {
3624 background: #3858E9;
3625 }
3626 .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb {
3627 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3628 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
3629 }
3630 .merchant-module-page-setting-field-range input[type=range]::-moz-range-track {
3631 border: 0;
3632 background: #d7dcdf;
3633 }
3634 .merchant-module-page-setting-field-range input[type=number] {
3635 padding: 12px 25px 12px 10px;
3636 line-height: 1.3em;
3637 width: 100%;
3638 max-width: 85px;
3639 min-height: auto;
3640 border: 1px solid #D6D6D6;
3641 }
3642 .merchant-module-page-setting-field-range input[type=number]:focus {
3643 outline: none;
3644 -webkit-box-shadow: none;
3645 box-shadow: none;
3646 border-color: #3858E9;
3647 }
3648 .merchant-module-page-setting-field-range .merchant-range-unit {
3649 color: #3858E9;
3650 position: absolute;
3651 z-index: 1;
3652 right: 10px;
3653 font-size: 11px;
3654 line-height: 1em;
3655 }
3656
3657 .merchant-module-page-setting-field-color input {
3658 padding: 0 10px;
3659 line-height: 1em;
3660 width: 100%;
3661 max-width: 254px;
3662 min-height: auto;
3663 border: 1px solid #D6D6D6;
3664 }
3665 .merchant-module-page-setting-field-color input:focus {
3666 outline: none;
3667 -webkit-box-shadow: none;
3668 box-shadow: none;
3669 border-color: #3858E9;
3670 }
3671 .merchant-module-page-setting-field-color .merchant-color {
3672 display: -webkit-box;
3673 display: -ms-flexbox;
3674 display: flex;
3675 grid-gap: 10px;
3676 }
3677 .merchant-module-page-setting-field-color .merchant-color-picker {
3678 cursor: pointer;
3679 width: 36px;
3680 height: 36px;
3681 border: 1px solid rgba(0, 0, 0, 0.1);
3682 border-radius: 4px;
3683 }
3684
3685 .merchant-module-page-settings-dimensions {
3686 display: -webkit-box;
3687 display: -ms-flexbox;
3688 display: flex;
3689 grid-gap: 10px;
3690 }
3691 .merchant-module-page-settings-dimensions > div {
3692 display: -webkit-box;
3693 display: -ms-flexbox;
3694 display: flex;
3695 -webkit-box-orient: vertical;
3696 -webkit-box-direction: normal;
3697 -ms-flex-direction: column;
3698 flex-direction: column;
3699 }
3700 .merchant-module-page-settings-dimensions label {
3701 color: gray;
3702 font-size: 12px;
3703 margin-top: 7px;
3704 }
3705 .merchant-module-page-settings-dimensions input {
3706 max-width: 70px;
3707 width: 100%;
3708 font-size: 12px;
3709 border: 1px solid #D6D6D6;
3710 }
3711
3712 .merchant-module-page-settings-unit {
3713 margin-bottom: 10px;
3714 }
3715 .merchant-module-page-settings-unit select {
3716 font-size: 13px;
3717 border: 0;
3718 }
3719
3720 .merchant-module-page-settings-devices {
3721 display: -webkit-box;
3722 display: -ms-flexbox;
3723 display: flex;
3724 -webkit-column-gap: 10px;
3725 -moz-column-gap: 10px;
3726 column-gap: 10px;
3727 -webkit-box-pack: end;
3728 -ms-flex-pack: end;
3729 justify-content: flex-end;
3730 }
3731 .merchant-module-page-settings-devices button {
3732 border: 0;
3733 background: transparent;
3734 padding: 0;
3735 cursor: pointer;
3736 }
3737 .merchant-module-page-settings-devices button.active {
3738 color: #3858e9;
3739 }
3740 .merchant-module-page-settings-devices button:hover {
3741 color: #3858e9;
3742 }
3743 .merchant-module-page-settings-devices button i {
3744 font-size: 14px;
3745 line-height: 20px;
3746 width: auto;
3747 }
3748
3749 .merchant-module-page-settings-device-container:not(.active) {
3750 display: none;
3751 }
3752
3753 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
3754 max-width: 320px;
3755 }
3756 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
3757 margin-bottom: -30px;
3758 margin-top: 0;
3759 }
3760
3761 .merchant-module-page-setting-field-warning {
3762 padding: 8px 10px;
3763 font-size: 14px;
3764 line-height: 1.6;
3765 color: #1D2327;
3766 border-radius: 4px;
3767 border: 1px solid #D72C0D;
3768 background-color: #FFF4F4;
3769 }
3770
3771 .merchant-module-page-setting-field-divider {
3772 border-bottom: 1px solid #F0F0F1;
3773 }
3774 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
3775 font-size: 16px;
3776 }
3777
3778 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
3779 display: -webkit-box;
3780 display: -ms-flexbox;
3781 display: flex;
3782 grid-gap: 5px;
3783 -ms-flex-wrap: wrap;
3784 flex-wrap: wrap;
3785 margin-bottom: 15px;
3786 }
3787 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
3788 display: none;
3789 }
3790 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
3791 position: relative;
3792 display: -webkit-box;
3793 display: -ms-flexbox;
3794 display: flex;
3795 -webkit-box-align: center;
3796 -ms-flex-align: center;
3797 align-items: center;
3798 -webkit-box-pack: center;
3799 -ms-flex-pack: center;
3800 justify-content: center;
3801 border-radius: 4px;
3802 padding: 2px;
3803 border: 1px solid #eee;
3804 background-color: #fff;
3805 }
3806 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
3807 cursor: -webkit-grab;
3808 cursor: grab;
3809 width: 100%;
3810 height: 100%;
3811 max-height: 75px;
3812 -o-object-fit: cover;
3813 object-fit: cover;
3814 }
3815 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
3816 cursor: -webkit-grabbing;
3817 cursor: grabbing;
3818 }
3819 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
3820 cursor: pointer;
3821 position: absolute;
3822 z-index: 1;
3823 top: 5px;
3824 right: 5px;
3825 width: 16px;
3826 height: 16px;
3827 display: -webkit-box;
3828 display: -ms-flexbox;
3829 display: flex;
3830 -webkit-box-pack: center;
3831 -ms-flex-pack: center;
3832 justify-content: center;
3833 -webkit-box-align: center;
3834 -ms-flex-align: center;
3835 align-items: center;
3836 color: #fff;
3837 background-color: #c5280c;
3838 font-size: 14px;
3839 line-height: 1em;
3840 border-radius: 16px;
3841 opacity: 0;
3842 -webkit-transition: all 0.2s;
3843 transition: all 0.2s;
3844 }
3845 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
3846 opacity: 1;
3847 }
3848 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
3849 cursor: pointer;
3850 -webkit-user-select: none;
3851 -moz-user-select: none;
3852 -ms-user-select: none;
3853 user-select: none;
3854 display: -webkit-inline-box;
3855 display: -ms-inline-flexbox;
3856 display: inline-flex;
3857 padding: 0.4375rem 1rem;
3858 font-size: 0.875rem;
3859 font-weight: 600;
3860 line-height: 1.5;
3861 white-space: nowrap;
3862 text-transform: none;
3863 text-decoration: none;
3864 color: #212b36;
3865 background-color: #fff;
3866 border: 1px solid #c4cdd5;
3867 border-radius: 0.25rem;
3868 -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);
3869 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
3870 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
3871 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
3872 }
3873 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
3874 outline: none;
3875 -webkit-box-shadow: none;
3876 box-shadow: none;
3877 }
3878 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
3879 visibility: visible !important;
3880 border: 1px dashed #ddd;
3881 background-color: #f9f9f9;
3882 border-radius: 4px;
3883 }
3884
3885 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
3886 display: -webkit-box;
3887 display: -ms-flexbox;
3888 display: flex;
3889 grid-gap: 5px;
3890 -ms-flex-wrap: wrap;
3891 flex-wrap: wrap;
3892 margin-bottom: 15px;
3893 }
3894 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
3895 display: none;
3896 }
3897 .merchant-module-page-setting-field-upload .merchant-upload-image {
3898 position: relative;
3899 display: -webkit-box;
3900 display: -ms-flexbox;
3901 display: flex;
3902 -webkit-box-align: center;
3903 -ms-flex-align: center;
3904 align-items: center;
3905 -webkit-box-pack: center;
3906 -ms-flex-pack: center;
3907 justify-content: center;
3908 border-radius: 4px;
3909 padding: 2px;
3910 border: 1px solid #eee;
3911 background-color: #fff;
3912 }
3913 .merchant-module-page-setting-field-upload .merchant-upload-image img {
3914 cursor: -webkit-grab;
3915 cursor: grab;
3916 width: 100%;
3917 height: 100%;
3918 max-height: 75px;
3919 -o-object-fit: cover;
3920 object-fit: cover;
3921 }
3922 .merchant-module-page-setting-field-upload .merchant-upload-image i {
3923 cursor: pointer;
3924 position: absolute;
3925 z-index: 1;
3926 top: 5px;
3927 right: 5px;
3928 width: 16px;
3929 height: 16px;
3930 display: -webkit-box;
3931 display: -ms-flexbox;
3932 display: flex;
3933 -webkit-box-pack: center;
3934 -ms-flex-pack: center;
3935 justify-content: center;
3936 -webkit-box-align: center;
3937 -ms-flex-align: center;
3938 align-items: center;
3939 color: #fff;
3940 background-color: #c5280c;
3941 font-size: 14px;
3942 line-height: 1em;
3943 border-radius: 16px;
3944 opacity: 0;
3945 -webkit-transition: all 0.2s;
3946 transition: all 0.2s;
3947 }
3948 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
3949 opacity: 1;
3950 }
3951 .merchant-module-page-setting-field-upload .merchant-upload-button {
3952 cursor: pointer;
3953 -webkit-user-select: none;
3954 -moz-user-select: none;
3955 -ms-user-select: none;
3956 user-select: none;
3957 display: -webkit-inline-box;
3958 display: -ms-inline-flexbox;
3959 display: inline-flex;
3960 padding: 0.4375rem 1rem;
3961 font-size: 0.875rem;
3962 font-weight: 600;
3963 line-height: 1.5;
3964 white-space: nowrap;
3965 text-transform: none;
3966 text-decoration: none;
3967 color: #212b36;
3968 background-color: #fff;
3969 border: 1px solid #c4cdd5;
3970 border-radius: 0.25rem;
3971 -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);
3972 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
3973 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
3974 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
3975 }
3976 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
3977 outline: none;
3978 -webkit-box-shadow: none;
3979 box-shadow: none;
3980 }
3981
3982 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
3983 display: -webkit-box;
3984 display: -ms-flexbox;
3985 display: flex;
3986 -webkit-box-pack: start;
3987 -ms-flex-pack: start;
3988 justify-content: flex-start;
3989 }
3990 .merchant-module-page-setting-field-switcher input {
3991 display: none;
3992 }
3993 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
3994 margin-left: 0;
3995 background: #3858E9;
3996 }
3997 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
3998 right: 1px;
3999 }
4000 .merchant-module-page-setting-field-switcher .toggle-switch {
4001 float: right;
4002 position: relative;
4003 width: 36px;
4004 margin-top: 2px;
4005 -webkit-user-select: none;
4006 -moz-user-select: none;
4007 -ms-user-select: none;
4008 user-select: none;
4009 }
4010 .merchant-module-page-setting-field-switcher .toggle-switch-label {
4011 position: relative;
4012 display: inline-block;
4013 overflow: hidden;
4014 cursor: pointer;
4015 border-radius: 20px;
4016 padding: 0;
4017 margin: 0;
4018 width: 36px;
4019 }
4020 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
4021 display: block;
4022 width: 200%;
4023 margin-left: -100%;
4024 background: #c8c8c8;
4025 height: 18px;
4026 }
4027 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
4028 display: block;
4029 width: 12px;
4030 height: 12px;
4031 margin: 3px;
4032 background-color: #fff;
4033 position: absolute;
4034 top: 0;
4035 bottom: 0;
4036 right: 18px;
4037 border-radius: 20px;
4038 -webkit-transition: all 0.1s ease-in 0s;
4039 transition: all 0.1s ease-in 0s;
4040 }
4041
4042 .merchant-module-alert {
4043 position: fixed;
4044 top: 0;
4045 left: 0;
4046 right: 0;
4047 bottom: 0;
4048 z-index: 99999;
4049 display: -webkit-box;
4050 display: -ms-flexbox;
4051 display: flex;
4052 -webkit-box-pack: center;
4053 -ms-flex-pack: center;
4054 justify-content: center;
4055 -webkit-box-align: center;
4056 -ms-flex-align: center;
4057 align-items: center;
4058 background-color: rgba(0, 0, 0, 0.6);
4059 opacity: 0;
4060 visibility: hidden;
4061 -webkit-user-select: none;
4062 -moz-user-select: none;
4063 -ms-user-select: none;
4064 user-select: none;
4065 pointer-events: none;
4066 -webkit-transition: all 0.2s;
4067 transition: all 0.2s;
4068 }
4069 .merchant-module-alert.merchant-show {
4070 -webkit-user-select: auto;
4071 -moz-user-select: auto;
4072 -ms-user-select: auto;
4073 user-select: auto;
4074 pointer-events: auto;
4075 opacity: 1;
4076 visibility: visible;
4077 }
4078
4079 .merchant-module-alert-wrapper {
4080 display: -webkit-box;
4081 display: -ms-flexbox;
4082 display: flex;
4083 -webkit-box-orient: vertical;
4084 -webkit-box-direction: normal;
4085 -ms-flex-direction: column;
4086 flex-direction: column;
4087 width: 640px;
4088 max-width: 90%;
4089 border-radius: 4px;
4090 background-color: #fff;
4091 }
4092
4093 .merchant-module-alert-header {
4094 display: -webkit-box;
4095 display: -ms-flexbox;
4096 display: flex;
4097 -webkit-box-align: center;
4098 -ms-flex-align: center;
4099 align-items: center;
4100 -webkit-box-pack: justify;
4101 -ms-flex-pack: justify;
4102 justify-content: space-between;
4103 padding: 20px 30px;
4104 }
4105 .merchant-module-alert-header strong {
4106 font-size: 18px;
4107 line-height: 1em;
4108 }
4109 .merchant-module-alert-header a {
4110 position: relative;
4111 right: -5px;
4112 display: -webkit-box;
4113 display: -ms-flexbox;
4114 display: flex;
4115 color: #212121;
4116 text-decoration: none;
4117 -webkit-transition: all 0.2s;
4118 transition: all 0.2s;
4119 }
4120 .merchant-module-alert-header a:hover {
4121 opacity: 0.6;
4122 }
4123 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
4124 outline: none;
4125 -webkit-box-shadow: none;
4126 box-shadow: none;
4127 }
4128 .merchant-module-alert-header i {
4129 font-size: 32px;
4130 line-height: 1em;
4131 width: auto;
4132 height: auto;
4133 }
4134
4135 .merchant-module-alert-content {
4136 display: -webkit-box;
4137 display: -ms-flexbox;
4138 display: flex;
4139 -webkit-box-orient: vertical;
4140 -webkit-box-direction: normal;
4141 -ms-flex-direction: column;
4142 flex-direction: column;
4143 grid-gap: 20px;
4144 padding: 0 30px 30px 30px;
4145 }
4146 .merchant-module-alert-content p {
4147 margin: 0;
4148 padding: 0;
4149 font-size: 15px;
4150 font-weight: 500;
4151 color: #757575;
4152 }
4153 .merchant-module-alert-content figure {
4154 display: -webkit-box;
4155 display: -ms-flexbox;
4156 display: flex;
4157 margin: 0;
4158 padding: 0;
4159 }
4160 .merchant-module-alert-content img {
4161 max-width: 100%;
4162 }
4163
4164 .merchant-module-alert-footer {
4165 display: -webkit-box;
4166 display: -ms-flexbox;
4167 display: flex;
4168 -webkit-box-pack: end;
4169 -ms-flex-pack: end;
4170 justify-content: flex-end;
4171 padding: 30px;
4172 }
4173 .merchant-module-alert-footer a {
4174 font-weight: bold;
4175 font-size: 14px;
4176 padding: 10px 15px;
4177 text-decoration: none;
4178 border-radius: 4px;
4179 color: #212121;
4180 border: 1px solid #e5e5e5;
4181 }
4182 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
4183 outline: none;
4184 -webkit-box-shadow: none;
4185 box-shadow: none;
4186 }
4187
4188 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
4189 pointer-events: none;
4190 opacity: 0.8;
4191 }
4192 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
4193 opacity: 0.5;
4194 }
4195 .merchant-module-page-setting-field-inner.disabled .merchant-range {
4196 opacity: 0.5;
4197 }
4198 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
4199 opacity: 0.5;
4200 }
4201
4202 /* Utils */
4203 .merchant-height-auto {
4204 height: auto;
4205 }
4206
4207 /* Admin Footer Text */
4208 .merchant-admin-page .merchant-admin-footer-text-link {
4209 display: inline-block;
4210 padding-right: 5px;
4211 color: #3858E9;
4212 }
4213 .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 {
4214 color: #3858E9;
4215 }
4216
4217 .merchant-admin-page-module #wpfooter {
4218 display: none;
4219 }
4220 .merchant-admin-page-module #wpbody-content {
4221 padding-bottom: 30px;
4222 }
4223
4224 .merchant-module-footer-text {
4225 display: -webkit-box;
4226 display: -ms-flexbox;
4227 display: flex;
4228 grid-gap: 5px;
4229 -webkit-box-pack: center;
4230 -ms-flex-pack: center;
4231 justify-content: center;
4232 text-align: center;
4233 margin-top: 37px;
4234 }
4235 .merchant-module-footer-text i {
4236 color: #3858E9;
4237 }
4238
4239 /* Responsive */
4240 @media (max-width: 991px) {
4241 .merchant-wrap {
4242 display: -webkit-box;
4243 display: -ms-flexbox;
4244 display: flex;
4245 -webkit-box-orient: vertical;
4246 -webkit-box-direction: normal;
4247 -ms-flex-direction: column;
4248 flex-direction: column;
4249 grid-gap: 20px;
4250 }
4251 .merchant-modules-header-shortlinks {
4252 margin: 0;
4253 }
4254 .merchant-modules-header {
4255 -webkit-box-orient: vertical;
4256 -webkit-box-direction: normal;
4257 -ms-flex-direction: column;
4258 flex-direction: column;
4259 grid-gap: 20px;
4260 }
4261 .merchant-module-page-header-content {
4262 width: 100%;
4263 }
4264 .merchant-module-page-desc {
4265 max-width: none;
4266 }
4267 .merchant-module-page-header-placeholder {
4268 display: none;
4269 }
4270 .merchant-modules-header-image {
4271 display: none;
4272 }
4273 .merchant-modules-list {
4274 grid-template-columns: repeat(1, minmax(0, 1fr));
4275 }
4276 .merchant-modules-header-status {
4277 margin-bottom: 0;
4278 }
4279 .merchant-module-page-setting-box {
4280 -webkit-box-orient: vertical;
4281 -webkit-box-direction: normal;
4282 -ms-flex-direction: column;
4283 flex-direction: column;
4284 grid-gap: 20px;
4285 }
4286 .merchant-module-page-setting-title,
4287 .merchant-module-page-setting-fields {
4288 width: 100%;
4289 }
4290 .merchant-module-page-body {
4291 -webkit-box-orient: vertical;
4292 -webkit-box-direction: reverse;
4293 -ms-flex-direction: column-reverse;
4294 flex-direction: column-reverse;
4295 }
4296 .merchant-module-page-content {
4297 width: 100%;
4298 }
4299 .merchant-module-page-preview {
4300 margin-left: 0;
4301 margin-bottom: 20px;
4302 width: 100%;
4303 }
4304 }