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

4,964 lines 135.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Utilities */
2 .mrc-w-100 {
3 width: 100% !important;
4 }
5
6 .mrc-mb-0 {
7 margin-bottom: 0;
8 }
9
10 .mrc-mt-0 {
11 margin-top: 0;
12 }
13
14 .merchant-animated-buttons .merchant-button-flash:hover {
15 -webkit-animation: merchant-flash 1s infinite both;
16 animation: merchant-flash 1s infinite both;
17 -webkit-animation-iteration-count: 1;
18 animation-iteration-count: 1;
19 }
20 .merchant-animated-buttons .merchant-button-bounce:hover {
21 -webkit-animation: merchant-bounce 0.3s alternate;
22 animation: merchant-bounce 0.3s alternate;
23 -webkit-animation-iteration-count: 4;
24 animation-iteration-count: 4;
25 }
26 .merchant-animated-buttons .merchant-button-zoom-in:hover {
27 -webkit-transform: scale(1.2);
28 transform: scale(1.2);
29 }
30 .merchant-animated-buttons .merchant-button-shake:hover {
31 -webkit-animation: merchant-shake 0.3s;
32 animation: merchant-shake 0.3s;
33 -webkit-animation-iteration-count: 2;
34 animation-iteration-count: 2;
35 }
36 .merchant-animated-buttons .merchant-button-pulse:hover {
37 -webkit-animation: merchant-pulse 1.5s ease-in-out infinite both;
38 animation: merchant-pulse 1.5s ease-in-out infinite both;
39 }
40 .merchant-animated-buttons .merchant-button-jello-shake:hover {
41 -webkit-animation: merchant-jello-shake 1.5s infinite both;
42 animation: merchant-jello-shake 1.5s infinite both;
43 }
44 .merchant-animated-buttons .merchant-button-wobble:hover {
45 -webkit-animation: merchant-wobble 1.5s ease-in-out infinite both;
46 animation: merchant-wobble 1.5s ease-in-out infinite both;
47 }
48 .merchant-animated-buttons .merchant-button-vibrate:hover {
49 -webkit-animation: merchant-vibrate 0.3s linear 4 both;
50 animation: merchant-vibrate 0.3s linear 4 both;
51 }
52 .merchant-animated-buttons .merchant-button-swing:hover {
53 -webkit-animation: merchant-swing 2s ease-in-out infinite alternate;
54 animation: merchant-swing 2s ease-in-out infinite alternate;
55 }
56 .merchant-animated-buttons .merchant-button-tada:hover {
57 -webkit-animation: merchant-tada 1s infinite both;
58 animation: merchant-tada 1s infinite both;
59 }
60
61 @-webkit-keyframes merchant-flash {
62 0%, 50%, to {
63 opacity: 1;
64 }
65 25%, 75% {
66 opacity: 0;
67 }
68 }
69
70 @keyframes merchant-flash {
71 0%, 50%, to {
72 opacity: 1;
73 }
74 25%, 75% {
75 opacity: 0;
76 }
77 }
78 @-webkit-keyframes merchant-bounce {
79 to {
80 -webkit-transform: scale(1.2);
81 transform: scale(1.2);
82 }
83 }
84 @keyframes merchant-bounce {
85 to {
86 -webkit-transform: scale(1.2);
87 transform: scale(1.2);
88 }
89 }
90 @-webkit-keyframes merchant-shake {
91 33% {
92 -webkit-transform: rotate(10deg);
93 transform: rotate(10deg);
94 }
95 67% {
96 -webkit-transform: rotate(-10deg);
97 transform: rotate(-10deg);
98 }
99 to {
100 -webkit-transform: rotate(10deg);
101 transform: rotate(10deg);
102 }
103 }
104 @keyframes merchant-shake {
105 33% {
106 -webkit-transform: rotate(10deg);
107 transform: rotate(10deg);
108 }
109 67% {
110 -webkit-transform: rotate(-10deg);
111 transform: rotate(-10deg);
112 }
113 to {
114 -webkit-transform: rotate(10deg);
115 transform: rotate(10deg);
116 }
117 }
118 @-webkit-keyframes merchant-pulse {
119 0% {
120 -webkit-animation-timing-function: ease-out;
121 animation-timing-function: ease-out;
122 -webkit-transform: scale(1);
123 transform: scale(1);
124 -webkit-transform-origin: center center;
125 transform-origin: center center;
126 }
127 10% {
128 -webkit-animation-timing-function: ease-in;
129 animation-timing-function: ease-in;
130 -webkit-transform: scale(0.91);
131 transform: scale(0.91);
132 }
133 17% {
134 -webkit-animation-timing-function: ease-out;
135 animation-timing-function: ease-out;
136 -webkit-transform: scale(0.98);
137 transform: scale(0.98);
138 }
139 33% {
140 -webkit-animation-timing-function: ease-in;
141 animation-timing-function: ease-in;
142 -webkit-transform: scale(0.87);
143 transform: scale(0.87);
144 }
145 45% {
146 -webkit-animation-timing-function: ease-out;
147 animation-timing-function: ease-out;
148 -webkit-transform: scale(1);
149 transform: scale(1);
150 }
151 }
152 @keyframes merchant-pulse {
153 0% {
154 -webkit-animation-timing-function: ease-out;
155 animation-timing-function: ease-out;
156 -webkit-transform: scale(1);
157 transform: scale(1);
158 -webkit-transform-origin: center center;
159 transform-origin: center center;
160 }
161 10% {
162 -webkit-animation-timing-function: ease-in;
163 animation-timing-function: ease-in;
164 -webkit-transform: scale(0.91);
165 transform: scale(0.91);
166 }
167 17% {
168 -webkit-animation-timing-function: ease-out;
169 animation-timing-function: ease-out;
170 -webkit-transform: scale(0.98);
171 transform: scale(0.98);
172 }
173 33% {
174 -webkit-animation-timing-function: ease-in;
175 animation-timing-function: ease-in;
176 -webkit-transform: scale(0.87);
177 transform: scale(0.87);
178 }
179 45% {
180 -webkit-animation-timing-function: ease-out;
181 animation-timing-function: ease-out;
182 -webkit-transform: scale(1);
183 transform: scale(1);
184 }
185 }
186 @-webkit-keyframes merchant-jello-shake {
187 0% {
188 -webkit-transform: scaleX(1);
189 transform: scaleX(1);
190 }
191 30% {
192 -webkit-transform: scale3d(1.25, 0.75, 1);
193 transform: scale3d(1.25, 0.75, 1);
194 }
195 40% {
196 -webkit-transform: scale3d(0.75, 1.25, 1);
197 transform: scale3d(0.75, 1.25, 1);
198 }
199 50% {
200 -webkit-transform: scale3d(1.15, 0.85, 1);
201 transform: scale3d(1.15, 0.85, 1);
202 }
203 65% {
204 -webkit-transform: scale3d(0.95, 1.05, 1);
205 transform: scale3d(0.95, 1.05, 1);
206 }
207 75% {
208 -webkit-transform: scale3d(1.05, 0.95, 1);
209 transform: scale3d(1.05, 0.95, 1);
210 }
211 to {
212 -webkit-transform: scaleX(1);
213 transform: scaleX(1);
214 }
215 }
216 @keyframes merchant-jello-shake {
217 0% {
218 -webkit-transform: scaleX(1);
219 transform: scaleX(1);
220 }
221 30% {
222 -webkit-transform: scale3d(1.25, 0.75, 1);
223 transform: scale3d(1.25, 0.75, 1);
224 }
225 40% {
226 -webkit-transform: scale3d(0.75, 1.25, 1);
227 transform: scale3d(0.75, 1.25, 1);
228 }
229 50% {
230 -webkit-transform: scale3d(1.15, 0.85, 1);
231 transform: scale3d(1.15, 0.85, 1);
232 }
233 65% {
234 -webkit-transform: scale3d(0.95, 1.05, 1);
235 transform: scale3d(0.95, 1.05, 1);
236 }
237 75% {
238 -webkit-transform: scale3d(1.05, 0.95, 1);
239 transform: scale3d(1.05, 0.95, 1);
240 }
241 to {
242 -webkit-transform: scaleX(1);
243 transform: scaleX(1);
244 }
245 }
246 @-webkit-keyframes merchant-wobble {
247 0%, to {
248 -webkit-transform: translateX(0);
249 transform: translateX(0);
250 -webkit-transform-origin: 50% 50%;
251 transform-origin: 50% 50%;
252 }
253 15% {
254 -webkit-transform: translateX(-30px) rotate(-6deg);
255 transform: translateX(-30px) rotate(-6deg);
256 }
257 30% {
258 -webkit-transform: translateX(15px) rotate(6deg);
259 transform: translateX(15px) rotate(6deg);
260 }
261 45% {
262 -webkit-transform: translateX(-15px) rotate(-3.6deg);
263 transform: translateX(-15px) rotate(-3.6deg);
264 }
265 60% {
266 -webkit-transform: translateX(9px) rotate(2.4deg);
267 transform: translateX(9px) rotate(2.4deg);
268 }
269 75% {
270 -webkit-transform: translateX(-6px) rotate(-1.2deg);
271 transform: translateX(-6px) rotate(-1.2deg);
272 }
273 }
274 @keyframes merchant-wobble {
275 0%, to {
276 -webkit-transform: translateX(0);
277 transform: translateX(0);
278 -webkit-transform-origin: 50% 50%;
279 transform-origin: 50% 50%;
280 }
281 15% {
282 -webkit-transform: translateX(-30px) rotate(-6deg);
283 transform: translateX(-30px) rotate(-6deg);
284 }
285 30% {
286 -webkit-transform: translateX(15px) rotate(6deg);
287 transform: translateX(15px) rotate(6deg);
288 }
289 45% {
290 -webkit-transform: translateX(-15px) rotate(-3.6deg);
291 transform: translateX(-15px) rotate(-3.6deg);
292 }
293 60% {
294 -webkit-transform: translateX(9px) rotate(2.4deg);
295 transform: translateX(9px) rotate(2.4deg);
296 }
297 75% {
298 -webkit-transform: translateX(-6px) rotate(-1.2deg);
299 transform: translateX(-6px) rotate(-1.2deg);
300 }
301 }
302 @-webkit-keyframes merchant-vibrate {
303 0% {
304 -webkit-transform: translate(0);
305 transform: translate(0);
306 }
307 20% {
308 -webkit-transform: translate(-2px, 2px);
309 transform: translate(-2px, 2px);
310 }
311 40% {
312 -webkit-transform: translate(-2px, -2px);
313 transform: translate(-2px, -2px);
314 }
315 60% {
316 -webkit-transform: translate(2px, 2px);
317 transform: translate(2px, 2px);
318 }
319 80% {
320 -webkit-transform: translate(2px, -2px);
321 transform: translate(2px, -2px);
322 }
323 to {
324 -webkit-transform: translate(0);
325 transform: translate(0);
326 }
327 }
328 @keyframes merchant-vibrate {
329 0% {
330 -webkit-transform: translate(0);
331 transform: translate(0);
332 }
333 20% {
334 -webkit-transform: translate(-2px, 2px);
335 transform: translate(-2px, 2px);
336 }
337 40% {
338 -webkit-transform: translate(-2px, -2px);
339 transform: translate(-2px, -2px);
340 }
341 60% {
342 -webkit-transform: translate(2px, 2px);
343 transform: translate(2px, 2px);
344 }
345 80% {
346 -webkit-transform: translate(2px, -2px);
347 transform: translate(2px, -2px);
348 }
349 to {
350 -webkit-transform: translate(0);
351 transform: translate(0);
352 }
353 }
354 @-webkit-keyframes merchant-swing {
355 0% {
356 -webkit-transform: rotate(0deg);
357 transform: rotate(0deg);
358 }
359 20% {
360 -webkit-transform: rotate(3deg);
361 transform: rotate(3deg);
362 }
363 40% {
364 -webkit-transform: rotate(-3deg);
365 transform: rotate(-3deg);
366 }
367 60% {
368 -webkit-transform: rotate(3deg);
369 transform: rotate(3deg);
370 }
371 80% {
372 -webkit-transform: rotate(-3deg);
373 transform: rotate(-3deg);
374 }
375 to {
376 -webkit-transform: rotate(0deg);
377 transform: rotate(0deg);
378 }
379 }
380 @keyframes merchant-swing {
381 0% {
382 -webkit-transform: rotate(0deg);
383 transform: rotate(0deg);
384 }
385 20% {
386 -webkit-transform: rotate(3deg);
387 transform: rotate(3deg);
388 }
389 40% {
390 -webkit-transform: rotate(-3deg);
391 transform: rotate(-3deg);
392 }
393 60% {
394 -webkit-transform: rotate(3deg);
395 transform: rotate(3deg);
396 }
397 80% {
398 -webkit-transform: rotate(-3deg);
399 transform: rotate(-3deg);
400 }
401 to {
402 -webkit-transform: rotate(0deg);
403 transform: rotate(0deg);
404 }
405 }
406 @-webkit-keyframes merchant-tada {
407 0% {
408 -webkit-transform: scaleX(1);
409 transform: scaleX(1);
410 }
411 10%, 20% {
412 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
413 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
414 }
415 30%, 50%, 70%, 90% {
416 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
417 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
418 }
419 40%, 60%, 80% {
420 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
421 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
422 }
423 to {
424 -webkit-transform: scaleX(1);
425 transform: scaleX(1);
426 }
427 }
428 @keyframes merchant-tada {
429 0% {
430 -webkit-transform: scaleX(1);
431 transform: scaleX(1);
432 }
433 10%, 20% {
434 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
435 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
436 }
437 30%, 50%, 70%, 90% {
438 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
439 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
440 }
441 40%, 60%, 80% {
442 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
443 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
444 }
445 to {
446 -webkit-transform: scaleX(1);
447 transform: scaleX(1);
448 }
449 }
450 .merchant-pcr-app * {
451 outline: none;
452 border: none;
453 -webkit-box-sizing: border-box;
454 box-sizing: border-box;
455 }
456
457 .merchant-pcr-app input:focus,
458 .merchant-pcr-app input.pcr-active,
459 .merchant-pcr-app button:focus,
460 .merchant-pcr-app button.pcr-active {
461 -webkit-box-shadow: none;
462 box-shadow: none;
463 }
464
465 .merchant-pcr-app .pcr-palette:focus,
466 .merchant-pcr-app .pcr-slider:focus {
467 -webkit-box-shadow: none;
468 box-shadow: none;
469 }
470
471 .merchant-pcr-app {
472 position: fixed;
473 z-index: 999999;
474 top: 0;
475 left: 0;
476 display: -webkit-box;
477 display: -ms-flexbox;
478 display: flex;
479 -webkit-box-orient: vertical;
480 -webkit-box-direction: normal;
481 -ms-flex-direction: column;
482 flex-direction: column;
483 border-radius: 0.1em;
484 opacity: 0;
485 visibility: hidden;
486 -webkit-transition: opacity 0.2s, visibility 0s 0.2s;
487 transition: opacity 0.2s, visibility 0s 0.2s;
488 -webkit-box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
489 box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
490 background: #fff;
491 }
492
493 .merchant-pcr-app.visible {
494 visibility: visible;
495 opacity: 1;
496 -webkit-transition: opacity 0.2s;
497 transition: opacity 0.2s;
498 }
499
500 .merchant-pcr-app .pcr-swatches {
501 display: -webkit-box;
502 display: -ms-flexbox;
503 display: flex;
504 -webkit-box-pack: justify;
505 -ms-flex-pack: justify;
506 justify-content: space-between;
507 }
508
509 .merchant-pcr-app .pcr-swatches > button {
510 cursor: pointer;
511 font-size: 1em;
512 position: relative;
513 z-index: 1;
514 width: 20px;
515 height: 20px;
516 margin: 0;
517 padding: 0;
518 background: none;
519 }
520
521 .merchant-pcr-app .pcr-swatches > button::before {
522 position: absolute;
523 content: "";
524 top: 0;
525 left: 0;
526 bottom: 0;
527 right: 0;
528 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
529 background-size: 6px;
530 border-radius: 20px;
531 border: 1px solid transparent;
532 z-index: -1;
533 }
534
535 .merchant-pcr-app .pcr-swatches > button::after {
536 content: "";
537 position: absolute;
538 z-index: 1;
539 top: 0;
540 left: 0;
541 right: 0;
542 bottom: 0;
543 border-radius: 20px;
544 border: 1px solid rgba(0, 0, 0, 0.3);
545 background: var(--pcr-color);
546 }
547
548 .merchant-pcr-app .pcr-interaction {
549 display: -webkit-box;
550 display: -ms-flexbox;
551 display: flex;
552 grid-gap: 5px;
553 }
554
555 .merchant-pcr-app .pcr-interaction input {
556 font-size: 11px;
557 border-radius: 3px;
558 }
559 .merchant-pcr-app .pcr-interaction input:focus {
560 border-color: #3858E9;
561 }
562
563 .merchant-pcr-app .pcr-interaction .pcr-result {
564 -webkit-box-flex: 1;
565 -ms-flex: 1;
566 flex: 1;
567 margin: 0;
568 width: 100%;
569 max-width: 100%;
570 }
571
572 .merchant-pcr-app .pcr-interaction .pcr-clear {
573 cursor: pointer;
574 margin: 0;
575 padding: 0 10px;
576 border-radius: 3px;
577 color: #fff;
578 background-color: #3858E9;
579 text-transform: uppercase;
580 }
581
582 .merchant-pcr-app .pcr-selection .pcr-picker {
583 -webkit-user-select: none;
584 -moz-user-select: none;
585 -ms-user-select: none;
586 user-select: none;
587 position: absolute;
588 height: 16px;
589 width: 16px;
590 border-radius: 16px;
591 background-color: #fff !important;
592 -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
593 box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
594 }
595
596 .merchant-pcr-app .pcr-selection .pcr-color-palette,
597 .merchant-pcr-app .pcr-selection .pcr-color-chooser,
598 .merchant-pcr-app .pcr-selection .pcr-color-opacity {
599 -webkit-user-select: none;
600 -moz-user-select: none;
601 -ms-user-select: none;
602 user-select: none;
603 position: relative;
604 display: -webkit-box;
605 display: -ms-flexbox;
606 display: flex;
607 -webkit-box-orient: vertical;
608 -webkit-box-direction: normal;
609 -ms-flex-direction: column;
610 flex-direction: column;
611 cursor: -webkit-grab;
612 cursor: grab;
613 }
614
615 .merchant-pcr-app .pcr-selection .pcr-color-palette:active,
616 .merchant-pcr-app .pcr-selection .pcr-color-chooser:active,
617 .merchant-pcr-app .pcr-selection .pcr-color-opacity:active {
618 cursor: -webkit-grabbing;
619 cursor: grabbing;
620 }
621
622 .merchant-pcr-app[data-theme=merchant] {
623 width: 250px;
624 max-width: 95vw;
625 padding: 10px;
626 -webkit-box-sizing: border-box;
627 box-sizing: border-box;
628 display: -webkit-box;
629 display: -ms-flexbox;
630 display: flex;
631 grid-gap: 10px;
632 -webkit-box-orient: vertical;
633 -webkit-box-direction: normal;
634 -ms-flex-direction: column;
635 flex-direction: column;
636 }
637
638 .merchant-pcr-app[data-theme=merchant] .pcr-selection {
639 display: grid;
640 grid-gap: 10px;
641 grid-template-columns: 1fr 4fr;
642 grid-template-rows: 5fr auto auto;
643 -webkit-box-align: center;
644 -ms-flex-align: center;
645 align-items: center;
646 height: 150px;
647 width: 100%;
648 align-self: flex-start;
649 }
650
651 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview {
652 grid-area: 2/1/4/1;
653 height: 100%;
654 width: 100%;
655 display: -webkit-box;
656 display: -ms-flexbox;
657 display: flex;
658 -webkit-box-align: center;
659 -ms-flex-align: center;
660 align-items: center;
661 -webkit-box-pack: center;
662 -ms-flex-pack: center;
663 justify-content: center;
664 }
665
666 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-last-color {
667 display: none;
668 }
669
670 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color {
671 position: relative;
672 width: 32px;
673 height: 32px;
674 border-radius: 32px;
675 overflow: hidden;
676 border: 1px solid rgba(0, 0, 0, 0.3);
677 background-color: var(--pcr-color);
678 }
679
680 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color::before {
681 position: absolute;
682 content: "";
683 top: 0;
684 left: 0;
685 width: 100%;
686 height: 100%;
687 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
688 background-size: 6px;
689 border-radius: 100%;
690 z-index: -1;
691 }
692
693 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette {
694 grid-area: 1/1/2/3;
695 width: 100%;
696 height: 100%;
697 z-index: 1;
698 }
699
700 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-picker {
701 width: 18px;
702 height: 18px;
703 border: 2px solid #fff;
704 -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
705 box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
706 background-color: transparent !important;
707 }
708
709 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette {
710 width: 100%;
711 height: 100%;
712 }
713
714 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette::before {
715 position: absolute;
716 content: "";
717 top: 0;
718 left: 0;
719 width: 100%;
720 height: 100%;
721 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
722 background-size: 8px;
723 z-index: -1;
724 }
725
726 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser {
727 grid-area: 2/2/2/2;
728 }
729
730 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
731 grid-area: 3/2/3/2;
732 }
733
734 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser,
735 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
736 height: 12px;
737 margin-right: 10px;
738 }
739
740 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-picker,
741 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-picker {
742 top: 50%;
743 -webkit-transform: translateY(-50%);
744 transform: translateY(-50%);
745 }
746
747 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider,
748 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
749 -webkit-box-flex: 1;
750 -ms-flex-positive: 1;
751 flex-grow: 1;
752 }
753
754 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider {
755 background: -webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red));
756 background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
757 }
758
759 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
760 background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
761 background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
762 background-size: 100%, 6px;
763 }
764
765 /* Buttons */
766 .button-tertiary {
767 cursor: pointer;
768 -webkit-user-select: none;
769 -moz-user-select: none;
770 -ms-user-select: none;
771 user-select: none;
772 display: -webkit-inline-box;
773 display: -ms-inline-flexbox;
774 display: inline-flex;
775 padding: 0.4375rem 1rem;
776 font-size: 0.875rem;
777 font-weight: 600;
778 line-height: 1.5;
779 white-space: nowrap;
780 text-transform: none;
781 text-decoration: none;
782 color: #212b36;
783 background-color: #fff;
784 border: 1px solid #c4cdd5;
785 border-radius: 0.25rem;
786 -webkit-transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
787 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
788 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
789 transition: background 0.2s cubic-bezier(0.64, 0, 0.35, 1), border 0.2s cubic-bezier(0.64, 0, 0.35, 1), box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1), -webkit-box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
790 }
791 .button-tertiary:hover, .button-tertiary:focus {
792 outline: none;
793 -webkit-box-shadow: none;
794 box-shadow: none;
795 }
796
797 /* Botiga Dashboard Tabs Nav Items */
798 .merchant-tabs-nav {
799 padding: 0 20px;
800 margin-bottom: -100%;
801 -webkit-transform: translate3d(0, 100%, 0);
802 transform: translate3d(0, 100%, 0);
803 }
804 .merchant-tabs-nav ul {
805 display: -webkit-box;
806 display: -ms-flexbox;
807 display: flex;
808 padding: 0;
809 }
810 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link {
811 position: relative;
812 font-size: 14px;
813 line-height: 20px;
814 padding: 16px;
815 color: #6D7175;
816 text-decoration: none;
817 -webkit-transition: ease color 300ms;
818 transition: ease color 300ms;
819 outline: none;
820 -webkit-box-shadow: none;
821 box-shadow: none;
822 }
823 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
824 content: "";
825 position: absolute;
826 bottom: 0;
827 left: 0;
828 width: 100%;
829 height: 3px;
830 background-color: transparent;
831 border-radius: 4px 4px 0 0;
832 }
833 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
834 color: #3858E9;
835 font-weight: 500;
836 }
837 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link:after {
838 background-color: #3858E9;
839 }
840 .merchant-tabs-nav .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
841 color: #3858E9;
842 }
843 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link {
844 position: relative;
845 display: -webkit-box;
846 display: -ms-flexbox;
847 display: flex;
848 -webkit-box-align: center;
849 -ms-flex-align: center;
850 align-items: center;
851 font-size: 18px;
852 font-weight: 600;
853 line-height: 26px;
854 padding: 9px 16px;
855 border-bottom: 0;
856 color: #1e1e1e;
857 -webkit-transition: ease color 200ms;
858 transition: ease color 200ms;
859 }
860 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg {
861 margin-right: 8px;
862 }
863 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg path {
864 -webkit-transition: ease fill 200ms;
865 transition: ease fill 200ms;
866 }
867 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
868 content: none;
869 }
870 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:before {
871 content: "";
872 position: absolute;
873 top: 0;
874 left: 0;
875 background-color: transparent;
876 width: 4px;
877 height: 100%;
878 border-radius: 0 4px 4px 0;
879 opacity: 0;
880 visibility: hidden;
881 -webkit-transition: ease opacity 200ms;
882 transition: ease opacity 200ms;
883 }
884 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link {
885 color: #757575;
886 }
887 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link svg path, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link svg path {
888 fill: #757575;
889 }
890 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:hover .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:focus .merchant-tabs-nav-link:before, .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item:active .merchant-tabs-nav-link:before {
891 background-color: #e1e1e1;
892 opacity: 1;
893 visibility: visible;
894 }
895 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
896 color: #3858E9;
897 }
898 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link svg path {
899 fill: #3858E9;
900 }
901 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link:before {
902 background-color: #3858E9;
903 opacity: 1;
904 visibility: visible;
905 }
906 .merchant-tabs-nav.merchant-tabs-nav-vertical {
907 padding: 0;
908 margin-left: -20px;
909 }
910 .merchant-tabs-nav.merchant-tabs-nav-vertical ul {
911 -webkit-box-orient: vertical;
912 -webkit-box-direction: normal;
913 -ms-flex-direction: column;
914 flex-direction: column;
915 margin: 0;
916 }
917 .merchant-tabs-nav.merchant-tabs-nav-no-negative-margin {
918 margin-bottom: 0;
919 -webkit-transform: none;
920 transform: none;
921 }
922
923 /* Botiga Tabs Content */
924 .merchant-tab-content {
925 display: none;
926 }
927 .merchant-tab-content.active {
928 display: block;
929 }
930
931 .toplevel_page_merchant {
932 background-color: #F4F6F8;
933 }
934 .toplevel_page_merchant #wpbody-content > .updated,
935 .toplevel_page_merchant #wpbody-content > .notice {
936 display: none;
937 }
938
939 .merchant-top-bar {
940 display: -webkit-box;
941 display: -ms-flexbox;
942 display: flex;
943 -webkit-box-align: center;
944 -ms-flex-align: center;
945 align-items: center;
946 -webkit-box-pack: justify;
947 -ms-flex-pack: justify;
948 justify-content: space-between;
949 background-color: #FFF;
950 margin: 0 0 30px -20px;
951 padding: 18px 20px;
952 }
953 .merchant-top-bar * {
954 -webkit-box-sizing: border-box;
955 box-sizing: border-box;
956 }
957 .merchant-top-bar * *:before,
958 .merchant-top-bar * *:after {
959 -webkit-box-sizing: border-box;
960 box-sizing: border-box;
961 }
962 .merchant-top-bar .merchant-top-bar-infos {
963 display: -webkit-box;
964 display: -ms-flexbox;
965 display: flex;
966 -webkit-box-align: center;
967 -ms-flex-align: center;
968 align-items: center;
969 }
970 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item {
971 position: relative;
972 padding: 0 10px;
973 }
974 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item + .merchant-top-bar-info-item:before {
975 content: "";
976 position: absolute;
977 top: 50%;
978 left: 0;
979 height: 17px;
980 -webkit-transform: translateY(-50%);
981 transform: translateY(-50%);
982 border-left: 1px solid #F0F0F0;
983 }
984 .merchant-top-bar .merchant-version {
985 font-size: 13px;
986 line-height: 13px;
987 color: #97A3B6;
988 }
989 .merchant-top-bar .merchant-version strong {
990 position: relative;
991 top: 1px;
992 }
993 .merchant-top-bar .merchant-version .merchant-badge {
994 display: -webkit-inline-box;
995 display: -ms-inline-flexbox;
996 display: inline-flex;
997 margin-left: 5px;
998 font-size: 9px;
999 line-height: 10px;
1000 }
1001 .merchant-top-bar .merchant-notifications {
1002 position: relative;
1003 display: -webkit-inline-box;
1004 display: -ms-inline-flexbox;
1005 display: inline-flex;
1006 -webkit-box-align: center;
1007 -ms-flex-align: center;
1008 align-items: center;
1009 -webkit-box-pack: center;
1010 -ms-flex-pack: center;
1011 justify-content: center;
1012 width: 27px;
1013 height: 27px;
1014 border: 1px solid #DFDFDF;
1015 border-radius: 35px;
1016 }
1017 .merchant-top-bar .merchant-notifications:focus {
1018 -webkit-box-shadow: none;
1019 box-shadow: none;
1020 }
1021 .merchant-top-bar .merchant-notifications .merchant-notifications-count {
1022 position: absolute;
1023 top: -8px;
1024 right: -7px;
1025 display: -webkit-box;
1026 display: -ms-flexbox;
1027 display: flex;
1028 -webkit-box-align: center;
1029 -ms-flex-align: center;
1030 align-items: center;
1031 -webkit-box-pack: center;
1032 -ms-flex-pack: center;
1033 justify-content: center;
1034 width: 16px;
1035 height: 16px;
1036 color: #FFF;
1037 background-color: #FA1212;
1038 border-radius: 35px;
1039 font-size: 10px;
1040 line-height: 1;
1041 }
1042 .merchant-top-bar .merchant-notifications.read .merchant-notifications-count {
1043 display: none;
1044 }
1045 .merchant-top-bar .merchant-website {
1046 display: -webkit-box;
1047 display: -ms-flexbox;
1048 display: flex;
1049 -webkit-box-align: center;
1050 -ms-flex-align: center;
1051 align-items: center;
1052 gap: 8px;
1053 font-size: 13px;
1054 line-height: 16px;
1055 color: #3858E9;
1056 text-decoration: none;
1057 }
1058
1059 /* Notifications Sidebar */
1060 .merchant-notifications-sidebar {
1061 position: fixed;
1062 top: 96px;
1063 right: 0;
1064 width: 100%;
1065 max-width: 500px;
1066 height: calc(100vh - 92px);
1067 background-color: #FFF;
1068 -webkit-box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1069 box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1070 opacity: 0;
1071 visibility: hidden;
1072 -webkit-transform: translate3d(100%, 0, 0);
1073 transform: translate3d(100%, 0, 0);
1074 -webkit-transition: ease transform 300ms, ease opacity 300ms;
1075 transition: ease transform 300ms, ease opacity 300ms;
1076 z-index: 1000;
1077 }
1078 .merchant-notifications-sidebar.opened {
1079 opacity: 1;
1080 visibility: visible;
1081 -webkit-transform: none;
1082 transform: none;
1083 }
1084 .merchant-notifications-sidebar.closing {
1085 opacity: 0;
1086 -webkit-transform: translate3d(100%, 0, 0);
1087 transform: translate3d(100%, 0, 0);
1088 }
1089 .merchant-notifications-sidebar .merchant-notifications-sidebar-close {
1090 position: absolute;
1091 top: 15px;
1092 right: 15px;
1093 -webkit-transition: ease opacity 300ms;
1094 transition: ease opacity 300ms;
1095 }
1096 .merchant-notifications-sidebar .merchant-notifications-sidebar-close:hover {
1097 opacity: 0.7;
1098 }
1099 .merchant-notifications-sidebar .merchant-notifications-sidebar-header {
1100 display: -webkit-box;
1101 display: -ms-flexbox;
1102 display: flex;
1103 -webkit-box-align: center;
1104 -ms-flex-align: center;
1105 align-items: center;
1106 gap: 10px;
1107 background-color: #EAEEF2;
1108 padding: 20px 22px;
1109 }
1110 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon {
1111 display: -webkit-box;
1112 display: -ms-flexbox;
1113 display: flex;
1114 -webkit-box-align: center;
1115 -ms-flex-align: center;
1116 align-items: center;
1117 -webkit-box-pack: center;
1118 -ms-flex-pack: center;
1119 justify-content: center;
1120 width: 40px;
1121 height: 40px;
1122 background-color: #FFF;
1123 border: 1px solid #EBEDEF;
1124 border-radius: 35px;
1125 }
1126 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon svg {
1127 position: relative;
1128 top: -2px;
1129 }
1130 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content h3 {
1131 font-size: 16px;
1132 line-height: 26px;
1133 font-weight: 600;
1134 color: #3858E9;
1135 margin: 0;
1136 }
1137 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content p {
1138 font-size: 13px;
1139 line-height: 18px;
1140 color: #757575;
1141 margin: 0;
1142 }
1143 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs {
1144 position: relative;
1145 }
1146 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs:after {
1147 content: "";
1148 position: absolute;
1149 bottom: -10px;
1150 left: 20px;
1151 width: calc(100% - 40px);
1152 border-bottom: 1px solid #F0F0F1;
1153 }
1154 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs + .merchant-notifications-sidebar-body {
1155 max-height: calc(100vh - 232px);
1156 }
1157 .merchant-notifications-sidebar .merchant-notifications-sidebar-body {
1158 padding: 20px;
1159 overflow-y: auto;
1160 max-height: calc(100vh - 230px);
1161 }
1162 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar {
1163 width: 5px;
1164 }
1165 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-track {
1166 background: #e2e2e2;
1167 }
1168 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-thumb {
1169 background-color: #CCC;
1170 }
1171
1172 /* Notifications (card) */
1173 .merchant-notification .merchant-notification-date {
1174 display: block;
1175 font-size: 13px;
1176 line-height: 18px;
1177 color: #757575;
1178 }
1179 .merchant-notification .merchant-notification-date + .merchant-notification-content {
1180 margin-top: 20px;
1181 }
1182 .merchant-notification .changelog-tag {
1183 display: inline-block;
1184 font-size: 10px;
1185 line-height: 18px;
1186 color: #FFF;
1187 padding: 0px 10px;
1188 background-color: #CCC;
1189 border-radius: 3px;
1190 text-transform: uppercase;
1191 font-weight: 600;
1192 margin-bottom: 5px;
1193 }
1194 .merchant-notification .changelog-tag.changelog-added {
1195 background-color: #73B189;
1196 }
1197 .merchant-notification .changelog-tag.changelog-changed {
1198 background-color: #F6CA45;
1199 }
1200 .merchant-notification .changelog-tag.changelog-fixed {
1201 background-color: #967BE3;
1202 }
1203 .merchant-notification .changelog-description {
1204 display: block;
1205 font-size: 13px;
1206 line-height: 21px;
1207 font-weight: 400;
1208 color: #757575;
1209 margin-top: 5px;
1210 }
1211 .merchant-notification .merchant-notification-content ul {
1212 margin: 0;
1213 }
1214 .merchant-notification .merchant-notification-content ul li {
1215 display: -webkit-box;
1216 display: -ms-flexbox;
1217 display: flex;
1218 -webkit-box-orient: vertical;
1219 -webkit-box-direction: normal;
1220 -ms-flex-direction: column;
1221 flex-direction: column;
1222 -webkit-box-align: start;
1223 -ms-flex-align: start;
1224 align-items: flex-start;
1225 font-size: 16px;
1226 line-height: 26px;
1227 font-weight: 600;
1228 color: #101517;
1229 }
1230 .merchant-notification .merchant-notification-content ul li + li {
1231 margin-top: 15px;
1232 padding-top: 15px;
1233 border-top: 1px solid #E7E7E7;
1234 }
1235 .merchant-notification + .merchant-notification {
1236 margin: 20px -20px 0px;
1237 padding: 20px 20px 0px;
1238 border-top: 1px solid #E7E7E7;
1239 }
1240
1241 .merchant-wrap {
1242 padding-left: 5px;
1243 padding-right: 5px;
1244 }
1245 .merchant-wrap * {
1246 -webkit-box-sizing: border-box;
1247 box-sizing: border-box;
1248 }
1249 .merchant-wrap * *:before,
1250 .merchant-wrap * *:after {
1251 -webkit-box-sizing: border-box;
1252 box-sizing: border-box;
1253 }
1254
1255 .merchant-modules-panel {
1256 display: -webkit-box;
1257 display: -ms-flexbox;
1258 display: flex;
1259 grid-gap: 20px;
1260 -webkit-box-orient: vertical;
1261 -webkit-box-direction: normal;
1262 -ms-flex-direction: column;
1263 flex-direction: column;
1264 }
1265
1266 .merchant-modules-header {
1267 display: -webkit-box;
1268 display: -ms-flexbox;
1269 display: flex;
1270 grid-gap: 30px;
1271 }
1272
1273 .merchant-modules-header-left,
1274 .merchant-modules-header-right {
1275 -webkit-box-flex: 1;
1276 -ms-flex: 1;
1277 flex: 1;
1278 display: -webkit-box;
1279 display: -ms-flexbox;
1280 display: flex;
1281 grid-gap: 10px;
1282 -webkit-box-orient: vertical;
1283 -webkit-box-direction: normal;
1284 -ms-flex-direction: column;
1285 flex-direction: column;
1286 -webkit-box-pack: center;
1287 -ms-flex-pack: center;
1288 justify-content: center;
1289 }
1290
1291 .merchant-admin-hand-icon {
1292 width: 24px;
1293 height: auto;
1294 margin-left: 7px;
1295 position: relative;
1296 top: 2px;
1297 }
1298
1299 .merchant-modules-header-heading {
1300 font-size: 24px;
1301 line-height: 34px;
1302 font-weight: 500;
1303 color: #101517;
1304 }
1305
1306 .merchant-modules-header-subheading {
1307 font-size: 16px;
1308 line-height: 1.35em;
1309 color: #7B7B7B;
1310 font-weight: 400;
1311 }
1312
1313 .merchant-modules-header-status {
1314 margin-top: 20px;
1315 margin-bottom: 40px;
1316 display: -webkit-box;
1317 display: -ms-flexbox;
1318 display: flex;
1319 grid-gap: 20px;
1320 }
1321
1322 .merchant-modules-header-status-box {
1323 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-module-page-setting-field-radio div:not(.merchant-module-page-setting-field-desc),
2690 .merchant-module-page-setting-field-radio_alt div:not(.merchant-module-page-setting-field-desc),
2691 .merchant-module-page-setting-field-checkbox div:not(.merchant-module-page-setting-field-desc),
2692 .merchant-module-page-setting-field-checkbox_multiple div:not(.merchant-module-page-setting-field-desc) {
2693 display: -webkit-box;
2694 display: -ms-flexbox;
2695 display: flex;
2696 grid-gap: 30px;
2697 }
2698 .merchant-module-page-setting-field-radio label,
2699 .merchant-module-page-setting-field-radio_alt label,
2700 .merchant-module-page-setting-field-checkbox label,
2701 .merchant-module-page-setting-field-checkbox_multiple label {
2702 display: -webkit-box;
2703 display: -ms-flexbox;
2704 display: flex;
2705 grid-gap: 12px;
2706 -webkit-box-align: center;
2707 -ms-flex-align: center;
2708 align-items: center;
2709 -webkit-user-select: none;
2710 -moz-user-select: none;
2711 -ms-user-select: none;
2712 user-select: none;
2713 }
2714 .merchant-module-page-setting-field-radio span,
2715 .merchant-module-page-setting-field-radio_alt span,
2716 .merchant-module-page-setting-field-checkbox span,
2717 .merchant-module-page-setting-field-checkbox_multiple span {
2718 font-size: 14px;
2719 font-weight: 400;
2720 color: #1D2327;
2721 }
2722 .merchant-module-page-setting-field-radio input,
2723 .merchant-module-page-setting-field-radio_alt input,
2724 .merchant-module-page-setting-field-checkbox input,
2725 .merchant-module-page-setting-field-checkbox_multiple input {
2726 -ms-flex-negative: 0;
2727 flex-shrink: 0;
2728 margin: 0;
2729 width: 20px;
2730 height: 20px;
2731 border: 1px solid #D6D6D6;
2732 background-color: #fff;
2733 display: -webkit-inline-box;
2734 display: -ms-inline-flexbox;
2735 display: inline-flex;
2736 -webkit-box-align: center;
2737 -ms-flex-align: center;
2738 align-items: center;
2739 -webkit-box-pack: center;
2740 -ms-flex-pack: center;
2741 justify-content: center;
2742 -webkit-transition: none;
2743 transition: none;
2744 -webkit-box-sizing: border-box;
2745 box-sizing: border-box;
2746 -webkit-box-shadow: none;
2747 box-shadow: none;
2748 }
2749 .merchant-module-page-setting-field-radio input:checked,
2750 .merchant-module-page-setting-field-radio_alt input:checked,
2751 .merchant-module-page-setting-field-checkbox input:checked,
2752 .merchant-module-page-setting-field-checkbox_multiple input:checked {
2753 -webkit-transition: none;
2754 transition: none;
2755 }
2756 .merchant-module-page-setting-field-radio input:checked::before,
2757 .merchant-module-page-setting-field-radio_alt input:checked::before,
2758 .merchant-module-page-setting-field-checkbox input:checked::before,
2759 .merchant-module-page-setting-field-checkbox_multiple input:checked::before {
2760 content: "";
2761 margin: 0;
2762 padding: 0;
2763 -webkit-box-sizing: border-box;
2764 box-sizing: border-box;
2765 -webkit-transition: none;
2766 transition: none;
2767 }
2768 .merchant-module-page-setting-field-radio input[type=checkbox],
2769 .merchant-module-page-setting-field-radio_alt input[type=checkbox],
2770 .merchant-module-page-setting-field-checkbox input[type=checkbox],
2771 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox] {
2772 border-radius: 6px;
2773 }
2774 .merchant-module-page-setting-field-radio input[type=checkbox]:focus,
2775 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus,
2776 .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus,
2777 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:focus {
2778 border-color: #fff;
2779 -webkit-box-shadow: 0 0 0 2px #3858E9;
2780 box-shadow: 0 0 0 2px #3858E9;
2781 }
2782 .merchant-module-page-setting-field-radio input[type=checkbox]:checked,
2783 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked,
2784 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked,
2785 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked {
2786 border-color: #fff;
2787 background-color: #3858E9;
2788 }
2789 .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before,
2790 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before,
2791 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before,
2792 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked::before {
2793 width: 100%;
2794 height: 100%;
2795 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");
2796 background-repeat: no-repeat;
2797 background-position: 3px 4px;
2798 }
2799 .merchant-module-page-setting-field-radio input[type=radio],
2800 .merchant-module-page-setting-field-radio_alt input[type=radio],
2801 .merchant-module-page-setting-field-checkbox input[type=radio],
2802 .merchant-module-page-setting-field-checkbox_multiple input[type=radio] {
2803 border-radius: 100%;
2804 }
2805 .merchant-module-page-setting-field-radio input[type=radio]:focus,
2806 .merchant-module-page-setting-field-radio_alt input[type=radio]:focus,
2807 .merchant-module-page-setting-field-checkbox input[type=radio]:focus,
2808 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:focus {
2809 border-color: #fff;
2810 -webkit-box-shadow: none;
2811 box-shadow: none;
2812 }
2813 .merchant-module-page-setting-field-radio input[type=radio]:checked,
2814 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked,
2815 .merchant-module-page-setting-field-checkbox input[type=radio]:checked,
2816 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked {
2817 border-color: #3858E9;
2818 background-color: #fff;
2819 -webkit-box-shadow: 0 0 0 1px #3858E9;
2820 box-shadow: 0 0 0 1px #3858E9;
2821 }
2822 .merchant-module-page-setting-field-radio input[type=radio]:checked::before,
2823 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before,
2824 .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before,
2825 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked::before {
2826 width: 12px;
2827 height: 12px;
2828 border-radius: 12px;
2829 background-color: #3858E9;
2830 }
2831
2832 .merchant-module-page-setting-field-checkbox_multiple div {
2833 grid-gap: 0;
2834 }
2835 .merchant-module-page-setting-field-checkbox_multiple .merchant-module-page-setting-field-inner {
2836 display: -webkit-box;
2837 display: -ms-flexbox;
2838 display: flex;
2839 -webkit-box-orient: vertical;
2840 -webkit-box-direction: normal;
2841 -ms-flex-direction: column;
2842 flex-direction: column;
2843 gap: 15px !important;
2844 }
2845
2846 @media (max-width: 1300px) {
2847 .merchant-module-page-setting-field-radio div {
2848 grid-gap: 20px;
2849 }
2850 }
2851 .merchant-module-page-setting-field-radio span {
2852 opacity: 0.8;
2853 }
2854 .merchant-module-page-setting-field-radio input[type=radio]:checked + span {
2855 opacity: 1;
2856 }
2857
2858 .merchant-module-page-setting-field-radio_alt div {
2859 display: -webkit-box;
2860 display: -ms-flexbox;
2861 display: flex;
2862 grid-gap: 10px;
2863 -webkit-box-orient: vertical;
2864 -webkit-box-direction: normal;
2865 -ms-flex-direction: column;
2866 flex-direction: column;
2867 }
2868 .merchant-module-page-setting-field-radio_alt label span {
2869 font-size: 14px;
2870 font-weight: 400;
2871 color: #1D2327;
2872 }
2873 .merchant-module-page-setting-field-radio_alt p {
2874 margin: 0;
2875 color: #757575;
2876 }
2877 .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner {
2878 grid-gap: 30px;
2879 -webkit-box-orient: vertical;
2880 -webkit-box-direction: normal;
2881 -ms-flex-direction: column;
2882 flex-direction: column;
2883 }
2884
2885 .merchant-module-page-setting-field-content {
2886 max-width: 60vw;
2887 }
2888 .merchant-module-page-setting-field-content a {
2889 color: #3858E9;
2890 }
2891 .merchant-module-page-setting-field-content a:focus {
2892 -webkit-box-shadow: none;
2893 box-shadow: none;
2894 }
2895 .merchant-module-page-setting-field-content .merchant-module-page-setting-field-inner:empty {
2896 display: none;
2897 }
2898
2899 .merchant-info-block,
2900 .merchant-tag-pre-orders {
2901 display: -webkit-box;
2902 display: -ms-flexbox;
2903 display: flex;
2904 grid-gap: 16px;
2905 }
2906 .merchant-info-block a,
2907 .merchant-tag-pre-orders a {
2908 display: -webkit-box;
2909 display: -ms-flexbox;
2910 display: flex;
2911 -webkit-box-align: center;
2912 -ms-flex-align: center;
2913 align-items: center;
2914 -webkit-box-pack: center;
2915 -ms-flex-pack: center;
2916 justify-content: center;
2917 margin: 0;
2918 padding: 8px 26px;
2919 font-size: 14px;
2920 line-height: 20px;
2921 -webkit-user-select: none;
2922 -moz-user-select: none;
2923 -ms-user-select: none;
2924 user-select: none;
2925 min-width: 145px;
2926 font-weight: 500;
2927 text-decoration: none;
2928 border-radius: 4px;
2929 color: #202223;
2930 border: 1px solid #C9CCCF;
2931 background-color: #fff;
2932 }
2933 .merchant-info-block a:focus, .merchant-info-block a:active,
2934 .merchant-tag-pre-orders a:focus,
2935 .merchant-tag-pre-orders a:active {
2936 outline: none;
2937 -webkit-box-shadow: none;
2938 box-shadow: none;
2939 }
2940 .merchant-info-block p,
2941 .merchant-tag-pre-orders p {
2942 display: -webkit-box;
2943 display: -ms-flexbox;
2944 display: flex;
2945 -webkit-box-orient: vertical;
2946 -webkit-box-direction: normal;
2947 -ms-flex-direction: column;
2948 flex-direction: column;
2949 -webkit-box-align: start;
2950 -ms-flex-align: start;
2951 align-items: flex-start;
2952 grid-gap: 16px;
2953 font-size: 14px;
2954 line-height: 20px;
2955 margin: 0;
2956 padding: 0;
2957 }
2958 .merchant-info-block p i,
2959 .merchant-tag-pre-orders p i {
2960 -ms-flex-negative: 0;
2961 flex-shrink: 0;
2962 }
2963
2964 .merchant-info-block {
2965 padding: 15px;
2966 border-radius: 4px;
2967 border: 1px solid #BABFC3;
2968 }
2969
2970 .merchant-module-page-setting-field-select select,
2971 .merchant-module-page-setting-field-select_ajax select,
2972 .merchant-module-page-setting-field-select_size_chart select {
2973 padding: 12px 20px 12px 12px;
2974 line-height: 1.3em;
2975 width: 100%;
2976 max-width: 100%;
2977 min-height: auto;
2978 border-radius: 6px;
2979 color: #2F2F2F;
2980 border: 1px solid #D6D6D6;
2981 }
2982 .merchant-module-page-setting-field-select select:hover,
2983 .merchant-module-page-setting-field-select_ajax select:hover,
2984 .merchant-module-page-setting-field-select_size_chart select:hover {
2985 color: #2F2F2F;
2986 }
2987 .merchant-module-page-setting-field-select select:focus,
2988 .merchant-module-page-setting-field-select_ajax select:focus,
2989 .merchant-module-page-setting-field-select_size_chart select:focus {
2990 outline: none;
2991 -webkit-box-shadow: none;
2992 box-shadow: none;
2993 border-color: #3858E9;
2994 }
2995 .merchant-module-page-setting-field-select select option,
2996 .merchant-module-page-setting-field-select_ajax select option,
2997 .merchant-module-page-setting-field-select_size_chart select option {
2998 color: #2F2F2F;
2999 }
3000 .merchant-module-page-setting-field-select .select2-container .select2-selection--single,
3001 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single,
3002 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single {
3003 height: 44px !important;
3004 border: solid #d6d6d6 1px;
3005 }
3006 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
3007 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
3008 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
3009 line-height: 41px !important;
3010 }
3011 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple,
3012 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple,
3013 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple {
3014 display: -webkit-box;
3015 display: -ms-flexbox;
3016 display: flex;
3017 -webkit-box-align: center;
3018 -ms-flex-align: center;
3019 align-items: center;
3020 border: solid #d6d6d6 1px;
3021 }
3022 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__rendered,
3023 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__rendered,
3024 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__rendered {
3025 padding: 5px 10px;
3026 }
3027 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice,
3028 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice,
3029 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice {
3030 margin-top: 6px;
3031 margin-bottom: 0;
3032 }
3033 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3034 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3035 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field {
3036 position: relative;
3037 top: 3px;
3038 margin-top: 0;
3039 }
3040 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-search__field,
3041 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-search__field,
3042 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-search__field {
3043 min-height: 0;
3044 border: none;
3045 }
3046 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--single,
3047 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--multiple,
3048 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--single,
3049 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--multiple,
3050 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--single,
3051 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--multiple {
3052 border-color: #3858E9;
3053 }
3054 .merchant-module-page-setting-field-select .select2-selection__arrow,
3055 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
3056 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
3057 height: 43px !important;
3058 }
3059
3060 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper {
3061 display: -webkit-box;
3062 display: -ms-flexbox;
3063 display: flex;
3064 grid-gap: 15px;
3065 }
3066 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select {
3067 width: 100%;
3068 }
3069 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number {
3070 width: 100px;
3071 }
3072
3073 .merchant-module-page-setting-field-choices input {
3074 display: none;
3075 }
3076 .merchant-module-page-setting-field-choices input:checked + figure {
3077 border-color: #3858E9;
3078 }
3079 .merchant-module-page-setting-field-choices input:disabled + figure {
3080 opacity: 0.5;
3081 cursor: not-allowed;
3082 }
3083 .merchant-module-page-setting-field-choices label {
3084 display: -webkit-box;
3085 display: -ms-flexbox;
3086 display: flex;
3087 position: relative;
3088 }
3089 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
3090 opacity: 1;
3091 visibility: visible;
3092 -webkit-transform: translate3d(-50%, 0, 0);
3093 transform: translate3d(-50%, 0, 0);
3094 }
3095 .merchant-module-page-setting-field-choices figure {
3096 display: -webkit-box;
3097 display: -ms-flexbox;
3098 display: flex;
3099 margin: 0;
3100 padding: 2px;
3101 border-radius: 4px;
3102 border: 2px solid transparent;
3103 }
3104 .merchant-module-page-setting-field-choices .merchant-tooltip {
3105 position: absolute;
3106 z-index: 10;
3107 left: 50%;
3108 bottom: calc(100% + 12px);
3109 padding: 3px 12px;
3110 font-size: 11px;
3111 white-space: nowrap;
3112 opacity: 0;
3113 visibility: hidden;
3114 -webkit-transform: translate3d(-50%, 6px, 0);
3115 transform: translate3d(-50%, 6px, 0);
3116 -webkit-transition: all 0.2s;
3117 transition: all 0.2s;
3118 border-radius: 3px;
3119 color: #f7f7f7;
3120 background-color: #212121;
3121 }
3122 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
3123 content: "";
3124 position: absolute;
3125 left: 50%;
3126 bottom: -12px;
3127 border: 6px solid transparent;
3128 border-top-color: #212121;
3129 -webkit-transform: translate3d(-50%, 0, 0);
3130 transform: translate3d(-50%, 0, 0);
3131 }
3132 .merchant-module-page-setting-field-choices .merchant-choices {
3133 display: -webkit-box;
3134 display: -ms-flexbox;
3135 display: flex;
3136 grid-gap: 10px;
3137 }
3138 .merchant-module-page-setting-field-choices .merchant-choices label {
3139 cursor: pointer;
3140 }
3141 .merchant-module-page-setting-field-choices .merchant-choices svg {
3142 width: 20px;
3143 height: 20px;
3144 }
3145
3146 .merchant-module-page-setting-field-buttons input {
3147 display: none;
3148 }
3149 .merchant-module-page-setting-field-buttons input:checked + span {
3150 color: #fff;
3151 background-color: #3858E9;
3152 }
3153 .merchant-module-page-setting-field-buttons label {
3154 display: -webkit-box;
3155 display: -ms-flexbox;
3156 display: flex;
3157 }
3158 .merchant-module-page-setting-field-buttons span {
3159 display: -webkit-box;
3160 display: -ms-flexbox;
3161 display: flex;
3162 -webkit-box-align: center;
3163 -ms-flex-align: center;
3164 align-items: center;
3165 -webkit-box-pack: center;
3166 -ms-flex-pack: center;
3167 justify-content: center;
3168 margin: 0;
3169 padding: 10px 15px;
3170 border-radius: 2px;
3171 -webkit-user-select: none;
3172 -moz-user-select: none;
3173 -ms-user-select: none;
3174 user-select: none;
3175 min-width: 120px;
3176 font-weight: 500;
3177 }
3178 .merchant-module-page-setting-field-buttons .merchant-buttons {
3179 display: -webkit-inline-box;
3180 display: -ms-inline-flexbox;
3181 display: inline-flex;
3182 padding: 3px;
3183 border: 1px solid #D6D6D6;
3184 border-radius: 4px;
3185 }
3186 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
3187 text-decoration: underline;
3188 }
3189 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
3190 text-decoration: line-through;
3191 }
3192 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
3193 text-decoration: overline;
3194 }
3195
3196 .merchant-module-page-setting-field-buttons_content input,
3197 .merchant-module-page-setting-field-buttons_alt input {
3198 display: none;
3199 }
3200 .merchant-module-page-setting-field-buttons_content label,
3201 .merchant-module-page-setting-field-buttons_alt label {
3202 display: -webkit-box;
3203 display: -ms-flexbox;
3204 display: flex;
3205 cursor: pointer;
3206 }
3207 .merchant-module-page-setting-field-buttons_content label:hover,
3208 .merchant-module-page-setting-field-buttons_alt label:hover {
3209 position: relative;
3210 z-index: 10;
3211 }
3212 .merchant-module-page-setting-field-buttons_content label > span,
3213 .merchant-module-page-setting-field-buttons_alt label > span {
3214 display: -webkit-box;
3215 display: -ms-flexbox;
3216 display: flex;
3217 -webkit-box-align: center;
3218 -ms-flex-align: center;
3219 align-items: center;
3220 -webkit-box-pack: center;
3221 -ms-flex-pack: center;
3222 justify-content: center;
3223 margin: 0;
3224 padding: 10px 15px;
3225 -webkit-user-select: none;
3226 -moz-user-select: none;
3227 -ms-user-select: none;
3228 user-select: none;
3229 min-width: 120px;
3230 font-weight: 500;
3231 border-radius: 4px;
3232 border: 1px solid #D6D6D6;
3233 background-color: #fff;
3234 }
3235 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content,
3236 .merchant-module-page-setting-field-buttons_content .merchant-buttons,
3237 .merchant-module-page-setting-field-buttons_alt .merchant-buttons-content,
3238 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
3239 display: -webkit-box;
3240 display: -ms-flexbox;
3241 display: flex;
3242 -ms-flex-wrap: wrap;
3243 flex-wrap: wrap;
3244 grid-gap: 5px;
3245 padding: 3px;
3246 }
3247
3248 .merchant-module-page-setting-field-buttons_alt input:checked + span {
3249 color: #fff;
3250 background-color: #3858E9;
3251 }
3252
3253 .merchant-module-page-setting-field-buttons_content input:checked + span {
3254 color: inherit;
3255 border: 1px solid #3858E9;
3256 -webkit-box-shadow: 0 0 0 1px #3858e9 inset;
3257 box-shadow: 0 0 0 1px #3858e9 inset;
3258 }
3259 .merchant-module-page-setting-field-buttons_content label {
3260 -webkit-box-flex: 1;
3261 -ms-flex: 1;
3262 flex: 1;
3263 }
3264 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content {
3265 gap: 10px;
3266 }
3267 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content {
3268 display: -webkit-box;
3269 display: -ms-flexbox;
3270 display: flex;
3271 -webkit-box-align: center;
3272 -ms-flex-align: center;
3273 align-items: center;
3274 -webkit-box-pack: start;
3275 -ms-flex-pack: start;
3276 justify-content: flex-start;
3277 gap: 10px;
3278 -webkit-box-flex: 1;
3279 -ms-flex: 1;
3280 flex: 1;
3281 }
3282 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content > span {
3283 display: -webkit-box;
3284 display: -ms-flexbox;
3285 display: flex;
3286 -ms-flex-item-align: stretch;
3287 align-self: stretch;
3288 -webkit-box-orient: vertical;
3289 -webkit-box-direction: normal;
3290 -ms-flex-direction: column;
3291 flex-direction: column;
3292 gap: 5px;
3293 }
3294
3295 .merchant-animated-buttons .merchant-buttons {
3296 display: grid;
3297 grid-template-columns: repeat(5, 1fr);
3298 }
3299 .merchant-animated-buttons span {
3300 width: 100%;
3301 }
3302
3303 @media (max-width: 1470px) {
3304 .merchant-animated-buttons .merchant-buttons {
3305 grid-template-columns: repeat(3, 1fr);
3306 }
3307 }
3308 @media (max-width: 1050px) {
3309 .merchant-animated-buttons .merchant-buttons {
3310 grid-template-columns: repeat(2, 1fr);
3311 }
3312 }
3313 /* Sortable Field */
3314 .merchant-sortable {
3315 max-width: 300px;
3316 }
3317 .merchant-sortable ul.ui-sortable li {
3318 position: relative;
3319 overflow: hidden;
3320 padding: 0;
3321 color: #1E1E1E;
3322 border: 1px solid #ddd;
3323 border-radius: 2px;
3324 text-transform: capitalize;
3325 line-height: 36px;
3326 cursor: -webkit-grab;
3327 cursor: grab;
3328 }
3329 .merchant-sortable ul.ui-sortable li .dashicons {
3330 width: 36px;
3331 height: 36px;
3332 -ms-flex-preferred-size: 36px;
3333 flex-basis: 36px;
3334 display: -webkit-box;
3335 display: -ms-flexbox;
3336 display: flex;
3337 -webkit-box-pack: center;
3338 -ms-flex-pack: center;
3339 justify-content: center;
3340 -webkit-box-align: center;
3341 -ms-flex-align: center;
3342 align-items: center;
3343 text-align: center;
3344 -webkit-box-sizing: border-box;
3345 box-sizing: border-box;
3346 }
3347 .merchant-sortable ul.ui-sortable li .dashicons:before {
3348 font-size: 16px;
3349 line-height: 1em;
3350 }
3351 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
3352 float: left;
3353 padding: 0;
3354 margin: 0 10px 0 0;
3355 border: none;
3356 border-right: 1px solid #ddd;
3357 }
3358 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
3359 float: right;
3360 color: #3858E9;
3361 padding: 0;
3362 margin: 0 0 0 10px;
3363 border: none;
3364 border-left: 1px solid #ddd;
3365 }
3366 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
3367 cursor: pointer;
3368 }
3369 .merchant-sortable ul.ui-sortable li.invisible {
3370 color: #6E7780;
3371 border: 1px solid #CAD2F6;
3372 background-color: #EBEEFB;
3373 }
3374 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
3375 content: "\f530";
3376 }
3377
3378 /* Sortable Repeater Field */
3379 .merchant-group-field {
3380 padding: 30px 20px;
3381 border: 2px solid #F0F0F1;
3382 border-radius: 4px;
3383 margin-bottom: 20px;
3384 }
3385 .merchant-group-field .title-area {
3386 position: relative;
3387 }
3388 .merchant-group-field .title-area .merchant-module-page-setting-field-title {
3389 margin-bottom: 10px;
3390 }
3391 .merchant-group-field .title-area .field-status:not(.hidden) {
3392 border-radius: 15px;
3393 padding: 3px 8px;
3394 font-size: 12px;
3395 margin-left: 20px;
3396 }
3397 .merchant-group-field .title-area .field-status:not(.hidden).active {
3398 color: #04543F;
3399 background-color: #DEF7EC;
3400 }
3401 .merchant-group-field .title-area .field-status:not(.hidden).inactive {
3402 color: #723B14;
3403 background-color: #FDF6B2;
3404 }
3405 .merchant-group-field .title-area.accordion-style {
3406 padding-right: 40px;
3407 }
3408 .merchant-group-field .title-area.accordion-style .accordion-icon {
3409 position: absolute;
3410 top: 0;
3411 right: -7px;
3412 width: 40px;
3413 height: 40px;
3414 line-height: 40px;
3415 cursor: pointer;
3416 font-size: 17px;
3417 -webkit-transition: 300ms;
3418 transition: 300ms;
3419 }
3420 .merchant-group-field .title-area.accordion-style.ui-accordion-header-active .accordion-icon {
3421 -webkit-transform: rotate(180deg);
3422 transform: rotate(180deg);
3423 }
3424 .merchant-group-field .merchant-group-fields-container {
3425 padding-top: 20px;
3426 }
3427 .merchant-group-field .merchant-module-page-setting-field:last-child {
3428 margin-bottom: 0 !important;
3429 }
3430
3431 .merchant-sortable-repeater-control {
3432 max-width: 100%;
3433 }
3434 .merchant-sortable-repeater-control .sortable {
3435 list-style-type: none;
3436 margin: 0;
3437 padding: 0;
3438 }
3439 .merchant-sortable-repeater-control .sortable input[type=text] {
3440 width: 100%;
3441 margin: 0;
3442 border-radius: 4px 0 0 4px;
3443 border: 1px solid #D6D6D6;
3444 padding: 12px 8px;
3445 line-height: 1.3em;
3446 }
3447 .merchant-sortable-repeater-control .sortable input[type=text]:focus {
3448 border-color: #3858E9;
3449 outline: none;
3450 -webkit-box-shadow: none;
3451 box-shadow: none;
3452 }
3453 .merchant-sortable-repeater-control .sortable div {
3454 cursor: -webkit-grab;
3455 cursor: grab;
3456 margin-bottom: 7px;
3457 }
3458 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete {
3459 display: -webkit-box;
3460 display: -ms-flexbox;
3461 display: flex;
3462 -webkit-box-align: center;
3463 -ms-flex-align: center;
3464 align-items: center;
3465 -webkit-box-pack: center;
3466 -ms-flex-pack: center;
3467 justify-content: center;
3468 margin: 0;
3469 width: 44px;
3470 height: auto;
3471 font-size: 1.3em;
3472 line-height: 34px;
3473 color: #d4d4d4;
3474 background: #fff;
3475 padding: 0;
3476 vertical-align: top;
3477 margin-left: -1px;
3478 border: 1px solid #D6D6D6;
3479 text-decoration: none;
3480 }
3481 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt {
3482 width: 100%;
3483 text-decoration: none;
3484 margin: 0;
3485 font-weight: 600;
3486 color: #50575e;
3487 font-size: 1.1em;
3488 line-height: 34px;
3489 height: auto;
3490 }
3491 .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus {
3492 outline: none;
3493 -webkit-box-shadow: none;
3494 box-shadow: none;
3495 }
3496 .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 {
3497 color: #a7a7a7;
3498 }
3499 .merchant-sortable-repeater-control .repeater {
3500 display: -webkit-box;
3501 display: -ms-flexbox;
3502 display: flex;
3503 }
3504 .merchant-sortable-repeater-control .repeater .dashicons-menu {
3505 display: -webkit-box;
3506 display: -ms-flexbox;
3507 display: flex;
3508 -webkit-box-align: center;
3509 -ms-flex-align: center;
3510 align-items: center;
3511 -webkit-box-pack: center;
3512 -ms-flex-pack: center;
3513 justify-content: center;
3514 margin: 0;
3515 width: 44px;
3516 height: auto;
3517 font-size: 1.3em;
3518 line-height: 34px;
3519 background: #fff;
3520 padding: 0;
3521 vertical-align: top;
3522 margin-left: -1px;
3523 border: 1px solid #D6D6D6;
3524 }
3525 .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
3526 color: #a7a7a7;
3527 }
3528 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add {
3529 color: #3858E9;
3530 border-color: #3858E9;
3531 background-color: transparent;
3532 margin-top: 10px;
3533 padding: 4px 19px;
3534 }
3535 .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus {
3536 outline: none;
3537 -webkit-box-shadow: none;
3538 box-shadow: none;
3539 background-color: #ffffff;
3540 }
3541 .merchant-sortable-repeater-control.disable-sorting .dashicons-menu {
3542 display: none;
3543 }
3544
3545 /* Flexible Content Field */
3546 .merchant-flexible-content-control {
3547 max-width: 100%;
3548 }
3549 .merchant-flexible-content-control .layout {
3550 position: relative;
3551 }
3552 .merchant-flexible-content-control .sortable {
3553 position: relative;
3554 list-style-type: none;
3555 margin: 0;
3556 padding: 0;
3557 }
3558 .merchant-flexible-content-control .sortable input[type=text] {
3559 width: 100%;
3560 margin: 0;
3561 border-radius: 4px 0 0 4px;
3562 border: 1px solid #D6D6D6;
3563 padding: 8px;
3564 line-height: 1.3em;
3565 }
3566 .merchant-flexible-content-control .sortable input[type=text]:focus {
3567 border-color: #3858E9;
3568 outline: none;
3569 -webkit-box-shadow: none;
3570 box-shadow: none;
3571 }
3572 .merchant-flexible-content-control .customize-control-flexible-content-move {
3573 display: none;
3574 cursor: -webkit-grab;
3575 cursor: grab;
3576 position: absolute;
3577 top: 19px;
3578 left: -22px;
3579 z-index: 999;
3580 }
3581 .merchant-flexible-content-control .customize-control-flexible-content-delete,
3582 .merchant-flexible-content-control .customize-control-flexible-content-duplicate {
3583 text-decoration: none;
3584 }
3585 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt,
3586 .merchant-flexible-content-control .customize-control-flexible-content-duplicate .dashicons-no-alt {
3587 width: 100%;
3588 text-decoration: none;
3589 margin: 0;
3590 font-weight: 600;
3591 color: #50575e;
3592 font-size: 1.1em;
3593 line-height: 34px;
3594 height: auto;
3595 }
3596 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus,
3597 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover,
3598 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus {
3599 outline: none;
3600 -webkit-box-shadow: none;
3601 box-shadow: none;
3602 }
3603 .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,
3604 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover .dashicons-no-alt,
3605 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus .dashicons-no-alt {
3606 color: #a7a7a7;
3607 }
3608 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover svg, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus svg,
3609 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover svg,
3610 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus svg {
3611 fill: #a7a7a7;
3612 }
3613 .merchant-flexible-content-control .customize-control-flexible-content-accordion {
3614 display: -webkit-box;
3615 display: -ms-flexbox;
3616 display: flex;
3617 -webkit-box-align: center;
3618 -ms-flex-align: center;
3619 align-items: center;
3620 -webkit-box-pack: end;
3621 -ms-flex-pack: end;
3622 justify-content: flex-end;
3623 margin: 0;
3624 width: 40px;
3625 height: auto;
3626 font-size: 1.5em;
3627 line-height: 34px;
3628 color: #50575e;
3629 background: #fff;
3630 padding: 0;
3631 vertical-align: top;
3632 cursor: pointer;
3633 }
3634 .merchant-flexible-content-control .customize-control-flexible-content-accordion svg {
3635 -webkit-transition: 300ms;
3636 transition: 300ms;
3637 -webkit-transform: rotate(180deg);
3638 transform: rotate(180deg);
3639 }
3640 .merchant-flexible-content-control .layout-header.ui-accordion-header-collapsed .customize-control-flexible-content-accordion svg {
3641 -webkit-transform: rotate(0deg);
3642 transform: rotate(0deg);
3643 }
3644 .merchant-flexible-content-control .merchant-flexible-content.empty {
3645 border: 2px dashed #dcdcde;
3646 min-height: 100px;
3647 margin-bottom: 10px;
3648 }
3649 .merchant-flexible-content-control.default-style .layout {
3650 background: white;
3651 border: 1px solid #c3c4c7;
3652 border-left: 3px solid #3858e9;
3653 }
3654 .merchant-flexible-content-control.default-style .layout .layout-header {
3655 padding: 15px 20px;
3656 }
3657 .merchant-flexible-content-control.default-style .layout .layout-body {
3658 padding: 15px 20px;
3659 }
3660 .merchant-flexible-content-control.default-style .layout .layout-body .layout-field:last-of-type .merchant-group-field {
3661 margin-bottom: 5px;
3662 }
3663 .merchant-flexible-content-control.table-style .layout .layout-header {
3664 padding-bottom: 8px;
3665 margin-bottom: 15px;
3666 }
3667 .merchant-flexible-content-control.table-style .layout .layout-body {
3668 -webkit-box-orient: horizontal;
3669 -webkit-box-direction: normal;
3670 -ms-flex-direction: row;
3671 flex-direction: row;
3672 }
3673 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
3674 display: none;
3675 }
3676 .merchant-flexible-content-control.has-accordion .layout-header {
3677 cursor: pointer;
3678 }
3679 .merchant-flexible-content-control .layouts {
3680 display: none;
3681 }
3682 .merchant-flexible-content-control .layout {
3683 margin-bottom: 20px;
3684 }
3685 .merchant-flexible-content-control .layout .layout__inner {
3686 width: calc(100% + 60px);
3687 margin-left: -30px;
3688 padding-inline: 30px;
3689 }
3690 .merchant-flexible-content-control .layout .layout__inner:hover .customize-control-flexible-content-move {
3691 display: block;
3692 }
3693 .merchant-flexible-content-control .layout .layout-header {
3694 display: -webkit-box;
3695 display: -ms-flexbox;
3696 display: flex;
3697 -webkit-box-align: center;
3698 -ms-flex-align: center;
3699 align-items: center;
3700 border-bottom: 1px solid #f3f3f3;
3701 }
3702 .merchant-flexible-content-control .layout .layout-count {
3703 border-radius: 50%;
3704 width: 24px;
3705 height: 23px;
3706 border: 1px solid #949494;
3707 text-align: center;
3708 display: -webkit-box;
3709 display: -ms-flexbox;
3710 display: flex;
3711 -webkit-box-pack: center;
3712 -ms-flex-pack: center;
3713 justify-content: center;
3714 -webkit-box-orient: vertical;
3715 -webkit-box-direction: normal;
3716 -ms-flex-direction: column;
3717 flex-direction: column;
3718 font-size: 12px;
3719 font-weight: bold;
3720 margin-right: 10px;
3721 }
3722 .merchant-flexible-content-control .layout .layout-title {
3723 font-size: 14px;
3724 font-weight: bold;
3725 }
3726 .merchant-flexible-content-control .layout .layout-toggle {
3727 display: -webkit-box;
3728 display: -ms-flexbox;
3729 display: flex;
3730 margin: 0;
3731 padding: 0;
3732 -webkit-box-pack: end;
3733 -ms-flex-pack: end;
3734 justify-content: flex-end;
3735 -webkit-box-flex: 1;
3736 -ms-flex-positive: 1;
3737 flex-grow: 1;
3738 }
3739 .merchant-flexible-content-control .layout .layout-toggle span:hover {
3740 opacity: 0.6;
3741 }
3742 .merchant-flexible-content-control .layout .layout-body {
3743 display: -webkit-box;
3744 display: -ms-flexbox;
3745 display: flex;
3746 -webkit-box-orient: vertical;
3747 -webkit-box-direction: normal;
3748 -ms-flex-direction: column;
3749 flex-direction: column;
3750 }
3751 .merchant-flexible-content-control .layout .layout-actions {
3752 position: absolute;
3753 top: 15px;
3754 right: 22px;
3755 }
3756 .merchant-flexible-content-control .layout .layout-actions-has_accordion {
3757 right: 43px;
3758 }
3759 .merchant-flexible-content-control .layout .layout-actions-no_accordion {
3760 top: 0;
3761 right: 0;
3762 }
3763 .merchant-flexible-content-control .layout .layout-actions a:hover {
3764 opacity: 0.6;
3765 }
3766 .merchant-flexible-content-control .layout .layout-actions__toggle:focus {
3767 outline: none;
3768 -webkit-box-shadow: none;
3769 box-shadow: none;
3770 }
3771 .merchant-flexible-content-control .layout .layout-actions__inner {
3772 position: absolute;
3773 right: -5px;
3774 top: 25px;
3775 z-index: 99;
3776 font-size: 13px;
3777 padding: 7px 15px;
3778 min-width: 200px;
3779 background: #fff;
3780 border: 1px solid #DDDDDD;
3781 border-radius: 5px;
3782 }
3783 .merchant-flexible-content-control .layout .layout-actions__inner a {
3784 width: 100%;
3785 display: -webkit-box;
3786 display: -ms-flexbox;
3787 display: flex;
3788 padding: 10px 0;
3789 -webkit-box-align: center;
3790 -ms-flex-align: center;
3791 align-items: center;
3792 gap: 8px;
3793 }
3794 .merchant-flexible-content-control .layout .layout-actions__inner svg {
3795 width: 24px;
3796 height: 20px;
3797 }
3798 .merchant-flexible-content-control .layout .layout-actions__inner span {
3799 color: #1E1E1E;
3800 }
3801 .merchant-flexible-content-control .layout .layout-field.flex-grow {
3802 -webkit-box-flex: 1;
3803 -ms-flex-positive: 1;
3804 flex-grow: 1;
3805 }
3806 .merchant-flexible-content-control .layout .layout-field:last-of-type .merchant-module-page-setting-field {
3807 margin-bottom: 0;
3808 }
3809 .merchant-flexible-content-control .layout .dashicons-menu {
3810 display: -webkit-box;
3811 display: -ms-flexbox;
3812 display: flex;
3813 -webkit-box-align: center;
3814 -ms-flex-align: center;
3815 align-items: center;
3816 -webkit-box-pack: center;
3817 -ms-flex-pack: center;
3818 justify-content: center;
3819 margin: 0;
3820 width: 40px;
3821 height: auto;
3822 font-size: 1.3em;
3823 line-height: 34px;
3824 background: #fff;
3825 padding: 0;
3826 vertical-align: top;
3827 margin-left: -1px;
3828 }
3829 .merchant-flexible-content-control .layout .dashicons-menu:hover {
3830 color: #a7a7a7;
3831 }
3832 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
3833 position: relative;
3834 display: inline-block;
3835 }
3836 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
3837 opacity: 0;
3838 visibility: hidden;
3839 position: absolute;
3840 background-color: #ffffff;
3841 border: 1px solid #c3c4c7;
3842 border-left: 3px solid #3858e9;
3843 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3844 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
3845 width: 180px;
3846 bottom: 100%;
3847 display: -webkit-box;
3848 display: -ms-flexbox;
3849 display: flex;
3850 -webkit-box-orient: vertical;
3851 -webkit-box-direction: normal;
3852 -ms-flex-direction: column;
3853 flex-direction: column;
3854 left: 50%;
3855 -webkit-transform: translate(-50%, 10px);
3856 transform: translate(-50%, 10px);
3857 padding: 3px 3px 3px 5px;
3858 }
3859 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
3860 z-index: 10;
3861 opacity: 1;
3862 visibility: visible;
3863 -webkit-transform: translate(-50%, -15px);
3864 transform: translate(-50%, -15px);
3865 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3866 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
3867 }
3868 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
3869 right: calc(50% - 12px);
3870 bottom: -14px;
3871 border-width: 14px 14px 0 15px;
3872 border-color: #c3c4c7 transparent transparent transparent;
3873 }
3874 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3875 content: "";
3876 right: calc(50% - 10px);
3877 bottom: -12px;
3878 border-width: 12px 12px 0 13px;
3879 border-color: #ffffff transparent transparent transparent;
3880 }
3881 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
3882 position: absolute;
3883 z-index: -1;
3884 content: "";
3885 border-style: solid;
3886 -webkit-transition-duration: 0.3s;
3887 transition-duration: 0.3s;
3888 transition-property: -webkit-transform;
3889 -webkit-transition-property: -webkit-transform;
3890 transition-property: transform;
3891 transition-property: transform, -webkit-transform;
3892 }
3893 .merchant-flexible-content-control .customize-control-flexible-content-add {
3894 display: block;
3895 -ms-flex-negative: 0;
3896 flex-shrink: 0;
3897 padding: 10px;
3898 text-decoration: none;
3899 }
3900 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
3901 background: #f0f0f1;
3902 }
3903 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
3904 color: #3858E9;
3905 border-color: #3858E9;
3906 background-color: transparent;
3907 margin-bottom: 0;
3908 padding: 4px 19px;
3909 }
3910 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
3911 outline: none;
3912 -webkit-box-shadow: none;
3913 box-shadow: none;
3914 background-color: #ffffff;
3915 }
3916 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
3917 display: none;
3918 }
3919 .merchant-flexible-content-control .merchant-datetime-field input {
3920 padding: 12px !important;
3921 line-height: 1.3em;
3922 width: 100%;
3923 max-width: 100%;
3924 min-height: auto;
3925 border: 1px solid #d6d6d6;
3926 border-radius: 4px !important;
3927 }
3928 .merchant-flexible-content-control .merchant-datetime-field input:focus {
3929 outline: none;
3930 -webkit-box-shadow: none;
3931 box-shadow: none;
3932 border-color: #3858E9;
3933 }
3934
3935 .flexible-content-template {
3936 display: none;
3937 }
3938
3939 .merchant-module-page-setting-field-range .merchant-range {
3940 position: relative;
3941 width: 100%;
3942 width: 300px;
3943 display: -webkit-box;
3944 display: -ms-flexbox;
3945 display: flex;
3946 -webkit-box-align: center;
3947 -ms-flex-align: center;
3948 align-items: center;
3949 -webkit-box-pack: justify;
3950 -ms-flex-pack: justify;
3951 justify-content: space-between;
3952 }
3953 .merchant-module-page-setting-field-range input[type=range] {
3954 -webkit-appearance: none;
3955 -moz-appearance: none;
3956 appearance: none;
3957 width: calc(100% - 105px);
3958 height: 2px;
3959 border-radius: 5px;
3960 outline: none;
3961 padding: 0;
3962 margin: 0;
3963 background-color: #ddd;
3964 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
3965 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
3966 }
3967 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb {
3968 -webkit-appearance: none;
3969 appearance: none;
3970 width: 15px;
3971 height: 15px;
3972 border-radius: 50%;
3973 background: #3858E9;
3974 cursor: pointer;
3975 -webkit-transition: background 0.15s ease-in-out;
3976 transition: background 0.15s ease-in-out;
3977 }
3978 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover {
3979 background: #3858E9;
3980 }
3981 .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb {
3982 background: #3858E9;
3983 }
3984 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb {
3985 width: 15px;
3986 height: 15px;
3987 border: 0;
3988 border-radius: 50%;
3989 background: #3858E9;
3990 cursor: pointer;
3991 -moz-transition: background 0.15s ease-in-out;
3992 transition: background 0.15s ease-in-out;
3993 }
3994 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover {
3995 background: #3858E9;
3996 }
3997 .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb {
3998 background: #3858E9;
3999 }
4000 .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb {
4001 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
4002 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
4003 }
4004 .merchant-module-page-setting-field-range input[type=range]::-moz-range-track {
4005 border: 0;
4006 background: #d7dcdf;
4007 }
4008 .merchant-module-page-setting-field-range input[type=number] {
4009 padding: 12px 25px 12px 10px;
4010 line-height: 1.3em;
4011 width: 100%;
4012 max-width: 85px;
4013 min-height: auto;
4014 border: 1px solid #D6D6D6;
4015 }
4016 .merchant-module-page-setting-field-range input[type=number]:focus {
4017 outline: none;
4018 -webkit-box-shadow: none;
4019 box-shadow: none;
4020 border-color: #3858E9;
4021 }
4022 .merchant-module-page-setting-field-range .merchant-range-unit {
4023 color: #3858E9;
4024 position: absolute;
4025 z-index: 1;
4026 right: 10px;
4027 font-size: 11px;
4028 line-height: 1em;
4029 }
4030
4031 .merchant-module-page-setting-field-color input {
4032 padding: 0 10px;
4033 line-height: 1em;
4034 width: 100%;
4035 max-width: 254px;
4036 min-height: auto;
4037 border: 1px solid #D6D6D6;
4038 }
4039 .merchant-module-page-setting-field-color input:focus {
4040 outline: none;
4041 -webkit-box-shadow: none;
4042 box-shadow: none;
4043 border-color: #3858E9;
4044 }
4045 .merchant-module-page-setting-field-color .merchant-color {
4046 display: -webkit-box;
4047 display: -ms-flexbox;
4048 display: flex;
4049 grid-gap: 10px;
4050 }
4051 .merchant-module-page-setting-field-color .merchant-color-picker {
4052 cursor: pointer;
4053 width: 36px;
4054 height: 36px;
4055 border: 1px solid rgba(0, 0, 0, 0.1);
4056 border-radius: 4px;
4057 }
4058
4059 .merchant-module-page-settings-dimensions {
4060 display: -webkit-box;
4061 display: -ms-flexbox;
4062 display: flex;
4063 grid-gap: 10px;
4064 }
4065 .merchant-module-page-settings-dimensions > div {
4066 display: -webkit-box;
4067 display: -ms-flexbox;
4068 display: flex;
4069 -webkit-box-orient: vertical;
4070 -webkit-box-direction: normal;
4071 -ms-flex-direction: column;
4072 flex-direction: column;
4073 }
4074 .merchant-module-page-settings-dimensions label {
4075 color: gray;
4076 font-size: 12px;
4077 margin-top: 7px;
4078 }
4079 .merchant-module-page-settings-dimensions input {
4080 max-width: 70px;
4081 width: 100%;
4082 font-size: 12px;
4083 border: 1px solid #D6D6D6;
4084 }
4085
4086 .merchant-module-page-setting-field-wc_coupons .merchant-wc-coupon-selector select {
4087 width: 300px;
4088 min-height: auto;
4089 border: 1px solid #D6D6D6;
4090 padding: 12px;
4091 line-height: 1.3em;
4092 border-radius: 6px;
4093 color: #2F2F2F;
4094 border: 1px solid #D6D6D6;
4095 }
4096
4097 .merchant-module-page-settings-unit {
4098 margin-bottom: 10px;
4099 }
4100 .merchant-module-page-settings-unit select {
4101 font-size: 13px;
4102 border: 0;
4103 }
4104
4105 .merchant-module-page-settings-devices {
4106 display: -webkit-box;
4107 display: -ms-flexbox;
4108 display: flex;
4109 -webkit-column-gap: 10px;
4110 -moz-column-gap: 10px;
4111 column-gap: 10px;
4112 -webkit-box-pack: end;
4113 -ms-flex-pack: end;
4114 justify-content: flex-end;
4115 }
4116 .merchant-module-page-settings-devices button {
4117 border: 0;
4118 background: transparent;
4119 padding: 0;
4120 cursor: pointer;
4121 }
4122 .merchant-module-page-settings-devices button.active {
4123 color: #3858e9;
4124 }
4125 .merchant-module-page-settings-devices button:hover {
4126 color: #3858e9;
4127 }
4128 .merchant-module-page-settings-devices button i {
4129 font-size: 14px;
4130 line-height: 20px;
4131 width: auto;
4132 }
4133
4134 .merchant-module-page-settings-device-container:not(.active) {
4135 display: none;
4136 }
4137
4138 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
4139 max-width: 320px;
4140 }
4141 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
4142 margin-bottom: -30px;
4143 margin-top: 0;
4144 }
4145
4146 .merchant-module-page-setting-field-warning {
4147 padding: 8px 10px;
4148 font-size: 14px;
4149 line-height: 1.6;
4150 color: #1D2327;
4151 border-radius: 4px;
4152 border: 1px solid #D72C0D;
4153 background-color: #FFF4F4;
4154 }
4155
4156 .merchant-module-page-setting-field-info {
4157 padding: 8px 10px;
4158 font-size: 14px;
4159 line-height: 1.6;
4160 color: #1D2327;
4161 border-radius: 4px;
4162 border: 1px solid #0d65d7;
4163 background-color: #e6effa;
4164 }
4165 .merchant-module-page-setting-field-info[data-id=shortcode_info] {
4166 margin-bottom: 0;
4167 }
4168
4169 .merchant-module-page-setting-field-divider {
4170 border-bottom: 1px solid #F0F0F1;
4171 }
4172 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
4173 font-size: 16px;
4174 }
4175
4176 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
4177 display: -webkit-box;
4178 display: -ms-flexbox;
4179 display: flex;
4180 grid-gap: 5px;
4181 -ms-flex-wrap: wrap;
4182 flex-wrap: wrap;
4183 margin-bottom: 15px;
4184 }
4185 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
4186 display: none;
4187 }
4188 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
4189 position: relative;
4190 display: -webkit-box;
4191 display: -ms-flexbox;
4192 display: flex;
4193 -webkit-box-align: center;
4194 -ms-flex-align: center;
4195 align-items: center;
4196 -webkit-box-pack: center;
4197 -ms-flex-pack: center;
4198 justify-content: center;
4199 border-radius: 4px;
4200 padding: 2px;
4201 border: 1px solid #eee;
4202 background-color: #fff;
4203 }
4204 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
4205 cursor: -webkit-grab;
4206 cursor: grab;
4207 width: 100%;
4208 height: 100%;
4209 max-height: 75px;
4210 -o-object-fit: cover;
4211 object-fit: cover;
4212 }
4213 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
4214 cursor: -webkit-grabbing;
4215 cursor: grabbing;
4216 }
4217 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
4218 cursor: pointer;
4219 position: absolute;
4220 z-index: 1;
4221 top: 5px;
4222 right: 5px;
4223 width: 16px;
4224 height: 16px;
4225 display: -webkit-box;
4226 display: -ms-flexbox;
4227 display: flex;
4228 -webkit-box-pack: center;
4229 -ms-flex-pack: center;
4230 justify-content: center;
4231 -webkit-box-align: center;
4232 -ms-flex-align: center;
4233 align-items: center;
4234 color: #fff;
4235 background-color: #c5280c;
4236 font-size: 14px;
4237 line-height: 1em;
4238 border-radius: 16px;
4239 opacity: 0;
4240 -webkit-transition: all 0.2s;
4241 transition: all 0.2s;
4242 }
4243 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
4244 opacity: 1;
4245 }
4246 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
4247 cursor: pointer;
4248 -webkit-user-select: none;
4249 -moz-user-select: none;
4250 -ms-user-select: none;
4251 user-select: none;
4252 display: -webkit-inline-box;
4253 display: -ms-inline-flexbox;
4254 display: inline-flex;
4255 padding: 0.4375rem 1rem;
4256 font-size: 0.875rem;
4257 font-weight: 600;
4258 line-height: 1.5;
4259 white-space: nowrap;
4260 text-transform: none;
4261 text-decoration: none;
4262 color: #212b36;
4263 background-color: #fff;
4264 border: 1px solid #c4cdd5;
4265 border-radius: 0.25rem;
4266 -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);
4267 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);
4268 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);
4269 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);
4270 }
4271 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
4272 outline: none;
4273 -webkit-box-shadow: none;
4274 box-shadow: none;
4275 }
4276 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
4277 visibility: visible !important;
4278 border: 1px dashed #ddd;
4279 background-color: #f9f9f9;
4280 border-radius: 4px;
4281 }
4282
4283 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
4284 display: -webkit-box;
4285 display: -ms-flexbox;
4286 display: flex;
4287 grid-gap: 5px;
4288 -ms-flex-wrap: wrap;
4289 flex-wrap: wrap;
4290 margin-bottom: 15px;
4291 }
4292 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
4293 display: none;
4294 }
4295 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop {
4296 position: relative;
4297 background: #F6F6F6;
4298 border: 1px solid #EAEAEB;
4299 border-radius: 5px;
4300 height: 150px;
4301 }
4302 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop .merchant-upload-button {
4303 display: -webkit-box;
4304 display: -ms-flexbox;
4305 display: flex;
4306 -webkit-box-orient: vertical;
4307 -webkit-box-direction: normal;
4308 -ms-flex-direction: column;
4309 flex-direction: column;
4310 -webkit-box-align: center;
4311 -ms-flex-align: center;
4312 align-items: center;
4313 -webkit-box-pack: center;
4314 -ms-flex-pack: center;
4315 justify-content: center;
4316 width: 100%;
4317 height: 100%;
4318 margin-top: 10px;
4319 border: none;
4320 background: no-repeat;
4321 outline: none;
4322 -webkit-box-shadow: none;
4323 box-shadow: none;
4324 }
4325 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop img {
4326 position: absolute;
4327 left: 50%;
4328 top: 50%;
4329 -webkit-transform: translate(-50%, -50%);
4330 transform: translate(-50%, -50%);
4331 margin-top: -15px;
4332 }
4333 .merchant-module-page-setting-field-upload .merchant-upload-image {
4334 position: relative;
4335 display: -webkit-box;
4336 display: -ms-flexbox;
4337 display: flex;
4338 -webkit-box-align: center;
4339 -ms-flex-align: center;
4340 align-items: center;
4341 -webkit-box-pack: center;
4342 -ms-flex-pack: center;
4343 justify-content: center;
4344 border-radius: 4px;
4345 padding: 2px;
4346 border: 1px solid #eee;
4347 background-color: #fff;
4348 }
4349 .merchant-module-page-setting-field-upload .merchant-upload-image img {
4350 cursor: -webkit-grab;
4351 cursor: grab;
4352 width: 100%;
4353 height: 100%;
4354 max-height: 75px;
4355 -o-object-fit: cover;
4356 object-fit: cover;
4357 }
4358 .merchant-module-page-setting-field-upload .merchant-upload-image i {
4359 cursor: pointer;
4360 position: absolute;
4361 z-index: 1;
4362 top: 5px;
4363 right: 5px;
4364 width: 16px;
4365 height: 16px;
4366 display: -webkit-box;
4367 display: -ms-flexbox;
4368 display: flex;
4369 -webkit-box-pack: center;
4370 -ms-flex-pack: center;
4371 justify-content: center;
4372 -webkit-box-align: center;
4373 -ms-flex-align: center;
4374 align-items: center;
4375 color: #fff;
4376 background-color: #c5280c;
4377 font-size: 14px;
4378 line-height: 1em;
4379 border-radius: 16px;
4380 opacity: 0;
4381 -webkit-transition: all 0.2s;
4382 transition: all 0.2s;
4383 }
4384 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
4385 opacity: 1;
4386 }
4387 .merchant-module-page-setting-field-upload .merchant-upload-button {
4388 cursor: pointer;
4389 -webkit-user-select: none;
4390 -moz-user-select: none;
4391 -ms-user-select: none;
4392 user-select: none;
4393 display: -webkit-inline-box;
4394 display: -ms-inline-flexbox;
4395 display: inline-flex;
4396 padding: 0.4375rem 1rem;
4397 font-size: 0.875rem;
4398 font-weight: 600;
4399 line-height: 1.5;
4400 white-space: nowrap;
4401 text-transform: none;
4402 text-decoration: none;
4403 color: #212b36;
4404 background-color: #fff;
4405 border: 1px solid #c4cdd5;
4406 border-radius: 0.25rem;
4407 -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);
4408 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);
4409 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);
4410 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);
4411 }
4412 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
4413 outline: none;
4414 -webkit-box-shadow: none;
4415 box-shadow: none;
4416 }
4417
4418 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
4419 display: -webkit-box;
4420 display: -ms-flexbox;
4421 display: flex;
4422 -webkit-box-pack: start;
4423 -ms-flex-pack: start;
4424 justify-content: flex-start;
4425 }
4426 .merchant-module-page-setting-field-switcher input {
4427 display: none;
4428 }
4429 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
4430 margin-left: 0;
4431 background: #3858E9;
4432 }
4433 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
4434 right: 1px;
4435 }
4436 .merchant-module-page-setting-field-switcher .toggle-switch {
4437 float: right;
4438 position: relative;
4439 width: 36px;
4440 margin-top: 2px;
4441 -webkit-user-select: none;
4442 -moz-user-select: none;
4443 -ms-user-select: none;
4444 user-select: none;
4445 }
4446 .merchant-module-page-setting-field-switcher .toggle-switch-label {
4447 position: relative;
4448 display: inline-block;
4449 overflow: hidden;
4450 cursor: pointer;
4451 border-radius: 20px;
4452 padding: 0;
4453 margin: 0;
4454 width: 36px;
4455 }
4456 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
4457 display: block;
4458 width: 200%;
4459 margin-left: -100%;
4460 background: #c8c8c8;
4461 height: 18px;
4462 }
4463 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
4464 display: block;
4465 width: 12px;
4466 height: 12px;
4467 margin: 3px;
4468 background-color: #fff;
4469 position: absolute;
4470 top: 0;
4471 bottom: 0;
4472 right: 18px;
4473 border-radius: 20px;
4474 -webkit-transition: all 0.1s ease-in 0s;
4475 transition: all 0.1s ease-in 0s;
4476 }
4477
4478 .merchant-module-alert {
4479 position: fixed;
4480 top: 0;
4481 left: 0;
4482 right: 0;
4483 bottom: 0;
4484 z-index: 99999;
4485 display: -webkit-box;
4486 display: -ms-flexbox;
4487 display: flex;
4488 -webkit-box-pack: center;
4489 -ms-flex-pack: center;
4490 justify-content: center;
4491 -webkit-box-align: center;
4492 -ms-flex-align: center;
4493 align-items: center;
4494 background-color: rgba(0, 0, 0, 0.6);
4495 opacity: 0;
4496 visibility: hidden;
4497 -webkit-user-select: none;
4498 -moz-user-select: none;
4499 -ms-user-select: none;
4500 user-select: none;
4501 pointer-events: none;
4502 -webkit-transition: all 0.2s;
4503 transition: all 0.2s;
4504 }
4505 .merchant-module-alert.merchant-show {
4506 -webkit-user-select: auto;
4507 -moz-user-select: auto;
4508 -ms-user-select: auto;
4509 user-select: auto;
4510 pointer-events: auto;
4511 opacity: 1;
4512 visibility: visible;
4513 }
4514
4515 .merchant-module-alert-wrapper {
4516 display: -webkit-box;
4517 display: -ms-flexbox;
4518 display: flex;
4519 -webkit-box-orient: vertical;
4520 -webkit-box-direction: normal;
4521 -ms-flex-direction: column;
4522 flex-direction: column;
4523 width: 640px;
4524 max-width: 90%;
4525 border-radius: 4px;
4526 background-color: #fff;
4527 }
4528
4529 .merchant-module-alert-header {
4530 display: -webkit-box;
4531 display: -ms-flexbox;
4532 display: flex;
4533 -webkit-box-align: center;
4534 -ms-flex-align: center;
4535 align-items: center;
4536 -webkit-box-pack: justify;
4537 -ms-flex-pack: justify;
4538 justify-content: space-between;
4539 padding: 20px 30px;
4540 }
4541 .merchant-module-alert-header strong {
4542 font-size: 18px;
4543 line-height: 1em;
4544 }
4545 .merchant-module-alert-header a {
4546 position: relative;
4547 right: -5px;
4548 display: -webkit-box;
4549 display: -ms-flexbox;
4550 display: flex;
4551 color: #212121;
4552 text-decoration: none;
4553 -webkit-transition: all 0.2s;
4554 transition: all 0.2s;
4555 }
4556 .merchant-module-alert-header a:hover {
4557 opacity: 0.6;
4558 }
4559 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
4560 outline: none;
4561 -webkit-box-shadow: none;
4562 box-shadow: none;
4563 }
4564 .merchant-module-alert-header i {
4565 font-size: 32px;
4566 line-height: 1em;
4567 width: auto;
4568 height: auto;
4569 }
4570
4571 .merchant-module-alert-content {
4572 display: -webkit-box;
4573 display: -ms-flexbox;
4574 display: flex;
4575 -webkit-box-orient: vertical;
4576 -webkit-box-direction: normal;
4577 -ms-flex-direction: column;
4578 flex-direction: column;
4579 grid-gap: 20px;
4580 padding: 0 30px 30px 30px;
4581 }
4582 .merchant-module-alert-content p {
4583 margin: 0;
4584 padding: 0;
4585 font-size: 15px;
4586 font-weight: 500;
4587 color: #757575;
4588 }
4589 .merchant-module-alert-content figure {
4590 display: -webkit-box;
4591 display: -ms-flexbox;
4592 display: flex;
4593 margin: 0;
4594 padding: 0;
4595 }
4596 .merchant-module-alert-content img {
4597 max-width: 100%;
4598 }
4599
4600 .merchant-module-alert-footer {
4601 display: -webkit-box;
4602 display: -ms-flexbox;
4603 display: flex;
4604 -webkit-box-pack: end;
4605 -ms-flex-pack: end;
4606 justify-content: flex-end;
4607 padding: 30px;
4608 }
4609 .merchant-module-alert-footer a {
4610 font-weight: bold;
4611 font-size: 14px;
4612 padding: 10px 15px;
4613 text-decoration: none;
4614 border-radius: 4px;
4615 color: #212121;
4616 border: 1px solid #e5e5e5;
4617 }
4618 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
4619 outline: none;
4620 -webkit-box-shadow: none;
4621 box-shadow: none;
4622 }
4623
4624 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
4625 pointer-events: none;
4626 opacity: 0.8;
4627 }
4628 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
4629 opacity: 0.5;
4630 }
4631 .merchant-module-page-setting-field-inner.disabled .merchant-range {
4632 opacity: 0.5;
4633 }
4634 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
4635 opacity: 0.5;
4636 }
4637
4638 /* Utils */
4639 .merchant-height-auto {
4640 height: auto;
4641 }
4642
4643 /* Admin Footer Text */
4644 .merchant-admin-page .merchant-admin-footer-text-link {
4645 display: inline-block;
4646 padding-right: 5px;
4647 color: #3858E9;
4648 }
4649 .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 {
4650 color: #3858E9;
4651 }
4652
4653 .merchant-admin-page-module #wpfooter {
4654 display: none;
4655 }
4656 .merchant-admin-page-module #wpbody-content {
4657 padding-bottom: 30px;
4658 }
4659
4660 .merchant-module-footer-text {
4661 display: -webkit-box;
4662 display: -ms-flexbox;
4663 display: flex;
4664 grid-gap: 5px;
4665 -webkit-box-pack: center;
4666 -ms-flex-pack: center;
4667 justify-content: center;
4668 text-align: center;
4669 margin-top: 37px;
4670 }
4671 .merchant-module-footer-text i {
4672 color: #3858E9;
4673 }
4674
4675 /* Responsive */
4676 @media (max-width: 991px) {
4677 .merchant-wrap {
4678 display: -webkit-box;
4679 display: -ms-flexbox;
4680 display: flex;
4681 -webkit-box-orient: vertical;
4682 -webkit-box-direction: normal;
4683 -ms-flex-direction: column;
4684 flex-direction: column;
4685 grid-gap: 20px;
4686 }
4687 .merchant-modules-header-shortlinks {
4688 margin: 0;
4689 }
4690 .merchant-modules-header {
4691 -webkit-box-orient: vertical;
4692 -webkit-box-direction: normal;
4693 -ms-flex-direction: column;
4694 flex-direction: column;
4695 grid-gap: 20px;
4696 }
4697 .merchant-module-page-header-content {
4698 width: 100%;
4699 }
4700 .merchant-module-page-desc {
4701 max-width: none;
4702 }
4703 .merchant-module-page-header-placeholder {
4704 display: none;
4705 }
4706 .merchant-modules-header-image {
4707 display: none;
4708 }
4709 .merchant-modules-list {
4710 grid-template-columns: repeat(1, minmax(0, 1fr));
4711 }
4712 .merchant-modules-header-status {
4713 margin-bottom: 0;
4714 }
4715 .merchant-module-page-setting-box {
4716 -webkit-box-orient: vertical;
4717 -webkit-box-direction: normal;
4718 -ms-flex-direction: column;
4719 flex-direction: column;
4720 grid-gap: 20px;
4721 }
4722 .merchant-module-page-setting-title,
4723 .merchant-module-page-setting-fields {
4724 width: 100%;
4725 }
4726 .merchant-module-page-body {
4727 -webkit-box-orient: vertical;
4728 -webkit-box-direction: reverse;
4729 -ms-flex-direction: column-reverse;
4730 flex-direction: column-reverse;
4731 }
4732 .merchant-module-page-content {
4733 width: 100%;
4734 }
4735 .merchant-module-page-preview {
4736 margin-left: 0;
4737 margin-bottom: 20px;
4738 width: 100%;
4739 }
4740 }
4741 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area {
4742 margin-bottom: 0px;
4743 position: relative;
4744 }
4745 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field {
4746 background-color: #F0F0F0;
4747 border: none;
4748 border-radius: 3px;
4749 padding: 13px 0 13px 40px;
4750 width: 100%;
4751 }
4752 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-webkit-input-placeholder {
4753 font-size: 12px;
4754 }
4755 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-moz-placeholder {
4756 font-size: 12px;
4757 }
4758 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field:-ms-input-placeholder {
4759 font-size: 12px;
4760 }
4761 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-ms-input-placeholder {
4762 font-size: 12px;
4763 }
4764 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::placeholder {
4765 font-size: 12px;
4766 }
4767 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-icon {
4768 position: absolute;
4769 top: 50%;
4770 left: 15px;
4771 -webkit-transform: translateY(-50%);
4772 transform: translateY(-50%);
4773 }
4774 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching {
4775 margin-left: 10px;
4776 margin-right: 10px;
4777 font-style: italic;
4778 font-size: 11px;
4779 position: absolute;
4780 top: 13px;
4781 right: 0;
4782 color: #9d9d9d;
4783 display: none;
4784 }
4785 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching.active {
4786 display: inline;
4787 }
4788 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview {
4789 position: absolute;
4790 top: 100%;
4791 left: 0;
4792 right: 0;
4793 z-index: 10;
4794 background-color: #fff;
4795 border: 1px solid #ddd;
4796 padding: 0;
4797 margin: 0;
4798 height: 190px;
4799 overflow-y: scroll;
4800 display: none;
4801 }
4802 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li {
4803 cursor: pointer;
4804 }
4805 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style {
4806 padding-left: 15px;
4807 }
4808 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style:before {
4809 content: "";
4810 display: inline-block;
4811 width: 6px;
4812 height: 6px;
4813 border-radius: 50%;
4814 background-color: #d1d1d1;
4815 margin-right: 7px;
4816 }
4817 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li {
4818 border-radius: 4px;
4819 margin: 15px 0 15px;
4820 border: 1px solid #dfe1e1;
4821 }
4822 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li:last-child {
4823 margin-bottom: 0;
4824 }
4825 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul {
4826 padding: 0;
4827 margin: 0;
4828 }
4829 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li {
4830 padding: 5px 10px;
4831 margin: 0 -3px;
4832 min-height: 30px;
4833 display: -webkit-box;
4834 display: -ms-flexbox;
4835 display: flex;
4836 -webkit-box-pack: justify;
4837 -ms-flex-pack: justify;
4838 justify-content: space-between;
4839 -webkit-box-align: center;
4840 -ms-flex-align: center;
4841 align-items: center;
4842 border-bottom: 1px dotted #eee;
4843 position: relative;
4844 overflow: hidden;
4845 -webkit-user-select: none;
4846 -moz-user-select: none;
4847 -ms-user-select: none;
4848 user-select: none;
4849 -webkit-transition: 300ms;
4850 transition: 300ms;
4851 }
4852 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li:hover {
4853 background-color: #fafafa;
4854 }
4855 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li > span {
4856 margin-left: 3px;
4857 margin-right: 3px;
4858 }
4859 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img {
4860 width: 30px;
4861 -webkit-box-flex: 0;
4862 -ms-flex: 0 0 30px;
4863 flex: 0 0 30px;
4864 }
4865 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img img {
4866 width: 30px;
4867 height: 30px;
4868 border-radius: 4px;
4869 display: block;
4870 }
4871 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.data {
4872 -webkit-box-flex: 1;
4873 -ms-flex-positive: 1;
4874 flex-grow: 1;
4875 }
4876 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.type {
4877 font-size: 10px;
4878 color: #999;
4879 min-width: 40px;
4880 text-decoration: none;
4881 text-align: end;
4882 }
4883 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li del .amount {
4884 text-decoration: line-through;
4885 }
4886 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.info {
4887 font-size: 12px;
4888 font-style: italic;
4889 height: 18px;
4890 line-height: 18px;
4891 color: #999;
4892 background-color: #f1f1f1;
4893 text-decoration: none;
4894 padding: 0 6px;
4895 border-radius: 2px;
4896 margin-left: 3px;
4897 margin-right: 3px;
4898 }
4899 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li .remove {
4900 width: 30px;
4901 height: 30px;
4902 line-height: 28px;
4903 font-size: 15px;
4904 -webkit-box-flex: 0;
4905 -ms-flex: 0 0 30px;
4906 flex: 0 0 30px;
4907 border-radius: 50%;
4908 text-align: center;
4909 background-color: #f6f3f3;
4910 cursor: pointer;
4911 }
4912
4913 .merchant-image-picker label {
4914 position: relative;
4915 display: inline-block;
4916 margin-right: 10px;
4917 margin-bottom: 5px;
4918 }
4919 .merchant-image-picker label .tool-tip-text {
4920 visibility: hidden;
4921 opacity: 0;
4922 width: 120px;
4923 background-color: black;
4924 color: #fff;
4925 text-align: center;
4926 border-radius: 6px;
4927 padding: 5px 0;
4928 position: absolute;
4929 z-index: 1;
4930 top: -35px;
4931 left: 50%;
4932 margin-left: -60px;
4933 -webkit-transition: opacity 300ms;
4934 transition: opacity 300ms;
4935 }
4936 .merchant-image-picker label .tool-tip-text::after {
4937 content: "";
4938 position: absolute;
4939 top: 100%;
4940 left: 50%;
4941 margin-left: -5px;
4942 border-width: 5px;
4943 border-style: solid;
4944 border-color: black transparent transparent transparent;
4945 }
4946 .merchant-image-picker label:hover .tool-tip-text {
4947 visibility: visible;
4948 opacity: 1;
4949 }
4950 .merchant-image-picker input[type=radio] {
4951 display: none;
4952 clear: both;
4953 }
4954 .merchant-image-picker img {
4955 border: 2px solid #F0F0F1;
4956 border-radius: 4px;
4957 cursor: pointer;
4958 padding: 7px 3px;
4959 -webkit-transition: 300ms;
4960 transition: 300ms;
4961 }
4962 .merchant-image-picker input[type=radio]:checked + img {
4963 border: 2px solid #3858E9;
4964 }