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

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

6,330 lines 178.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 /* Utilities */
3 .mrc-w-100 {
4 width: 100% !important;
5 }
6
7 .mrc-mb-0 {
8 margin-bottom: 0;
9 }
10
11 .mrc-mt-0 {
12 margin-top: 0;
13 }
14
15 .merchant-animated-buttons .merchant-button-flash:hover {
16 -webkit-animation: merchant-flash 1s infinite both;
17 animation: merchant-flash 1s infinite both;
18 -webkit-animation-iteration-count: 1;
19 animation-iteration-count: 1;
20 }
21 .merchant-animated-buttons .merchant-button-bounce:hover {
22 -webkit-animation: merchant-bounce 0.3s alternate;
23 animation: merchant-bounce 0.3s alternate;
24 -webkit-animation-iteration-count: 4;
25 animation-iteration-count: 4;
26 }
27 .merchant-animated-buttons .merchant-button-zoom-in:hover {
28 -webkit-transform: scale(1.2);
29 transform: scale(1.2);
30 }
31 .merchant-animated-buttons .merchant-button-shake:hover {
32 -webkit-animation: merchant-shake 0.3s;
33 animation: merchant-shake 0.3s;
34 -webkit-animation-iteration-count: 2;
35 animation-iteration-count: 2;
36 }
37 .merchant-animated-buttons .merchant-button-pulse:hover {
38 -webkit-animation: merchant-pulse 1.5s ease-in-out infinite both;
39 animation: merchant-pulse 1.5s ease-in-out infinite both;
40 }
41 .merchant-animated-buttons .merchant-button-jello-shake:hover {
42 -webkit-animation: merchant-jello-shake 1.5s infinite both;
43 animation: merchant-jello-shake 1.5s infinite both;
44 }
45 .merchant-animated-buttons .merchant-button-wobble:hover {
46 -webkit-animation: merchant-wobble 1.5s ease-in-out infinite both;
47 animation: merchant-wobble 1.5s ease-in-out infinite both;
48 }
49 .merchant-animated-buttons .merchant-button-vibrate:hover {
50 -webkit-animation: merchant-vibrate 0.3s linear 4 both;
51 animation: merchant-vibrate 0.3s linear 4 both;
52 }
53 .merchant-animated-buttons .merchant-button-swing:hover {
54 -webkit-animation: merchant-swing 2s ease-in-out infinite alternate;
55 animation: merchant-swing 2s ease-in-out infinite alternate;
56 }
57 .merchant-animated-buttons .merchant-button-tada:hover {
58 -webkit-animation: merchant-tada 1s infinite both;
59 animation: merchant-tada 1s infinite both;
60 }
61
62 @-webkit-keyframes merchant-flash {
63 0%, 50%, to {
64 opacity: 1;
65 }
66 25%, 75% {
67 opacity: 0;
68 }
69 }
70
71 @keyframes merchant-flash {
72 0%, 50%, to {
73 opacity: 1;
74 }
75 25%, 75% {
76 opacity: 0;
77 }
78 }
79 @-webkit-keyframes merchant-bounce {
80 to {
81 -webkit-transform: scale(1.2);
82 transform: scale(1.2);
83 }
84 }
85 @keyframes merchant-bounce {
86 to {
87 -webkit-transform: scale(1.2);
88 transform: scale(1.2);
89 }
90 }
91 @-webkit-keyframes merchant-shake {
92 33% {
93 -webkit-transform: rotate(10deg);
94 transform: rotate(10deg);
95 }
96 67% {
97 -webkit-transform: rotate(-10deg);
98 transform: rotate(-10deg);
99 }
100 to {
101 -webkit-transform: rotate(10deg);
102 transform: rotate(10deg);
103 }
104 }
105 @keyframes merchant-shake {
106 33% {
107 -webkit-transform: rotate(10deg);
108 transform: rotate(10deg);
109 }
110 67% {
111 -webkit-transform: rotate(-10deg);
112 transform: rotate(-10deg);
113 }
114 to {
115 -webkit-transform: rotate(10deg);
116 transform: rotate(10deg);
117 }
118 }
119 @-webkit-keyframes merchant-pulse {
120 0% {
121 -webkit-animation-timing-function: ease-out;
122 animation-timing-function: ease-out;
123 -webkit-transform: scale(1);
124 transform: scale(1);
125 -webkit-transform-origin: center center;
126 transform-origin: center center;
127 }
128 10% {
129 -webkit-animation-timing-function: ease-in;
130 animation-timing-function: ease-in;
131 -webkit-transform: scale(0.91);
132 transform: scale(0.91);
133 }
134 17% {
135 -webkit-animation-timing-function: ease-out;
136 animation-timing-function: ease-out;
137 -webkit-transform: scale(0.98);
138 transform: scale(0.98);
139 }
140 33% {
141 -webkit-animation-timing-function: ease-in;
142 animation-timing-function: ease-in;
143 -webkit-transform: scale(0.87);
144 transform: scale(0.87);
145 }
146 45% {
147 -webkit-animation-timing-function: ease-out;
148 animation-timing-function: ease-out;
149 -webkit-transform: scale(1);
150 transform: scale(1);
151 }
152 }
153 @keyframes merchant-pulse {
154 0% {
155 -webkit-animation-timing-function: ease-out;
156 animation-timing-function: ease-out;
157 -webkit-transform: scale(1);
158 transform: scale(1);
159 -webkit-transform-origin: center center;
160 transform-origin: center center;
161 }
162 10% {
163 -webkit-animation-timing-function: ease-in;
164 animation-timing-function: ease-in;
165 -webkit-transform: scale(0.91);
166 transform: scale(0.91);
167 }
168 17% {
169 -webkit-animation-timing-function: ease-out;
170 animation-timing-function: ease-out;
171 -webkit-transform: scale(0.98);
172 transform: scale(0.98);
173 }
174 33% {
175 -webkit-animation-timing-function: ease-in;
176 animation-timing-function: ease-in;
177 -webkit-transform: scale(0.87);
178 transform: scale(0.87);
179 }
180 45% {
181 -webkit-animation-timing-function: ease-out;
182 animation-timing-function: ease-out;
183 -webkit-transform: scale(1);
184 transform: scale(1);
185 }
186 }
187 @-webkit-keyframes merchant-jello-shake {
188 0% {
189 -webkit-transform: scaleX(1);
190 transform: scaleX(1);
191 }
192 30% {
193 -webkit-transform: scale3d(1.25, 0.75, 1);
194 transform: scale3d(1.25, 0.75, 1);
195 }
196 40% {
197 -webkit-transform: scale3d(0.75, 1.25, 1);
198 transform: scale3d(0.75, 1.25, 1);
199 }
200 50% {
201 -webkit-transform: scale3d(1.15, 0.85, 1);
202 transform: scale3d(1.15, 0.85, 1);
203 }
204 65% {
205 -webkit-transform: scale3d(0.95, 1.05, 1);
206 transform: scale3d(0.95, 1.05, 1);
207 }
208 75% {
209 -webkit-transform: scale3d(1.05, 0.95, 1);
210 transform: scale3d(1.05, 0.95, 1);
211 }
212 to {
213 -webkit-transform: scaleX(1);
214 transform: scaleX(1);
215 }
216 }
217 @keyframes merchant-jello-shake {
218 0% {
219 -webkit-transform: scaleX(1);
220 transform: scaleX(1);
221 }
222 30% {
223 -webkit-transform: scale3d(1.25, 0.75, 1);
224 transform: scale3d(1.25, 0.75, 1);
225 }
226 40% {
227 -webkit-transform: scale3d(0.75, 1.25, 1);
228 transform: scale3d(0.75, 1.25, 1);
229 }
230 50% {
231 -webkit-transform: scale3d(1.15, 0.85, 1);
232 transform: scale3d(1.15, 0.85, 1);
233 }
234 65% {
235 -webkit-transform: scale3d(0.95, 1.05, 1);
236 transform: scale3d(0.95, 1.05, 1);
237 }
238 75% {
239 -webkit-transform: scale3d(1.05, 0.95, 1);
240 transform: scale3d(1.05, 0.95, 1);
241 }
242 to {
243 -webkit-transform: scaleX(1);
244 transform: scaleX(1);
245 }
246 }
247 @-webkit-keyframes merchant-wobble {
248 0%, to {
249 -webkit-transform: translateX(0);
250 transform: translateX(0);
251 -webkit-transform-origin: 50% 50%;
252 transform-origin: 50% 50%;
253 }
254 15% {
255 -webkit-transform: translateX(-30px) rotate(-6deg);
256 transform: translateX(-30px) rotate(-6deg);
257 }
258 30% {
259 -webkit-transform: translateX(15px) rotate(6deg);
260 transform: translateX(15px) rotate(6deg);
261 }
262 45% {
263 -webkit-transform: translateX(-15px) rotate(-3.6deg);
264 transform: translateX(-15px) rotate(-3.6deg);
265 }
266 60% {
267 -webkit-transform: translateX(9px) rotate(2.4deg);
268 transform: translateX(9px) rotate(2.4deg);
269 }
270 75% {
271 -webkit-transform: translateX(-6px) rotate(-1.2deg);
272 transform: translateX(-6px) rotate(-1.2deg);
273 }
274 }
275 @keyframes merchant-wobble {
276 0%, to {
277 -webkit-transform: translateX(0);
278 transform: translateX(0);
279 -webkit-transform-origin: 50% 50%;
280 transform-origin: 50% 50%;
281 }
282 15% {
283 -webkit-transform: translateX(-30px) rotate(-6deg);
284 transform: translateX(-30px) rotate(-6deg);
285 }
286 30% {
287 -webkit-transform: translateX(15px) rotate(6deg);
288 transform: translateX(15px) rotate(6deg);
289 }
290 45% {
291 -webkit-transform: translateX(-15px) rotate(-3.6deg);
292 transform: translateX(-15px) rotate(-3.6deg);
293 }
294 60% {
295 -webkit-transform: translateX(9px) rotate(2.4deg);
296 transform: translateX(9px) rotate(2.4deg);
297 }
298 75% {
299 -webkit-transform: translateX(-6px) rotate(-1.2deg);
300 transform: translateX(-6px) rotate(-1.2deg);
301 }
302 }
303 @-webkit-keyframes merchant-vibrate {
304 0% {
305 -webkit-transform: translate(0);
306 transform: translate(0);
307 }
308 20% {
309 -webkit-transform: translate(-2px, 2px);
310 transform: translate(-2px, 2px);
311 }
312 40% {
313 -webkit-transform: translate(-2px, -2px);
314 transform: translate(-2px, -2px);
315 }
316 60% {
317 -webkit-transform: translate(2px, 2px);
318 transform: translate(2px, 2px);
319 }
320 80% {
321 -webkit-transform: translate(2px, -2px);
322 transform: translate(2px, -2px);
323 }
324 to {
325 -webkit-transform: translate(0);
326 transform: translate(0);
327 }
328 }
329 @keyframes merchant-vibrate {
330 0% {
331 -webkit-transform: translate(0);
332 transform: translate(0);
333 }
334 20% {
335 -webkit-transform: translate(-2px, 2px);
336 transform: translate(-2px, 2px);
337 }
338 40% {
339 -webkit-transform: translate(-2px, -2px);
340 transform: translate(-2px, -2px);
341 }
342 60% {
343 -webkit-transform: translate(2px, 2px);
344 transform: translate(2px, 2px);
345 }
346 80% {
347 -webkit-transform: translate(2px, -2px);
348 transform: translate(2px, -2px);
349 }
350 to {
351 -webkit-transform: translate(0);
352 transform: translate(0);
353 }
354 }
355 @-webkit-keyframes merchant-swing {
356 0% {
357 -webkit-transform: rotate(0deg);
358 transform: rotate(0deg);
359 }
360 20% {
361 -webkit-transform: rotate(3deg);
362 transform: rotate(3deg);
363 }
364 40% {
365 -webkit-transform: rotate(-3deg);
366 transform: rotate(-3deg);
367 }
368 60% {
369 -webkit-transform: rotate(3deg);
370 transform: rotate(3deg);
371 }
372 80% {
373 -webkit-transform: rotate(-3deg);
374 transform: rotate(-3deg);
375 }
376 to {
377 -webkit-transform: rotate(0deg);
378 transform: rotate(0deg);
379 }
380 }
381 @keyframes merchant-swing {
382 0% {
383 -webkit-transform: rotate(0deg);
384 transform: rotate(0deg);
385 }
386 20% {
387 -webkit-transform: rotate(3deg);
388 transform: rotate(3deg);
389 }
390 40% {
391 -webkit-transform: rotate(-3deg);
392 transform: rotate(-3deg);
393 }
394 60% {
395 -webkit-transform: rotate(3deg);
396 transform: rotate(3deg);
397 }
398 80% {
399 -webkit-transform: rotate(-3deg);
400 transform: rotate(-3deg);
401 }
402 to {
403 -webkit-transform: rotate(0deg);
404 transform: rotate(0deg);
405 }
406 }
407 @-webkit-keyframes merchant-tada {
408 0% {
409 -webkit-transform: scaleX(1);
410 transform: scaleX(1);
411 }
412 10%, 20% {
413 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
414 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
415 }
416 30%, 50%, 70%, 90% {
417 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
418 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
419 }
420 40%, 60%, 80% {
421 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
422 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
423 }
424 to {
425 -webkit-transform: scaleX(1);
426 transform: scaleX(1);
427 }
428 }
429 @keyframes merchant-tada {
430 0% {
431 -webkit-transform: scaleX(1);
432 transform: scaleX(1);
433 }
434 10%, 20% {
435 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
436 transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
437 }
438 30%, 50%, 70%, 90% {
439 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
440 transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
441 }
442 40%, 60%, 80% {
443 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
444 transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
445 }
446 to {
447 -webkit-transform: scaleX(1);
448 transform: scaleX(1);
449 }
450 }
451 @-webkit-keyframes merchant-spin {
452 0% {
453 -webkit-transform: rotate(0deg);
454 transform: rotate(0deg);
455 }
456 100% {
457 -webkit-transform: rotate(359deg);
458 transform: rotate(359deg);
459 }
460 }
461 @keyframes merchant-spin {
462 0% {
463 -webkit-transform: rotate(0deg);
464 transform: rotate(0deg);
465 }
466 100% {
467 -webkit-transform: rotate(359deg);
468 transform: rotate(359deg);
469 }
470 }
471 .merchant-pcr-app * {
472 outline: none;
473 border: none;
474 -webkit-box-sizing: border-box;
475 box-sizing: border-box;
476 }
477
478 .merchant-pcr-app input:focus,
479 .merchant-pcr-app input.pcr-active,
480 .merchant-pcr-app button:focus,
481 .merchant-pcr-app button.pcr-active {
482 -webkit-box-shadow: none;
483 box-shadow: none;
484 }
485
486 .merchant-pcr-app .pcr-palette:focus,
487 .merchant-pcr-app .pcr-slider:focus {
488 -webkit-box-shadow: none;
489 box-shadow: none;
490 }
491
492 .merchant-pcr-app {
493 position: fixed;
494 z-index: 999999;
495 top: 0;
496 left: 0;
497 display: -webkit-box;
498 display: -ms-flexbox;
499 display: flex;
500 -webkit-box-orient: vertical;
501 -webkit-box-direction: normal;
502 -ms-flex-direction: column;
503 flex-direction: column;
504 border-radius: 0.1em;
505 opacity: 0;
506 visibility: hidden;
507 -webkit-transition: opacity 0.2s, visibility 0s 0.2s;
508 transition: opacity 0.2s, visibility 0s 0.2s;
509 -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);
510 box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
511 background: #fff;
512 }
513
514 .merchant-pcr-app.visible {
515 visibility: visible;
516 opacity: 1;
517 -webkit-transition: opacity 0.2s;
518 transition: opacity 0.2s;
519 }
520
521 .merchant-pcr-app .pcr-swatches {
522 display: -webkit-box;
523 display: -ms-flexbox;
524 display: flex;
525 -webkit-box-pack: justify;
526 -ms-flex-pack: justify;
527 justify-content: space-between;
528 }
529
530 .merchant-pcr-app .pcr-swatches > button {
531 cursor: pointer;
532 font-size: 1em;
533 position: relative;
534 z-index: 1;
535 width: 20px;
536 height: 20px;
537 margin: 0;
538 padding: 0;
539 background: none;
540 }
541
542 .merchant-pcr-app .pcr-swatches > button::before {
543 position: absolute;
544 content: "";
545 top: 0;
546 left: 0;
547 bottom: 0;
548 right: 0;
549 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>');
550 background-size: 6px;
551 border-radius: 20px;
552 border: 1px solid transparent;
553 z-index: -1;
554 }
555
556 .merchant-pcr-app .pcr-swatches > button::after {
557 content: "";
558 position: absolute;
559 z-index: 1;
560 top: 0;
561 left: 0;
562 right: 0;
563 bottom: 0;
564 border-radius: 20px;
565 border: 1px solid rgba(0, 0, 0, 0.3);
566 background: var(--pcr-color);
567 }
568
569 .merchant-pcr-app .pcr-interaction {
570 display: -webkit-box;
571 display: -ms-flexbox;
572 display: flex;
573 grid-gap: 5px;
574 }
575
576 .merchant-pcr-app .pcr-interaction input {
577 font-size: 11px;
578 border-radius: 3px;
579 }
580 .merchant-pcr-app .pcr-interaction input:focus {
581 border-color: #3858E9;
582 }
583
584 .merchant-pcr-app .pcr-interaction .pcr-result {
585 -webkit-box-flex: 1;
586 -ms-flex: 1;
587 flex: 1;
588 margin: 0;
589 width: 100%;
590 max-width: 100%;
591 }
592
593 .merchant-pcr-app .pcr-interaction .pcr-clear {
594 cursor: pointer;
595 margin: 0;
596 padding: 0 10px;
597 border-radius: 3px;
598 color: #fff;
599 background-color: #3858E9;
600 text-transform: uppercase;
601 }
602
603 .merchant-pcr-app .pcr-selection .pcr-picker {
604 -webkit-user-select: none;
605 -moz-user-select: none;
606 -ms-user-select: none;
607 user-select: none;
608 position: absolute;
609 height: 16px;
610 width: 16px;
611 border-radius: 16px;
612 background-color: #fff !important;
613 -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
614 box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
615 }
616
617 .merchant-pcr-app .pcr-selection .pcr-color-palette,
618 .merchant-pcr-app .pcr-selection .pcr-color-chooser,
619 .merchant-pcr-app .pcr-selection .pcr-color-opacity {
620 -webkit-user-select: none;
621 -moz-user-select: none;
622 -ms-user-select: none;
623 user-select: none;
624 position: relative;
625 display: -webkit-box;
626 display: -ms-flexbox;
627 display: flex;
628 -webkit-box-orient: vertical;
629 -webkit-box-direction: normal;
630 -ms-flex-direction: column;
631 flex-direction: column;
632 cursor: -webkit-grab;
633 cursor: grab;
634 }
635
636 .merchant-pcr-app .pcr-selection .pcr-color-palette:active,
637 .merchant-pcr-app .pcr-selection .pcr-color-chooser:active,
638 .merchant-pcr-app .pcr-selection .pcr-color-opacity:active {
639 cursor: -webkit-grabbing;
640 cursor: grabbing;
641 }
642
643 .merchant-pcr-app[data-theme=merchant] {
644 width: 250px;
645 max-width: 95vw;
646 padding: 10px;
647 -webkit-box-sizing: border-box;
648 box-sizing: border-box;
649 display: -webkit-box;
650 display: -ms-flexbox;
651 display: flex;
652 grid-gap: 10px;
653 -webkit-box-orient: vertical;
654 -webkit-box-direction: normal;
655 -ms-flex-direction: column;
656 flex-direction: column;
657 }
658
659 .merchant-pcr-app[data-theme=merchant] .pcr-selection {
660 display: grid;
661 grid-gap: 10px;
662 grid-template-columns: 1fr 4fr;
663 grid-template-rows: 5fr auto auto;
664 -webkit-box-align: center;
665 -ms-flex-align: center;
666 align-items: center;
667 height: 150px;
668 width: 100%;
669 align-self: flex-start;
670 }
671
672 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview {
673 grid-area: 2/1/4/1;
674 height: 100%;
675 width: 100%;
676 display: -webkit-box;
677 display: -ms-flexbox;
678 display: flex;
679 -webkit-box-align: center;
680 -ms-flex-align: center;
681 align-items: center;
682 -webkit-box-pack: center;
683 -ms-flex-pack: center;
684 justify-content: center;
685 }
686
687 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-last-color {
688 display: none;
689 }
690
691 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color {
692 position: relative;
693 width: 32px;
694 height: 32px;
695 border-radius: 32px;
696 overflow: hidden;
697 border: 1px solid rgba(0, 0, 0, 0.3);
698 background-color: var(--pcr-color);
699 }
700
701 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color::before {
702 position: absolute;
703 content: "";
704 top: 0;
705 left: 0;
706 width: 100%;
707 height: 100%;
708 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>');
709 background-size: 6px;
710 border-radius: 100%;
711 z-index: -1;
712 }
713
714 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette {
715 grid-area: 1/1/2/3;
716 width: 100%;
717 height: 100%;
718 z-index: 1;
719 }
720
721 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-picker {
722 width: 18px;
723 height: 18px;
724 border: 2px solid #fff;
725 -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
726 box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
727 background-color: transparent !important;
728 }
729
730 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette {
731 width: 100%;
732 height: 100%;
733 }
734
735 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette::before {
736 position: absolute;
737 content: "";
738 top: 0;
739 left: 0;
740 width: 100%;
741 height: 100%;
742 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>');
743 background-size: 8px;
744 z-index: -1;
745 }
746
747 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser {
748 grid-area: 2/2/2/2;
749 }
750
751 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
752 grid-area: 3/2/3/2;
753 }
754
755 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser,
756 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
757 height: 12px;
758 margin-right: 10px;
759 }
760
761 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-picker,
762 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-picker {
763 top: 50%;
764 -webkit-transform: translateY(-50%);
765 transform: translateY(-50%);
766 }
767
768 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider,
769 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
770 -webkit-box-flex: 1;
771 -ms-flex-positive: 1;
772 flex-grow: 1;
773 }
774
775 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider {
776 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));
777 background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
778 }
779
780 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
781 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>');
782 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>');
783 background-size: 100%, 6px;
784 }
785
786 /* Buttons */
787 .button-tertiary {
788 cursor: pointer;
789 -webkit-user-select: none;
790 -moz-user-select: none;
791 -ms-user-select: none;
792 user-select: none;
793 display: -webkit-inline-box;
794 display: -ms-inline-flexbox;
795 display: inline-flex;
796 padding: 0.4375rem 1rem;
797 font-size: 0.875rem;
798 font-weight: 600;
799 line-height: 1.5;
800 white-space: nowrap;
801 text-transform: none;
802 text-decoration: none;
803 color: #212b36;
804 background-color: #fff;
805 border: 1px solid #c4cdd5;
806 border-radius: 0.25rem;
807 -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);
808 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);
809 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);
810 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);
811 }
812 .button-tertiary:hover, .button-tertiary:focus {
813 outline: none;
814 -webkit-box-shadow: none;
815 box-shadow: none;
816 }
817
818 /* Botiga Dashboard Tabs Nav Items */
819 .merchant-tabs-nav {
820 padding: 0 20px;
821 margin-bottom: -100%;
822 -webkit-transform: translate3d(0, 100%, 0);
823 transform: translate3d(0, 100%, 0);
824 }
825 .merchant-tabs-nav ul {
826 display: -webkit-box;
827 display: -ms-flexbox;
828 display: flex;
829 padding: 0;
830 }
831 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link {
832 position: relative;
833 font-size: 14px;
834 line-height: 20px;
835 padding: 16px;
836 color: #6D7175;
837 text-decoration: none;
838 -webkit-transition: ease color 300ms;
839 transition: ease color 300ms;
840 outline: none;
841 -webkit-box-shadow: none;
842 box-shadow: none;
843 }
844 .merchant-tabs-nav .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
845 content: "";
846 position: absolute;
847 bottom: 0;
848 left: 0;
849 width: 100%;
850 height: 3px;
851 background-color: transparent;
852 border-radius: 4px 4px 0 0;
853 }
854 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
855 color: #3858E9;
856 font-weight: 500;
857 }
858 .merchant-tabs-nav .merchant-tabs-nav-item.active .merchant-tabs-nav-link:after {
859 background-color: #3858E9;
860 }
861 .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 {
862 color: #3858E9;
863 }
864 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link {
865 position: relative;
866 display: -webkit-box;
867 display: -ms-flexbox;
868 display: flex;
869 -webkit-box-align: center;
870 -ms-flex-align: center;
871 align-items: center;
872 font-size: 18px;
873 font-weight: 600;
874 line-height: 26px;
875 padding: 9px 16px;
876 border-bottom: 0;
877 color: #1e1e1e;
878 -webkit-transition: ease color 200ms;
879 transition: ease color 200ms;
880 }
881 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg {
882 margin-right: 8px;
883 }
884 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link svg path {
885 -webkit-transition: ease fill 200ms;
886 transition: ease fill 200ms;
887 }
888 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:after {
889 content: none;
890 }
891 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item .merchant-tabs-nav-link:before {
892 content: "";
893 position: absolute;
894 top: 0;
895 left: 0;
896 background-color: transparent;
897 width: 4px;
898 height: 100%;
899 border-radius: 0 4px 4px 0;
900 opacity: 0;
901 visibility: hidden;
902 -webkit-transition: ease opacity 200ms;
903 transition: ease opacity 200ms;
904 }
905 .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 {
906 color: #757575;
907 }
908 .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 {
909 fill: #757575;
910 }
911 .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 {
912 background-color: #e1e1e1;
913 opacity: 1;
914 visibility: visible;
915 }
916 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link {
917 color: #3858E9;
918 }
919 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link svg path {
920 fill: #3858E9;
921 }
922 .merchant-tabs-nav.merchant-tabs-nav-with-icons .merchant-tabs-nav-item.active .merchant-tabs-nav-link:before {
923 background-color: #3858E9;
924 opacity: 1;
925 visibility: visible;
926 }
927 .merchant-tabs-nav.merchant-tabs-nav-vertical {
928 padding: 0;
929 margin-left: -20px;
930 }
931 .merchant-tabs-nav.merchant-tabs-nav-vertical ul {
932 -webkit-box-orient: vertical;
933 -webkit-box-direction: normal;
934 -ms-flex-direction: column;
935 flex-direction: column;
936 margin: 0;
937 }
938 .merchant-tabs-nav.merchant-tabs-nav-no-negative-margin {
939 margin-bottom: 0;
940 -webkit-transform: none;
941 transform: none;
942 }
943
944 /* Botiga Tabs Content */
945 .merchant-tab-content {
946 display: none;
947 }
948 .merchant-tab-content.active {
949 display: block;
950 }
951
952 .toplevel_page_merchant {
953 background-color: #F4F6F8;
954 }
955 .toplevel_page_merchant #wpbody-content > .updated,
956 .toplevel_page_merchant #wpbody-content > .notice {
957 display: none;
958 }
959
960 .merchant-top-bar {
961 display: -webkit-box;
962 display: -ms-flexbox;
963 display: flex;
964 -webkit-box-align: center;
965 -ms-flex-align: center;
966 align-items: center;
967 -webkit-box-pack: justify;
968 -ms-flex-pack: justify;
969 justify-content: space-between;
970 background-color: #FFF;
971 margin: 0 0 30px -20px;
972 padding: 18px 20px;
973 }
974 .merchant-top-bar * {
975 -webkit-box-sizing: border-box;
976 box-sizing: border-box;
977 }
978 .merchant-top-bar * *:before,
979 .merchant-top-bar * *:after {
980 -webkit-box-sizing: border-box;
981 box-sizing: border-box;
982 }
983 .merchant-top-bar .merchant-top-bar-infos {
984 display: -webkit-box;
985 display: -ms-flexbox;
986 display: flex;
987 -webkit-box-align: center;
988 -ms-flex-align: center;
989 align-items: center;
990 }
991 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item {
992 position: relative;
993 padding: 0 10px;
994 }
995 .merchant-top-bar .merchant-top-bar-infos .merchant-top-bar-info-item + .merchant-top-bar-info-item:before {
996 content: "";
997 position: absolute;
998 top: 50%;
999 left: 0;
1000 height: 17px;
1001 -webkit-transform: translateY(-50%);
1002 transform: translateY(-50%);
1003 border-left: 1px solid #F0F0F0;
1004 }
1005 .merchant-top-bar .merchant-version {
1006 font-size: 13px;
1007 line-height: 13px;
1008 color: #97A3B6;
1009 }
1010 .merchant-top-bar .merchant-version strong {
1011 position: relative;
1012 top: 1px;
1013 }
1014 .merchant-top-bar .merchant-version .merchant-badge {
1015 display: -webkit-inline-box;
1016 display: -ms-inline-flexbox;
1017 display: inline-flex;
1018 margin-left: 5px;
1019 font-size: 9px;
1020 line-height: 10px;
1021 }
1022 .merchant-top-bar .merchant-notifications {
1023 position: relative;
1024 display: -webkit-inline-box;
1025 display: -ms-inline-flexbox;
1026 display: inline-flex;
1027 -webkit-box-align: center;
1028 -ms-flex-align: center;
1029 align-items: center;
1030 -webkit-box-pack: center;
1031 -ms-flex-pack: center;
1032 justify-content: center;
1033 width: 27px;
1034 height: 27px;
1035 border: 1px solid #DFDFDF;
1036 border-radius: 35px;
1037 }
1038 .merchant-top-bar .merchant-notifications:focus {
1039 -webkit-box-shadow: none;
1040 box-shadow: none;
1041 }
1042 .merchant-top-bar .merchant-notifications .merchant-notifications-count {
1043 position: absolute;
1044 top: -8px;
1045 right: -7px;
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 -webkit-box-pack: center;
1053 -ms-flex-pack: center;
1054 justify-content: center;
1055 width: 16px;
1056 height: 16px;
1057 color: #FFF;
1058 background-color: #FA1212;
1059 border-radius: 35px;
1060 font-size: 10px;
1061 line-height: 1;
1062 }
1063 .merchant-top-bar .merchant-notifications.read .merchant-notifications-count {
1064 display: none;
1065 }
1066 .merchant-top-bar .merchant-website {
1067 display: -webkit-box;
1068 display: -ms-flexbox;
1069 display: flex;
1070 -webkit-box-align: center;
1071 -ms-flex-align: center;
1072 align-items: center;
1073 gap: 8px;
1074 font-size: 13px;
1075 line-height: 16px;
1076 color: #3858E9;
1077 text-decoration: none;
1078 }
1079
1080 /* Notifications Sidebar */
1081 .merchant-notifications-sidebar {
1082 position: fixed;
1083 top: 96px;
1084 right: 0;
1085 width: 100%;
1086 max-width: 500px;
1087 height: calc(100vh - 92px);
1088 background-color: #FFF;
1089 -webkit-box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1090 box-shadow: -10px 12px 14px rgba(0, 0, 0, 0.05);
1091 opacity: 0;
1092 visibility: hidden;
1093 -webkit-transform: translate3d(100%, 0, 0);
1094 transform: translate3d(100%, 0, 0);
1095 -webkit-transition: ease transform 300ms, ease opacity 300ms;
1096 transition: ease transform 300ms, ease opacity 300ms;
1097 z-index: 1000;
1098 }
1099 .merchant-notifications-sidebar.opened {
1100 opacity: 1;
1101 visibility: visible;
1102 -webkit-transform: none;
1103 transform: none;
1104 }
1105 .merchant-notifications-sidebar.closing {
1106 opacity: 0;
1107 -webkit-transform: translate3d(100%, 0, 0);
1108 transform: translate3d(100%, 0, 0);
1109 }
1110 .merchant-notifications-sidebar .merchant-notifications-sidebar-close {
1111 position: absolute;
1112 top: 15px;
1113 right: 15px;
1114 -webkit-transition: ease opacity 300ms;
1115 transition: ease opacity 300ms;
1116 }
1117 .merchant-notifications-sidebar .merchant-notifications-sidebar-close:hover {
1118 opacity: 0.7;
1119 }
1120 .merchant-notifications-sidebar .merchant-notifications-sidebar-header {
1121 display: -webkit-box;
1122 display: -ms-flexbox;
1123 display: flex;
1124 -webkit-box-align: center;
1125 -ms-flex-align: center;
1126 align-items: center;
1127 gap: 10px;
1128 background-color: #EAEEF2;
1129 padding: 20px 22px;
1130 }
1131 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon {
1132 display: -webkit-box;
1133 display: -ms-flexbox;
1134 display: flex;
1135 -webkit-box-align: center;
1136 -ms-flex-align: center;
1137 align-items: center;
1138 -webkit-box-pack: center;
1139 -ms-flex-pack: center;
1140 justify-content: center;
1141 width: 40px;
1142 height: 40px;
1143 background-color: #FFF;
1144 border: 1px solid #EBEDEF;
1145 border-radius: 35px;
1146 }
1147 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-icon svg {
1148 position: relative;
1149 top: -2px;
1150 }
1151 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content h3 {
1152 font-size: 16px;
1153 line-height: 26px;
1154 font-weight: 600;
1155 color: #3858E9;
1156 margin: 0;
1157 }
1158 .merchant-notifications-sidebar .merchant-notifications-sidebar-header .merchant-notifications-sidebar-header-content p {
1159 font-size: 13px;
1160 line-height: 18px;
1161 color: #757575;
1162 margin: 0;
1163 }
1164 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs {
1165 position: relative;
1166 }
1167 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs:after {
1168 content: "";
1169 position: absolute;
1170 bottom: -10px;
1171 left: 20px;
1172 width: calc(100% - 40px);
1173 border-bottom: 1px solid #F0F0F1;
1174 }
1175 .merchant-notifications-sidebar .merchant-notifications-sidebar-tabs + .merchant-notifications-sidebar-body {
1176 max-height: calc(100vh - 232px);
1177 }
1178 .merchant-notifications-sidebar .merchant-notifications-sidebar-body {
1179 padding: 20px;
1180 overflow-y: auto;
1181 max-height: calc(100vh - 230px);
1182 }
1183 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar {
1184 width: 5px;
1185 }
1186 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-track {
1187 background: #e2e2e2;
1188 }
1189 .merchant-notifications-sidebar .merchant-notifications-sidebar-body::-webkit-scrollbar-thumb {
1190 background-color: #CCC;
1191 }
1192
1193 /* Notifications (card) */
1194 .merchant-notification .merchant-notification-date {
1195 display: block;
1196 font-size: 13px;
1197 line-height: 18px;
1198 color: #757575;
1199 }
1200 .merchant-notification .merchant-notification-date + .merchant-notification-content {
1201 margin-top: 20px;
1202 }
1203 .merchant-notification .changelog-tag {
1204 display: inline-block;
1205 font-size: 10px;
1206 line-height: 18px;
1207 color: #FFF;
1208 padding: 0px 10px;
1209 background-color: #CCC;
1210 border-radius: 3px;
1211 text-transform: uppercase;
1212 font-weight: 600;
1213 margin-bottom: 5px;
1214 }
1215 .merchant-notification .changelog-tag.changelog-added {
1216 background-color: #73B189;
1217 }
1218 .merchant-notification .changelog-tag.changelog-changed {
1219 background-color: #F6CA45;
1220 }
1221 .merchant-notification .changelog-tag.changelog-fixed {
1222 background-color: #967BE3;
1223 }
1224 .merchant-notification .changelog-description {
1225 display: block;
1226 font-size: 13px;
1227 line-height: 21px;
1228 font-weight: 400;
1229 color: #757575;
1230 margin-top: 5px;
1231 }
1232 .merchant-notification .merchant-notification-content ul {
1233 margin: 0;
1234 }
1235 .merchant-notification .merchant-notification-content ul li {
1236 display: -webkit-box;
1237 display: -ms-flexbox;
1238 display: flex;
1239 -webkit-box-orient: vertical;
1240 -webkit-box-direction: normal;
1241 -ms-flex-direction: column;
1242 flex-direction: column;
1243 -webkit-box-align: start;
1244 -ms-flex-align: start;
1245 align-items: flex-start;
1246 font-size: 16px;
1247 line-height: 26px;
1248 font-weight: 600;
1249 color: #101517;
1250 }
1251 .merchant-notification .merchant-notification-content ul li + li {
1252 margin-top: 15px;
1253 padding-top: 15px;
1254 border-top: 1px solid #E7E7E7;
1255 }
1256 .merchant-notification + .merchant-notification {
1257 margin: 20px -20px 0px;
1258 padding: 20px 20px 0px;
1259 border-top: 1px solid #E7E7E7;
1260 }
1261
1262 .merchant-wrap {
1263 padding-left: 5px;
1264 padding-right: 5px;
1265 }
1266 .merchant-wrap * {
1267 -webkit-box-sizing: border-box;
1268 box-sizing: border-box;
1269 }
1270 .merchant-wrap * *:before,
1271 .merchant-wrap * *:after {
1272 -webkit-box-sizing: border-box;
1273 box-sizing: border-box;
1274 }
1275
1276 .merchant-modules-panel {
1277 display: -webkit-box;
1278 display: -ms-flexbox;
1279 display: flex;
1280 grid-gap: 20px;
1281 -webkit-box-orient: vertical;
1282 -webkit-box-direction: normal;
1283 -ms-flex-direction: column;
1284 flex-direction: column;
1285 }
1286
1287 .merchant-modules-header {
1288 display: -webkit-box;
1289 display: -ms-flexbox;
1290 display: flex;
1291 grid-gap: 30px;
1292 }
1293
1294 .merchant-modules-header-left,
1295 .merchant-modules-header-right {
1296 -webkit-box-flex: 1;
1297 -ms-flex: 1;
1298 flex: 1;
1299 display: -webkit-box;
1300 display: -ms-flexbox;
1301 display: flex;
1302 grid-gap: 10px;
1303 -webkit-box-orient: vertical;
1304 -webkit-box-direction: normal;
1305 -ms-flex-direction: column;
1306 flex-direction: column;
1307 -webkit-box-pack: center;
1308 -ms-flex-pack: center;
1309 justify-content: center;
1310 }
1311
1312 .merchant-admin-hand-icon {
1313 width: 24px;
1314 height: auto;
1315 margin-left: 7px;
1316 position: relative;
1317 top: 2px;
1318 }
1319
1320 .merchant-modules-header-heading {
1321 font-size: 24px;
1322 line-height: 34px;
1323 font-weight: 500;
1324 color: #101517;
1325 }
1326 .merchant-modules-header-heading__campaigns {
1327 margin-bottom: 20px;
1328 }
1329
1330 .merchant-modules-header-subheading {
1331 font-size: 16px;
1332 line-height: 1.35em;
1333 color: #7B7B7B;
1334 font-weight: 400;
1335 }
1336
1337 .merchant-modules-header-status {
1338 margin-top: 20px;
1339 margin-bottom: 40px;
1340 display: -webkit-box;
1341 display: -ms-flexbox;
1342 display: flex;
1343 grid-gap: 20px;
1344 }
1345
1346 .merchant-modules-header-status-box {
1347 display: -webkit-box;
1348 display: -ms-flexbox;
1349 display: flex;
1350 grid-gap: 10px;
1351 -webkit-box-orient: vertical;
1352 -webkit-box-direction: normal;
1353 -ms-flex-direction: column;
1354 flex-direction: column;
1355 -webkit-box-align: center;
1356 -ms-flex-align: center;
1357 align-items: center;
1358 padding: 20px;
1359 font-size: 14px;
1360 font-weight: 500;
1361 color: #101517;
1362 background-color: #fff;
1363 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
1364 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
1365 border-radius: 4px;
1366 }
1367 @media (min-width: 421px) {
1368 .merchant-modules-header-status-box {
1369 min-width: 175px;
1370 }
1371 }
1372 @media (max-width: 420px) {
1373 .merchant-modules-header-status-box {
1374 -webkit-box-flex: 1;
1375 -ms-flex: 1;
1376 flex: 1;
1377 }
1378 }
1379 .merchant-modules-header-status-box span {
1380 display: -webkit-box;
1381 display: -ms-flexbox;
1382 display: flex;
1383 grid-gap: 5px;
1384 -webkit-box-align: center;
1385 -ms-flex-align: center;
1386 align-items: center;
1387 }
1388 .merchant-modules-header-status-box strong {
1389 color: #101517;
1390 font-size: 40px;
1391 line-height: 1em;
1392 }
1393
1394 .merchant-modules-header-image {
1395 height: 100%;
1396 display: -webkit-box;
1397 display: -ms-flexbox;
1398 display: flex;
1399 -webkit-box-pack: center;
1400 -ms-flex-pack: center;
1401 justify-content: center;
1402 -webkit-box-align: end;
1403 -ms-flex-align: end;
1404 align-items: flex-end;
1405 }
1406 .merchant-modules-header-image svg {
1407 width: 300px;
1408 }
1409 @media (max-width: 1400px) {
1410 .merchant-modules-header-image img {
1411 max-width: 450px;
1412 margin-top: 20px;
1413 }
1414 }
1415
1416 .merchant-modules-no-active-modules {
1417 padding-block: 40px;
1418 display: -webkit-box;
1419 display: -ms-flexbox;
1420 display: flex;
1421 -webkit-box-orient: vertical;
1422 -webkit-box-direction: normal;
1423 -ms-flex-direction: column;
1424 flex-direction: column;
1425 -webkit-box-align: center;
1426 -ms-flex-align: center;
1427 align-items: center;
1428 gap: 15px;
1429 }
1430 .merchant-modules-no-active-modules img {
1431 width: 350px;
1432 max-width: 100%;
1433 margin-bottom: 10px;
1434 }
1435 .merchant-modules-no-active-modules__text-big {
1436 font-size: 16px;
1437 font-weight: 500;
1438 color: #101517;
1439 }
1440 .merchant-modules-no-active-modules__text-small {
1441 color: #757575;
1442 font-size: 13px;
1443 }
1444 .merchant-modules-no-active-modules .merchant-module-page-button {
1445 width: 180px;
1446 margin-top: 5px;
1447 }
1448
1449 .merchant-modules-header-shortlinks {
1450 margin: 20px 0;
1451 padding: 0;
1452 list-style: none;
1453 display: -webkit-box;
1454 display: -ms-flexbox;
1455 display: flex;
1456 -webkit-box-orient: vertical;
1457 -webkit-box-direction: normal;
1458 -ms-flex-direction: column;
1459 flex-direction: column;
1460 border-radius: 4px;
1461 border: 2px solid #F0F0F1;
1462 background-color: #fff;
1463 }
1464 .merchant-modules-header-shortlinks li {
1465 margin: 0 15px;
1466 border-bottom: 1px solid #EFEFEF;
1467 }
1468 .merchant-modules-header-shortlinks li:last-child {
1469 border-bottom: none;
1470 margin-bottom: 5px;
1471 }
1472 .merchant-modules-header-shortlinks li:first-child {
1473 margin-top: 5px;
1474 }
1475 .merchant-modules-header-shortlinks a {
1476 font-size: 14px;
1477 display: -webkit-box;
1478 display: -ms-flexbox;
1479 display: flex;
1480 grid-gap: 8px;
1481 -webkit-box-align: center;
1482 -ms-flex-align: center;
1483 align-items: center;
1484 -webkit-box-pack: justify;
1485 -ms-flex-pack: justify;
1486 justify-content: space-between;
1487 color: #757575;
1488 text-decoration: none;
1489 padding: 10px 0;
1490 }
1491 .merchant-modules-header-shortlinks a:focus {
1492 outline: none;
1493 -webkit-box-shadow: none;
1494 box-shadow: none;
1495 }
1496 .merchant-modules-header-shortlinks a svg:first-of-type {
1497 width: 24px;
1498 }
1499 .merchant-modules-header-shortlinks span {
1500 -webkit-box-flex: 1;
1501 -ms-flex: 1;
1502 flex: 1;
1503 }
1504 .merchant-modules-header-shortlinks strong {
1505 color: #101517;
1506 font-weight: 500;
1507 }
1508
1509 .merchant-modules-box {
1510 display: -webkit-box;
1511 display: -ms-flexbox;
1512 display: flex;
1513 grid-gap: 20px;
1514 -webkit-box-orient: vertical;
1515 -webkit-box-direction: normal;
1516 -ms-flex-direction: column;
1517 flex-direction: column;
1518 padding: 20px;
1519 background-color: #fff;
1520 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1521 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1522 border-radius: 4px;
1523 }
1524
1525 .merchant-modules-box-heading {
1526 font-size: 20px;
1527 font-weight: 500;
1528 line-height: 30px;
1529 color: #101517;
1530 }
1531
1532 .merchant-modules-list {
1533 display: grid;
1534 grid-template-columns: repeat(3, minmax(0, 1fr));
1535 grid-gap: 20px;
1536 }
1537
1538 .merchant-modules-list-item {
1539 position: relative;
1540 display: -webkit-box;
1541 display: -ms-flexbox;
1542 display: flex;
1543 grid-gap: 10px;
1544 padding: 20px;
1545 text-decoration: none;
1546 border: 2px solid #F0F0F1;
1547 background-color: #fff;
1548 border-radius: 4px;
1549 -webkit-transition: all 0.2s;
1550 transition: all 0.2s;
1551 }
1552 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-icon,
1553 .merchant-modules-list-item.merchant-module-deactivated-by-bp .merchant-modules-list-item-content {
1554 opacity: 0.5;
1555 }
1556 .merchant-modules-list-item:hover {
1557 -webkit-box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
1558 box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
1559 }
1560 .merchant-modules-list-item:focus {
1561 outline: none;
1562 -webkit-box-shadow: none;
1563 box-shadow: none;
1564 }
1565
1566 .merchant-badge {
1567 color: #99A5B8;
1568 padding: 3px 6px;
1569 border: 1px solid #DFDFDF;
1570 border-radius: 2px;
1571 font-weight: 700;
1572 }
1573 .merchant-badge.merchant-badge-pro {
1574 color: #3858e9;
1575 border-color: #3858e9;
1576 }
1577
1578 .merchant-pro-badge.merchant-pro-tooltip {
1579 position: relative;
1580 }
1581 .merchant-pro-badge.merchant-pro-tooltip:before {
1582 content: attr(data-tooltip-message);
1583 position: absolute;
1584 right: -30px;
1585 bottom: calc(100% + 11px);
1586 color: #FFF;
1587 font-size: 11px;
1588 line-height: 16px;
1589 padding: 3px 6px;
1590 background-color: #1E1E1E;
1591 white-space: nowrap;
1592 opacity: 0;
1593 visibility: hidden;
1594 -webkit-transform: translate3d(0, 6px, 0);
1595 transform: translate3d(0, 6px, 0);
1596 -webkit-transition: ease opacity 300ms, ease transform 300ms;
1597 transition: ease opacity 300ms, ease transform 300ms;
1598 z-index: 2;
1599 }
1600 .merchant-pro-badge.merchant-pro-tooltip:after {
1601 content: "";
1602 position: absolute;
1603 bottom: calc(100% + 3px);
1604 right: 10px;
1605 width: 0;
1606 height: 0;
1607 border-style: solid;
1608 border-width: 4px 4px 4px 4px;
1609 border-color: #1E1E1E transparent transparent transparent;
1610 opacity: 0;
1611 visibility: hidden;
1612 -webkit-transform: translate3d(0, 6px, 0);
1613 transform: translate3d(0, 6px, 0);
1614 -webkit-transition: ease opacity 300ms, ease transform 300ms;
1615 transition: ease opacity 300ms, ease transform 300ms;
1616 z-index: 2;
1617 }
1618 .merchant-pro-badge.merchant-pro-tooltip:hover:before, .merchant-pro-badge.merchant-pro-tooltip:hover:after {
1619 opacity: 1;
1620 visibility: visible;
1621 -webkit-transform: translate3d(0, 0, 0);
1622 transform: translate3d(0, 0, 0);
1623 }
1624
1625 .merchant-modules-list-item-badge-wrapper {
1626 position: absolute;
1627 top: 20px;
1628 right: 20px;
1629 }
1630
1631 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge {
1632 padding: 3px 7px;
1633 color: #FFF;
1634 border: 1px solid #212121;
1635 background-color: #212121;
1636 border-radius: 3px;
1637 font-size: 10px;
1638 line-height: 1.2;
1639 font-weight: 400;
1640 display: -webkit-inline-box;
1641 display: -ms-inline-flexbox;
1642 display: inline-flex;
1643 top: -2px;
1644 text-transform: uppercase;
1645 }
1646 .merchant-modules-list-item-removed-by-bp .merchant-pro-badge:before {
1647 font-weight: 400;
1648 text-transform: none;
1649 }
1650
1651 .merchant-modules-list-item-woo-required .merchant-pro-badge {
1652 padding: 1px 2px;
1653 color: #674399;
1654 border: 1px solid #674399;
1655 border-radius: 3px;
1656 font-size: 9px;
1657 line-height: 1.2;
1658 font-weight: 700;
1659 display: -webkit-inline-box;
1660 display: -ms-inline-flexbox;
1661 display: inline-flex;
1662 top: -2px;
1663 }
1664 .merchant-modules-list-item-woo-required .merchant-pro-badge:before {
1665 font-weight: 400;
1666 }
1667 .merchant-modules-list-item-woo-required + .merchant-modules-list-item-upsell {
1668 right: 53px;
1669 }
1670
1671 .merchant-modules-list-item-icon {
1672 display: -webkit-box;
1673 display: -ms-flexbox;
1674 display: flex;
1675 }
1676 .merchant-modules-list-item-icon svg {
1677 width: 18px;
1678 height: 26px;
1679 fill: #787C82;
1680 }
1681 .merchant-modules-list-item-icon svg.stroke-based {
1682 fill: none;
1683 stroke: #787C82;
1684 }
1685
1686 .merchant-modules-list-item-content {
1687 display: -webkit-box;
1688 display: -ms-flexbox;
1689 display: flex;
1690 grid-gap: 8px;
1691 -webkit-box-orient: vertical;
1692 -webkit-box-direction: normal;
1693 -ms-flex-direction: column;
1694 flex-direction: column;
1695 }
1696
1697 .merchant-modules-list-item-title {
1698 display: -webkit-box;
1699 display: -ms-flexbox;
1700 display: flex;
1701 -webkit-box-align: center;
1702 -ms-flex-align: center;
1703 align-items: center;
1704 grid-gap: 5px;
1705 font-size: 16px;
1706 line-height: 26px;
1707 font-weight: 500;
1708 color: #101517;
1709 }
1710
1711 .merchant-modules-indicator {
1712 width: 10px;
1713 height: 10px;
1714 border-radius: 10px;
1715 background-color: #3c8733;
1716 }
1717
1718 .merchant-modules-list-item-desc {
1719 color: #757575;
1720 font-size: 13px;
1721 line-height: 20px;
1722 max-width: 400px;
1723 }
1724
1725 .merchant-module-page {
1726 display: -webkit-box;
1727 display: -ms-flexbox;
1728 display: flex;
1729 }
1730
1731 .merchant-module-page-back a {
1732 display: -webkit-box;
1733 display: -ms-flexbox;
1734 display: flex;
1735 grid-gap: 5px;
1736 -webkit-box-align: center;
1737 -ms-flex-align: center;
1738 align-items: center;
1739 -webkit-transition: all 0.2s;
1740 transition: all 0.2s;
1741 text-decoration: none;
1742 color: #1D2327;
1743 font-weight: 500;
1744 }
1745 .merchant-module-page-back a:focus, .merchant-module-page-back a:active {
1746 -webkit-box-shadow: none;
1747 box-shadow: none;
1748 outline: none;
1749 }
1750
1751 .merchant-module-page-content {
1752 width: 50%;
1753 -webkit-box-flex: 1;
1754 -ms-flex: 1;
1755 flex: 1;
1756 display: -webkit-box;
1757 display: -ms-flexbox;
1758 display: flex;
1759 grid-gap: 20px;
1760 -webkit-box-orient: vertical;
1761 -webkit-box-direction: normal;
1762 -ms-flex-direction: column;
1763 flex-direction: column;
1764 }
1765
1766 .merchant-module-page-body {
1767 display: -webkit-box;
1768 display: -ms-flexbox;
1769 display: flex;
1770 }
1771
1772 .merchant-module-page-preview {
1773 width: 50%;
1774 margin-left: 20px;
1775 }
1776
1777 .merchant-module-page-body.has-preview .merchant-module-page-setting-box {
1778 -webkit-box-orient: vertical;
1779 -webkit-box-direction: normal;
1780 -ms-flex-direction: column;
1781 flex-direction: column;
1782 grid-gap: 20px;
1783 }
1784 .merchant-module-page-body.has-preview .merchant-module-page-setting-title,
1785 .merchant-module-page-body.has-preview .merchant-module-page-setting-fields {
1786 width: 100%;
1787 }
1788
1789 .merchant-module-page-ajax-form {
1790 -webkit-box-flex: 1;
1791 -ms-flex: 1;
1792 flex: 1;
1793 display: -webkit-box;
1794 display: -ms-flexbox;
1795 display: flex;
1796 grid-gap: 20px;
1797 -webkit-box-orient: vertical;
1798 -webkit-box-direction: normal;
1799 -ms-flex-direction: column;
1800 flex-direction: column;
1801 }
1802
1803 .merchant-module-page-header {
1804 display: -webkit-box;
1805 display: -ms-flexbox;
1806 display: flex;
1807 -webkit-box-align: center;
1808 -ms-flex-align: center;
1809 align-items: center;
1810 background-color: #fff;
1811 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1812 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1813 border-radius: 4px;
1814 }
1815
1816 .merchant-module-page-header-content {
1817 width: 100%;
1818 display: -webkit-box;
1819 display: -ms-flexbox;
1820 display: flex;
1821 grid-gap: 20px;
1822 -webkit-box-orient: vertical;
1823 -webkit-box-direction: normal;
1824 -ms-flex-direction: column;
1825 flex-direction: column;
1826 padding: 30px;
1827 }
1828
1829 .merchant-module-page-header-placeholder {
1830 width: 40%;
1831 display: -webkit-box;
1832 display: -ms-flexbox;
1833 display: flex;
1834 -ms-flex-item-align: end;
1835 align-self: flex-end;
1836 -webkit-box-pack: center;
1837 -ms-flex-pack: center;
1838 justify-content: center;
1839 margin: 40px 60px 0 60px;
1840 }
1841 .merchant-module-page-header-placeholder img {
1842 max-width: 100%;
1843 max-height: 300px;
1844 }
1845
1846 body.merchant-has-admin-preview .merchant-module-page-header-content {
1847 width: 100%;
1848 }
1849 body.merchant-has-admin-preview .merchant-module-page-header-placeholder {
1850 display: none;
1851 }
1852 body.merchant-has-admin-preview .merchant-module-page-desc {
1853 max-width: none;
1854 }
1855
1856 .merchant-module-page-heading {
1857 display: -webkit-box;
1858 display: -ms-flexbox;
1859 display: flex;
1860 grid-gap: 12px;
1861 }
1862
1863 .merchant-module-page-info {
1864 display: -webkit-box;
1865 display: -ms-flexbox;
1866 display: flex;
1867 grid-gap: 10px;
1868 -webkit-box-orient: vertical;
1869 -webkit-box-direction: normal;
1870 -ms-flex-direction: column;
1871 flex-direction: column;
1872 }
1873
1874 .merchant-module-page-title {
1875 font-size: 32px;
1876 line-height: 40px;
1877 font-weight: 500;
1878 color: #101517;
1879 display: -webkit-box;
1880 display: -ms-flexbox;
1881 display: flex;
1882 grid-gap: 15px;
1883 -webkit-box-align: center;
1884 -ms-flex-align: center;
1885 align-items: center;
1886 }
1887 .merchant-module-page-title svg {
1888 width: 28px;
1889 height: 28px;
1890 fill: #787C82;
1891 }
1892
1893 .merchant-module-page-desc {
1894 font-size: 18px;
1895 line-height: 28px;
1896 font-weight: normal;
1897 color: #757575;
1898 max-width: none;
1899 }
1900
1901 .merchant-module-page-actions {
1902 display: -webkit-box;
1903 display: -ms-flexbox;
1904 display: flex;
1905 grid-gap: 10px;
1906 -webkit-box-pack: justify;
1907 -ms-flex-pack: justify;
1908 justify-content: space-between;
1909 }
1910
1911 .merchant-module-page-actions-inner {
1912 display: -webkit-box;
1913 display: -ms-flexbox;
1914 display: flex;
1915 grid-gap: 15px;
1916 }
1917
1918 .merchant-module-page-button {
1919 cursor: pointer;
1920 display: -webkit-box;
1921 display: -ms-flexbox;
1922 display: flex;
1923 grid-gap: 7px;
1924 -webkit-box-pack: center;
1925 -ms-flex-pack: center;
1926 justify-content: center;
1927 -webkit-box-align: center;
1928 -ms-flex-align: center;
1929 align-items: center;
1930 padding: 14px 25px;
1931 font-size: 16px;
1932 line-height: 1em;
1933 font-weight: 500;
1934 -webkit-user-select: none;
1935 -moz-user-select: none;
1936 -ms-user-select: none;
1937 user-select: none;
1938 text-decoration: none;
1939 border-radius: 4px;
1940 color: #fff;
1941 border: 1px solid transparent;
1942 background-color: #3858E9;
1943 }
1944 .merchant-module-page-button.merchant-module-question-answer-button:disabled {
1945 cursor: not-allowed;
1946 background: rgba(239, 239, 239, 0.3);
1947 color: rgba(16, 16, 16, 0.3);
1948 border: 1px solid rgba(195, 195, 195, 0.3);
1949 }
1950 .merchant-module-page-button:focus, .merchant-module-page-button:hover {
1951 outline: none;
1952 -webkit-box-shadow: none;
1953 box-shadow: none;
1954 color: #fff;
1955 }
1956 .merchant-module-page-button svg {
1957 width: 8px;
1958 height: 8px;
1959 }
1960
1961 .merchant-module-deactivate {
1962 display: none;
1963 }
1964
1965 .merchant-module-action {
1966 position: relative;
1967 }
1968 .merchant-module-action.merchant-enabled .merchant-module-activate {
1969 display: none;
1970 }
1971 .merchant-module-action.merchant-enabled .merchant-module-deactivate {
1972 display: block;
1973 }
1974
1975 .merchant-module-deactivate-dropdown {
1976 cursor: pointer;
1977 position: absolute;
1978 top: 100%;
1979 left: 0;
1980 padding: 5px;
1981 white-space: nowrap;
1982 border-radius: 8px;
1983 background-color: #fff;
1984 font-size: 14px;
1985 line-height: 16px;
1986 margin: 0;
1987 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1988 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
1989 opacity: 0;
1990 pointer-events: none;
1991 -webkit-transition: all 0.1s;
1992 transition: all 0.1s;
1993 }
1994 .merchant-module-deactivate-dropdown.merchant-show {
1995 opacity: 1;
1996 pointer-events: auto;
1997 margin-top: 10px;
1998 }
1999
2000 .merchant-module-dropdown {
2001 position: absolute;
2002 overflow: hidden;
2003 top: 100%;
2004 left: 0;
2005 min-width: 275px;
2006 white-space: nowrap;
2007 border-radius: 8px;
2008 background-color: #fff;
2009 font-size: 13px;
2010 line-height: 14px;
2011 margin: 0;
2012 -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2013 box-shadow: 0 3px 6px -3px rgba(23, 24, 24, 0.08), 0 8px 20px -4px rgba(23, 24, 24, 0.12);
2014 opacity: 0;
2015 pointer-events: none;
2016 -webkit-transition: all 0.1s;
2017 transition: all 0.1s;
2018 z-index: 99;
2019 }
2020 .merchant-module-dropdown.merchant-show {
2021 opacity: 1;
2022 pointer-events: auto;
2023 margin-top: 10px;
2024 }
2025 .merchant-module-dropdown ul {
2026 margin: 0;
2027 padding: 0;
2028 list-style: none;
2029 display: -webkit-box;
2030 display: -ms-flexbox;
2031 display: flex;
2032 -webkit-box-orient: vertical;
2033 -webkit-box-direction: normal;
2034 -ms-flex-direction: column;
2035 flex-direction: column;
2036 }
2037 .merchant-module-dropdown ul li {
2038 cursor: pointer;
2039 position: relative;
2040 margin: 0;
2041 display: -webkit-box;
2042 display: -ms-flexbox;
2043 display: flex;
2044 -webkit-box-align: center;
2045 -ms-flex-align: center;
2046 align-items: center;
2047 -webkit-box-pack: justify;
2048 -ms-flex-pack: justify;
2049 justify-content: space-between;
2050 white-space: nowrap;
2051 padding: 15px 15px 0 15px;
2052 color: #202223;
2053 -webkit-transition: all 0.2s;
2054 transition: all 0.2s;
2055 }
2056 .merchant-module-dropdown ul li:before {
2057 content: "";
2058 position: absolute;
2059 z-index: 1;
2060 top: 0;
2061 left: 0;
2062 bottom: 0;
2063 width: 0;
2064 opacity: 0;
2065 -webkit-transition: all 0.2s;
2066 transition: all 0.2s;
2067 background-color: #3858E9;
2068 }
2069 .merchant-module-dropdown ul li:hover {
2070 background-color: #F2F7FE;
2071 }
2072 .merchant-module-dropdown ul li:hover:before {
2073 opacity: 1;
2074 width: 3px;
2075 }
2076 .merchant-module-dropdown ul li span {
2077 width: 100%;
2078 padding-bottom: 15px;
2079 border-bottom: 1px solid #eee;
2080 }
2081 .merchant-module-dropdown ul li:last-child span {
2082 border-bottom: none;
2083 }
2084 .merchant-module-dropdown.merchant-show {
2085 opacity: 1;
2086 pointer-events: auto;
2087 margin-top: 10px;
2088 }
2089
2090 .merchant-module-dropdown-close {
2091 cursor: pointer;
2092 }
2093
2094 .merchant-module-question-title {
2095 display: -webkit-box;
2096 display: -ms-flexbox;
2097 display: flex;
2098 grid-gap: 15px;
2099 -webkit-box-align: center;
2100 -ms-flex-align: center;
2101 align-items: center;
2102 -webkit-box-pack: justify;
2103 -ms-flex-pack: justify;
2104 justify-content: space-between;
2105 white-space: nowrap;
2106 padding: 15px 15px 5px 15px;
2107 font-size: 14px;
2108 line-height: 16px;
2109 color: #202223;
2110 font-weight: 500;
2111 }
2112 .merchant-module-question-title i {
2113 width: auto;
2114 height: auto;
2115 font-size: 24px;
2116 line-height: 1;
2117 }
2118
2119 .merchant-module-question-answer-title {
2120 display: none;
2121 grid-gap: 15px;
2122 -webkit-box-align: center;
2123 -ms-flex-align: center;
2124 align-items: center;
2125 -webkit-box-pack: justify;
2126 -ms-flex-pack: justify;
2127 justify-content: space-between;
2128 white-space: nowrap;
2129 padding: 15px;
2130 font-size: 14px;
2131 line-height: 16px;
2132 color: #202223;
2133 font-weight: 500;
2134 }
2135 .merchant-module-question-answer-title i {
2136 width: auto;
2137 height: auto;
2138 font-size: 20px;
2139 line-height: 1;
2140 }
2141 .merchant-module-question-answer-title.merchant-show {
2142 display: -webkit-box;
2143 display: -ms-flexbox;
2144 display: flex;
2145 }
2146
2147 .merchant-module-question-answer-form {
2148 padding: 5px 15px 15px 15px;
2149 display: -webkit-box;
2150 display: -ms-flexbox;
2151 display: flex;
2152 grid-gap: 10px;
2153 -webkit-box-orient: vertical;
2154 -webkit-box-direction: normal;
2155 -ms-flex-direction: column;
2156 flex-direction: column;
2157 }
2158 .merchant-module-question-answer-form textarea {
2159 width: 100%;
2160 height: 100px;
2161 padding: 12px;
2162 line-height: 1em;
2163 width: 100%;
2164 max-width: 100%;
2165 min-height: auto;
2166 border: 1px solid #D6D6D6;
2167 }
2168 .merchant-module-question-answer-form textarea:focus {
2169 outline: none;
2170 -webkit-box-shadow: none;
2171 box-shadow: none;
2172 border-color: #3858E9;
2173 }
2174 .merchant-module-question-answer-form button {
2175 -ms-flex-item-align: end;
2176 align-self: flex-end;
2177 padding: 8px 10px;
2178 font-size: 13px;
2179 font-weight: 400;
2180 }
2181
2182 .merchant-module-question-answer-thank-you-text {
2183 padding: 5px 15px 15px 15px;
2184 }
2185
2186 .merchant-module-question-thank-you-dropdown .merchant-module-question-answer-title {
2187 display: -webkit-box;
2188 display: -ms-flexbox;
2189 display: flex;
2190 }
2191
2192 .merchant-module-page-button-action-deactivate {
2193 border-radius: 8px;
2194 padding: 12px 16px;
2195 display: -webkit-box;
2196 display: -ms-flexbox;
2197 display: flex;
2198 justify-items: center;
2199 -webkit-box-align: center;
2200 -ms-flex-align: center;
2201 align-items: center;
2202 text-decoration: none;
2203 color: #d82c0d;
2204 }
2205 .merchant-module-page-button-action-deactivate:hover {
2206 background-color: #fff4f4;
2207 }
2208
2209 .merchant-module-page-button-deactivate {
2210 color: #3858E9;
2211 border-color: #3858E9;
2212 background-color: transparent;
2213 }
2214 .merchant-module-page-button-deactivate:focus, .merchant-module-page-button-deactivate:hover {
2215 color: #3858E9;
2216 }
2217 .merchant-module-page-button-deactivate.merchant-show .merchant-module-deactivate-dropdown {
2218 pointer-events: auto;
2219 }
2220
2221 .merchant-module-page-actions-links {
2222 display: -webkit-box;
2223 display: -ms-flexbox;
2224 display: flex;
2225 }
2226
2227 .merchant-module-page-link {
2228 display: -webkit-box;
2229 display: -ms-flexbox;
2230 display: flex;
2231 grid-gap: 5px;
2232 -webkit-box-pack: center;
2233 -ms-flex-pack: center;
2234 justify-content: center;
2235 -webkit-box-align: center;
2236 -ms-flex-align: center;
2237 align-items: center;
2238 padding: 10px;
2239 font-size: 13px;
2240 font-weight: 500;
2241 text-decoration: none;
2242 color: #3858E9;
2243 }
2244 .merchant-module-page-link span {
2245 text-decoration: underline;
2246 }
2247 .merchant-module-page-link:focus, .merchant-module-page-link:hover {
2248 outline: none;
2249 -webkit-box-shadow: none;
2250 box-shadow: none;
2251 color: #3858E9;
2252 }
2253
2254 body.merchant-module-disabled .merchant-module-page-link-preview {
2255 pointer-events: none;
2256 color: #CCC;
2257 }
2258 body.merchant-module-disabled .merchant-module-page-link-preview span {
2259 text-decoration: none;
2260 }
2261 body.merchant-module-disabled .merchant-module-page-link-preview svg path {
2262 fill: #CCC;
2263 }
2264
2265 .merchant-module-page-ajax-header {
2266 display: -webkit-box;
2267 display: -ms-flexbox;
2268 display: flex;
2269 -webkit-box-pack: justify;
2270 -ms-flex-pack: justify;
2271 justify-content: space-between;
2272 -webkit-box-align: center;
2273 -ms-flex-align: center;
2274 align-items: center;
2275 position: fixed;
2276 z-index: 10000;
2277 overflow: hidden;
2278 padding-left: 20px;
2279 padding-right: 20px;
2280 top: 32px;
2281 left: 160px;
2282 right: 0;
2283 height: 56px;
2284 opacity: 0;
2285 pointer-events: none;
2286 background-color: #1d2327;
2287 -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2288 transition: opacity 0.3s cubic-bezier(0, 0, 0.42, 1);
2289 }
2290 .merchant-module-page-ajax-header.merchant-show {
2291 opacity: 1;
2292 pointer-events: auto;
2293 }
2294 .merchant-module-page-ajax-header.merchant-saving {
2295 -webkit-user-select: none;
2296 -moz-user-select: none;
2297 -ms-user-select: none;
2298 user-select: none;
2299 }
2300 .merchant-module-page-ajax-header.merchant-saving i {
2301 opacity: 1;
2302 }
2303 .merchant-module-page-ajax-header.merchant-saving span {
2304 opacity: 0;
2305 }
2306 .merchant-module-page-ajax-header.merchant-saving .merchant-module-page-ajax-buttons {
2307 -webkit-user-select: none;
2308 -moz-user-select: none;
2309 -ms-user-select: none;
2310 user-select: none;
2311 pointer-events: none;
2312 }
2313
2314 .merchant-module-page-ajax-notice {
2315 font-size: 14px;
2316 font-weight: 500;
2317 color: #e3e5e7;
2318 }
2319
2320 .merchant-module-page-ajax-buttons {
2321 display: -webkit-box;
2322 display: -ms-flexbox;
2323 display: flex;
2324 -webkit-box-align: center;
2325 -ms-flex-align: center;
2326 align-items: center;
2327 grid-gap: 15px;
2328 }
2329
2330 .merchant-module-save-button {
2331 position: relative;
2332 cursor: pointer;
2333 display: -webkit-box;
2334 display: -ms-flexbox;
2335 display: flex;
2336 -webkit-box-pack: center;
2337 -ms-flex-pack: center;
2338 justify-content: center;
2339 -webkit-box-align: center;
2340 -ms-flex-align: center;
2341 align-items: center;
2342 font-size: 14px;
2343 line-height: 16px;
2344 border: 0;
2345 border-radius: 4px;
2346 min-width: 60px;
2347 min-height: 36px;
2348 padding-left: 16px;
2349 padding-right: 16px;
2350 color: #fff;
2351 background-color: #3858E9;
2352 }
2353 .merchant-module-save-button i {
2354 position: absolute;
2355 width: auto;
2356 height: auto;
2357 font-size: 20px;
2358 opacity: 0;
2359 -webkit-animation: merchant-spin 1.5s infinite linear;
2360 animation: merchant-spin 1.5s infinite linear;
2361 }
2362
2363 .merchant-module-discard-button {
2364 cursor: pointer;
2365 display: -webkit-box;
2366 display: -ms-flexbox;
2367 display: flex;
2368 -webkit-box-pack: center;
2369 -ms-flex-pack: center;
2370 justify-content: center;
2371 -webkit-box-align: center;
2372 -ms-flex-align: center;
2373 align-items: center;
2374 font-size: 14px;
2375 line-height: 16px;
2376 min-width: 36px;
2377 min-height: 36px;
2378 color: #fff;
2379 text-decoration: none;
2380 }
2381 .merchant-module-discard-button:hover {
2382 color: #fff;
2383 opacity: 0.75;
2384 }
2385 .merchant-module-discard-button:focus {
2386 outline: none;
2387 -webkit-box-shadow: none;
2388 box-shadow: none;
2389 }
2390
2391 .merchant-module-page-preview-browser-top {
2392 background: #323232;
2393 display: -webkit-box;
2394 display: -ms-flexbox;
2395 display: flex;
2396 -webkit-box-align: center;
2397 -ms-flex-align: center;
2398 align-items: center;
2399 height: 45px;
2400 padding-left: 9px;
2401 }
2402
2403 .merchant-module-page-preview-browser-top-circle {
2404 background: #616161;
2405 width: 12px;
2406 height: 12px;
2407 border-radius: 50%;
2408 display: block;
2409 margin-left: 7px;
2410 }
2411
2412 .merchant-module-page-preview-browser {
2413 border-top-left-radius: 5px;
2414 border-top-right-radius: 5px;
2415 overflow: hidden;
2416 -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2417 box-shadow: 0 0 50px rgba(0, 0, 0, 0.1215686275);
2418 margin-bottom: -29px;
2419 display: -webkit-box;
2420 display: -ms-flexbox;
2421 display: flex;
2422 -webkit-box-orient: vertical;
2423 -webkit-box-direction: normal;
2424 -ms-flex-direction: column;
2425 flex-direction: column;
2426 }
2427
2428 .merchant-module-page-preview-browser-inner {
2429 -webkit-box-flex: 1;
2430 -ms-flex-positive: 1;
2431 flex-grow: 1;
2432 position: relative;
2433 display: block;
2434 }
2435
2436 .merchant-module-page-preview-box {
2437 overflow: hidden;
2438 position: sticky;
2439 top: 45px;
2440 }
2441
2442 .merchant-module-page-settings,
2443 .merchant-module-page-preview-box {
2444 display: -webkit-box;
2445 display: -ms-flexbox;
2446 display: flex;
2447 grid-gap: 30px;
2448 -webkit-box-orient: vertical;
2449 -webkit-box-direction: normal;
2450 -ms-flex-direction: column;
2451 flex-direction: column;
2452 padding: 30px;
2453 background-color: #fff;
2454 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
2455 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
2456 border-radius: 4px;
2457 }
2458
2459 .merchant-module-page-setting-box {
2460 display: -webkit-box;
2461 display: -ms-flexbox;
2462 display: flex;
2463 }
2464 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 {
2465 -webkit-box-orient: vertical;
2466 -webkit-box-direction: normal;
2467 -ms-flex-direction: column;
2468 flex-direction: column;
2469 grid-gap: 20px;
2470 }
2471 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-title,
2472 .merchant-module-page-setting-box.merchant-module-page-setting-box-style-2 .merchant-module-page-setting-fields {
2473 width: 100%;
2474 }
2475
2476 .merchant-module-page-preview-title,
2477 .merchant-module-page-setting-title {
2478 margin-top: 0;
2479 padding-right: 50px;
2480 font-size: 20px;
2481 font-weight: 500;
2482 color: #2F2F2F;
2483 }
2484
2485 .merchant-module-page-setting-title {
2486 width: 40%;
2487 }
2488
2489 .merchant-module-page-setting-subtitle {
2490 margin-top: 20px;
2491 font-size: 13px;
2492 font-weight: 400;
2493 color: #757575;
2494 }
2495
2496 .merchant-module-page-setting-fields {
2497 display: -webkit-box;
2498 display: -ms-flexbox;
2499 display: flex;
2500 -webkit-box-orient: vertical;
2501 -webkit-box-direction: normal;
2502 -ms-flex-direction: column;
2503 flex-direction: column;
2504 width: 60%;
2505 padding: 30px;
2506 border-radius: 4px;
2507 border: 2px solid #F0F0F1;
2508 background-color: #fff;
2509 }
2510 .merchant-module-page-setting-fields > .merchant-module-page-setting-field:last-of-type {
2511 margin-bottom: 0;
2512 }
2513 .merchant-module-page-setting-fields > .merchant-module-page-setting-field:not(.merchant-hide):not(:has(~ .merchant-module-page-setting-field:not(.merchant-hide))) {
2514 margin-bottom: 0;
2515 }
2516
2517 .merchant-module-page-setting-field {
2518 display: -webkit-box;
2519 display: -ms-flexbox;
2520 display: flex;
2521 grid-gap: 10px;
2522 -webkit-box-orient: vertical;
2523 -webkit-box-direction: normal;
2524 -ms-flex-direction: column;
2525 flex-direction: column;
2526 margin-bottom: 24px;
2527 }
2528 .merchant-module-page-setting-field.merchant-show {
2529 display: -webkit-box;
2530 display: -ms-flexbox;
2531 display: flex;
2532 }
2533 .merchant-module-page-setting-field.merchant-hide {
2534 display: none;
2535 }
2536 .merchant-module-page-setting-field[data-id=shortcode_text] {
2537 margin-top: 24px;
2538 }
2539
2540 .merchant-module-page-setting-field-title {
2541 font-size: 14px;
2542 font-weight: 500;
2543 color: #2F2F2F;
2544 }
2545 .merchant-module-page-setting-field-title__has-upsell {
2546 gap: 7px !important;
2547 }
2548 .merchant-module-page-setting-field-title__has-upsell,
2549 .merchant-module-page-setting-field-title__has-upsell a span {
2550 display: -webkit-box;
2551 display: -ms-flexbox;
2552 display: flex;
2553 -webkit-box-align: center;
2554 -ms-flex-align: center;
2555 align-items: center;
2556 }
2557
2558 .merchant-module-page-setting-field-desc {
2559 font-size: 13px;
2560 font-weight: 400;
2561 color: #777;
2562 }
2563 .merchant-module-page-setting-field-desc-has-hidden-desc {
2564 display: -webkit-box;
2565 display: -ms-flexbox;
2566 display: flex;
2567 gap: 5px;
2568 }
2569 .merchant-module-page-setting-field-desc a {
2570 color: #3858E9;
2571 }
2572 .merchant-module-page-setting-field-desc a:focus {
2573 -webkit-box-shadow: none;
2574 box-shadow: none;
2575 }
2576
2577 .merchant-module-page-setting-field-hidden-desc {
2578 display: none;
2579 }
2580 .merchant-module-page-setting-field-hidden-desc-trigger {
2581 color: #3858E9;
2582 font-weight: 500;
2583 display: -webkit-box;
2584 display: -ms-flexbox;
2585 display: flex;
2586 -webkit-box-align: center;
2587 -ms-flex-align: center;
2588 align-items: center;
2589 white-space: nowrap;
2590 -webkit-user-select: none;
2591 -moz-user-select: none;
2592 -ms-user-select: none;
2593 user-select: none;
2594 cursor: pointer;
2595 gap: 3px;
2596 }
2597 .merchant-module-page-setting-field-hidden-desc-trigger img {
2598 margin-top: 2px;
2599 }
2600 .merchant-module-page-setting-field-hidden-desc-trigger.expanded img {
2601 -webkit-transform: rotate(180deg);
2602 transform: rotate(180deg);
2603 }
2604
2605 .merchant-license-form-wrapper .merchant-license-form {
2606 display: -webkit-box;
2607 display: -ms-flexbox;
2608 display: flex;
2609 -ms-flex-wrap: wrap;
2610 flex-wrap: wrap;
2611 grid-gap: 10px;
2612 }
2613 .merchant-license-form-wrapper .merchant-license-form input {
2614 width: 400px;
2615 max-width: 100%;
2616 padding-left: 38px;
2617 min-height: 40px;
2618 }
2619 .merchant-license-form-wrapper .merchant-license-form input::-webkit-input-placeholder {
2620 opacity: 0.75;
2621 }
2622 .merchant-license-form-wrapper .merchant-license-form input::-moz-placeholder {
2623 opacity: 0.75;
2624 }
2625 .merchant-license-form-wrapper .merchant-license-form input:-ms-input-placeholder {
2626 opacity: 0.75;
2627 }
2628 .merchant-license-form-wrapper .merchant-license-form input::-ms-input-placeholder {
2629 opacity: 0.75;
2630 }
2631 .merchant-license-form-wrapper .merchant-license-form input::placeholder {
2632 opacity: 0.75;
2633 }
2634 .merchant-license-form-wrapper .merchant-license-form button,
2635 .merchant-license-form-wrapper .merchant-license-form button:disabled {
2636 position: relative;
2637 display: -webkit-box;
2638 display: -ms-flexbox;
2639 display: flex;
2640 grid-gap: 2px;
2641 -webkit-box-align: center;
2642 -ms-flex-align: center;
2643 align-items: center;
2644 line-height: 1em;
2645 min-height: 36px;
2646 padding: 10px 40px !important;
2647 background-color: #3452da !important;
2648 color: #FFF !important;
2649 border-color: #3452da !important;
2650 }
2651 .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,
2652 .merchant-license-form-wrapper .merchant-license-form button:disabled:hover,
2653 .merchant-license-form-wrapper .merchant-license-form button:disabled:focus,
2654 .merchant-license-form-wrapper .merchant-license-form button:disabled:active {
2655 opacity: 0.8;
2656 }
2657 .merchant-license-form-wrapper .merchant-license-form button.merchant-license-button-deactivate,
2658 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate {
2659 background-color: #d82c0d !important;
2660 border-color: #d82c0d !important;
2661 }
2662 .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,
2663 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate:hover,
2664 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate:focus,
2665 .merchant-license-form-wrapper .merchant-license-form button:disabled.merchant-license-button-deactivate:active {
2666 color: #FFF;
2667 }
2668 .merchant-license-form-wrapper .merchant-license-form button .merchant-license-loader,
2669 .merchant-license-form-wrapper .merchant-license-form button:disabled .merchant-license-loader {
2670 margin-right: 2px;
2671 font-size: 14px;
2672 width: 14px;
2673 height: 14px;
2674 -webkit-animation: merchant-spin 1.5s infinite linear;
2675 animation: merchant-spin 1.5s infinite linear;
2676 }
2677 .merchant-license-form-wrapper .merchant-license-key-input {
2678 position: relative;
2679 display: -webkit-box;
2680 display: -ms-flexbox;
2681 display: flex;
2682 }
2683 @media (max-width: 768px) {
2684 .merchant-license-form-wrapper .merchant-license-key-input {
2685 max-width: 100%;
2686 }
2687 }
2688 .merchant-license-form-wrapper .merchant-license-key-input i {
2689 position: absolute;
2690 z-index: 1;
2691 top: 50%;
2692 left: 14px;
2693 -webkit-transform: translateY(-50%);
2694 transform: translateY(-50%);
2695 margin-top: 1px;
2696 font-size: 20px !important;
2697 color: #5C5F62;
2698 }
2699
2700 .merchant-license-response-wrapper,
2701 .merchant-dashboard-license-success {
2702 display: block;
2703 margin-top: 10px;
2704 color: #757575;
2705 }
2706 .merchant-license-response-wrapper:empty,
2707 .merchant-dashboard-license-success:empty {
2708 margin-top: 0;
2709 }
2710 .merchant-license-response-wrapper span,
2711 .merchant-dashboard-license-success span {
2712 color: #0b890b;
2713 margin-left: 5px;
2714 }
2715
2716 .merchant-license-instruction {
2717 width: 360px;
2718 max-width: 100%;
2719 margin-top: 15px;
2720 }
2721 .merchant-license-instruction .ui-helper-reset {
2722 margin: 0;
2723 }
2724 .merchant-license-instruction-header {
2725 cursor: pointer;
2726 display: -webkit-box;
2727 display: -ms-flexbox;
2728 display: flex;
2729 -webkit-box-align: center;
2730 -ms-flex-align: center;
2731 align-items: center;
2732 gap: 5px;
2733 color: #3858e9;
2734 background-color: #e8ecff;
2735 padding: 7px 5px;
2736 }
2737 .merchant-license-instruction-content {
2738 display: -webkit-box;
2739 display: -ms-flexbox;
2740 display: flex;
2741 -webkit-box-orient: vertical;
2742 -webkit-box-direction: normal;
2743 -ms-flex-direction: column;
2744 flex-direction: column;
2745 gap: 3px;
2746 border: 1px solid #E8ECFF;
2747 padding: 10px;
2748 border-top: none;
2749 }
2750 .merchant-license-instruction-content li {
2751 color: #6D7175;
2752 font-size: 13px;
2753 position: relative;
2754 padding-left: 15px;
2755 }
2756 .merchant-license-instruction-content svg {
2757 position: absolute;
2758 left: 0;
2759 top: 6px;
2760 }
2761 .merchant-license-instruction-caret {
2762 margin-inline: auto 6px;
2763 margin-top: -3px;
2764 }
2765 .merchant-license-instruction .ui-accordion-header-collapsed .merchant-license-instruction-caret svg {
2766 -webkit-transform: rotate(180deg);
2767 transform: rotate(180deg);
2768 }
2769
2770 .merchant-datetime-field input,
2771 .merchant-module-page-setting-field-text input,
2772 .merchant-module-page-setting-field-url input,
2773 .merchant-module-page-setting-field-number input,
2774 .merchant-module-page-setting-field-text_readonly input {
2775 padding: 12px;
2776 line-height: 1.3em;
2777 width: 100%;
2778 max-width: 100%;
2779 min-height: auto;
2780 border: 1px solid #D6D6D6;
2781 }
2782 .merchant-datetime-field input:focus,
2783 .merchant-module-page-setting-field-text input:focus,
2784 .merchant-module-page-setting-field-url input:focus,
2785 .merchant-module-page-setting-field-number input:focus,
2786 .merchant-module-page-setting-field-text_readonly input:focus {
2787 outline: none;
2788 -webkit-box-shadow: none;
2789 box-shadow: none;
2790 border-color: #3858E9;
2791 }
2792
2793 .merchant-module-page-setting-field-textarea_multiline textarea,
2794 .merchant-module-page-setting-field-textarea textarea,
2795 .merchant-module-page-setting-field-textarea_code textarea {
2796 padding: 12px;
2797 line-height: 1.4;
2798 width: 100%;
2799 max-width: 100%;
2800 min-height: 120px;
2801 border: 1px solid #D6D6D6;
2802 }
2803 .merchant-module-page-setting-field-textarea_multiline textarea:focus,
2804 .merchant-module-page-setting-field-textarea textarea:focus,
2805 .merchant-module-page-setting-field-textarea_code textarea:focus {
2806 outline: none;
2807 -webkit-box-shadow: none;
2808 box-shadow: none;
2809 border-color: #3858E9;
2810 }
2811
2812 .merchant-module-page-setting-field-radio div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode),
2813 .merchant-module-page-setting-field-radio_alt div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode),
2814 .merchant-module-page-setting-field-checkbox div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode),
2815 .merchant-module-page-setting-field-checkbox_multiple div:not(.merchant-module-page-setting-field-desc, .merchant-field-operating_mode) {
2816 display: -webkit-box;
2817 display: -ms-flexbox;
2818 display: flex;
2819 -ms-flex-wrap: wrap;
2820 flex-wrap: wrap;
2821 grid-gap: 30px;
2822 }
2823 .merchant-module-page-setting-field-radio label,
2824 .merchant-module-page-setting-field-radio_alt label,
2825 .merchant-module-page-setting-field-checkbox label,
2826 .merchant-module-page-setting-field-checkbox_multiple label {
2827 display: -webkit-box;
2828 display: -ms-flexbox;
2829 display: flex;
2830 grid-gap: 12px;
2831 -webkit-box-align: center;
2832 -ms-flex-align: center;
2833 align-items: center;
2834 -webkit-user-select: none;
2835 -moz-user-select: none;
2836 -ms-user-select: none;
2837 user-select: none;
2838 }
2839 .merchant-module-page-setting-field-radio span,
2840 .merchant-module-page-setting-field-radio_alt span,
2841 .merchant-module-page-setting-field-checkbox span,
2842 .merchant-module-page-setting-field-checkbox_multiple span {
2843 font-size: 14px;
2844 font-weight: 400;
2845 color: #1D2327;
2846 }
2847 .merchant-module-page-setting-field-radio input,
2848 .merchant-module-page-setting-field-radio_alt input,
2849 .merchant-module-page-setting-field-checkbox input,
2850 .merchant-module-page-setting-field-checkbox_multiple input {
2851 -ms-flex-negative: 0;
2852 flex-shrink: 0;
2853 margin: 0;
2854 width: 20px;
2855 height: 20px;
2856 border: 1px solid #D6D6D6;
2857 background-color: #fff;
2858 display: -webkit-inline-box;
2859 display: -ms-inline-flexbox;
2860 display: inline-flex;
2861 -webkit-box-align: center;
2862 -ms-flex-align: center;
2863 align-items: center;
2864 -webkit-box-pack: center;
2865 -ms-flex-pack: center;
2866 justify-content: center;
2867 -webkit-transition: none;
2868 transition: none;
2869 -webkit-box-sizing: border-box;
2870 box-sizing: border-box;
2871 -webkit-box-shadow: none;
2872 box-shadow: none;
2873 }
2874 .merchant-module-page-setting-field-radio input:checked,
2875 .merchant-module-page-setting-field-radio_alt input:checked,
2876 .merchant-module-page-setting-field-checkbox input:checked,
2877 .merchant-module-page-setting-field-checkbox_multiple input:checked {
2878 -webkit-transition: none;
2879 transition: none;
2880 }
2881 .merchant-module-page-setting-field-radio input:checked::before,
2882 .merchant-module-page-setting-field-radio_alt input:checked::before,
2883 .merchant-module-page-setting-field-checkbox input:checked::before,
2884 .merchant-module-page-setting-field-checkbox_multiple input:checked::before {
2885 content: "";
2886 margin: 0;
2887 padding: 0;
2888 -webkit-box-sizing: border-box;
2889 box-sizing: border-box;
2890 -webkit-transition: none;
2891 transition: none;
2892 }
2893 .merchant-module-page-setting-field-radio input[type=checkbox],
2894 .merchant-module-page-setting-field-radio_alt input[type=checkbox],
2895 .merchant-module-page-setting-field-checkbox input[type=checkbox],
2896 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox] {
2897 border-radius: 6px;
2898 }
2899 .merchant-module-page-setting-field-radio input[type=checkbox]:focus,
2900 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:focus,
2901 .merchant-module-page-setting-field-checkbox input[type=checkbox]:focus,
2902 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:focus {
2903 border-color: #fff;
2904 -webkit-box-shadow: 0 0 0 2px #3858E9;
2905 box-shadow: 0 0 0 2px #3858E9;
2906 }
2907 .merchant-module-page-setting-field-radio input[type=checkbox]:checked,
2908 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked,
2909 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked,
2910 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked {
2911 border-color: #fff;
2912 background-color: #3858E9;
2913 }
2914 .merchant-module-page-setting-field-radio input[type=checkbox]:checked::before,
2915 .merchant-module-page-setting-field-radio_alt input[type=checkbox]:checked::before,
2916 .merchant-module-page-setting-field-checkbox input[type=checkbox]:checked::before,
2917 .merchant-module-page-setting-field-checkbox_multiple input[type=checkbox]:checked::before {
2918 width: 100%;
2919 height: 100%;
2920 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");
2921 background-repeat: no-repeat;
2922 background-position: 3px 4px;
2923 }
2924 .merchant-module-page-setting-field-radio input[type=radio],
2925 .merchant-module-page-setting-field-radio_alt input[type=radio],
2926 .merchant-module-page-setting-field-checkbox input[type=radio],
2927 .merchant-module-page-setting-field-checkbox_multiple input[type=radio] {
2928 border-radius: 100%;
2929 }
2930 .merchant-module-page-setting-field-radio input[type=radio]:focus,
2931 .merchant-module-page-setting-field-radio_alt input[type=radio]:focus,
2932 .merchant-module-page-setting-field-checkbox input[type=radio]:focus,
2933 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:focus {
2934 border-color: #fff;
2935 -webkit-box-shadow: none;
2936 box-shadow: none;
2937 }
2938 .merchant-module-page-setting-field-radio input[type=radio]:checked,
2939 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked,
2940 .merchant-module-page-setting-field-checkbox input[type=radio]:checked,
2941 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked {
2942 border-color: #3858E9;
2943 background-color: #fff;
2944 -webkit-box-shadow: 0 0 0 1px #3858E9;
2945 box-shadow: 0 0 0 1px #3858E9;
2946 }
2947 .merchant-module-page-setting-field-radio input[type=radio]:checked::before,
2948 .merchant-module-page-setting-field-radio_alt input[type=radio]:checked::before,
2949 .merchant-module-page-setting-field-checkbox input[type=radio]:checked::before,
2950 .merchant-module-page-setting-field-checkbox_multiple input[type=radio]:checked::before {
2951 width: 12px;
2952 height: 12px;
2953 border-radius: 12px;
2954 background-color: #3858E9;
2955 }
2956
2957 .merchant-module-page-setting-field-checkbox_multiple div {
2958 grid-gap: 0;
2959 }
2960 .merchant-module-page-setting-field-checkbox_multiple .merchant-module-page-setting-field-inner {
2961 display: -webkit-box;
2962 display: -ms-flexbox;
2963 display: flex;
2964 -webkit-box-orient: vertical;
2965 -webkit-box-direction: normal;
2966 -ms-flex-direction: column;
2967 flex-direction: column;
2968 gap: 15px !important;
2969 }
2970
2971 @media (max-width: 1300px) {
2972 .merchant-module-page-setting-field-radio div {
2973 grid-gap: 20px;
2974 }
2975 }
2976 .merchant-module-page-setting-field-radio span {
2977 opacity: 0.8;
2978 }
2979 .merchant-module-page-setting-field-radio input[type=radio]:checked + span {
2980 opacity: 1;
2981 }
2982
2983 .merchant-module-page-setting-field-radio_alt div {
2984 display: -webkit-box;
2985 display: -ms-flexbox;
2986 display: flex;
2987 grid-gap: 10px;
2988 -webkit-box-orient: vertical;
2989 -webkit-box-direction: normal;
2990 -ms-flex-direction: column;
2991 flex-direction: column;
2992 }
2993 .merchant-module-page-setting-field-radio_alt label span {
2994 font-size: 14px;
2995 font-weight: 400;
2996 color: #1D2327;
2997 }
2998 .merchant-module-page-setting-field-radio_alt p {
2999 margin: 0;
3000 color: #757575;
3001 }
3002 .merchant-module-page-setting-field-radio_alt .merchant-module-page-setting-field-inner {
3003 grid-gap: 30px;
3004 -webkit-box-orient: vertical;
3005 -webkit-box-direction: normal;
3006 -ms-flex-direction: column;
3007 flex-direction: column;
3008 }
3009 .merchant-module-page-setting-field-radio_alt .merchant-field-operating_mode > div {
3010 grid-gap: 5px;
3011 }
3012 .merchant-module-page-setting-field-radio_alt .merchant-field-operating_mode label {
3013 -webkit-box-align: start;
3014 -ms-flex-align: start;
3015 align-items: flex-start;
3016 }
3017 .merchant-module-page-setting-field-radio_alt .merchant-field-operating_mode p {
3018 margin-left: 32px;
3019 }
3020
3021 .merchant-module-page-setting-field-content {
3022 max-width: 60vw;
3023 }
3024 .merchant-module-page-setting-field-content a {
3025 color: #3858E9;
3026 }
3027 .merchant-module-page-setting-field-content a:focus {
3028 -webkit-box-shadow: none;
3029 box-shadow: none;
3030 }
3031 .merchant-module-page-setting-field-content .merchant-module-page-setting-field-inner:empty {
3032 display: none;
3033 }
3034
3035 .merchant-info-block,
3036 .merchant-tag-pre-orders {
3037 display: -webkit-box;
3038 display: -ms-flexbox;
3039 display: flex;
3040 grid-gap: 16px;
3041 }
3042 .merchant-info-block a,
3043 .merchant-tag-pre-orders a {
3044 display: -webkit-box;
3045 display: -ms-flexbox;
3046 display: flex;
3047 -webkit-box-align: center;
3048 -ms-flex-align: center;
3049 align-items: center;
3050 -webkit-box-pack: center;
3051 -ms-flex-pack: center;
3052 justify-content: center;
3053 margin: 0;
3054 padding: 8px 26px;
3055 font-size: 14px;
3056 line-height: 20px;
3057 -webkit-user-select: none;
3058 -moz-user-select: none;
3059 -ms-user-select: none;
3060 user-select: none;
3061 min-width: 145px;
3062 font-weight: 500;
3063 text-decoration: none;
3064 border-radius: 4px;
3065 color: #202223;
3066 border: 1px solid #C9CCCF;
3067 background-color: #fff;
3068 }
3069 .merchant-info-block a:focus, .merchant-info-block a:active,
3070 .merchant-tag-pre-orders a:focus,
3071 .merchant-tag-pre-orders a:active {
3072 outline: none;
3073 -webkit-box-shadow: none;
3074 box-shadow: none;
3075 }
3076 .merchant-info-block p,
3077 .merchant-tag-pre-orders p {
3078 display: -webkit-box;
3079 display: -ms-flexbox;
3080 display: flex;
3081 -webkit-box-orient: vertical;
3082 -webkit-box-direction: normal;
3083 -ms-flex-direction: column;
3084 flex-direction: column;
3085 -webkit-box-align: start;
3086 -ms-flex-align: start;
3087 align-items: flex-start;
3088 grid-gap: 16px;
3089 font-size: 14px;
3090 line-height: 20px;
3091 margin: 0;
3092 padding: 0;
3093 }
3094 .merchant-info-block p i,
3095 .merchant-tag-pre-orders p i {
3096 -ms-flex-negative: 0;
3097 flex-shrink: 0;
3098 }
3099
3100 .merchant-info-block {
3101 padding: 15px;
3102 border-radius: 4px;
3103 border: 1px solid #BABFC3;
3104 }
3105
3106 .merchant-module-page-setting-field-select select,
3107 .merchant-module-page-setting-field-select_ajax select,
3108 .merchant-module-page-setting-field-select_size_chart select {
3109 padding: 12px 20px 12px 12px;
3110 line-height: 1.3em;
3111 width: 100%;
3112 max-width: 100%;
3113 min-height: auto;
3114 border-radius: 6px;
3115 color: #2F2F2F;
3116 border: 1px solid #D6D6D6;
3117 }
3118 .merchant-module-page-setting-field-select select:hover,
3119 .merchant-module-page-setting-field-select_ajax select:hover,
3120 .merchant-module-page-setting-field-select_size_chart select:hover {
3121 color: #2F2F2F;
3122 }
3123 .merchant-module-page-setting-field-select select:focus,
3124 .merchant-module-page-setting-field-select_ajax select:focus,
3125 .merchant-module-page-setting-field-select_size_chart select:focus {
3126 outline: none;
3127 -webkit-box-shadow: none;
3128 box-shadow: none;
3129 border-color: #3858E9;
3130 }
3131 .merchant-module-page-setting-field-select select option,
3132 .merchant-module-page-setting-field-select_ajax select option,
3133 .merchant-module-page-setting-field-select_size_chart select option {
3134 color: #2F2F2F;
3135 }
3136 .merchant-module-page-setting-field-select .select2-container .select2-selection--single,
3137 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single,
3138 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single {
3139 height: 44px !important;
3140 border: solid #d6d6d6 1px;
3141 }
3142 .merchant-module-page-setting-field-select .select2-container .select2-selection--single .select2-selection__rendered,
3143 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--single .select2-selection__rendered,
3144 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--single .select2-selection__rendered {
3145 line-height: 41px !important;
3146 }
3147 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple,
3148 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple,
3149 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple {
3150 display: -webkit-box;
3151 display: -ms-flexbox;
3152 display: flex;
3153 -webkit-box-align: center;
3154 -ms-flex-align: center;
3155 align-items: center;
3156 border: solid #d6d6d6 1px;
3157 }
3158 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__rendered,
3159 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__rendered,
3160 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__rendered {
3161 padding: 5px 10px;
3162 }
3163 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice,
3164 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice,
3165 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice {
3166 margin-top: 6px;
3167 margin-bottom: 0;
3168 }
3169 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3170 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field,
3171 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-selection__choice ~ li .select2-search__field {
3172 position: relative;
3173 top: 3px;
3174 margin-top: 0;
3175 }
3176 .merchant-module-page-setting-field-select .select2-container .select2-selection--multiple .select2-search__field,
3177 .merchant-module-page-setting-field-select_ajax .select2-container .select2-selection--multiple .select2-search__field,
3178 .merchant-module-page-setting-field-select_size_chart .select2-container .select2-selection--multiple .select2-search__field {
3179 min-height: 0;
3180 border: none;
3181 }
3182 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--single,
3183 .merchant-module-page-setting-field-select .select2-container.select2-container--focus .select2-selection--multiple,
3184 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--single,
3185 .merchant-module-page-setting-field-select_ajax .select2-container.select2-container--focus .select2-selection--multiple,
3186 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--single,
3187 .merchant-module-page-setting-field-select_size_chart .select2-container.select2-container--focus .select2-selection--multiple {
3188 border-color: #3858E9;
3189 }
3190 .merchant-module-page-setting-field-select .select2-selection__arrow,
3191 .merchant-module-page-setting-field-select_ajax .select2-selection__arrow,
3192 .merchant-module-page-setting-field-select_size_chart .select2-selection__arrow {
3193 height: 43px !important;
3194 }
3195
3196 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper {
3197 display: -webkit-box;
3198 display: -ms-flexbox;
3199 display: flex;
3200 grid-gap: 15px;
3201 }
3202 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-select {
3203 width: 100%;
3204 }
3205 .merchant-module-page-setting-field-hook_select .merchant-module-page-setting-field-hook_select-wrapper .merchant-module-page-setting-field-number {
3206 width: 100px;
3207 }
3208
3209 .merchant-module-page-setting-field-choices input {
3210 display: none;
3211 }
3212 .merchant-module-page-setting-field-choices input:checked + figure {
3213 border-color: #3858E9;
3214 }
3215 .merchant-module-page-setting-field-choices input:disabled + figure {
3216 opacity: 0.5;
3217 cursor: not-allowed;
3218 }
3219 .merchant-module-page-setting-field-choices label {
3220 display: -webkit-box;
3221 display: -ms-flexbox;
3222 display: flex;
3223 position: relative;
3224 }
3225 .merchant-module-page-setting-field-choices label:hover .merchant-tooltip {
3226 opacity: 1;
3227 visibility: visible;
3228 -webkit-transform: translate3d(-50%, 0, 0);
3229 transform: translate3d(-50%, 0, 0);
3230 }
3231 .merchant-module-page-setting-field-choices figure {
3232 display: -webkit-box;
3233 display: -ms-flexbox;
3234 display: flex;
3235 margin: 0;
3236 padding: 2px;
3237 border-radius: 4px;
3238 border: 2px solid transparent;
3239 }
3240 .merchant-module-page-setting-field-choices .merchant-tooltip {
3241 position: absolute;
3242 z-index: 10;
3243 left: 50%;
3244 bottom: calc(100% + 12px);
3245 padding: 3px 12px;
3246 font-size: 11px;
3247 white-space: nowrap;
3248 opacity: 0;
3249 visibility: hidden;
3250 -webkit-transform: translate3d(-50%, 6px, 0);
3251 transform: translate3d(-50%, 6px, 0);
3252 -webkit-transition: all 0.2s;
3253 transition: all 0.2s;
3254 border-radius: 3px;
3255 color: #f7f7f7;
3256 background-color: #212121;
3257 }
3258 .merchant-module-page-setting-field-choices .merchant-tooltip:after {
3259 content: "";
3260 position: absolute;
3261 left: 50%;
3262 bottom: -12px;
3263 border: 6px solid transparent;
3264 border-top-color: #212121;
3265 -webkit-transform: translate3d(-50%, 0, 0);
3266 transform: translate3d(-50%, 0, 0);
3267 }
3268 .merchant-module-page-setting-field-choices .merchant-choices {
3269 display: -webkit-box;
3270 display: -ms-flexbox;
3271 display: flex;
3272 -ms-flex-wrap: wrap;
3273 flex-wrap: wrap;
3274 grid-gap: 10px;
3275 }
3276 .merchant-module-page-setting-field-choices .merchant-choices label {
3277 cursor: pointer;
3278 }
3279 .merchant-module-page-setting-field-choices .merchant-choices svg {
3280 width: 20px;
3281 height: 20px;
3282 }
3283
3284 .merchant-module-page-setting-field-buttons input {
3285 display: none;
3286 }
3287 .merchant-module-page-setting-field-buttons input:checked + span {
3288 color: #fff;
3289 background-color: #3858E9;
3290 }
3291 .merchant-module-page-setting-field-buttons label {
3292 display: -webkit-box;
3293 display: -ms-flexbox;
3294 display: flex;
3295 }
3296 .merchant-module-page-setting-field-buttons span {
3297 display: -webkit-box;
3298 display: -ms-flexbox;
3299 display: flex;
3300 -webkit-box-align: center;
3301 -ms-flex-align: center;
3302 align-items: center;
3303 -webkit-box-pack: center;
3304 -ms-flex-pack: center;
3305 justify-content: center;
3306 margin: 0;
3307 padding: 10px 15px;
3308 border-radius: 2px;
3309 -webkit-user-select: none;
3310 -moz-user-select: none;
3311 -ms-user-select: none;
3312 user-select: none;
3313 min-width: 120px;
3314 font-weight: 500;
3315 }
3316 .merchant-module-page-setting-field-buttons .merchant-buttons {
3317 display: -webkit-inline-box;
3318 display: -ms-inline-flexbox;
3319 display: inline-flex;
3320 padding: 3px;
3321 border: 1px solid #D6D6D6;
3322 border-radius: 4px;
3323 }
3324 .merchant-module-page-setting-field-buttons .merchant-button-underline span {
3325 text-decoration: underline;
3326 }
3327 .merchant-module-page-setting-field-buttons .merchant-button-line-through span {
3328 text-decoration: line-through;
3329 }
3330 .merchant-module-page-setting-field-buttons .merchant-button-overline span {
3331 text-decoration: overline;
3332 }
3333
3334 .merchant-module-page-setting-field-buttons_content input,
3335 .merchant-module-page-setting-field-buttons_alt input {
3336 display: none;
3337 }
3338 .merchant-module-page-setting-field-buttons_content label,
3339 .merchant-module-page-setting-field-buttons_alt label {
3340 display: -webkit-box;
3341 display: -ms-flexbox;
3342 display: flex;
3343 cursor: pointer;
3344 }
3345 .merchant-module-page-setting-field-buttons_content label:hover,
3346 .merchant-module-page-setting-field-buttons_alt label:hover {
3347 position: relative;
3348 z-index: 10;
3349 }
3350 .merchant-module-page-setting-field-buttons_content label > span,
3351 .merchant-module-page-setting-field-buttons_alt label > span {
3352 display: -webkit-box;
3353 display: -ms-flexbox;
3354 display: flex;
3355 -webkit-box-align: center;
3356 -ms-flex-align: center;
3357 align-items: center;
3358 -webkit-box-pack: center;
3359 -ms-flex-pack: center;
3360 justify-content: center;
3361 margin: 0;
3362 padding: 10px 15px;
3363 -webkit-user-select: none;
3364 -moz-user-select: none;
3365 -ms-user-select: none;
3366 user-select: none;
3367 min-width: 120px;
3368 font-weight: 500;
3369 border-radius: 4px;
3370 border: 1px solid #D6D6D6;
3371 background-color: #fff;
3372 }
3373 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content,
3374 .merchant-module-page-setting-field-buttons_content .merchant-buttons,
3375 .merchant-module-page-setting-field-buttons_alt .merchant-buttons-content,
3376 .merchant-module-page-setting-field-buttons_alt .merchant-buttons {
3377 display: -webkit-box;
3378 display: -ms-flexbox;
3379 display: flex;
3380 -ms-flex-wrap: wrap;
3381 flex-wrap: wrap;
3382 grid-gap: 5px;
3383 padding: 3px;
3384 }
3385
3386 .merchant-module-page-setting-field-buttons_alt input:checked + span {
3387 color: #fff;
3388 background-color: #3858E9;
3389 }
3390
3391 .merchant-module-page-setting-field-buttons_content input:checked + span {
3392 color: inherit;
3393 border: 1px solid #3858E9;
3394 -webkit-box-shadow: 0 0 0 1px #3858e9 inset;
3395 box-shadow: 0 0 0 1px #3858e9 inset;
3396 }
3397 .merchant-module-page-setting-field-buttons_content label {
3398 -webkit-box-flex: 1;
3399 -ms-flex: 1;
3400 flex: 1;
3401 }
3402 .merchant-module-page-setting-field-buttons_content .merchant-buttons-content {
3403 gap: 10px;
3404 }
3405 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content {
3406 display: -webkit-box;
3407 display: -ms-flexbox;
3408 display: flex;
3409 -webkit-box-align: center;
3410 -ms-flex-align: center;
3411 align-items: center;
3412 -webkit-box-pack: start;
3413 -ms-flex-pack: start;
3414 justify-content: flex-start;
3415 gap: 10px;
3416 -webkit-box-flex: 1;
3417 -ms-flex: 1;
3418 flex: 1;
3419 }
3420 .merchant-module-page-setting-field-buttons_content .merchant-buttons-inner-content > span {
3421 display: -webkit-box;
3422 display: -ms-flexbox;
3423 display: flex;
3424 -ms-flex-item-align: stretch;
3425 align-self: stretch;
3426 -webkit-box-orient: vertical;
3427 -webkit-box-direction: normal;
3428 -ms-flex-direction: column;
3429 flex-direction: column;
3430 gap: 5px;
3431 }
3432
3433 .merchant-animated-buttons .merchant-buttons {
3434 display: grid;
3435 grid-template-columns: repeat(5, 1fr);
3436 }
3437 .merchant-animated-buttons span {
3438 width: 100%;
3439 }
3440
3441 @media (max-width: 1470px) {
3442 .merchant-animated-buttons .merchant-buttons {
3443 grid-template-columns: repeat(3, 1fr);
3444 }
3445 }
3446 @media (max-width: 1050px) {
3447 .merchant-animated-buttons .merchant-buttons {
3448 grid-template-columns: repeat(2, 1fr);
3449 }
3450 }
3451 /* Sortable Field */
3452 .merchant-sortable {
3453 max-width: 300px;
3454 }
3455 .merchant-sortable ul.ui-sortable li {
3456 position: relative;
3457 overflow: hidden;
3458 padding: 0;
3459 color: #1E1E1E;
3460 border: 1px solid #ddd;
3461 border-radius: 2px;
3462 text-transform: capitalize;
3463 line-height: 36px;
3464 cursor: -webkit-grab;
3465 cursor: grab;
3466 }
3467 .merchant-sortable ul.ui-sortable li .dashicons {
3468 width: 36px;
3469 height: 36px;
3470 -ms-flex-preferred-size: 36px;
3471 flex-basis: 36px;
3472 display: -webkit-box;
3473 display: -ms-flexbox;
3474 display: flex;
3475 -webkit-box-pack: center;
3476 -ms-flex-pack: center;
3477 justify-content: center;
3478 -webkit-box-align: center;
3479 -ms-flex-align: center;
3480 align-items: center;
3481 text-align: center;
3482 -webkit-box-sizing: border-box;
3483 box-sizing: border-box;
3484 }
3485 .merchant-sortable ul.ui-sortable li .dashicons:before {
3486 font-size: 16px;
3487 line-height: 1em;
3488 }
3489 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-menu {
3490 float: left;
3491 padding: 0;
3492 margin: 0 10px 0 0;
3493 border: none;
3494 border-right: 1px solid #ddd;
3495 }
3496 .merchant-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
3497 float: right;
3498 color: #3858E9;
3499 padding: 0;
3500 margin: 0 0 0 10px;
3501 border: none;
3502 border-left: 1px solid #ddd;
3503 }
3504 .merchant-sortable ul.ui-sortable li .dashicons.visibility {
3505 cursor: pointer;
3506 }
3507 .merchant-sortable ul.ui-sortable li.invisible {
3508 color: #6E7780;
3509 border: 1px solid #CAD2F6;
3510 background-color: #EBEEFB;
3511 }
3512 .merchant-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
3513 content: "\f530";
3514 }
3515
3516 /* Sortable Repeater Field */
3517 .merchant-group-field {
3518 padding: 30px 20px;
3519 border: 2px solid #F0F0F1;
3520 border-radius: 4px;
3521 margin-bottom: 20px;
3522 }
3523 .merchant-group-field .title-area {
3524 position: relative;
3525 }
3526 .merchant-group-field .title-area .merchant-module-page-setting-field-title {
3527 margin-bottom: 10px;
3528 }
3529 .merchant-group-field .title-area .field-status:not(.hidden) {
3530 border-radius: 15px;
3531 padding: 3px 8px;
3532 font-size: 12px;
3533 margin-left: 20px;
3534 }
3535 .merchant-group-field .title-area .field-status:not(.hidden).active {
3536 color: #04543F;
3537 background-color: #DEF7EC;
3538 }
3539 .merchant-group-field .title-area .field-status:not(.hidden).inactive {
3540 color: #723B14;
3541 background-color: #FDF6B2;
3542 }
3543 .merchant-group-field .title-area.accordion-style {
3544 padding-right: 40px;
3545 }
3546 .merchant-group-field .title-area.accordion-style .accordion-icon {
3547 position: absolute;
3548 top: 0;
3549 right: -7px;
3550 width: 40px;
3551 height: 40px;
3552 line-height: 40px;
3553 cursor: pointer;
3554 font-size: 17px;
3555 -webkit-transition: 300ms;
3556 transition: 300ms;
3557 }
3558 .merchant-group-field .title-area.accordion-style.ui-accordion-header-active .accordion-icon {
3559 -webkit-transform: rotate(180deg);
3560 transform: rotate(180deg);
3561 }
3562 .merchant-group-field .merchant-group-fields-container {
3563 padding-top: 20px;
3564 }
3565 .merchant-group-field .merchant-module-page-setting-field:last-child {
3566 margin-bottom: 0 !important;
3567 }
3568
3569 /* Sortable Repeater — Shared Base */
3570 .merchant-sortable-repeater-icons-control, .merchant-sortable-repeater-control {
3571 max-width: 100%;
3572 }
3573 .merchant-sortable-repeater-icons-control .sortable, .merchant-sortable-repeater-control .sortable {
3574 list-style-type: none;
3575 margin: 0;
3576 padding: 0;
3577 }
3578 .merchant-sortable-repeater-icons-control .sortable input[type=text], .merchant-sortable-repeater-control .sortable input[type=text] {
3579 width: 100%;
3580 margin: 0;
3581 border: 1px solid #D6D6D6;
3582 padding: 12px 8px;
3583 line-height: 1.3em;
3584 }
3585 .merchant-sortable-repeater-icons-control .sortable input[type=text]:focus, .merchant-sortable-repeater-control .sortable input[type=text]:focus {
3586 border-color: #3858E9;
3587 outline: none;
3588 -webkit-box-shadow: none;
3589 box-shadow: none;
3590 }
3591 .merchant-sortable-repeater-icons-control .sortable div.repeater, .merchant-sortable-repeater-control .sortable div.repeater {
3592 cursor: -webkit-grab;
3593 cursor: grab;
3594 margin-bottom: 7px;
3595 }
3596 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete,
3597 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete,
3598 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete {
3599 display: -webkit-box;
3600 display: -ms-flexbox;
3601 display: flex;
3602 -webkit-box-align: center;
3603 -ms-flex-align: center;
3604 align-items: center;
3605 -webkit-box-pack: center;
3606 -ms-flex-pack: center;
3607 justify-content: center;
3608 margin: 0;
3609 width: 44px;
3610 height: auto;
3611 font-size: 1.3em;
3612 line-height: 34px;
3613 color: #d4d4d4;
3614 background: #fff;
3615 padding: 0;
3616 vertical-align: top;
3617 margin-left: -1px;
3618 border: 1px solid #D6D6D6;
3619 text-decoration: none;
3620 }
3621 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete .dashicons-no-alt, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete .dashicons-no-alt,
3622 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete .dashicons-no-alt,
3623 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete .dashicons-no-alt {
3624 width: 100%;
3625 text-decoration: none;
3626 margin: 0;
3627 font-weight: 600;
3628 color: #50575e;
3629 font-size: 1.1em;
3630 line-height: 34px;
3631 height: auto;
3632 }
3633 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover, .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete:focus, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus,
3634 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:hover,
3635 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:hover,
3636 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:focus,
3637 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:focus {
3638 outline: none;
3639 -webkit-box-shadow: none;
3640 box-shadow: none;
3641 }
3642 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete:hover .dashicons-no-alt, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:hover .dashicons-no-alt, .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-delete:focus .dashicons-no-alt, .merchant-sortable-repeater-control .customize-control-sortable-repeater-delete:focus .dashicons-no-alt,
3643 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:hover .dashicons-no-alt,
3644 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:hover .dashicons-no-alt,
3645 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-delete:focus .dashicons-no-alt,
3646 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-delete:focus .dashicons-no-alt {
3647 color: #a7a7a7;
3648 }
3649 .merchant-sortable-repeater-icons-control .repeater, .merchant-sortable-repeater-control .repeater {
3650 display: -webkit-box;
3651 display: -ms-flexbox;
3652 display: flex;
3653 }
3654 .merchant-sortable-repeater-icons-control .repeater .dashicons-menu, .merchant-sortable-repeater-control .repeater .dashicons-menu {
3655 display: -webkit-box;
3656 display: -ms-flexbox;
3657 display: flex;
3658 -webkit-box-align: center;
3659 -ms-flex-align: center;
3660 align-items: center;
3661 -webkit-box-pack: center;
3662 -ms-flex-pack: center;
3663 justify-content: center;
3664 margin: 0;
3665 width: 44px;
3666 height: auto;
3667 font-size: 1.3em;
3668 line-height: 34px;
3669 background: #fff;
3670 padding: 0;
3671 vertical-align: top;
3672 margin-left: -1px;
3673 border: 1px solid #D6D6D6;
3674 }
3675 .merchant-sortable-repeater-icons-control .repeater .dashicons-menu:hover, .merchant-sortable-repeater-control .repeater .dashicons-menu:hover {
3676 color: #a7a7a7;
3677 }
3678 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-add, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add,
3679 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-add,
3680 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-add {
3681 color: #3858E9;
3682 border-color: #3858E9;
3683 background-color: transparent;
3684 margin-top: 10px;
3685 padding: 4px 19px;
3686 }
3687 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:hover, .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-add:focus, .merchant-sortable-repeater-control .customize-control-sortable-repeater-add:focus,
3688 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-add:hover,
3689 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-add:hover,
3690 .merchant-sortable-repeater-icons-control .customize-control-sortable-repeater-icons-add:focus,
3691 .merchant-sortable-repeater-control .customize-control-sortable-repeater-icons-add:focus {
3692 outline: none;
3693 -webkit-box-shadow: none;
3694 box-shadow: none;
3695 background-color: #ffffff;
3696 }
3697 .disable-sorting.merchant-sortable-repeater-icons-control .dashicons-menu, .disable-sorting.merchant-sortable-repeater-control .dashicons-menu {
3698 display: none;
3699 }
3700
3701 /* Sortable Repeater Field */
3702 .merchant-sortable-repeater-control .sortable input[type=text] {
3703 border-radius: 4px 0 0 4px;
3704 }
3705
3706 /* Sortable Repeater Icons Field */
3707 .merchant-sortable-repeater-icons-control .sortable input[type=text] {
3708 border-radius: 0;
3709 }
3710 .merchant-sortable-repeater-icons-control .repeater {
3711 position: relative;
3712 }
3713 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle {
3714 display: -webkit-box;
3715 display: -ms-flexbox;
3716 display: flex;
3717 -webkit-box-align: center;
3718 -ms-flex-align: center;
3719 align-items: center;
3720 -webkit-box-pack: center;
3721 -ms-flex-pack: center;
3722 justify-content: center;
3723 width: 44px;
3724 min-width: 44px;
3725 height: auto;
3726 padding: 0;
3727 margin: 0;
3728 border: 1px dashed #c4c4c4;
3729 border-radius: 0;
3730 background: #f9f9f9;
3731 cursor: pointer;
3732 -webkit-transition: border-color 0.2s ease, background-color 0.2s ease, border-style 0.2s ease;
3733 transition: border-color 0.2s ease, background-color 0.2s ease, border-style 0.2s ease;
3734 }
3735 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle:hover {
3736 border-color: #3858E9;
3737 border-style: solid;
3738 background-color: #f0f3ff;
3739 }
3740 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle.has-icon {
3741 border-color: #3858E9;
3742 border-style: solid;
3743 background-color: #EBEEFB;
3744 margin-right: 5px;
3745 }
3746 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle.has-icon svg {
3747 stroke: #3858E9;
3748 }
3749 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle .dashicons {
3750 font-size: 18px;
3751 width: 18px;
3752 height: 18px;
3753 color: #b0b0b0;
3754 -webkit-transition: color 0.2s ease;
3755 transition: color 0.2s ease;
3756 }
3757 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle:hover .dashicons {
3758 color: #3858E9;
3759 }
3760 .merchant-sortable-repeater-icons-control .merchant-icon-picker-toggle svg {
3761 width: 18px;
3762 height: 18px;
3763 }
3764 .merchant-sortable-repeater-icons-control .merchant-icon-picker-dropdown {
3765 position: absolute;
3766 top: 100%;
3767 left: 0;
3768 z-index: 100;
3769 display: grid;
3770 grid-template-columns: repeat(auto-fill, 36px);
3771 gap: 4px;
3772 padding: 10px;
3773 background: #fff;
3774 border: 1px solid #D6D6D6;
3775 border-radius: 6px;
3776 -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
3777 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
3778 min-width: 220px;
3779 max-width: 260px;
3780 margin-top: 4px;
3781 }
3782 .merchant-sortable-repeater-icons-control .merchant-icon-option {
3783 display: -webkit-box;
3784 display: -ms-flexbox;
3785 display: flex;
3786 -webkit-box-align: center;
3787 -ms-flex-align: center;
3788 align-items: center;
3789 -webkit-box-pack: center;
3790 -ms-flex-pack: center;
3791 justify-content: center;
3792 width: 36px;
3793 height: 36px;
3794 padding: 0;
3795 border: 1px solid transparent;
3796 border-radius: 4px;
3797 background: transparent;
3798 cursor: pointer;
3799 -webkit-transition: border-color 0.15s ease, background-color 0.15s ease;
3800 transition: border-color 0.15s ease, background-color 0.15s ease;
3801 }
3802 .merchant-sortable-repeater-icons-control .merchant-icon-option:hover {
3803 border-color: #c5cff6;
3804 background-color: #f0f3ff;
3805 }
3806 .merchant-sortable-repeater-icons-control .merchant-icon-option.selected {
3807 border-color: #3858E9;
3808 background-color: #EBEEFB;
3809 -webkit-box-shadow: inset 0 0 0 1px #3858E9;
3810 box-shadow: inset 0 0 0 1px #3858E9;
3811 }
3812 .merchant-sortable-repeater-icons-control .merchant-icon-option svg {
3813 width: 18px;
3814 height: 18px;
3815 }
3816 .merchant-sortable-repeater-icons-control .merchant-icon-option .dashicons {
3817 font-size: 16px;
3818 width: 16px;
3819 height: 16px;
3820 color: #777;
3821 }
3822
3823 /* Flexible Content Field */
3824 .merchant-flexible-content-control {
3825 max-width: 100%;
3826 }
3827 .merchant-flexible-content-control .layout {
3828 position: relative;
3829 }
3830 .merchant-flexible-content-control .sortable {
3831 position: relative;
3832 list-style-type: none;
3833 margin: 0;
3834 padding: 0;
3835 }
3836 .merchant-flexible-content-control .sortable input[type=text] {
3837 width: 100%;
3838 margin: 0;
3839 border-radius: 0;
3840 border: 1px solid #D6D6D6;
3841 padding: 8px;
3842 line-height: 1.3em;
3843 }
3844 .merchant-flexible-content-control .sortable input[type=text]:focus {
3845 border-color: #3858E9;
3846 outline: none;
3847 -webkit-box-shadow: none;
3848 box-shadow: none;
3849 }
3850 .merchant-flexible-content-control .customize-control-flexible-content-move {
3851 display: none;
3852 cursor: -webkit-grab;
3853 cursor: grab;
3854 position: absolute;
3855 top: 19px;
3856 left: -22px;
3857 z-index: 999;
3858 }
3859 .merchant-flexible-content-control .customize-control-flexible-content-delete,
3860 .merchant-flexible-content-control .customize-control-flexible-content-duplicate {
3861 text-decoration: none;
3862 }
3863 .merchant-flexible-content-control .customize-control-flexible-content-delete .dashicons-no-alt,
3864 .merchant-flexible-content-control .customize-control-flexible-content-duplicate .dashicons-no-alt {
3865 width: 100%;
3866 text-decoration: none;
3867 margin: 0;
3868 font-weight: 600;
3869 color: #50575e;
3870 font-size: 1.1em;
3871 line-height: 34px;
3872 height: auto;
3873 }
3874 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus,
3875 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover,
3876 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus {
3877 outline: none;
3878 -webkit-box-shadow: none;
3879 box-shadow: none;
3880 }
3881 .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,
3882 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover .dashicons-no-alt,
3883 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus .dashicons-no-alt {
3884 color: #a7a7a7;
3885 }
3886 .merchant-flexible-content-control .customize-control-flexible-content-delete:hover svg, .merchant-flexible-content-control .customize-control-flexible-content-delete:focus svg,
3887 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:hover svg,
3888 .merchant-flexible-content-control .customize-control-flexible-content-duplicate:focus svg {
3889 fill: #a7a7a7;
3890 }
3891 .merchant-flexible-content-control .customize-control-flexible-content-accordion {
3892 display: -webkit-box;
3893 display: -ms-flexbox;
3894 display: flex;
3895 -webkit-box-align: center;
3896 -ms-flex-align: center;
3897 align-items: center;
3898 -webkit-box-pack: end;
3899 -ms-flex-pack: end;
3900 justify-content: flex-end;
3901 margin: 0;
3902 width: 40px;
3903 height: auto;
3904 font-size: 1.5em;
3905 line-height: 34px;
3906 color: #50575e;
3907 background: #fff;
3908 padding: 0;
3909 vertical-align: top;
3910 cursor: pointer;
3911 }
3912 .merchant-flexible-content-control .customize-control-flexible-content-accordion svg {
3913 -webkit-transition: 300ms;
3914 transition: 300ms;
3915 -webkit-transform: rotate(180deg);
3916 transform: rotate(180deg);
3917 }
3918 .merchant-flexible-content-control .layout-header.ui-accordion-header-collapsed .customize-control-flexible-content-accordion svg {
3919 -webkit-transform: rotate(0deg);
3920 transform: rotate(0deg);
3921 }
3922 .merchant-flexible-content-control .merchant-flexible-content.empty {
3923 border: 2px dashed #dcdcde;
3924 min-height: 100px;
3925 margin-bottom: 10px;
3926 }
3927 .merchant-flexible-content-control.default-style .layout {
3928 background: white;
3929 border: 1px solid #c3c4c7;
3930 border-left: 3px solid #3858e9;
3931 }
3932 .merchant-flexible-content-control.default-style .layout .layout-header {
3933 padding: 15px 20px;
3934 }
3935 .merchant-flexible-content-control.default-style .layout .layout-body {
3936 padding: 15px 20px;
3937 }
3938 .merchant-flexible-content-control.default-style .layout .layout-body .layout-field:last-of-type .merchant-group-field {
3939 margin-bottom: 5px;
3940 }
3941 .merchant-flexible-content-control.table-style .layout .layout-header {
3942 padding-bottom: 8px;
3943 margin-bottom: 15px;
3944 }
3945 .merchant-flexible-content-control.table-style .layout .layout-body {
3946 -webkit-box-orient: horizontal;
3947 -webkit-box-direction: normal;
3948 -ms-flex-direction: row;
3949 flex-direction: row;
3950 }
3951 .merchant-flexible-content-control.table-style .layout .layout-body .merchant-module-page-setting-field-title {
3952 display: none;
3953 }
3954 .merchant-flexible-content-control.has-accordion .layout-header {
3955 cursor: pointer;
3956 -webkit-user-select: none;
3957 -moz-user-select: none;
3958 -ms-user-select: none;
3959 user-select: none;
3960 }
3961 .merchant-flexible-content-control .layouts {
3962 display: none;
3963 }
3964 .merchant-flexible-content-control .layout {
3965 margin-bottom: 20px;
3966 }
3967 .merchant-flexible-content-control .layout .layout__inner {
3968 width: calc(100% + 60px);
3969 margin-left: -30px;
3970 padding-inline: 30px;
3971 }
3972 .merchant-flexible-content-control .layout .layout__inner:hover .customize-control-flexible-content-move {
3973 display: block;
3974 }
3975 .merchant-flexible-content-control .layout .layout-header {
3976 display: -webkit-box;
3977 display: -ms-flexbox;
3978 display: flex;
3979 -webkit-box-align: center;
3980 -ms-flex-align: center;
3981 align-items: center;
3982 border-bottom: 1px solid #f3f3f3;
3983 }
3984 .merchant-flexible-content-control .layout .layout-count {
3985 border-radius: 50%;
3986 width: 24px;
3987 height: 23px;
3988 border: 1px solid #949494;
3989 text-align: center;
3990 display: -webkit-box;
3991 display: -ms-flexbox;
3992 display: flex;
3993 -webkit-box-pack: center;
3994 -ms-flex-pack: center;
3995 justify-content: center;
3996 -webkit-box-orient: vertical;
3997 -webkit-box-direction: normal;
3998 -ms-flex-direction: column;
3999 flex-direction: column;
4000 font-size: 12px;
4001 font-weight: bold;
4002 margin-right: 10px;
4003 }
4004 .merchant-flexible-content-control .layout .layout-title {
4005 font-size: 14px;
4006 font-weight: bold;
4007 -webkit-box-flex: 1;
4008 -ms-flex: 1;
4009 flex: 1;
4010 }
4011 .merchant-flexible-content-control .layout .layout-status {
4012 display: -webkit-inline-box;
4013 display: -ms-inline-flexbox;
4014 display: inline-flex;
4015 -webkit-box-align: center;
4016 -ms-flex-align: center;
4017 align-items: center;
4018 cursor: pointer;
4019 padding: 2px 10px;
4020 border-radius: 10px;
4021 font-size: 11px;
4022 font-weight: 600;
4023 line-height: 1.4;
4024 margin-left: 10px;
4025 margin-right: 10px;
4026 text-transform: capitalize;
4027 white-space: nowrap;
4028 background-color: #f0f0f1;
4029 color: #757575;
4030 }
4031 .merchant-flexible-content-control .layout .layout-status--active {
4032 background-color: #e6f4ea;
4033 color: #1e7e34;
4034 }
4035 .merchant-flexible-content-control .layout .layout-toggle {
4036 display: -webkit-box;
4037 display: -ms-flexbox;
4038 display: flex;
4039 margin: 0;
4040 padding: 0;
4041 -webkit-box-pack: end;
4042 -ms-flex-pack: end;
4043 justify-content: flex-end;
4044 }
4045 .merchant-flexible-content-control .layout .layout-toggle span:hover {
4046 opacity: 0.6;
4047 }
4048 .merchant-flexible-content-control .layout .layout-body {
4049 display: -webkit-box;
4050 display: -ms-flexbox;
4051 display: flex;
4052 -webkit-box-orient: vertical;
4053 -webkit-box-direction: normal;
4054 -ms-flex-direction: column;
4055 flex-direction: column;
4056 }
4057 .merchant-flexible-content-control .layout .layout-actions {
4058 position: absolute;
4059 top: 15px;
4060 right: 22px;
4061 }
4062 .merchant-flexible-content-control .layout .layout-actions-has_accordion {
4063 right: 43px;
4064 }
4065 .merchant-flexible-content-control .layout .layout-actions-no_accordion {
4066 top: 0;
4067 right: 0;
4068 }
4069 .merchant-flexible-content-control .layout .layout-actions a:hover {
4070 opacity: 0.6;
4071 }
4072 .merchant-flexible-content-control .layout .layout-actions__toggle:focus {
4073 outline: none;
4074 -webkit-box-shadow: none;
4075 box-shadow: none;
4076 }
4077 .merchant-flexible-content-control .layout .layout-actions__inner {
4078 position: absolute;
4079 right: -5px;
4080 top: 25px;
4081 z-index: 99;
4082 font-size: 13px;
4083 padding: 7px 15px;
4084 min-width: 200px;
4085 background: #fff;
4086 border: 1px solid #DDDDDD;
4087 border-radius: 5px;
4088 }
4089 .merchant-flexible-content-control .layout .layout-actions__inner a {
4090 width: 100%;
4091 display: -webkit-box;
4092 display: -ms-flexbox;
4093 display: flex;
4094 padding: 10px 0;
4095 -webkit-box-align: center;
4096 -ms-flex-align: center;
4097 align-items: center;
4098 gap: 8px;
4099 }
4100 .merchant-flexible-content-control .layout .layout-actions__inner svg {
4101 width: 24px;
4102 height: 20px;
4103 }
4104 .merchant-flexible-content-control .layout .layout-actions__inner span {
4105 color: #1E1E1E;
4106 }
4107 .merchant-flexible-content-control .layout .layout-field.flex-grow {
4108 -webkit-box-flex: 1;
4109 -ms-flex-positive: 1;
4110 flex-grow: 1;
4111 }
4112 .merchant-flexible-content-control .layout .dashicons-menu {
4113 display: -webkit-box;
4114 display: -ms-flexbox;
4115 display: flex;
4116 -webkit-box-align: center;
4117 -ms-flex-align: center;
4118 align-items: center;
4119 -webkit-box-pack: center;
4120 -ms-flex-pack: center;
4121 justify-content: center;
4122 margin: 0;
4123 width: 40px;
4124 height: auto;
4125 font-size: 1.3em;
4126 line-height: 34px;
4127 background: #fff;
4128 padding: 0;
4129 vertical-align: top;
4130 margin-left: -1px;
4131 }
4132 .merchant-flexible-content-control .layout .dashicons-menu:hover {
4133 color: #a7a7a7;
4134 }
4135 .merchant-flexible-content-control .customize-control-flexible-content-add-wrapper {
4136 position: relative;
4137 display: inline-block;
4138 }
4139 .merchant-flexible-content-control .customize-control-flexible-content-add-list {
4140 opacity: 0;
4141 visibility: hidden;
4142 position: absolute;
4143 background-color: #ffffff;
4144 border: 1px solid #c3c4c7;
4145 border-left: 3px solid #3858e9;
4146 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
4147 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
4148 width: 180px;
4149 bottom: 100%;
4150 display: -webkit-box;
4151 display: -ms-flexbox;
4152 display: flex;
4153 -webkit-box-orient: vertical;
4154 -webkit-box-direction: normal;
4155 -ms-flex-direction: column;
4156 flex-direction: column;
4157 left: 50%;
4158 -webkit-transform: translate(-50%, 10px);
4159 transform: translate(-50%, 10px);
4160 padding: 3px 3px 3px 5px;
4161 }
4162 .merchant-flexible-content-control .customize-control-flexible-content-add-list.active {
4163 z-index: 10;
4164 opacity: 1;
4165 visibility: visible;
4166 -webkit-transform: translate(-50%, -15px);
4167 transform: translate(-50%, -15px);
4168 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
4169 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
4170 }
4171 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before {
4172 right: calc(50% - 12px);
4173 bottom: -14px;
4174 border-width: 14px 14px 0 15px;
4175 border-color: #c3c4c7 transparent transparent transparent;
4176 }
4177 .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
4178 content: "";
4179 right: calc(50% - 10px);
4180 bottom: -12px;
4181 border-width: 12px 12px 0 13px;
4182 border-color: #ffffff transparent transparent transparent;
4183 }
4184 .merchant-flexible-content-control .customize-control-flexible-content-add-list:before, .merchant-flexible-content-control .customize-control-flexible-content-add-list:after {
4185 position: absolute;
4186 z-index: -1;
4187 content: "";
4188 border-style: solid;
4189 -webkit-transition-duration: 0.3s;
4190 transition-duration: 0.3s;
4191 transition-property: -webkit-transform;
4192 -webkit-transition-property: -webkit-transform;
4193 transition-property: transform;
4194 transition-property: transform, -webkit-transform;
4195 }
4196 .merchant-flexible-content-control .customize-control-flexible-content-add {
4197 display: block;
4198 -ms-flex-negative: 0;
4199 flex-shrink: 0;
4200 padding: 10px;
4201 text-decoration: none;
4202 }
4203 .merchant-flexible-content-control .customize-control-flexible-content-add:hover {
4204 background: #f0f0f1;
4205 }
4206 .merchant-flexible-content-control .customize-control-flexible-content-add-button {
4207 color: #3858E9;
4208 border-color: #3858E9;
4209 background-color: transparent;
4210 margin-bottom: 0;
4211 padding: 4px 19px;
4212 }
4213 .merchant-flexible-content-control .customize-control-flexible-content-add-button:hover, .merchant-flexible-content-control .customize-control-flexible-content-add-button:focus {
4214 outline: none;
4215 -webkit-box-shadow: none;
4216 box-shadow: none;
4217 background-color: #ffffff;
4218 }
4219 .merchant-flexible-content-control.disable-sorting .dashicons-menu {
4220 display: none;
4221 }
4222 .merchant-flexible-content-control .merchant-datetime-field input {
4223 padding: 12px !important;
4224 line-height: 1.3em;
4225 width: 100%;
4226 max-width: 100%;
4227 min-height: auto;
4228 border: 1px solid #d6d6d6;
4229 border-radius: 4px !important;
4230 }
4231 .merchant-flexible-content-control .merchant-datetime-field input:focus {
4232 outline: none;
4233 -webkit-box-shadow: none;
4234 box-shadow: none;
4235 border-color: #3858E9;
4236 }
4237
4238 .flexible-content-template {
4239 display: none;
4240 }
4241
4242 .merchant-module-page-setting-field-range .merchant-range {
4243 position: relative;
4244 width: 100%;
4245 width: 300px;
4246 display: -webkit-box;
4247 display: -ms-flexbox;
4248 display: flex;
4249 -webkit-box-align: center;
4250 -ms-flex-align: center;
4251 align-items: center;
4252 -webkit-box-pack: justify;
4253 -ms-flex-pack: justify;
4254 justify-content: space-between;
4255 }
4256 .merchant-module-page-setting-field-range input[type=range] {
4257 -webkit-appearance: none;
4258 -moz-appearance: none;
4259 appearance: none;
4260 width: calc(100% - 105px);
4261 height: 2px;
4262 border-radius: 5px;
4263 outline: none;
4264 padding: 0;
4265 margin: 0;
4266 background-color: #ddd;
4267 background-image: -webkit-gradient(linear, left top, right top, from(#3858E9), color-stop(0%, #3858E9), color-stop(0%, #ddd), to(#ddd));
4268 background-image: linear-gradient(to right, #3858E9 0%, #3858E9 0%, #ddd 0%, #ddd 100%);
4269 }
4270 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb {
4271 -webkit-appearance: none;
4272 appearance: none;
4273 width: 15px;
4274 height: 15px;
4275 border-radius: 50%;
4276 background: #3858E9;
4277 cursor: pointer;
4278 -webkit-transition: background 0.15s ease-in-out;
4279 transition: background 0.15s ease-in-out;
4280 }
4281 .merchant-module-page-setting-field-range input[type=range]::-webkit-slider-thumb:hover {
4282 background: #3858E9;
4283 }
4284 .merchant-module-page-setting-field-range input[type=range]:active::-webkit-slider-thumb {
4285 background: #3858E9;
4286 }
4287 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb {
4288 width: 15px;
4289 height: 15px;
4290 border: 0;
4291 border-radius: 50%;
4292 background: #3858E9;
4293 cursor: pointer;
4294 -moz-transition: background 0.15s ease-in-out;
4295 transition: background 0.15s ease-in-out;
4296 }
4297 .merchant-module-page-setting-field-range input[type=range]::-moz-range-thumb:hover {
4298 background: #3858E9;
4299 }
4300 .merchant-module-page-setting-field-range input[type=range]:active::-moz-range-thumb {
4301 background: #3858E9;
4302 }
4303 .merchant-module-page-setting-field-range input[type=range]:focus::-webkit-slider-thumb {
4304 -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
4305 box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3858E9;
4306 }
4307 .merchant-module-page-setting-field-range input[type=range]::-moz-range-track {
4308 border: 0;
4309 background: #d7dcdf;
4310 }
4311 .merchant-module-page-setting-field-range input[type=number] {
4312 padding: 12px 25px 12px 10px;
4313 line-height: 1.3em;
4314 width: 100%;
4315 max-width: 85px;
4316 min-height: auto;
4317 border: 1px solid #D6D6D6;
4318 }
4319 .merchant-module-page-setting-field-range input[type=number]:focus {
4320 outline: none;
4321 -webkit-box-shadow: none;
4322 box-shadow: none;
4323 border-color: #3858E9;
4324 }
4325 .merchant-module-page-setting-field-range .merchant-range-unit {
4326 color: #3858E9;
4327 position: absolute;
4328 z-index: 1;
4329 right: 10px;
4330 font-size: 11px;
4331 line-height: 1em;
4332 }
4333
4334 .merchant-module-page-setting-field-color input {
4335 padding: 0 10px;
4336 line-height: 1em;
4337 width: 100%;
4338 max-width: 254px;
4339 min-height: auto;
4340 border: 1px solid #D6D6D6;
4341 }
4342 .merchant-module-page-setting-field-color input:focus {
4343 outline: none;
4344 -webkit-box-shadow: none;
4345 box-shadow: none;
4346 border-color: #3858E9;
4347 }
4348 .merchant-module-page-setting-field-color .merchant-color {
4349 display: -webkit-box;
4350 display: -ms-flexbox;
4351 display: flex;
4352 grid-gap: 10px;
4353 }
4354 .merchant-module-page-setting-field-color .merchant-color-picker {
4355 cursor: pointer;
4356 width: 36px;
4357 height: 36px;
4358 border: 1px solid rgba(0, 0, 0, 0.1);
4359 border-radius: 4px;
4360 }
4361
4362 .merchant-module-page-settings-dimensions {
4363 display: -webkit-box;
4364 display: -ms-flexbox;
4365 display: flex;
4366 grid-gap: 10px;
4367 }
4368 .merchant-module-page-settings-dimensions > div {
4369 display: -webkit-box;
4370 display: -ms-flexbox;
4371 display: flex;
4372 -webkit-box-orient: vertical;
4373 -webkit-box-direction: normal;
4374 -ms-flex-direction: column;
4375 flex-direction: column;
4376 }
4377 .merchant-module-page-settings-dimensions label {
4378 color: gray;
4379 font-size: 12px;
4380 margin-top: 7px;
4381 }
4382 .merchant-module-page-settings-dimensions input {
4383 max-width: 70px;
4384 width: 100%;
4385 font-size: 12px;
4386 border: 1px solid #D6D6D6;
4387 }
4388
4389 .merchant-module-page-setting-field-wc_coupons .merchant-wc-coupon-selector select {
4390 width: 300px;
4391 min-height: auto;
4392 border: 1px solid #D6D6D6;
4393 padding: 12px;
4394 line-height: 1.3em;
4395 border-radius: 6px;
4396 color: #2F2F2F;
4397 border: 1px solid #D6D6D6;
4398 }
4399
4400 .merchant-module-page-settings-unit {
4401 margin-bottom: 10px;
4402 }
4403 .merchant-module-page-settings-unit select {
4404 font-size: 13px;
4405 border: 0;
4406 }
4407
4408 .merchant-module-page-settings-devices {
4409 display: -webkit-box;
4410 display: -ms-flexbox;
4411 display: flex;
4412 -webkit-column-gap: 10px;
4413 -moz-column-gap: 10px;
4414 column-gap: 10px;
4415 -webkit-box-pack: end;
4416 -ms-flex-pack: end;
4417 justify-content: flex-end;
4418 }
4419 .merchant-module-page-settings-devices button {
4420 border: 0;
4421 background: transparent;
4422 padding: 0;
4423 cursor: pointer;
4424 }
4425 .merchant-module-page-settings-devices button.active {
4426 color: #3858e9;
4427 }
4428 .merchant-module-page-settings-devices button:hover {
4429 color: #3858e9;
4430 }
4431 .merchant-module-page-settings-devices button i {
4432 font-size: 14px;
4433 line-height: 20px;
4434 width: auto;
4435 }
4436
4437 .merchant-module-page-settings-device-container:not(.active) {
4438 display: none;
4439 }
4440
4441 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-setting-field-inner {
4442 max-width: 320px;
4443 }
4444 .merchant-module-page-setting-field-responsive_dimensions .merchant-module-page-settings-devices {
4445 margin-bottom: -30px;
4446 margin-top: 0;
4447 }
4448
4449 .review-photos-popup {
4450 position: fixed;
4451 top: 0;
4452 left: 0;
4453 bottom: 0;
4454 right: 0;
4455 display: -webkit-box;
4456 display: -ms-flexbox;
4457 display: flex;
4458 -webkit-box-pack: center;
4459 -ms-flex-pack: center;
4460 justify-content: center;
4461 -webkit-box-align: center;
4462 -ms-flex-align: center;
4463 align-items: center;
4464 -ms-flex-wrap: wrap;
4465 flex-wrap: wrap;
4466 z-index: 9992;
4467 padding: 50px;
4468 gap: 40px;
4469 overflow: scroll;
4470 visibility: hidden;
4471 opacity: 0;
4472 -webkit-transition: 300ms;
4473 transition: 300ms;
4474 }
4475 .review-photos-popup.active {
4476 visibility: visible;
4477 opacity: 1;
4478 }
4479 .review-photos-popup .overlay {
4480 position: fixed;
4481 top: 0;
4482 left: 0;
4483 bottom: 0;
4484 right: 0;
4485 background-color: rgba(0, 0, 0, 0.8);
4486 }
4487 .review-photos-popup .review-photo {
4488 z-index: 9993;
4489 -webkit-box-flex: 0;
4490 -ms-flex: 0 0 30%;
4491 flex: 0 0 30%;
4492 }
4493 .review-photos-popup .review-photo img {
4494 max-width: 100%;
4495 max-height: 300px;
4496 height: auto;
4497 display: block;
4498 margin: 0 auto;
4499 border: 2px solid #fff;
4500 border-radius: 5px;
4501 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
4502 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
4503 }
4504 .review-photos-popup.images-count-1 .review-photo {
4505 -webkit-box-flex: 0;
4506 -ms-flex: 0 0 100%;
4507 flex: 0 0 100%;
4508 }
4509 .review-photos-popup.images-count-1 .review-photo img {
4510 max-height: 400px;
4511 }
4512 .review-photos-popup.images-count-2 .review-photo {
4513 -webkit-box-flex: 0;
4514 -ms-flex: 0 0 46%;
4515 flex: 0 0 46%;
4516 }
4517 .review-photos-popup.images-count-2 .review-photo img {
4518 max-height: 400px;
4519 }
4520 @media (max-width: 768px) {
4521 .review-photos-popup {
4522 padding-top: 100px;
4523 }
4524 .review-photos-popup .review-photo {
4525 -webkit-box-flex: 0;
4526 -ms-flex: 0 0 100%;
4527 flex: 0 0 100%;
4528 }
4529 .review-photos-popup .review-photo img {
4530 max-height: 400px;
4531 }
4532 }
4533
4534 .merchant-btn-control {
4535 color: #3858e9;
4536 border: 1px solid #3858e9;
4537 background-color: rgba(0, 0, 0, 0);
4538 padding: 4px 19px;
4539 border-radius: 4px;
4540 font-size: 13px;
4541 line-height: 2.1;
4542 cursor: pointer;
4543 }
4544
4545 .merchant-reviews-selector * {
4546 -webkit-box-sizing: border-box;
4547 box-sizing: border-box;
4548 }
4549 .merchant-reviews-selector .star-rating {
4550 overflow: hidden;
4551 position: relative;
4552 height: 1.618em;
4553 line-height: 1.618;
4554 width: 5.3em;
4555 font-family: star;
4556 font-weight: 400;
4557 margin-left: auto;
4558 margin-right: auto;
4559 letter-spacing: 0;
4560 color: #ffa441;
4561 }
4562 .merchant-reviews-selector .star-rating::before {
4563 content: "SSSSS";
4564 opacity: 0.25;
4565 float: left;
4566 top: 0;
4567 left: 0;
4568 position: absolute;
4569 }
4570 .merchant-reviews-selector .star-rating span {
4571 overflow: hidden;
4572 float: left;
4573 top: 0;
4574 left: 0;
4575 position: absolute;
4576 padding-top: 1.5em;
4577 }
4578 .merchant-reviews-selector .star-rating span::before {
4579 content: "SSSSS";
4580 top: 0;
4581 position: absolute;
4582 left: 0;
4583 color: #ffa441;
4584 }
4585 .merchant-reviews-selector .overlay {
4586 position: fixed;
4587 top: 0;
4588 left: 0;
4589 width: 100%;
4590 height: 100%;
4591 background-color: rgba(0, 0, 0, 0.5);
4592 z-index: 9990;
4593 visibility: hidden;
4594 opacity: 0;
4595 -webkit-transition: 300ms;
4596 transition: 300ms;
4597 }
4598 .merchant-reviews-selector .overlay.active {
4599 visibility: visible;
4600 opacity: 1;
4601 }
4602 .merchant-reviews-selector .tooltip {
4603 position: absolute;
4604 min-width: 180px;
4605 right: calc(100% + 10px);
4606 background-color: #333;
4607 color: #fff;
4608 padding: 5px 10px;
4609 border-radius: 5px;
4610 font-size: 12px;
4611 visibility: hidden;
4612 opacity: 0;
4613 -webkit-transition: 300ms;
4614 transition: 300ms;
4615 top: 50%;
4616 -webkit-transform: translateY(-50%);
4617 transform: translateY(-50%);
4618 }
4619 .merchant-reviews-selector .tooltip:before {
4620 content: "";
4621 position: absolute;
4622 top: 50%;
4623 right: -7px;
4624 -webkit-transform: translateY(-50%);
4625 transform: translateY(-50%);
4626 width: 0;
4627 height: 0;
4628 border-top: 5px solid transparent;
4629 border-bottom: 5px solid transparent;
4630 border-left: 7px solid #333;
4631 }
4632 .merchant-reviews-selector .product-reviews {
4633 -ms-flex-preferred-size: 100%;
4634 flex-basis: 100%;
4635 }
4636 .merchant-reviews-selector .product-reviews .product-review {
4637 display: -webkit-box;
4638 display: -ms-flexbox;
4639 display: flex;
4640 gap: 15px;
4641 -webkit-box-align: center;
4642 -ms-flex-align: center;
4643 align-items: center;
4644 padding: 8px 15px;
4645 border-bottom: 2px solid #ffffff;
4646 -webkit-box-pack: start;
4647 -ms-flex-pack: start;
4648 justify-content: flex-start;
4649 -ms-flex-wrap: nowrap;
4650 flex-wrap: nowrap;
4651 -webkit-box-orient: horizontal;
4652 -webkit-box-direction: normal;
4653 -ms-flex-direction: row;
4654 flex-direction: row;
4655 border-top: none;
4656 background-color: #f4f4f4;
4657 min-height: 60px;
4658 }
4659 .merchant-reviews-selector .product-reviews .product-review:last-of-type {
4660 border-bottom: none;
4661 }
4662 .merchant-reviews-selector .product-reviews .product-review .product-review-add-checkbox {
4663 -webkit-box-flex: 0;
4664 -ms-flex: 0 0 20px;
4665 flex: 0 0 20px;
4666 }
4667 .merchant-reviews-selector .product-reviews .product-review .product-review-product-image {
4668 display: none;
4669 }
4670 .merchant-reviews-selector .product-reviews .product-review .product-review-product-image a {
4671 display: block;
4672 text-decoration: none;
4673 }
4674 .merchant-reviews-selector .product-reviews .product-review .product-review-product-image a img {
4675 border-radius: 5px;
4676 width: 50px;
4677 height: auto;
4678 }
4679 .merchant-reviews-selector .product-reviews .product-review .product-review-product-name {
4680 display: none;
4681 }
4682 .merchant-reviews-selector .product-reviews .product-review .product-review-product-name a {
4683 text-decoration: none;
4684 }
4685 .merchant-reviews-selector .product-reviews .product-review .product-review-rating {
4686 -webkit-box-flex: 0;
4687 -ms-flex: 0 0 70px;
4688 flex: 0 0 70px;
4689 width: 70px;
4690 }
4691 .merchant-reviews-selector .product-reviews .product-review .product-review-status {
4692 -webkit-box-flex: 0;
4693 -ms-flex: 0 0 90px;
4694 flex: 0 0 90px;
4695 width: 90px;
4696 }
4697 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status {
4698 text-transform: capitalize;
4699 border-radius: 4px;
4700 background-color: #eee;
4701 padding: 3px 8px;
4702 display: inline-block;
4703 }
4704 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-approved {
4705 background-color: #c3e6cb; /* Softer light green */
4706 color: #155724; /* Darker green */
4707 }
4708 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-pending {
4709 background-color: #fff3cd; /* Light yellow */
4710 color: #856404; /* Dark yellow/brown */
4711 }
4712 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-unapproved {
4713 background-color: #f5c6cb; /* Light coral/pink */
4714 color: #721c24; /* Darker red */
4715 }
4716 .merchant-reviews-selector .product-reviews .product-review .product-review-status .status.status-spam {
4717 background-color: #f8d7da; /* Light red */
4718 color: #721c24; /* Dark red */
4719 }
4720 .merchant-reviews-selector .product-reviews .product-review .product-review-author {
4721 -webkit-box-flex: 0;
4722 -ms-flex: 0 0 90px;
4723 flex: 0 0 90px;
4724 width: 90px;
4725 }
4726 .merchant-reviews-selector .product-reviews .product-review .product-review-content {
4727 -webkit-box-flex: 0;
4728 -ms-flex: 0 0 40%;
4729 flex: 0 0 40%;
4730 }
4731 .merchant-reviews-selector .product-reviews .product-review .product-review-photos {
4732 -webkit-box-flex: 0;
4733 -ms-flex: 0 0 40px;
4734 flex: 0 0 40px;
4735 width: 40px;
4736 position: relative;
4737 }
4738 .merchant-reviews-selector .product-reviews .product-review .product-review-photos:hover .tooltip {
4739 visibility: visible;
4740 opacity: 1;
4741 }
4742 .merchant-reviews-selector .product-reviews .product-review .product-review-photos img {
4743 border-radius: 5px;
4744 width: 40px;
4745 height: auto;
4746 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
4747 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
4748 border: 2px solid #fff;
4749 display: block;
4750 }
4751 .merchant-reviews-selector .product-reviews .product-review .product-review-photos img.loading {
4752 -webkit-animation: loading 1500ms infinite;
4753 animation: loading 1500ms infinite;
4754 }
4755 .merchant-reviews-selector .product-reviews .product-review .product-review-photos .review-photo {
4756 position: relative;
4757 cursor: pointer;
4758 }
4759 .merchant-reviews-selector .product-reviews .product-review .product-review-photos .review-photo .count {
4760 -webkit-user-select: none;
4761 -moz-user-select: none;
4762 -ms-user-select: none;
4763 user-select: none;
4764 position: absolute;
4765 top: -8px;
4766 right: -8px;
4767 background-color: #000;
4768 color: #fff;
4769 padding: 0px 5px;
4770 border-radius: 50%;
4771 width: 18px;
4772 height: 18px;
4773 text-align: center;
4774 font-size: 11px;
4775 }
4776 .merchant-reviews-selector .product-reviews .product-review .product-review-date {
4777 -webkit-box-flex: 0;
4778 -ms-flex: 0 0 70px;
4779 flex: 0 0 70px;
4780 width: 70px;
4781 }
4782 .merchant-reviews-selector .product-reviews .product-review .product-review-edit a {
4783 text-decoration: none;
4784 color: #3858E9;
4785 }
4786 .merchant-reviews-selector .product-reviews .product-review .product-review-move,
4787 .merchant-reviews-selector .product-reviews .product-review .product-review-delete {
4788 display: none;
4789 }
4790 .merchant-reviews-selector .product-reviews .product-reviews-load-more {
4791 text-align: center;
4792 padding: 10px;
4793 }
4794 .merchant-reviews-selector .product-reviews .product-reviews-load-more button {
4795 display: inline-block;
4796 padding: 10px 20px;
4797 border-radius: 5px;
4798 text-decoration: none;
4799 outline: none;
4800 background: none;
4801 border: none;
4802 cursor: pointer;
4803 }
4804 .merchant-reviews-selector .product-reviews .product-reviews-load-more.loading {
4805 -webkit-animation: loading 1500ms infinite;
4806 animation: loading 1500ms infinite;
4807 }
4808 .merchant-reviews-selector .selected-reviews {
4809 padding: 0 0 15px;
4810 }
4811 .merchant-reviews-selector .selected-reviews .product-reviews {
4812 border: 1px solid #c9c7c7;
4813 border-radius: 4px;
4814 position: relative;
4815 }
4816 .merchant-reviews-selector .selected-reviews .product-reviews:empty {
4817 display: none;
4818 }
4819 .merchant-reviews-selector .selected-reviews .product-reviews .placeholder {
4820 background-color: #f0f0f0;
4821 border: 1px dashed #ccc;
4822 visibility: visible;
4823 width: 100%;
4824 }
4825 .merchant-reviews-selector .selected-reviews .product-reviews .product-review {
4826 background-color: #fff;
4827 border-bottom: 1px dotted #c9c7c7;
4828 position: relative;
4829 padding: 12px 20px;
4830 }
4831 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:first-of-type {
4832 border-top-left-radius: 4px;
4833 border-top-right-radius: 4px;
4834 }
4835 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:last-of-type {
4836 border-bottom: none;
4837 border-bottom-left-radius: 4px;
4838 border-bottom-right-radius: 4px;
4839 }
4840 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move,
4841 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete {
4842 display: block;
4843 position: absolute;
4844 background: none;
4845 border: none;
4846 cursor: pointer;
4847 color: #3858E9;
4848 width: 25px;
4849 height: 25px;
4850 padding: 0;
4851 margin: 0;
4852 top: 50%;
4853 -webkit-transform: translateY(-50%);
4854 transform: translateY(-50%);
4855 border-radius: 50%;
4856 padding-top: 2px;
4857 visibility: hidden;
4858 opacity: 0;
4859 -webkit-transition: 300ms;
4860 transition: 300ms;
4861 background-color: #d5d5d5;
4862 }
4863 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move svg,
4864 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete svg {
4865 width: 18px;
4866 height: 18px;
4867 }
4868 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:hover .product-review-move,
4869 .merchant-reviews-selector .selected-reviews .product-reviews .product-review:hover .product-review-delete {
4870 visibility: visible;
4871 opacity: 1;
4872 }
4873 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete {
4874 right: -14px;
4875 }
4876 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-delete:hover {
4877 background-color: #ff7575;
4878 }
4879 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move {
4880 cursor: move;
4881 left: -14px;
4882 }
4883 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-move:hover {
4884 background-color: #6f89ff;
4885 }
4886 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-content {
4887 -webkit-box-flex: 0;
4888 -ms-flex: none;
4889 flex: none;
4890 width: 140px;
4891 }
4892 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .spacer {
4893 margin-right: auto;
4894 }
4895 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-edit,
4896 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-photos,
4897 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-date,
4898 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-status,
4899 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-add-checkbox {
4900 display: none;
4901 }
4902 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-name,
4903 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-image {
4904 display: block;
4905 }
4906 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-image a img {
4907 width: 30px;
4908 }
4909 .merchant-reviews-selector .selected-reviews .product-reviews .product-review .product-review-product-name {
4910 width: 120px;
4911 }
4912 @-webkit-keyframes loading {
4913 0% {
4914 opacity: 1;
4915 }
4916 50% {
4917 opacity: 0.2;
4918 }
4919 100% {
4920 opacity: 1;
4921 }
4922 }
4923 @keyframes loading {
4924 0% {
4925 opacity: 1;
4926 }
4927 50% {
4928 opacity: 0.2;
4929 }
4930 100% {
4931 opacity: 1;
4932 }
4933 }
4934 .merchant-reviews-selector .selector-popup {
4935 position: fixed;
4936 background-color: #fff;
4937 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
4938 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
4939 border-radius: 5px;
4940 top: 50%;
4941 left: 50%;
4942 -webkit-transform: translate(-50%, -50%);
4943 transform: translate(-50%, -50%);
4944 width: 1000px;
4945 max-width: 100%;
4946 z-index: 9991;
4947 visibility: hidden;
4948 opacity: 0;
4949 -webkit-transition: 300ms;
4950 transition: 300ms;
4951 }
4952 .merchant-reviews-selector .selector-popup.active {
4953 visibility: visible;
4954 opacity: 1;
4955 }
4956 .merchant-reviews-selector .selector-popup .popup-content .popup-header {
4957 position: relative;
4958 border-bottom: 1px solid #eee;
4959 padding: 14px 50px 14px 24px;
4960 background-color: #f3f3f3;
4961 border-top-left-radius: 5px;
4962 border-top-right-radius: 5px;
4963 }
4964 .merchant-reviews-selector .selector-popup .popup-content .popup-header label {
4965 display: -webkit-box;
4966 display: -ms-flexbox;
4967 display: flex;
4968 -webkit-box-align: center;
4969 -ms-flex-align: center;
4970 align-items: center;
4971 }
4972 .merchant-reviews-selector .selector-popup .popup-content .popup-header label span {
4973 font-size: 16px;
4974 font-weight: 500;
4975 min-width: 120px;
4976 }
4977 .merchant-reviews-selector .selector-popup .popup-content .popup-header label input {
4978 margin-left: 10px;
4979 padding: 5px 10px;
4980 width: 100%;
4981 border: 1px solid #d6d6d6;
4982 outline: none;
4983 }
4984 .merchant-reviews-selector .selector-popup .popup-content .popup-header .close {
4985 position: absolute;
4986 top: 50%;
4987 right: 10px;
4988 cursor: pointer;
4989 display: block;
4990 padding: 10px;
4991 font-size: 23px;
4992 -webkit-transform: translateY(-50%);
4993 transform: translateY(-50%);
4994 }
4995 @-webkit-keyframes loadingAnimation {
4996 from {
4997 background-position: 200% 0;
4998 }
4999 to {
5000 background-position: -200% 0;
5001 }
5002 }
5003 @keyframes loadingAnimation {
5004 from {
5005 background-position: 200% 0;
5006 }
5007 to {
5008 background-position: -200% 0;
5009 }
5010 }
5011 .merchant-reviews-selector .selector-popup .popup-content .popup-header.loading::after {
5012 content: "";
5013 position: absolute;
5014 bottom: -2px;
5015 left: 0;
5016 width: 100%;
5017 height: 3px;
5018 background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, #3858e9), to(transparent));
5019 background: linear-gradient(to right, transparent 0%, #3858e9 50%, transparent 100%);
5020 background-size: 200% 100%;
5021 -webkit-animation: loadingAnimation 1.5s infinite linear;
5022 animation: loadingAnimation 1.5s infinite linear;
5023 }
5024 .merchant-reviews-selector .selector-popup .popup-content .popup-header.popup-error::after {
5025 content: "";
5026 position: absolute;
5027 bottom: -2px;
5028 left: 0;
5029 width: 100%;
5030 height: 3px;
5031 background-color: #d93232;
5032 -webkit-animation: loading 1.5s infinite linear;
5033 animation: loading 1.5s infinite linear;
5034 }
5035 .merchant-reviews-selector .selector-popup .popup-content .popup-body {
5036 height: 700px;
5037 overflow-y: auto;
5038 }
5039 .merchant-reviews-selector .selector-popup .popup-content .popup-body .products-search-results {
5040 padding: 24px;
5041 }
5042 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item {
5043 border-top: 1px solid #eee;
5044 border-left: 1px solid #eee;
5045 border-right: 1px solid #eee;
5046 -webkit-transition: 300ms;
5047 transition: 300ms;
5048 }
5049 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header {
5050 cursor: pointer;
5051 display: -webkit-box;
5052 display: -ms-flexbox;
5053 display: flex;
5054 gap: 25px;
5055 -ms-flex-wrap: wrap;
5056 flex-wrap: wrap;
5057 position: relative;
5058 width: 100%;
5059 padding: 10px 80px 10px 10px;
5060 -webkit-box-align: center;
5061 -ms-flex-align: center;
5062 align-items: center;
5063 }
5064 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header .product-expander {
5065 content: "";
5066 padding: 15px;
5067 display: block;
5068 position: absolute;
5069 right: 10px;
5070 top: 50%;
5071 -webkit-transform: translateY(-50%);
5072 transform: translateY(-50%);
5073 -webkit-transition: 300ms;
5074 transition: 300ms;
5075 }
5076 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header .product-expander svg {
5077 width: 20px;
5078 height: 20px;
5079 }
5080 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .header.ui-state-active .product-expander {
5081 -webkit-transform: translateY(-50%) rotate(180deg);
5082 transform: translateY(-50%) rotate(180deg);
5083 }
5084 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:first-of-type {
5085 border-top-left-radius: 5px;
5086 border-top-right-radius: 5px;
5087 }
5088 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:last-of-type {
5089 border-bottom-left-radius: 5px;
5090 border-bottom-right-radius: 5px;
5091 border-bottom: 1px solid #eee;
5092 }
5093 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-image a {
5094 display: block;
5095 text-decoration: none;
5096 line-height: 0;
5097 }
5098 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-image img {
5099 border-radius: 5px;
5100 width: 50px;
5101 max-width: 100%;
5102 height: auto;
5103 }
5104 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-title {
5105 font-size: 14px;
5106 font-weight: 500;
5107 }
5108 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-title a {
5109 text-decoration: none;
5110 }
5111 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .spacer {
5112 margin-left: auto;
5113 }
5114 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status {
5115 text-transform: capitalize;
5116 border-radius: 4px;
5117 background-color: #eee;
5118 padding: 3px 8px;
5119 }
5120 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status.product-status-publish {
5121 background-color: #c3e6cb; /* Softer light green */
5122 color: #155724; /* Darker green */
5123 }
5124 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status.product-status-draft {
5125 background-color: #d1ecf1; /* Light blue */
5126 color: #0c5460; /* Dark teal */
5127 }
5128 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-status.product-status-pending {
5129 background-color: #fff3cd; /* Light yellow */
5130 color: #856404; /* Dark yellow/brown */
5131 }
5132 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count {
5133 color: #fff;
5134 display: -webkit-box;
5135 display: -ms-flexbox;
5136 display: flex;
5137 -webkit-box-align: center;
5138 -ms-flex-align: center;
5139 align-items: center;
5140 background-color: #79b0f8;
5141 border-radius: 3px;
5142 padding: 3px 6px;
5143 gap: 5px;
5144 position: relative;
5145 opacity: 0.5;
5146 -webkit-transition: 300ms;
5147 transition: 300ms;
5148 }
5149 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count:before {
5150 content: "";
5151 display: block;
5152 background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='800px' height='800px' viewBox='0 0 305.002 305.002' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M152.502,0.001C68.412,0.001,0,68.412,0,152.501s68.412,152.5,152.502,152.5c84.089,0,152.5-68.411,152.5-152.5 S236.591,0.001,152.502,0.001z M152.502,280.001C82.197,280.001,25,222.806,25,152.501c0-70.304,57.197-127.5,127.502-127.5 c70.304,0,127.5,57.196,127.5,127.5C280.002,222.806,222.806,280.001,152.502,280.001z'%3E%3C/path%3E%3Cpath d='M218.473,93.97l-90.546,90.547l-41.398-41.398c-4.882-4.881-12.796-4.881-17.678,0c-4.881,4.882-4.881,12.796,0,17.678 l50.237,50.237c2.441,2.44,5.64,3.661,8.839,3.661c3.199,0,6.398-1.221,8.839-3.661l99.385-99.385 c4.881-4.882,4.881-12.796,0-17.678C231.269,89.089,223.354,89.089,218.473,93.97z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
5153 background-size: contain; /* Adjust as necessary */
5154 background-repeat: no-repeat; /* Adjust as necessary */
5155 width: 15px; /* Set width */
5156 height: 15px; /* Set height */
5157 }
5158 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count:hover {
5159 opacity: 1;
5160 }
5161 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .selected-reviews-count:hover .tooltip {
5162 visibility: visible;
5163 opacity: 1;
5164 }
5165 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item .product-reviews-count {
5166 color: #8e8e8e;
5167 }
5168 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:hover {
5169 background-color: #f4f4f4;
5170 }
5171 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:not(.product-item-has-reviews) {
5172 cursor: auto;
5173 }
5174 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:not(.product-item-has-reviews) .product-expander {
5175 opacity: 0.2;
5176 }
5177 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item:not(.product-item-has-reviews):hover {
5178 background-color: transparent;
5179 }
5180 .merchant-reviews-selector .selector-popup .popup-content .popup-body .product-item.opened:hover {
5181 background-color: transparent;
5182 }
5183 .merchant-module-page-setting-field-warning {
5184 padding: 8px 10px;
5185 font-size: 14px;
5186 line-height: 1.6;
5187 color: #1D2327;
5188 border-radius: 4px;
5189 border: 1px solid #D72C0D;
5190 background-color: #FFF4F4;
5191 }
5192
5193 .merchant-module-page-setting-field-info {
5194 padding: 8px 10px;
5195 font-size: 14px;
5196 line-height: 1.6;
5197 color: #1D2327;
5198 border-radius: 4px;
5199 border: 1px solid #0d65d7;
5200 background-color: #e6effa;
5201 }
5202 .merchant-module-page-setting-field-info[data-id=shortcode_info] {
5203 margin-bottom: 0;
5204 }
5205
5206 .merchant-module-page-setting-field-divider {
5207 border-bottom: 1px solid #F0F0F1;
5208 }
5209 .merchant-module-page-setting-field-divider .merchant-module-page-setting-field-title {
5210 font-size: 16px;
5211 }
5212
5213 .merchant-module-page-setting-field-gallery .merchant-gallery-images {
5214 display: -webkit-box;
5215 display: -ms-flexbox;
5216 display: flex;
5217 grid-gap: 5px;
5218 -ms-flex-wrap: wrap;
5219 flex-wrap: wrap;
5220 margin-bottom: 15px;
5221 }
5222 .merchant-module-page-setting-field-gallery .merchant-gallery-images:empty {
5223 display: none;
5224 }
5225 .merchant-module-page-setting-field-gallery .merchant-gallery-image {
5226 position: relative;
5227 display: -webkit-box;
5228 display: -ms-flexbox;
5229 display: flex;
5230 -webkit-box-align: center;
5231 -ms-flex-align: center;
5232 align-items: center;
5233 -webkit-box-pack: center;
5234 -ms-flex-pack: center;
5235 justify-content: center;
5236 border-radius: 4px;
5237 padding: 2px;
5238 border: 1px solid #eee;
5239 background-color: #fff;
5240 }
5241 .merchant-module-page-setting-field-gallery .merchant-gallery-image img {
5242 cursor: -webkit-grab;
5243 cursor: grab;
5244 width: 100%;
5245 height: 100%;
5246 max-height: 75px;
5247 -o-object-fit: cover;
5248 object-fit: cover;
5249 }
5250 .merchant-module-page-setting-field-gallery .merchant-gallery-image.ui-sortable-helper img {
5251 cursor: -webkit-grabbing;
5252 cursor: grabbing;
5253 }
5254 .merchant-module-page-setting-field-gallery .merchant-gallery-image i {
5255 cursor: pointer;
5256 position: absolute;
5257 z-index: 1;
5258 top: 5px;
5259 right: 5px;
5260 width: 16px;
5261 height: 16px;
5262 display: -webkit-box;
5263 display: -ms-flexbox;
5264 display: flex;
5265 -webkit-box-pack: center;
5266 -ms-flex-pack: center;
5267 justify-content: center;
5268 -webkit-box-align: center;
5269 -ms-flex-align: center;
5270 align-items: center;
5271 color: #fff;
5272 background-color: #c5280c;
5273 font-size: 14px;
5274 line-height: 1em;
5275 border-radius: 16px;
5276 opacity: 0;
5277 -webkit-transition: all 0.2s;
5278 transition: all 0.2s;
5279 }
5280 .merchant-module-page-setting-field-gallery .merchant-gallery-image:hover i {
5281 opacity: 1;
5282 }
5283 .merchant-module-page-setting-field-gallery .merchant-gallery-button {
5284 cursor: pointer;
5285 -webkit-user-select: none;
5286 -moz-user-select: none;
5287 -ms-user-select: none;
5288 user-select: none;
5289 display: -webkit-inline-box;
5290 display: -ms-inline-flexbox;
5291 display: inline-flex;
5292 padding: 0.4375rem 1rem;
5293 font-size: 0.875rem;
5294 font-weight: 600;
5295 line-height: 1.5;
5296 white-space: nowrap;
5297 text-transform: none;
5298 text-decoration: none;
5299 color: #212b36;
5300 background-color: #fff;
5301 border: 1px solid #c4cdd5;
5302 border-radius: 0.25rem;
5303 -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);
5304 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);
5305 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);
5306 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);
5307 }
5308 .merchant-module-page-setting-field-gallery .merchant-gallery-button:hover, .merchant-module-page-setting-field-gallery .merchant-gallery-button:focus {
5309 outline: none;
5310 -webkit-box-shadow: none;
5311 box-shadow: none;
5312 }
5313 .merchant-module-page-setting-field-gallery .ui-sortable-placeholder {
5314 visibility: visible !important;
5315 border: 1px dashed #ddd;
5316 background-color: #f9f9f9;
5317 border-radius: 4px;
5318 }
5319
5320 .merchant-module-page-setting-field-upload .merchant-upload-wrapper {
5321 display: -webkit-box;
5322 display: -ms-flexbox;
5323 display: flex;
5324 grid-gap: 5px;
5325 -ms-flex-wrap: wrap;
5326 flex-wrap: wrap;
5327 margin-bottom: 15px;
5328 }
5329 .merchant-module-page-setting-field-upload .merchant-upload-wrapper:empty {
5330 display: none;
5331 }
5332 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop {
5333 position: relative;
5334 background: #F6F6F6;
5335 border: 1px solid #EAEAEB;
5336 border-radius: 5px;
5337 height: 150px;
5338 }
5339 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop .merchant-upload-button {
5340 display: -webkit-box;
5341 display: -ms-flexbox;
5342 display: flex;
5343 -webkit-box-orient: vertical;
5344 -webkit-box-direction: normal;
5345 -ms-flex-direction: column;
5346 flex-direction: column;
5347 -webkit-box-align: center;
5348 -ms-flex-align: center;
5349 align-items: center;
5350 -webkit-box-pack: center;
5351 -ms-flex-pack: center;
5352 justify-content: center;
5353 width: 100%;
5354 height: 100%;
5355 margin-top: 10px;
5356 border: none;
5357 background: no-repeat;
5358 outline: none;
5359 -webkit-box-shadow: none;
5360 box-shadow: none;
5361 }
5362 .merchant-module-page-setting-field-upload .merchant-upload-button-wrapper.merchant-upload-button-drag-drop img {
5363 position: absolute;
5364 left: 50%;
5365 top: 50%;
5366 -webkit-transform: translate(-50%, -50%);
5367 transform: translate(-50%, -50%);
5368 margin-top: -15px;
5369 }
5370 .merchant-module-page-setting-field-upload .merchant-upload-image {
5371 position: relative;
5372 display: -webkit-box;
5373 display: -ms-flexbox;
5374 display: flex;
5375 -webkit-box-align: center;
5376 -ms-flex-align: center;
5377 align-items: center;
5378 -webkit-box-pack: center;
5379 -ms-flex-pack: center;
5380 justify-content: center;
5381 border-radius: 4px;
5382 padding: 2px;
5383 border: 1px solid #eee;
5384 background-color: #fff;
5385 }
5386 .merchant-module-page-setting-field-upload .merchant-upload-image img {
5387 cursor: -webkit-grab;
5388 cursor: grab;
5389 width: 100%;
5390 height: 100%;
5391 max-height: 75px;
5392 -o-object-fit: cover;
5393 object-fit: cover;
5394 }
5395 .merchant-module-page-setting-field-upload .merchant-upload-image i {
5396 cursor: pointer;
5397 position: absolute;
5398 z-index: 1;
5399 top: 5px;
5400 right: 5px;
5401 width: 16px;
5402 height: 16px;
5403 display: -webkit-box;
5404 display: -ms-flexbox;
5405 display: flex;
5406 -webkit-box-pack: center;
5407 -ms-flex-pack: center;
5408 justify-content: center;
5409 -webkit-box-align: center;
5410 -ms-flex-align: center;
5411 align-items: center;
5412 color: #fff;
5413 background-color: #c5280c;
5414 font-size: 14px;
5415 line-height: 1em;
5416 border-radius: 16px;
5417 opacity: 0;
5418 -webkit-transition: all 0.2s;
5419 transition: all 0.2s;
5420 }
5421 .merchant-module-page-setting-field-upload .merchant-upload-image:hover i {
5422 opacity: 1;
5423 }
5424 .merchant-module-page-setting-field-upload .merchant-upload-button {
5425 cursor: pointer;
5426 -webkit-user-select: none;
5427 -moz-user-select: none;
5428 -ms-user-select: none;
5429 user-select: none;
5430 display: -webkit-inline-box;
5431 display: -ms-inline-flexbox;
5432 display: inline-flex;
5433 padding: 0.4375rem 1rem;
5434 font-size: 0.875rem;
5435 font-weight: 600;
5436 line-height: 1.5;
5437 white-space: nowrap;
5438 text-transform: none;
5439 text-decoration: none;
5440 color: #212b36;
5441 background-color: #fff;
5442 border: 1px solid #c4cdd5;
5443 border-radius: 0.25rem;
5444 -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);
5445 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);
5446 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);
5447 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);
5448 }
5449 .merchant-module-page-setting-field-upload .merchant-upload-button:hover, .merchant-module-page-setting-field-upload .merchant-upload-button:focus {
5450 outline: none;
5451 -webkit-box-shadow: none;
5452 box-shadow: none;
5453 }
5454
5455 .merchant-module-page-setting-field-switcher .merchant-toggle-switch {
5456 display: -webkit-box;
5457 display: -ms-flexbox;
5458 display: flex;
5459 -webkit-box-pack: start;
5460 -ms-flex-pack: start;
5461 justify-content: flex-start;
5462 }
5463 .merchant-module-page-setting-field-switcher input {
5464 display: none;
5465 }
5466 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-inner {
5467 margin-left: 0;
5468 background: #3858E9;
5469 }
5470 .merchant-module-page-setting-field-switcher input:checked + .toggle-switch-label .toggle-switch-switch {
5471 right: 1px;
5472 }
5473 .merchant-module-page-setting-field-switcher .toggle-switch {
5474 float: right;
5475 position: relative;
5476 width: 36px;
5477 margin-top: 2px;
5478 -webkit-user-select: none;
5479 -moz-user-select: none;
5480 -ms-user-select: none;
5481 user-select: none;
5482 }
5483 .merchant-module-page-setting-field-switcher .toggle-switch-label {
5484 position: relative;
5485 display: inline-block;
5486 overflow: hidden;
5487 cursor: pointer;
5488 border-radius: 20px;
5489 padding: 0;
5490 margin: 0;
5491 width: 36px;
5492 }
5493 .merchant-module-page-setting-field-switcher .toggle-switch-inner {
5494 display: block;
5495 width: 200%;
5496 margin-left: -100%;
5497 background: #c8c8c8;
5498 height: 18px;
5499 }
5500 .merchant-module-page-setting-field-switcher .toggle-switch-switch {
5501 display: block;
5502 width: 12px;
5503 height: 12px;
5504 margin: 3px;
5505 background-color: #fff;
5506 position: absolute;
5507 top: 0;
5508 bottom: 0;
5509 right: 18px;
5510 border-radius: 20px;
5511 -webkit-transition: all 0.1s ease-in 0s;
5512 transition: all 0.1s ease-in 0s;
5513 }
5514
5515 .merchant-module-alert {
5516 position: fixed;
5517 top: 0;
5518 left: 0;
5519 right: 0;
5520 bottom: 0;
5521 z-index: 99999;
5522 display: -webkit-box;
5523 display: -ms-flexbox;
5524 display: flex;
5525 -webkit-box-pack: center;
5526 -ms-flex-pack: center;
5527 justify-content: center;
5528 -webkit-box-align: center;
5529 -ms-flex-align: center;
5530 align-items: center;
5531 background-color: rgba(0, 0, 0, 0.6);
5532 opacity: 0;
5533 visibility: hidden;
5534 -webkit-user-select: none;
5535 -moz-user-select: none;
5536 -ms-user-select: none;
5537 user-select: none;
5538 pointer-events: none;
5539 -webkit-transition: all 0.2s;
5540 transition: all 0.2s;
5541 }
5542 .merchant-module-alert.merchant-show {
5543 -webkit-user-select: auto;
5544 -moz-user-select: auto;
5545 -ms-user-select: auto;
5546 user-select: auto;
5547 pointer-events: auto;
5548 opacity: 1;
5549 visibility: visible;
5550 }
5551
5552 .merchant-module-alert-wrapper {
5553 display: -webkit-box;
5554 display: -ms-flexbox;
5555 display: flex;
5556 -webkit-box-orient: vertical;
5557 -webkit-box-direction: normal;
5558 -ms-flex-direction: column;
5559 flex-direction: column;
5560 width: 640px;
5561 max-width: 90%;
5562 border-radius: 4px;
5563 background-color: #fff;
5564 }
5565
5566 .merchant-module-alert-header {
5567 display: -webkit-box;
5568 display: -ms-flexbox;
5569 display: flex;
5570 -webkit-box-align: center;
5571 -ms-flex-align: center;
5572 align-items: center;
5573 -webkit-box-pack: justify;
5574 -ms-flex-pack: justify;
5575 justify-content: space-between;
5576 padding: 20px 30px;
5577 }
5578 .merchant-module-alert-header strong {
5579 font-size: 18px;
5580 line-height: 1em;
5581 }
5582 .merchant-module-alert-header a {
5583 position: relative;
5584 right: -5px;
5585 display: -webkit-box;
5586 display: -ms-flexbox;
5587 display: flex;
5588 color: #212121;
5589 text-decoration: none;
5590 -webkit-transition: all 0.2s;
5591 transition: all 0.2s;
5592 }
5593 .merchant-module-alert-header a:hover {
5594 opacity: 0.6;
5595 }
5596 .merchant-module-alert-header a:focus, .merchant-module-alert-header a:active {
5597 outline: none;
5598 -webkit-box-shadow: none;
5599 box-shadow: none;
5600 }
5601 .merchant-module-alert-header i {
5602 font-size: 32px;
5603 line-height: 1em;
5604 width: auto;
5605 height: auto;
5606 }
5607
5608 .merchant-module-alert-content {
5609 display: -webkit-box;
5610 display: -ms-flexbox;
5611 display: flex;
5612 -webkit-box-orient: vertical;
5613 -webkit-box-direction: normal;
5614 -ms-flex-direction: column;
5615 flex-direction: column;
5616 grid-gap: 20px;
5617 padding: 0 30px 30px 30px;
5618 }
5619 .merchant-module-alert-content p {
5620 margin: 0;
5621 padding: 0;
5622 font-size: 15px;
5623 font-weight: 500;
5624 color: #757575;
5625 }
5626 .merchant-module-alert-content figure {
5627 display: -webkit-box;
5628 display: -ms-flexbox;
5629 display: flex;
5630 margin: 0;
5631 padding: 0;
5632 }
5633 .merchant-module-alert-content img {
5634 max-width: 100%;
5635 }
5636
5637 .merchant-module-alert-footer {
5638 display: -webkit-box;
5639 display: -ms-flexbox;
5640 display: flex;
5641 -webkit-box-pack: end;
5642 -ms-flex-pack: end;
5643 justify-content: flex-end;
5644 padding: 30px;
5645 }
5646 .merchant-module-alert-footer a {
5647 font-weight: bold;
5648 font-size: 14px;
5649 padding: 10px 15px;
5650 text-decoration: none;
5651 border-radius: 4px;
5652 color: #212121;
5653 border: 1px solid #e5e5e5;
5654 }
5655 .merchant-module-alert-footer a:focus, .merchant-module-alert-footer a:active {
5656 outline: none;
5657 -webkit-box-shadow: none;
5658 box-shadow: none;
5659 }
5660
5661 .merchant-module-page-setting-field-inner.disabled .merchant-color-picker {
5662 pointer-events: none;
5663 opacity: 0.8;
5664 }
5665 .merchant-module-page-setting-field-inner.disabled .merchant-toggle-switch {
5666 opacity: 0.5;
5667 }
5668 .merchant-module-page-setting-field-inner.disabled .merchant-range {
5669 opacity: 0.5;
5670 }
5671 .merchant-module-page-setting-field-inner.disabled .merchant-module-page-settings-devices {
5672 opacity: 0.5;
5673 }
5674
5675 /* Utils */
5676 .merchant-height-auto {
5677 height: auto;
5678 }
5679
5680 .merchant-admin-page__dashboard .merchant-top-bar {
5681 margin-bottom: 0;
5682 }
5683 .merchant-admin-page__dashboard .merchant-wrap {
5684 margin-top: 0;
5685 }
5686 .merchant-admin-page__dashboard .merchant-wrap .merchant-modules-header-heading {
5687 margin-top: 30px;
5688 }
5689 .merchant-admin-page .merchant-admin-footer-text-link {
5690 display: inline-block;
5691 padding-right: 5px;
5692 color: #3858E9;
5693 }
5694 .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 {
5695 color: #3858E9;
5696 }
5697
5698 .merchant-admin-page-module #wpfooter {
5699 display: none;
5700 }
5701 .merchant-admin-page-module #wpbody-content {
5702 padding-bottom: 30px;
5703 }
5704
5705 .merchant-module-footer-text {
5706 display: -webkit-box;
5707 display: -ms-flexbox;
5708 display: flex;
5709 grid-gap: 5px;
5710 -webkit-box-pack: center;
5711 -ms-flex-pack: center;
5712 justify-content: center;
5713 text-align: center;
5714 margin-top: 37px;
5715 }
5716 .merchant-module-footer-text i {
5717 color: #3858E9;
5718 }
5719
5720 /* Responsive */
5721 @media (max-width: 991px) {
5722 .merchant-wrap {
5723 display: -webkit-box;
5724 display: -ms-flexbox;
5725 display: flex;
5726 -webkit-box-orient: vertical;
5727 -webkit-box-direction: normal;
5728 -ms-flex-direction: column;
5729 flex-direction: column;
5730 grid-gap: 20px;
5731 }
5732 .merchant-modules-header-shortlinks {
5733 margin: 0;
5734 }
5735 .merchant-modules-header {
5736 -webkit-box-orient: vertical;
5737 -webkit-box-direction: normal;
5738 -ms-flex-direction: column;
5739 flex-direction: column;
5740 grid-gap: 20px;
5741 }
5742 .merchant-module-page-header-content {
5743 width: 100%;
5744 }
5745 .merchant-module-page-desc {
5746 max-width: none;
5747 }
5748 .merchant-module-page-header-placeholder {
5749 display: none;
5750 }
5751 .merchant-modules-header-image {
5752 display: none;
5753 }
5754 .merchant-modules-list {
5755 grid-template-columns: repeat(1, minmax(0, 1fr));
5756 }
5757 .merchant-modules-header-status {
5758 margin-bottom: 0;
5759 }
5760 .merchant-module-page-setting-box {
5761 -webkit-box-orient: vertical;
5762 -webkit-box-direction: normal;
5763 -ms-flex-direction: column;
5764 flex-direction: column;
5765 grid-gap: 20px;
5766 }
5767 .merchant-module-page-setting-title,
5768 .merchant-module-page-setting-fields {
5769 width: 100%;
5770 }
5771 .merchant-module-page-body {
5772 -webkit-box-orient: vertical;
5773 -webkit-box-direction: reverse;
5774 -ms-flex-direction: column-reverse;
5775 flex-direction: column-reverse;
5776 }
5777 .merchant-module-page-content {
5778 width: 100%;
5779 }
5780 .merchant-module-page-preview {
5781 margin-left: 0;
5782 margin-bottom: 20px;
5783 width: 100%;
5784 }
5785 }
5786 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area {
5787 margin-bottom: 0px;
5788 position: relative;
5789 }
5790 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field {
5791 background-color: #F0F0F0;
5792 border: none;
5793 border-radius: 3px;
5794 padding: 13px 0 13px 40px;
5795 width: 100%;
5796 }
5797 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-webkit-input-placeholder {
5798 font-size: 12px;
5799 }
5800 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-moz-placeholder {
5801 font-size: 12px;
5802 }
5803 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field:-ms-input-placeholder {
5804 font-size: 12px;
5805 }
5806 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::-ms-input-placeholder {
5807 font-size: 12px;
5808 }
5809 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-field::placeholder {
5810 font-size: 12px;
5811 }
5812 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-search-area .merchant-search-icon {
5813 position: absolute;
5814 top: 50%;
5815 left: 15px;
5816 -webkit-transform: translateY(-50%);
5817 transform: translateY(-50%);
5818 }
5819 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching {
5820 margin-left: 10px;
5821 margin-right: 10px;
5822 font-style: italic;
5823 font-size: 11px;
5824 position: absolute;
5825 top: 13px;
5826 right: 0;
5827 color: #9d9d9d;
5828 display: none;
5829 }
5830 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-searching.active {
5831 display: inline;
5832 }
5833 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview {
5834 position: absolute;
5835 top: 100%;
5836 left: 0;
5837 right: 0;
5838 z-index: 10;
5839 background-color: #fff;
5840 border: 1px solid #ddd;
5841 padding: 0;
5842 margin: 0;
5843 height: 190px;
5844 overflow-y: scroll;
5845 display: none;
5846 }
5847 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li {
5848 cursor: pointer;
5849 }
5850 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style {
5851 padding-left: 15px;
5852 }
5853 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selections-products-preview li.hierarchy-style:before {
5854 content: "";
5855 display: inline-block;
5856 width: 6px;
5857 height: 6px;
5858 border-radius: 50%;
5859 background-color: #d1d1d1;
5860 margin-right: 7px;
5861 }
5862 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li {
5863 border-radius: 4px;
5864 margin: 15px 0 15px;
5865 border: 1px solid #dfe1e1;
5866 }
5867 .merchant-module-page-setting-field-products_selector .merchant-products-search-container .merchant-selected-products-preview ul li:last-child {
5868 margin-bottom: 0;
5869 }
5870 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul {
5871 padding: 0;
5872 margin: 0;
5873 }
5874 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li {
5875 padding: 5px 10px;
5876 margin: 0 -3px;
5877 min-height: 30px;
5878 display: -webkit-box;
5879 display: -ms-flexbox;
5880 display: flex;
5881 -webkit-box-pack: justify;
5882 -ms-flex-pack: justify;
5883 justify-content: space-between;
5884 -webkit-box-align: center;
5885 -ms-flex-align: center;
5886 align-items: center;
5887 border-bottom: 1px dotted #eee;
5888 position: relative;
5889 overflow: hidden;
5890 -webkit-user-select: none;
5891 -moz-user-select: none;
5892 -ms-user-select: none;
5893 user-select: none;
5894 -webkit-transition: 300ms;
5895 transition: 300ms;
5896 }
5897 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li:hover {
5898 background-color: #fafafa;
5899 }
5900 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li > span {
5901 margin-left: 3px;
5902 margin-right: 3px;
5903 }
5904 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img {
5905 width: 30px;
5906 -webkit-box-flex: 0;
5907 -ms-flex: 0 0 30px;
5908 flex: 0 0 30px;
5909 }
5910 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.img img {
5911 width: 30px;
5912 height: 30px;
5913 border-radius: 4px;
5914 display: block;
5915 }
5916 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.data {
5917 -webkit-box-flex: 1;
5918 -ms-flex-positive: 1;
5919 flex-grow: 1;
5920 }
5921 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.type {
5922 font-size: 10px;
5923 color: #999;
5924 min-width: 40px;
5925 text-decoration: none;
5926 text-align: end;
5927 }
5928 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li del .amount {
5929 text-decoration: line-through;
5930 }
5931 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li span.info {
5932 font-size: 12px;
5933 font-style: italic;
5934 height: 18px;
5935 line-height: 18px;
5936 color: #999;
5937 background-color: #f1f1f1;
5938 text-decoration: none;
5939 padding: 0 6px;
5940 border-radius: 2px;
5941 margin-left: 3px;
5942 margin-right: 3px;
5943 }
5944 .merchant-module-page-setting-field-products_selector .merchant-products-search-container ul li .remove {
5945 width: 30px;
5946 height: 30px;
5947 line-height: 28px;
5948 font-size: 15px;
5949 -webkit-box-flex: 0;
5950 -ms-flex: 0 0 30px;
5951 flex: 0 0 30px;
5952 border-radius: 50%;
5953 text-align: center;
5954 background-color: #f6f3f3;
5955 cursor: pointer;
5956 }
5957
5958 .merchant-image-picker label {
5959 position: relative;
5960 display: inline-block;
5961 margin-right: 10px;
5962 margin-bottom: 5px;
5963 }
5964 .merchant-image-picker label .tool-tip-text {
5965 visibility: hidden;
5966 opacity: 0;
5967 width: 120px;
5968 background-color: black;
5969 color: #fff;
5970 text-align: center;
5971 border-radius: 6px;
5972 padding: 5px 0;
5973 position: absolute;
5974 z-index: 1;
5975 top: -35px;
5976 left: 50%;
5977 margin-left: -60px;
5978 -webkit-transition: opacity 300ms;
5979 transition: opacity 300ms;
5980 }
5981 .merchant-image-picker label .tool-tip-text::after {
5982 content: "";
5983 position: absolute;
5984 top: 100%;
5985 left: 50%;
5986 margin-left: -5px;
5987 border-width: 5px;
5988 border-style: solid;
5989 border-color: black transparent transparent transparent;
5990 }
5991 .merchant-image-picker label:hover .tool-tip-text {
5992 visibility: visible;
5993 opacity: 1;
5994 }
5995 .merchant-image-picker input[type=radio] {
5996 display: none;
5997 clear: both;
5998 }
5999 .merchant-image-picker img {
6000 border: 2px solid #F0F0F1;
6001 border-radius: 4px;
6002 cursor: pointer;
6003 padding: 7px 3px;
6004 -webkit-transition: 300ms;
6005 transition: 300ms;
6006 }
6007 .merchant-image-picker input[type=radio]:checked + img {
6008 border: 2px solid #3858E9;
6009 }
6010
6011 .CodeMirror.cm-s-default {
6012 border-radius: 5px;
6013 border: 1px solid #f0f0f1;
6014 }
6015
6016 .merchant-module-page-settings.backup-restore-section {
6017 border-radius: 8px;
6018 }
6019 .merchant-module-page-settings.backup-restore-section .merchant-module-page-setting-box {
6020 max-width: 1200px;
6021 margin: 0 auto;
6022 }
6023 .merchant-module-page-settings.backup-restore-section section {
6024 background: white;
6025 border-radius: 8px;
6026 margin-bottom: 24px;
6027 }
6028 .merchant-module-page-settings.backup-restore-section section:last-child {
6029 margin-bottom: 0;
6030 }
6031 .merchant-module-page-settings.backup-restore-section section h3 {
6032 color: #23282d;
6033 position: relative;
6034 margin-block: 0 10px;
6035 }
6036 .merchant-module-page-settings.backup-restore-section section .form-field label {
6037 display: block;
6038 margin-bottom: 0.5rem;
6039 font-weight: 600;
6040 color: #23282d;
6041 }
6042 .merchant-module-page-settings.backup-restore-section section .form-field button {
6043 padding: 0.75rem 1.5rem;
6044 margin-right: 15px;
6045 border: 1px solid #3858e9;
6046 background-color: rgba(0, 0, 0, 0);
6047 color: #3858e9;
6048 border-radius: 4px;
6049 cursor: pointer;
6050 font-size: 0.9rem;
6051 font-weight: 500;
6052 -webkit-transition: all 0.2s ease-in-out;
6053 transition: all 0.2s ease-in-out;
6054 }
6055 .merchant-module-page-settings.backup-restore-section section .form-field button:hover {
6056 opacity: 0.8;
6057 }
6058 .merchant-module-page-settings.backup-restore-section section .form-field button:focus {
6059 background-color: rgba(0, 0, 0, 0);
6060 outline: 2px solid #3858e9;
6061 outline-offset: 2px;
6062 }
6063 .merchant-module-page-settings.backup-restore-section section .form-field button:disabled {
6064 opacity: 0.5;
6065 cursor: not-allowed;
6066 }
6067 .merchant-module-page-settings.backup-restore-section section .form-field button.download-button, .merchant-module-page-settings.backup-restore-section section .form-field button.restore-button {
6068 display: block;
6069 margin: 10px 0 0;
6070 }
6071 .merchant-module-page-settings.backup-restore-section section .form-field p.description {
6072 font-size: 0.875rem;
6073 color: #666;
6074 margin-top: 0.5rem;
6075 font-style: italic;
6076 }
6077 .merchant-module-page-settings.backup-restore-section section .form-field .backup-file-remove {
6078 color: #c5280c;
6079 border-radius: 50%;
6080 position: relative;
6081 top: 5px;
6082 right: 5px;
6083 cursor: pointer;
6084 }
6085 .merchant-module-page-settings.backup-restore-section section .form-field .merchant-backup-status {
6086 font-size: 13px;
6087 font-weight: 600;
6088 vertical-align: middle;
6089 opacity: 0;
6090 -webkit-transition: opacity 0.2s ease;
6091 transition: opacity 0.2s ease;
6092 }
6093 .merchant-module-page-settings.backup-restore-section section .form-field .merchant-backup-status.is-success {
6094 color: #46b450;
6095 opacity: 1;
6096 }
6097 .merchant-module-page-settings.backup-restore-section section .form-field .merchant-backup-status.is-error {
6098 color: #dc3232;
6099 opacity: 1;
6100 }
6101 .merchant-module-page-settings.backup-restore-section section .error-message p {
6102 margin-bottom: 0;
6103 }
6104 @media (max-width: 768px) {
6105 .merchant-module-page-settings.backup-restore-section {
6106 padding: 1.5rem;
6107 }
6108 .merchant-module-page-settings.backup-restore-section section {
6109 padding: 1.5rem;
6110 }
6111 }
6112 .merchant-module-page-settings.backup-restore-section .merchant-dropzone {
6113 position: relative;
6114 border: 2px dashed #D6D6D6;
6115 border-radius: 8px;
6116 padding: 40px 20px;
6117 text-align: center;
6118 -webkit-transition: all 0.2s ease-in-out;
6119 transition: all 0.2s ease-in-out;
6120 cursor: pointer;
6121 }
6122 .merchant-module-page-settings.backup-restore-section .merchant-dropzone:hover, .merchant-module-page-settings.backup-restore-section .merchant-dropzone.drag-over {
6123 border-color: #3858E9;
6124 background-color: rgba(56, 88, 233, 0.03);
6125 }
6126 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.drag-over {
6127 border-style: solid;
6128 }
6129 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__content {
6130 pointer-events: none;
6131 }
6132 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__content .dashicons {
6133 font-size: 32px;
6134 width: 32px;
6135 height: 32px;
6136 color: #999;
6137 margin-bottom: 8px;
6138 }
6139 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__content p {
6140 margin: 0 0 12px;
6141 color: #666;
6142 font-size: 14px;
6143 }
6144 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__browse {
6145 pointer-events: auto;
6146 padding: 8px 20px !important;
6147 margin: 0 !important;
6148 font-size: 13px !important;
6149 }
6150 .merchant-module-page-settings.backup-restore-section .merchant-dropzone .merchant-backup-file {
6151 position: absolute;
6152 top: 0;
6153 left: 0;
6154 width: 100%;
6155 height: 100%;
6156 opacity: 0;
6157 cursor: pointer;
6158 }
6159 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__loading {
6160 display: none;
6161 position: absolute;
6162 top: 0;
6163 left: 0;
6164 width: 100%;
6165 height: 100%;
6166 background: rgba(255, 255, 255, 0.9);
6167 border-radius: 8px;
6168 -webkit-box-orient: vertical;
6169 -webkit-box-direction: normal;
6170 -ms-flex-direction: column;
6171 flex-direction: column;
6172 -webkit-box-align: center;
6173 -ms-flex-align: center;
6174 align-items: center;
6175 -webkit-box-pack: center;
6176 -ms-flex-pack: center;
6177 justify-content: center;
6178 gap: 10px;
6179 z-index: 10;
6180 }
6181 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__loading p {
6182 margin: 0;
6183 color: #3858E9;
6184 font-size: 14px;
6185 font-weight: 500;
6186 }
6187 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-loading {
6188 pointer-events: none;
6189 }
6190 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-loading .merchant-dropzone__loading {
6191 display: -webkit-box;
6192 display: -ms-flexbox;
6193 display: flex;
6194 }
6195 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__success {
6196 display: none;
6197 position: absolute;
6198 top: 0;
6199 left: 0;
6200 width: 100%;
6201 height: 100%;
6202 background: rgba(255, 255, 255, 0.95);
6203 border-radius: 8px;
6204 -webkit-box-orient: vertical;
6205 -webkit-box-direction: normal;
6206 -ms-flex-direction: column;
6207 flex-direction: column;
6208 -webkit-box-align: center;
6209 -ms-flex-align: center;
6210 align-items: center;
6211 -webkit-box-pack: center;
6212 -ms-flex-pack: center;
6213 justify-content: center;
6214 gap: 8px;
6215 z-index: 10;
6216 }
6217 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__success .dashicons {
6218 font-size: 36px;
6219 width: 36px;
6220 height: 36px;
6221 color: #46b450;
6222 }
6223 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__success p {
6224 margin: 0;
6225 color: #46b450;
6226 font-size: 14px;
6227 font-weight: 600;
6228 }
6229 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success {
6230 pointer-events: none;
6231 border-color: #46b450;
6232 background-color: rgba(70, 180, 80, 0.03);
6233 }
6234 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success .merchant-dropzone__content,
6235 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success .merchant-backup-file {
6236 visibility: hidden;
6237 }
6238 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-success .merchant-dropzone__success {
6239 display: -webkit-box;
6240 display: -ms-flexbox;
6241 display: flex;
6242 }
6243 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__error {
6244 display: none;
6245 position: absolute;
6246 top: 0;
6247 left: 0;
6248 width: 100%;
6249 height: 100%;
6250 background: rgba(255, 255, 255, 0.95);
6251 border-radius: 8px;
6252 -webkit-box-orient: vertical;
6253 -webkit-box-direction: normal;
6254 -ms-flex-direction: column;
6255 flex-direction: column;
6256 -webkit-box-align: center;
6257 -ms-flex-align: center;
6258 align-items: center;
6259 -webkit-box-pack: center;
6260 -ms-flex-pack: center;
6261 justify-content: center;
6262 gap: 8px;
6263 z-index: 10;
6264 }
6265 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__error .dashicons {
6266 font-size: 36px;
6267 width: 36px;
6268 height: 36px;
6269 color: #dc3232;
6270 }
6271 .merchant-module-page-settings.backup-restore-section .merchant-dropzone__error p {
6272 margin: 0;
6273 color: #dc3232;
6274 font-size: 14px;
6275 font-weight: 600;
6276 }
6277 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error {
6278 pointer-events: none;
6279 border-color: #dc3232;
6280 background-color: rgba(220, 50, 50, 0.03);
6281 }
6282 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error .merchant-dropzone__content,
6283 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error .merchant-backup-file {
6284 visibility: hidden;
6285 }
6286 .merchant-module-page-settings.backup-restore-section .merchant-dropzone.is-error .merchant-dropzone__error {
6287 display: -webkit-box;
6288 display: -ms-flexbox;
6289 display: flex;
6290 }
6291
6292 .merchant-loading-spinner {
6293 display: inline-block;
6294 width: 20px;
6295 height: 20px;
6296 border: 4px solid rgba(0, 0, 0, 0.1);
6297 border-radius: 50%;
6298 border-top-color: #3D65E9;
6299 -webkit-animation: spin 1s ease-in-out infinite;
6300 animation: spin 1s ease-in-out infinite;
6301 vertical-align: middle;
6302 -webkit-transition: 300ms;
6303 transition: 300ms;
6304 opacity: 0;
6305 visibility: hidden;
6306 }
6307 .merchant-loading-spinner.show {
6308 opacity: 1;
6309 visibility: visible;
6310 }
6311 @-webkit-keyframes spin {
6312 0% {
6313 -webkit-transform: rotate(0deg);
6314 transform: rotate(0deg);
6315 }
6316 100% {
6317 -webkit-transform: rotate(360deg);
6318 transform: rotate(360deg);
6319 }
6320 }
6321 @keyframes spin {
6322 0% {
6323 -webkit-transform: rotate(0deg);
6324 transform: rotate(0deg);
6325 }
6326 100% {
6327 -webkit-transform: rotate(360deg);
6328 transform: rotate(360deg);
6329 }
6330 }