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

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