PluginProbe
Responsive Menu – Create Mobile-Friendly Menu / 4.7.4
Responsive Menu – Create Mobile-Friendly Menu v4.7.4
4.7.4 4.7.3 3.1.5 3.1.6 3.1.7 3.1.8 3.1.9 4.0.0 4.0.1 4.0.2 4.0.3 4.0.4 4.1.0 4.1.1 4.1.10 4.1.11 4.1.12 4.1.2 4.1.3 4.1.4 4.1.5 4.1.6 4.1.7 4.1.8 4.1.9 All 91 releases
responsive-menu / v4.0.0 / assets / admin / scss / admin.css

admin.css in Responsive Menu – Create Mobile-Friendly Menu 4.7.4, at v4.0.0/assets/admin/scss/admin.css

2,545 lines 54.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Admin scss file */
2
3 body,
4 h1,
5 h2,
6 h3,
7 h4,
8 h4,
9 h6,
10 p,
11 ul,
12 ol,
13 label{
14 padding: 0;
15 margin: 0;
16 }
17
18 ul,
19 ol,
20 ul li,
21 ol li{
22 margin: 0;
23 padding: 0;
24 list-style-type: none;
25 }
26
27 @font-face {
28 font-family: 'Product Sans';
29 src: url("../fonts/product-sans/Product\ Sans\ Regular.ttf") format( 'truetype' );
30 font-display: fallback;
31 }
32
33 @font-face {
34 font-family: 'Product Sans Bold';
35 src: url("../fonts/product-sans/Product\ Sans\ Bold.ttf") format( 'truetype' );
36 font-display: fallback;
37 }
38
39 @font-face {
40 font-family: "Product Sans Medium";
41 src: url("../fonts/product-sans/Product\ Sans\ Medium.ttf") format( 'truetype' );
42 font-display: fallback;
43 }
44
45 .rmp-editor-overlay a{
46 text-decoration: none;
47 }
48
49 .rmp-editor-active input[type="text"],
50 .rmp-editor-active input[type="password"],
51 .rmp-editor-active input[type="email"],
52 .rmp-editor-active input[type="url"],
53 .rmp-editor-active input[type="date"],
54 .rmp-editor-active input[type="month"],
55 .rmp-editor-active input[type="time"],
56 .rmp-editor-active input[type="datetime"],
57 .rmp-editor-active input[type="datetime-local"],
58 .rmp-editor-active input[type="week"],
59 .rmp-editor-active input[type="number"],
60 .rmp-editor-active input[type="search"],
61 .rmp-editor-active input[type="tel"],
62 .rmp-editor-active input[type="color"],
63 .rmp-editor-active textarea {
64 -webkit-appearance: none;
65 -moz-appearance: none;
66 background: #fff;
67 border-radius: 0;
68 border-style: solid;
69 border-width: 0.1rem;
70 box-shadow: none;
71 font-size: 14px;
72 letter-spacing: -0.015em;
73 margin: 0;
74 max-width: 100%;
75 padding: 0.25rem 0.5rem;
76 width: 100%;
77 }
78
79 #rmp-required-footer{
80 display: none;
81 }
82
83 .rmp-editor-overlay input[type="text"],
84 .rmp-editor-overlay input[type="password"],
85 .rmp-editor-overlay input[type="color"]{
86 height: 30px;
87 padding: 0 5px;
88 border: solid 1px #ddd;
89 max-width: 120px;
90 font-size: 12px;
91 }
92
93 #rmp-editor-wrapper input[type="checkbox"]:disabled,
94 #rmp-editor-wrapper input[type="checkbox"].disabled,
95 #rmp-editor-wrapper input[type="radio"]:disabled,
96 #rmp-editor-wrapper input[type="radio"].disabled,
97 #rmp-editor-wrapper input[type="checkbox"]:disabled:checked:before,
98 #rmp-editor-wrapper input[type="checkbox"].disabled:checked:before,
99 #rmp-editor-wrapper input[type="radio"]:disabled:checked:before,
100 #rmp-editor-wrapper input[type="radio"].disabled:checked:before {
101 opacity: 0.5;
102 }
103
104 input[type="text"]:focus,
105 input[type="password"]:focus,
106 input[type="color"]:focus,
107 input[type="date"]:focus,
108 input[type="datetime"]:focus,
109 input[type="datetime-local"]:focus,
110 input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus, select:focus, textarea:focus {
111 border-color: #0085ba;
112 box-shadow: 0 0 0 1px #0085ba;
113
114 }
115
116 .rmp-editor-active input[type="checkbox"], input[type="radio"] {
117 height: 16px;
118 width: 16px;
119 min-width: 16px;
120 margin-right: 5px;
121 border: solid 1px #d5dadf;
122 }
123
124 .rmp-editor-active input[type="radio"]:checked{
125 border: solid 1px #0085ba;
126 }
127
128 .rmp-editor-active input[type="radio"]:checked::before {
129 content: "";
130 border-radius: 50%;
131 width: 8px;
132 height: 8px;
133 margin: 3px;
134 background: #0085ba;
135 line-height: 1.14285714;
136 }
137
138 .rmp-editor-active input[type="checkbox"]:checked::before {
139 content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E);
140 position: absolute;
141 display: inline-block;
142 margin: -1px 0 0 -8px;
143 height: 16px;
144 width: 16px;
145 }
146
147
148 .rmp-admin-page {
149 color:#000;
150 width: auto;
151 }
152
153 .rmp-row {
154 display: flex;
155 }
156
157 .rmp-row .col-1 {width: 8.33%;}
158 .rmp-row .col-2 {width: 16.66%;}
159 .rmp-row .col-3 {width: 25%;}
160 .rmp-row .col-4 {width: 33.33%;}
161 .rmp-row .col-5 {width: 41.66%;}
162 .rmp-row .col-6 {width: 50%;}
163 .rmp-row .col-7 {width: 58.33%;}
164 .rmp-row .col-8 {width: 66.66%;}
165 .rmp-row .col-9 {width: 75%;}
166 .rmp-row .col-10 {width: 83.33%;}
167 .rmp-row .col-11 {width: 91.66%;}
168 .rmp-row .col-12 {width: 100%;}
169 .rmp-row .col {width: auto;}
170
171 .rmp-menu-setting-box,
172 .rmp-global-setting-box,
173 .rmp-preview-setting-box {
174 border:solid 1px #ddd;
175 background: #fff;
176 margin-bottom: 30px;
177 height: max-content;
178 position: relative;
179 }
180
181 #iframe-spinner {
182 position: absolute;
183 width: 100%;
184 height: 100%;
185 top: 0;
186 left: 0;
187 display: none;
188 z-index: 99999999;
189 background: rgba(255,255,255,0.9);
190 }
191
192 /* Medium devices (tablets, 768px and up) */
193 @media only screen and ( max-width: 782px ) {
194 .rmp-row {
195 flex-direction: column;
196 }
197
198 .rmp-row .col-sm-1 {width: 8.33%;}
199 .rmp-row .col-sm-2 {width: 16.66%;}
200 .rmp-row .col-sm-3 {width: 25%;}
201 .rmp-row .col-sm-4 {width: 33.33%;}
202 .rmp-row .col-sm-5 {width: 41.66%;}
203 .rmp-row .col-sm-6 {width: 50%;}
204 .rmp-row .col-sm-7 {width: 58.33%;}
205 .rmp-row .col-sm-8 {width: 66.66%;}
206 .rmp-row .col-sm-9 {width: 75%;}
207 .rmp-row .col-sm-10 {width: 83.33%;}
208 .rmp-row .col-sm-11 {width: 91.66%;}
209 .rmp-row .col-sm-12 {width: 100%;}
210 .rmp-row .col {width: auto;}
211
212 #rmp-tablet-preview,
213 #rmp-desktop-preview,
214 .rmp-preview-size {
215 display: none;
216 }
217
218 }
219
220 .rmp-preview-size {
221 display: none;
222 }
223
224 /* Large devices (desktops, 992px and up) */
225 @media only screen and ( max-width: 960px ) {
226
227 }
228
229 /* Extra large devices (large desktops, 1200px and up) */
230 @media only screen and ( max-width: 1140px ) {
231
232 }
233
234 .rmp-box-header {
235 background: #f5f6fa;
236 padding: 10px;
237 color:#2d405a;
238 border-bottom:solid 2px #ddd;
239 }
240
241 .rmp-menu-setting-box {
242 margin-right: 20px;
243 }
244
245 .rmp-preview-setting-box .rmp-box-header {
246 padding: 16px 10px;
247 }
248
249 .rmp-preview-setting-box .button {
250 line-height: unset;
251 }
252
253 .rmp-global-setting-options {
254 flex-direction: column;
255 }
256
257
258 .active {
259 display: block !important;
260 }
261
262 .tab-contents {
263 display: none;
264 padding: 20px;
265 }
266
267 .rmp-accordions .rmp-accordion-container input[type="checkbox"],
268 .rmp-accordions .rmp-accordion-container input[type="checkbox"]:checked::before{
269 -webkit-appearance: none;
270 -moz-appearance: none;
271 appearance: none;
272 -webkit-tap-highlight-color: transparent;
273 cursor: pointer;
274 }
275
276
277 .rmp-accordions .rmp-accordion-container .toggle {
278 height: 20px;
279 width: 36px;
280 border-radius: 25px;
281 display: inline-block;
282 position: relative;
283 margin: 0;
284 background: #99A6B9;
285 border: solid 1px #99A6B9;
286 /* -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); */
287 /* box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); */
288 /* -webkit-transition: 0.15s ease-out; */
289 -o-transition: 0.15s ease-out;
290 transition: 0.15s ease-out;
291 }
292
293
294 .rmp-accordions .rmp-accordion-container .toggle:after {
295 content: '';
296 position: absolute;
297 top: 1px;
298 left: 2px;
299 width: 16px;
300 height: 16px;
301 border-radius: 50%;
302 background: #ffffff;
303 transition: all .2s cubic-bezier(0.5,0.1,0.75,1.35);
304 }
305
306 .rmp-accordions .rmp-accordion-container .toggle:checked{
307 background:#36BEF7;
308 border: solid 1px #36BEF7;
309 }
310
311 .rmp-accordions .rmp-accordion-container .toggle:checked::before {
312 content: '';
313 position: absolute;
314 }
315
316 .rmp-accordions .rmp-accordion-container .toggle:checked::after{
317 transform: translateX(14px);
318 }
319
320
321 /* Text align icons */
322
323 .align-icons-group {
324 width: max-content;
325 overflow: hidden;
326 background: #FFFFFF;
327 border: 1px solid #E7EFF0;
328 color: #99A6B9;
329 box-sizing: border-box;
330 border-radius: 4px;
331 display: flex;
332 }
333
334 .align-icons-group input[type="radio"] {
335 -webkit-appearance: none;
336 -moz-appearance: none;
337 appearance: none;
338 visibility: hidden;
339 display: none;
340 }
341
342 .align-icons-group input[type="radio"]:focus{
343 outline: none;
344 border-color:unset;
345 box-shadow:unset;
346 }
347
348 .align-icons-group label {
349 padding: 0px 7px;
350 height: 36px;
351 display: inline-flex;
352 align-items: center;
353 }
354
355 .align-icons-group input[type="radio"]:checked + label {
356 background: #e7eff0;
357 color: #56606D;
358 }
359
360
361
362 .rmp-theme-setting-options {
363 overflow-y: scroll;
364 max-height: 600px;
365 }
366
367 .rmp-preview-iframe-container {
368 background: #191e23;
369 text-align: center;
370 }
371
372
373
374 .rmp-global-setting-options{
375 padding: 20px;
376 }
377
378 /** Scrolling bar in menu setting box **/
379 * ::-webkit-scrollbar {
380 width: 4px;
381 }
382
383 * ::-webkit-scrollbar-track {
384 box-shadow: inset 0 0 5px transparent;
385 }
386
387 * ::-webkit-scrollbar-thumb {
388 background: #d5dadf;
389 }
390
391 * ::-webkit-scrollbar-thumb:hover {
392 background: #2d405a;
393 }
394
395 #rmp-editor-wrapper .rmp-menu-tab-container .nav-tab-wrapper,
396 #rmp-editor-wrapper .rmp-accordion-container .nav-tab-wrapper{
397 padding: 0;
398 border-bottom: unset;
399 margin: 5% auto;
400 background: #2D405A;
401 border-radius: 25px;
402 width: max-content;
403 display: flex;
404 border: none;
405 }
406
407
408 .rmp-accordion-container .rmp-tab-items .nav-tab,
409 .rmp-accordion-container .nav-tab-wrapper .nav-tab {
410 max-width: calc(100% / 2);
411 text-align: center;
412 border: unset;
413 font-size: 12px;
414 background: transparent;
415 border-radius: 26px;
416 color: #fff;
417 padding: 0.5rem 1.7rem;
418 width: max-content;
419 margin: 0 -1px;
420 font-weight: 400;
421 }
422
423 .rmp-accordion-container .rmp-tab-items .ui-tabs-tab, .rmp-accordion-container .nav-tab-wrapper .ui-tabs-tab {
424 background: transparent;
425 border: transparent;
426 }
427
428 .rmp-dialog-overlay .nav-tab-active,
429 .rmp-menu-tab-container .nav-tab-wrapper .nav-tab-active,
430 .rmp-accordion-container .nav-tab-wrapper .nav-tab-active,
431 .rmp-accordion-container .nav-tab-wrapper .ui-tabs-active .nav-tab {
432 background: #36BEF7;
433 color: #fff;
434 transition: all 300ms;
435 }
436
437 .rmp-menu-tab-container {
438 border-left: solid 1px #ddd;
439 border-right: solid 1px #ddd;
440 border-bottom: solid 1px #ddd;
441 }
442
443 .rmp-menu-tab-container .rmp-menu-tab-contents{
444 padding: 20px;
445 }
446
447 /*Shortcut link */
448 .rmp-quick-edit-link a {
449 background: #dbf4ff;
450 padding: 5px 8px;
451 border: 1px dashed #36bef7;
452 border-radius: 3px;
453 }
454
455 .rmp-quick-edit-link a i{
456 margin-left: 5px;
457 }
458
459 /* Icons dialog */
460
461 .rmp-menu-icons-dialog .icon-tabs {
462 display: flex;
463 }
464
465 .rmp-menu-icons-dialog .nav-tab-wrapper {
466 border: unset;
467 border-right: 1px solid #ddd;
468 background: #fff;
469 }
470
471 .rmp-menu-icons-dialog .icon-tabs .nav-tab {
472 margin: 0;
473 width: -webkit-fill-available;
474 padding: 8px 15px;
475 font-size: 12px;
476 border: unset;
477 min-width: 220px;
478 font-weight: normal;
479 background: #fff;
480 color: #333;
481 font-family: 'Product Sans Medium';
482 }
483
484 .rmp-icon-tab-contents {
485 padding: 10px 20px 30px 20px;
486 width: 100%;
487 max-height: 520px;
488 min-height: 480px;
489 overflow-y: scroll;
490 }
491
492 .rmp-icon-tab-contents .font-icon {
493 float: left;
494 padding: 0 20px 20px 0;
495 width: 24px;
496 height: 24px;
497 box-sizing: initial;
498 }
499
500 .rmp-icon-tab-contents .font-icon label:before {
501 width: 24px;
502 height: 24px;
503 display: inline-block;
504 content: attr(rel);
505 border: 1px solid #e5e5e5;
506 padding: 6px;
507 background: #f5f6fa;
508 color: #768392;
509 position: relative;
510 cursor: pointer;
511 font-family: dashicons;
512 font-weight: 400;
513 font-size: 24px;
514 line-height: 1;
515 }
516
517 .rmp-icon-tab-contents .dash label:before {
518 font-family: dashicons;
519 }
520
521 .rmp-icon-tab-contents .font-icon input.radio:empty {
522 visibility: hidden;
523 }
524
525 .rmp-icon-tab-contents .font-icon input.radio:checked ~ label:before {
526 border: 1px solid #36BEF7;
527 color: #fff;
528 background: #36BEF7;
529 }
530
531 #rmp-icon-search{
532 max-width: 300px;
533 padding: 0 5px;
534 font-size: 12px;
535 display: inline;
536 min-height: 35px;
537 border: solid 1px #ddd;
538 }
539
540 #rmp-icon-search-typing-message {
541 margin: 0 10px;
542 font-size: 14px;
543 color: #007cba;
544 }
545
546 .theme-overlay .theme-header button {
547 padding: 0;
548 }
549
550 .rmp-dialog-contents .tabs{
551 width: 100%;
552 }
553
554 .dropzone {
555 max-width: 400px;
556 background: #f3f3f3;
557 border: 1px solid #ddd;
558 padding: 30px;
559 text-align: center;
560 margin-bottom: 20px;
561 }
562
563 /* Spinner */
564 .spinner {
565 float: unset;
566 }
567
568 .notice {
569 margin: 5px 0px 10px;
570 }
571
572
573 /** New Design style */
574 #rmp-preview-wrapper{
575 height: 100%;
576 position: relative;
577 }
578
579 .rmp-preview-mobile #rmp-preview-wrapper,
580 .rmp-preview-tablet #rmp-preview-wrapper {
581 border: 40px solid #333;
582 border-width: 55px 7px;
583 border-radius: 40px;
584 transition: all 0.5s ease;
585 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
586 position: relative;
587 box-shadow: 0px 3px 0 #BBB, 0px 4px 0 #BBB, 0px 5px 0 #BBB, 0px 7px 0 #BBB, 1px 6px 15px #2d405a;
588 pointer-events: none;
589 }
590
591 #rmp-preview-iframe,
592 #rmp-preview-iframe-loader {
593 height: 100%;
594 width: 100%;
595 background: rgb(255 255 255 / 0.8);
596 display: block;
597 pointer-events: initial;
598 }
599
600 #rmp-preview-iframe-loader{
601 position: absolute;
602 display:none;
603 }
604
605 #rmp-preview-iframe-loader img {
606 position: absolute;
607 left: 50%;
608 top: 50%;
609 -webkit-transform: translate(-50%, -50%);
610 transform: translate(-50%, -50%);
611 }
612
613
614 #rmp-save-menu-options,
615 #rmp-theme-action {
616 height: 100%;
617 width: max-content;
618 padding: 0 2rem;
619 background: #36BEF7;
620 border: unset;
621 color: #fff;
622 font-size: 16px;
623 cursor: pointer;
624 font-family: 'Product Sans Medium';
625 }
626
627 #rmp-theme-action {
628 padding: 0 0.5rem;
629 margin-left: 2px;
630 color: white;
631 }
632
633 #rmp-theme-action .dashicons {
634 font-size: 24px;
635 display: contents;
636 }
637
638 .rmp-editor-header {
639 background: #0D133D;
640 position: relative;
641 display: flex;
642 align-items: center;
643 height: 55px;
644 z-index: 10;
645 overflow: hidden;
646 justify-content: space-between;
647 }
648
649 .rmp-action-button {
650 display: block;
651 position: absolute;
652 top: 0;
653 right: 0;
654 width: 45px;
655 height: 100%;
656 padding: 0 2px 0 0;
657 background: #0085ba;
658 border: none;
659 color: #fff;
660 text-align: center;
661 text-decoration: none;
662 cursor: pointer;
663 transition: color .15s ease-in-out, border-color .15s ease-in-out, background .15s ease-in-out;
664 box-sizing: content-box;
665 }
666
667
668 .rmp-editor-header-logo {
669 display: inline-flex;
670 height: 55px;
671 width: 55px;
672 align-items: center;
673 }
674
675 .rmp-editor-header-logo img{
676 max-width: 35px;
677 max-height: 35px;
678 margin: 5px auto;
679 }
680
681 #rmp-editor-wrapper .rmp-editor-header-back{
682 width: 100%;
683 height: 100%;
684 vertical-align: bottom;
685 display: flex;
686 justify-content: center;
687 align-items: center;
688 display: none;
689 background: #F80668;
690 color: #fff;
691 font-weight: 900;
692 }
693
694 .rmp-search-settings-btn {
695 color: #fff;
696 font-size: 20px;
697 cursor: pointer;
698 margin-right: 10px;
699 }
700
701 .rmp-editor-header-close {
702 padding: 20px;
703 font-size: 1.2rem;
704 background: #F80668;
705 color: #fff;
706 }
707
708 .rmp-editor-header-close:hover,
709 .rmp-editor-header-close:focus{
710 color: #fff;
711 }
712
713 #rmp-editor-header .rmp-search-settings {
714 position: absolute;
715 width: 200px;
716 height: 40px;
717 border-radius: 4px;
718 transition-duration: .3s;
719 display: none;
720 left: 60px;
721 background: #383C58;
722 border: none;
723 color: #fff;
724 }
725
726 .rmp-search-results-found {
727 background: #fff34d;
728 padding: 2px;
729 border-radius: 4px;
730 font-size: 12px;
731 line-height: 1;
732 color: #000;
733 margin-left: 10px;
734 }
735
736 .rmp-tab-item .rmp-search-results-found {
737 position: absolute;
738 right: 40px;
739 margin-top: -6px;
740 }
741
742 .rmp-highlight {
743 background: #fff34d;
744 color: #000;
745 border-radius: 5px;
746 padding:0px 2px;
747 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
748 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
749 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
750 }
751
752 .rmp-editor-header-title {
753 display: inline-block;
754 font-family: 'Product Sans';
755 font-size: 16px;
756 font-weight: 500;
757 color: #fff;
758 padding: 0 1rem;
759 text-transform: capitalize;
760 transition: .15s color ease-in-out, .15s background-color ease-in-out, .15s border-color ease-in-out;
761 }
762
763 #rmp-editor-footer {
764 position: absolute;
765 bottom: 0;
766 left: 0;
767 width: 100%;
768 height: 45px;
769 border-top: 1px solid #ddd;
770 background: #fff;
771 display: flex;
772 align-items: center;
773 }
774
775 #rmp-editor-footer .rmp-preview-device-wrapper {
776 position: relative;
777 background: transparent;
778 display: flex;
779 width: max-content;
780 float: right;
781 height: 100%;
782 align-items: center;
783 padding: 0 2rem;
784 }
785
786 .rmp-editor-overlay .collapse-sidebar {
787 position: fixed;
788 width: 48px;
789 height: 48px;
790 bottom: 50%;
791 padding: 10px 0px 10px 15px;
792 color: #eee;
793 outline: 0;
794 left: -20px;
795 line-height: 1;
796 background: #ffffff;
797 border: none;
798 border-radius: 25px;
799 cursor: pointer;
800 box-shadow: 0px 0 3px 3px #0d133d14;
801 }
802
803 .rmp-preview-device-wrapper button:hover,
804 .rmp-preview-device-wrapper button:focus {
805 background: unset;
806 border:unset;
807 outline:unset;
808 box-shadow:unset;
809 }
810
811 .rmp-editor-overlay .collapse-sidebar-arrow:before {
812 display: block;
813 content: "\f141";
814 font: normal 28px/1 dashicons;
815 color: #36BEF7;
816 padding: 0;
817 }
818
819 .rmp-editor-overlay.collapsed .collapse-sidebar-arrow:before{
820 transform: rotate(180deg);
821 }
822
823 #rmp-editor-footer .rmp-preview-device-wrapper .rmp-device-preview {
824 display: flex;
825 align-items: center;
826 justify-content: center;
827 cursor: pointer;
828 background: transparent;
829 border: none;
830 height: 35px;
831 width: 35px;
832 margin-left: 10px;
833 transition: .15s color ease-in-out, .15s background-color ease-in-out, .15s border-color ease-in-out;
834 }
835
836 #rmp-editor-footer .rmp-preview-device-wrapper .rmp-device-preview.active {
837 background: #56606d;
838 border-radius: 4px;
839 }
840
841 #rmp-editor-footer .rmp-device-preview.active svg path,
842 .rmp-device-switcher-holder svg path {
843 fill : #fff;
844 }
845
846 .rmp-tab-item svg path,
847 #rmp-editor-footer svg path,
848 .device-icons-group svg path {
849 fill : #56606D;
850 }
851
852
853 .rmp-editor-footer .rmp-preview-device-wrapper button:before {
854 display: inline-block;
855 -webkit-font-smoothing: antialiased;
856 font: normal 20px/30px "dashicons";
857 vertical-align: top;
858 margin: 3px 0;
859 padding: 4px 8px;
860 color: #656a6f;
861 }
862
863 .rmp-editor-overlay,
864 .rmp-editor-sidebar,
865 .rmp-editor-overlay .collapse-sidebar,
866 .rmp-editor-preview-main {
867 transition-property: left, right, top, bottom, width, margin;
868 transition-duration: 0.2s;
869 }
870
871 .rmp-editor-sidebar {
872 box-sizing: border-box;
873 position: fixed;
874 width: 350px;
875 height: 100%;
876 top: 0;
877 bottom: 0;
878 left: 0;
879 padding: 0;
880 margin: 0;
881 z-index: 999999;
882 background: #fff;
883 overflow: hidden;
884 box-shadow: 0px 0 3px 3px #0d133d14;
885 }
886
887 .rmp-editor-overlay.expanded {
888 margin-left: 350px;
889 }
890
891 .rmp-editor-overlay.collapsed .rmp-editor-sidebar {
892 margin-left: -350px;
893 }
894
895
896 .rmp-editor-overlay {
897 height: 100%;
898 background: #f1f1f1;
899 overflow-y: scroll;
900 }
901
902 .rmp-editor-overlay.expanded .collapse-sidebar {
903 left: 325px;
904 }
905
906 @media screen and (max-width: 1024px) {
907 .rmp-editor-overlay-footer .rmp-preview-device-wrapper {
908 display: none;
909 }
910 }
911
912 .collapsed .rmp-editor-overlay-footer .rmp-preview-device-wrapper button:before {
913 display: none;
914 }
915
916 .rmp-preview-mobile #rmp-preview-wrapper {
917 margin: 100px auto;
918 width: 380px;
919 height: 600px;
920 max-height: 600px;
921 max-width: 480px;
922 }
923
924 .rmp-preview-tablet #rmp-preview-wrapper {
925 margin: 50px auto;
926 width: 740px;
927 height: 800px;
928 max-height: 800px;
929 max-width: 100%;
930 }
931
932 .rmp-editor-preview-main {
933 height: 100%;
934 }
935
936 .rmp-editor-sidebar .rmp-editor-sidebar-content {
937 position: absolute;
938 top: 45px;
939 bottom: 45px;
940 left: 0;
941 right: 0;
942 overflow: auto;
943 }
944
945 .rtl .rmp-editor-overlay.collapsed .collapse-sidebar-arrow:before {
946 transform: none;
947 }
948
949 #rmp-editor-main {
950 color: #333333;
951 height: calc(100% - 100px);
952 overflow-y: auto;
953 overflow-y: overlay;
954 scrollbar-width: none;
955 }
956
957 #rmp-editor-form #rmp-editor-main .rmp-order-item {
958 margin: 5%;
959 width: auto;
960 font-family: Roboto;
961 font-size: 14px;
962 color: #464646;
963 font-style: normal;
964 }
965
966 #rmp-editor-form #rmp-editor-main .rmp-order-item-description{
967 padding: 3% 5%;
968 background: #FFF8D3;
969 color: #E8862B;
970 font-family: Product Sans;
971 font-style: normal;
972 font-weight: normal;
973 font-size: 14px;
974 line-height: 21px;
975 }
976
977 #rmp-editor-form .rmp-editor-pane-parent,
978 #rmp-editor-form .rmp-accordion-container{
979 margin: 0;
980 padding: 0;
981 list-style-type: none;
982 -webkit-touch-callout: none;
983 -webkit-user-select: none;
984 -khtml-user-select: none;
985 -moz-user-select: none;
986 -ms-user-select: none;
987 user-select: none;
988 }
989
990 #rmp-editor-form .rmp-editor-pane-parent .rmp-tab-item {
991 padding: 0 5%;
992 }
993
994
995 #rmp-editor-form .rmp-accordion-container .rmp-accordion-item {
996 margin: 5%;
997 }
998
999 #rmp-editor-form .rmp-accordion-container .rmp-accordion-item .rmp-accordion-title{
1000 padding: 10px;
1001 font-family: 'Product Sans Medium';
1002 }
1003
1004 #rmp-editor-form .rmp-sub-accordion-container .rmp-accordion-item .rmp-accordion-title {
1005 background: #FFFFFF;
1006 border-radius: 4px;
1007 }
1008
1009 #rmp-editor-form .rmp-editor-pane-parent .rmp-tab-item-title,
1010 #rmp-editor-form .rmp-accordion-container .rmp-accordion-title,
1011 #rmp-editor-main .rmp-accordion-container .rmp-theme-title {
1012 position: relative;
1013 line-height: 1.5;
1014 padding: 1rem 0;
1015 color: #2d405a;
1016 display: block;
1017 font-weight: 600;
1018 cursor: pointer;
1019 background: #F5F6FA;
1020 border-radius: 4px;
1021 font-family: 'Product Sans';
1022 font-style: normal;
1023 font-weight: normal;
1024 font-size: 14px;
1025 line-height: 24px;
1026 }
1027
1028 #rmp-editor-form .rmp-accordion-container .rmp-accordion-title::after {
1029 content: "\f543";
1030 color: #2D405A;
1031 font: normal 20px/1 dashicons;
1032 speak: none;
1033 display: inline-block;
1034 -webkit-font-smoothing: antialiased;
1035 -moz-osx-font-smoothing: grayscale;
1036 text-decoration: none;
1037 position: absolute;
1038 right: 1rem;
1039 top: 12px;
1040 }
1041
1042 #rmp-editor-form .rmp-accordion-container .rmp-accordion-title.rmp-item-placeholder::after {
1043 display: none;
1044 }
1045
1046 #rmp-editor-form .rmp-accordion-container .rmp-accordion-title.ui-accordion-header-active::after{
1047 content: "\f460";
1048 }
1049
1050 #rmp-editor-form #rmp-editor-main .rmp-editor-pane-parent .rmp-tab-item {
1051 display: flex;
1052 align-items: center;
1053 }
1054
1055 #rmp-editor-form .rmp-editor-pane-parent .rmp-tab-item .rmp-tab-item-title {
1056 display: inline-block;
1057 background: #fff;
1058 width: 90%;
1059 }
1060
1061 #rmp-editor-form .rmp-editor-pane-parent .rmp-tab-item .rmp-tab-item-icon {
1062 width: 10%;
1063 }
1064
1065 #rmp-editor-form .rmp-accordion-container .rmp-accordion-content,
1066 #rmp-editor-form .rmp-sub-accordion-container .rmp-accordion-content{
1067 background: #F5F6FA;
1068 font-weight: 400;
1069 font-family: 'Product Sans';
1070 font-size: 12px;
1071 border-top: 1px #E7EFF0 solid;
1072 padding: 4% 0;
1073 }
1074
1075 #rmp-editor-form .rmp-sub-accordion-container .rmp-accordion-content{
1076 background:#fff;
1077 }
1078
1079 #rmp-editor-form .rmp-accordions{
1080 display: none;
1081 }
1082
1083 /* #rmp-editor-form .rmp-accordion-container .rmp-accordion-content .rmp-accordion-content {
1084 padding: 0;
1085 } */
1086
1087 #rmp-editor-form .rmp-editor-pane-parent .rmp-tab-item-title:after {
1088 content: "\f345";
1089 color: #56606D;
1090 font: normal 20px/1 dashicons;
1091 speak: none;
1092 display: block;
1093 -webkit-font-smoothing: antialiased;
1094 -moz-osx-font-smoothing: grayscale;
1095 text-decoration: none;
1096 }
1097
1098 #rmp-editor-form .rmp-editor-pane-parent .rmp-tab-item-title:after{
1099 float: right;
1100 }
1101
1102 #rmp-editor-form *:focus {
1103 outline: unset;
1104 box-shadow: unset;
1105 }
1106
1107 .rmp-menu-controls .rmp-input-control-group {
1108 display: flex;
1109 flex-direction: row;
1110 padding: 0 5%;
1111 justify-content: space-between;
1112 }
1113
1114 .rmp-menu-controls .rmp-input-control-group .rmp-input-control-wrapper{
1115 width: 48%;
1116 padding: 0;
1117 }
1118
1119 .rmp-menu-controls .rmp-input-control-wrapper {
1120 position: relative;
1121 display: flex;
1122 flex-direction: column;
1123 margin-bottom: 15px;
1124 padding: 0 5%;
1125 }
1126
1127 .rmp-menu-controls .rmp-input-control-wrapper.rmp-input-control-switcher {
1128 flex-direction: row;
1129 justify-content: space-between;
1130 }
1131
1132 .rmp-input-control-label{
1133 font-weight: normal;
1134 font-family: 'Product Sans';
1135 font-style: normal;
1136 font-weight: normal;
1137 font-size: 12px;
1138 line-height: 16px;
1139 color: #56606D;
1140 display: inline-block;
1141 margin-bottom: 0.5rem;
1142 }
1143
1144 .rmp-menu-controls .rmp-input-control-wrapper .rmp-input-control {
1145 display: flex;
1146 }
1147
1148 .rmp-menu-controls .rmp-input-control-wrapper .rmp-input-control input[type="text"],
1149 .rmp-menu-controls .rmp-input-control-wrapper .rmp-input-control input[type="number"],
1150 .rmp-menu-controls .rmp-input-control-wrapper .rmp-input-control select {
1151 border-radius: 3px;
1152 height: 38px;
1153 width: 140px;
1154 padding: 0.2rem 0.5rem;
1155 border: 1px solid #E7EFF0;
1156 box-sizing: border-box;
1157 border-radius: 4px;
1158 font-family: 'Product Sans';
1159 font-style: normal;
1160 font-weight: 500;
1161 font-size: 12px;
1162 line-height: 15px;
1163 margin: 0;
1164 max-width: 100%;
1165 }
1166
1167 #rmp-editor-form .rmp-input-control-wrapper .button {
1168 background: #36bef7;
1169 border-color: #36bef7;
1170 border-radius: 4px;
1171 }
1172
1173 #rmp-editor-form .rmp-input-control-wrapper.full-size .button {
1174 width: 100%
1175 }
1176
1177 .rmp-menu-controls .rmp-input-control-wrapper .rmp-input-control input[type="number"]{
1178 width: 100%;
1179 }
1180
1181 /* .rmp-menu-controls .rmp-input-control-wrapper.full-size.multi-device .rmp-input-control input[type="number"] {
1182 max-width: 70%;
1183 } */
1184
1185 .rmp-menu-controls .rmp-input-control-wrapper.full-size .rmp-input-control input[type="number"]{
1186 width: calc( 100% - 36px);
1187 max-width: 100%;
1188 }
1189
1190 .rmp-menu-controls .full-size .rmp-input-control input[type="text"],
1191 .rmp-menu-controls .full-size .rmp-input-control select,
1192 .rmp-order-item .full-size .rmp-input-control input[type="text"] {
1193 min-width: 100%;
1194 }
1195
1196 .rmp-menu-controls .full-size .rmp-input-control select.is-unit {
1197 max-width: 36px;
1198 min-width: 36px;
1199 }
1200
1201 .rmp-menu-controls .rmp-input-control-wrapper .rmp-input-group-control {
1202 display: flex;
1203 align-items: flex-end;
1204 }
1205
1206 .rmp-menu-controls .rmp-input-control-wrapper .rmp-input-control .rmp-group-input-wrapper {
1207 min-width: calc(100% / 5);
1208 font-size: 12px;
1209 text-align: center;
1210 font-weight: normal;
1211 font-family: 'Product Sans';
1212 text-transform: capitalize;
1213 }
1214
1215 .rmp-menu-controls .rmp-input-control-wrapper .rmp-input-control .rmp-group-input-wrapper input[type="text"] {
1216 max-width: 100%;
1217 }
1218
1219 .rmp-menu-controls .rmp-input-control button.rmp-group-input-linked.is-linked {
1220 padding: 0;
1221 font-size: 12px;
1222 border: solid 1px #36bef7;
1223 background: #36bef7;
1224 color: white;
1225 cursor: pointer;
1226 }
1227
1228 .rmp-menu-controls .rmp-input-control button.rmp-group-input-linked{
1229 border: solid 1px #e7eff0;
1230 background: #2d405a;
1231 color: #ffffff;
1232 width: 100%;
1233 height: 38px;
1234 }
1235
1236 #rmp-menu-page-selector {
1237 display: none;
1238 }
1239
1240 .rmp-menu-controls .selectize-input{
1241 border: 1px solid #E7EFF0;
1242 -webkit-box-shadow: unset;
1243 box-shadow: unset;
1244 }
1245
1246 .rmp-menu-controls .selectize-control{
1247 width: 100%
1248 }
1249
1250 .selectize-control.multi .selectize-input > div,
1251 .selectize-control.multi .selectize-input > div.active {
1252 font-family: 'Product Sans Medium';
1253 font-style: normal;
1254 font-weight: 500;
1255 font-size: 12px;
1256 line-height: 24px;
1257 color: #FFFFFF;
1258 padding: 0 3rem 0 1rem;
1259 background: #99A6B9;
1260 border-radius: 4px;
1261 width: max-content;
1262 margin: 0px 20px 10px 0;
1263 }
1264
1265 .rmp-input-control .selectize-control.plugin-remove_button [data-value] .remove{
1266 background: #E7EFF0;
1267 color: #2d405a;
1268 height: 24px;
1269 width: 24px;
1270 padding: 0;
1271 right: -15px;
1272 }
1273
1274 #rmp-editor-wrapper .rmp-accordion-container .rmp-accordion-title .ui-accordion-header-icon{
1275 display: inline-block;
1276 text-indent: 0;
1277 position: initial;
1278 }
1279
1280 .post-type-rmp_menu .ui-tabs .ui-tabs-nav li.ui-tabs-tab {
1281 float: none;
1282 position: inherit;
1283 }
1284
1285 #tab-container .rmp-order-item-title .ui-accordion-header-icon,
1286 #tab-header-bar .rmp-order-item-title .ui-accordion-header-icon {
1287 width: 20px;
1288 cursor: move;
1289 }
1290
1291 #tab-container .rmp-order-item-title .ui-accordion-header-icon::before,
1292 #tab-header-bar .rmp-order-item-title .ui-accordion-header-icon::before {
1293 content: "\e068";
1294 color: #99A6B9;
1295 font-size: 1rem;
1296 position: absolute;
1297 top: 1rem;
1298 display: inline-block;
1299 font-family: 'Glyphicons Halflings';
1300 font-style: normal;
1301 font-weight: 400;
1302 line-height: 1;
1303 -webkit-font-smoothing: antialiased;
1304 cursor: move;
1305 }
1306
1307 .rmp-tooltip-icon {
1308 width: 1.5rem;
1309 color: #99A6B9;
1310 position: relative;
1311 font-size: 1rem;
1312 line-height: 16px;
1313 height: 1rem;
1314 }
1315
1316 .rmp-accordion-title .rmp-tooltip-icon{
1317 line-height: 24px;
1318 }
1319
1320 .rmp-tooltip-icon .rmp-tooltip-content {
1321 background: #0d133d;
1322 color: #fff;
1323 position: absolute;
1324 min-width: 140px;
1325 max-width: 200px;
1326 display: none;
1327 padding: 8px;
1328 box-shadow: 0 0 2px #0d133d;
1329 z-index: 999;
1330 text-align: center;
1331 right: -70px;
1332 bottom: 25px;
1333 font-family: 'Product Sans';
1334 font-style: normal;
1335 font-weight: normal;
1336 font-size: 12px;
1337 line-height: 16px;
1338 border-radius: 5px;
1339 }
1340
1341 .rmp-tooltip-icon .rmp-tooltip-content a{
1342 color: #f80668;
1343 }
1344
1345 .rmp-tooltip-icon .rmp-tooltip-content:before {
1346 content: '';
1347 height: 5px;
1348 width: 5px;
1349 border: 8px solid #b7414100;
1350 border-bottom-color: #0d133d;
1351 position: absolute;
1352 transform: rotate(180deg);
1353 bottom: -20px;
1354 left: 40%;
1355 }
1356
1357 .rmp-h-separator {
1358 border-bottom: solid 1px #E7EFF0;
1359 width: 100%;
1360 margin-bottom: 15px;
1361 }
1362
1363 .device-icons-group {
1364 width: 100%;
1365 text-align: center;
1366 display: flex;
1367 justify-content: flex-start;
1368 }
1369
1370 .device-icons-group .device-icon {
1371 display: inline;
1372 width: 60px;
1373 position: relative;
1374 color: #717171;
1375 margin-right: 15px;
1376 }
1377
1378 .device-icons-group .device-icon .corner-icon {
1379 position: absolute;
1380 top: -4px;
1381 font-size: 18px;
1382 right: -4px;
1383 color: #36bef7;
1384 display:none;
1385 background: #fff;
1386 border-radius: 50%;
1387 }
1388
1389 .device-icons-group .device-icon .device {
1390 top: 12px;
1391 right: 0px;
1392 font-size: 30px;
1393 position: relative;
1394 line-height: normal;
1395 }
1396
1397 .device-icons-group .device-icon .device svg{
1398 width: 24px;
1399 height: 24px;
1400 }
1401
1402 .device-icons-group .device-icon .device-title{
1403 margin-top: 7px;
1404 display: block !important;
1405 }
1406
1407 .device-icons-group .device-icon label {
1408 height: 60px;
1409 display: block;
1410 margin: 0;
1411 color: #2d405a;
1412 overflow: hidden;
1413 border: 1px solid #E7EFF0;
1414 box-sizing: border-box;
1415 border-radius: 4px;
1416 background: #fff;
1417 }
1418
1419 .device-icons-group .device-icon .checkbox {
1420 -webkit-appearance: none;
1421 -moz-appearance: none;
1422 appearance: none;
1423 visibility: hidden;
1424 display: none;
1425 }
1426
1427 .device-icons-group .device-icon .checkbox:checked + label {
1428 background: #FFFFFF;
1429 border: 1px solid #36BEF7;
1430 box-sizing: border-box;
1431 border-radius: 4px;
1432 }
1433
1434 .device-icons-group .device-icon .checkbox:checked + label .corner-icon{
1435 display:block;
1436 }
1437
1438 #tab-container .item-controls,
1439 #tab-header-bar .item-controls{
1440 font-size: 12px;
1441 position: relative;
1442 right: 2rem;
1443 float: right;
1444 }
1445
1446 #rmp-editor-main .item-controls {
1447 top:unset;
1448 }
1449
1450 .rmp-menu-controls .rmp-input-control-wrapper select.is-unit,
1451 .rmp-menu-controls .rmp-input-control-wrapper .unit-px,
1452 .rmp-menu-controls .unit-ms,
1453 .rmp-menu-controls .unit-s {
1454 width: 2.25rem;
1455 margin-left: -5px;
1456 display: inline-block;
1457 font-family: 'Product Sans';
1458 font-style: normal;
1459 font-weight: normal;
1460 font-size: 12px;
1461 line-height: 24px;
1462 text-align: center;
1463 color: #56606D;
1464 background: #E7EFF0;
1465 border-radius: 0px 4px 4px 0px;
1466 }
1467
1468 .rmp-menu-controls .rmp-input-control-wrapper .unit-px,
1469 .rmp-menu-controls .unit-ms,
1470 .rmp-menu-controls .unit-s{
1471 padding: 5px 0;
1472 border-top-right-radius: 4px;
1473 border-bottom-right-radius: 4px;
1474 }
1475
1476 .rmp-input-control-group .unit-s {
1477 margin-left: -36px;
1478 }
1479
1480 .rmp-input-control-group .rmp-input-control-wrapper:nth-child(2) .wp-picker-holder {
1481 right: 5px;
1482 }
1483
1484 .wp-picker-holder{
1485 position: absolute;
1486 z-index: 999;
1487 margin-top: 38px;
1488 }
1489
1490 .wp-picker-container .iris-picker {
1491 margin-top: 0;
1492 border: solid 1px #d5dadf;
1493 }
1494
1495 .rmp-editor-active .wp-picker-container,
1496 #rmp-editor-form .wp-picker-container {
1497 display: flex;
1498 }
1499
1500 .rmp-editor-active .rmp-input-control-wrapper .wp-picker-container .wp-color-result.button,
1501 #rmp-editor-form .rmp-input-control-wrapper .wp-picker-container .wp-color-result.button {
1502 border: solid 1px #e7eff0;
1503 height: 38px;
1504 padding: 0 0 0 36px;
1505 margin: 0;
1506 background: unset;
1507 }
1508
1509 .rmp-editor-active .wp-picker-container .wp-color-result.button .color-alpha{
1510 border-right: solid 1PX #e7eff0;
1511 }
1512
1513 .rmp-input-control .rmp-color-input-wrap.hidden {
1514 display: inline-block !important;
1515 }
1516
1517
1518 .rmp-menu-controls .rmp-input-control-wrapper .wp-picker-container input[type="text"].wp-color-picker {
1519 width: 100%;
1520 max-width: 100%;
1521 font-family: 'Product Sans';
1522 font-style: normal;
1523 font-weight: normal;
1524 font-size: 12px;
1525 line-height: 16px;
1526 color: #99A6B9;
1527 border-top-left-radius: unset;
1528 border-bottom-left-radius: unset;
1529 margin-left: -2px;
1530 }
1531
1532 .rmp-editor-active .rmp-input-control .wp-picker-container .wp-picker-clear{
1533 height: 30px;
1534 border: solid 1px #36BEF7;
1535 margin-left: -4px;
1536 border-bottom-left-radius: unset;
1537 border-top-left-radius: unset;
1538 background: #36BEF7;
1539 color: #ffff;
1540 }
1541
1542 .wp-picker-container .wp-picker-clear:hover{
1543 background:#36BEF7;
1544 border-color: #36BEF7;
1545 color: #fff;
1546 }
1547
1548 #rmp-menu-additional-content,
1549 .rmp-input-control-wrapper textarea,
1550 #rmp-menu-header-html-content {
1551 width: 100%;
1552 padding: 5px;
1553 font-family: 'Product Sans';
1554 font-size: 12px;
1555 max-height: 120px;
1556 border:solid 1px #ddd;
1557 min-height: 100px;
1558 }
1559
1560 .rmp-editor-active .media-modal {
1561 z-index: 99999999;
1562 }
1563
1564 .rmp-image-picker-container,
1565 .rmp-icon-picker-container {
1566 padding: 8%;
1567 background: #FFFFFF;
1568 border-radius: 4px;
1569 }
1570
1571 #rmp-button-title-image,
1572 #rmp-button-background-image,
1573 .rmp-image-picker,
1574 .rmp-icon-picker {
1575 width: 100%;
1576 height: 90px;
1577 cursor: pointer;
1578 background-size: 100%;
1579 position: relative;
1580 overflow: hidden;
1581 background: transparent;
1582 border: 1px dashed #C9DBDD;
1583 box-sizing: border-box;
1584 border-radius: 4px;
1585 background-position: center;
1586 background-repeat: no-repeat;
1587 background-size: cover;
1588 }
1589
1590 .rmp-image-picker .rmp-image-picker-trash,
1591 .rmp-icon-picker .rmp-icon-picker-trash,
1592 .rmp-icon-picker .rmp-font-icon {
1593 display: flex;
1594 justify-content: center;
1595 align-items: center;
1596 width: 100%;
1597 height: 100%;
1598 color: #56606d;
1599 font-size: 24px;
1600 z-index: 99;
1601 }
1602
1603 .rmp-icon-picker .rmp-font-icon {
1604 font-size: 80px;
1605 pointer-events: none;
1606 color: #32373c;
1607 }
1608
1609 .rmp-image-picker .rmp-image-picker-trash,
1610 .rmp-icon-picker .rmp-icon-picker-trash {
1611 margin: 0.4rem;
1612 background: #f5f6fa;
1613 width: 2rem;
1614 height: 2rem;
1615 position: absolute;
1616 right: 0;
1617 top: 0;
1618 border-radius: 4px;
1619 font-size: 16px;
1620 visibility: hidden;
1621 z-index: 999;
1622 pointer-events: initial;
1623 cursor: pointer;
1624 }
1625
1626 .post-type-rmp_menu #rmp-editor-wrapper .rmp-image-picker .rmp-image-picker-placeholder,
1627 .post-type-rmp_menu #rmp-editor-wrapper .rmp-icon-picker .rmp-icon-picker-placeholder {
1628 width: 5rem;
1629 height: 2.5rem;
1630 padding: 0;
1631 position: absolute;
1632 transition: all 0.3s;
1633 pointer-events: none;
1634 z-index: 0;
1635 border: unset;
1636 font-family: 'Product Sans';
1637 font-style: normal;
1638 font-weight: normal;
1639 font-size: 12px;
1640 line-height: 15px;
1641 text-align: center;
1642 color: #99A6B9;
1643 top: 50%;
1644 left: 50%;
1645 transform: translate(-50%,-50%);
1646 display: inline;
1647 }
1648
1649 .post-type-rmp_menu #rmp-editor-wrapper .rmp-image-picker[style*="background-image"] > .rmp-image-picker-placeholder,
1650 .post-type-rmp_menu #rmp-editor-wrapper .rmp-icon-picker[data-icon="true"] > .rmp-icon-picker-placeholder {
1651 display: none;
1652 }
1653
1654 .rmp-image-picker .rmp-image-picker-placeholder label,
1655 .rmp-icon-picker .rmp-icon-picker-placeholder label {
1656 display: block;
1657 }
1658
1659 .rmp-image-picker:hover > .rmp-image-picker-trash,
1660 .rmp-icon-picker:hover > .rmp-icon-picker-trash {
1661 visibility: visible;
1662 }
1663
1664 /* Device Switcher Holder */
1665
1666 #rmp-editor-form .rmp-device-switcher-holder {
1667 margin-right: 8px;
1668 position: relative;
1669 background: #36bef7;
1670 border-radius: 4px;
1671 }
1672
1673 #rmp-editor-form .rmp-device-switcher {
1674 -webkit-transition: 0.2s;
1675 -o-transition: 0.2s;
1676 transition: 0.2s;
1677 position: relative;
1678 width: 38px;
1679 height: 38px;
1680 }
1681
1682 #rmp-editor-form .rmp-device-switcher li {
1683 display: none;
1684 cursor: pointer;
1685 background: #36bef7;
1686 }
1687
1688 #rmp-editor-form .rmp-device-switcher li:first-child {
1689 display: flex;
1690 border-radius: 4px;
1691 height: 38px;
1692 align-items: center;
1693 justify-content: center;
1694 }
1695
1696 #rmp-editor-form .rmp-device-switcher.open {
1697 box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
1698 z-index: 999;
1699 display: flex;
1700 justify-content: flex-start;
1701 }
1702
1703 #rmp-editor-form .rmp-device-switcher.open li {
1704 display: -ms-flexbox;
1705 display: flex;
1706 -webkit-box-align: center;
1707 -ms-flex-align: center;
1708 align-items: center;
1709 -webkit-box-pack: center;
1710 -ms-flex-pack: center;
1711 justify-content: center;
1712 position: relative;
1713 cursor: pointer;
1714 -webkit-transition: 0.2s;
1715 -o-transition: 0.2s;
1716 transition: 0.2s;
1717 border-radius:unset;
1718 min-width: 38px;
1719 }
1720
1721 #rmp-editor-form .rmp-menu-controls .rmp-input-control-wrapper select.rmp-device-switcher option {
1722 font-size: 20px;
1723 }
1724
1725 #rmp-editor-main .rmp-saved-themes {
1726 padding: 5px 0;
1727 }
1728
1729 #rmp-editor-main .rmp-accordion-container .rmp-theme-title {
1730 font-family: Product Sans Medium;
1731 font-style: normal;
1732 font-weight: 500;
1733 font-size: 14px;
1734 line-height: 24px;
1735 color: #2D405A;
1736 margin: 2% 5%;
1737 border: solid 1px #eeeeee;
1738 cursor: auto;
1739 background: #ffffff !important;
1740 padding: 3% 5%;
1741 }
1742
1743 #rmp-editor-main .rmp-accordion-container .rmp-accordion-sub-heading {
1744 margin-bottom: 10px;
1745 font-family: 'Product Sans';
1746 font-style: normal;
1747 font-weight: normal;
1748 font-size: 14px;
1749 line-height: 14px;
1750 color: #2d405a;
1751 padding: 0 5%;
1752 text-transform: capitalize;
1753 }
1754
1755 button.menu-save {
1756 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
1757 }
1758
1759 .shortcode_place code{
1760 vertical-align: sub;
1761 padding: 5px 10px;
1762 border: solid 1px #ccd0d4;
1763 background: #72777c33;
1764 }
1765
1766
1767 .theme_filters{
1768 margin: 20px 0;
1769 display: flex;
1770 justify-content: space-between;
1771 align-items: center;
1772 }
1773
1774
1775 .nav-item-label{
1776 padding: 10px 15px;
1777 display: flex;
1778 align-items: center;
1779 line-height: 1.3;
1780 }
1781
1782 .rmp-item-card {
1783 display: block;
1784 background: white;
1785 margin-bottom: 15px;
1786 margin-right: 15px;
1787 max-width: 184px;
1788 position: relative;
1789 cursor: pointer;
1790 border: solid 1px #eee;
1791 overflow: hidden;
1792 box-shadow: 0 1px 3px rgb(0 0 0 / 0%), 0 1px 2px rgb(0 0 0 / 10%);
1793 }
1794
1795 .rmp-theme-page .rmp-item-card {
1796 width: 180px;
1797 max-width: 100%;
1798 border: solid 1px #ccc;
1799 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
1800 box-sizing: border-box;
1801 }
1802
1803 .item-selected{
1804 border:5px solid red;
1805 }
1806
1807 .rmp-item-card_image{
1808 padding: 0;
1809 margin: 0;
1810 line-height: inherit;
1811 }
1812
1813 .rmp-item-card_image img {
1814 width: 100%;
1815 height: 210px;
1816 }
1817
1818 .rmp-item-card_contents{
1819 padding: 5px 10px;
1820 font-weight: 600;
1821 font-size: 12px;
1822 display: inline-flex;
1823 transition: all .5s;
1824 width: -webkit-fill-available;
1825 }
1826
1827 .rmp-item-card_contents h4{
1828 margin: 0;
1829 font-size: 14px;
1830 color: #191e23;
1831 font-family: 'Product Sans Medium';
1832 font-weight: normal;
1833 text-transform: capitalize;
1834 }
1835
1836
1837 .rmp-item-card_action {
1838 padding:10px;
1839 position: relative;
1840 bottom: 0;
1841 z-index: 9;
1842 display: flex;
1843 flex-direction: column;
1844 }
1845
1846 .rmp-item-card_action .button {
1847 width: 100%;
1848 display: inline-block;
1849 text-decoration: none;
1850 font-size: 12px;
1851 line-height: normal;
1852 margin: 0 0 10px 0;
1853 text-align: center;
1854 padding: 10px;
1855 cursor: pointer;
1856 border-width: 1px;
1857 border-style: solid;
1858 -webkit-appearance: none;
1859 border-radius: 4px;
1860 white-space: nowrap;
1861 box-sizing: border-box;
1862 color: #0085ba;
1863 border-color: #007cba;
1864 background: #fff;
1865 font-family: 'Product Sans Medium';
1866 }
1867
1868 #rmp-menu-library-import {
1869 margin: 40px auto;
1870 display: flex;
1871 justify-content: center;
1872 text-align: center;
1873 }
1874
1875 #rmp-menu-library-import.hide{
1876 display: none;
1877 }
1878
1879 #rmp-menu-library-import-form {
1880 border: 2px dashed #d5dadf;
1881 background: #f9f9f9;
1882 width: 50%;
1883 max-width: 480px;
1884 padding: 2%;
1885 min-width: 420px;
1886 cursor: pointer;
1887 position: relative;
1888 }
1889
1890 #rmp-menu-library-import-form .upload-button {
1891 pointer-events: none;
1892 }
1893
1894 #rmp-menu-library-import-form .cancel{
1895 position: absolute;
1896 top: 10px;
1897 right: 10px;
1898 }
1899
1900 .rmp-theme-page {
1901 margin: 2% 0;
1902 }
1903
1904 .notice-responsive-menu-next {
1905 padding: 10px 35px 10px 10px;
1906 background: #fff;
1907 border: 1px solid #14a4fa;
1908 border-left-width: 4px;
1909 box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
1910 margin: 5px 0 15px;
1911 position: relative;
1912 }
1913 #wpfooter .notice-responsive-menu-next p, #wpfooter .notice-responsive-menu-next h3{
1914 margin-bottom: 10px;
1915 }
1916
1917 .notice-responsive-menu-next .rm-btn-link-seprate{
1918 margin-left: 10px;
1919 margin-right: 10px;
1920 }
1921
1922 .notice-responsive-menu-next .rm-btn-link {
1923 text-decoration: none;
1924 }
1925 .post-type-rmp_menu #wpfooter{
1926 position: relative;
1927 }
1928
1929 .notice-responsive-menu-next .notice-dismiss{
1930 text-decoration: none;
1931 }
1932 .rmp-theme-page .pagination {
1933 display: inline-flex;
1934 }
1935
1936 #rmp-upload-new-theme {
1937 padding: 4px 8px;
1938 position: relative;
1939 top: -3px;
1940 text-decoration: none;
1941 border: 1px solid #0071a1;
1942 border-radius: 2px;
1943 text-shadow: none;
1944 font-weight: 600;
1945 font-size: 13px;
1946 line-height: normal;
1947 color: #0071a1;
1948 background: #f3f5f6;
1949 cursor: pointer;
1950 }
1951
1952 #rmp-menu-library-import-form .upload-button {
1953 background: #0085ba;
1954 color: #fff;
1955 text-transform: uppercase;
1956 margin-top: 20px;
1957 padding: 8px 28px;
1958 display: inline-block;
1959 border-color: currentColor;
1960 }
1961
1962 #rmp-menu-library-import-form-input {
1963 display: none;
1964 }
1965
1966 .rmp-menu-library-blank-icon {
1967 font-size: 70px;
1968 display: contents;
1969 margin-bottom: 10px;
1970 color: #f80668;
1971 }
1972
1973 .rmp-menu-library-title {
1974 font-size: 18px;
1975 margin: 10px 0;
1976 font-weight: normal;
1977 }
1978
1979 #rmp-menu-library-import-form .dz-error-mark{
1980 display: none;
1981 }
1982
1983 #rmp-menu-library-import-form .dz-success-mark svg{
1984 width: 24px;
1985 }
1986
1987 #rmp-menu-library-import-form .dz-success-mark svg path {
1988 fill: currentColor;
1989 color: #1ac538;
1990 }
1991
1992 .rmp-footer-sub-menu-wrapper {
1993 position: absolute;
1994 bottom: 100%;
1995 width: -webkit-fill-available;
1996 background: #56606d;
1997 padding: 1rem;
1998 -webkit-box-shadow: -2px -5px 8px rgba(0, 0, 0, 0.1);
1999 box-shadow: -2px -5px 8px rgba(0, 0, 0, 0.1);
2000 cursor: default;
2001 transition: all 0.3s;
2002 visibility: hidden;
2003 opacity: 0;
2004 -webkit-touch-callout: none;
2005 -webkit-user-select: none;
2006 -khtml-user-select: none;
2007 -moz-user-select: none;
2008 -ms-user-select: none;
2009 user-select: none;
2010 transform: translateY(-10px);
2011 }
2012
2013 .rmp-footer-sub-menu-wrapper.open {
2014 opacity: 1;
2015 transform: translateY(0px);
2016 transition: all 0.3s;
2017 z-index: 999;
2018 visibility: visible;
2019 }
2020
2021 .rmp-footer-sub-menu {
2022 overflow: hidden;
2023 border-radius: 10px;
2024 }
2025
2026 .rmp-footer-sub-menu a{
2027 padding: 0.8rem;
2028 background: #f5f6fa;
2029 border-bottom: solid 2px #56606d;
2030 display: block;
2031 color: #56606d;
2032 font-weight: 600;
2033 font-size: 14px;
2034 text-align: left;
2035 cursor: pointer;
2036 text-transform: capitalize;
2037 }
2038
2039 #rmp-menu-save-theme-wizard .rmp-dialog-wrap {
2040 width: 640px;
2041 margin: 0 auto;
2042 padding: 3% 0 4%;
2043 }
2044
2045 #rmp-menu-save-theme-wizard .rmp-dialog-wrap .close{
2046 position: absolute;
2047 right: 20px;
2048 top: 20px;
2049 background: #fff;
2050 border-radius: 50%;
2051 padding: 10px;
2052 color: #56606d;
2053 border: solid 1px #0d133d;
2054 cursor: pointer;
2055 }
2056
2057 #rmp-new-menu-wizard .rmp-dialog-wrap.wp-clearfix.rmp-menu-empty {
2058 max-width: 470px;
2059 margin-left: auto;
2060 margin-right: auto;
2061 top: 200px;
2062 }
2063
2064 .rmp-menu-empty h2{
2065 font-weight: 500;
2066 font-size: 19px;
2067 line-height: 22px;
2068 letter-spacing: 0.05em;
2069 color: #000000;
2070 margin-bottom: 10px;
2071 }
2072
2073 .rmp-dark-mode .rmp-menu-empty h2{
2074 color: #fff;
2075 }
2076
2077 .rmp-menu-empty .rmp-btn-group {
2078 margin-top: 40px;
2079 display: flex;
2080 flex-wrap: wrap;
2081 }
2082
2083 .rmp-menu-empty p{
2084 font-weight: 500;
2085 font-size: 14px;
2086 line-height: 22px;
2087 color: #7B8795;
2088 }
2089
2090 .rmp-dark-mode .rmp-menu-empty p{
2091 color: #c8c8c8;
2092 }
2093
2094 #rmp-new-menu-wizard .rmp-dialog-wrap.rmp-menu-empty .rmp-dialog-contents {
2095 min-height: auto;
2096 padding: 0 30px;
2097 }
2098
2099 .rmp-menu-empty .rmp-btn-primary ,
2100 .rmp-menu-empty .rmp-btn-secondary {
2101 background: #62BCF2;
2102 border-radius: 5px;
2103 border: none;
2104 font-weight: 600;
2105 font-size: 13px;
2106 line-height: 16px;
2107 padding: 10px 20px;
2108 color: #fff;
2109 margin-bottom: 15px;
2110 margin-right: 15px;
2111 }
2112
2113 .rmp-menu-empty .rmp-btn-secondary {
2114 background: #DBE3EB;
2115 color: #121C24;
2116 padding: 10px 35px;
2117 }
2118
2119 #rmp-menu-save-theme-wizard .rmp-dialog-contents {
2120 display: flex;
2121 justify-content: center;
2122 align-items: center;
2123 flex-direction: column;
2124 }
2125
2126 #rmp-editor-main .theme-thumbnail{
2127 width: 90%;
2128 margin: 5%;
2129 }
2130
2131 .rmp-save-menu-input {
2132 display: inline-flex;
2133 margin-top: 20px;
2134 }
2135
2136 #rmp-menu-save-theme-wizard #rmp-save-theme {
2137 background: #0d133d;
2138 color: white;
2139 border: solid 1px #0d133d;
2140 border-radius: unset;
2141 font-size: 14px;
2142 }
2143
2144
2145 #rmp-menu-save-theme-wizard #rmp-save-theme-name {
2146 width: 300px;
2147 border: 2px solid #0d133d;
2148 }
2149
2150 .rmp-theme-page .rmp-item-card_image img{
2151 width: 100%;
2152 max-height: 240px;
2153 }
2154
2155 .rmp-setting-page #rmp-setting-tabs .nav-tab-wrapper{
2156 border-bottom: 1px solid #ccc;
2157 margin: 0;
2158 padding-top: 10px;
2159 padding-bottom: 0;
2160 line-height: inherit;
2161 }
2162
2163 .rmp-setting-page #rmp-custom-css {
2164 min-height: 420px;
2165 max-width: 820px;
2166 margin-top: 20px;
2167 min-width: 300px;
2168 }
2169
2170 .rmp-setting-page .form-table td fieldset label {
2171 margin: 0 !important;
2172 }
2173
2174 .rmp-import-file-container {
2175 padding: 10px;
2176 background: #fff;
2177 max-width: fit-content;
2178 border: solid 1px #cccccc;
2179 margin-bottom: 1rem;
2180 }
2181
2182 .rmp-menu-item-icon-container {
2183 position: relative;
2184 }
2185
2186 .delete-menu-item-icon {
2187 cursor: pointer;
2188 position: absolute;
2189 right: 20px;
2190 top: 0;
2191 }
2192
2193 .rmp-menu-item-icon-container .rmp-icon-picker-container{
2194 padding: 0;
2195 margin-left: 8px;
2196 }
2197
2198 .rmp-menu-item-icon-container .rmp-icon-picker {
2199 height: 38px;
2200 border: 1px solid #e7eff0;
2201 }
2202
2203 .rmp-menu-item-icon-container .rmp-icon-picker .rmp-font-icon{
2204 font-size: 2rem;
2205 }
2206
2207 .rmp-menu-controls .rmp-menu-item-icon-container .rmp-input-control-group{
2208 align-items: flex-end;
2209 }
2210
2211 .rmp-menu-item-icon-container .rmp-icon-picker .rmp-icon-picker-placeholder{
2212 display: flex;
2213 width: 100%;
2214 justify-content: space-evenly;
2215 transform: translate(-50%,-25%);
2216 }
2217
2218 .rmp-menu-item-icon-container .rmp-icon-picker[data-icon="true"] > .rmp-icon-picker-placeholder {
2219 display: none;
2220 }
2221
2222 .rmp-menu-item-icon-container .rmp-icon-picker .rmp-icon-picker-trash {
2223 margin: 2px;
2224 }
2225
2226 @keyframes shake {
2227 0% { transform: translate(1px, 1px) rotate(0deg); }
2228 10% { transform: translate(-1px, -2px) rotate(-1deg); }
2229 20% { transform: translate(-3px, 0px) rotate(1deg); }
2230 30% { transform: translate(3px, 2px) rotate(0deg); }
2231 40% { transform: translate(1px, -1px) rotate(1deg); }
2232 50% { transform: translate(-1px, 2px) rotate(-1deg); }
2233 60% { transform: translate(-3px, 1px) rotate(0deg); }
2234 70% { transform: translate(3px, 1px) rotate(-1deg); }
2235 80% { transform: translate(-1px, -1px) rotate(1deg); }
2236 90% { transform: translate(1px, 2px) rotate(0deg); }
2237 100% { transform: translate(1px, -2px) rotate(-1deg); }
2238 }
2239
2240 #rmp-menu-update-notification{
2241 text-align: center;
2242 display: flex;
2243 justify-content: space-between;
2244 }
2245
2246 #rmp-menu-update-notification:hover {
2247 animation: shake 0.5s;
2248 animation-iteration-count: 2;
2249 }
2250
2251 #rmp-menu-update-notification a{
2252 color: #36bef7;
2253 font-family: Product Sans Medium;
2254 }
2255
2256 /* These below styles on admin notice */
2257 div.notice-responsive-menu {
2258 display: flex;
2259 align-items: center;
2260 border-left-color: #15a4fa;
2261 padding: 10px;
2262 }
2263
2264 div.notice-responsive-menu .notice-responsive-menu-logo {
2265 margin-right: 10px;
2266 }
2267
2268 div.notice-responsive-menu .notice-responsive-menu-message h4,
2269 div.notice-responsive-menu .notice-responsive-menu-message p {
2270 margin: 0;
2271 }
2272
2273 div.notice-responsive-menu .notice-responsive-menu-action {
2274 position: absolute;
2275 right: 40px;
2276 }
2277
2278 @media screen and (max-width: 1150px) {
2279 div.notice-responsive-menu {
2280 flex-direction: column;
2281 align-items: flex-start;
2282 }
2283 div.notice-responsive-menu .notice-responsive-menu-action {
2284 margin-top: 20px;
2285 }
2286 }
2287
2288 div.notice-responsive-menu .notice-responsive-menu-action a {
2289 text-decoration: none;
2290 color: #fff;
2291 padding: 8px 15px;
2292 background: #36bef7;
2293 font-size: 15px;
2294 font-weight: 700;
2295 border:1px solid #1d9cd2;
2296 }
2297
2298 div.notice-responsive-menu .notice-responsive-menu-action a:hover {
2299 opacity: 0.8;
2300 }
2301
2302
2303 /* Free version related */
2304
2305 .post-type-rmp_menu .upgrade-tooltip,
2306 #rmp-editor-wrapper .upgrade-tooltip {
2307 background: #f80668;
2308 padding: 4px 0.5rem;
2309 color: #fff;
2310 font-size: 10px;
2311 border-radius: 3px;
2312 position: relative;
2313 margin-left: 10px;
2314 font-weight: 600;
2315 text-decoration: none;
2316 text-transform: uppercase;
2317 line-height: normal;
2318 }
2319
2320 #rmp-editor-wrapper.rmp-editor-overlay .rmp-input-control .upgrade-tooltip {
2321 position: absolute;
2322 top: -30px;
2323 right: 5%;
2324
2325 }
2326
2327 .rmp-editor-overlay .rmp-input-control-label .upgrade-tooltip {
2328 position: absolute;
2329 top: -2px;
2330 }
2331
2332 .rmp-editor-overlay .rmp-input-control-label .upgrade-tooltip,
2333 .rmp-editor-overlay .rmp-input-control .upgrade-tooltip {
2334 display: none;
2335 }
2336
2337 .rmp-editor-overlay .rmp-input-control-wrapper:hover > .rmp-input-control-label .upgrade-tooltip,
2338 .rmp-editor-overlay .rmp-input-control-wrapper:hover > .rmp-input-control .upgrade-tooltip {
2339 display: inline-block;
2340 }
2341
2342 .rmp-input-control .upgrade-tooltip::before{
2343 left: 10px;
2344 bottom: -18px;
2345 transform: rotate(180deg);
2346 }
2347
2348 .upgrade-tooltip:hover,
2349 .upgrade-tooltip:focus,
2350 .upgrade-tooltip:active{
2351 color: #fff;
2352 }
2353
2354 .upgrade-tooltip::before {
2355 content: '';
2356 height: 4px;
2357 width: 0px;
2358 border: 7px solid #b7414100;
2359 border-bottom-color: #f80668;
2360 position: absolute;
2361 transform: rotate(270deg);
2362 left: -16px;
2363 bottom: 1px;
2364 }
2365
2366 #rmp-editor-form .rmp-accordion-container .upgrade-notice-contents {
2367 background: #fcf1f1;
2368 }
2369
2370 .upgrade-options {
2371 background: #fcf1f1;
2372 display: flex;
2373 justify-content: center;
2374 align-items: center;
2375 text-align: center;
2376 padding: 10% 5%;
2377 }
2378
2379 .upgrade-options .upgrade-notes .button{
2380 color: #fff;
2381 background: #f80668;
2382 border: solid 1px #f80668;
2383 margin-top: 1rem;
2384 }
2385
2386 .upgrade-options .upgrade-notes p {
2387 font-size: 14px;
2388 }
2389
2390 .rmp-admin-notice {
2391 margin-top: 10px;
2392 color: #e23f08;
2393 font-size: 12px;
2394 line-height: 20px;
2395 }
2396
2397 .rmp-theme-page-empty {
2398 display: flex;
2399 flex-direction: column;
2400 align-items: center;
2401 text-align: center;
2402 line-height: normal;
2403 padding: 10%;
2404 width: -webkit-fill-available;
2405 }
2406
2407 .rmp-theme-page-empty .rmp-menu-library-title,
2408 .rmp-theme-page-empty .rmp-menu-library-blank-icon {
2409 color: #cecece94;
2410 }
2411
2412 .rmp-theme-page-empty .rmp-menu-library-title {
2413 font-size: 2rem;
2414 }
2415
2416 /* Loader styles */
2417 .rmp-page-loader {
2418 background: rgb(255 255 255 / 0.9);
2419 width: 100%;
2420 height: 100%;
2421 position: absolute;
2422 top: 0;
2423 left: 0;
2424 z-index: 999999;
2425 display: none;
2426 align-items: center;
2427 justify-content: center;
2428 flex-direction: column;
2429 }
2430
2431 .rmp-page-loader .rmp-loader-message {
2432 font-style: italic;
2433 font-family: 'Product Sans';
2434 color: #555d66;
2435 padding: 10px;
2436 }
2437
2438 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
2439 @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
2440 @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
2441
2442 .rmp-page-loader .rmp-loader-image {
2443 max-width: 60px;
2444 -webkit-animation:spin 1s linear infinite;
2445 -moz-animation:spin 1s linear infinite;
2446 animation:spin 1s linear infinite;
2447 }
2448
2449 .rmp-page-loader .rmp-loader-image.large {
2450 max-width: 100px;
2451 }
2452
2453 .rmp-theme-delete .spinner {
2454 margin: 0;
2455 position: absolute;
2456 right: 2rem;
2457 top: 1.2rem;
2458 }
2459
2460 .rmp-preview-mobile #rmp-preview-wrapper::after,
2461 .rmp-preview-tablet #rmp-preview-wrapper::after,
2462 .rmp-preview-mobile #rmp-preview-wrapper::before,
2463 .rmp-preview-tablet #rmp-preview-wrapper::before {
2464 content:"";
2465 box-shadow: 0px 0px 0px 2px #666;
2466 position: absolute;
2467 text-align: center;
2468 border-radius: 15px;
2469 background: #222;
2470 }
2471
2472 .rmp-preview-mobile #rmp-preview-wrapper::after,
2473 .rmp-preview-tablet #rmp-preview-wrapper::after {
2474 content: "\f102";
2475 font: normal 20px/1 dashicons;
2476 line-height: 25px;
2477 color: #777;
2478 width: 70px;
2479 bottom: -40px;
2480 left: calc(50% - 30px);
2481 cursor: pointer;
2482 pointer-events:all;
2483 }
2484
2485 .rmp-preview-mobile #rmp-preview-wrapper::before,
2486 .rmp-preview-tablet #rmp-preview-wrapper::before {
2487 content: "o";
2488 width: 15px;
2489 height: 15px;
2490 line-height: 12px;
2491 top: -32px;
2492 left: 50%;
2493 }
2494 /* Social Icons repeater */
2495 .rmp-social-icons-repeater {
2496 margin-top: 10px;
2497 }
2498
2499 .rmp-social-icons-items {
2500 list-style: none;
2501 margin: 0;
2502 padding: 0;
2503 }
2504
2505 .rmp-social-icon-item {
2506 border: 1px solid #5f5f5f1f;
2507 border-radius: 8px;
2508 padding: 12px;
2509 margin-bottom: 12px;
2510 }
2511
2512 .rmp-social-icon-item-header {
2513 display: flex;
2514 align-items: center;
2515 justify-content: space-between;
2516 gap: 10px;
2517 margin-bottom: 10px;
2518 }
2519
2520
2521 .rmp-social-icon-item-label {
2522 font-weight: 600;
2523 flex: 1;
2524 }
2525
2526 .rmp-social-icon-item-fields .rmp-input-control-wrapper {
2527 margin-bottom: 12px;
2528 }
2529
2530 .rmp-social-icon-item-fields .rmp-input-control-wrapper:last-child {
2531 margin-bottom: 0;
2532 }
2533
2534 .rmp-social-icons-add {
2535 margin-top: 8px;
2536 }
2537 .wp-core-ui .rmp-social-icons-add {
2538 color: #fff;
2539 }
2540 .wp-core-ui .rmp-social-icon-remove {
2541 background: transparent;
2542 border: 1px solid transparent;
2543 border-radius: 1px;
2544 cursor: pointer;
2545 }