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

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

4,969 lines 135.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Utilities */
2 .mrc-w-100 {
3 width: 100% !important;
4 }
5
6 .mrc-mb-0 {
7 margin-bottom: 0;
8 }
9
10 .mrc-mt-0 {
11 margin-top: 0;
12 }
13
14 .merchant-animated-buttons .merchant-button-flash:hover {
15 -webkit-animation: merchant-flash 1s infinite both;
16 animation: merchant-flash 1s infinite both;
17 -webkit-animation-iteration-count: 1;
18 animation-iteration-count: 1;
19 }
20 .merchant-animated-buttons .merchant-button-bounce:hover {
21 -webkit-animation: merchant-bounce 0.3s alternate;
22 animation: merchant-bounce 0.3s alternate;
23 -webkit-animation-iteration-count: 4;
24 animation-iteration-count: 4;
25 }
26 .merchant-animated-buttons .merchant-button-zoom-in:hover {
27 -webkit-transform: scale(1.2);
28 transform: scale(1.2);
29 }
30 .merchant-animated-buttons .merchant-button-shake:hover {
31 -webkit-animation: merchant-shake 0.3s;
32 animation: merchant-shake 0.3s;
33 -webkit-animation-iteration-count: 2;
34 animation-iteration-count: 2;
35 }
36 .merchant-animated-buttons .merchant-button-pulse:hover {
37 -webkit-animation: merchant-pulse 1.5s ease-in-out infinite both;
38 animation: merchant-pulse 1.5s ease-in-out infinite both;
39 }
40 .merchant-animated-buttons .merchant-button-jello-shake:hover {
41 -webkit-animation: merchant-jello-shake 1.5s infinite both;
42 animation: merchant-jello-shake 1.5s infinite both;
43 }
44 .merchant-animated-buttons .merchant-button-wobble:hover {
45 -webkit-animation: merchant-wobble 1.5s ease-in-out infinite both;
46 animation: merchant-wobble 1.5s ease-in-out infinite both;
47 }
48 .merchant-animated-buttons .merchant-button-vibrate:hover {
49 -webkit-animation: merchant-vibrate 0.3s linear 4 both;
50 animation: merchant-vibrate 0.3s linear 4 both;
51 }
52 .merchant-animated-buttons .merchant-button-swing:hover {
53 -webkit-animation: merchant-swing 2s ease-in-out infinite alternate;
54 animation: merchant-swing 2s ease-in-out infinite alternate;
55 }
56 .merchant-animated-buttons .merchant-button-tada:hover {
57 -webkit-animation: merchant-tada 1s infinite both;
58 animation: merchant-tada 1s infinite both;
59 }
60
61 @-webkit-keyframes merchant-flash {
62 0%, 50%, to {
63 opacity: 1;
64 }
65 25%, 75% {
66 opacity: 0;
67 }
68 }
69
70 @keyframes merchant-flash {
71 0%, 50%, to {
72 opacity: 1;
73 }
74 25%, 75% {
75 opacity: 0;
76 }
77 }
78 @-webkit-keyframes merchant-bounce {
79 to {
80 -webkit-transform: scale(1.2);
81 transform: scale(1.2);
82 }
83 }
84 @keyframes merchant-bounce {
85 to {
86 -webkit-transform: scale(1.2);
87 transform: scale(1.2);
88 }
89 }
90 @-webkit-keyframes merchant-shake {
91 33% {
92 -webkit-transform: rotate(10deg);
93 transform: rotate(10deg);
94 }
95 67% {
96 -webkit-transform: rotate(-10deg);
97 transform: rotate(-10deg);
98 }
99 to {
100 -webkit-transform: rotate(10deg);
101 transform: rotate(10deg);
102 }
103 }
104 @keyframes merchant-shake {
105 33% {
106 -webkit-transform: rotate(10deg);
107 transform: rotate(10deg);
108 }
109 67% {
110 -webkit-transform: rotate(-10deg);
111 transform: rotate(-10deg);
112 }
113 to {
114 -webkit-transform: rotate(10deg);
115 transform: rotate(10deg);
116 }
117 }
118 @-webkit-keyframes merchant-pulse {
119 0% {
120 -webkit-animation-timing-function: ease-out;
121 animation-timing-function: ease-out;
122 -webkit-transform: scale(1);
123 transform: scale(1);
124 -webkit-transform-origin: center center;
125 transform-origin: center center;
126 }
127 10% {
128 -webkit-animation-timing-function: ease-in;
129 animation-timing-function: ease-in;
130 -webkit-transform: scale(0.91);
131 transform: scale(0.91);
132 }
133 17% {
134 -webkit-animation-timing-function: ease-out;
135 animation-timing-function: ease-out;
136 -webkit-transform: scale(0.98);
137 transform: scale(0.98);
138 }
139 33% {
140 -webkit-animation-timing-function: ease-in;
141 animation-timing-function: ease-in;
142 -webkit-transform: scale(0.87);
143 transform: scale(0.87);
144 }
145 45% {
146 -webkit-animation-timing-function: ease-out;
147 animation-timing-function: ease-out;
148 -webkit-transform: scale(1);
149 transform: scale(1);
150 }
151 }
152 @keyframes merchant-pulse {
153 0% {
154 -webkit-animation-timing-function: ease-out;
155 animation-timing-function: ease-out;
156 -webkit-transform: scale(1);
157 transform: scale(1);
158 -webkit-transform-origin: center center;
159 transform-origin: center center;
160 }
161 10% {
162 -webkit-animation-timing-function: ease-in;
163 animation-timing-function: ease-in;
164 -webkit-transform: scale(0.91);
165 transform: scale(0.91);
166 }
167 17% {
168 -webkit-animation-timing-function: ease-out;
169 animation-timing-function: ease-out;
170 -webkit-transform: scale(0.98);
171 transform: scale(0.98);
172 }
173 33% {
174 -webkit-animation-timing-function: ease-in;
175 animation-timing-function: ease-in;
176 -webkit-transform: scale(0.87);
177 transform: scale(0.87);
178 }
179 45% {
180 -webkit-animation-timing-function: ease-out;
181 animation-timing-function: ease-out;
182 -webkit-transform: scale(1);
183 transform: scale(1);
184 }
185 }
186 @-webkit-keyframes merchant-jello-shake {
187 0% {
188 -webkit-transform: scaleX(1);
189 transform: scaleX(1);
190 }
191 30% {
192 -webkit-transform: scale3d(1.25, 0.75, 1);
193 transform: scale3d(1.25, 0.75, 1);
194 }
195 40% {
196 -webkit-transform: scale3d(0.75, 1.25, 1);
197 transform: scale3d(0.75, 1.25, 1);
198 }
199 50% {
200 -webkit-transform: scale3d(1.15, 0.85, 1);
201 transform: scale3d(1.15, 0.85, 1);
202 }
203 65% {
204 -webkit-transform: scale3d(0.95, 1.05, 1);
205 transform: scale3d(0.95, 1.05, 1);
206 }
207 75% {
208 -webkit-transform: scale3d(1.05, 0.95, 1);
209 transform: scale3d(1.05, 0.95, 1);
210 }
211 to {
212 -webkit-transform: scaleX(1);
213 transform: scaleX(1);
214 }
215 }
216 @keyframes merchant-jello-shake {
217 0% {
218 -webkit-transform: scaleX(1);
219 transform: scaleX(1);
220 }
221 30% {
222 -webkit-transform: scale3d(1.25, 0.75, 1);
223 transform: scale3d(1.25, 0.75, 1);
224 }
225 40% {
226 -webkit-transform: scale3d(0.75, 1.25, 1);
227 transform: scale3d(0.75, 1.25, 1);
228 }
229 50% {
230 -webkit-transform: scale3d(1.15, 0.85, 1);
231 transform: scale3d(1.15, 0.85, 1);
232 }
233 65% {
234 -webkit-transform: scale3d(0.95, 1.05, 1);
235 transform: scale3d(0.95, 1.05, 1);
236 }
237 75% {
238 -webkit-transform: scale3d(1.05, 0.95, 1);
239 transform: scale3d(1.05, 0.95, 1);
240 }
241 to {
242 -webkit-transform: scaleX(1);
243 transform: scaleX(1);
244 }
245 }
246 @-webkit-keyframes merchant-wobble {
247 0%, to {
248 -webkit-transform: translateX(0);
249 transform: translateX(0);
250 -webkit-transform-origin: 50% 50%;
251 transform-origin: 50% 50%;
252 }
253 15% {
254 -webkit-transform: translateX(-30px) rotate(-6deg);
255 transform: translateX(-30px) rotate(-6deg);
256 }
257 30% {
258 -webkit-transform: translateX(15px) rotate(6deg);
259 transform: translateX(15px) rotate(6deg);
260 }
261 45% {
262 -webkit-transform: translateX(-15px) rotate(-3.6deg);
263 transform: translateX(-15px) rotate(-3.6deg);
264 }
265 60% {
266 -webkit-transform: translateX(9px) rotate(2.4deg);
267 transform: translateX(9px) rotate(2.4deg);
268 }
269 75% {
270 -webkit-transform: translateX(-6px) rotate(-1.2deg);
271 transform: translateX(-6px) rotate(-1.2deg);
272 }
273 }
274 @keyframes merchant-wobble {
275 0%, to {
276 -webkit-transform: translateX(0);
277 transform: translateX(0);
278 -webkit-transform-origin: 50% 50%;
279 transform-origin: 50% 50%;
280 }
281 15% {
282 -webkit-transform: translateX(-30px) rotate(-6deg);
283 transform: translateX(-30px) rotate(-6deg);
284 }
285 30% {
286 -webkit-transform: translateX(15px) rotate(6deg);
287 transform: translateX(15px) rotate(6deg);
288 }
289 45% {
290 -webkit-transform: translateX(-15px) rotate(-3.6deg);
291 transform: translateX(-15px) rotate(-3.6deg);
292 }
293 60% {
294 -webkit-transform: translateX(9px) rotate(2.4deg);
295 transform: translateX(9px) rotate(2.4deg);
296 }
297 75% {
298 -webkit-transform: translateX(-6px) rotate(-1.2deg);
299 transform: translateX(-6px) rotate(-1.2deg);
300 }
301 }
302 @-webkit-keyframes merchant-vibrate {
303 0% {
304 -webkit-transform: translate(0);
305 transform: translate(0);
306 }
307 20% {
308 -webkit-transform: translate(-2px, 2px);
309 transform: translate(-2px, 2px);
310 }
311 40% {
312 -webkit-transform: translate(-2px, -2px);
313 transform: translate(-2px, -2px);
314 }
315 60% {
316 -webkit-transform: translate(2px, 2px);
317 transform: translate(2px, 2px);
318 }
319 80% {
320 -webkit-transform: translate(2px, -2px);
321 transform: translate(2px, -2px);
322 }
323 to {
324 -webkit-transform: translate(0);
325 transform: translate(0);
326 }
327 }
328 @keyframes merchant-vibrate {
329 0% {
330 -webkit-transform: translate(0);
331 transform: translate(0);
332 }
333 20% {
334 -webkit-transform: translate(-2px, 2px);
335 transform: translate(-2px, 2px);
336 }
337 40% {
338 -webkit-transform: translate(-2px, -2px);
339 transform: translate(-2px, -2px);
340 }
341 60% {
342 -webkit-transform: translate(2px, 2px);
343 transform: translate(2px, 2px);
344 }
345 80% {
346 -webkit-transform: translate(2px, -2px);
347 transform: translate(2px, -2px);
348 }
349 to {
350 -webkit-transform: translate(0);
351 transform: translate(0);
352 }
353 }
354 @-webkit-keyframes merchant-swing {
355 0% {
356 -webkit-transform: rotate(0deg);
357 transform: rotate(0deg);
358 }
359 20% {
360 -webkit-transform: rotate(3deg);
361 transform: rotate(3deg);
362 }
363 40% {
364 -webkit-transform: rotate(-3deg);
365 transform: rotate(-3deg);
366 }
367 60% {
368 -webkit-transform: rotate(3deg);
369 transform: rotate(3deg);
370 }
371 80% {
372 -webkit-transform: rotate(-3deg);
373 transform: rotate(-3deg);
374 }
375 to {
376 -webkit-transform: rotate(0deg);
377 transform: rotate(0deg);
378 }
379 }
380 @keyframes merchant-swing {
381 0% {
382 -webkit-transform: rotate(0deg);
383 transform: rotate(0deg);
384 }
385 20% {
386 -webkit-transform: rotate(3deg);
387 transform: rotate(3deg);
388 }
389 40% {
390 -webkit-transform: rotate(-3deg);
391 transform: rotate(-3deg);
392 }
393 60% {
394 -webkit-transform: rotate(3deg);
395 transform: rotate(3deg);
396 }
397 80% {
398 -webkit-transform: rotate(-3deg);
399 transform: rotate(-3deg);
400 }
401 to {
402 -webkit-transform: rotate(0deg);
403 transform: rotate(0deg);
404 }
405 }
406 @-webkit-keyframes merchant-tada {
407 0% {
408 -webkit-transform: scaleX(1);
409 transform: scaleX(1);
410 }
411 10%, 20% {
412 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
413 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
414 }
415 30%, 50%, 70%, 90% {
416 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
417 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
418 }
419 40%, 60%, 80% {
420 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
421 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
422 }
423 to {
424 -webkit-transform: scaleX(1);
425 transform: scaleX(1);
426 }
427 }
428 @keyframes merchant-tada {
429 0% {
430 -webkit-transform: scaleX(1);
431 transform: scaleX(1);
432 }
433 10%, 20% {
434 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
435 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
436 }
437 30%, 50%, 70%, 90% {
438 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
439 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
440 }
441 40%, 60%, 80% {
442 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
443 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
444 }
445 to {
446 -webkit-transform: scaleX(1);
447 transform: scaleX(1);
448 }
449 }
450 .merchant-pcr-app * {
451 outline: none;
452 border: none;
453 -webkit-box-sizing: border-box;
454 box-sizing: border-box;
455 }
456
457 .merchant-pcr-app input:focus,
458 .merchant-pcr-app input.pcr-active,
459 .merchant-pcr-app button:focus,
460 .merchant-pcr-app button.pcr-active {
461 -webkit-box-shadow: none;
462 box-shadow: none;
463 }
464
465 .merchant-pcr-app .pcr-palette:focus,
466 .merchant-pcr-app .pcr-slider:focus {
467 -webkit-box-shadow: none;
468 box-shadow: none;
469 }
470
471 .merchant-pcr-app {
472 position: fixed;
473 z-index: 999999;
474 top: 0;
475 left: 0;
476 display: -webkit-box;
477 display: -ms-flexbox;
478 display: flex;
479 -webkit-box-orient: vertical;
480 -webkit-box-direction: normal;
481 -ms-flex-direction: column;
482 flex-direction: column;
483 border-radius: 0.1em;
484 opacity: 0;
485 visibility: hidden;
486 -webkit-transition: opacity 0.2s, visibility 0s 0.2s;
487 transition: opacity 0.2s, visibility 0s 0.2s;
488 -webkit-box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
489 box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
490 background: #fff;
491 }
492
493 .merchant-pcr-app.visible {
494 visibility: visible;
495 opacity: 1;
496 -webkit-transition: opacity 0.2s;
497 transition: opacity 0.2s;
498 }
499
500 .merchant-pcr-app .pcr-swatches {
501 display: -webkit-box;
502 display: -ms-flexbox;
503 display: flex;
504 -webkit-box-pack: justify;
505 -ms-flex-pack: justify;
506 justify-content: space-between;
507 }
508
509 .merchant-pcr-app .pcr-swatches > button {
510 cursor: pointer;
511 font-size: 1em;
512 position: relative;
513 z-index: 1;
514 width: 20px;
515 height: 20px;
516 margin: 0;
517 padding: 0;
518 background: none;
519 }
520
521 .merchant-pcr-app .pcr-swatches > button::before {
522 position: absolute;
523 content: "";
524 top: 0;
525 left: 0;
526 bottom: 0;
527 right: 0;
528 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
529 background-size: 6px;
530 border-radius: 20px;
531 border: 1px solid transparent;
532 z-index: -1;
533 }
534
535 .merchant-pcr-app .pcr-swatches > button::after {
536 content: "";
537 position: absolute;
538 z-index: 1;
539 top: 0;
540 left: 0;
541 right: 0;
542 bottom: 0;
543 border-radius: 20px;
544 border: 1px solid rgba(0, 0, 0, 0.3);
545 background: var(--pcr-color);
546 }
547
548 .merchant-pcr-app .pcr-interaction {
549 display: -webkit-box;
550 display: -ms-flexbox;
551 display: flex;
552 grid-gap: 5px;
553 }
554
555 .merchant-pcr-app .pcr-interaction input {
556 font-size: 11px;
557 border-radius: 3px;
558 }
559 .merchant-pcr-app .pcr-interaction input:focus {
560 border-color: #3858E9;
561 }
562
563 .merchant-pcr-app .pcr-interaction .pcr-result {
564 -webkit-box-flex: 1;
565 -ms-flex: 1;
566 flex: 1;
567 margin: 0;
568 width: 100%;
569 max-width: 100%;
570 }
571
572 .merchant-pcr-app .pcr-interaction .pcr-clear {
573 cursor: pointer;
574 margin: 0;
575 padding: 0 10px;
576 border-radius: 3px;
577 color: #fff;
578 background-color: #3858E9;
579 text-transform: uppercase;
580 }
581
582 .merchant-pcr-app .pcr-selection .pcr-picker {
583 -webkit-user-select: none;
584 -moz-user-select: none;
585 -ms-user-select: none;
586 user-select: none;
587 position: absolute;
588 height: 16px;
589 width: 16px;
590 border-radius: 16px;
591 background-color: #fff !important;
592 -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
593 box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
594 }
595
596 .merchant-pcr-app .pcr-selection .pcr-color-palette,
597 .merchant-pcr-app .pcr-selection .pcr-color-chooser,
598 .merchant-pcr-app .pcr-selection .pcr-color-opacity {
599 -webkit-user-select: none;
600 -moz-user-select: none;
601 -ms-user-select: none;
602 user-select: none;
603 position: relative;
604 display: -webkit-box;
605 display: -ms-flexbox;
606 display: flex;
607 -webkit-box-orient: vertical;
608 -webkit-box-direction: normal;
609 -ms-flex-direction: column;
610 flex-direction: column;
611 cursor: -webkit-grab;
612 cursor: grab;
613 }
614
615 .merchant-pcr-app .pcr-selection .pcr-color-palette:active,
616 .merchant-pcr-app .pcr-selection .pcr-color-chooser:active,
617 .merchant-pcr-app .pcr-selection .pcr-color-opacity:active {
618 cursor: -webkit-grabbing;
619 cursor: grabbing;
620 }
621
622 .merchant-pcr-app[data-theme=merchant] {
623 width: 250px;
624 max-width: 95vw;
625 padding: 10px;
626 -webkit-box-sizing: border-box;
627 box-sizing: border-box;
628 display: -webkit-box;
629 display: -ms-flexbox;
630 display: flex;
631 grid-gap: 10px;
632 -webkit-box-orient: vertical;
633 -webkit-box-direction: normal;
634 -ms-flex-direction: column;
635 flex-direction: column;
636 }
637
638 .merchant-pcr-app[data-theme=merchant] .pcr-selection {
639 display: grid;
640 grid-gap: 10px;
641 grid-template-columns: 1fr 4fr;
642 grid-template-rows: 5fr auto auto;
643 -webkit-box-align: center;
644 -ms-flex-align: center;
645 align-items: center;
646 height: 150px;
647 width: 100%;
648 align-self: flex-start;
649 }
650
651 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview {
652 grid-area: 2/1/4/1;
653 height: 100%;
654 width: 100%;
655 display: -webkit-box;
656 display: -ms-flexbox;
657 display: flex;
658 -webkit-box-align: center;
659 -ms-flex-align: center;
660 align-items: center;
661 -webkit-box-pack: center;
662 -ms-flex-pack: center;
663 justify-content: center;
664 }
665
666 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-last-color {
667 display: none;
668 }
669
670 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color {
671 position: relative;
672 width: 32px;
673 height: 32px;
674 border-radius: 32px;
675 overflow: hidden;
676 border: 1px solid rgba(0, 0, 0, 0.3);
677 background-color: var(--pcr-color);
678 }
679
680 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color::before {
681 position: absolute;
682 content: "";
683 top: 0;
684 left: 0;
685 width: 100%;
686 height: 100%;
687 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
688 background-size: 6px;
689 border-radius: 100%;
690 z-index: -1;
691 }
692
693 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette {
694 grid-area: 1/1/2/3;
695 width: 100%;
696 height: 100%;
697 z-index: 1;
698 }
699
700 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-picker {
701 width: 18px;
702 height: 18px;
703 border: 2px solid #fff;
704 -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
705 box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
706 background-color: transparent !important;
707 }
708
709 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette {
710 width: 100%;
711 height: 100%;
712 }
713
714 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette::before {
715 position: absolute;
716 content: "";
717 top: 0;
718 left: 0;
719 width: 100%;
720 height: 100%;
721 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
722 background-size: 8px;
723 z-index: -1;
724 }
725
726 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser {
727 grid-area: 2/2/2/2;
728 }
729
730 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
731 grid-area: 3/2/3/2;
732 }
733
734 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser,
735 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
736 height: 12px;
737 margin-right: 10px;
738 }
739
740 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-picker,
741 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-picker {
742 top: 50%;
743 -webkit-transform: translateY(-50%);
744 transform: translateY(-50%);
745 }
746
747 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider,
748 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
749 -webkit-box-flex: 1;
750 -ms-flex-positive: 1;
751 flex-grow: 1;
752 }
753
754 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider {
755 background: -webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red));
756 background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
757 }
758
759 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
760 background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
761 background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
762 background-size: 100%, 6px;
763 }
764
765 /* Buttons */
766 .button-tertiary {
767 cursor: pointer;
768 -webkit-user-select: none;
769 -moz-user-select: none;
770 -ms-user-select: none;
771 user-select: none;
772 display: -webkit-inline-box;
773 display: -ms-inline-flexbox;
774 display: inline-flex;
775 padding: 0.4375rem 1rem;
776 font-size: 0.875rem;
777 font-weight: 600;
778 line-height: 1.5;
779 white-space: nowrap;
780 text-transform: none;
781 text-decoration: none;
782 color: #212b36;
783 background-color: #fff;
784 border: 1px solid #c4cdd5;
785 border-radius: 0.25rem;
786 -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
787 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
788 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
789 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
790 }
791 .button-tertiary:hover, .button-tertiary:focus {
792 outline: none;
793 -webkit-box-shadow: none;
794 box-shadow: none;
795 }
796
797 /* Botiga Dashboard Tabs Nav Items */
798 .merchant-tabs-nav {
799 padding: 0 20px;
800 margin-bottom: -100%;
801 -webkit-transform: translate3d(0, 100%, 0);
802 transform: translate3d(0, 100%, 0);
803 }
804 .merchant-tabs-nav ul {
805 display: -webkit-box;
806 display: -ms-flexbox;
807 display: flex;
808 padding: 0;
809 }
810 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link {
811 position: relative;
812 font-size: 14px;
813 line-height: 20px;
814 padding: 16px;
815 color: #6D7175;
816 text-decoration: none;
817 -webkit-transition: ease color 300ms;
818 transition: ease color 300ms;
819 outline: none;
820 -webkit-box-shadow: none;
821 box-shadow: none;
822 }
823 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
824 content: "";
825 position: absolute;
826 bottom: 0;
827 left: 0;
828 width: 100%;
829 height: 3px;
830 background-color: transparent;
831 border-radius: 4px 4px 0 0;
832 }
833 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
834 color: #3858E9;
835 font-weight: 500;
836 }
837 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link:after {
838 background-color: #3858E9;
839 }
840 .merchant-tabs-nav .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
841 color: #3858E9;
842 }
843 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link {
844 position: relative;
845 display: -webkit-box;
846 display: -ms-flexbox;
847 display: flex;
848 -webkit-box-align: center;
849 -ms-flex-align: center;
850 align-items: center;
851 font-size: 18px;
852 font-weight: 600;
853 line-height: 26px;
854 padding: 9px 16px;
855 border-bottom: 0;
856 color: #1e1e1e;
857 -webkit-transition: ease color 200ms;
858 transition: ease color 200ms;
859 }
860 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg {
861 margin-right: 8px;
862 }
863 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg path {
864 -webkit-transition: ease fill 200ms;
865 transition: ease fill 200ms;
866 }
867 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
868 content: none;
869 }
870 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:before {
871 content: "";
872 position: absolute;
873 top: 0;
874 left: 0;
875 background-color: transparent;
876 width: 4px;
877 height: 100%;
878 border-radius: 0 4px 4px 0;
879 opacity: 0;
880 visibility: hidden;
881 -webkit-transition: ease opacity 200ms;
882 transition: ease opacity 200ms;
883 }
884 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
885 color: #757575;
886 }
887 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link svg path {
888 fill: #757575;
889 }
890 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link:before {
891 background-color: #e1e1e1;
892 opacity: 1;
893 visibility: visible;
894 }
895 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
896 color: #3858E9;
897 }
898 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link svg path {
899 fill: #3858E9;
900 }
901 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link:before {
902 background-color: #3858E9;
903 opacity: 1;
904 visibility: visible;
905 }
906 .merchant-tabs-nav.merchant-tabs-nav-vertical {
907 padding: 0;
908 margin-left: -20px;
909 }
910 .merchant-tabs-nav.merchant-tabs-nav-vertical ul {
911 -webkit-box-orient: vertical;
912 -webkit-box-direction: normal;
913 -ms-flex-direction: column;
914 flex-direction: column;
915 margin: 0;
916 }
917 .merchant-tabs-nav.merchant-tabs-nav-no-negative-margin {
918 margin-bottom: 0;
919 -webkit-transform: none;
920 transform: none;
921 }
922
923 /* Botiga Tabs Content */
924 .merchant-tab-content {
925 display: none;
926 }
927 .merchant-tab-content.active {
928 display: block;
929 }
930
931 .toplevel_page_merchant {
932 background-color: #F4F6F8;
933 }
934 .toplevel_page_merchant #wpbody-content > .updated,
935 .toplevel_page_merchant #wpbody-content > .notice {
936 display: none;
937 }
938
939 .merchant-top-bar {
940 display: -webkit-box;
941 display: -ms-flexbox;
942 display: flex;
943 -webkit-box-align: center;
944 -ms-flex-align: center;
945 align-items: center;
946 -webkit-box-pack: justify;
947 -ms-flex-pack: justify;
948 justify-content: space-between;
949 background-color: #FFF;
950 margin: 0 0 30px -20px;
951 padding: 18px 20px;
952 }
953 .merchant-top-bar * {
954 -webkit-box-sizing: border-box;
955 box-sizing: border-box;
956 }
957 .merchant-top-bar * *:before,
958 .merchant-top-bar * *:after {
959 -webkit-box-sizing: border-box;
960 box-sizing: border-box;
961 }
962 .merchant-top-bar .merchant-top-bar-infos {
963 display: -webkit-box;
964 display: -ms-flexbox;
965 display: flex;
966 -webkit-box-align: center;
967 -ms-flex-align: center;
968 align-items: center;
969 }
970 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item {
971 position: relative;
972 padding: 0 10px;
973 }
974 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item + .merchant-top-bar-info-item:before {
975 content: "";
976 position: absolute;
977 top: 50%;
978 left: 0;
979 height: 17px;
980 -webkit-transform: translateY(-50%);
981 transform: translateY(-50%);
982 border-left: 1px solid #F0F0F0;
983 }
984 .merchant-top-bar .merchant-version {
985 font-size: 13px;
986 line-height: 13px;
987 color: #97A3B6;
988 }
989 .merchant-top-bar .merchant-version strong {
990 position: relative;
991 top: 1px;
992 }
993 .merchant-top-bar .merchant-version .merchant-badge {
994 display: -webkit-inline-box;
995 display: -ms-inline-flexbox;
996 display: inline-flex;
997 margin-left: 5px;
998 font-size: 9px;
999 line-height: 10px;
1000 }
1001 .merchant-top-bar .merchant-notifications {
1002 position: relative;
1003 display: -webkit-inline-box;
1004 display: -ms-inline-flexbox;
1005 display: inline-flex;
1006 -webkit-box-align: center;
1007 -ms-flex-align: center;
1008 align-items: center;
1009 -webkit-box-pack: center;
1010 -ms-flex-pack: center;
1011 justify-content: center;
1012 width: 27px;
1013 height: 27px;
1014 border: 1px solid #DFDFDF;
1015 border-radius: 35px;
1016 }
1017 .merchant-top-bar .merchant-notifications:focus {
1018 -webkit-box-shadow: none;
1019 box-shadow: none;
1020 }
1021 .merchant-top-bar .merchant-notifications .merchant-notifications-count {
1022 position: absolute;
1023 top: -8px;
1024 right: -7px;
1025 display: -webkit-box;
1026 display: -ms-flexbox;
1027 display: flex;
1028 -webkit-box-align: center;
1029 -ms-flex-align: center;
1030 align-items: center;
1031 -webkit-box-pack: center;
1032 -ms-flex-pack: center;
1033 justify-content: center;
1034 width: 16px;
1035 height: 16px;
1036 color: #FFF;
1037 background-color: #FA1212;
1038 border-radius: 35px;
1039 font-size: 10px;
1040 line-height: 1;
1041 }
1042 .merchant-top-bar .merchant-notifications.read .merchant-notifications-count {
1043 display: none;
1044 }
1045 .merchant-top-bar .merchant-website {
1046 display: -webkit-box;
1047 display: -ms-flexbox;
1048 display: flex;
1049 -webkit-box-align: center;
1050 -ms-flex-align: center;
1051 align-items: center;
1052 gap: 8px;
1053 font-size: 13px;
1054 line-height: 16px;
1055 color: #3858E9;
1056 text-decoration: none;
1057 }
1058
1059 /* Notifications Sidebar */
1060 .merchant-notifications-sidebar {
1061 position: fixed;
1062 top: 96px;
1063 right: 0;
1064 width: 100%;
1065 max-width: 500px;
1066 height: calc(100vh - 92px);
1067 background-color: #FFF;
1068 -webkit-box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1069 box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1070 opacity: 0;
1071 visibility: hidden;
1072 -webkit-transform: translate3d(100%, 0, 0);
1073 transform: translate3d(100%, 0, 0);
1074 -webkit-transition: ease transform 300ms, ease opacity 300ms;
1075 transition: ease transform 300ms, ease opacity 300ms;
1076 z-index: 1000;
1077 }
1078 .merchant-notifications-sidebar.opened {
1079 opacity: 1;
1080 visibility: visible;
1081 -webkit-transform: none;
1082 transform: none;
1083 }
1084 .merchant-notifications-sidebar.closing {
1085 opacity: 0;
1086 -webkit-transform: translate3d(100%, 0, 0);
1087 transform: translate3d(100%, 0, 0);
1088 }
1089 .merchant-notifications-sidebar .merchant-notifications-sidebar-close {
1090 position: absolute;
1091 top: 15px;
1092 right: 15px;
1093 -webkit-transition: ease opacity 300ms;
1094 transition: ease opacity 300ms;
1095 }
1096 .merchant-notifications-sidebar .merchant-notifications-sidebar-close:hover {
1097 opacity: 0.7;
1098 }
1099 .merchant-notifications-sidebar .merchant-notifications-sidebar-header {
1100 display: -webkit-box;
1101 display: -ms-flexbox;
1102 display: flex;
1103 -webkit-box-align: center;
1104 -ms-flex-align: center;
1105 align-items: center;
1106 gap: 10px;
1107 background-color: #EAEEF2;
1108 padding: 20px 22px;
1109 }
1110 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon {
1111 display: -webkit-box;
1112 display: -ms-flexbox;
1113 display: flex;
1114 -webkit-box-align: center;
1115 -ms-flex-align: center;
1116 align-items: center;
1117 -webkit-box-pack: center;
1118 -ms-flex-pack: center;
1119 justify-content: center;
1120 width: 40px;
1121 height: 40px;
1122 background-color: #FFF;
1123 border: 1px solid #EBEDEF;
1124 border-radius: 35px;
1125 }
1126 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon svg {
1127 position: relative;
1128 top: -2px;
1129 }
1130 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content h3 {
1131 font-size: 16px;
1132 line-height: 26px;
1133 font-weight: 600;
1134 color: #3858E9;
1135 margin: 0;
1136 }
1137 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content p {
1138 font-size: 13px;
1139 line-height: 18px;
1140 color: #757575;
1141 margin: 0;
1142 }
1143 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs {
1144 position: relative;
1145 }
1146 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs:after {
1147 content: "";
1148 position: absolute;
1149 bottom: -10px;
1150 left: 20px;
1151 width: calc(100% - 40px);
1152 border-bottom: 1px solid #F0F0F1;
1153 }
1154 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs + .merchant-notifications-sidebar-body {
1155 max-height: calc(100vh - 232px);
1156 }
1157 .merchant-notifications-sidebar .merchant-notifications-sidebar-body {
1158 padding: 20px;
1159 overflow-y: auto;
1160 max-height: calc(100vh - 230px);
1161 }
1162 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar {
1163 width: 5px;
1164 }
1165 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-track {
1166 background: #e2e2e2;
1167 }
1168 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-thumb {
1169 background-color: #CCC;
1170 }
1171
1172 /* Notifications (card) */
1173 .merchant-notification .merchant-notification-date {
1174 display: block;
1175 font-size: 13px;
1176 line-height: 18px;
1177 color: #757575;
1178 }
1179 .merchant-notification .merchant-notification-date + .merchant-notification-content {
1180 margin-top: 20px;
1181 }
1182 .merchant-notification .changelog-tag {
1183 display: inline-block;
1184 font-size: 10px;
1185 line-height: 18px;
1186 color: #FFF;
1187 padding: 0px 10px;
1188 background-color: #CCC;
1189 border-radius: 3px;
1190 text-transform: uppercase;
1191 font-weight: 600;
1192 margin-bottom: 5px;
1193 }
1194 .merchant-notification .changelog-tag.changelog-added {
1195 background-color: #73B189;
1196 }
1197 .merchant-notification .changelog-tag.changelog-changed {
1198 background-color: #F6CA45;
1199 }
1200 .merchant-notification .changelog-tag.changelog-fixed {
1201 background-color: #967BE3;
1202 }
1203 .merchant-notification .changelog-description {
1204 display: block;
1205 font-size: 13px;
1206 line-height: 21px;
1207 font-weight: 400;
1208 color: #757575;
1209 margin-top: 5px;
1210 }
1211 .merchant-notification .merchant-notification-content ul {
1212 margin: 0;
1213 }
1214 .merchant-notification .merchant-notification-content ul li {
1215 display: -webkit-box;
1216 display: -ms-flexbox;
1217 display: flex;
1218 -webkit-box-orient: vertical;
1219 -webkit-box-direction: normal;
1220 -ms-flex-direction: column;
1221 flex-direction: column;
1222 -webkit-box-align: start;
1223 -ms-flex-align: start;
1224 align-items: flex-start;
1225 font-size: 16px;
1226 line-height: 26px;
1227 font-weight: 600;
1228 color: #101517;
1229 }
1230 .merchant-notification .merchant-notification-content ul li + li {
1231 margin-top: 15px;
1232 padding-top: 15px;
1233 border-top: 1px solid #E7E7E7;
1234 }
1235 .merchant-notification + .merchant-notification {
1236 margin: 20px -20px 0px;
1237 padding: 20px 20px 0px;
1238 border-top: 1px solid #E7E7E7;
1239 }
1240
1241 .merchant-wrap {
1242 padding-left: 5px;
1243 padding-right: 5px;
1244 }
1245 .merchant-wrap * {
1246 -webkit-box-sizing: border-box;
1247 box-sizing: border-box;
1248 }
1249 .merchant-wrap * *:before,
1250 .merchant-wrap * *:after {
1251 -webkit-box-sizing: border-box;
1252 box-sizing: border-box;
1253 }
1254
1255 .merchant-modules-panel {
1256 display: -webkit-box;
1257 display: -ms-flexbox;
1258 display: flex;
1259 grid-gap: 20px;
1260 -webkit-box-orient: vertical;
1261 -webkit-box-direction: normal;
1262 -ms-flex-direction: column;
1263 flex-direction: column;
1264 }
1265
1266 .merchant-modules-header {
1267 display: -webkit-box;
1268 display: -ms-flexbox;
1269 display: flex;
1270 grid-gap: 30px;
1271 }
1272
1273 .merchant-modules-header-left,
1274 .merchant-modules-header-right {
1275 -webkit-box-flex: 1;
1276 -ms-flex: 1;
1277 flex: 1;
1278 display: -webkit-box;
1279 display: -ms-flexbox;
1280 display: flex;
1281 grid-gap: 10px;
1282 -webkit-box-orient: vertical;
1283 -webkit-box-direction: normal;
1284 -ms-flex-direction: column;
1285 flex-direction: column;
1286 -webkit-box-pack: center;
1287 -ms-flex-pack: center;
1288 justify-content: center;
1289 }
1290
1291 .merchant-admin-hand-icon {
1292 width: 24px;
1293 height: auto;
1294 margin-left: 7px;
1295 position: relative;
1296 top: 2px;
1297 }
1298
1299 .merchant-modules-header-heading {
1300 font-size: 24px;
1301 line-height: 34px;
1302 font-weight: 500;
1303 color: #101517;
1304 }
1305
1306 .merchant-modules-header-subheading {
1307 font-size: 16px;
1308 line-height: 1.35em;
1309 color: #7B7B7B;
1310 font-weight: 400;
1311 }
1312
1313 .merchant-modules-header-status {
1314 margin-top: 20px;
1315 margin-bottom: 40px;
1316 display: -webkit-box;
1317 display: -ms-flexbox;
1318 display: flex;
1319 grid-gap: 20px;
1320 }
1321
1322 .merchant-modules-header-status-box {
1323 display: -webkit-box;
1324 display: -ms-flexbox;
1325 display: flex;
1326 grid-gap: 10px;
1327 -webkit-box-orient: vertical;
1328 -webkit-box-direction: normal;
1329 -ms-flex-direction: column;
1330 flex-direction: column;
1331 -webkit-box-align: center;
1332 -ms-flex-align: center;
1333 align-items: center;
1334 padding: 20px;
1335 font-size: 14px;
1336 font-weight: 500;
1337 color: #101517;
1338 background-color: #fff;
1339 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
1340 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
1341 border-radius: 4px;
1342 }
1343 @media (min-width: 421px) {
1344 .merchant-modules-header-status-box {
1345 min-width: 175px;
1346 }
1347 }
1348 @media (max-width: 420px) {
1349 .merchant-modules-header-status-box {
1350 -webkit-box-flex: 1;
1351 -ms-flex: 1;
1352 flex: 1;
1353 }
1354 }
1355 .merchant-modules-header-status-box span {
1356 display: -webkit-box;
1357 display: -ms-flexbox;
1358 display: flex;
1359 grid-gap: 5px;
1360 -webkit-box-align: center;
1361 -ms-flex-align: center;
1362 align-items: center;
1363 }
1364 .merchant-modules-header-status-box strong {
1365 color: #101517;
1366 font-size: 40px;
1367 line-height: 1em;
1368 }
1369
1370 .merchant-modules-header-image {
1371 height: 100%;
1372 display: -webkit-box;
1373 display: -ms-flexbox;
1374 display: flex;
1375 -webkit-box-pack: center;
1376 -ms-flex-pack: center;
1377 justify-content: center;
1378 -webkit-box-align: end;
1379 -ms-flex-align: end;
1380 align-items: flex-end;
1381 }
1382 .merchant-modules-header-image svg {
1383 width: 300px;
1384 }
1385 @media (max-width: 1400px) {
1386 .merchant-modules-header-image img {
1387 max-width: 450px;
1388 margin-top: 20px;
1389 }
1390 }
1391
1392 .merchant-modules-header-shortlinks {
1393 margin: 20px 0;
1394 padding: 0;
1395 list-style: none;
1396 display: -webkit-box;
1397 display: -ms-flexbox;
1398 display: flex;
1399 -webkit-box-orient: vertical;
1400 -webkit-box-direction: normal;
1401 -ms-flex-direction: column;
1402 flex-direction: column;
1403 border-radius: 4px;
1404 border: 2px solid #F0F0F1;
1405 background-color: #fff;
1406 border-radius: 4px;
1407 }
1408 .merchant-modules-header-shortlinks li {
1409 margin: 0 15px;
1410 border-bottom: 1px solid #EFEFEF;
1411 }
1412 .merchant-modules-header-shortlinks li:last-child {
1413 border-bottom: none;
1414 margin-bottom: 5px;
1415 }
1416 .merchant-modules-header-shortlinks li:first-child {
1417 margin-top: 5px;
1418 }
1419 .merchant-modules-header-shortlinks a {
1420 font-size: 14px;
1421 display: -webkit-box;
1422 display: -ms-flexbox;
1423 display: flex;
1424 grid-gap: 8px;
1425 -webkit-box-align: center;
1426 -ms-flex-align: center;
1427 align-items: center;
1428 -webkit-box-pack: justify;
1429 -ms-flex-pack: justify;
1430 justify-content: space-between;
1431 color: #757575;
1432 text-decoration: none;
1433 padding: 10px 0;
1434 }
1435 .merchant-modules-header-shortlinks a:focus {
1436 outline: none;
1437 -webkit-box-shadow: none;
1438 box-shadow: none;
1439 }
1440 .merchant-modules-header-shortlinks span {
1441 -webkit-box-flex: 1;
1442 -ms-flex: 1;
1443 flex: 1;
1444 }
1445 .merchant-modules-header-shortlinks strong {
1446 color: #101517;
1447 font-weight: 500;
1448 }
1449
1450 .merchant-modules-box {
1451 display: -webkit-box;
1452 display: -ms-flexbox;
1453 display: flex;
1454 grid-gap: 20px;
1455 -webkit-box-orient: vertical;
1456 -webkit-box-direction: normal;
1457 -ms-flex-direction: column;
1458 flex-direction: column;
1459 padding: 20px;
1460 background-color: #fff;
1461 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1462 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1463 border-radius: 4px;
1464 }
1465
1466 .merchant-modules-box-heading {
1467 font-size: 20px;
1468 font-weight: 500;
1469 line-height: 30px;
1470 color: #101517;
1471 }
1472
1473 .merchant-modules-list {
1474 display: grid;
1475 grid-template-columns: repeat(3, minmax(0, 1fr));
1476 grid-gap: 20px;
1477 }
1478
1479 .merchant-modules-list-item {
1480 position: relative;
1481 display: -webkit-box;
1482 display: -ms-flexbox;
1483 display: flex;
1484 grid-gap: 10px;
1485 padding: 20px;
1486 text-decoration: none;
1487 border: 2px solid #F0F0F1;
1488 background-color: #fff;
1489 border-radius: 4px;
1490 -webkit-transition: all 0.2s;
1491 transition: all 0.2s;
1492 }
1493 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-icon,
1494 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-content {
1495 opacity: 0.5;
1496 }
1497 .merchant-modules-list-item:hover {
1498 -webkit-box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
1499 box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
1500 }
1501 .merchant-modules-list-item:focus {
1502 outline: none;
1503 -webkit-box-shadow: none;
1504 box-shadow: none;
1505 }
1506
1507 .merchant-badge {
1508 color: #99A5B8;
1509 padding: 3px 6px;
1510 border: 1px solid #DFDFDF;
1511 border-radius: 2px;
1512 font-weight: 700;
1513 }
1514 .merchant-badge.merchant-badge-pro {
1515 color: #3858e9;
1516 border-color: #3858e9;
1517 }
1518
1519 .merchant-pro-badge.merchant-pro-tooltip {
1520 position: relative;
1521 }
1522 .merchant-pro-badge.merchant-pro-tooltip:before {
1523 content: attr(data-tooltip-message);
1524 position: absolute;
1525 right: -30px;
1526 bottom: calc(100% + 11px);
1527 color: #FFF;
1528 font-size: 11px;
1529 line-height: 16px;
1530 padding: 3px 6px;
1531 background-color: #1E1E1E;
1532 white-space: nowrap;
1533 opacity: 0;
1534 visibility: hidden;
1535 -webkit-transform: translate3d(0, 6px, 0);
1536 transform: translate3d(0, 6px, 0);
1537 -webkit-transition: ease opacity 300ms, ease transform 300ms;
1538 transition: ease opacity 300ms, ease transform 300ms;
1539 z-index: 2;
1540 }
1541 .merchant-pro-badge.merchant-pro-tooltip:after {
1542 content: "";
1543 position: absolute;
1544 bottom: calc(100% + 3px);
1545 right: 10px;
1546 width: 0;
1547 height: 0;
1548 border-style: solid;
1549 border-width: 4px 4px 4px 4px;
1550 border-color: #1E1E1E transparent transparent transparent;
1551 opacity: 0;
1552 visibility: hidden;
1553 -webkit-transform: translate3d(0, 6px, 0);
1554 transform: translate3d(0, 6px, 0);
1555 -webkit-transition: ease opacity 300ms, ease transform 300ms;
1556 transition: ease opacity 300ms, ease transform 300ms;
1557 z-index: 2;
1558 }
1559 .merchant-pro-badge.merchant-pro-tooltip:hover:before, .merchant-pro-badge.merchant-pro-tooltip:hover:after {
1560 opacity: 1;
1561 visibility: visible;
1562 -webkit-transform: translate3d(0, 0, 0);
1563 transform: translate3d(0, 0, 0);
1564 }
1565
1566 .merchant-modules-list-item-badge-wrapper {
1567 position: absolute;
1568 top: 20px;
1569 right: 20px;
1570 }
1571
1572 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge {
1573 padding: 3px 7px;
1574 color: #FFF;
1575 border: 1px solid #212121;
1576 background-color: #212121;
1577 border-radius: 3px;
1578 font-size: 10px;
1579 line-height: 1.2;
1580 font-weight: 400;
1581 display: -webkit-inline-box;
1582 display: -ms-inline-flexbox;
1583 display: inline-flex;
1584 top: -2px;
1585 text-transform: uppercase;
1586 }
1587 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge:before {
1588 font-weight: 400;
1589 text-transform: none;
1590 }
1591
1592 .merchant-modules-list-item-woo-required .merchant-pro-badge {
1593 padding: 1px 2px;
1594 color: #674399;
1595 border: 1px solid #674399;
1596 border-radius: 3px;
1597 font-size: 9px;
1598 line-height: 1.2;
1599 font-weight: 700;
1600 display: -webkit-inline-box;
1601 display: -ms-inline-flexbox;
1602 display: inline-flex;
1603 top: -2px;
1604 }
1605 .merchant-modules-list-item-woo-required .merchant-pro-badge:before {
1606 font-weight: 400;
1607 }
1608 .merchant-modules-list-item-woo-required + .merchant-modules-list-item-upsell {
1609 right: 53px;
1610 }
1611
1612 .merchant-modules-list-item-icon {
1613 display: -webkit-box;
1614 display: -ms-flexbox;
1615 display: flex;
1616 }
1617 .merchant-modules-list-item-icon svg {
1618 width: 18px;
1619 height: 26px;
1620 fill: #787C82;
1621 }
1622 .merchant-modules-list-item-icon svg.stroke-based {
1623 fill: none;
1624 stroke: #787C82;
1625 }
1626
1627 .merchant-modules-list-item-content {
1628 display: -webkit-box;
1629 display: -ms-flexbox;
1630 display: flex;
1631 grid-gap: 8px;
1632 -webkit-box-orient: vertical;
1633 -webkit-box-direction: normal;
1634 -ms-flex-direction: column;
1635 flex-direction: column;
1636 }
1637
1638 .merchant-modules-list-item-title {
1639 display: -webkit-box;
1640 display: -ms-flexbox;
1641 display: flex;
1642 -webkit-box-align: center;
1643 -ms-flex-align: center;
1644 align-items: center;
1645 grid-gap: 5px;
1646 font-size: 16px;
1647 line-height: 26px;
1648 font-weight: 500;
1649 color: #101517;
1650 }
1651
1652 .merchant-modules-indicator {
1653 width: 10px;
1654 height: 10px;
1655 border-radius: 10px;
1656 background-color: #3c8733;
1657 }
1658
1659 .merchant-modules-list-item-desc {
1660 color: #757575;
1661 font-size: 13px;
1662 line-height: 20px;
1663 max-width: 400px;
1664 }
1665
1666 .merchant-module-page {
1667 display: -webkit-box;
1668 display: -ms-flexbox;
1669 display: flex;
1670 }
1671
1672 .merchant-module-page-back a {
1673 display: -webkit-box;
1674 display: -ms-flexbox;
1675 display: flex;
1676 grid-gap: 5px;
1677 -webkit-box-align: center;
1678 -ms-flex-align: center;
1679 align-items: center;
1680 -webkit-transition: all 0.2s;
1681 transition: all 0.2s;
1682 text-decoration: none;
1683 color: #1D2327;
1684 font-weight: 500;
1685 }
1686 .merchant-module-page-back a:focus, .merchant-module-page-back a:active {
1687 -webkit-box-shadow: none;
1688 box-shadow: none;
1689 outline: none;
1690 }
1691
1692 .merchant-module-page-content {
1693 width: 50%;
1694 -webkit-box-flex: 1;
1695 -ms-flex: 1;
1696 flex: 1;
1697 display: -webkit-box;
1698 display: -ms-flexbox;
1699 display: flex;
1700 grid-gap: 20px;
1701 -webkit-box-orient: vertical;
1702 -webkit-box-direction: normal;
1703 -ms-flex-direction: column;
1704 flex-direction: column;
1705 }
1706
1707 .merchant-module-page-body {
1708 display: -webkit-box;
1709 display: -ms-flexbox;
1710 display: flex;
1711 }
1712
1713 .merchant-module-page-preview {
1714 width: 50%;
1715 margin-left: 20px;
1716 }
1717
1718 .merchant-module-page-body.has-preview .merchant-module-page-setting-box {
1719 -webkit-box-orient: vertical;
1720 -webkit-box-direction: normal;
1721 -ms-flex-direction: column;
1722 flex-direction: column;
1723 grid-gap: 20px;
1724 }
1725 .merchant-module-page-body.has-preview .merchant-module-page-setting-title,
1726 .merchant-module-page-body.has-preview .merchant-module-page-setting-fields {
1727 width: 100%;
1728 }
1729
1730 .merchant-module-page-ajax-form {
1731 -webkit-box-flex: 1;
1732 -ms-flex: 1;
1733 flex: 1;
1734 display: -webkit-box;
1735 display: -ms-flexbox;
1736 display: flex;
1737 grid-gap: 20px;
1738 -webkit-box-orient: vertical;
1739 -webkit-box-direction: normal;
1740 -ms-flex-direction: column;
1741 flex-direction: column;
1742 }
1743
1744 .merchant-module-page-header {
1745 display: -webkit-box;
1746 display: -ms-flexbox;
1747 display: flex;
1748 -webkit-box-align: center;
1749 -ms-flex-align: center;
1750 align-items: center;
1751 background-color: #fff;
1752 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1753 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1754 border-radius: 4px;
1755 }
1756
1757 .merchant-module-page-header-content {
1758 width: 100%;
1759 display: -webkit-box;
1760 display: -ms-flexbox;
1761 display: flex;
1762 grid-gap: 20px;
1763 -webkit-box-orient: vertical;
1764 -webkit-box-direction: normal;
1765 -ms-flex-direction: column;
1766 flex-direction: column;
1767 padding: 30px;
1768 }
1769
1770 .merchant-module-page-header-placeholder {
1771 width: 40%;
1772 display: -webkit-box;
1773 display: -ms-flexbox;
1774 display: flex;
1775 -ms-flex-item-align: end;
1776 align-self: flex-end;
1777 -webkit-box-pack: center;
1778 -ms-flex-pack: center;
1779 justify-content: center;
1780 margin: 40px 60px 0 60px;
1781 }
1782 .merchant-module-page-header-placeholder img {
1783 max-width: 100%;
1784 max-height: 300px;
1785 }
1786
1787 body.merchant-has-admin-preview .merchant-module-page-header-content {
1788 width: 100%;
1789 }
1790 body.merchant-has-admin-preview .merchant-module-page-header-placeholder {
1791 display: none;
1792 }
1793 body.merchant-has-admin-preview .merchant-module-page-desc {
1794 max-width: none;
1795 }
1796
1797 .merchant-module-page-heading {
1798 display: -webkit-box;
1799 display: -ms-flexbox;
1800 display: flex;
1801 grid-gap: 12px;
1802 }
1803
1804 .merchant-module-page-info {
1805 display: -webkit-box;
1806 display: -ms-flexbox;
1807 display: flex;
1808 grid-gap: 10px;
1809 -webkit-box-orient: vertical;
1810 -webkit-box-direction: normal;
1811 -ms-flex-direction: column;
1812 flex-direction: column;
1813 }
1814
1815 .merchant-module-page-title {
1816 font-size: 32px;
1817 line-height: 40px;
1818 font-weight: 500;
1819 color: #101517;
1820 display: -webkit-box;
1821 display: -ms-flexbox;
1822 display: flex;
1823 grid-gap: 15px;
1824 -webkit-box-align: center;
1825 -ms-flex-align: center;
1826 align-items: center;
1827 }
1828 .merchant-module-page-title svg {
1829 width: 28px;
1830 height: 28px;
1831 fill: #787C82;
1832 }
1833
1834 .merchant-module-page-desc {
1835 font-size: 18px;
1836 line-height: 28px;
1837 font-weight: normal;
1838 color: #757575;
1839 max-width: none;
1840 }
1841
1842 .merchant-module-page-actions {
1843 display: -webkit-box;
1844 display: -ms-flexbox;
1845 display: flex;
1846 grid-gap: 10px;
1847 -webkit-box-pack: justify;
1848 -ms-flex-pack: justify;
1849 justify-content: space-between;
1850 }
1851
1852 .merchant-module-page-actions-inner {
1853 display: -webkit-box;
1854 display: -ms-flexbox;
1855 display: flex;
1856 grid-gap: 15px;
1857 }
1858
1859 .merchant-module-page-button {
1860 cursor: pointer;
1861 display: -webkit-box;
1862 display: -ms-flexbox;
1863 display: flex;
1864 grid-gap: 7px;
1865 -webkit-box-pack: center;
1866 -ms-flex-pack: center;
1867 justify-content: center;
1868 -webkit-box-align: center;
1869 -ms-flex-align: center;
1870 align-items: center;
1871 padding: 14px 25px;
1872 font-size: 16px;
1873 line-height: 1em;
1874 font-weight: 500;
1875 -webkit-user-select: none;
1876 -moz-user-select: none;
1877 -ms-user-select: none;
1878 user-select: none;
1879 text-decoration: none;
1880 border-radius: 4px;
1881 color: #fff;
1882 border: 1px solid transparent;
1883 background-color: #3858E9;
1884 }
1885 .merchant-module-page-button.merchant-module-question-answer-button:disabled {
1886 cursor: not-allowed;
1887 background: rgba(239, 239, 239, 0.3);
1888 color: rgba(16, 16, 16, 0.3);
1889 border: 1px solid rgba(195, 195, 195, 0.3);
1890 }
1891 .merchant-module-page-button:focus, .merchant-module-page-button:hover {
1892 outline: none;
1893 -webkit-box-shadow: none;
1894 box-shadow: none;
1895 color: #fff;
1896 }
1897 .merchant-module-page-button svg {
1898 width: 8px;
1899 height: 8px;
1900 }
1901
1902 .merchant-module-deactivate {
1903 display: none;
1904 }
1905
1906 .merchant-module-action {
1907 position: relative;
1908 }
1909 .merchant-module-action.merchant-enabled .merchant-module-activate {
1910 display: none;
1911 }
1912 .merchant-module-action.merchant-enabled .merchant-module-deactivate {
1913 display: block;
1914 }
1915
1916 .merchant-module-deactivate-dropdown {
1917 cursor: pointer;
1918 position: absolute;
1919 top: 100%;
1920 left: 0;
1921 padding: 5px;
1922 white-space: nowrap;
1923 border-radius: 8px;
1924 background-color: #fff;
1925 font-size: 14px;
1926 line-height: 16px;
1927 margin: 0;
1928 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1929 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1930 opacity: 0;
1931 pointer-events: none;
1932 -webkit-transition: all 0.1s;
1933 transition: all 0.1s;
1934 }
1935 .merchant-module-deactivate-dropdown.merchant-show {
1936 opacity: 1;
1937 pointer-events: auto;
1938 margin-top: 10px;
1939 }
1940
1941 .merchant-module-dropdown {
1942 position: absolute;
1943 overflow: hidden;
1944 top: 100%;
1945 left: 0;
1946 min-width: 275px;
1947 white-space: nowrap;
1948 border-radius: 8px;
1949 background-color: #fff;
1950 font-size: 13px;
1951 line-height: 14px;
1952 margin: 0;
1953 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1954 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1955 opacity: 0;
1956 pointer-events: none;
1957 -webkit-transition: all 0.1s;
1958 transition: all 0.1s;
1959 z-index: 99;
1960 }
1961 .merchant-module-dropdown.merchant-show {
1962 opacity: 1;
1963 pointer-events: auto;
1964 margin-top: 10px;
1965 }
1966 .merchant-module-dropdown ul {
1967 margin: 0;
1968 padding: 0;
1969 list-style: none;
1970 display: -webkit-box;
1971 display: -ms-flexbox;
1972 display: flex;
1973 -webkit-box-orient: vertical;
1974 -webkit-box-direction: normal;
1975 -ms-flex-direction: column;
1976 flex-direction: column;
1977 }
1978 .merchant-module-dropdown ul li {
1979 cursor: pointer;
1980 position: relative;
1981 margin: 0;
1982 display: -webkit-box;
1983 display: -ms-flexbox;
1984 display: flex;
1985 -webkit-box-align: center;
1986 -ms-flex-align: center;
1987 align-items: center;
1988 -webkit-box-pack: justify;
1989 -ms-flex-pack: justify;
1990 justify-content: space-between;
1991 white-space: nowrap;
1992 padding: 15px 15px 0 15px;
1993 color: #202223;
1994 -webkit-transition: all 0.2s;
1995 transition: all 0.2s;
1996 }
1997 .merchant-module-dropdown ul li:before {
1998 content: "";
1999 position: absolute;
2000 z-index: 1;
2001 top: 0;
2002 left: 0;
2003 bottom: 0;
2004 width: 0;
2005 opacity: 0;
2006 -webkit-transition: all 0.2s;
2007 transition: all 0.2s;
2008 background-color: #3858E9;
2009 }
2010 .merchant-module-dropdown ul li:hover {
2011 background-color: #F2F7FE;
2012 }
2013 .merchant-module-dropdown ul li:hover:before {
2014 opacity: 1;
2015 width: 3px;
2016 }
2017 .merchant-module-dropdown ul li span {
2018 width: 100%;
2019 padding-bottom: 15px;
2020 border-bottom: 1px solid #eee;
2021 }
2022 .merchant-module-dropdown ul li:last-child span {
2023 border-bottom: none;
2024 }
2025 .merchant-module-dropdown.merchant-show {
2026 opacity: 1;
2027 pointer-events: auto;
2028 margin-top: 10px;
2029 }
2030
2031 .merchant-module-dropdown-close {
2032 cursor: pointer;
2033 }
2034
2035 .merchant-module-question-title {
2036 display: -webkit-box;
2037 display: -ms-flexbox;
2038 display: flex;
2039 grid-gap: 15px;
2040 -webkit-box-align: center;
2041 -ms-flex-align: center;
2042 align-items: center;
2043 -webkit-box-pack: justify;
2044 -ms-flex-pack: justify;
2045 justify-content: space-between;
2046 white-space: nowrap;
2047 padding: 15px 15px 5px 15px;
2048 font-size: 14px;
2049 line-height: 16px;
2050 color: #202223;
2051 font-weight: 500;
2052 }
2053 .merchant-module-question-title i {
2054 width: auto;
2055 height: auto;
2056 font-size: 24px;
2057 line-height: 1;
2058 }
2059
2060 .merchant-module-question-answer-title {
2061 display: none;
2062 grid-gap: 15px;
2063 -webkit-box-align: center;
2064 -ms-flex-align: center;
2065 align-items: center;
2066 -webkit-box-pack: justify;
2067 -ms-flex-pack: justify;
2068 justify-content: space-between;
2069 white-space: nowrap;
2070 padding: 15px;
2071 font-size: 14px;
2072 line-height: 16px;
2073 color: #202223;
2074 font-weight: 500;
2075 }
2076 .merchant-module-question-answer-title i {
2077 width: auto;
2078 height: auto;
2079 font-size: 20px;
2080 line-height: 1;
2081 }
2082 .merchant-module-question-answer-title.merchant-show {
2083 display: -webkit-box;
2084 display: -ms-flexbox;
2085 display: flex;
2086 }
2087
2088 .merchant-module-question-answer-form {
2089 padding: 5px 15px 15px 15px;
2090 display: -webkit-box;
2091 display: -ms-flexbox;
2092 display: flex;
2093 grid-gap: 10px;
2094 -webkit-box-orient: vertical;
2095 -webkit-box-direction: normal;
2096 -ms-flex-direction: column;
2097 flex-direction: column;
2098 }
2099 .merchant-module-question-answer-form textarea {
2100 width: 100%;
2101 height: 100px;
2102 padding: 12px;
2103 line-height: 1em;
2104 width: 100%;
2105 max-width: 100%;
2106 min-height: auto;
2107 border: 1px solid #D6D6D6;
2108 }
2109 .merchant-module-question-answer-form textarea:focus {
2110 outline: none;
2111 -webkit-box-shadow: none;
2112 box-shadow: none;
2113 border-color: #3858E9;
2114 }
2115 .merchant-module-question-answer-form button {
2116 -ms-flex-item-align: end;
2117 align-self: flex-end;
2118 padding: 8px 10px;
2119 font-size: 13px;
2120 font-weight: 400;
2121 }
2122
2123 .merchant-module-question-answer-thank-you-text {
2124 padding: 5px 15px 15px 15px;
2125 }
2126
2127 .merchant-module-question-thank-you-dropdown .merchant-module-question-answer-title {
2128 display: -webkit-box;
2129 display: -ms-flexbox;
2130 display: flex;
2131 }
2132
2133 .merchant-module-page-button-action-deactivate {
2134 border-radius: 8px;
2135 padding: 12px 16px;
2136 display: -webkit-box;
2137 display: -ms-flexbox;
2138 display: flex;
2139 justify-items: center;
2140 -webkit-box-align: center;
2141 -ms-flex-align: center;
2142 align-items: center;
2143 text-decoration: none;
2144 color: #d82c0d;
2145 }
2146 .merchant-module-page-button-action-deactivate:hover {
2147 background-color: #fff4f4;
2148 }
2149
2150 .merchant-module-page-button-deactivate {
2151 color: #3858E9;
2152 border-color: #3858E9;
2153 background-color: transparent;
2154 }
2155 .merchant-module-page-button-deactivate:focus, .merchant-module-page-button-deactivate:hover {
2156 color: #3858E9;
2157 }
2158 .merchant-module-page-button-deactivate.merchant-show .merchant-module-deactivate-dropdown {
2159 pointer-events: auto;
2160 }
2161
2162 .merchant-module-page-actions-links {
2163 display: -webkit-box;
2164 display: -ms-flexbox;
2165 display: flex;
2166 }
2167
2168 .merchant-module-page-link {
2169 display: -webkit-box;
2170 display: -ms-flexbox;
2171 display: flex;
2172 grid-gap: 5px;
2173 -webkit-box-pack: center;
2174 -ms-flex-pack: center;
2175 justify-content: center;
2176 -webkit-box-align: center;
2177 -ms-flex-align: center;
2178 align-items: center;
2179 padding: 10px;
2180 font-size: 13px;
2181 font-weight: 500;
2182 text-decoration: none;
2183 color: #3858E9;
2184 }
2185 .merchant-module-page-link span {
2186 text-decoration: underline;
2187 }
2188 .merchant-module-page-link:focus, .merchant-module-page-link:hover {
2189 outline: none;
2190 -webkit-box-shadow: none;
2191 box-shadow: none;
2192 color: #3858E9;
2193 }
2194
2195 body.merchant-module-disabled .merchant-module-page-link-preview {
2196 pointer-events: none;
2197 color: #CCC;
2198 }
2199 body.merchant-module-disabled .merchant-module-page-link-preview span {
2200 text-decoration: none;
2201 }
2202 body.merchant-module-disabled .merchant-module-page-link-preview svg path {
2203 fill: #CCC;
2204 }
2205
2206 .merchant-module-page-ajax-header {
2207 display: -webkit-box;
2208 display: -ms-flexbox;
2209 display: flex;
2210 -webkit-box-pack: justify;
2211 -ms-flex-pack: justify;
2212 justify-content: space-between;
2213 -webkit-box-align: center;
2214 -ms-flex-align: center;
2215 align-items: center;
2216 position: fixed;
2217 z-index: 10000;
2218 overflow: hidden;
2219 padding-left: 20px;
2220 padding-right: 20px;
2221 top: 32px;
2222 left: 160px;
2223 right: 0;
2224 height: 56px;
2225 opacity: 0;
2226 pointer-events: none;
2227 background-color: #1d2327;
2228 -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2229 transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2230 }
2231 .merchant-module-page-ajax-header.merchant-show {
2232 opacity: 1;
2233 pointer-events: auto;
2234 }
2235 .merchant-module-page-ajax-header.merchant-saving {
2236 -webkit-user-select: none;
2237 -moz-user-select: none;
2238 -ms-user-select: none;
2239 user-select: none;
2240 }
2241 .merchant-module-page-ajax-header.merchant-saving i {
2242 opacity: 1;
2243 }
2244 .merchant-module-page-ajax-header.merchant-saving span {
2245 opacity: 0;
2246 }
2247 .merchant-module-page-ajax-header.merchant-saving .merchant-module-page-ajax-buttons {
2248 -webkit-user-select: none;
2249 -moz-user-select: none;
2250 -ms-user-select: none;
2251 user-select: none;
2252 pointer-events: none;
2253 }
2254
2255 .merchant-module-page-ajax-notice {
2256 font-size: 14px;
2257 font-weight: 500;
2258 color: #e3e5e7;
2259 }
2260
2261 .merchant-module-page-ajax-buttons {
2262 display: -webkit-box;
2263 display: -ms-flexbox;
2264 display: flex;
2265 -webkit-box-align: center;
2266 -ms-flex-align: center;
2267 align-items: center;
2268 grid-gap: 15px;
2269 }
2270
2271 .merchant-module-save-button {
2272 position: relative;
2273 cursor: pointer;
2274 display: -webkit-box;
2275 display: -ms-flexbox;
2276 display: flex;
2277 -webkit-box-pack: center;
2278 -ms-flex-pack: center;
2279 justify-content: center;
2280 -webkit-box-align: center;
2281 -ms-flex-align: center;
2282 align-items: center;
2283 font-size: 14px;
2284 line-height: 16px;
2285 border: 0;
2286 border-radius: 4px;
2287 min-width: 60px;
2288 min-height: 36px;
2289 padding-left: 16px;
2290 padding-right: 16px;
2291 color: #fff;
2292 background-color: #3858E9;
2293 }
2294 .merchant-module-save-button i {
2295 position: absolute;
2296 width: auto;
2297 height: auto;
2298 font-size: 20px;
2299 opacity: 0;
2300 -webkit-animation: merchant-spin 1.5s infinite linear;
2301 animation: merchant-spin 1.5s infinite linear;
2302 }
2303
2304 @-webkit-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
2315 @keyframes merchant-spin {
2316 0% {
2317 -webkit-transform: rotate(0deg);
2318 transform: rotate(0deg);
2319 }
2320 100% {
2321 -webkit-transform: rotate(359deg);
2322 transform: rotate(359deg);
2323 }
2324 }
2325 .merchant-module-discard-button {
2326 cursor: pointer;
2327 display: -webkit-box;
2328 display: -ms-flexbox;
2329 display: flex;
2330 -webkit-box-pack: center;
2331 -ms-flex-pack: center;
2332 justify-content: center;
2333 -webkit-box-align: center;
2334 -ms-flex-align: center;
2335 align-items: center;
2336 font-size: 14px;
2337 line-height: 16px;
2338 min-width: 36px;
2339 min-height: 36px;
2340 color: #fff;
2341 text-decoration: none;
2342 }
2343 .merchant-module-discard-button:hover {
2344 color: #fff;
2345 opacity: 0.75;
2346 }
2347 .merchant-module-discard-button:focus {
2348 outline: none;
2349 -webkit-box-shadow: none;
2350 box-shadow: none;
2351 }
2352
2353 .merchant-module-page-preview-browser-top {
2354 background: #323232;
2355 display: -webkit-box;
2356 display: -ms-flexbox;
2357 display: flex;
2358 -webkit-box-align: center;
2359 -ms-flex-align: center;
2360 align-items: center;
2361 height: 45px;
2362 padding-left: 9px;
2363 }
2364
2365 .merchant-module-page-preview-browser-top-circle {
2366 background: #616161;
2367 width: 12px;
2368 height: 12px;
2369 border-radius: 50%;
2370 display: block;
2371 margin-left: 7px;
2372 }
2373
2374 .merchant-module-page-preview-browser {
2375 border-top-left-radius: 5px;
2376 border-top-right-radius: 5px;
2377 overflow: hidden;
2378 -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2379 box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2380 margin-bottom: -29px;
2381 display: -webkit-box;
2382 display: -ms-flexbox;
2383 display: flex;
2384 -webkit-box-orient: vertical;
2385 -webkit-box-direction: normal;
2386 -ms-flex-direction: column;
2387 flex-direction: column;
2388 }
2389
2390 .merchant-module-page-preview-browser-inner {
2391 -webkit-box-flex: 1;
2392 -ms-flex-positive: 1;
2393 flex-grow: 1;
2394 position: relative;
2395 display: block;
2396 }
2397
2398 .merchant-module-page-preview-box {
2399 overflow: hidden;
2400 position: sticky;
2401 top: 45px;
2402 }
2403
2404 .merchant-module-page-settings,
2405 .merchant-module-page-preview-box {
2406 display: -webkit-box;
2407 display: -ms-flexbox;
2408 display: flex;
2409 grid-gap: 30px;
2410 -webkit-box-orient: vertical;
2411 -webkit-box-direction: normal;
2412 -ms-flex-direction: column;
2413 flex-direction: column;
2414 padding: 30px;
2415 background-color: #fff;
2416 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
2417 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
2418 border-radius: 4px;
2419 }
2420
2421 .merchant-module-page-setting-box {
2422 display: -webkit-box;
2423 display: -ms-flexbox;
2424 display: flex;
2425 }
2426 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 {
2427 -webkit-box-orient: vertical;
2428 -webkit-box-direction: normal;
2429 -ms-flex-direction: column;
2430 flex-direction: column;
2431 grid-gap: 20px;
2432 }
2433 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-title,
2434 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-fields {
2435 width: 100%;
2436 }
2437
2438 .merchant-module-page-preview-title,
2439 .merchant-module-page-setting-title {
2440 margin-top: 0;
2441 padding-right: 50px;
2442 font-size: 20px;
2443 font-weight: 500;
2444 color: #2F2F2F;
2445 }
2446
2447 .merchant-module-page-setting-title {
2448 width: 40%;
2449 }
2450
2451 .merchant-module-page-setting-subtitle {
2452 margin-top: 20px;
2453 font-size: 13px;
2454 font-weight: 400;
2455 color: #757575;
2456 }
2457
2458 .merchant-module-page-setting-fields {
2459 display: -webkit-box;
2460 display: -ms-flexbox;
2461 display: flex;
2462 -webkit-box-orient: vertical;
2463 -webkit-box-direction: normal;
2464 -ms-flex-direction: column;
2465 flex-direction: column;
2466 width: 60%;
2467 padding: 30px;
2468 border-radius: 4px;
2469 border: 2px solid #F0F0F1;
2470 background-color: #fff;
2471 }
2472 .merchant-module-page-setting-fields > .merchant-module-page-setting-field:last-of-type {
2473 margin-bottom: 0;
2474 }
2475
2476 .merchant-module-page-setting-field {
2477 display: -webkit-box;
2478 display: -ms-flexbox;
2479 display: flex;
2480 grid-gap: 10px;
2481 -webkit-box-orient: vertical;
2482 -webkit-box-direction: normal;
2483 -ms-flex-direction: column;
2484 flex-direction: column;
2485 margin-bottom: 24px;
2486 }
2487 .merchant-module-page-setting-field.merchant-show {
2488 display: -webkit-box;
2489 display: -ms-flexbox;
2490 display: flex;
2491 }
2492 .merchant-module-page-setting-field.merchant-hide {
2493 display: none;
2494 }
2495 .merchant-module-page-setting-field[data-id=shortcode_text] {
2496 margin-top: 24px;
2497 }
2498
2499 .merchant-module-page-setting-field-title {
2500 font-size: 14px;
2501 font-weight: 500;
2502 color: #2F2F2F;
2503 }
2504 .merchant-module-page-setting-field-title__has-upsell {
2505 gap: 7px !important;
2506 }
2507 .merchant-module-page-setting-field-title__has-upsell,
2508 .merchant-module-page-setting-field-title__has-upsell a span {
2509 display: -webkit-box;
2510 display: -ms-flexbox;
2511 display: flex;
2512 -webkit-box-align: center;
2513 -ms-flex-align: center;
2514 align-items: center;
2515 }
2516
2517 .merchant-module-page-setting-field-desc {
2518 font-size: 13px;
2519 font-weight: 400;
2520 color: #777;
2521 }
2522 .merchant-module-page-setting-field-desc-has-hidden-desc {
2523 display: -webkit-box;
2524 display: -ms-flexbox;
2525 display: flex;
2526 gap: 5px;
2527 }
2528 .merchant-module-page-setting-field-desc a {
2529 color: #3858E9;
2530 }
2531 .merchant-module-page-setting-field-desc a:focus {
2532 -webkit-box-shadow: none;
2533 box-shadow: none;
2534 }
2535
2536 .merchant-module-page-setting-field-hidden-desc {
2537 display: none;
2538 }
2539 .merchant-module-page-setting-field-hidden-desc-trigger {
2540 color: #3858E9;
2541 font-weight: 500;
2542 display: -webkit-box;
2543 display: -ms-flexbox;
2544 display: flex;
2545 cursor: pointer;
2546 gap: 3px;
2547 }
2548 .merchant-module-page-setting-field-hidden-desc-trigger img {
2549 margin-top: 2px;
2550 }
2551 .merchant-module-page-setting-field-hidden-desc-trigger.expanded img {
2552 -webkit-transform: rotate(180deg);
2553 transform: rotate(180deg);
2554 }
2555
2556 .merchant-license-form-wrapper .merchant-license-form {
2557 display: -webkit-box;
2558 display: -ms-flexbox;
2559 display: flex;
2560 -ms-flex-wrap: wrap;
2561 flex-wrap: wrap;
2562 grid-gap: 10px;
2563 }
2564 .merchant-license-form-wrapper .merchant-license-form input {
2565 width: 400px;
2566 max-width: 100%;
2567 padding-left: 36px;
2568 min-height: 36px;
2569 }
2570 .merchant-license-form-wrapper .merchant-license-form input::-webkit-input-placeholder {
2571 opacity: 0.75;
2572 }
2573 .merchant-license-form-wrapper .merchant-license-form input::-moz-placeholder {
2574 opacity: 0.75;
2575 }
2576 .merchant-license-form-wrapper .merchant-license-form input:-ms-input-placeholder {
2577 opacity: 0.75;
2578 }
2579 .merchant-license-form-wrapper .merchant-license-form input::-ms-input-placeholder {
2580 opacity: 0.75;
2581 }
2582 .merchant-license-form-wrapper .merchant-license-form input::placeholder {
2583 opacity: 0.75;
2584 }
2585 .merchant-license-form-wrapper .merchant-license-form button {
2586 position: relative;
2587 display: -webkit-box;
2588 display: -ms-flexbox;
2589 display: flex;
2590 grid-gap: 2px;
2591 -webkit-box-align: center;
2592 -ms-flex-align: center;
2593 align-items: center;
2594 line-height: 1em;
2595 min-height: 36px;
2596 padding: 10px 40px !important;
2597 background-color: transparent;
2598 color: #3858E9;
2599 border-color: #3858E9;
2600 }
2601 .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 {
2602 color: #FFF;
2603 background-color: #3452da;
2604 border-color: #3452da;
2605 }
2606 .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate {
2607 color: #d82c0d;
2608 border-color: #d82c0d;
2609 }
2610 .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 {
2611 color: #FFF;
2612 background-color: #d82c0d;
2613 border-color: #d82c0d;
2614 }
2615 .merchant-license-form-wrapper .merchant-license-key-input {
2616 position: relative;
2617 display: -webkit-box;
2618 display: -ms-flexbox;
2619 display: flex;
2620 }
2621 @media (max-width: 768px) {
2622 .merchant-license-form-wrapper .merchant-license-key-input {
2623 max-width: 100%;
2624 }
2625 }
2626 .merchant-license-form-wrapper .merchant-license-key-input i {
2627 position: absolute;
2628 z-index: 1;
2629 top: 50%;
2630 left: 10px;
2631 -webkit-transform: translateY(-50%);
2632 transform: translateY(-50%);
2633 margin-top: -1px;
2634 font-size: 20px !important;
2635 color: #5C5F62;
2636 }
2637
2638 .mechant-license-response-wrapper,
2639 .merchant-dashboard-license-success {
2640 display: block;
2641 margin-top: 10px;
2642 color: #757575;
2643 }
2644 .mechant-license-response-wrapper span,
2645 .merchant-dashboard-license-success span {
2646 margin-left: 5px;
2647 }
2648
2649 .merchant-datetime-field input,
2650 .merchant-module-page-setting-field-text input,
2651 .merchant-module-page-setting-field-number input,
2652 .merchant-module-page-setting-field-text_readonly input {
2653 padding: 12px;
2654 line-height: 1.3em;
2655 width: 100%;
2656 max-width: 100%;
2657 min-height: auto;
2658 border: 1px solid #D6D6D6;
2659 }
2660 .merchant-datetime-field input:focus,
2661 .merchant-module-page-setting-field-text input:focus,
2662 .merchant-module-page-setting-field-number input:focus,
2663 .merchant-module-page-setting-field-text_readonly input:focus {
2664 outline: none;
2665 -webkit-box-shadow: none;
2666 box-shadow: none;
2667 border-color: #3858E9;
2668 }
2669
2670 .merchant-module-page-setting-field-textarea_multiline textarea,
2671 .merchant-module-page-setting-field-textarea textarea,
2672 .merchant-module-page-setting-field-textarea_code textarea {
2673 padding: 12px;
2674 line-height: 1.4;
2675 width: 100%;
2676 max-width: 100%;
2677 min-height: 120px;
2678 border: 1px solid #D6D6D6;
2679 }
2680 .merchant-module-page-setting-field-textarea_multiline textarea:focus,
2681 .merchant-module-page-setting-field-textarea textarea:focus,
2682 .merchant-module-page-setting-field-textarea_code textarea:focus {
2683 outline: none;
2684 -webkit-box-shadow: none;
2685 box-shadow: none;
2686 border-color: #3858E9;
2687 }
2688
2689 .merchant-code-snippets-textarea textarea,
2690 .merchant-code-snippets-textarea_code textarea {
2691 min-height: 200px;
2692 }
2693
2694 .merchant-module-page-setting-field-radio div:not(.merchant-module-page-setting-field-desc),
2695 .merchant-module-page-setting-field-radio_alt div:not(.merchant-module-page-setting-field-desc),
2696 .merchant-module-page-setting-field-checkbox div:not(.merchant-module-page-setting-field-desc),
2697 .merchant-module-page-setting-field-checkbox_multiple div:not(.merchant-module-page-setting-field-desc) {
2698 display: -webkit-box;
2699 display: -ms-flexbox;
2700 display: flex;
2701 grid-gap: 30px;
2702 }
2703 .merchant-module-page-setting-field-radio label,
2704 .merchant-module-page-setting-field-radio_alt label,
2705 .merchant-module-page-setting-field-checkbox label,
2706 .merchant-module-page-setting-field-checkbox_multiple label {
2707 display: -webkit-box;
2708 display: -ms-flexbox;
2709 display: flex;
2710 grid-gap: 12px;
2711 -webkit-box-align: center;
2712 -ms-flex-align: center;
2713 align-items: center;
2714 -webkit-user-select: none;
2715 -moz-user-select: none;
2716 -ms-user-select: none;
2717 user-select: none;
2718 }
2719 .merchant-module-page-setting-field-radio span,
2720 .merchant-module-page-setting-field-radio_alt span,
2721 .merchant-module-page-setting-field-checkbox span,
2722 .merchant-module-page-setting-field-checkbox_multiple span {
2723 font-size: 14px;
2724 font-weight: 400;
2725 color: #1D2327;
2726 }
2727 .merchant-module-page-setting-field-radio input,
2728 .merchant-module-page-setting-field-radio_alt input,
2729 .merchant-module-page-setting-field-checkbox input,
2730 .merchant-module-page-setting-field-checkbox_multiple input {
2731 -ms-flex-negative: 0;
2732 flex-shrink: 0;
2733 margin: 0;
2734 width: 20px;
2735 height: 20px;
2736 border: 1px solid #D6D6D6;
2737 background-color: #fff;
2738 display: -webkit-inline-box;
2739 display: -ms-inline-flexbox;
2740 display: inline-flex;
2741 -webkit-box-align: center;
2742 -ms-flex-align: center;
2743 align-items: center;
2744 -webkit-box-pack: center;
2745 -ms-flex-pack: center;
2746 justify-content: center;
2747 -webkit-transition: none;
2748 transition: none;
2749 -webkit-box-sizing: border-box;
2750 box-sizing: border-box;
2751 -webkit-box-shadow: none;
2752 box-shadow: none;
2753 }
2754 .merchant-module-page-setting-field-radio input:checked,
2755 .merchant-module-page-setting-field-radio_alt input:checked,
2756 .merchant-module-page-setting-field-checkbox input:checked,
2757 .merchant-module-page-setting-field-checkbox_multiple input:checked {
2758 -webkit-transition: none;
2759 transition: none;
2760 }
2761 .merchant-module-page-setting-field-radio input:checked::before,
2762 .merchant-module-page-setting-field-radio_alt input:checked::before,
2763 .merchant-module-page-setting-field-checkbox input:checked::before,
2764 .merchant-module-page-setting-field-checkbox_multiple input:checked::before {
2765 content: "";
2766 margin: 0;
2767 padding: 0;
2768 -webkit-box-sizing: border-box;
2769 box-sizing: border-box;
2770 -webkit-transition: none;
2771 transition: none;
2772 }
2773 .merchant-module-page-setting-field-radio input[type=checkbox],
2774 .merchant-module-page-setting-field-radio_alt input[type=checkbox],
2775 .merchant-module-page-setting-field-checkbox input[type=checkbox],
2776 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox] {
2777 border-radius: 6px;
2778 }
2779 .merchant-module-page-setting-field-radio input[type=checkbox]:focus,
2780 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus,
2781 .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus,
2782 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:focus {
2783 border-color: #fff;
2784 -webkit-box-shadow: 0 0 0 2px #3858E9;
2785 box-shadow: 0 0 0 2px #3858E9;
2786 }
2787 .merchant-module-page-setting-field-radio input[type=checkbox]:checked,
2788 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked,
2789 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked,
2790 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked {
2791 border-color: #fff;
2792 background-color: #3858E9;
2793 }
2794 .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before,
2795 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before,
2796 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before,
2797 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked::before {
2798 width: 100%;
2799 height: 100%;
2800 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");
2801 background-repeat: no-repeat;
2802 background-position: 3px 4px;
2803 }
2804 .merchant-module-page-setting-field-radio input[type=radio],
2805 .merchant-module-page-setting-field-radio_alt input[type=radio],
2806 .merchant-module-page-setting-field-checkbox input[type=radio],
2807 .merchant-module-page-setting-field-checkbox_multiple input[type=radio] {
2808 border-radius: 100%;
2809 }
2810 .merchant-module-page-setting-field-radio input[type=radio]:focus,
2811 .merchant-module-page-setting-field-radio_alt input[type=radio]:focus,
2812 .merchant-module-page-setting-field-checkbox input[type=radio]:focus,
2813 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:focus {
2814 border-color: #fff;
2815 -webkit-box-shadow: none;
2816 box-shadow: none;
2817 }
2818 .merchant-module-page-setting-field-radio input[type=radio]:checked,
2819 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked,
2820 .merchant-module-page-setting-field-checkbox input[type=radio]:checked,
2821 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked {
2822 border-color: #3858E9;
2823 background-color: #fff;
2824 -webkit-box-shadow: 0 0 0 1px #3858E9;
2825 box-shadow: 0 0 0 1px #3858E9;
2826 }
2827 .merchant-module-page-setting-field-radio input[type=radio]:checked::before,
2828 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before,
2829 .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before,
2830 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked::before {
2831 width: 12px;
2832 height: 12px;
2833 border-radius: 12px;
2834 background-color: #3858E9;
2835 }
2836
2837 .merchant-module-page-setting-field-checkbox_multiple div {
2838 grid-gap: 0;
2839 }
2840 .merchant-module-page-setting-field-checkbox_multiple .merchant-module-page-setting-field-inner {
2841 display: -webkit-box;
2842 display: -ms-flexbox;
2843 display: flex;
2844 -webkit-box-orient: vertical;
2845 -webkit-box-direction: normal;
2846 -ms-flex-direction: column;
2847 flex-direction: column;
2848 gap: 15px !important;
2849 }
2850
2851 @media (max-width: 1300px) {
2852 .merchant-module-page-setting-field-radio div {
2853 grid-gap: 20px;
2854 }
2855 }
2856 .merchant-module-page-setting-field-radio span {
2857 opacity: 0.8;
2858 }
2859 .merchant-module-page-setting-field-radio input[type=radio]:checked + span {
2860 opacity: 1;
2861 }
2862
2863 .merchant-module-page-setting-field-radio_alt div {
2864 display: -webkit-box;
2865 display: -ms-flexbox;
2866 display: flex;
2867 grid-gap: 10px;
2868 -webkit-box-orient: vertical;
2869 -webkit-box-direction: normal;
2870 -ms-flex-direction: column;
2871 flex-direction: column;
2872 }
2873 .merchant-module-page-setting-field-radio_alt label span {
2874 font-size: 14px;
2875 font-weight: 400;
2876 color: #1D2327;
2877 }
2878 .merchant-module-page-setting-field-radio_alt p {
2879 margin: 0;
2880 color: #757575;
2881 }
2882 .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner {
2883 grid-gap: 30px;
2884 -webkit-box-orient: vertical;
2885 -webkit-box-direction: normal;
2886 -ms-flex-direction: column;
2887 flex-direction: column;
2888 }
2889
2890 .merchant-module-page-setting-field-content {
2891 max-width: 60vw;
2892 }
2893 .merchant-module-page-setting-field-content a {
2894 color: #3858E9;
2895 }
2896 .merchant-module-page-setting-field-content a:focus {
2897 -webkit-box-shadow: none;
2898 box-shadow: none;
2899 }
2900 .merchant-module-page-setting-field-content .merchant-module-page-setting-field-inner:empty {
2901 display: none;
2902 }
2903
2904 .merchant-info-block,
2905 .merchant-tag-pre-orders {
2906 display: -webkit-box;
2907 display: -ms-flexbox;
2908 display: flex;
2909 grid-gap: 16px;
2910 }
2911 .merchant-info-block a,
2912 .merchant-tag-pre-orders a {
2913 display: -webkit-box;
2914 display: -ms-flexbox;
2915 display: flex;
2916 -webkit-box-align: center;
2917 -ms-flex-align: center;
2918 align-items: center;
2919 -webkit-box-pack: center;
2920 -ms-flex-pack: center;
2921 justify-content: center;
2922 margin: 0;
2923 padding: 8px 26px;
2924 font-size: 14px;
2925 line-height: 20px;
2926 -webkit-user-select: none;
2927 -moz-user-select: none;
2928 -ms-user-select: none;
2929 user-select: none;
2930 min-width: 145px;
2931 font-weight: 500;
2932 text-decoration: none;
2933 border-radius: 4px;
2934 color: #202223;
2935 border: 1px solid #C9CCCF;
2936 background-color: #fff;
2937 }
2938 .merchant-info-block a:focus, .merchant-info-block a:active,
2939 .merchant-tag-pre-orders a:focus,
2940 .merchant-tag-pre-orders a:active {
2941 outline: none;
2942 -webkit-box-shadow: none;
2943 box-shadow: none;
2944 }
2945 .merchant-info-block p,
2946 .merchant-tag-pre-orders p {
2947 display: -webkit-box;
2948 display: -ms-flexbox;
2949 display: flex;
2950 -webkit-box-orient: vertical;
2951 -webkit-box-direction: normal;
2952 -ms-flex-direction: column;
2953 flex-direction: column;
2954 -webkit-box-align: start;
2955 -ms-flex-align: start;
2956 align-items: flex-start;
2957 grid-gap: 16px;
2958 font-size: 14px;
2959 line-height: 20px;
2960 margin: 0;
2961 padding: 0;
2962 }
2963 .merchant-info-block p i,
2964 .merchant-tag-pre-orders p i {
2965 -ms-flex-negative: 0;
2966 flex-shrink: 0;
2967 }
2968
2969 .merchant-info-block {
2970 padding: 15px;
2971 border-radius: 4px;
2972 border: 1px solid #BABFC3;
2973 }
2974
2975 .merchant-module-page-setting-field-select select,
2976 .merchant-module-page-setting-field-select_ajax select,
2977 .merchant-module-page-setting-field-select_size_chart select {
2978 padding: 12px 20px 12px 12px;
2979 line-height: 1.3em;
2980 width: 100%;
2981 max-width: 100%;
2982 min-height: auto;
2983 border-radius: 6px;
2984 color: #2F2F2F;
2985 border: 1px solid #D6D6D6;
2986 }
2987 .merchant-module-page-setting-field-select select:hover,
2988 .merchant-module-page-setting-field-select_ajax select:hover,
2989 .merchant-module-page-setting-field-select_size_chart select:hover {
2990 color: #2F2F2F;
2991 }
2992 .merchant-module-page-setting-field-select select:focus,
2993 .merchant-module-page-setting-field-select_ajax select:focus,
2994 .merchant-module-page-setting-field-select_size_chart select:focus {
2995 outline: none;
2996 -webkit-box-shadow: none;
2997 box-shadow: none;
2998 border-color: #3858E9;
2999 }
3000 .merchant-module-page-setting-field-select select option,
3001 .merchant-module-page-setting-field-select_ajax select option,
3002 .merchant-module-page-setting-field-select_size_chart select option {
3003 color: #2F2F2F;
3004 }
3005 .merchant-module-page-setting-field-select .select2-container .select2-selection--single,
3006 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single,
3007 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single {
3008 height: 44px !important;
3009 border: solid #d6d6d6 1px;
3010 }
3011 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
3012 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
3013 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
3014 line-height: 41px !important;
3015 }
3016 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple,
3017 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple,
3018 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple {
3019 display: -webkit-box;
3020 display: -ms-flexbox;
3021 display: flex;
3022 -webkit-box-align: center;
3023 -ms-flex-align: center;
3024 align-items: center;
3025 border: solid #d6d6d6 1px;
3026 }
3027 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__rendered,
3028 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__rendered,
3029 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__rendered {
3030 padding: 5px 10px;
3031 }
3032 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice,
3033 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice,
3034 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice {
3035 margin-top: 6px;
3036 margin-bottom: 0;
3037 }
3038 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3039 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3040 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field {
3041 position: relative;
3042 top: 3px;
3043 margin-top: 0;
3044 }
3045 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-search__field,
3046 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-search__field,
3047 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-search__field {
3048 min-height: 0;
3049 border: none;
3050 }
3051 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--single,
3052 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--multiple,
3053 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--single,
3054 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--multiple,
3055 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--single,
3056 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--multiple {
3057 border-color: #3858E9;
3058 }
3059 .merchant-module-page-setting-field-select .select2-selection__arrow,
3060 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
3061 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
3062 height: 43px !important;
3063 }
3064
3065 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper {
3066 display: -webkit-box;
3067 display: -ms-flexbox;
3068 display: flex;
3069 grid-gap: 15px;
3070 }
3071 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select {
3072 width: 100%;
3073 }
3074 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number {
3075 width: 100px;
3076 }
3077
3078 .merchant-module-page-setting-field-choices input {
3079 display: none;
3080 }
3081 .merchant-module-page-setting-field-choices input:checked + figure {
3082 border-color: #3858E9;
3083 }
3084 .merchant-module-page-setting-field-choices input:disabled + figure {
3085 opacity: 0.5;
3086 cursor: not-allowed;
3087 }
3088 .merchant-module-page-setting-field-choices label {
3089 display: -webkit-box;
3090 display: -ms-flexbox;
3091 display: flex;
3092 position: relative;
3093 }
3094 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
3095 opacity: 1;
3096 visibility: visible;
3097 -webkit-transform: translate3d(-50%, 0, 0);
3098 transform: translate3d(-50%, 0, 0);
3099 }
3100 .merchant-module-page-setting-field-choices figure {
3101 display: -webkit-box;
3102 display: -ms-flexbox;
3103 display: flex;
3104 margin: 0;
3105 padding: 2px;
3106 border-radius: 4px;
3107 border: 2px solid transparent;
3108 }
3109 .merchant-module-page-setting-field-choices .merchant-tooltip {
3110 position: absolute;
3111 z-index: 10;
3112 left: 50%;
3113 bottom: calc(100% + 12px);
3114 padding: 3px 12px;
3115 font-size: 11px;
3116 white-space: nowrap;
3117 opacity: 0;
3118 visibility: hidden;
3119 -webkit-transform: translate3d(-50%, 6px, 0);
3120 transform: translate3d(-50%, 6px, 0);
3121 -webkit-transition: all 0.2s;
3122 transition: all 0.2s;
3123 border-radius: 3px;
3124 color: #f7f7f7;
3125 background-color: #212121;
3126 }
3127 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
3128 content: "";
3129 position: absolute;
3130 left: 50%;
3131 bottom: -12px;
3132 border: 6px solid transparent;
3133 border-top-color: #212121;
3134 -webkit-transform: translate3d(-50%, 0, 0);
3135 transform: translate3d(-50%, 0, 0);
3136 }
3137 .merchant-module-page-setting-field-choices .merchant-choices {
3138 display: -webkit-box;
3139 display: -ms-flexbox;
3140 display: flex;
3141 grid-gap: 10px;
3142 }
3143 .merchant-module-page-setting-field-choices .merchant-choices label {
3144 cursor: pointer;
3145 }
3146 .merchant-module-page-setting-field-choices .merchant-choices svg {
3147 width: 20px;
3148 height: 20px;
3149 }
3150
3151 .merchant-module-page-setting-field-buttons input {
3152 display: none;
3153 }
3154 .merchant-module-page-setting-field-buttons input:checked + span {
3155 color: #fff;
3156 background-color: #3858E9;
3157 }
3158 .merchant-module-page-setting-field-buttons label {
3159 display: -webkit-box;
3160 display: -ms-flexbox;
3161 display: flex;
3162 }
3163 .merchant-module-page-setting-field-buttons span {
3164 display: -webkit-box;
3165 display: -ms-flexbox;
3166 display: flex;
3167 -webkit-box-align: center;
3168 -ms-flex-align: center;
3169 align-items: center;
3170 -webkit-box-pack: center;
3171 -ms-flex-pack: center;
3172 justify-content: center;
3173 margin: 0;
3174 padding: 10px 15px;
3175 border-radius: 2px;
3176 -webkit-user-select: none;
3177 -moz-user-select: none;
3178 -ms-user-select: none;
3179 user-select: none;
3180 min-width: 120px;
3181 font-weight: 500;
3182 }
3183 .merchant-module-page-setting-field-buttons .merchant-buttons {
3184 display: -webkit-inline-box;
3185 display: -ms-inline-flexbox;
3186 display: inline-flex;
3187 padding: 3px;
3188 border: 1px solid #D6D6D6;
3189 border-radius: 4px;
3190 }
3191 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
3192 text-decoration: underline;
3193 }
3194 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
3195 text-decoration: line-through;
3196 }
3197 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
3198 text-decoration: overline;
3199 }
3200
3201 .merchant-module-page-setting-field-buttons_content input,
3202 .merchant-module-page-setting-field-buttons_alt input {
3203 display: none;
3204 }
3205 .merchant-module-page-setting-field-buttons_content label,
3206 .merchant-module-page-setting-field-buttons_alt label {
3207 display: -webkit-box;
3208 display: -ms-flexbox;
3209 display: flex;
3210 cursor: pointer;
3211 }
3212 .merchant-module-page-setting-field-buttons_content label:hover,
3213 .merchant-module-page-setting-field-buttons_alt label:hover {
3214 position: relative;
3215 z-index: 10;
3216 }
3217 .merchant-module-page-setting-field-buttons_content label > span,
3218 .merchant-module-page-setting-field-buttons_alt label > span {
3219 display: -webkit-box;
3220 display: -ms-flexbox;
3221 display: flex;
3222 -webkit-box-align: center;
3223 -ms-flex-align: center;
3224 align-items: center;
3225 -webkit-box-pack: center;
3226 -ms-flex-pack: center;
3227 justify-content: center;
3228 margin: 0;
3229 padding: 10px 15px;
3230 -webkit-user-select: none;
3231 -moz-user-select: none;
3232 -ms-user-select: none;
3233 user-select: none;
3234 min-width: 120px;
3235 font-weight: 500;
3236 border-radius: 4px;
3237 border: 1px solid #D6D6D6;
3238 background-color: #fff;
3239 }
3240 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content,
3241 .merchant-module-page-setting-field-buttons_content .merchant-buttons,
3242 .merchant-module-page-setting-field-buttons_alt .merchant-buttons-content,
3243 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
3244 display: -webkit-box;
3245 display: -ms-flexbox;
3246 display: flex;
3247 -ms-flex-wrap: wrap;
3248 flex-wrap: wrap;
3249 grid-gap: 5px;
3250 padding: 3px;
3251 }
3252
3253 .merchant-module-page-setting-field-buttons_alt input:checked + span {
3254 color: #fff;
3255 background-color: #3858E9;
3256 }
3257
3258 .merchant-module-page-setting-field-buttons_content input:checked + span {
3259 color: inherit;
3260 border: 1px solid #3858E9;
3261 -webkit-box-shadow: 0 0 0 1px #3858e9 inset;
3262 box-shadow: 0 0 0 1px #3858e9 inset;
3263 }
3264 .merchant-module-page-setting-field-buttons_content label {
3265 -webkit-box-flex: 1;
3266 -ms-flex: 1;
3267 flex: 1;
3268 }
3269 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content {
3270 gap: 10px;
3271 }
3272 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content {
3273 display: -webkit-box;
3274 display: -ms-flexbox;
3275 display: flex;
3276 -webkit-box-align: center;
3277 -ms-flex-align: center;
3278 align-items: center;
3279 -webkit-box-pack: start;
3280 -ms-flex-pack: start;
3281 justify-content: flex-start;
3282 gap: 10px;
3283 -webkit-box-flex: 1;
3284 -ms-flex: 1;
3285 flex: 1;
3286 }
3287 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content > span {
3288 display: -webkit-box;
3289 display: -ms-flexbox;
3290 display: flex;
3291 -ms-flex-item-align: stretch;
3292 align-self: stretch;
3293 -webkit-box-orient: vertical;
3294 -webkit-box-direction: normal;
3295 -ms-flex-direction: column;
3296 flex-direction: column;
3297 gap: 5px;
3298 }
3299
3300 .merchant-animated-buttons .merchant-buttons {
3301 display: grid;
3302 grid-template-columns: repeat(5, 1fr);
3303 }
3304 .merchant-animated-buttons span {
3305 width: 100%;
3306 }
3307
3308 @media (max-width: 1470px) {
3309 .merchant-animated-buttons .merchant-buttons {
3310 grid-template-columns: repeat(3, 1fr);
3311 }
3312 }
3313 @media (max-width: 1050px) {
3314 .merchant-animated-buttons .merchant-buttons {
3315 grid-template-columns: repeat(2, 1fr);
3316 }
3317 }
3318 /* Sortable Field */
3319 .merchant-sortable {
3320 max-width: 300px;
3321 }
3322 .merchant-sortable ul.ui-sortable li {
3323 position: relative;
3324 overflow: hidden;
3325 padding: 0;
3326 color: #1E1E1E;
3327 border: 1px solid #ddd;
3328 border-radius: 2px;
3329 text-transform: capitalize;
3330 line-height: 36px;
3331 cursor: -webkit-grab;
3332 cursor: grab;
3333 }
3334 .merchant-sortable ul.ui-sortable li .dashicons {
3335 width: 36px;
3336 height: 36px;
3337 -ms-flex-preferred-size: 36px;
3338 flex-basis: 36px;
3339 display: -webkit-box;
3340 display: -ms-flexbox;
3341 display: flex;
3342 -webkit-box-pack: center;
3343 -ms-flex-pack: center;
3344 justify-content: center;
3345 -webkit-box-align: center;
3346 -ms-flex-align: center;
3347 align-items: center;
3348 text-align: center;
3349 -webkit-box-sizing: border-box;
3350 box-sizing: border-box;
3351 }
3352 .merchant-sortable ul.ui-sortable li .dashicons:before {
3353 font-size: 16px;
3354 line-height: 1em;
3355 }
3356 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
3357 float: left;
3358 padding: 0;
3359 margin: 0 10px 0 0;
3360 border: none;
3361 border-right: 1px solid #ddd;
3362 }
3363 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
3364 float: right;
3365 color: #3858E9;
3366 padding: 0;
3367 margin: 0 0 0 10px;
3368 border: none;
3369 border-left: 1px solid #ddd;
3370 }
3371 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
3372 cursor: pointer;
3373 }
3374 .merchant-sortable ul.ui-sortable li.invisible {
3375 color: #6E7780;
3376 border: 1px solid #CAD2F6;
3377 background-color: #EBEEFB;
3378 }
3379 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
3380 content: "\f530";
3381 }
3382
3383 /* Sortable Repeater Field */
3384 .merchant-group-field {
3385 padding: 30px 20px;
3386 border: 2px solid #F0F0F1;
3387 border-radius: 4px;
3388 margin-bottom: 20px;
3389 }
3390 .merchant-group-field .title-area {
3391 position: relative;
3392 }
3393 .merchant-group-field .title-area .merchant-module-page-setting-field-title {
3394 margin-bottom: 10px;
3395 }
3396 .merchant-group-field .title-area .field-status:not(.hidden) {
3397 border-radius: 15px;
3398 padding: 3px 8px;
3399 font-size: 12px;
3400 margin-left: 20px;
3401 }
3402 .merchant-group-field .title-area .field-status:not(.hidden).active {
3403 color: #04543F;
3404 background-color: #DEF7EC;
3405 }
3406 .merchant-group-field .title-area .field-status:not(.hidden).inactive {
3407 color: #723B14;
3408 background-color: #FDF6B2;
3409 }
3410 .merchant-group-field .title-area.accordion-style {
3411 padding-right: 40px;
3412 }
3413 .merchant-group-field .title-area.accordion-style .accordion-icon {
3414 position: absolute;
3415 top: 0;
3416 right: -7px;
3417 width: 40px;
3418 height: 40px;
3419 line-height: 40px;
3420 cursor: pointer;
3421 font-size: 17px;
3422 -webkit-transition: 300ms;
3423 transition: 300ms;
3424 }
3425 .merchant-group-field .title-area.accordion-style.ui-accordion-header-active .accordion-icon {
3426 -webkit-transform: rotate(180deg);
3427 transform: rotate(180deg);
3428 }
3429 .merchant-group-field .merchant-group-fields-container {
3430 padding-top: 20px;
3431 }
3432 .merchant-group-field .merchant-module-page-setting-field:last-child {
3433 margin-bottom: 0 !important;
3434 }
3435
3436 .merchant-sortable-repeater-control {
3437 max-width: 100%;
3438 }
3439 .merchant-sortable-repeater-control .sortable {
3440 list-style-type: none;
3441 margin: 0;
3442 padding: 0;
3443 }
3444 .merchant-sortable-repeater-control .sortable input[type=text] {
3445 width: 100%;
3446 margin: 0;
3447 border-radius: 4px 0 0 4px;
3448 border: 1px solid #D6D6D6;
3449 padding: 12px 8px;
3450 line-height: 1.3em;
3451 }
3452 .merchant-sortable-repeater-control .sortable input[type=text]:focus {
3453 border-color: #3858E9;
3454 outline: none;
3455 -webkit-box-shadow: none;
3456 box-shadow: none;
3457 }
3458 .merchant-sortable-repeater-control .sortable div {
3459 cursor: -webkit-grab;
3460 cursor: grab;
3461 margin-bottom: 7px;
3462 }
3463 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete {
3464 display: -webkit-box;
3465 display: -ms-flexbox;
3466 display: flex;
3467 -webkit-box-align: center;
3468 -ms-flex-align: center;
3469 align-items: center;
3470 -webkit-box-pack: center;
3471 -ms-flex-pack: center;
3472 justify-content: center;
3473 margin: 0;
3474 width: 44px;
3475 height: auto;
3476 font-size: 1.3em;
3477 line-height: 34px;
3478 color: #d4d4d4;
3479 background: #fff;
3480 padding: 0;
3481 vertical-align: top;
3482 margin-left: -1px;
3483 border: 1px solid #D6D6D6;
3484 text-decoration: none;
3485 }
3486 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt {
3487 width: 100%;
3488 text-decoration: none;
3489 margin: 0;
3490 font-weight: 600;
3491 color: #50575e;
3492 font-size: 1.1em;
3493 line-height: 34px;
3494 height: auto;
3495 }
3496 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus {
3497 outline: none;
3498 -webkit-box-shadow: none;
3499 box-shadow: none;
3500 }
3501 .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 {
3502 color: #a7a7a7;
3503 }
3504 .merchant-sortable-repeater-control .repeater {
3505 display: -webkit-box;
3506 display: -ms-flexbox;
3507 display: flex;
3508 }
3509 .merchant-sortable-repeater-control .repeater .dashicons-menu {
3510 display: -webkit-box;
3511 display: -ms-flexbox;
3512 display: flex;
3513 -webkit-box-align: center;
3514 -ms-flex-align: center;
3515 align-items: center;
3516 -webkit-box-pack: center;
3517 -ms-flex-pack: center;
3518 justify-content: center;
3519 margin: 0;
3520 width: 44px;
3521 height: auto;
3522 font-size: 1.3em;
3523 line-height: 34px;
3524 background: #fff;
3525 padding: 0;
3526 vertical-align: top;
3527 margin-left: -1px;
3528 border: 1px solid #D6D6D6;
3529 }
3530 .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
3531 color: #a7a7a7;
3532 }
3533 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add {
3534 color: #3858E9;
3535 border-color: #3858E9;
3536 background-color: transparent;
3537 margin-top: 10px;
3538 padding: 4px 19px;
3539 }
3540 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus {
3541 outline: none;
3542 -webkit-box-shadow: none;
3543 box-shadow: none;
3544 background-color: #ffffff;
3545 }
3546 .merchant-sortable-repeater-control.disable-sorting .dashicons-menu {
3547 display: none;
3548 }
3549
3550 /* Flexible Content Field */
3551 .merchant-flexible-content-control {
3552 max-width: 100%;
3553 }
3554 .merchant-flexible-content-control .layout {
3555 position: relative;
3556 }
3557 .merchant-flexible-content-control .sortable {
3558 position: relative;
3559 list-style-type: none;
3560 margin: 0;
3561 padding: 0;
3562 }
3563 .merchant-flexible-content-control .sortable input[type=text] {
3564 width: 100%;
3565 margin: 0;
3566 border-radius: 4px 0 0 4px;
3567 border: 1px solid #D6D6D6;
3568 padding: 8px;
3569 line-height: 1.3em;
3570 }
3571 .merchant-flexible-content-control .sortable input[type=text]:focus {
3572 border-color: #3858E9;
3573 outline: none;
3574 -webkit-box-shadow: none;
3575 box-shadow: none;
3576 }
3577 .merchant-flexible-content-control .customize-control-flexible-content-move {
3578 display: none;
3579 cursor: -webkit-grab;
3580 cursor: grab;
3581 position: absolute;
3582 top: 19px;
3583 left: -22px;
3584 z-index: 999;
3585 }
3586 .merchant-flexible-content-control .customize-control-flexible-content-delete,
3587 .merchant-flexible-content-control .customize-control-flexible-content-duplicate {
3588 text-decoration: none;
3589 }
3590 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt,
3591 .merchant-flexible-content-control .customize-control-flexible-content-duplicate .dashicons-no-alt {
3592 width: 100%;
3593 text-decoration: none;
3594 margin: 0;
3595 font-weight: 600;
3596 color: #50575e;
3597 font-size: 1.1em;
3598 line-height: 34px;
3599 height: auto;
3600 }
3601 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus,
3602 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover,
3603 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus {
3604 outline: none;
3605 -webkit-box-shadow: none;
3606 box-shadow: none;
3607 }
3608 .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,
3609 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover .dashicons-no-alt,
3610 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus .dashicons-no-alt {
3611 color: #a7a7a7;
3612 }
3613 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover svg, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus svg,
3614 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover svg,
3615 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus svg {
3616 fill: #a7a7a7;
3617 }
3618 .merchant-flexible-content-control .customize-control-flexible-content-accordion {
3619 display: -webkit-box;
3620 display: -ms-flexbox;
3621 display: flex;
3622 -webkit-box-align: center;
3623 -ms-flex-align: center;
3624 align-items: center;
3625 -webkit-box-pack: end;
3626 -ms-flex-pack: end;
3627 justify-content: flex-end;
3628 margin: 0;
3629 width: 40px;
3630 height: auto;
3631 font-size: 1.5em;
3632 line-height: 34px;
3633 color: #50575e;
3634 background: #fff;
3635 padding: 0;
3636 vertical-align: top;
3637 cursor: pointer;
3638 }
3639 .merchant-flexible-content-control .customize-control-flexible-content-accordion svg {
3640 -webkit-transition: 300ms;
3641 transition: 300ms;
3642 -webkit-transform: rotate(180deg);
3643 transform: rotate(180deg);
3644 }
3645 .merchant-flexible-content-control .layout-header.ui-accordion-header-collapsed .customize-control-flexible-content-accordion svg {
3646 -webkit-transform: rotate(0deg);
3647 transform: rotate(0deg);
3648 }
3649 .merchant-flexible-content-control .merchant-flexible-content.empty {
3650 border: 2px dashed #dcdcde;
3651 min-height: 100px;
3652 margin-bottom: 10px;
3653 }
3654 .merchant-flexible-content-control.default-style .layout {
3655 background: white;
3656 border: 1px solid #c3c4c7;
3657 border-left: 3px solid #3858e9;
3658 }
3659 .merchant-flexible-content-control.default-style .layout .layout-header {
3660 padding: 15px 20px;
3661 }
3662 .merchant-flexible-content-control.default-style .layout .layout-body {
3663 padding: 15px 20px;
3664 }
3665 .merchant-flexible-content-control.default-style .layout .layout-body .layout-field:last-of-type .merchant-group-field {
3666 margin-bottom: 5px;
3667 }
3668 .merchant-flexible-content-control.table-style .layout .layout-header {
3669 padding-bottom: 8px;
3670 margin-bottom: 15px;
3671 }
3672 .merchant-flexible-content-control.table-style .layout .layout-body {
3673 -webkit-box-orient: horizontal;
3674 -webkit-box-direction: normal;
3675 -ms-flex-direction: row;
3676 flex-direction: row;
3677 }
3678 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
3679 display: none;
3680 }
3681 .merchant-flexible-content-control.has-accordion .layout-header {
3682 cursor: pointer;
3683 }
3684 .merchant-flexible-content-control .layouts {
3685 display: none;
3686 }
3687 .merchant-flexible-content-control .layout {
3688 margin-bottom: 20px;
3689 }
3690 .merchant-flexible-content-control .layout .layout__inner {
3691 width: calc(100% + 60px);
3692 margin-left: -30px;
3693 padding-inline: 30px;
3694 }
3695 .merchant-flexible-content-control .layout .layout__inner:hover .customize-control-flexible-content-move {
3696 display: block;
3697 }
3698 .merchant-flexible-content-control .layout .layout-header {
3699 display: -webkit-box;
3700 display: -ms-flexbox;
3701 display: flex;
3702 -webkit-box-align: center;
3703 -ms-flex-align: center;
3704 align-items: center;
3705 border-bottom: 1px solid #f3f3f3;
3706 }
3707 .merchant-flexible-content-control .layout .layout-count {
3708 border-radius: 50%;
3709 width: 24px;
3710 height: 23px;
3711 border: 1px solid #949494;
3712 text-align: center;
3713 display: -webkit-box;
3714 display: -ms-flexbox;
3715 display: flex;
3716 -webkit-box-pack: center;
3717 -ms-flex-pack: center;
3718 justify-content: center;
3719 -webkit-box-orient: vertical;
3720 -webkit-box-direction: normal;
3721 -ms-flex-direction: column;
3722 flex-direction: column;
3723 font-size: 12px;
3724 font-weight: bold;
3725 margin-right: 10px;
3726 }
3727 .merchant-flexible-content-control .layout .layout-title {
3728 font-size: 14px;
3729 font-weight: bold;
3730 }
3731 .merchant-flexible-content-control .layout .layout-toggle {
3732 display: -webkit-box;
3733 display: -ms-flexbox;
3734 display: flex;
3735 margin: 0;
3736 padding: 0;
3737 -webkit-box-pack: end;
3738 -ms-flex-pack: end;
3739 justify-content: flex-end;
3740 -webkit-box-flex: 1;
3741 -ms-flex-positive: 1;
3742 flex-grow: 1;
3743 }
3744 .merchant-flexible-content-control .layout .layout-toggle span:hover {
3745 opacity: 0.6;
3746 }
3747 .merchant-flexible-content-control .layout .layout-body {
3748 display: -webkit-box;
3749 display: -ms-flexbox;
3750 display: flex;
3751 -webkit-box-orient: vertical;
3752 -webkit-box-direction: normal;
3753 -ms-flex-direction: column;
3754 flex-direction: column;
3755 }
3756 .merchant-flexible-content-control .layout .layout-actions {
3757 position: absolute;
3758 top: 15px;
3759 right: 22px;
3760 }
3761 .merchant-flexible-content-control .layout .layout-actions-has_accordion {
3762 right: 43px;
3763 }
3764 .merchant-flexible-content-control .layout .layout-actions-no_accordion {
3765 top: 0;
3766 right: 0;
3767 }
3768 .merchant-flexible-content-control .layout .layout-actions a:hover {
3769 opacity: 0.6;
3770 }
3771 .merchant-flexible-content-control .layout .layout-actions__toggle:focus {
3772 outline: none;
3773 -webkit-box-shadow: none;
3774 box-shadow: none;
3775 }
3776 .merchant-flexible-content-control .layout .layout-actions__inner {
3777 position: absolute;
3778 right: -5px;
3779 top: 25px;
3780 z-index: 99;
3781 font-size: 13px;
3782 padding: 7px 15px;
3783 min-width: 200px;
3784 background: #fff;
3785 border: 1px solid #DDDDDD;
3786 border-radius: 5px;
3787 }
3788 .merchant-flexible-content-control .layout .layout-actions__inner a {
3789 width: 100%;
3790 display: -webkit-box;
3791 display: -ms-flexbox;
3792 display: flex;
3793 padding: 10px 0;
3794 -webkit-box-align: center;
3795 -ms-flex-align: center;
3796 align-items: center;
3797 gap: 8px;
3798 }
3799 .merchant-flexible-content-control .layout .layout-actions__inner svg {
3800 width: 24px;
3801 height: 20px;
3802 }
3803 .merchant-flexible-content-control .layout .layout-actions__inner span {
3804 color: #1E1E1E;
3805 }
3806 .merchant-flexible-content-control .layout .layout-field.flex-grow {
3807 -webkit-box-flex: 1;
3808 -ms-flex-positive: 1;
3809 flex-grow: 1;
3810 }
3811 .merchant-flexible-content-control .layout .layout-field:last-of-type .merchant-module-page-setting-field {
3812 margin-bottom: 0;
3813 }
3814 .merchant-flexible-content-control .layout .dashicons-menu {
3815 display: -webkit-box;
3816 display: -ms-flexbox;
3817 display: flex;
3818 -webkit-box-align: center;
3819 -ms-flex-align: center;
3820 align-items: center;
3821 -webkit-box-pack: center;
3822 -ms-flex-pack: center;
3823 justify-content: center;
3824 margin: 0;
3825 width: 40px;
3826 height: auto;
3827 font-size: 1.3em;
3828 line-height: 34px;
3829 background: #fff;
3830 padding: 0;
3831 vertical-align: top;
3832 margin-left: -1px;
3833 }
3834 .merchant-flexible-content-control .layout .dashicons-menu:hover {
3835 color: #a7a7a7;
3836 }
3837 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
3838 position: relative;
3839 display: inline-block;
3840 }
3841 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
3842 opacity: 0;
3843 visibility: hidden;
3844 position: absolute;
3845 background-color: #ffffff;
3846 border: 1px solid #c3c4c7;
3847 border-left: 3px solid #3858e9;
3848 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3849 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3850 width: 180px;
3851 bottom: 100%;
3852 display: -webkit-box;
3853 display: -ms-flexbox;
3854 display: flex;
3855 -webkit-box-orient: vertical;
3856 -webkit-box-direction: normal;
3857 -ms-flex-direction: column;
3858 flex-direction: column;
3859 left: 50%;
3860 -webkit-transform: translate(-50%, 10px);
3861 transform: translate(-50%, 10px);
3862 padding: 3px 3px 3px 5px;
3863 }
3864 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
3865 z-index: 10;
3866 opacity: 1;
3867 visibility: visible;
3868 -webkit-transform: translate(-50%, -15px);
3869 transform: translate(-50%, -15px);
3870 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3871 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3872 }
3873 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
3874 right: calc(50% - 12px);
3875 bottom: -14px;
3876 border-width: 14px 14px 0 15px;
3877 border-color: #c3c4c7 transparent transparent transparent;
3878 }
3879 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3880 content: "";
3881 right: calc(50% - 10px);
3882 bottom: -12px;
3883 border-width: 12px 12px 0 13px;
3884 border-color: #ffffff transparent transparent transparent;
3885 }
3886 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3887 position: absolute;
3888 z-index: -1;
3889 content: "";
3890 border-style: solid;
3891 -webkit-transition-duration: 0.3s;
3892 transition-duration: 0.3s;
3893 transition-property: -webkit-transform;
3894 -webkit-transition-property: -webkit-transform;
3895 transition-property: transform;
3896 transition-property: transform, -webkit-transform;
3897 }
3898 .merchant-flexible-content-control .customize-control-flexible-content-add {
3899 display: block;
3900 -ms-flex-negative: 0;
3901 flex-shrink: 0;
3902 padding: 10px;
3903 text-decoration: none;
3904 }
3905 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
3906 background: #f0f0f1;
3907 }
3908 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
3909 color: #3858E9;
3910 border-color: #3858E9;
3911 background-color: transparent;
3912 margin-bottom: 0;
3913 padding: 4px 19px;
3914 }
3915 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
3916 outline: none;
3917 -webkit-box-shadow: none;
3918 box-shadow: none;
3919 background-color: #ffffff;
3920 }
3921 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
3922 display: none;
3923 }
3924 .merchant-flexible-content-control .merchant-datetime-field input {
3925 padding: 12px !important;
3926 line-height: 1.3em;
3927 width: 100%;
3928 max-width: 100%;
3929 min-height: auto;
3930 border: 1px solid #d6d6d6;
3931 border-radius: 4px !important;
3932 }
3933 .merchant-flexible-content-control .merchant-datetime-field input:focus {
3934 outline: none;
3935 -webkit-box-shadow: none;
3936 box-shadow: none;
3937 border-color: #3858E9;
3938 }
3939
3940 .flexible-content-template {
3941 display: none;
3942 }
3943
3944 .merchant-module-page-setting-field-range .merchant-range {
3945 position: relative;
3946 width: 100%;
3947 width: 300px;
3948 display: -webkit-box;
3949 display: -ms-flexbox;
3950 display: flex;
3951 -webkit-box-align: center;
3952 -ms-flex-align: center;
3953 align-items: center;
3954 -webkit-box-pack: justify;
3955 -ms-flex-pack: justify;
3956 justify-content: space-between;
3957 }
3958 .merchant-module-page-setting-field-range input[type=range] {
3959 -webkit-appearance: none;
3960 -moz-appearance: none;
3961 appearance: none;
3962 width: calc(100% - 105px);
3963 height: 2px;
3964 border-radius: 5px;
3965 outline: none;
3966 padding: 0;
3967 margin: 0;
3968 background-color: #ddd;
3969 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
3970 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
3971 }
3972 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb {
3973 -webkit-appearance: none;
3974 appearance: none;
3975 width: 15px;
3976 height: 15px;
3977 border-radius: 50%;
3978 background: #3858E9;
3979 cursor: pointer;
3980 -webkit-transition: background 0.15s ease-in-out;
3981 transition: background 0.15s ease-in-out;
3982 }
3983 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover {
3984 background: #3858E9;
3985 }
3986 .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb {
3987 background: #3858E9;
3988 }
3989 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb {
3990 width: 15px;
3991 height: 15px;
3992 border: 0;
3993 border-radius: 50%;
3994 background: #3858E9;
3995 cursor: pointer;
3996 -moz-transition: background 0.15s ease-in-out;
3997 transition: background 0.15s ease-in-out;
3998 }
3999 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover {
4000 background: #3858E9;
4001 }
4002 .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb {
4003 background: #3858E9;
4004 }
4005 .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb {
4006 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
4007 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
4008 }
4009 .merchant-module-page-setting-field-range input[type=range]::-moz-range-track {
4010 border: 0;
4011 background: #d7dcdf;
4012 }
4013 .merchant-module-page-setting-field-range input[type=number] {
4014 padding: 12px 25px 12px 10px;
4015 line-height: 1.3em;
4016 width: 100%;
4017 max-width: 85px;
4018 min-height: auto;
4019 border: 1px solid #D6D6D6;
4020 }
4021 .merchant-module-page-setting-field-range input[type=number]:focus {
4022 outline: none;
4023 -webkit-box-shadow: none;
4024 box-shadow: none;
4025 border-color: #3858E9;
4026 }
4027 .merchant-module-page-setting-field-range .merchant-range-unit {
4028 color: #3858E9;
4029 position: absolute;
4030 z-index: 1;
4031 right: 10px;
4032 font-size: 11px;
4033 line-height: 1em;
4034 }
4035
4036 .merchant-module-page-setting-field-color input {
4037 padding: 0 10px;
4038 line-height: 1em;
4039 width: 100%;
4040 max-width: 254px;
4041 min-height: auto;
4042 border: 1px solid #D6D6D6;
4043 }
4044 .merchant-module-page-setting-field-color input:focus {
4045 outline: none;
4046 -webkit-box-shadow: none;
4047 box-shadow: none;
4048 border-color: #3858E9;
4049 }
4050 .merchant-module-page-setting-field-color .merchant-color {
4051 display: -webkit-box;
4052 display: -ms-flexbox;
4053 display: flex;
4054 grid-gap: 10px;
4055 }
4056 .merchant-module-page-setting-field-color .merchant-color-picker {
4057 cursor: pointer;
4058 width: 36px;
4059 height: 36px;
4060 border: 1px solid rgba(0, 0, 0, 0.1);
4061 border-radius: 4px;
4062 }
4063
4064 .merchant-module-page-settings-dimensions {
4065 display: -webkit-box;
4066 display: -ms-flexbox;
4067 display: flex;
4068 grid-gap: 10px;
4069 }
4070 .merchant-module-page-settings-dimensions > div {
4071 display: -webkit-box;
4072 display: -ms-flexbox;
4073 display: flex;
4074 -webkit-box-orient: vertical;
4075 -webkit-box-direction: normal;
4076 -ms-flex-direction: column;
4077 flex-direction: column;
4078 }
4079 .merchant-module-page-settings-dimensions label {
4080 color: gray;
4081 font-size: 12px;
4082 margin-top: 7px;
4083 }
4084 .merchant-module-page-settings-dimensions input {
4085 max-width: 70px;
4086 width: 100%;
4087 font-size: 12px;
4088 border: 1px solid #D6D6D6;
4089 }
4090
4091 .merchant-module-page-setting-field-wc_coupons .merchant-wc-coupon-selector select {
4092 width: 300px;
4093 min-height: auto;
4094 border: 1px solid #D6D6D6;
4095 padding: 12px;
4096 line-height: 1.3em;
4097 border-radius: 6px;
4098 color: #2F2F2F;
4099 border: 1px solid #D6D6D6;
4100 }
4101
4102 .merchant-module-page-settings-unit {
4103 margin-bottom: 10px;
4104 }
4105 .merchant-module-page-settings-unit select {
4106 font-size: 13px;
4107 border: 0;
4108 }
4109
4110 .merchant-module-page-settings-devices {
4111 display: -webkit-box;
4112 display: -ms-flexbox;
4113 display: flex;
4114 -webkit-column-gap: 10px;
4115 -moz-column-gap: 10px;
4116 column-gap: 10px;
4117 -webkit-box-pack: end;
4118 -ms-flex-pack: end;
4119 justify-content: flex-end;
4120 }
4121 .merchant-module-page-settings-devices button {
4122 border: 0;
4123 background: transparent;
4124 padding: 0;
4125 cursor: pointer;
4126 }
4127 .merchant-module-page-settings-devices button.active {
4128 color: #3858e9;
4129 }
4130 .merchant-module-page-settings-devices button:hover {
4131 color: #3858e9;
4132 }
4133 .merchant-module-page-settings-devices button i {
4134 font-size: 14px;
4135 line-height: 20px;
4136 width: auto;
4137 }
4138
4139 .merchant-module-page-settings-device-container:not(.active) {
4140 display: none;
4141 }
4142
4143 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
4144 max-width: 320px;
4145 }
4146 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
4147 margin-bottom: -30px;
4148 margin-top: 0;
4149 }
4150
4151 .merchant-module-page-setting-field-warning {
4152 padding: 8px 10px;
4153 font-size: 14px;
4154 line-height: 1.6;
4155 color: #1D2327;
4156 border-radius: 4px;
4157 border: 1px solid #D72C0D;
4158 background-color: #FFF4F4;
4159 }
4160
4161 .merchant-module-page-setting-field-info {
4162 padding: 8px 10px;
4163 font-size: 14px;
4164 line-height: 1.6;
4165 color: #1D2327;
4166 border-radius: 4px;
4167 border: 1px solid #0d65d7;
4168 background-color: #e6effa;
4169 }
4170 .merchant-module-page-setting-field-info[data-id=shortcode_info] {
4171 margin-bottom: 0;
4172 }
4173
4174 .merchant-module-page-setting-field-divider {
4175 border-bottom: 1px solid #F0F0F1;
4176 }
4177 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
4178 font-size: 16px;
4179 }
4180
4181 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
4182 display: -webkit-box;
4183 display: -ms-flexbox;
4184 display: flex;
4185 grid-gap: 5px;
4186 -ms-flex-wrap: wrap;
4187 flex-wrap: wrap;
4188 margin-bottom: 15px;
4189 }
4190 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
4191 display: none;
4192 }
4193 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
4194 position: relative;
4195 display: -webkit-box;
4196 display: -ms-flexbox;
4197 display: flex;
4198 -webkit-box-align: center;
4199 -ms-flex-align: center;
4200 align-items: center;
4201 -webkit-box-pack: center;
4202 -ms-flex-pack: center;
4203 justify-content: center;
4204 border-radius: 4px;
4205 padding: 2px;
4206 border: 1px solid #eee;
4207 background-color: #fff;
4208 }
4209 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
4210 cursor: -webkit-grab;
4211 cursor: grab;
4212 width: 100%;
4213 height: 100%;
4214 max-height: 75px;
4215 -o-object-fit: cover;
4216 object-fit: cover;
4217 }
4218 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
4219 cursor: -webkit-grabbing;
4220 cursor: grabbing;
4221 }
4222 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
4223 cursor: pointer;
4224 position: absolute;
4225 z-index: 1;
4226 top: 5px;
4227 right: 5px;
4228 width: 16px;
4229 height: 16px;
4230 display: -webkit-box;
4231 display: -ms-flexbox;
4232 display: flex;
4233 -webkit-box-pack: center;
4234 -ms-flex-pack: center;
4235 justify-content: center;
4236 -webkit-box-align: center;
4237 -ms-flex-align: center;
4238 align-items: center;
4239 color: #fff;
4240 background-color: #c5280c;
4241 font-size: 14px;
4242 line-height: 1em;
4243 border-radius: 16px;
4244 opacity: 0;
4245 -webkit-transition: all 0.2s;
4246 transition: all 0.2s;
4247 }
4248 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
4249 opacity: 1;
4250 }
4251 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
4252 cursor: pointer;
4253 -webkit-user-select: none;
4254 -moz-user-select: none;
4255 -ms-user-select: none;
4256 user-select: none;
4257 display: -webkit-inline-box;
4258 display: -ms-inline-flexbox;
4259 display: inline-flex;
4260 padding: 0.4375rem 1rem;
4261 font-size: 0.875rem;
4262 font-weight: 600;
4263 line-height: 1.5;
4264 white-space: nowrap;
4265 text-transform: none;
4266 text-decoration: none;
4267 color: #212b36;
4268 background-color: #fff;
4269 border: 1px solid #c4cdd5;
4270 border-radius: 0.25rem;
4271 -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);
4272 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);
4273 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);
4274 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);
4275 }
4276 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
4277 outline: none;
4278 -webkit-box-shadow: none;
4279 box-shadow: none;
4280 }
4281 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
4282 visibility: visible !important;
4283 border: 1px dashed #ddd;
4284 background-color: #f9f9f9;
4285 border-radius: 4px;
4286 }
4287
4288 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
4289 display: -webkit-box;
4290 display: -ms-flexbox;
4291 display: flex;
4292 grid-gap: 5px;
4293 -ms-flex-wrap: wrap;
4294 flex-wrap: wrap;
4295 margin-bottom: 15px;
4296 }
4297 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
4298 display: none;
4299 }
4300 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop {
4301 position: relative;
4302 background: #F6F6F6;
4303 border: 1px solid #EAEAEB;
4304 border-radius: 5px;
4305 height: 150px;
4306 }
4307 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop .merchant-upload-button {
4308 display: -webkit-box;
4309 display: -ms-flexbox;
4310 display: flex;
4311 -webkit-box-orient: vertical;
4312 -webkit-box-direction: normal;
4313 -ms-flex-direction: column;
4314 flex-direction: column;
4315 -webkit-box-align: center;
4316 -ms-flex-align: center;
4317 align-items: center;
4318 -webkit-box-pack: center;
4319 -ms-flex-pack: center;
4320 justify-content: center;
4321 width: 100%;
4322 height: 100%;
4323 margin-top: 10px;
4324 border: none;
4325 background: no-repeat;
4326 outline: none;
4327 -webkit-box-shadow: none;
4328 box-shadow: none;
4329 }
4330 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop img {
4331 position: absolute;
4332 left: 50%;
4333 top: 50%;
4334 -webkit-transform: translate(-50%, -50%);
4335 transform: translate(-50%, -50%);
4336 margin-top: -15px;
4337 }
4338 .merchant-module-page-setting-field-upload .merchant-upload-image {
4339 position: relative;
4340 display: -webkit-box;
4341 display: -ms-flexbox;
4342 display: flex;
4343 -webkit-box-align: center;
4344 -ms-flex-align: center;
4345 align-items: center;
4346 -webkit-box-pack: center;
4347 -ms-flex-pack: center;
4348 justify-content: center;
4349 border-radius: 4px;
4350 padding: 2px;
4351 border: 1px solid #eee;
4352 background-color: #fff;
4353 }
4354 .merchant-module-page-setting-field-upload .merchant-upload-image img {
4355 cursor: -webkit-grab;
4356 cursor: grab;
4357 width: 100%;
4358 height: 100%;
4359 max-height: 75px;
4360 -o-object-fit: cover;
4361 object-fit: cover;
4362 }
4363 .merchant-module-page-setting-field-upload .merchant-upload-image i {
4364 cursor: pointer;
4365 position: absolute;
4366 z-index: 1;
4367 top: 5px;
4368 right: 5px;
4369 width: 16px;
4370 height: 16px;
4371 display: -webkit-box;
4372 display: -ms-flexbox;
4373 display: flex;
4374 -webkit-box-pack: center;
4375 -ms-flex-pack: center;
4376 justify-content: center;
4377 -webkit-box-align: center;
4378 -ms-flex-align: center;
4379 align-items: center;
4380 color: #fff;
4381 background-color: #c5280c;
4382 font-size: 14px;
4383 line-height: 1em;
4384 border-radius: 16px;
4385 opacity: 0;
4386 -webkit-transition: all 0.2s;
4387 transition: all 0.2s;
4388 }
4389 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
4390 opacity: 1;
4391 }
4392 .merchant-module-page-setting-field-upload .merchant-upload-button {
4393 cursor: pointer;
4394 -webkit-user-select: none;
4395 -moz-user-select: none;
4396 -ms-user-select: none;
4397 user-select: none;
4398 display: -webkit-inline-box;
4399 display: -ms-inline-flexbox;
4400 display: inline-flex;
4401 padding: 0.4375rem 1rem;
4402 font-size: 0.875rem;
4403 font-weight: 600;
4404 line-height: 1.5;
4405 white-space: nowrap;
4406 text-transform: none;
4407 text-decoration: none;
4408 color: #212b36;
4409 background-color: #fff;
4410 border: 1px solid #c4cdd5;
4411 border-radius: 0.25rem;
4412 -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);
4413 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);
4414 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);
4415 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);
4416 }
4417 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
4418 outline: none;
4419 -webkit-box-shadow: none;
4420 box-shadow: none;
4421 }
4422
4423 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
4424 display: -webkit-box;
4425 display: -ms-flexbox;
4426 display: flex;
4427 -webkit-box-pack: start;
4428 -ms-flex-pack: start;
4429 justify-content: flex-start;
4430 }
4431 .merchant-module-page-setting-field-switcher input {
4432 display: none;
4433 }
4434 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
4435 margin-left: 0;
4436 background: #3858E9;
4437 }
4438 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
4439 right: 1px;
4440 }
4441 .merchant-module-page-setting-field-switcher .toggle-switch {
4442 float: right;
4443 position: relative;
4444 width: 36px;
4445 margin-top: 2px;
4446 -webkit-user-select: none;
4447 -moz-user-select: none;
4448 -ms-user-select: none;
4449 user-select: none;
4450 }
4451 .merchant-module-page-setting-field-switcher .toggle-switch-label {
4452 position: relative;
4453 display: inline-block;
4454 overflow: hidden;
4455 cursor: pointer;
4456 border-radius: 20px;
4457 padding: 0;
4458 margin: 0;
4459 width: 36px;
4460 }
4461 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
4462 display: block;
4463 width: 200%;
4464 margin-left: -100%;
4465 background: #c8c8c8;
4466 height: 18px;
4467 }
4468 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
4469 display: block;
4470 width: 12px;
4471 height: 12px;
4472 margin: 3px;
4473 background-color: #fff;
4474 position: absolute;
4475 top: 0;
4476 bottom: 0;
4477 right: 18px;
4478 border-radius: 20px;
4479 -webkit-transition: all 0.1s ease-in 0s;
4480 transition: all 0.1s ease-in 0s;
4481 }
4482
4483 .merchant-module-alert {
4484 position: fixed;
4485 top: 0;
4486 left: 0;
4487 right: 0;
4488 bottom: 0;
4489 z-index: 99999;
4490 display: -webkit-box;
4491 display: -ms-flexbox;
4492 display: flex;
4493 -webkit-box-pack: center;
4494 -ms-flex-pack: center;
4495 justify-content: center;
4496 -webkit-box-align: center;
4497 -ms-flex-align: center;
4498 align-items: center;
4499 background-color: rgba(0, 0, 0, 0.6);
4500 opacity: 0;
4501 visibility: hidden;
4502 -webkit-user-select: none;
4503 -moz-user-select: none;
4504 -ms-user-select: none;
4505 user-select: none;
4506 pointer-events: none;
4507 -webkit-transition: all 0.2s;
4508 transition: all 0.2s;
4509 }
4510 .merchant-module-alert.merchant-show {
4511 -webkit-user-select: auto;
4512 -moz-user-select: auto;
4513 -ms-user-select: auto;
4514 user-select: auto;
4515 pointer-events: auto;
4516 opacity: 1;
4517 visibility: visible;
4518 }
4519
4520 .merchant-module-alert-wrapper {
4521 display: -webkit-box;
4522 display: -ms-flexbox;
4523 display: flex;
4524 -webkit-box-orient: vertical;
4525 -webkit-box-direction: normal;
4526 -ms-flex-direction: column;
4527 flex-direction: column;
4528 width: 640px;
4529 max-width: 90%;
4530 border-radius: 4px;
4531 background-color: #fff;
4532 }
4533
4534 .merchant-module-alert-header {
4535 display: -webkit-box;
4536 display: -ms-flexbox;
4537 display: flex;
4538 -webkit-box-align: center;
4539 -ms-flex-align: center;
4540 align-items: center;
4541 -webkit-box-pack: justify;
4542 -ms-flex-pack: justify;
4543 justify-content: space-between;
4544 padding: 20px 30px;
4545 }
4546 .merchant-module-alert-header strong {
4547 font-size: 18px;
4548 line-height: 1em;
4549 }
4550 .merchant-module-alert-header a {
4551 position: relative;
4552 right: -5px;
4553 display: -webkit-box;
4554 display: -ms-flexbox;
4555 display: flex;
4556 color: #212121;
4557 text-decoration: none;
4558 -webkit-transition: all 0.2s;
4559 transition: all 0.2s;
4560 }
4561 .merchant-module-alert-header a:hover {
4562 opacity: 0.6;
4563 }
4564 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
4565 outline: none;
4566 -webkit-box-shadow: none;
4567 box-shadow: none;
4568 }
4569 .merchant-module-alert-header i {
4570 font-size: 32px;
4571 line-height: 1em;
4572 width: auto;
4573 height: auto;
4574 }
4575
4576 .merchant-module-alert-content {
4577 display: -webkit-box;
4578 display: -ms-flexbox;
4579 display: flex;
4580 -webkit-box-orient: vertical;
4581 -webkit-box-direction: normal;
4582 -ms-flex-direction: column;
4583 flex-direction: column;
4584 grid-gap: 20px;
4585 padding: 0 30px 30px 30px;
4586 }
4587 .merchant-module-alert-content p {
4588 margin: 0;
4589 padding: 0;
4590 font-size: 15px;
4591 font-weight: 500;
4592 color: #757575;
4593 }
4594 .merchant-module-alert-content figure {
4595 display: -webkit-box;
4596 display: -ms-flexbox;
4597 display: flex;
4598 margin: 0;
4599 padding: 0;
4600 }
4601 .merchant-module-alert-content img {
4602 max-width: 100%;
4603 }
4604
4605 .merchant-module-alert-footer {
4606 display: -webkit-box;
4607 display: -ms-flexbox;
4608 display: flex;
4609 -webkit-box-pack: end;
4610 -ms-flex-pack: end;
4611 justify-content: flex-end;
4612 padding: 30px;
4613 }
4614 .merchant-module-alert-footer a {
4615 font-weight: bold;
4616 font-size: 14px;
4617 padding: 10px 15px;
4618 text-decoration: none;
4619 border-radius: 4px;
4620 color: #212121;
4621 border: 1px solid #e5e5e5;
4622 }
4623 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
4624 outline: none;
4625 -webkit-box-shadow: none;
4626 box-shadow: none;
4627 }
4628
4629 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
4630 pointer-events: none;
4631 opacity: 0.8;
4632 }
4633 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
4634 opacity: 0.5;
4635 }
4636 .merchant-module-page-setting-field-inner.disabled .merchant-range {
4637 opacity: 0.5;
4638 }
4639 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
4640 opacity: 0.5;
4641 }
4642
4643 /* Utils */
4644 .merchant-height-auto {
4645 height: auto;
4646 }
4647
4648 /* Admin Footer Text */
4649 .merchant-admin-page .merchant-admin-footer-text-link {
4650 display: inline-block;
4651 padding-right: 5px;
4652 color: #3858E9;
4653 }
4654 .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 {
4655 color: #3858E9;
4656 }
4657
4658 .merchant-admin-page-module #wpfooter {
4659 display: none;
4660 }
4661 .merchant-admin-page-module #wpbody-content {
4662 padding-bottom: 30px;
4663 }
4664
4665 .merchant-module-footer-text {
4666 display: -webkit-box;
4667 display: -ms-flexbox;
4668 display: flex;
4669 grid-gap: 5px;
4670 -webkit-box-pack: center;
4671 -ms-flex-pack: center;
4672 justify-content: center;
4673 text-align: center;
4674 margin-top: 37px;
4675 }
4676 .merchant-module-footer-text i {
4677 color: #3858E9;
4678 }
4679
4680 /* Responsive */
4681 @media (max-width: 991px) {
4682 .merchant-wrap {
4683 display: -webkit-box;
4684 display: -ms-flexbox;
4685 display: flex;
4686 -webkit-box-orient: vertical;
4687 -webkit-box-direction: normal;
4688 -ms-flex-direction: column;
4689 flex-direction: column;
4690 grid-gap: 20px;
4691 }
4692 .merchant-modules-header-shortlinks {
4693 margin: 0;
4694 }
4695 .merchant-modules-header {
4696 -webkit-box-orient: vertical;
4697 -webkit-box-direction: normal;
4698 -ms-flex-direction: column;
4699 flex-direction: column;
4700 grid-gap: 20px;
4701 }
4702 .merchant-module-page-header-content {
4703 width: 100%;
4704 }
4705 .merchant-module-page-desc {
4706 max-width: none;
4707 }
4708 .merchant-module-page-header-placeholder {
4709 display: none;
4710 }
4711 .merchant-modules-header-image {
4712 display: none;
4713 }
4714 .merchant-modules-list {
4715 grid-template-columns: repeat(1, minmax(0, 1fr));
4716 }
4717 .merchant-modules-header-status {
4718 margin-bottom: 0;
4719 }
4720 .merchant-module-page-setting-box {
4721 -webkit-box-orient: vertical;
4722 -webkit-box-direction: normal;
4723 -ms-flex-direction: column;
4724 flex-direction: column;
4725 grid-gap: 20px;
4726 }
4727 .merchant-module-page-setting-title,
4728 .merchant-module-page-setting-fields {
4729 width: 100%;
4730 }
4731 .merchant-module-page-body {
4732 -webkit-box-orient: vertical;
4733 -webkit-box-direction: reverse;
4734 -ms-flex-direction: column-reverse;
4735 flex-direction: column-reverse;
4736 }
4737 .merchant-module-page-content {
4738 width: 100%;
4739 }
4740 .merchant-module-page-preview {
4741 margin-left: 0;
4742 margin-bottom: 20px;
4743 width: 100%;
4744 }
4745 }
4746 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area {
4747 margin-bottom: 0px;
4748 position: relative;
4749 }
4750 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field {
4751 background-color: #F0F0F0;
4752 border: none;
4753 border-radius: 3px;
4754 padding: 13px 0 13px 40px;
4755 width: 100%;
4756 }
4757 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-webkit-input-placeholder {
4758 font-size: 12px;
4759 }
4760 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-moz-placeholder {
4761 font-size: 12px;
4762 }
4763 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field:-ms-input-placeholder {
4764 font-size: 12px;
4765 }
4766 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-ms-input-placeholder {
4767 font-size: 12px;
4768 }
4769 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::placeholder {
4770 font-size: 12px;
4771 }
4772 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-icon {
4773 position: absolute;
4774 top: 50%;
4775 left: 15px;
4776 -webkit-transform: translateY(-50%);
4777 transform: translateY(-50%);
4778 }
4779 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching {
4780 margin-left: 10px;
4781 margin-right: 10px;
4782 font-style: italic;
4783 font-size: 11px;
4784 position: absolute;
4785 top: 13px;
4786 right: 0;
4787 color: #9d9d9d;
4788 display: none;
4789 }
4790 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching.active {
4791 display: inline;
4792 }
4793 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview {
4794 position: absolute;
4795 top: 100%;
4796 left: 0;
4797 right: 0;
4798 z-index: 10;
4799 background-color: #fff;
4800 border: 1px solid #ddd;
4801 padding: 0;
4802 margin: 0;
4803 height: 190px;
4804 overflow-y: scroll;
4805 display: none;
4806 }
4807 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li {
4808 cursor: pointer;
4809 }
4810 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style {
4811 padding-left: 15px;
4812 }
4813 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style:before {
4814 content: "";
4815 display: inline-block;
4816 width: 6px;
4817 height: 6px;
4818 border-radius: 50%;
4819 background-color: #d1d1d1;
4820 margin-right: 7px;
4821 }
4822 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li {
4823 border-radius: 4px;
4824 margin: 15px 0 15px;
4825 border: 1px solid #dfe1e1;
4826 }
4827 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li:last-child {
4828 margin-bottom: 0;
4829 }
4830 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul {
4831 padding: 0;
4832 margin: 0;
4833 }
4834 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li {
4835 padding: 5px 10px;
4836 margin: 0 -3px;
4837 min-height: 30px;
4838 display: -webkit-box;
4839 display: -ms-flexbox;
4840 display: flex;
4841 -webkit-box-pack: justify;
4842 -ms-flex-pack: justify;
4843 justify-content: space-between;
4844 -webkit-box-align: center;
4845 -ms-flex-align: center;
4846 align-items: center;
4847 border-bottom: 1px dotted #eee;
4848 position: relative;
4849 overflow: hidden;
4850 -webkit-user-select: none;
4851 -moz-user-select: none;
4852 -ms-user-select: none;
4853 user-select: none;
4854 -webkit-transition: 300ms;
4855 transition: 300ms;
4856 }
4857 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li:hover {
4858 background-color: #fafafa;
4859 }
4860 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li > span {
4861 margin-left: 3px;
4862 margin-right: 3px;
4863 }
4864 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img {
4865 width: 30px;
4866 -webkit-box-flex: 0;
4867 -ms-flex: 0 0 30px;
4868 flex: 0 0 30px;
4869 }
4870 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img img {
4871 width: 30px;
4872 height: 30px;
4873 border-radius: 4px;
4874 display: block;
4875 }
4876 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.data {
4877 -webkit-box-flex: 1;
4878 -ms-flex-positive: 1;
4879 flex-grow: 1;
4880 }
4881 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.type {
4882 font-size: 10px;
4883 color: #999;
4884 min-width: 40px;
4885 text-decoration: none;
4886 text-align: end;
4887 }
4888 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li del .amount {
4889 text-decoration: line-through;
4890 }
4891 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.info {
4892 font-size: 12px;
4893 font-style: italic;
4894 height: 18px;
4895 line-height: 18px;
4896 color: #999;
4897 background-color: #f1f1f1;
4898 text-decoration: none;
4899 padding: 0 6px;
4900 border-radius: 2px;
4901 margin-left: 3px;
4902 margin-right: 3px;
4903 }
4904 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li .remove {
4905 width: 30px;
4906 height: 30px;
4907 line-height: 28px;
4908 font-size: 15px;
4909 -webkit-box-flex: 0;
4910 -ms-flex: 0 0 30px;
4911 flex: 0 0 30px;
4912 border-radius: 50%;
4913 text-align: center;
4914 background-color: #f6f3f3;
4915 cursor: pointer;
4916 }
4917
4918 .merchant-image-picker label {
4919 position: relative;
4920 display: inline-block;
4921 margin-right: 10px;
4922 margin-bottom: 5px;
4923 }
4924 .merchant-image-picker label .tool-tip-text {
4925 visibility: hidden;
4926 opacity: 0;
4927 width: 120px;
4928 background-color: black;
4929 color: #fff;
4930 text-align: center;
4931 border-radius: 6px;
4932 padding: 5px 0;
4933 position: absolute;
4934 z-index: 1;
4935 top: -35px;
4936 left: 50%;
4937 margin-left: -60px;
4938 -webkit-transition: opacity 300ms;
4939 transition: opacity 300ms;
4940 }
4941 .merchant-image-picker label .tool-tip-text::after {
4942 content: "";
4943 position: absolute;
4944 top: 100%;
4945 left: 50%;
4946 margin-left: -5px;
4947 border-width: 5px;
4948 border-style: solid;
4949 border-color: black transparent transparent transparent;
4950 }
4951 .merchant-image-picker label:hover .tool-tip-text {
4952 visibility: visible;
4953 opacity: 1;
4954 }
4955 .merchant-image-picker input[type=radio] {
4956 display: none;
4957 clear: both;
4958 }
4959 .merchant-image-picker img {
4960 border: 2px solid #F0F0F1;
4961 border-radius: 4px;
4962 cursor: pointer;
4963 padding: 7px 3px;
4964 -webkit-transition: 300ms;
4965 transition: 300ms;
4966 }
4967 .merchant-image-picker input[type=radio]:checked + img {
4968 border: 2px solid #3858E9;
4969 }