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

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