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

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

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