PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 2.2.0
Page Builder: Pagelayer – Drag and Drop website builder v2.2.0
2.2.1 2.2.0 2.1.9 2.1.8 2.1.7 2.1.6 2.1.5 2.1.4 2.1.3 trunk 0.9.0 0.9.1 0.9.2 0.9.3 0.9.4 0.9.5 0.9.6 0.9.7 0.9.8 0.9.9 1.0.0 1.0.2 1.0.3 1.0.4 1.0.5 All 129 releases
pagelayer / css / pagelayer-editor.css

pagelayer-editor.css in Page Builder: Pagelayer – Drag and Drop website builder 2.2.0, at css/pagelayer-editor.css

7,054 lines 153.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2 PAGELAYER
3 http://pagelayer.com/
4 (c) Pagelayer Team
5 */
6
7 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
8
9 html {
10 line-height: 1.15; /* 1 */
11 -webkit-text-size-adjust: 100%; /* 2 */
12 overflow: hidden !important;
13 }
14
15 body {
16 margin: 0;
17 overflow: hidden !important;
18 }
19
20 main {
21 display: block;
22 }
23
24 h1 {
25 font-size: 2em;
26 margin: 0.67em 0;
27 }
28
29 hr {
30 box-sizing: content-box; /* 1 */
31 height: 0; /* 1 */
32 overflow: visible; /* 2 */
33 }
34
35 pre {
36 font-family: monospace, monospace; /* 1 */
37 font-size: 1em; /* 2 */
38 }
39
40 a {
41 background-color: transparent;
42 }
43
44 abbr[title] {
45 border-bottom: none; /* 1 */
46 text-decoration: underline; /* 2 */
47 text-decoration: underline dotted; /* 2 */
48 }
49
50 b,
51 strong {
52 font-weight: bolder;
53 }
54
55 code,
56 kbd,
57 samp {
58 font-family: monospace, monospace; /* 1 */
59 font-size: 1em; /* 2 */
60 }
61
62 small {
63 font-size: 80%;
64 }
65
66 sub,
67 sup {
68 font-size: 75%;
69 line-height: 0;
70 position: relative;
71 vertical-align: baseline;
72 }
73
74 sub {
75 bottom: -0.25em;
76 }
77
78 sup {
79 top: -0.5em;
80 }
81
82 img {
83 border-style: none;
84 }
85
86 button,
87 input,
88 optgroup,
89 select,
90 textarea {
91 font-family: inherit; /* 1 */
92 font-size: 100%; /* 1 */
93 line-height: 1.15; /* 1 */
94 margin: 0; /* 2 */
95 }
96
97 button,
98 input { /* 1 */
99 overflow: visible;
100 }
101
102 button,
103 select { /* 1 */
104 text-transform: none;
105 }
106
107 button,
108 [type="button"],
109 [type="reset"],
110 [type="submit"] {
111 -webkit-appearance: button;
112 }
113
114 button::-moz-focus-inner,
115 [type="button"]::-moz-focus-inner,
116 [type="reset"]::-moz-focus-inner,
117 [type="submit"]::-moz-focus-inner {
118 border-style: none;
119 padding: 0;
120 }
121
122 button:-moz-focusring,
123 [type="button"]:-moz-focusring,
124 [type="reset"]:-moz-focusring,
125 [type="submit"]:-moz-focusring {
126 outline: 1px dotted ButtonText;
127 }
128
129 fieldset {
130 padding: 0.35em 0.75em 0.625em;
131 }
132
133 legend {
134 box-sizing: border-box; /* 1 */
135 color: inherit; /* 2 */
136 display: table; /* 1 */
137 max-width: 100%; /* 1 */
138 padding: 0; /* 3 */
139 white-space: normal; /* 1 */
140 }
141
142 progress {
143 vertical-align: baseline;
144 }
145
146 textarea {
147 overflow: auto;
148 }
149
150 [type="checkbox"],
151 [type="radio"] {
152 box-sizing: border-box; /* 1 */
153 padding: 0; /* 2 */
154 }
155
156 [type="number"]::-webkit-inner-spin-button,
157 [type="number"]::-webkit-outer-spin-button {
158 height: auto;
159 }
160
161 [type="search"] {
162 -webkit-appearance: textfield; /* 1 */
163 outline-offset: -2px; /* 2 */
164 }
165
166 [type="search"]::-webkit-search-decoration {
167 -webkit-appearance: none;
168 }
169
170 ::-webkit-file-upload-button {
171 -webkit-appearance: button; /* 1 */
172 font: inherit; /* 2 */
173 }
174
175 details {
176 display: block;
177 }
178
179 summary {
180 display: list-item;
181 }
182
183
184 template {
185 display: none;
186 }
187
188 [hidden] {
189 display: none;
190 }
191
192 /* END normalize.css */
193
194 /* An overwrite to show the row irrespective in the editor */
195
196 body {
197 font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
198 font-size:12px;
199 }
200
201 .pagelayer-normalize{
202 height:100%;
203 width:100%;
204 padding:0px;
205 margin:0px;
206 border:0px;
207 }
208
209 /* Pagelayer Top Bar */
210 .pagelayer-bottombar-holder{
211 background: #4f4f4f;
212 position:relative;
213 padding: 5px;
214 }
215
216 .pagelayer-bottombar{
217 padding: auto;
218 }
219
220 .pagelayer-bottombar-rightbuttons button{
221 font-size: 13px;
222 font-weight: bold;
223 cursor: pointer;
224 border-radius: 2px;
225 padding: 4px 8px;
226 margin: auto 5px;
227 outline:none;
228 }
229
230 .pagelayer-bottombar-rightbuttons .pli{
231 color:#fff;
232 cursor: pointer;
233 }
234
235 .pagelayer-success-btn{
236 border: #398439 1px solid;
237 color: #fff;
238 background: #449d44;
239 }
240
241 .pagelayer-success-btn:hover{
242 background: #3a733a;
243 border-color: #3a733a;
244 }
245
246 .pagelayer-primary-btn{
247 border: #2e6da4 1px solid;
248 color: #fff;
249 background: #337ab7;
250 }
251
252 .pagelayer-primary-btn:hover{
253 background: #286090;
254 border-color: #204d74;
255 }
256
257 .pagelayer-close-button{
258 border: #ef4d4d 1px solid;
259 color: #fff;
260 background: #ef4d4d;
261 }
262
263 .pagelayer-close-button:hover{
264 background: #c13030;
265 border-color: #c13030;
266 }
267
268 .pagelayer-bottombar-rightbuttons i{
269 padding: 4px;
270 margin: auto 3px;
271 }
272
273 .pagelayer-mode-wrapper i{
274 padding: 8px;
275 margin: auto 5px;
276 }
277
278 .pagelayer-mode-wrapper{
279 display:inline-block;
280 text-align:center;
281 }
282
283 .pagelayer-mode-wrapper i{
284 padding: 8px;
285 margin: auto 5px;
286 }
287
288 .pagelayer-mode-buttons-wrapper{
289 position:absolute;
290 bottom:100%;
291 color:#fff;
292 background-color: #3e8ef7;
293 display:none;
294 z-index:1;
295 }
296
297 .pagelayer-leftbar-toggle-h{
298 width:0px;
299 }
300
301 .pagelayer-leftbar-table{
302 position:relative;
303 }
304
305 .pagelayer-leftbar-hidden{
306 width:0px;
307 }
308
309 .pagelayer-leftbar-hidden table{
310 display:none;
311 }
312
313 .pagelayer-leftbar-toggle{
314 position: absolute;
315 width:12px;
316 background: #E3E3E3;
317 cursor: pointer;
318 text-align:center;
319 line-height:300%;
320 top: 50%;
321 left: 100%;
322 transform: translateY(-50%);
323 }
324
325 .pagelayer-rightbar .pagelayer-leftbar-toggle{
326 left: -12px;
327 }
328
329 .pagelayer-rightbar:not(.pagelayer-leftbar-hidden) .pagelayer-leftbar-toggle,
330 .pagelayer-leftbar-hidden:not(.pagelayer-rightbar) .pagelayer-leftbar-toggle{
331 direction: rtl;
332 }
333
334 .pagelayer-leftbar-toggle:hover{
335 background-color: #3e8ef7;
336 color: #ffffff;
337 }
338
339 .pagelayer-leftbar-holder{
340 overflow: hidden;
341 position: absolute;
342 top: 0;
343 bottom: 0;
344 left: 0;
345 right: 0;
346 border-right: 1px solid #c9d0d9;
347 }
348
349 /*.pagelayer-body-table{
350 max-height: 100vh !important;
351 }*/
352
353 .pagelayer-iframe {}
354
355 .pagelayer-iframe-holder{
356 max-height: 100vh !important;
357 height: 100%;
358 overflow: auto;
359 text-align:center;
360 }
361
362 .pagelayer-iframe-holder.pagelayer-iframe-holder-with-bar{
363 max-height: calc(100vh - 45px) !important;
364 height: calc(100vh - 45px) !important;
365 }
366
367 .pagelayer-iframe-top-bar{
368 height:45px;
369 background-color: #3e8ef7;
370 display:none;
371 color: #fff;
372 }
373
374 .pagelayer-body{
375 transition:0.5s;
376 }
377
378 .pagelayer-pro-req{
379 font-size: 10px;
380 padding: 2px 4px;
381 display: inline-block;
382 background-color: #e63131;
383 color: #fff;
384 margin-left: 4px;
385 border-radius: 2px;
386 cursor: pointer;
387 }
388
389 .pagelayer-pro-req > .pagelayer-tlite{
390 background: #fff;
391 color: #000;
392 width: 220px !important;
393 white-space: inherit !important;
394 top: 22px !important;
395 left: 0px !important;
396 }
397
398 .pagelayer-screen-desktop {}
399
400 .pagelayer-screen-tablet{
401 height:900px;
402 margin:20px auto;
403 border: solid #444;
404 border-width: 30px 10px;
405 border-radius: 10px;
406 }
407
408 .pagelayer-screen-mobile{
409 height:540px;
410 margin:20px auto;
411 border: solid #444;
412 border-width: 30px 10px;
413 border-radius: 10px;
414 }
415
416 /* Element Properties Dialog classes */
417 [class^="pagelayer-elp"]{
418 font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif !important;
419 color: #313439;
420 background-color: transparent;
421 }
422
423 #pagelayer-elpd {
424 display:none;
425 color:#444;
426 border: 1px solid #d3d3d3;
427 }
428
429 .pagelayer-dark #pagelayer-elpd {
430 border: 1px solid #252529;
431 }
432
433 #pagelayer-elpd .slimScrollDiv{
434 height: calc(100% - 50px) !important;
435 }
436
437 .pagelayer-elpd-header {
438 border: none;
439 color:#fff;
440 }
441
442 .pagelayer-elpd-title {
443 text-align: center;
444 padding:0px;
445 cursor: move;
446 color: #fff;
447 font-weight: 600;
448 width:76%;
449 }
450
451 .pagelayer-elpd-close {
452 padding-right:10px;
453 cursor: pointer;
454 margin: 0px;
455 position: absolute;
456 right: 5px;
457 color: #fff;
458 top: 50%;
459 transform: translateY(-50%);
460 }
461
462 .pagelayer-elpd-body{
463 border: none;
464 }
465
466 .pagelayer-elpd-section-rows{
467 background-color: #FFF;
468 border-top: 1px solid #d3d3d3;
469 }
470
471 .pagelayer-dark .pagelayer-elpd-section-rows{
472 background-color: #1c1c1f;
473 border-top: 1px solid #1c1c1f;
474 }
475
476 .pagelayer-elpd-section-name{
477 margin-top: 10px;
478 padding: 11px 10px;
479 background-color: #FFF;
480 font-size: 13px;
481 font-weight: bold;
482 color: #555;
483 cursor: pointer;
484 transition: all 0.3s;
485 }
486
487 .pagelayer-dark .pagelayer-elpd-section-name{
488 background-color: #252529;
489 font-family: Roboto;
490 font-size: 12px;
491 font-weight: 400;
492 color: #ffffff;
493 }
494
495 .pagelayer-elpd-section-name:hover,
496 .pagelayer-elpd-section-open{
497 color:#1a7fb0;
498 }
499
500 .pagelayer-dark .pagelayer-elpd-section-open{
501 background-color: #0d47a1;
502 }
503
504 .pagelayer-dark .pagelayer-elpd-section-name:hover{
505 color:#ffffff;
506 }
507
508 .pagelayer-elpd-section-name:not(.pagelayer-elpd-section-open) .pli:before,
509 .pagelayer-navigator-toggle .pagalayer-arrow:before{
510 content: "\f0da";
511 font-family: pagelayer;
512 }
513 .pagelayer-elpd-section-name.pagelayer-elpd-section-open .pli:before,
514 .pagelayer-navigator-open > .pagelayer-navigator-toggle .pagalayer-arrow:before{
515 content: "\f0d7";
516 font-family: pagelayer;
517 }
518
519 .pagelayer-elpd-section-name .pli{
520 width:15px;
521 float:right;
522 font-style: normal;
523 }
524
525 /* Pagelayer editor panel tabs*/
526
527 .pagelayer-elpd-tab,
528 .pagelayer-history-tab,
529 .pagelayer-widget-tab{
530 display: inline-block;
531 font-size: 13px;
532 cursor: pointer;
533 padding: 10px 6px;
534 margin: 0px 5px 0px 0px;
535 }
536
537 .pagelayer-elpd-tab:hover,
538 .pagelayer-history-tab:hover,
539 .pagelayer-widget-tab:hover{
540 color: #3e8ef7;
541 }
542
543 .pagelayer-dark .pagelayer-elpd-tab,
544 .pagelayer-dark .pagelayer-history-tab,
545 .pagelayer-dark .pagelayer-widget-tab{
546 font-family: Roboto !important;
547 color:#777777;
548 font-size: 14px;
549 font-weight: 400;
550 }
551
552 .pagelayer-elpd-settings-body{
553 display: none;
554 }
555
556 .pagelayer-elpd-settings-body.active{
557 display: block;
558 }
559
560 .pagelayer-elpd-style-body{
561 display: none;
562 }
563
564 .pagelayer-elpd-style-body.active{
565 display: block;
566 }
567
568 .pagelayer-history-section{
569 display:none;
570 }
571
572 .pagelayer-history-body{
573 margin:10px 0px;
574 padding:10px;
575 background-color:#ffffff;
576 }
577
578 .pagelayer-history-section.active{
579 display:block;
580 }
581
582 .pagelayer-history-section.active[pagelayer-show-tab="actions"]{
583 display:flex;
584 flex-direction:column-reverse;
585 }
586
587 [pagelayer-elpd-active-tab="1"],
588 [pagelayer-history-active-tab="1"] {
589 color: #2563eb;
590 border-bottom: 2px solid #2563eb;
591 }
592
593 .pagelayer-dark [pagelayer-elpd-active-tab="1"],
594 .pagelayer-dark [pagelayer-history-active-tab="1"]{
595 color: #ffffff;
596 }
597
598 .pagelayer-elpd-tabs,
599 .pagelayer-history-tabs,
600 .pagelayer-widget-tabs {
601 background-color: #fff;
602 border-bottom: 1px solid #d3d3d3;
603 }
604
605 .pagelayer-dark .pagelayer-elpd-tabs,
606 .pagelayer-dark .pagelayer-history-tabs,
607 .pagelayer-dark .pagelayer-widget-tabs{
608 background-color: #1c1c1f;
609 border-bottom: 1px solid #1c1c1f;
610 }
611
612
613 .pagelayer-elpd-tabs{
614 display: flex;
615 align-items: center;
616 }
617
618 .pagelayer-widget-tabs{
619 display: flex;
620 text-align: center;
621 margin-left: -17px;
622 }
623
624 .pagelayer-widget-tab{
625 flex:1;
626 }
627
628 .pagelayer-elpd-options{
629 text-align:right;
630 display:inline-block;
631 margin-right:10px;
632 }
633
634 .pagelayer-elpd-options i{
635 padding:4px 5px;
636 cursor:pointer;
637 }
638
639 .pagelayer-dark .pagelayer-elpd-options i{
640 color:#777777;
641 }
642
643 .pagelayer-dark .pagelayer-elpd-options i:hover{
644 color: #ffffff;
645 }
646
647 .pagelayer-form-item {
648 border-bottom: 1px dashed #e6e6e6;
649 padding: 10px 8px 10px 6px;
650 margin-bottom: 0px;
651 position: relative;
652 }
653
654 [pagelayer-access-item]{
655 position: absolute;
656 z-index: -100;
657 top: 0px;
658 visibility: hidden;
659 }
660
661 .pagelayer-access-item-visible{
662 position: relative !important;
663 z-index: unset !important;
664 visibility: visible !important;
665 }
666
667 .pagelayer-dark .pagelayer-form-item{
668 border-bottom: 1px dashed #686870;
669 }
670
671 .pagelayer-form-item:hover .pagelayer-elp-default[data_show=true]{
672 display:initial;
673 }
674
675 .pagelayer-elp-label-div, .pagelayer-elp-link-label-div{
676 padding:4px 0px 4px 0px;
677 position:relative;
678 }
679
680 .pagelayer-elp-label-div[type=select]{
681 width:50%;
682 }
683
684 .pagelayer-elp-label, .pagelayer-elp-link-label{
685 display: inline-block;
686 color: #555;
687 font-size: 12px;
688 line-height: 150%;
689 }
690
691 .pagelayer-dark .pagelayer-elp-label,
692 .pagelayer-dark .pagelayer-elp-link-label,
693 .pagelayer-dark .pagelayer-post-category,
694 .pagelayer-dark .pagelayer-elp-postCategory,
695 .pagelayer-dark .pagelayer-elp-postdate::-webkit-datetime-edit-second-field{
696 color:#bdbdbd;
697 }
698
699 .pagelayer-elp-heading{
700 font-size: 13px;
701 font-weight:600;
702 line-height: 150%;
703 }
704
705 .pagelayer-elp-screen{
706 display: inline-block;
707 text-align: center;
708 z-index: 1;
709 vertical-align: middle;
710 position: relative;
711 }
712
713 .pagelayer-elp-screen .pli{
714 padding: 0;
715 cursor: pointer;
716 box-shadow: 0 0 0.5rem #babbbc;
717 height: 30px;
718 width: 30px;
719 border-radius: 50%;
720 line-height: 30px;
721 transition-duration: 0.1s;
722 }
723
724 .pagelayer-dark .pagelayer-elp-screen .pli{
725 color:#bdbdbd;
726 }
727
728
729 .pagelayer-elp-screen .pli-desktop:not(.pagelayer-prop-screen),
730 .pagelayer-elp-screen .pli-tablet:not(.pagelayer-prop-screen),
731 .pagelayer-elp-screen .pli-mobile:not(.pagelayer-prop-screen){
732 position: absolute;
733 transform: none;
734 left: 0;
735 display:none;
736 opacity:0;
737 background:#aaaaaa;
738 color:#ffffff;
739 }
740
741 .pagelayer-dark .pagelayer-elp-screen .pli-desktop:not(.pagelayer-prop-screen),
742 .pagelayer-dark .pagelayer-elp-screen .pli-tablet:not(.pagelayer-prop-screen),
743 .pagelayer-dark .pagelayer-elp-screen .pli-mobile:not(.pagelayer-prop-screen){
744 background:#0d47a1;
745 }
746
747 .pagelayer-elp-screen .pli-desktop.open{
748 transform: rotate(-90deg) translate(30px, -27px) rotate(90deg);
749 transition-delay: 0s;
750 top:-5px;
751 left: 40px;
752 opacity:1;
753 display:block;
754 }
755
756 .pagelayer-elp-screen .pli-tablet.open{
757 transform: rotate(-90deg) translate(0px, -6px) rotate(90deg);
758 transition-delay: 0.1s;
759 top:0px;
760 left: 40px;
761 opacity:1;
762 display:block;
763 }
764
765 .pagelayer-elp-screen .pli-mobile.open{
766 transform: rotate(-90deg) translate(-30px, -27px) rotate(90deg);
767 transition-delay: 0.2s;
768 top:5px;
769 left: 40px;
770 opacity:1;
771 display:block;
772 }
773
774 .pagelayer-elp-screen .pagelayer-prop-screen{
775 box-shadow: none;
776 z-index: 2;
777 font-size: 12px;
778 height: 20px;
779 width: 20px;
780 line-height: 20px;
781 }
782
783 .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
784 background-color: #2563eb;
785 }
786
787 .pagelayer-dark .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
788 background-color: #2563eb;
789 }
790
791 .pagelayer-elp-screen .pagelayer-prop-screen:hover,
792 .pagelayer-typo-default:hover i,
793 .pagelayer-elp-default:hover i{
794 color: #2563eb;
795 }
796
797 .pagelayer-elp-units{
798 display: inline-block;
799 float:right;
800 padding-top:4px;
801 }
802
803 .pagelayer-elp-units span{
804 padding:1px 4px;
805 font-size:12px;
806 cursor: pointer;
807 }
808
809 .pagelayer-dark .pagelayer-elp-units span{
810 color:#bdbdbd;
811 }
812
813 .pagelayer-elp-units span[selected] {
814 color: #3e8ef7;
815 }
816
817 /* Default button css start */
818 .pagelayer-elp-default{
819 display:none;
820 width: 20px;
821 height: 20px;
822 cursor: pointer;
823 margin-left: 4px;
824 position: absolute;
825 top: 9px;
826 }
827
828 .pagelayer-elp-default:focus{
829 outline:none;
830 }
831
832 .pagelayer-elp-default i{
833 font-size: 10px;
834 color: black;
835 }
836
837 /* Default button css ends */
838
839 .pagelayer-elp-desc, .pagelayer-elp-permalink-a, .pagelayer-elp-link-desc{
840 color:#757575;
841 font-size: 12px;
842 line-height: 20px;
843 font-style: italic;
844 margin-top: 5px;
845 display:block;
846 word-break: break-word;
847 }
848
849 .pagelayer-elpd-body input,
850 .pagelayer-elpd-body textarea,
851 .pagelayer-elpd-body select,
852 .pagelayer-elpd-body option,
853 .pagelayer-elp-multiselect{
854 font-size: 13px !important;
855 color: #666;
856 border-radius: unset;
857 border:1px solid #CCC;
858 width: 100%;
859 }
860
861 .pagelayer-elp-textarea{
862 border-radius: 3px !important;
863 resize:vertical;
864 }
865
866 .pagelayer-dark .pagelayer-elpd-body input,
867 .pagelayer-dark .pagelayer-elpd-body textarea,
868 .pagelayer-dark .pagelayer-elpd-body select,
869 .pagelayer-dark .pagelayer-elpd-body option,
870 .pagelayer-dark .pagelayer-add-cat-btn input,
871 .pagelayer-dark .pagelayer-elp-multiselect{
872 border:1px solid #6e6d6d;
873 }
874
875 .pagelayer-dark .pagelayer-elpd-body input,
876 .pagelayer-dark .pagelayer-elpd-body textarea,
877 .pagelayer-dark .pagelayer-elpd-body select,
878 .pagelayer-dark .pagelayer-elpd-body option,
879 .pagelayer-dark .pagelayer-add-cat-btn input,
880 .pagelayer-dark .pagelayer-elp-multiselect{
881 color:#bdbdbd;
882 }
883
884 .pagelayer-elpd-body input:focus,
885 .pagelayer-elpd-body textarea:focus,
886 .pagelayer-elpd-body select:focus{
887 border-color: #2563eb;
888 box-shadow: 0 0 1px #2563eb inset;
889 }
890
891 .pagelayer-elp-button{
892 text-transform: unset !important;
893 border: 1px solid #2563eb !important;
894 font-weight: 500 !important;
895 font-size: 13px !important;
896 margin: 15px auto !important;
897 min-height: unset !important;
898 background-color: #2563eb !important;
899 color: #ffffff !important;
900 transition: all 0.2s ease !important;
901 border-radius: 6px !important;
902 padding: 8px 18px !important;
903 cursor: pointer !important;
904 display: block !important;
905 }
906
907 .pagelayer-elp-button:hover{
908 background-color: #1d4ed8 !important;
909 border-color: #1d4ed8 !important;
910 }
911
912 .pagelayer-dark .pagelayer-elp-button{
913 background-color: #2563eb !important;
914 border-color: #2563eb !important;
915 }
916
917 .pagelayer-dark .pagelayer-elp-button:hover{
918 background-color: #3b82f6 !important;
919 border-color: #3b82f6 !important;
920 }
921
922 .pagelayer-elp-group-item .pagelayer-form-item{
923 padding: 8px 12px !important;
924 }
925
926 .pagelayer-elp-image-div,
927 .pagelayer-elp-retina-image-div,
928 .pagelayer-elp-retina-mobile-image-div{
929 padding:7px;
930 width:90%;
931 margin:5px auto;
932 height:150px;
933 position:relative;
934 border: 1px solid #2563eb;
935 }
936
937 /* image drop zone css start */
938 .pagelayer-elp-drop-zone{
939 position:absolute;
940 text-align:center;
941 width:100%;
942 height:100%;
943 top:0;
944 left:0;
945 z-index:3;
946 background-color: rgba(37, 99, 235, 0.94);
947 display:none;
948 }
949
950 .pagelayer-elp-drop-zone *{
951 pointer-events: none;
952 }
953
954 .pagelayer-elp-drop-zone > div{
955 position: relative;
956 top: 50%;
957 -webkit-transform: translateY(-50%);
958 -ms-transform: translateY(-50%);
959 transform: translateY(-50%);
960 text-align:center;
961 }
962
963 .pagelayer-elp-drop-zone div *{
964 color:white;
965 }
966
967 .pagelayer-elp-drop-zone div i{
968 font-size:20px;
969 }
970
971 .pagelayer-elp-drop-zone div h4{
972 margin: 12px;
973 }
974
975 .pagelayer-elp-img-up-progress {
976 width: 50%;
977 margin-left: auto;
978 margin-right: auto;
979 background-color: transparent;
980 border: 2px solid white;
981 border-radius: 20px;
982 padding: 4px;
983 }
984
985 .pagelayer-elp-img-up-bar {
986 width: 3%;
987 height: 5px;
988 background-color: white;
989 line-height: 5px;
990 text-align: center;
991 border-radius: 20px;
992 }
993 /* image drop zone css start */
994
995 .pagelayer-elp-modal,
996 .pagelayer-elp-access{
997 cursor: pointer;
998 padding: 10px;
999 display: block;
1000 margin: 0 auto;
1001 position: absolute;
1002 font-size:1.5rem;
1003 top: 0px;
1004 right: 12px;
1005 color: #333;
1006 vertical-align: middle;
1007 }
1008
1009 .pagelayer-elp-access .pli-caret-right{
1010 font-size: 18px;
1011 line-height: 1.5;
1012 }
1013
1014 .pagelayer-elp-access .pli-caret-right:hover{
1015 color: #3e8ef7;
1016 }
1017
1018 .pagelayer-elp-access .pli-caret-open:before{
1019 content: "\f0d7" !important;
1020 }
1021
1022 .pagelayer-pro-notice,
1023 .pagelayer-confirm-box-holder {
1024 position: fixed;
1025 top: 0px;
1026 z-index: 10000;
1027 width: 100%;
1028 display: none;
1029 left: 0px;
1030 height: 100vh;
1031 }
1032
1033 .pagelayer-pro-div,
1034 .pagelayer-confirm-box{
1035 margin: 25vh auto;
1036 max-width: 500px;
1037 padding: 20px;
1038 background-color: #fff;
1039 box-shadow: 0 0 15px -5px;
1040 }
1041
1042 .pagelayer-pro-x{
1043 float:right;
1044 font-size: 13px;
1045 cursor: pointer;
1046 }
1047
1048 .pagelayer-pro-head{
1049 text-align: center;
1050 }
1051
1052 .pagelayer-pro-message,
1053 .pagelayer-confirmation-msg{
1054 margin: 25px auto;
1055 font-size: 15px;
1056 padding: 2px 25px;
1057 text-align: center;
1058 line-height: 1.8;
1059 }
1060
1061 .button-pagelayer{
1062 padding: 12px 25px !important;
1063 font-size: 15px !important;
1064 font-weight: bold;
1065 background: #7444fd !important;
1066 color: #fff !important;
1067 border: 1px solid #7444fd !important;
1068 transition: all .3s linear;
1069 cursor: pointer;
1070 text-decoration: none;
1071 display: inline-block;
1072 }
1073
1074 .button-pagelayer:hover{
1075 background: #fff !important;
1076 color: #7444fd !important;
1077 }
1078
1079 .pagelayer-elp-access-holder{
1080 position: absolute;
1081 border: 1px solid #ccc;
1082 top: 42px;
1083 background: #fff;
1084 z-index: 100;
1085 right: 8px;
1086 width: 95%;
1087 box-shadow: 0 0 15px -5px;
1088 display: none;
1089 }
1090
1091 .pagelayer-elp-image{
1092 height: 100%;
1093 -webkit-background-size: cover;
1094 background-size: cover;
1095 background-position: 50%;
1096 cursor:pointer;
1097 }
1098
1099 .pagelayer-elp-image-delete,
1100 .pagelayer-elp-retina-delete,
1101 .pagelayer-elp-retina-mobile-delete,
1102 .pagelayer-elp-image-retina{
1103 cursor: pointer;
1104 position: absolute;
1105 top: 4px;
1106 right: 4px;
1107 background-color: #2563eb;
1108 padding: 5px 9px;
1109 max-width: 28px;
1110 max-height: 28px;
1111 -webkit-box-sizing: content-box;
1112 -moz-box-sizing: content-box;
1113 box-sizing: content-box;
1114 border-radius: 2px;
1115 }
1116
1117 .pagelayer-elp-image-retina{
1118 right:50px;
1119 }
1120
1121 .pagelayer-elp-image-ai{
1122 position: absolute;
1123 top: -5px;
1124 left: -5px;
1125 }
1126
1127 .pagelayer-elp-image-ai input{
1128 width: 18px;
1129 height: 18px;
1130 }
1131
1132 .pagelayer-elp-image-delete .pli,
1133 .pagelayer-elp-retina-delete .pli,
1134 .pagelayer-elp-retina-mobile-delete .pli,
1135 .pagelayer-elp-image-retina .pli{
1136 color: #fff;
1137 }
1138
1139 .pagelayer-hidden{
1140 display:none !important;
1141 }
1142
1143 .pagelayer-elp-radio-div{
1144 display:flex;
1145 }
1146
1147 .pagelayer-elp-radio:first-child{
1148 border-radius: 4px 0px 0px 4px;
1149 -moz-outline-radius: 7px 0px 0px 7px;
1150 }
1151
1152 .pagelayer-elp-radio:last-child{
1153 border-radius: 0px 4px 4px 0px;
1154 -moz-outline-radius: 0px 7px 7px 0px;
1155 }
1156
1157 .pagelayer-elp-radio{
1158 display: inline-block;
1159 vertical-align: middle;
1160 padding: 6px;
1161 cursor: pointer;
1162 font-size:12px;
1163 color: #666 !important;
1164 text-decoration: none;
1165 background: #eee;
1166 flex:1;
1167 text-align:center;
1168 }
1169
1170 .pagelayer-elp-radio:hover{
1171 background-color: #4CB5E8 !important;
1172 color:#fff !important;
1173 transition: all 0.3s;
1174 }
1175
1176 .pagelayer-dark .pagelayer-elp-radio{
1177 background-color: #fafafa;
1178 }
1179
1180 .pagelayer-dark .pagelayer-elp-radio:hover,
1181 .pagelayer-dark .pagelayer-elp-radio-active{
1182 background-color:#0d47a1 !important;
1183 }
1184
1185 .pagelayer-elp-radio-active{
1186 background-color: #1A9CDB !important;
1187 color:#ffffff !important;
1188 }
1189
1190 .pagelayer-elp-typo-edit-div,
1191 .pagelayer-elp-color-div-holder{
1192 cursor: pointer;
1193 width: 70px;
1194 height: 30px;
1195 border-radius: 3px;
1196 margin: 0 auto;
1197 position: absolute;
1198 top: 5px;
1199 right: 11px;
1200 border: solid 1px #999;
1201 color: #333;
1202 display: flex;
1203 }
1204
1205 .pagelayer-elp-typo-edit-div{
1206 width: 34px;
1207 }
1208
1209 .pagelayer-elp-color-div{
1210 cursor: pointer;
1211 padding: 3px;
1212 width: 28px;
1213 height: 23px;
1214 display: block;
1215 border-radius: 2px;
1216 margin: 0 auto;
1217 position: absolute;
1218 top: 5px;
1219 right: 7px;
1220 border: solid 1px #999;
1221 color: #333;
1222 vertical-align: middle;
1223 }
1224
1225 .pagelayer-elp-color-div-holder .pagelayer-elp-color-div{
1226 position: relative;
1227 border: 0px;
1228 height: calc(100% - 6px);
1229 top: 0;
1230 left: 0;
1231 }
1232
1233 .pagelayer-elp-color-preview{
1234 height: 100%;
1235 background-size: cover !important;
1236 border-radius: 2px;
1237 flex: 1;
1238 }
1239
1240 .pagelayer-elp-color-global{
1241 width: 50%;
1242 border-right: 1px solid #999;
1243 display: flex;
1244 align-items: center;
1245 justify-content: center;
1246 }
1247
1248 .pagelayer-elp-global-icon:hover,
1249 .pagelayer-elp-color-global:hover{
1250 color: #137dc5;
1251 }
1252
1253 .pagelayer-elp-typo-edit-div .pli-pencil{
1254 display: flex;
1255 align-items: center;
1256 justify-content: center;
1257 flex: 1;
1258 }
1259
1260 .pagelayer-elp-global-icon:before,
1261 .pagelayer-elp-color-global:before{
1262 content: "\e9c9";
1263 font-family: 'pagelayer', "Font Awesome 5 Free" !important;
1264 }
1265
1266 .pagelayer-white-border{
1267 outline: 1px solid #dfdfdf;
1268 }
1269
1270 .pagelayer-global-selected,
1271 .pagelayer-global-font-list-item:hover,
1272 .pagelayer-global-color-list-item:hover{
1273 background: #f9f9f9;
1274 }
1275
1276 .pagelayer-global-selected:after{
1277 content: "\ea10";
1278 font-family: 'pagelayer', "Font Awesome 5 Free" !important;
1279 color: #137dc5;
1280 }
1281
1282 .pagelayer-global-font-list,
1283 .pagelayer-global-color-list{
1284 position: absolute;
1285 background: #fff;
1286 padding: 10px 0;
1287 z-index: 9999;
1288 border-radius: 4px;
1289 right: 0;
1290 top: 35px;
1291 width: 250px;
1292 display: none;
1293 max-height: 350px;
1294 overflow-y: auto;
1295 font-size: 12px;
1296 box-shadow: 0px 0px 13px rgb(0 0 0 / 30%);
1297 }
1298
1299 .pagelayer-global-font-list-item,
1300 .pagelayer-global-color-list-item{
1301 display: flex;
1302 padding: 10px 20px;
1303 cursor: pointer;
1304 }
1305
1306 .pagelayer-global-font-list-item .pagelayer-global-font-title,
1307 .pagelayer-global-color-list-item .pagelayer-global-color-title{
1308 flex: 1;
1309 }
1310
1311 .pagelayer-global-color-list-item .pagelayer-global-color-pre{
1312 position: relative;
1313 border: 1px solid #f1f1f1;
1314 margin-right: 7px;
1315 padding: 1px;
1316 background-clip: content-box;
1317 }
1318
1319 .pagelayer-global-color-list-item .pagelayer-global-color-pre:before{
1320 content: '';
1321 padding: 0px 10px;
1322 background-color: #ff000000;
1323 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
1324 -webkit-background-size: 12px 12px;
1325 background-size: 6px 6px;
1326 position: relative;
1327 z-index: -1;
1328 }
1329
1330 .pagelayer-global-setting-color{
1331 position: relative;
1332 box-shadow: 0 1px 2px #d2cfcf;
1333 padding: 10px 4px;
1334 margin-bottom: 5px;
1335 margin-top: -10px;
1336 cursor: default;
1337 }
1338
1339 .pagelayer-global-setting-color b{
1340 margin-left: 11px;
1341 }
1342
1343 .pagelayer-global-setting-color .pli{
1344 right: 15px;
1345 position: absolute;
1346 cursor: pointer;
1347 }
1348
1349 .pagelayer-elp-typo-icons .pli-service{
1350 cursor: pointer;
1351 }
1352
1353 .pagelayer-elp-global-typo .pli:hover,
1354 .pagelayer-global-setting-color .pli:hover{
1355 color: #137dc5;
1356 }
1357
1358 .pagelayer-active-global{
1359 color: #137dc5;
1360 }
1361
1362 .pagelayer-blank-preview{
1363 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgBAMAAAB54XoeAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC1QTFRFAAAAAQEBBQUFDAwM9PT0+vr6/////v7+BAQE+/v7AgIC/f39AwMDDQ0N8/Pzb6ggJQAAAZ5JREFUeJztlr1twzAQhU+tK7ELDDdBNsgO2SAznAr3JAJXWSJp49YLuPAW2cJbhEdSQZBCEMRHgMVj5U80HnkSfz4Ra06eXjSoTvr6HKGGU94o8vBpqPr2LjLUcAr8ikNEnLx6jT93VZxneBn1Zg9uOlxsxO0suTkXfJywTsG5Ok5x9hK0NKM6bhEosh+nq+HJD+c6TmvG2r8RtrMb9g4aOKY3CA0ElyyHcbAHIXNw5Q9bWeLG2aUH80ItU97K8ihlhmmIUFb+dpZvOceNE7fOnz/UsNztHAMEzSwf6idEqTOLHv0R8THc7/o72Qzrl8vMwAVdmreDFhloLxQcCC65QSC45AYfBV0yfGGjtx78cLjrVaHHF/yAhV8B8EsKfo3CL/pRHFZFnIBlCa5z9EP6If1wBdMPe5QleMkNAumHuZ9+SD9cYPphjzpHP6Qf0g9XMP2wR1mCl9wgkH6Y++mH9MMFph/2qHP0Q/oh/XAF0w97lCV4yQ0C6Ye5n35IP1xg+mGPOkc/pB/SD1cw/bBHWYKX3CCQfpj76Yfr+QfwnsxmcLvdhQAAAABJRU5ErkJggg==') !important;
1364 background-size: cover !important;
1365 opacity: 70%;
1366 }
1367
1368 .picker_arrow {
1369 display:none;
1370 }
1371
1372 .picker_wrapper {
1373 top: 13px !important;
1374 right: -15px !important;
1375 font-family: Roboto !important;
1376 font-size: 12px;
1377 border-radius: 4px;
1378 background:#f7f7f7;
1379 }
1380
1381 .picker_done button{
1382 border: #318088 1px solid;
1383 color: #fff;
1384 background: #248a4c;
1385 border-radius: 2px;
1386 font-size: 14px;
1387 line-height: 1.5;
1388 }
1389
1390 .picker_editor input{
1391 font-family: Roboto !important;
1392 font-size: 12px;
1393 }
1394
1395 .pagelayer-elp-color-span{
1396 padding: 2px 0;
1397 height: 28px;
1398 line-height: 28px;
1399 float: left;
1400 font-size: 10px;
1401 }
1402
1403 .pagelayer-elp-color-div .picker_wrapper{
1404 margin-top: 22px !important;
1405 border: 1px solid rgba(0,0,0,0.2) !important;
1406 background: #fff !important;
1407 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
1408 }
1409
1410 .pagelayer-dark .pagelayer-elp-color-div .picker_wrapper{
1411 border: 1px solid #0277bd !important;
1412 background: #252529 !important;
1413 box-shadow: 0 0.5rem 1rem #00000026 !important;
1414 }
1415
1416 .picker_wrapper{
1417 z-index:12 !important;
1418 }
1419
1420 .pagelayer-dark .picker_done button {
1421 border: none;
1422 font-family: roboto;
1423 color: #777;
1424 background-color: #ffffff;
1425 }
1426
1427 .pagelayer-dark .picker_editor input{
1428 color: #bdbdbd;
1429 background-color: #1c1c1f;
1430 }
1431
1432 .pagelayer-elp-remove-color{
1433 background-color:#616161;
1434 position: absolute;
1435 top: 0;
1436 right: 0;
1437 z-index:1;
1438 box-shadow: 0 0 3px #333;
1439 padding: 3px;
1440 border-top-right-radius: 2px;
1441 }
1442
1443 .pagelayer-elp-remove-color .pli:before{
1444 color: #fff;
1445 font-size: 7px;
1446 }
1447
1448 .pagelayer-elp-icon-div{
1449 cursor: pointer;
1450 padding: 6px;
1451 border: solid 1px #d1d1d1;
1452 background: #fffffc;
1453 color: #333;
1454 vertical-align: middle;
1455 width: 126px;
1456 height: 18px;
1457 display: block;
1458 border-radius: 4px;
1459 margin: 0 auto;
1460 position: absolute;
1461 top: 7px;
1462 right: 10px;
1463 }
1464
1465 .pagelayer-dark .pagelayer-elp-icon-div{
1466 background-color: #1c1c1f;
1467 color: #bdbdbd;
1468 border: 1px solid #6e6d6d;
1469 }
1470
1471 .pagelayer-elp-icon-preview{
1472 position: relative;
1473 display: block;
1474 margin-right: 5px;
1475 float: left;
1476 width: 75%;
1477 height: auto;
1478 border: none;
1479 overflow: hidden;
1480 white-space: nowrap;
1481 text-overflow: ellipsis;
1482 }
1483
1484 .pagelayer-elp-icon-preview i{
1485 padding-right: 5px;
1486 font-size: 19px;
1487 color: #666;
1488 vertical-align: middle;
1489 }
1490
1491 .pagelayer-dark .pagelayer-elp-icon-preview i,
1492 .pagelayer-dark .pagelayer-elp-icon-name{
1493 color:#bdbdbd;
1494 }
1495
1496 .pagelayer-elp-icon-name{
1497 font-size: 13px;
1498 }
1499
1500 .pagelayer-elp-icon-open,
1501 .pagelayer-elp-icon-close{
1502 float: right;
1503 font-size: 10px;
1504 padding: 0px;
1505 line-height: 20px;
1506 }
1507
1508 .pagelayer-dark .pagelayer-elp-icon-open,
1509 .pagelayer-dark .pagelayer-elp-icon-close{
1510 color:#bdbdbd;
1511 }
1512
1513 .pagelayer-elp-icon-close{
1514 padding-right: 5px;
1515 font-size: 12px;
1516 }
1517
1518 .pagelayer-elp-icon-remove{
1519 position: absolute;
1520 right: 20px;
1521 font-size: 11px;
1522 top: 10px;
1523 z-index: 10;
1524 }
1525
1526 .pagelayer-elp-icon-selector,
1527 .pagelayer-elp-link-list{
1528 position: absolute;
1529 z-index: 1000;
1530 border: 1px solid rgba(0,0,0,0.2) !important;
1531 background: #fff !important;
1532 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
1533 -webkit-border-radius: 2px !important;
1534 text-shadow: none !important;
1535 padding: 5px;
1536 height: auto;
1537 box-sizing: border-box;
1538 display: none;
1539 width: 80%;
1540 border-radius: 2px;
1541 margin: 0 0 0 auto;
1542 top: 40px;
1543 right: 10px;
1544 }
1545
1546 .pagelayer-dark .pagelayer-elp-icon-selector{
1547 background: #252529 !important;
1548 border: 1px solid #ffffff73 !important;
1549 }
1550
1551 .pagelayer-elp-search-icon{
1552 margin-bottom: 5px !important;
1553 padding: 2px 6px;
1554 line-height: 20px !important;
1555 border-radius: 3px !important;
1556 }
1557
1558 .pagelayer-elp-icon-list{
1559 width: 100%;
1560 -moz-box-sizing: border-box;
1561 -webkit-box-sizing: border-box;
1562 box-sizing: border-box;
1563 padding: 0;
1564 max-height: 183px;
1565 overflow-y: auto;
1566 }
1567
1568 .pagelayer-elp-icon-list::-webkit-scrollbar {
1569 -webkit-appearance: none;
1570 }
1571
1572 .pagelayer-elp-icon-list::-webkit-scrollbar:vertical {
1573 width: 10px;
1574 }
1575
1576 .pagelayer-elp-icon-list::-webkit-scrollbar-thumb {
1577 border-radius: 8px;
1578 border: 2px solid white;
1579 background-color: rgba(0, 0, 0, .5);
1580 }
1581
1582 .pagelayer-elp-icon-list::-webkit-scrollbar-track {
1583 background-color: #fff;
1584 border-radius: 8px;
1585 }
1586
1587 .pagelayer-elp-icon-span{
1588 display: block;
1589 margin: 2px;
1590 cursor: pointer;
1591 box-sizing: border-box;
1592 border: 1px solid #dbdbdb;
1593 transition: all 0.3s;
1594 font-size: 13px;
1595 padding: 3px;
1596 }
1597
1598 .pagelayer-dark .pagelayer-elp-icon-span,
1599 .pagelayer-dark .pagelayer-elp-icon-span i{
1600 color:#bdbdbd;
1601 }
1602
1603 .pagelayer-elp-icon-span:hover{
1604 border-color: #2563eb;
1605 background-color: #3e8ef7;
1606 color: #ffffff;
1607 box-shadow: 0px 1px 1px #3e8ef7bf;
1608 }
1609
1610 .pagelayer-elp-icon-span i{
1611 font-size: 15px;
1612 line-height: 1em;
1613 padding: 3px;
1614 color: #555;
1615 transition: all 0.3s;
1616 vertical-align: middle;
1617 }
1618
1619 .pagelayer-elp-icon-span:hover i{
1620 color: #ffffff;
1621 }
1622
1623 .pagelayer-elp-icon-type{
1624 display:flex;
1625 flex-grow:1;
1626 text-align:center;
1627 }
1628
1629 .pagelayer-elp-icon-type p{
1630 flex-grow: 1;
1631 padding: 5px 0;
1632 margin: 0 0 3px;
1633 cursor: pointer;
1634 font-size: 12px;
1635 background: #999;
1636 color: #ffffff;
1637 border: 1px solid #777;
1638 }
1639
1640 .pagelayer-elp-icon-type p.active{
1641 background-color:#666666;
1642 }
1643
1644 .pagelayer-dark .pagelayer-elp-icon-type p.active{
1645 background: #0277bd;
1646 }
1647
1648 .pagelayer-elp-icon-sets{
1649 line-height: 27px;
1650 height: 27px;
1651 border-radius: 4px;
1652 margin: 5px 0;
1653 }
1654
1655 .pagelayer-video{
1656 width: 100% !important;
1657 /* background: #ccc; */
1658 position: relative;
1659 /* top: -40px;
1660 float: right;
1661 border-radius: 0px 4px 4px 0px; */
1662 }
1663
1664 .pagelayer-video i{
1665 top: 10px;
1666 position: relative;
1667 left: 8px;
1668 }
1669
1670 .pagelayer-elp-slider-div{
1671 display: flex !important;
1672 align-items: center !important;
1673 width: 100% !important;
1674 padding: 6px 0 !important;
1675 box-sizing: border-box !important;
1676 }
1677
1678 input.pagelayer-elp-slider{
1679 -webkit-appearance: none !important;
1680 flex: 1 1 auto !important;
1681 width: 0 !important;
1682 height: 6px !important;
1683 border-radius: 3px !important;
1684 background-color: #e2e8f0 !important;
1685 outline: none !important;
1686 opacity: 0.8 !important;
1687 transition: opacity 0.2s !important;
1688 padding: 0 !important;
1689 margin: 0 !important;
1690 }
1691
1692 .pagelayer-dark input.pagelayer-elp-slider {
1693 background-color: #334155 !important;
1694 }
1695
1696 .pagelayer-elp-slider:focus{
1697 border-color: transparent;
1698 box-shadow: 0 0 1px transparent;
1699 }
1700
1701 .pagelayer-elp-slider:hover{
1702 opacity: 1;
1703 }
1704
1705 .pagelayer-elp-slider::-webkit-slider-thumb{
1706 -webkit-appearance: none;
1707 appearance: none;
1708 width: 15px;
1709 height: 15px;
1710 border-radius: 50%;
1711 background: #4CAF50;
1712 cursor: pointer;
1713 }
1714
1715 .pagelayer-dark .pagelayer-elp-slider::-webkit-slider-thumb{
1716 background: #3e8ef7;
1717 }
1718
1719 .pagelayer-elp-slider::-moz-range-thumb{
1720 width: 15px;
1721 height: 15px;
1722 border-radius: 50%;
1723 background: #2563eb;
1724 cursor: pointer;
1725 }
1726
1727 .pagelayer-leftbar-holder input.pagelayer-elp-slider-value {
1728 flex: 0 0 55px !important;
1729 width: 55px !important;
1730 height: 28px !important;
1731 border: 1px solid #cbd5e1 !important;
1732 border-radius: 6px !important;
1733 padding: 4px 6px !important;
1734 margin: 0 0 0 12px !important;
1735 font-size: 13px !important;
1736 text-align: center !important;
1737 background-color: #ffffff !important;
1738 color: #0f172a !important;
1739 box-sizing: border-box !important;
1740 }
1741
1742 .pagelayer-dark .pagelayer-leftbar-holder input.pagelayer-elp-slider-value {
1743 border-color: #334155 !important;
1744 background-color: #131926 !important;
1745 color: #f8fafc !important;
1746 }
1747
1748 .pagelayer-elp-datetime-div{
1749 position: relative;
1750 width: 100% !important;
1751 }
1752
1753 .pagelayer-elp-datetime{
1754 width: 100% !important;
1755 box-sizing: border-box !important;
1756 }
1757
1758 .pagelayer-elp-postdate-div{
1759 display: flex !important;
1760 border: 1px solid #cbd5e1 !important;
1761 border-radius: 6px !important;
1762 background-color: #ffffff !important;
1763 height: 32px !important;
1764 align-items: center !important;
1765 overflow: hidden !important;
1766 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
1767 transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
1768 width: 100% !important;
1769 box-sizing: border-box !important;
1770 }
1771
1772 .pagelayer-elp-postdate-div:focus-within {
1773 border-color: #2563eb !important;
1774 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
1775 }
1776
1777 .pagelayer-elp-postdate{
1778 flex: 1 !important;
1779 height: 100% !important;
1780 border: none !important;
1781 background: transparent !important;
1782 padding: 6px 10px !important;
1783 font-size: 13px !important;
1784 color: #0f172a !important;
1785 outline: none !important;
1786 box-sizing: border-box !important;
1787 min-width: 0 !important;
1788 }
1789
1790 .pagelayer-elp-postdate:first-child {
1791 border-right: 1px solid #cbd5e1 !important;
1792 }
1793
1794 .pagelayer-elp-postdate::-webkit-calendar-picker-indicator {
1795 cursor: pointer !important;
1796 margin-left: 4px !important;
1797 }
1798
1799 .pagelayer-dark .pagelayer-elp-postdate-div {
1800 border-color: #334155 !important;
1801 background-color: #131926 !important;
1802 }
1803
1804 .pagelayer-dark .pagelayer-elp-postdate-div:focus-within {
1805 border-color: #2563eb !important;
1806 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
1807 }
1808
1809 .pagelayer-dark .pagelayer-elp-postdate {
1810 color: #f8fafc !important;
1811 }
1812
1813 .pagelayer-dark .pagelayer-elp-postdate:first-child {
1814 border-right: 1px solid #334155 !important;
1815 }
1816
1817 .pagelayer-elp-fa-calendar{
1818 position: absolute;
1819 height: 40px;
1820 width: 40px;
1821 background: #000;
1822 right: 0;
1823 top: 0;
1824 }
1825
1826 .pagelayer-elp-checkbox-div{
1827 top: 13px;
1828 right:7px;
1829 position: absolute;
1830 }
1831
1832 input[type="checkbox"].pagelayer-elp-checkbox{
1833 font-size: 30px;
1834 -webkit-appearance: none;
1835 -moz-appearance: none;
1836 appearance: none;
1837 width: 3.5em;
1838 height: 1.7em;
1839 background: #ddd;
1840 border-radius: 3em;
1841 position: relative;
1842 cursor: pointer;
1843 outline: none;
1844 -webkit-transition: all .2s ease-in-out;
1845 transition: all .2s ease-in-out;
1846 }
1847
1848 input[type="checkbox"].pagelayer-elp-checkbox:checked{
1849 background-color: #1A9CDB;
1850 border-color: #1A9CDB;
1851 }
1852
1853 .pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked{
1854 background-color: #0d47a1;
1855 }
1856
1857 input[type="checkbox"].pagelayer-elp-checkbox:after{
1858 position: absolute;
1859 content: "";
1860 width: 1.5em;
1861 height: 1.5em;
1862 border-radius: 50%;
1863 background: #fff;
1864 -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
1865 box-shadow: 0 0 .25em rgba(0,0,0,.3);
1866 -webkit-transform: scale(.7);
1867 transform: scale(.7);
1868 left: 0;
1869 -webkit-transition: all .2s ease-in-out;
1870 transition: all .2s ease-in-out;
1871 }
1872
1873 input[type="checkbox"].pagelayer-elp-checkbox:checked:after{
1874 left: calc(100% - 1.5em);
1875 }
1876
1877 .pagelayer-elp-input-icon,
1878 .pagelayer-elp-pos-rel{
1879 position: relative;
1880 }
1881
1882 .pagelayer-elp-link-no-addons > .pagelayer-elp-link{
1883 width:100% !important;
1884 }
1885
1886 .pagelayer-elp-link-no-addons > .pagelayer-elp-link-icon{
1887 display:none !important;
1888 }
1889
1890 .pagelayer-elp-input-icon input{
1891 width: 85%;
1892 }
1893
1894 .pagelayer-elp-input-icon i.pli{
1895 padding:1px 10px;
1896 position:relative;
1897 top:0px;
1898 border: 1px solid #d1d1d1;
1899 border-left:0px;
1900 cursor: pointer;
1901 background:#FFF;
1902 line-height:26px !important;
1903 font-size: 13px;
1904 }
1905
1906 .pagelayer-dark .pagelayer-elp-input-icon i.pli{
1907 background: #e0e0e0;
1908 }
1909
1910 .pagelayer-elp-padding-div i.pli{
1911 padding:8px 11px;
1912 border: 1px solid #d1d1d1;
1913 border-left:0px !important;
1914 cursor: pointer;
1915 background: #FFF;
1916 vertical-align:top;
1917 font-size: 12px;
1918 border-top-right-radius: 3px;
1919 border-bottom-right-radius: 3px;
1920 }
1921
1922 .pagelayer-elp-padding-linked{
1923 background: #1a7fb0 !important;
1924 color: #fff !important;
1925 border: 1px solid #1a7fb0 !important;
1926 }
1927
1928 .pagelayer-elp-padding:first-child{
1929 border-top-left-radius: 3px;
1930 border-bottom-left-radius: 3px;
1931 }
1932
1933 .pagelayer-dark .pagelayer-elp-padding-linked{
1934 background: #e0e0e0 !important;
1935 }
1936
1937 .pagelayer-elp-dimension-div {
1938 display: flex !important;
1939 align-items: stretch !important;
1940 width: 100% !important;
1941 position: relative !important;
1942 box-sizing: border-box !important;
1943 }
1944
1945 .pagelayer-elp-dimension-div input.pagelayer-elp-dimension {
1946 flex: 1 1 auto !important;
1947 width: 0 !important;
1948 height: 32px !important;
1949 border: 1px solid #cbd5e1 !important;
1950 border-right: none !important;
1951 border-radius: 0 !important;
1952 box-sizing: border-box !important;
1953 padding: 6px 10px !important;
1954 font-size: 13px !important;
1955 background-color: #ffffff !important;
1956 margin: 0 !important;
1957 }
1958
1959 .pagelayer-elp-dimension-div input.pagelayer-elp-dimension:first-child {
1960 border-radius: 6px 0 0 6px !important;
1961 }
1962
1963 .pagelayer-elp-dimension-div i.pli{
1964 flex: 0 0 auto !important;
1965 width: 36px !important;
1966 height: 32px !important;
1967 border: 1px solid #cbd5e1 !important;
1968 border-radius: 0 6px 6px 0 !important;
1969 box-sizing: border-box !important;
1970 background-color: #f8fafc !important;
1971 color: #64748b !important;
1972 cursor: pointer !important;
1973 display: flex !important;
1974 align-items: center !important;
1975 justify-content: center !important;
1976 margin: 0 !important;
1977 position: static !important;
1978 font-size: 14px !important;
1979 line-height: normal !important;
1980 transition: background-color 0.15s ease, color 0.15s ease !important;
1981 }
1982
1983 .pagelayer-elp-dimension-div i.pli:hover {
1984 background-color: #f1f5f9 !important;
1985 color: #2563eb !important;
1986 }
1987
1988 .pagelayer-elp-dimension-div i.pli.pagelayer-elp-dimension-linked,
1989 .pagelayer-elp-dimension-linked{
1990 background-color: #2563eb !important;
1991 border-color: #2563eb !important;
1992 color: #ffffff !important;
1993 }
1994
1995 /* Focus states */
1996 .pagelayer-elp-dimension-div:focus-within input {
1997 border-color: #2563eb !important;
1998 }
1999
2000 .pagelayer-elp-dimension-div:focus-within i.pli:not(.pagelayer-elp-dimension-linked) {
2001 border-color: #2563eb !important;
2002 }
2003
2004 /* Dark Mode Overrides */
2005 .pagelayer-dark .pagelayer-elp-dimension-div input.pagelayer-elp-dimension {
2006 border-color: #334155 !important;
2007 background-color: #131926 !important;
2008 color: #f8fafc !important;
2009 }
2010
2011 .pagelayer-dark .pagelayer-elp-dimension-div i.pli {
2012 border-color: #334155 !important;
2013 background-color: #1e1e24 !important;
2014 color: #94a3b8 !important;
2015 }
2016
2017 .pagelayer-dark .pagelayer-elp-dimension-div i.pli:hover:not(.pagelayer-elp-dimension-linked) {
2018 background-color: #2d2d34 !important;
2019 color: #3b82f6 !important;
2020 }
2021
2022 .pagelayer-dark .pagelayer-elp-dimension-div i.pli.pagelayer-elp-dimension-linked,
2023 .pagelayer-dark .pagelayer-elp-dimension-linked {
2024 background-color: #2563eb !important;
2025 border-color: #2563eb !important;
2026 color: #ffffff !important;
2027 }
2028
2029 .pagelayer-dark .pagelayer-elp-dimension-div:focus-within input,
2030 .pagelayer-dark .pagelayer-elp-dimension-div:focus-within i.pli:not(.pagelayer-elp-dimension-linked) {
2031 border-color: #2563eb !important;
2032 }
2033
2034 /* Pagelayer Multi Select Property */
2035 .pagelayer-elp-multiselect{
2036 min-height: 25px;
2037 width:95%;
2038 }
2039
2040 .pagelayer-elp-multiselect-ul{
2041 list-style:none;
2042 padding:0;
2043 margin:0;
2044 display:none;
2045 border: 1px solid #CCC;
2046 border-radius: 0 0 5px 5px;
2047 border-top:none;
2048 position:absolute;
2049 background:rgb(255, 255, 255);
2050 z-index:1;
2051 width:99%;
2052 }
2053
2054 .pagelayer-dark .pagelayer-elp-multiselect-ul{
2055 background: #1c1c1f;
2056 border: 1px solid #6e6d6d;
2057 border-top: none;
2058 box-shadow: 0 0.5rem 1rem #00000026;
2059 }
2060
2061 .pagelayer-elp-multiselect-option{
2062 font-size:13px;
2063 padding:4px 8px;
2064 cursor:pointer;
2065 }
2066
2067 .pagelayer-dark .pagelayer-elp-multiselect-option{
2068 color: #777;
2069 }
2070
2071 .pagelayer-elp-multiselect-option[selected="selected"]{
2072 background: #f2f2f2;
2073 }
2074
2075 .pagelayer-elp-multiselect-remove{
2076 color: #f2f2f2;
2077 padding-left: 2px;
2078 cursor: pointer;
2079 }
2080
2081 .pagelayer-dark .pagelayer-elp-multiselect-option[selected="selected"]{
2082 background: #0277bd;
2083 color: #fff;
2084 }
2085
2086 .pagelayer-elp-multiselect-selected{
2087 padding: 3px 5px;
2088 border-radius: 5px;
2089 margin: 2px;
2090 background: #44a9db;
2091 line-height: 13px;
2092 font-size: 13px;
2093 color: #fff;
2094 }
2095
2096 .pagelayer-dark .pagelayer-elp-multiselect-selected{
2097 color: #777;
2098 background: #ffffff;
2099 }
2100
2101 .pagelayer-elp-multiselect{
2102 display: flex;
2103 flex-wrap: wrap;
2104 padding: 5px;
2105 border-radius: 3px;
2106 }
2107
2108 /* Pagelayer Multi Select Property end*/
2109
2110 .pagelayer-elp-multi_image{
2111 padding: 3px;
2112 width: 60%;
2113 margin: 5px auto;
2114 border: 1px solid #d5dadf;
2115 position: relative;
2116 text-align: center;
2117 background: #4CBCDF;
2118 color: #fff;
2119 font-size: 13px;
2120 cursor: pointer;
2121 }
2122
2123 .pagelayer-elp-multi_image{
2124 height: 100%;
2125 -webkit-background-size: cover;
2126 background-size: cover;
2127 background-position: 50%;
2128 }
2129
2130 .pagelayer-elp-multi_image-thumbs{
2131 margin-top:10px;
2132 }
2133
2134 .pagelayer-elp-multi_image-thumb{
2135 display: inline-block;
2136 width: 44px;
2137 height: 44px;
2138 background-size: cover;
2139 background-position: 50% 50%;
2140 margin: 0 7px 0 0;
2141 border: 2px solid #d5dadf;
2142 }
2143
2144 .pagelayer-grid-columns-1 .pagelayer-grid-item{
2145 width: 100%;
2146 }
2147
2148 .pagelayer-grid-columns-2 .pagelayer-grid-item{
2149 width: 50%;
2150 }
2151
2152 .pagelayer-grid-columns-3 .pagelayer-grid-item{
2153 width: 33%;
2154 }
2155
2156 .pagelayer-grid-columns-4 .pagelayer-grid-item{
2157 width: 25%;
2158 }
2159
2160 .pagelayer-grid-columns-5 .pagelayer-grid-item{
2161 width: 20%;
2162 }
2163
2164 .pagelayer-grid-columns-6 .pagelayer-grid-item{
2165 width: 16%;
2166 }
2167
2168 .pagelayer-grid-columns-7 .pagelayer-grid-item{
2169 width: 14%;
2170 }
2171
2172 .pagelayer-grid-columns-8 .pagelayer-grid-item{
2173 width: 12%;
2174 }
2175
2176 .pagelayer-grid-columns-9 .pagelayer-grid-item{
2177 width: 11%;
2178 }
2179
2180 .pagelayer-grid-columns-10 .pagelayer-grid-item{
2181 width: 10%;
2182 }
2183
2184 .pagelayer-grid-item{
2185 float: left;
2186 }
2187
2188 .pagelayer-elp-audio-div,
2189 .pagelayer-elp-media-div,
2190 .pagelayer-elp-video-div {
2191 display: flex !important;
2192 align-items: stretch !important;
2193 width: 100% !important;
2194 position: relative !important;
2195 box-sizing: border-box !important;
2196 }
2197
2198 .pagelayer-elp-audio-div input.pagelayer-elp-audio,
2199 .pagelayer-elp-media-div input.pagelayer-elp-media,
2200 .pagelayer-elp-video-div input.pagelayer-elp-video {
2201 flex: 1 1 auto !important;
2202 width: 0 !important;
2203 height: 32px !important;
2204 border: 1px solid #cbd5e1 !important;
2205 border-right: none !important;
2206 border-radius: 6px 0 0 6px !important;
2207 box-sizing: border-box !important;
2208 padding: 6px 10px !important;
2209 font-size: 13px !important;
2210 background-color: #ffffff !important;
2211 margin: 0 !important;
2212 }
2213
2214 .pagelayer-elp-audio-div i.pli,
2215 .pagelayer-elp-media-div i.pli,
2216 .pagelayer-elp-video-div i.pli {
2217 flex: 0 0 auto !important;
2218 width: 36px !important;
2219 height: 32px !important;
2220 border: 1px solid #cbd5e1 !important;
2221 border-radius: 0 6px 6px 0 !important;
2222 box-sizing: border-box !important;
2223 background-color: #f8fafc !important;
2224 color: #64748b !important;
2225 cursor: pointer !important;
2226 display: flex !important;
2227 align-items: center !important;
2228 justify-content: center !important;
2229 margin: 0 !important;
2230 position: static !important;
2231 font-size: 14px !important;
2232 line-height: normal !important;
2233 transition: background-color 0.15s ease, color 0.15s ease !important;
2234 }
2235
2236 .pagelayer-elp-audio-div i.pli:hover,
2237 .pagelayer-elp-media-div i.pli:hover,
2238 .pagelayer-elp-video-div i.pli:hover {
2239 background-color: #f1f5f9 !important;
2240 color: #2563eb !important;
2241 }
2242
2243 /* Focus states */
2244 .pagelayer-elp-audio-div:focus-within input,
2245 .pagelayer-elp-media-div:focus-within input,
2246 .pagelayer-elp-video-div:focus-within input {
2247 border-color: #2563eb !important;
2248 }
2249
2250 .pagelayer-elp-audio-div:focus-within i.pli,
2251 .pagelayer-elp-media-div:focus-within i.pli,
2252 .pagelayer-elp-video-div:focus-within i.pli {
2253 border-color: #2563eb !important;
2254 }
2255
2256 /* Dark Mode*/
2257 .pagelayer-dark .pagelayer-elp-audio-div input.pagelayer-elp-audio,
2258 .pagelayer-dark .pagelayer-elp-media-div input.pagelayer-elp-media,
2259 .pagelayer-dark .pagelayer-elp-video-div input.pagelayer-elp-video {
2260 border-color: #334155 !important;
2261 background-color: #131926 !important;
2262 color: #f8fafc !important;
2263 }
2264
2265 .pagelayer-dark .pagelayer-elp-audio-div i.pli,
2266 .pagelayer-dark .pagelayer-elp-media-div i.pli,
2267 .pagelayer-dark .pagelayer-elp-video-div i.pli {
2268 border-color: #334155 !important;
2269 background-color: #1e1e24 !important;
2270 color: #94a3b8 !important;
2271 }
2272
2273 .pagelayer-dark .pagelayer-elp-audio-div i.pli:hover,
2274 .pagelayer-dark .pagelayer-elp-media-div i.pli:hover,
2275 .pagelayer-dark .pagelayer-elp-video-div i.pli:hover {
2276 background-color: #2d2d34 !important;
2277 color: #3b82f6 !important;
2278 }
2279
2280 .pagelayer-dark .pagelayer-elp-audio-div:focus-within input,
2281 .pagelayer-dark .pagelayer-elp-media-div:focus-within input,
2282 .pagelayer-dark .pagelayer-elp-video-div:focus-within input,
2283 .pagelayer-dark .pagelayer-elp-audio-div:focus-within i.pli,
2284 .pagelayer-dark .pagelayer-elp-media-div:focus-within i.pli,
2285 .pagelayer-dark .pagelayer-elp-video-div:focus-within i.pli {
2286 border-color: #2563eb !important;
2287 }
2288
2289 .pagelayer-elp-audio-insert,
2290 .pagelayer-elp-media-select{
2291 position: absolute;
2292 top: 0;
2293 right: 0;
2294 background-color: #000;
2295 height: 100%;
2296 width: 40px;
2297 -webkit-box-sizing: content-box;
2298 -moz-box-sizing: content-box;
2299 box-sizing: content-box;
2300 }
2301
2302 .pagelayer-elp-shadow-div,
2303 .pagelayer-elp-typo-div,
2304 .pagelayer-elp-filter-div{
2305 padding: 0px 10px;
2306 box-shadow: 0px 0px 13px rgba(0,0,0,.3);
2307 position: relative;
2308 margin-top: 8px;
2309 border: 1px solid #ddd;
2310 display: none;
2311 position: absolute;
2312 background-color: #fff;
2313 width: 86%;
2314 z-index: 12;
2315 }
2316
2317 .pagelayer-typo-default{
2318 display:none;
2319 width: 20px;
2320 height: 20px;
2321 cursor: pointer;
2322 margin-left: 4px;
2323 }
2324
2325 .pagelayer-global-on .pagelayer-elp-typo:not([pagelayer-set-global]):hover .pagelayer-typo-default{
2326 display: inline-block;
2327 }
2328
2329 .pagelayer-dark .pagelayer-elp-shadow-div,
2330 .pagelayer-dark .pagelayer-elp-typo-div,
2331 .pagelayer-dark .pagelayer-elp-filter-div{
2332 background-color:#252529;
2333 }
2334
2335
2336 .pagelayer-prop-edit{
2337 padding: 7px;
2338 border: 1px solid #3e8ca4;
2339 width: 20px;
2340 position: absolute;
2341 top: 7px;
2342 right: 11px;
2343 text-align: center;
2344 cursor: pointer;
2345 border-radius: 3px;
2346 }
2347
2348 .pagelayer-prop-edit i{
2349 font-size: 14px;
2350 color: #484848;
2351 }
2352
2353 .pagelayer-dark .pagelayer-prop-edit i{
2354 color:#bdbdbd;
2355 }
2356
2357 .pagelayer-prop-show{
2358 display: block;
2359 }
2360
2361 .pagelayer-elp-shadow-color{
2362 padding: 15px 0px !important;
2363 }
2364
2365 .pagelayer-elp-shadow-color .pagelayer-elp-color-div{
2366 top:7px;
2367 }
2368
2369 .pagelayer-elp-typo,
2370 .pagelayer-elp-prop-grp{
2371 margin: 0px;
2372 padding: 10px 0;
2373 position: relative;
2374 border-bottom: 1px dashed #ccc;
2375 display: flex;
2376 align-items: center;
2377 }
2378
2379 .pagelayer-elp-typo-fonts{
2380 padding: 10px 0;
2381 }
2382
2383 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
2384 padding: 5px 0;
2385 display: flex;
2386 align-items: center;
2387 justify-content: space-between;
2388 }
2389
2390 .pagelayer-elp-gradient-div .pagelayer-elp-label{
2391 width: auto !important;
2392 }
2393
2394 .pagelayer-elp-gradient-input{
2395 width: 65px !important;
2396 text-align: center;
2397 }
2398
2399 .pagelayer-elp-gradient-color{
2400 padding: 15px 0px !important;
2401 }
2402
2403 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
2404 right: 0;
2405 }
2406
2407 .pagelayer-elp-typo-fonts .pagelayer-elp-label,
2408 .pagelayer-elp-typo .pagelayer-elp-label,
2409 .pagelayer-elp-typo .pagelayer-elp-typo-input,
2410 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
2411 .pagelayer-elp-shadow-div .pagelayer-elp-label,
2412 .pagelayer-elp-prop-grp>label, .pagelayer-elp-prop-grp>input{
2413 width: 50%;
2414 }
2415
2416 .pagelayer-elp-filter-div .pagelayer-elp-label{
2417 width:40%;
2418 text-transform: capitalize;
2419 }
2420
2421 .pagelayer-elp-filter-div .pagelayer-elp-filter-val{
2422 float:right;
2423 width:10%;
2424 font-size:13px;
2425 text-align: right;
2426 }
2427
2428 .pagelayer-elp-filter-input{
2429 background-position: center center !important;
2430 background-size: cover !important;
2431 width: 50% !important;
2432 }
2433
2434 .pagelayer-elp-filter-blur .pagelayer-elp-filter-input{
2435 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAKCAIAAAC2Wq7lAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABq9JREFUeJyVlmtvHGcZhnfOszs7u+s9ENtrI9eqHbWJKSSIlBz4QD/mFxQpUvlSviTKb4nyC4qI/0HkCCgijapQQJBDUe04uPEh69re887OeXa43l2wjNsK+toejd/Dc7if+7nfUTMnhiRJGxsbS0tLk3/TNL1+/fra2hrzvPO8c+fOzZs3eZlsuHv37u3btydL5XL5xo0bv/rwwzeXl9Ikff16b+3Bg3v3fvPs6bMwiqbPTF/92ZX33//FpUvvFoulfq/7ycOHH/36o4d//MRxBpZlrays/PKDD35y6d36XN31gid//9tvf/+7x59+2mg0dF1fXlq6cuXylWvXzp07Z1mFXrfz4MHaxx//YfPFJsZnpqdXfnD+xxcvnHv7fC6fazVbX6x/8fTpsxebm439fU2RL1648NPLl996620rb3W73a1/bj198qTf7w+HQ1mWK5XqwsLC4uIbc3PzZGGYpnoSFNI7hdHJ+cnzePLUkpSRcCBl+M2MmMiMt6X8iCOSzIIcR3E6GmVGYrBDVbSJH1lRVE1jb5ImSRJHYRDFIYYUVcWmooi/NMPxxHN9TdWTUYJFlaEpo1Ey9ithM0wiY5TESYJ5JnVVsy0rCAMiGKWjGMsRxiN84F04HdtniLNh6HpD3cV4pE7yPAXHdx0AJSsydoAjEYOcE/AAJwInYk3TFUmJRUj8BmEYEAd14xSR6brBIALf87udnuP0Qz9UJNk09FwuB1N0zQBkTkErUPA8V1Uk3dBY5bhh6rgOwngwcMjQ9704jgEym8vaUUHxXFCnHr7rEtbQdclfkSRN1UamqcgCGvY7w2Gn3QY2w/hvpvzP8Y3YaZqmKEo2m6V6QeA3j5ps6/UHVCyXs6q1ipRK5UpFMwzHcZuHRy7+3SGh66o+NTWVy+aKpSIjDMJWu+UMnTiISF5RlalyGWRVTS8UberW7fb2Gw3o7flelMRWLletVuM4sW2bzFzPPTo88L3hYIBxn5DsQkFVVDvOg6rn+c1WS9XUoQMsrgLfMikuqCTPKI4H/T5wD5wh7FOXl5dPpkoPZ/7TI8yXSiUkZqIazERRtLm5ebwK5Kx+f34eOArFAqX7/PN/sEYvhUHgDoeLiwv1+kwmIxMWiR8eHv75r3+hG8DLGQyKUyWEAmJTq0ql0h/0Xmxs0gppOgr8APq8sbBQn63Td1SPIn/1VaPdbkEB2if0Pdsu6JrOvGgjVe11up7r8g5RAUXT1XKplNgFyKtrGgoSBPRRZiTaM6JzsZOKSDOQKwrDbg+GOmO+y+r6+vpJFM6ePUvaxxjdv39/dXX1mCbIKiAer966dQthfvnyJe8k/OjRo9XVewHM1xTKuLi4ePXqtWKhQBsBEHB/+erVZ5/9icY2dL1aq62snH/vvZ+riuIF/u727s7Oq3bnS/BCROx8ng1z9Xo2myNJ+gISbW/vuq4DNci8YNsz0zPWzKysSHgE4k67gyiQHt1ocz6fL+RtpIoeBqz2mIMoGq2IzaxpGYomKRJZoTXoTuQQVyhUD5RPCufXxeXU6td7h0nIIgTCsh4/fry9s7O7vaPq2vSZM3VIMjMDymw6OjwcOA6RPX/+nILYBfvijy5C/nfe+aGZNTutdhxGGxvrW1tbFBnI5ufnZ2frXAe1ahV67uy9braahwcHjf0GG/JWntU3l5bn6rOarnGh+J4HF/YPGv3+oFCwOVgqTnHNWfm8Zuh7O7ugtvd6j7zptVqtlsvm6XpVVwGFvsNFr99z+gPXE3r03TTl24agnCbwTeKYhleiwPeLIGUY+qThCRo+kw+hkwMt44d+LitqZuWsJIooLPVAjziezZrgpQpRsCu1KlrT6XSoFaU+ah6hCHE5LpWn2MbT0HTuG2jv+m6r2ez1+3RfrfY9lAKbpakSXg729yFjt9MlAHhB37GHypkml1WC7KOvQ8dpddqD3iCMwtOgfCMd/g9QRGdK8r9Pi9tnNLm/meTuU4SkISVQfzxgKfCNnbEuIaW6afDmieEyzU6eKJGhm7xABzkViuaLdS/MR5mxwIML9xo/7EEsh8gpIwjxgDvDFIhTDFzgjoWh5xqmkaRxmqGPVNM0Y24iWVznrDoDB0wxoPK/NB6Zb7lcjsfxd8rJbccaLGUmZmTesUnSkw8YMS+WBGbEmo4H6bFH3Nniw0boP1o4/npJyI1bQHzfjIGGAjIfInQ/oScjUBWWU1IyIKAi8YcEKSIqnEZjGyPxoYJZ7hGuv3gUTeJEnpMoGX8riY8n4skqemRIqixAoAxQBtCHvvcv+qJRH7fzah8AAAAASUVORK5CYII=') !important;
2436 }
2437
2438 .pagelayer-elp-filter-contrast input{
2439 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAKCAMAAAAU2ikOAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAklQTFRFAAAAAgICAwMDBAQEBgYGCAgICwsLAQEBISEhJSUlKioqLy8vNDQ0WFhYXl5eZWVla2trcXFxmpqaoKCgpqamra2ts7OzJiYm1dXV2dnZ3t7e4uLi5ubm2tra+/v7/Pz8/f39/v7+////BQUFBwcHGhoaHh4eIyMjJycnLCwsTk5OVFRUWlpaYWFhaGhoj4+PlpaWnZ2do6Ojqqqqzc3N0tLS19fX3Nzc4ODg9/f3+vr6FBQUGBgYHBwcICAgRUVFS0tLUVFRV1dXhYWFjIyMkpKSmZmZn5+fxMTEysrKz8/P1NTU9PT09vb2+fn5Dw8PEhISFhYWPDw8QUFBSEhIe3t7goKCiIiIu7u7wcHBx8fHzMzM0dHR7+/v8vLy9fX1CgoKDQ0NEBAQFxcXOTk5Pj4+SkpKd3d3fn5+i4uLsrKyuLi4vr6+ycnJ6urq7e3t8PDw8/PzBQYHBQUGBAQFAwMEAgMDFRUVGRkZHR0dIiIiR0dHTU1NYGBglZWVm5uboqKixsbG1tbW29vbBgcIBAUGAwQFExMTGxsbHx8fREREUFBQVlZWhISEkZGRmJiYvb29w8PDzs7O09PT+Pj4AAABDAwMDg4OERERNTU1Ozs7RkZGTExMdHR0enp6gICAjo6OJCQktLS0urq6wMDAy8vL6+vr7u7uAQECLS0tMjIyODg4Q0NDaWlpcHBwdnZ2fX19q6ursbGxt7e35eXl6enpCQkJKysrMDAwX19fbGxsc3NzeXl5oaGhqKiorq6u39/f4+Pj5+fnrIREkAAAAeZJREFUeJxd0Pk/FHEcx/Hv7OLblrvD1S675cjKolJLOVJSIVKtctOKStaQIyKZEuWqJEI50h0lkXT5yzLvT4N2fpnnYx6Pz+vxmQ9jK4+gUjs4OgmMM2GDZuMmZ8jF1c3dQyXLc/OWrdu8ZHn7+Ppth7Q6/wA9yWAwQBxieLig2rGTywgMCg7ZBYUaw3aHQ6aIyKg9Gll790XvPwBpzTG6AJKcWRP7V+QqNRB78FCcBopPSDzsCiUdOZp8DB9Tjp846QNpU9PSY0j2Qa4sidepjMzAIOh01plQI3T2nMUUgeHs8xdycimTl19gXg0a1sQEzinKUS4sKo4tgZwvWuNLIY9LZUnlGLl85WpKBQ1fq7RV/b8hiYnVNddr+eolobr6hhshUGOTMewmZDE1t9zCXGtO7u02KhSY03V2VSaJ4p27TDkl/Xdxe8m9DsjaWXr/AVTWVd7dg5HevoqHjyhjq0p7bPffTJIksRrqZ8pBnww8rauHBoeyng1DI6PPLS/GZI1PTLa+hNqmXuWnkuTgmBKUROg1VxZ1XLlkO/Tm7Tvre+jDx+mZLuzw6fNsbx/t9WWu0kbSr99QkpCqFXg/BdUOX50G8M1rfmFwCPrmtvh9CSM/fv4an6DM7z/LUyR/vZ5u+BdDtnhZvafUoAAAAABJRU5ErkJggg==') !important;
2440 }
2441
2442 .pagelayer-elp-filter-brightness input{
2443 background-image: linear-gradient(90deg,#000,#fff);
2444 }
2445
2446 .pagelayer-elp-filter-grayscale input{
2447 background-image: linear-gradient(90deg, rgba(203,20,106,1) 0%, rgba(88,88,88,1) 56%);
2448 }
2449
2450 .pagelayer-elp-filter-hue input{
2451 background-image: linear-gradient(90deg,red,orange,#ff0,#adff2f,#32cd32,#00bfff,blue,#9400d3 95%);
2452 }
2453
2454 .pagelayer-elp-filter-saturate input{
2455 background-image: linear-gradient(90deg,gray,red);
2456 }
2457
2458 .pagelayer-elp-filter-opacity input{
2459 background-image: linear-gradient(90deg,#fff,#000);
2460 }
2461
2462 .pagelayer-elp-typo-fonts .pagelayer-elp-label,
2463 .pagelayer-elp-typo .pagelayer-elp-label{
2464 font-weight: 600;
2465 font-size: 11px;
2466 color: #555;
2467 }
2468
2469 .pagelayer-elp-global-typo{
2470 box-shadow: 0 2px 2px -1px #d2cfce;
2471 margin: -10px -10px 0 -10px;
2472 padding: 8px 10px;
2473 display: flex;
2474 }
2475
2476 [pagelayer-screen-mode="desktop"] [pagelayer-show-device]:not([pagelayer-show-device="desktop"]),
2477 [pagelayer-screen-mode="tablet"] [pagelayer-show-device]:not([pagelayer-show-device="tablet"]),
2478 [pagelayer-screen-mode="mobile"] [pagelayer-show-device]:not([pagelayer-show-device="mobile"]){
2479 display:none;
2480 }
2481
2482 .pagelayer-elp-global-typo .pagelayer-elp-typo-icons{
2483 text-align: right;
2484 width: 50%;
2485 }
2486
2487 .pagelayer-elp-global-typo .pagelayer-global-font-list{
2488 width: 100%;
2489 }
2490
2491 .pagelayer-elp-typo-icons .pagelayer-elp-global-icon{
2492 margin-right: 10px;
2493 cursor: pointer;
2494 }
2495
2496 .pagelayer-dark .pagelayer-elp-typo .pagelayer-elp-label{
2497 color:#bdbdbd;
2498 }
2499
2500 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
2501 .pagelayer-elp-typo-input,
2502 .pagelayer-elp-shadow-input{
2503 padding: 3px;
2504 border-radius: 4px !important;
2505 line-height: 23px !important;
2506 }
2507
2508 .pagelayer-dark .pagelayer-elp-typo select.pagelayer-elp-typo-input{
2509 background-color: #252529;
2510 }
2511
2512 .pagelayer-elp-grad-color{
2513 position:relative;
2514 }
2515
2516 /* Left side menu Input related */
2517 .pagelayer-elp-text,
2518 .pagelayer-elp-spinner,
2519 .pagelayer-elp-tinymce-textarea,
2520 .pagelayer-elp-tinymce {
2521 border-radius: 2px !important;
2522 }
2523
2524 .pagelayer-post-type{
2525 text-transform: capitalize;
2526 }
2527
2528 .pagelayer-elp-text{
2529 padding-left:5px;
2530 }
2531
2532 .pagelayer-elp-select-div,
2533 .pagelayer-elp-spinner-div{
2534 width: 50%;
2535 right: 10px;
2536 position: absolute;
2537 top: 7px;
2538 }
2539
2540 .pagelayer-elp-spinner-div{
2541 width:85px;
2542 }
2543
2544 .pagelayer-elp-spinner{
2545 padding: 2px 0 2px 6px;
2546 border-radius: 4px !important;
2547 }
2548
2549 .pagelayer-elp-select {
2550 font-size: 16px;
2551 font-weight: 700;
2552 color: #444;
2553 line-height: 1.3;
2554 padding: 2px 2px 2px 6px;
2555 width: 100%;
2556 max-width: 100%;
2557 margin: 0;
2558 border: 1px solid #aaa;
2559 border-radius: 3px !important;
2560 box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
2561 -moz-appearance: none;
2562 -webkit-appearance: none;
2563 appearance: none;
2564 background-image: linear-gradient(45deg, transparent 50%, #1A9CDB 50%), linear-gradient(135deg, #1A9CDB 50%, transparent 50%);
2565 background-position: right .9em top 50%, right .55em top 50%;
2566 background-size: 5px 5px, 5px 5px;
2567 background-repeat: no-repeat;
2568 }
2569 .pagelayer-elp-select::-ms-expand {
2570 display: none;
2571 }
2572 .pagelayer-elp-select:hover {
2573 border-color: #888;
2574 }
2575 .pagelayer-elp-select:focus {
2576 border-color: #aaa;
2577 box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
2578 box-shadow: 0 0 0 3px -moz-mac-focusring;
2579 color: #222;
2580 outline: none;
2581 }
2582 .pagelayer-elp-select option{
2583 font-weight:normal;
2584 }
2585
2586 .pagelayer-dark .pagelayer-elp-select-div .pagelayer-elp-select,
2587 .pagelayer-dark .pagelayer-elp-typo-input .pagelayer-elp-select,
2588 .pagelayer-dark .pagelayer-parent-category .pagelayer-add-cat{
2589 background-color: #252529;
2590 color:#bdbdbd;
2591 }
2592
2593 .pagelayer-elpd-body input:focus,
2594 .pagelayer-elpd-body textarea:focus,
2595 .pagelayer-elpd-body select:focus {
2596 border-color: #3e8ef7;
2597 box-shadow: unset;
2598 }
2599
2600 .pagelayer-elp-group-item{
2601 border: 1px solid #777;
2602 font-size: 13px;
2603 margin-bottom: 10px;
2604 }
2605
2606 .pagelayer-elp-group-item .pagelayer-form-item{
2607 padding: 10px 0px 10px 0px;
2608 }
2609
2610 .pagelayer-elp-group-item .pagelayer-elp-spinner-div,
2611 .pagelayer-elp-group-item .pagelayer-elp-color-div,
2612 .pagelayer-elp-group-item .pagelayer-elp-color-div-holder{
2613 right: 0px !important;
2614 }
2615
2616 .pagelayer-elp-group-item .pagelayer-elp-select-div{
2617 position: relative !important;
2618 width: 100% !important;
2619 right: auto !important;
2620 left: auto !important;
2621 top: auto !important;
2622 display: block !important;
2623 margin-top: 6px !important;
2624 box-sizing: border-box !important;
2625 }
2626
2627 .pagelayer-elp-group-item .pagelayer-elp-select {
2628 width: 100% !important;
2629 }
2630
2631 .pagelayer-elp-group-item .pagelayer-elp-label-div[type=select] {
2632 width: 100% !important;
2633 }
2634
2635 .pagelayer-elp-group-item .pagelayer-elp-label-div {
2636 display: flex !important;
2637 width: 100% !important;
2638 align-items: center !important;
2639 justify-content: space-between !important;
2640 flex-wrap: nowrap !important;
2641 }
2642
2643 .pagelayer-elp-group-item .pagelayer-elp-label-div .pagelayer-elp-units {
2644 margin-left: auto !important;
2645 }
2646
2647
2648
2649 .pagelayer-elp-group-item-head{
2650 display:flex;
2651 background: #F8F8F8;
2652 }
2653
2654 .pagelayer-dark .pagelayer-elp-group-item-head{
2655 background:#252529;
2656 }
2657
2658 .pagelayer-elp-group-item-head span{
2659 cursor: pointer;
2660 padding: 9px;
2661 display:inline-block;
2662 }
2663
2664 .pagelayer-dark .pagelayer-elp-group-item-head span{
2665 color:#bdbdbd;
2666 }
2667
2668 .pagelayer-elp-group-item-head .pagelayer-elp-group-item-drag:hover {
2669 cursor:all-scroll;
2670 }
2671
2672 .pagelayer-elp-group-item-title{
2673 flex-grow: 100;
2674 white-space: nowrap;
2675 overflow: hidden;
2676 text-overflow: ellipsis;
2677 }
2678
2679 .pagelayer-elp-group-item-del{
2680 float: right;
2681 }
2682
2683 .pagelayer-elp-group-item-body{
2684 display: none;
2685 padding: 7px 10px;
2686 }
2687
2688 .pagelayer-elp-group-item-clone{
2689 padding-right:0px !important;
2690 }
2691
2692 .pagelayer-elp-padding{
2693 width:21% !important;
2694 }
2695
2696 .pagelayer-elp-dimension{
2697 width:42% !important;
2698 }
2699
2700 /* END Element Properties Dialog classes */
2701
2702 /* Widget Parameters */
2703
2704 .pagelayer-widgets-form input,
2705 .pagelayer-widgets-form select,
2706 .pagelayer-widgets-form textarea {
2707 border: 1px solid #ddd;
2708 box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
2709 background-color: #fff;
2710 color: #32373c;
2711 outline: 0;
2712 transition: 50ms border-color ease-in-out;
2713 font-size: 15px !important;
2714 line-height: 150% !important;
2715 }
2716
2717 .pagelayer-widgets-form select{
2718 padding:5px;
2719 }
2720
2721 .pagelayer-widgets-form input[type="checkbox"]{
2722 width: auto !important;
2723 height: auto !important;
2724 display: inline-block !important;
2725 float: left !important;
2726 clear: left !important;
2727 margin: 4px 8px 12px 0 !important;
2728 vertical-align: middle !important;
2729 }
2730
2731 .pagelayer-widgets-form input[type="checkbox"] + label {
2732 display: inline-block !important;
2733 float: left !important;
2734 width: calc(100% - 35px) !important;
2735 margin-bottom: 12px !important;
2736 vertical-align: middle !important;
2737 cursor: pointer !important;
2738 }
2739
2740 .pagelayer-widgets-form p,
2741 .pagelayer-widgets-form li {
2742 display: flow-root !important;
2743 }
2744
2745 .pagelayer-widgets-form{
2746 line-height:150%;
2747 border-top: none;
2748 padding: 8px;
2749 }
2750
2751 .pagelayer-dark .pagelayer-widgets-form label{
2752 color:#bdbdbd;
2753 }
2754
2755 .pagelayer-dark .pagelayer-widgets-form input,
2756 .pagelayer-dark .pagelayer-widgets-form select,
2757 .pagelayer-dark .pagelayer-widgets-form textarea {
2758 color:#bdbdbd;
2759 background-color:#1c1c1f;
2760 border:1px solid #6e6d6d;
2761 }
2762
2763 /* End Widget Parameters */
2764
2765 .trumbowyg-box{
2766 margin-top:0px !important;
2767 }
2768
2769 .trumbowyg-editor{
2770 min-height: 250px !important;
2771 padding: 10px !important;
2772 }
2773
2774 /* Pagelayer Left bar */
2775
2776 .pagelayer-topbar-holder{
2777 background-color: #4CB5E8;
2778 position:relative;
2779 animation: colorchange 30s infinite alternate;
2780 -webkit-animation: colorchange 30s infinite alternate;
2781 }
2782
2783 @keyframes colorchange{
2784 0% {background: #3e0772;}
2785 25% {background: #209ce2;}
2786 50% {background: #00838c;}
2787 75% {background: #088dce;}
2788 100% {background: #3d5afe;}
2789 }
2790
2791 .pagelayer-topbar-mover{
2792 cursor: all-scroll;
2793 }
2794
2795 /* Sidebar top header bar */
2796 td.pagelayer-topbar-holder {
2797 background: #26292c !important;
2798 border-bottom: 1px solid #1f2124 !important;
2799 height: 50px !important;
2800 display: flex !important;
2801 align-items: center !important;
2802 justify-content: space-between !important;
2803 padding: 0 15px !important;
2804 box-sizing: border-box !important;
2805 }
2806
2807 .pagelayer-logo{
2808 font-size:18px;
2809 font-weight: bold;
2810 display: block;
2811 text-align:center;
2812 vertical-align:middle;
2813 color:#fff;
2814 width:76%;
2815 }
2816
2817 .pagelayer-logo-text{
2818 font-weight: bold;
2819 margin-left: 5px;
2820 line-height: normal;
2821 vertical-align: super;
2822 }
2823
2824 .pagelayer-settings-icon{
2825 padding-right:10px;
2826 cursor: pointer;
2827 position: absolute;
2828 right: 5px;
2829 top: 50%;
2830 transform: translateY(-50%);
2831 }
2832
2833 .pagelayer-options-icon{
2834 padding-left:10px;
2835 cursor: pointer;
2836 position: absolute;
2837 left: 5px;
2838 top: 50%;
2839 transform: translateY(-50%);
2840 font-size: 18px !important;
2841 color: #ffffff;
2842 }
2843
2844 .pagelayer-leftbar{
2845 width:270px !important;
2846 padding-top:0;
2847 background-color: #E3E3E3;
2848 overflow: hidden;
2849 background: -moz-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ff3.6+ */
2850 background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(191,202,214,1)), color-stop(100%, rgba(222,222,222,1))); /* safari4+,chrome */
2851 background: -webkit-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* safari5.1+,chrome10+ */
2852 background: -o-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* opera 11.10+ */
2853 background: -ms-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ie10+ */
2854 background: linear-gradient(226deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* w3c */
2855 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BFCAD6', endColorstr='#DEDEDE',GradientType=1 ); /* ie6-9 */
2856 }
2857
2858 .pagelayer-dark .pagelayer-leftbar{
2859 background: unset !important;
2860 background-color: #1c1c1f !important;
2861 }
2862
2863 .pagelayer-leftbar-search{
2864 text-align:center;
2865 margin: 20px 40px 10px 25px;
2866 position:relative;
2867 }
2868
2869 .pagelayer-search-field{
2870 width:100%;
2871 line-height:120%;
2872 padding: 5px 20px 5px 30px;
2873 border-radius: 5px;
2874 border: none;
2875 font-size: 14px;
2876 height:30px;
2877 }
2878
2879 .pagelayer-widget-search .pli,
2880 .pagelayer-leftbar-search .pli{
2881 position: absolute;
2882 top: 0;
2883 height: 30px;
2884 padding: 0 7px;
2885 color: #666;
2886 line-height: 30px;
2887 }
2888
2889 .pagelayer-widget-search .pagelayer-sf-empty,
2890 .pagelayer-leftbar-search .pagelayer-sf-empty{
2891 right:0;
2892 left:auto;
2893 font-weight:bolder;
2894 cursor:pointer;
2895 }
2896
2897 .pagelayer-widget-group,
2898 .pagelayer-leftbar-group{
2899 width: 100%;
2900 background-repeat: no-repeat;
2901 background-position: center;
2902 font-size: 11px !important;
2903 color: #442E2E;
2904 clear: both;
2905 text-align: center;
2906 font-family: Roboto, 'Open Sans', Arial, sans-serif !important;
2907 margin-bottom: 2px;
2908 }
2909
2910 .pagelayer-widget-group h5,
2911 .pagelayer-leftbar-group h5{
2912 font-size: 11px;
2913 line-height: 20px;
2914 text-transform: uppercase;
2915 color: #777;
2916 padding: 5px 0 3px;
2917 margin: 5px;
2918 }
2919
2920 .pagelayer-widget-group h5:only-child,
2921 .pagelayer-leftbar-group h5:only-child{
2922 display: none;
2923 }
2924
2925 .pagelayer-global-widget-pro{
2926 text-align: center;
2927 margin-right: 10px;
2928 padding-top: 20px;
2929 font-size: 14px;
2930 }
2931
2932 .pagelayer-shortcode-holder,
2933 .pagelayer-shortcode-drag{
2934 width: 100px !important;
2935 height:67px !important;
2936 margin-bottom:12px;
2937 margin-left:12px;
2938 background-color: #FFFFFF;
2939 border-radius: 4px;
2940 float: left;
2941 transition: all 0.1s;
2942 }
2943
2944 .pagelayer-dark .pagelayer-shortcode-drag,
2945 .pagelayer-dark .pagelayer-shortcode-drag:hover{
2946 background-color:#252529;
2947 box-shadow:0 0.5rem 1rem #00000026;
2948 }
2949
2950 .pagelayer-shortcode-holder:hover,
2951 .pagelayer-shortcode-drag:hover{
2952 transform: scale(1.06);
2953 }
2954
2955 .pagelayer-sc{
2956 padding: 4px !important;
2957 margin: 4px auto 0 auto !important;
2958 cursor: move;
2959 }
2960
2961 .pagelayer-shortcode-inner{
2962 height: 25px;
2963 padding: 0px !important;
2964 }
2965
2966 .pagelayer-shortcode-text{
2967 display: -webkit-box;
2968 -webkit-box-orient: vertical;
2969 -webkit-line-clamp: 3;
2970 font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
2971 font-size: 11px !important;
2972 font-style: normal;
2973 line-height: 125%;
2974 margin: 0;
2975 overflow: hidden;
2976 cursor: move;
2977 text-overflow: ellipsis;
2978 text-align: center;
2979 width: 100%;
2980 margin-top: 3px;
2981 color: #777;
2982 transition: all 0.3s;
2983 padding:1px;
2984 }
2985
2986 .pagelayer-leftbar-search-empty{
2987 display: none;
2988 padding: 40px;
2989 text-align: center;
2990 color: #777;
2991 font-family: 'Roboto';
2992 }
2993
2994 .pagelayer-leftbar-search-empty p{
2995 margin: 8px;
2996 }
2997
2998 .pagelayer-leftbar-search-empty .fa-sad-tear{
2999 font-size: 24px;
3000 }
3001
3002 .pagelayer-dark .pagelayer-shortcode-text{
3003 color: #bdbdbd;
3004 }
3005
3006 .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
3007 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
3008 color: #2563eb;
3009 }
3010
3011 .pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
3012 .pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
3013 color: #2563eb;
3014 }
3015
3016 /* Trumbowyg color widget style */
3017 .trumbowyg-dropdown-foreColor,
3018 .trumbowyg-dropdown-backColor {
3019 width: 100% !important;
3020 max-width: 250px !important;
3021 padding: 7px 5px;
3022 left:0 !important;
3023 }
3024
3025 .trumbowyg-dropdown-foreColor svg,
3026 .trumbowyg-dropdown-backColor svg {
3027 display: none !important;
3028 }
3029
3030 .trumbowyg-dropdown-foreColor button[type="button"],
3031 .trumbowyg-dropdown-backColor button[type="button"] {
3032 display: block;
3033 position: relative;
3034 float: left;
3035 text-indent: -9999px;
3036 height: 20px;
3037 width: 20px;
3038 max-height:27px;
3039 max-width:27px;
3040 border: 1px solid #333;
3041 padding: 0;
3042 margin: 2px;
3043 }
3044
3045 .trumbowyg-dropdown-foreColor button[type="button"]:hover::after,
3046 .trumbowyg-dropdown-backColor button[type="button"]:hover::after,
3047 .trumbowyg-dropdown-foreColor button[type="button"]:focus::after,
3048 .trumbowyg-dropdown-backColor button[type="button"]:focus::after{
3049 content: " ";
3050 display: block;
3051 position: absolute;
3052 top: -5px;
3053 left: -5px;
3054 height: 27px;
3055 width: 27px;
3056 max-width:27px;
3057 background: inherit;
3058 border: 1px solid #FFF;
3059 box-shadow: #000 0 0 2px;
3060 z-index: 10;
3061 }
3062
3063 .trumbowyg-dropdown-fontsize,
3064 .trumbowyg-dropdown-lineheight,
3065 .trumbowyg-dropdown-fontfamily{
3066 height: 200px;
3067 overflow: auto;
3068 }
3069
3070 /* Trumbowyg color widget style end */
3071
3072 /* Pagelayer history style*/
3073
3074 .pagelayer-revision-holder,
3075 .pagelayer-history-holder{
3076 border: 1px solid #b7b5b5fa;
3077 margin-bottom: 10px;
3078 padding: 10px;
3079 display: -webkit-box;
3080 display: -webkit-flex;
3081 display: -ms-flexbox;
3082 display: flex;
3083 -webkit-box-align: center;
3084 -webkit-align-items: center;
3085 -ms-flex-align: center;
3086 align-items: center;
3087 font-size: 12px;
3088 color:#505050;
3089 }
3090
3091 .pagelayer-leftbar-tab,
3092 .pagelayer-history,
3093 .pagelayer-history-hidden{
3094 display:none;
3095 }
3096
3097 .pagelayer-revision-holder:hover,
3098 .pagelayer-history-holder:hover,
3099 .pagelayer-history-holder.current_active_item{
3100 background-color:#efefef;
3101 }
3102
3103 .pagelayer-revision-img-holder{
3104 border-radius: 50%;
3105 overflow: hidden;
3106 margin-right:10px;
3107 }
3108
3109 .pagelayer-revision-detail-holder,
3110 .pagelayer-history-detail-holder{
3111 flex:1;
3112 }
3113
3114 .pagelayer-revision-holder .pagelayer-revision-delete,
3115 .pagelayer-history-holder .pagelayer-history-check{
3116 display:none;
3117 }
3118
3119 .pagelayer-revision-holder:hover .pagelayer-revision-delete,
3120 .pagelayer-history-holder.current_active_item .pagelayer-history-check{
3121 display:block;
3122 }
3123
3124 .pagelayer-revision-delete:hover{
3125 cursor:pointer;
3126 }
3127
3128 .pagelayer-revision-img-holder img{
3129 max-width: 100%;
3130 width: 20px;
3131 height: 20px;
3132 }
3133
3134 .pagelayer-history-holder span{
3135 margin-right:5px;
3136 }
3137
3138 /* Pagelayer history end*/
3139
3140 /* Pagelayer General options*/
3141 .pagelayer-general-options{
3142 color: #777;
3143 background-color: #FFFFFF;
3144 font-size: 14px;
3145 }
3146
3147 .pagelayer-general-options .pagelayer-option-holder{
3148 display: flex !important;
3149 align-items: center !important;
3150 padding: 10px;
3151 border-radius: 4px;
3152 transition: all 0.1s;
3153 margin-bottom:4px;
3154 cursor: pointer;
3155 }
3156
3157 .pagelayer-general-options .pagelayer-option-holder i{
3158 margin: 0 10px;
3159 }
3160
3161 .pagelayer-general-options .pagelayer-option-holder:hover{
3162 color: #3b82f6;
3163 background: #f1f5f9;
3164 }
3165
3166 .pagelayer-dark .pagelayer-general-options .pagelayer-option-holder:hover {
3167 color: #60a5fa !important;
3168 background: #1e293b !important;
3169 }
3170
3171 .pagelayer-general-options .pagelayer-option-holder:active{
3172 transform: scale(0.97);
3173 cursor: progress;
3174 }
3175
3176 .pagelayer-general-options .pagelayer-options-sections{
3177 padding: 10px;
3178 }
3179
3180 .pagelayer-general-options .pagelayer-options-sections:not(:last-child){
3181 border-bottom: 1px solid #ebebeb;
3182 }
3183
3184 .pagelayer-general-options h5{
3185 font-size: 11px;
3186 text-transform: uppercase;
3187 color: #777;
3188 margin: 15px 5px;
3189 }
3190
3191 /* Pagelayer General options end*/
3192
3193 /* Pagelayer settings*/
3194
3195 .pagelayer-post-settings-holder{
3196 border:1px solid #d3d3d3;
3197 font-size: 14px;
3198 line-height: 150%;
3199 }
3200
3201 .pagelayer-post-settings-acc{
3202 background-color:#fff;
3203 }
3204
3205 .pagelayer-post-settings-apply{
3206 font-size: 14px;
3207 font-weight: bold;
3208 cursor: pointer;
3209 border-radius: 2px;
3210 padding: 4px 8px;
3211 margin: auto 5px;
3212 }
3213
3214 .pagelayer-post-settings-apply[disabled]{
3215 opacity:0.5;
3216 }
3217
3218 .pagelayer-post-settings-acc{
3219 margin-top:7px;
3220 }
3221
3222 .pagelayer-post-settings-fields{
3223 padding:10px;
3224 display:none;
3225 }
3226
3227 .pagelayer-post-settings-lable{
3228 border:1px solid #d3d3d3;
3229 padding:10px;
3230 cursor:pointer;
3231 }
3232
3233 .pagelayer-toggle{
3234 float:right;
3235 }
3236
3237 .pagelayer-toggle:not(.pagelayer-open):before{
3238 content: "\f0da";
3239 }
3240
3241 .pagelayer-toggle.pagelayer-open:before{
3242 content: "\f0d7";
3243 }
3244
3245 .pagelayer-post-settings-fields label{
3246 display:block;
3247 margin:7px 0;
3248 }
3249
3250 /* Pagelayer settings end*/
3251
3252 /*Tooltip TLITE CSS : https://github.com/chrisdavies/tlite */
3253 .pagelayer-tlite {
3254 background: #111;
3255 color: white;
3256 font-family: sans-serif;
3257 font-size: 0.8rem;
3258 font-weight: normal;
3259 text-decoration: none;
3260 text-align: left;
3261 padding: 0.6em 0.75rem;
3262 border-radius: 4px;
3263 position: absolute;
3264 opacity: 0;
3265 visibility: hidden;
3266 transition: opacity 0.4s;
3267 white-space: nowrap;
3268 box-shadow: 0 0.5rem 1rem -0.5rem black;
3269 z-index: 1000;
3270 -webkit-backface-visibility: hidden;
3271 }
3272
3273 .pagelayer-tlite-table td,
3274 .pagelayer-tlite-table th {
3275 position: relative;
3276 }
3277
3278 .pagelayer-tlite-visible {
3279 visibility: visible;
3280 opacity: 0.9;
3281 }
3282
3283 .pagelayer-tlite::before {
3284 content: ' ';
3285 display: block;
3286 background: inherit;
3287 width: 10px;
3288 height: 10px;
3289 position: absolute;
3290 transform: rotate(45deg);
3291 }
3292
3293 .pagelayer-tlite-n::before {
3294 top: -3px;
3295 left: 50%;
3296 margin-left: -5px;
3297 }
3298
3299 .pagelayer-tlite-nw::before {
3300 top: -3px;
3301 left: 10px;
3302 }
3303
3304 .pagelayer-tlite-ne::before {
3305 top: -3px;
3306 right: 10px;
3307 }
3308
3309 .pagelayer-tlite-s::before {
3310 bottom: -3px;
3311 left: 50%;
3312 margin-left: -5px;
3313 }
3314
3315 .pagelayer-tlite-se::before {
3316 bottom: -3px;
3317 right: 10px;
3318 }
3319
3320 .pagelayer-tlite-sw::before {
3321 bottom: -3px;
3322 left: 10px;
3323 }
3324
3325 .pagelayer-tlite-w::before {
3326 left: -3px;
3327 top: 50%;
3328 margin-top: -5px;
3329 }
3330
3331 .pagelayer-tlite-e::before {
3332 right: -3px;
3333 top: 50%;
3334 margin-top: -5px;
3335 }
3336 /*Tooltip end*/
3337
3338 /* Add section modal*/
3339 .pagelayer-add-section-modal-container{
3340 position: fixed;
3341 top: 0;
3342 left: 0;
3343 width: 100%;
3344 height: 100%;
3345 background-color: #00000069;
3346 z-index:9999;
3347 display:none;
3348 font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
3349 }
3350
3351 .pagelayer-add-section-modal-close{
3352 font-size: 30px;
3353 float: right;
3354 cursor:pointer;
3355 line-height: 100%;
3356 }
3357
3358 .pagelayer-add-section-modal-holder{
3359 position: relative;
3360 font-size: 18px;
3361 height: 100vh;
3362 }
3363
3364 .pagelayer-add-section-modal{
3365 background-color: #ffffff;
3366 width: 100%;
3367 margin: auto;
3368 position: relative;
3369 }
3370
3371 /* Add modal for editor*/
3372 .pagelayer-editor-modal{
3373 position:fixed;
3374 display:none;
3375 justify-content:center;
3376 align-items:center;
3377 top:0;
3378 left:0;
3379 width:100%;
3380 height:100%;
3381 z-index:9999;
3382 background-color:rgba(0, 0, 0, 0.3);
3383 }
3384
3385 .pagelayer-editor-modal *{
3386 box-sizing:border-box;
3387 padding:0;
3388 margin:0;
3389 }
3390
3391 .pagelayer-editor-modal-wrap{
3392 background-color: #FFF;
3393 border-radius:2px;
3394 width: 40%;
3395 box-shadow: 0 10px 10px rgb(0 0 0 / 25%);
3396 }
3397
3398 .pagelayer-editor-modal-header{
3399 display:flex;
3400 justify-content:space-between;
3401 align-items: center;
3402 padding: 20px 30px;
3403 border-bottom: 1px solid #ccc;
3404 }
3405
3406 .pagelayer-editor-modal-header i{
3407 font-size: 1.3em;
3408 cursor:pointer;
3409 }
3410
3411 .pagelayer-editor-modal-header i:hover{
3412 color: #3e8ef7;
3413 }
3414
3415 .pagelayer-editor-modal-body{
3416 padding: 0 25px;
3417 }
3418
3419 .pagelayer-edt-modal-block{
3420 margin: 10px;
3421 }
3422
3423 .pagelayer-edt-modal-block ul{
3424 padding:0;
3425 margin-bottom:10px;
3426 }
3427
3428 .pagelayer-edt-modal-block li{
3429 list-style-type:none;
3430 display:flex;
3431 flex-direction:row;
3432 justify-content:space-between;
3433 font-size:1.1em;
3434 padding: 10px 0;
3435 border-bottom: 1px solid #ccc;
3436 color: #282828;
3437 }
3438
3439 .pagelayer-keyboard-shortcut-keys{
3440 font-weight: bold;
3441 }
3442
3443 .pagelayer-keyboard-shortcut-keys > span{
3444 margin: 0 4px;
3445 background-color: #e8e8e8;
3446 padding: 5px 7px;
3447 border-radius: 3px;
3448 }
3449
3450 /* width */
3451 .pagelayer-add-section-modal::-webkit-scrollbar {
3452 width: 7px;
3453 }
3454
3455 /* Track */
3456 .pagelayer-add-section-modal::-webkit-scrollbar-track {
3457 background: #f1f1f1;
3458 border-radius:5px;
3459 }
3460
3461 /* Handle */
3462 .pagelayer-add-section-modal::-webkit-scrollbar-thumb {
3463 background: #c1c1c1;
3464 border-radius:5px;
3465 }
3466
3467 /* Handle on hover */
3468 .pagelayer-add-section-modal::-webkit-scrollbar-thumb:hover {
3469 background: #555;
3470 }
3471
3472 .pagelayer-add-section-modal-header{
3473 padding: 15px;
3474 position: sticky;
3475 background: #5e5e5e;
3476 top: 0;
3477 z-index: 999;
3478 color: #fff;
3479 }
3480
3481 .pagelayer-add-section-modal-header>div{
3482 display: inline-block;
3483 }
3484
3485 .pagelayer-section-type-div{
3486 width: 85%;
3487 text-align: center;
3488 }
3489
3490 .pagelayer-add-section-modal-row{
3491 display: flex;
3492 flex-direction: row;
3493 }
3494
3495 .pagelayer-add-section-modal-left{
3496 min-width: 250px;
3497 width: 250px;
3498 background-color: #ccc;
3499 }
3500
3501 .pagelayer-section-search-div{
3502 text-align:center;
3503 margin: 20px;
3504 position:relative;
3505 }
3506
3507 .pagelayer-section-search{
3508 width:100%;
3509 line-height:120%;
3510 padding: 5px 20px 5px 30px;
3511 border-radius: 5px;
3512 border: none;
3513 font-size: 14px;
3514 height:30px;
3515 }
3516
3517 .pagelayer-section-search-div .pli{
3518 position: absolute;
3519 top: 0;
3520 height: 30px;
3521 padding: 0 7px;
3522 color: #666;
3523 line-height: 30px;
3524 }
3525
3526 .pagelayer-section-search-div .pagelayer-sf-empty{
3527 right:0;
3528 left:auto;
3529 font-weight:bolder;
3530 cursor:pointer;
3531 }
3532
3533 .pagelayer-section-tags-holder{
3534 padding: 0px 10px;
3535 height: calc(100vh - 150px);
3536 overflow: auto;
3537 }
3538
3539 .pagelayer-section-tags{
3540 background: #1A9CDB;
3541 cursor: pointer;
3542 padding: 5px;
3543 color: #fff;
3544 font-size: 13px;
3545 display: inline-block;
3546 margin: 3px;
3547 }
3548
3549 .pagelayer-section-tags[on="1"]{
3550 background: #326fa6;
3551 }
3552
3553 .pagelayer-section-modal-body-holder{
3554 overflow:auto;
3555 height: calc(100vh - 50px);
3556 width: calc(100vw - 250px);
3557 background: #efefef;
3558 }
3559
3560 .pagelayer-add-section-modal-body{
3561 margin: 0;
3562 background: #efefef;
3563 height: 100%;
3564 display: flex;
3565 flex-wrap: wrap;
3566 }
3567
3568 .pagelayer-add-section-modal-footer{
3569 padding: 15px;
3570 border-top: 1px solid #e5e5e5;
3571 }
3572
3573 .pagelayer-section-is-visible{
3574 height: 50px;
3575 flex-basis: 100%;
3576 }
3577
3578 .pagelayer-section-holder{
3579 vertical-align: top;
3580 background: #efefef;
3581 flex: 1;
3582 }
3583
3584 .pagelayer-section-item{
3585 min-height: 50px;
3586 margin:15px;
3587 z-index: 9;
3588 transition-duration: 0.2s;
3589 background-color:#fff;
3590 border: 3px solid #fff;
3591 border-radius: 4px;
3592 cursor: pointer;
3593 position: relative;
3594 }
3595
3596 .pagelayer-section-item:hover{
3597 z-index: 99;
3598 transform: scale(1.01);
3599 border: 3px solid #1A9CDB;
3600 }
3601
3602 .pagelayer-section-item img{
3603 width:100%;
3604 }
3605
3606 .pagelayer-section-item[pagelayer-section-type=page]{
3607 max-height: 350px;
3608 overflow: auto;
3609 }
3610
3611 .pagelayer-section-pro-req{
3612 position: absolute;
3613 top: 15px;
3614 right: 0px;
3615 font-size: 14px;
3616 padding: 10px;
3617 background-color: #e63131;
3618 color: #fff;
3619 margin-left: 4px;
3620 border-radius: 2px;
3621 cursor: pointer;
3622 }
3623
3624 .pagelayer-section-pro-txt{
3625 position: absolute;
3626 top: 45%;
3627 left: 0px;
3628 font-size: 14px;
3629 padding: 10px;
3630 color: #fff;
3631 line-height: 120%;
3632 background: #111;
3633 opacity: 0;
3634 transition: all 0.3s;
3635 }
3636
3637 .pagelayer-section-item:hover > .pagelayer-section-pro-txt{
3638 opacity: 0.8;
3639 }
3640
3641 .pagelayer-section-pro-txt a{
3642 color: #1A9CDB;
3643 }
3644
3645 .pagelayer-add-section-modal-overlay{
3646 position: absolute;
3647 top:0;
3648 bottom:0;
3649 height:100%;
3650 width:100%;
3651 z-index:999999;
3652 align-items: center;
3653 justify-content: center;
3654 text-align:center;
3655 display:flex;
3656 background-color:#f7f7f7fa;
3657 }
3658
3659 .pagelayer-section-wait .fa-spin{
3660 font-size:50px;
3661 }
3662
3663 /* Add section modal end */
3664
3665 /* Navigator start */
3666 .pagelayer-leftbar-prop-body{
3667 margin:10px 0px;
3668 background-color:#ffffff;
3669 border: 1px solid #d3d3d3;
3670 font-size:12px;
3671 }
3672
3673 .pagelayer-ele-name{
3674 padding: 10px;
3675 border-bottom:1px solid #d3d3d3;
3676 color: #000000;
3677 }
3678
3679 .pagelayer-ele-name:hover{
3680 background-color:#f5f5f5;
3681 cursor:pointer;
3682 }
3683
3684 .pagelayer-navigetor-ele > .pagelayer-navigetor-ele{
3685 display:none;
3686 }
3687
3688 .pagelayer-navigator-open > .pagelayer-navigetor-ele{
3689 display:block;
3690 }
3691
3692 .pagelayer-ele-name .fa:before{
3693 margin-right:8px;
3694 font-family:pagelayer,fontawesome;
3695 font-size:14px !important;
3696 }
3697
3698 .pagelayer-navi-active{
3699 background-color: #d5e4f7
3700 }
3701
3702 .pagelayer-navigator-options{
3703 float: right;
3704 }
3705
3706 .pagelayer-navigator-options .pli{
3707 padding: 0 4px;
3708 }
3709 /* Navigator end */
3710
3711 /* Left bar move start */
3712 .pagelayer-leftbar-moving{
3713 position:absolute;
3714 height:80vh;
3715 z-index:999;
3716 box-shadow:0 0 5px #e1e1e1;
3717 }
3718
3719 .pagelayer-overflow-hidden{
3720 overflow:hidden !important;
3721 }
3722
3723 .pagelayer-leftbar-move{
3724 width:30px;
3725 height:100%;
3726 background-color:#00BCD4;
3727 position:absolute;
3728 opacity: 0.33;
3729 }
3730
3731 .pagelayer-moveto-left{
3732 left:0;
3733 right:auto;
3734 }
3735
3736 .pagelayer-moveto-right{
3737 right:0;
3738 left:auto;
3739 }
3740
3741 .pagelayer-close-bar{
3742 background-color: #000;
3743 color: #ffffff;
3744 height:15px;
3745 }
3746
3747 .pagelayer-leftbar-table:not(.pagelayer-leftbar-moving) .pagelayer-close-bar{
3748 display:none;
3749 }
3750
3751 .pagelayer-leftbar-minimize{
3752 height:auto;
3753 }
3754
3755 .pagelayer-close-bar-icons{
3756 float:right;
3757 }
3758
3759 .pagelayer-close-bar-icons i{
3760 padding:5px 10px;
3761 font-size: 10px;
3762 }
3763
3764 .pagelayer-close-bar-icons i:hover{
3765 background-color: #E3E3E3;
3766 color: #000;
3767 }
3768
3769 .pagelayer-leftbar-moving.pagelayer-leftbar-minimize .pagelayer-leftbar-holder,
3770 .pagelayer-leftbar-moving.pagelayer-leftbar-minimize .pagelayer-bottombar-row{
3771 display:none;
3772 }
3773
3774 /* Left bar move end*/
3775
3776 /* Pre-Loading animaiton classes */
3777 #pagelayer-loader-wrapper {
3778 background-color:white;
3779 -webkit-box-align: center;
3780 -ms-flex-align: center;
3781 align-items: center;
3782 display: -webkit-box;
3783 display: -ms-flexbox;
3784 display: flex;
3785 height: 100%;
3786 -webkit-box-pack: center;
3787 -ms-flex-pack: center;
3788 justify-content: center;
3789 position: fixed;
3790 left: 0;
3791 top: 0;
3792 width: 100%;
3793 z-index: 9000;
3794 }
3795
3796
3797 #pagelayer-loader-wrapper .pagelayer-animation-section {
3798 position: absolute;
3799 z-index: 1000;
3800 }
3801
3802 .pagelayer-loader {
3803 position:relative;
3804 width: 150px;
3805 height: 150px;
3806 margin: 0 auto 50px auto;
3807 z-index: 1001;
3808 }
3809
3810 .pagelayer-loader:before {
3811 content: "";
3812 position: absolute;
3813 top: 0;
3814 left: 0;
3815 right: 0;
3816 bottom: 0;
3817 border-radius: 50%;
3818 border: 3px solid transparent;
3819 border-top-color: #3498db;
3820 -webkit-animation: spin 3s linear infinite;
3821 animation: spin 3s linear infinite;
3822 }
3823
3824 .pagelayer-loader:after {
3825 content: "";
3826 position: absolute;
3827 top: 10px;
3828 left: 10px;
3829 right: 10px;
3830 bottom: 10px;
3831 border-radius: 50%;
3832 border: 3px solid transparent;
3833 border-top-color: #e74c3c;
3834 -webkit-animation: spin 2s linear infinite;
3835 animation: spin 2s linear infinite;
3836 }
3837
3838 .pagelayer-loader .pagelayer-percent-parent{
3839 width:100%;
3840 height:100%;
3841 margin:auto;
3842 display: flex;
3843 align-items: center;
3844 justify-content: center;
3845 text-align:center;
3846 }
3847
3848 .pagelayer-loader .pagelayer-percent-parent:before{
3849 content: "";
3850 position: absolute;
3851 top: 20px;
3852 left: 20px;
3853 right: 20px;
3854 bottom: 20px;
3855 border-radius: 50%;
3856 border: 3px solid transparent;
3857 border-top-color: #f9c922;
3858 -webkit-animation: spin 1.5s linear infinite;
3859 animation: spin 1.5s linear infinite;
3860 }
3861
3862 .pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
3863 font-size:30px;
3864 }
3865
3866 @-webkit-keyframes spin {
3867 0%{
3868 -webkit-transform: rotate(0deg);
3869 -ms-transform: rotate(0deg);
3870 transform: rotate(0deg);
3871 }
3872 100%{
3873 -webkit-transform: rotate(360deg);
3874 -ms-transform: rotate(360deg);
3875 transform: rotate(360deg);
3876 }
3877 }
3878
3879 @keyframes spin {
3880 0% {
3881 -webkit-transform: rotate(0deg);
3882 -ms-transform: rotate(0deg);
3883 transform: rotate(0deg);
3884 }
3885 100% {
3886 -webkit-transform: rotate(360deg);
3887 -ms-transform: rotate(360deg);
3888 transform: rotate(360deg);
3889 }
3890 }
3891
3892 #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
3893 font: bold 7em Poppins,sans-serif;
3894 text-align: center;
3895 -webkit-user-select: none;
3896 -moz-user-select: none;
3897 -ms-user-select: none;
3898 user-select: none;
3899 }
3900
3901 .pagelayer-txt-loading .letters-loading {
3902 color: rgba(0,0,0,0.2);
3903 position: relative;
3904 }
3905
3906 .pagelayer-txt-loading .letters-loading:before {
3907 -webkit-animation: letters-loading 4s infinite;
3908 animation: letters-loading 4s infinite;
3909 color: #000;
3910 content: attr(data-text-preloader);
3911 left: 0;
3912 opacity: 0;
3913 font-family: "Poppins",sans-serif;
3914 position: absolute;
3915 -webkit-transform: rotateY(-90deg);
3916 transform: rotateY(-90deg);
3917 }
3918
3919 .pagelayer-txt-loading .letters-loading:nth-child(2):before {
3920 -webkit-animation-delay: .2s;
3921 animation-delay: .2s
3922 }
3923 .pagelayer-txt-loading .letters-loading:nth-child(3):before {
3924 -webkit-animation-delay: .4s;
3925 animation-delay: .4s
3926 }
3927 .pagelayer-txt-loading .letters-loading:nth-child(4):before {
3928 -webkit-animation-delay: .6s;
3929 animation-delay: .6s
3930 }
3931 .pagelayer-txt-loading .letters-loading:nth-child(5):before {
3932 -webkit-animation-delay: .8s;
3933 animation-delay: .8s
3934 }
3935 .pagelayer-txt-loading .letters-loading:nth-child(6):before {
3936 -webkit-animation-delay: 1s;
3937 animation-delay: 1s
3938 }
3939 .pagelayer-txt-loading .letters-loading:nth-child(7):before {
3940 -webkit-animation-delay: 1.2s;
3941 animation-delay: 1.2s
3942 }
3943 .pagelayer-txt-loading .letters-loading:nth-child(8):before {
3944 -webkit-animation-delay: 1.4s;
3945 animation-delay: 1.4s
3946 }
3947 .pagelayer-txt-loading .letters-loading:nth-child(9):before {
3948 -webkit-animation-delay: 1.6s;
3949 animation-delay: 1.6s
3950 }
3951 .pagelayer-txt-loading .letters-loading:nth-child(10):before {
3952 -webkit-animation-delay: 1.8s;
3953 animation-delay: 1.8s
3954 }
3955 .pagelayer-txt-loading .letters-loading:nth-child(11):before {
3956 -webkit-animation-delay: 2s;
3957 animation-delay: 2s
3958 }
3959
3960 .pagelayer-loaded .pagelayer-animation-section .pagelayer-loader,
3961 .pagelayer-loaded .pagelayer-animation-section .pagelayer-txt-loading {
3962 opacity: 0;
3963 -webkit-transition: all 0.3s ease-out;
3964 transition: all 0.3s ease-out;
3965 }
3966
3967 @-webkit-keyframes letters-loading {
3968 0%, 75%, 100% {
3969 opacity: 0;
3970 -webkit-transform: rotateY(-90deg);
3971 transform: rotateY(-90deg)
3972 }
3973 25%, 50% {
3974 opacity: 1;
3975 -webkit-transform: rotateY(0deg);
3976 transform: rotateY(0deg)
3977 }
3978 }
3979 @keyframes letters-loading {
3980 0%, 75%, 100% {
3981 opacity: 0;
3982 -webkit-transform: rotateY(-90deg);
3983 transform: rotateY(-90deg)
3984 }
3985 25%, 50% {
3986 opacity: 1;
3987 -webkit-transform: rotateY(0deg);
3988 transform: rotateY(0deg)
3989 }
3990 }
3991
3992 @media screen and (max-width: 767px) {
3993 #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-loader {
3994 height: 8em;
3995 width: 8em
3996 }
3997 #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
3998 font: bold 3.5em Poppins, sans-serif
3999 }
4000 .pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
4001 font-size:20px;
4002 }
4003 }
4004 @media screen and (max-width: 500px) {
4005 #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-loader {
4006 height: 7em;
4007 width: 7em
4008 }
4009 #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
4010 font: bold 2em Poppins, sans-serif
4011 }
4012 .pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
4013 font-size:15px;
4014 }
4015 }
4016
4017 /* Pre-Loading animaiton classes end*/
4018
4019 /* Update Loading animation class start */
4020
4021 .pagelayer-update-button{
4022 width:58px;
4023 height:24px;
4024 }
4025
4026 .pagelayer-update-loader{
4027 display:none;
4028 padding:2px;
4029 white-space: nowrap;
4030 }
4031
4032 .pagelayer-update-loader span{
4033 width:8px;
4034 height:8px;
4035 margin: 0 2px;
4036 background-color: #ededede0;
4037 border-radius: 50%;
4038 display:inline-block;
4039 animation: dots 0.9s ease-in-out infinite;
4040 }
4041
4042 .pagelayer-update-loader span:nth-child(2){
4043 animation-delay: 0.3s;
4044 }
4045
4046 .pagelayer-update-loader span:nth-child(3){
4047 animation-delay: 0.6s;
4048 }
4049
4050 @keyframes dots{
4051 50%{
4052 opacity:0;
4053 }
4054 }
4055
4056 /* Update Loading animation class end */
4057
4058 /* Error box css starts */
4059
4060 .pagelayer-errorBox{
4061 position:absolute;
4062 top:10px;
4063 left: 0;
4064 right: 0;
4065 margin-left: auto;
4066 margin-right: auto;
4067 width:70%;
4068 height:234;
4069 border-radius:20px;
4070 background-color:#fffafa;
4071 box-shadow: 1px 1px 8px #ffc7c7;
4072 z-index:9999;
4073 display:none;
4074 }
4075
4076 .pagelayer-errorBox-close{
4077 position:absolute;
4078 right:10;
4079 top:10;
4080 font-size:20px;
4081 padding:5px;
4082 color:lightgrey;
4083 cursor:pointer;
4084 }
4085
4086 .pagelayer-errorBox-main{
4087 height:180px;
4088 margin:2px 10px;
4089 }
4090
4091 .pagelayer-errorBox-main h2{
4092 color:red;
4093 font-size:20px;
4094 margin:0;
4095 }
4096
4097 .pagelayer-errorBox-main h2 i{
4098 font-size:30px;
4099 margin:10px;
4100 vertical-align:middle;
4101 }
4102
4103 .pagelayer-errorBox-content{
4104 margin-left:90px;
4105 font-size:13px;
4106 overflow:auto;
4107 height:130px;
4108 border-bottom:1px solid lightgrey;
4109 }
4110
4111 .pagelayer-errorBox-resolve{
4112 text-align:right;
4113 padding:10px;
4114 }
4115 .pagelayer-errorBox-resolve p{
4116 display:inline;
4117 margin:10px;
4118 }
4119
4120 .pagelayer-errorBox-resolve .pagelayer-errorBox-support, .pagelayer-errorBox-resolve .pagelayer-errorBox-copy{
4121 cursor:pointer;
4122 padding: 5px;
4123 border-radius: 5px;
4124 color: white;
4125 }
4126
4127 .pagelayer-errorBox-resolve .pagelayer-errorBox-copy{
4128 background-color: #616cf3;
4129 border: 1px solid blue;
4130 }
4131
4132 .pagelayer-errorBox-resolve .pagelayer-errorBox-support{
4133 background-color: #56b45d;
4134 border: 1px solid green;
4135 }
4136
4137 /* Error box css ends */
4138
4139 /* Property modal start*/
4140 .pagelayer-elp-modal-wrapper{
4141 position: fixed;
4142 top: 0;
4143 bottom: 0;
4144 left: 0;
4145 right: 0;
4146 overflow-y: auto;
4147 background: #0000009c;
4148 z-index: 999;
4149 color: #fff;
4150 display:none;
4151 }
4152
4153 .pagelayer-elp-modal-wrap{
4154 width: 500px;
4155 background-color: #fff;
4156 position: relative;
4157 margin: 20px auto;
4158 border-radius: 5px;
4159 box-shadow: 0px 0px 7px 0px #fff;
4160 }
4161
4162 .pagelayer-elp-modal-close{
4163 float:right;
4164 padding: 5px;
4165 cursor:pointer
4166 }
4167
4168 .pagelayer-elp-modal-header{
4169 padding:15px 20px 10px;
4170 margin-top: 10px;
4171 font-size: 13px;
4172 font-weight: bold;
4173 color: #555;
4174 }
4175
4176 .pagelayer-elp-modal-holder{
4177 padding: 5px 20px 10px;
4178 }
4179
4180 /* Property modal end*/
4181 /* Property link start*/
4182
4183 .pagelayer-elp-link-list{
4184 max-height:250px;
4185 overflow:auto;
4186 width: 99%;
4187 top: 35px;
4188 right: 4px;
4189 }
4190
4191 .pagelayer-elp-link-list .pagelayer-elp-link-search{
4192 width:100%;
4193 }
4194
4195 .pagelayer-elp-link-item{
4196 display: flex;
4197 font-size: 13px;
4198 padding: 7px 2px;
4199 margin: 2px 0;
4200 cursor: pointer;
4201 align-items:center;
4202 }
4203
4204 .pagelayer-elp-link-item:hover{
4205 box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
4206 border-radius: 4px;
4207 }
4208
4209 .pagelayer-elp-link-item span{
4210 text-overflow: ellipsis;
4211 display: inline-block;
4212 overflow: hidden;
4213 white-space: nowrap;
4214 width: 100%;
4215 padding:3px;
4216 }
4217
4218 .pagelayer-elp-link-item-title{
4219 font-weight:bold;
4220 }
4221
4222 .pagelayer-elp-link-item-perma{
4223 color:#999;
4224 }
4225
4226 .pagelayer-elp-link-title{
4227 width: 73%;
4228 margin-right:2%;
4229 }
4230
4231 .pagelayer-elp-link-info{
4232 width: 20%;
4233 background-color: #ededed;
4234 padding: 2px;
4235 font-size:11px;
4236 }
4237
4238 .pagelayer-elp-link-id{
4239 background-color: #ededed;
4240 padding: 2px 6px;
4241 font-size:12px;
4242 margin-left:5px;
4243 }
4244
4245 .pagelayer-elp-link-info span{
4246 padding: 4px;
4247 }
4248
4249 .pagelayer-elp-link-div .pagelayer-elp-link-addons{
4250 margin-right: 30px;
4251 display: none;
4252 }
4253
4254 .pagelayer-elp-link-div .pagelayer-elp-link-cb-div{
4255 display: flex;
4256 justify-content: space-between;
4257 align-items: center;
4258 padding-top: 5px;
4259 }
4260
4261 .pagelayer-elp-link-div .pagelayer-elp-link-cb-div:first-child{
4262 margin-top: 10px;
4263 }
4264
4265 .pagelayer-elp-link-div .pagelayer-elp-link-ca{
4266 margin: 5px 0px;
4267 }
4268
4269 .pagelayer-elp-link-ca input{
4270 width: 100%;
4271 }
4272
4273 /* Property link end*/
4274 /* Editor notice start*/
4275 .pagelayer-editor-notice{
4276 position: fixed;
4277 right: 10px;
4278 top: 10px;
4279 padding-right: 16px;
4280 transition: all 5s ease-out;
4281 pointer-events: none;
4282 }
4283
4284 .sitepad-body .pagelayer-editor-notice{
4285 top:50px;
4286 }
4287
4288 .pagelayer-editor-msg{
4289 position:relative;
4290 font-size: 13px;
4291 background-color: rgba(0,0,0,.8);
4292 border-radius: 4px;
4293 box-shadow: 0 2px 4px rgba(0,0,0,.3);
4294 color: #fff;
4295 padding: 16px 30px 16px 15px;
4296 margin-bottom:7px;
4297 transition: opacity 800ms ease-out;
4298 pointer-events: all;
4299 width:fit-content;
4300 margin-left:auto;
4301 }
4302
4303 .pagelayer-editor-msg.pagelayer-editor-msg-state-success{
4304 background-color: #449d44;
4305 }
4306
4307 .pagelayer-editor-msg.pagelayer-editor-msg-state-error{
4308 background-color: #ef4d4d;
4309 }
4310
4311 .pagelayer-editor-msg.pagelayer-editor-msg-state-warning{
4312 background-color: #cd8500;
4313 }
4314
4315 .pagelayer-notice-x{
4316 position: absolute;
4317 top: 50%;
4318 right: 10px;
4319 transform: translateY(-50%);
4320 cursor:pointer;
4321 }
4322
4323 /* Editor notice end*/
4324 /* Pagelayer post setting modal start*/
4325 .pagelayer-props-modal{
4326 position: fixed;
4327 left: 0;
4328 top: 0;
4329 right: 0;
4330 bottom: 0;
4331 z-index: 1100;
4332 background-color:#2d2d2d8c;
4333 display:none;
4334 }
4335
4336 .pagelayer-props-holder{
4337 position:relative;
4338 height: 100%;
4339 overflow: auto;
4340 display: flex;
4341 justify-content: center;
4342 align-items: center;
4343 width: 100%;
4344 margin:auto;
4345 max-height: 967px;
4346 }
4347
4348 .pagelayer-props-wrap{
4349 position:relative;
4350 height: 90%;
4351 width: 90%;
4352 margin:auto;
4353 overflow: auto;
4354 display: flex;
4355 justify-content: center;
4356 align-items: center;
4357 border-radius: 10px
4358 }
4359
4360 .pagelayer-props-loading-screen{
4361 position:absolute;
4362 border: 8px solid transparent;
4363 border-radius: 50%;
4364 border-top: 8px solid #ebebeb;
4365 width: 80px;
4366 height: 80px;
4367 -webkit-animation: propsLoading 0.5s ease-in-out infinite; /* Safari */
4368 animation: propsLoading 0.5s ease-in-out infinite;
4369 }
4370
4371 /* Safari */
4372 @-webkit-keyframes propsLoading {
4373 0% { -webkit-transform: rotate(0deg); }
4374 100% { -webkit-transform: rotate(360deg); }
4375 }
4376
4377 @keyframes propsLoading {
4378 0% { transform: rotate(0deg); }
4379 100% { transform: rotate(360deg); }
4380 }
4381
4382 .pagelayer-props-wrap .pagelayer-meta-iframe{
4383 position: relative;
4384 width: 100%;
4385 height: 100%;
4386 border: 0px;
4387 }
4388
4389 .pagelayer-props-modal-close{
4390 position: absolute;
4391 top: 20px;
4392 right: 25px;
4393 z-index: 999;
4394 cursor:pointer;
4395 visibility:hidden;
4396 }
4397
4398 @keyframes highlight {
4399 0% {
4400 background: #dfdfdf;
4401 }
4402 100% {
4403 background: #fff;
4404 }
4405 }
4406
4407 .highlight {
4408 animation: highlight 1s;
4409 animation-iteration-count: 5;
4410 }
4411 /* Pagelayer post setting modal end */
4412
4413 /* Pagelayer post props(category) start */
4414 .pagelayer-post-cat-div{
4415 max-height:300px;
4416 overflow:auto;
4417 }
4418
4419 .pagelayer-post-category, .pagelayer-post-category ul{
4420 list-style:none;
4421 padding:0;
4422 margin:0;
4423 margin-left:16px;
4424 }
4425
4426 .pagelayer-post-category li{
4427 margin:8px 0px;
4428 }
4429
4430 .pagelayer-post-category label, .pagelayer-elp-postCategory *{
4431 font-size:small;
4432 }
4433
4434 .pagelayer-post-category input[type=checkbox]{
4435 margin-right:5px;
4436 background-color:#007cba;
4437 width:16px;
4438 height:16px;
4439 }
4440
4441 .pagelayer-add-cat-btn{
4442 color:#0073aa;
4443 cursor:pointer;
4444 line-height:3;
4445 }
4446
4447 .pagelayer-add-cat-btn:hover {
4448 color: #2563eb;
4449 }
4450
4451 .pagelayer-elp-postCategory input, .pagelayer-parent-category > select{
4452 margin-top:5px;
4453 margin-bottom:12px;
4454 }
4455
4456 .pagelayer-parent-category{
4457 margin-top:5px;
4458 }
4459
4460 .pagelayer-parent-category > select{
4461 height:32px;
4462 outline:none;
4463 }
4464
4465 .pagelayer-cat-submit{
4466 color: #007cba;
4467 border: 1px solid #007cba;
4468 padding: 10px;
4469 background-color: white;
4470 cursor: pointer;
4471 }
4472
4473 .pagelayer-cat-submit:hover{
4474 color: #006ba1;
4475 border: 1px solid #006ba1;
4476 }
4477
4478 .pagelayer-dark .pagelayer-cat-submit,
4479 .pagelayer-elp-postCategory input{
4480 background-color:transparent;
4481 }
4482
4483 .pagelayer-dark .pagelayer-cat-submit:hover{
4484 color:white;
4485 background-color:#007cba;
4486 }
4487
4488 /* Pagelayer post props(category) end */
4489 /* Pagelayer post props(tags) start */
4490
4491 .pagelayer-elp-postTags{
4492 border: 1px solid #757575;
4493 border-radius: 2px;
4494 display: flex;
4495 flex-wrap: wrap;
4496 padding:2px;
4497 }
4498
4499 .pagelayer-post-tags{
4500 display: flex;
4501 flex-wrap: wrap;
4502 align-items: flex-start;
4503 }
4504
4505 .pagelayer-elp-tags-ele{
4506 display: flex;
4507 margin: 2px 4px 2px 0;
4508 max-width: 100%;
4509 background-color: #ddd;
4510 border-radius: 2px;
4511 font-size: 13px;
4512 padding: 5px;
4513 }
4514
4515 .pagelayer-elp-tags-ele .pagelayer-tags-label{
4516 padding: 2px;
4517 }
4518
4519 .pagelayer-elp-tags-ele .pagelayer-elp-tags-remove{
4520 cursor:pointer;
4521 padding: 3px 5px;
4522 }
4523
4524 .pagelayer-elp-postTags-inp{
4525 width:auto;
4526 display: inline-block;
4527 flex: 1;
4528 padding: 5px;
4529 height: 26px;
4530 border: none !important;
4531 outline: none !important;
4532 max-width: 100%;
4533 min-height: 24px;
4534 min-width: 50px;
4535 background: inherit;
4536 color: #1e1e1e;
4537 box-shadow: none;
4538 margin-top:3px;
4539 }
4540
4541 .pagelayer-post-tags .pagelayer-postTags-list{
4542 flex: 1 0 100%;
4543 min-width: 100%;
4544 max-height: 9em;
4545 overflow-y: auto;
4546 transition: all .15s ease-in-out;
4547 list-style: none;
4548 border-top: 1px solid #757575;
4549 outline: none;
4550 border: none;
4551 margin: 0;
4552 margin-top:4px;
4553 padding:0;
4554 }
4555
4556
4557 .pagelayer-post-tags .pagelayer-postTags-list li{
4558 color: #757575;
4559 display: block;
4560 font-size: 13px;
4561 padding: 4px 8px;
4562 margin: 0;
4563 cursor: pointer;
4564 border-top: 1px solid #757575;
4565 }
4566
4567 .pagelayer-post-tags .pagelayer-postTags-list li:hover{
4568 color:white;
4569 background-color:#007cba;
4570 }
4571
4572 .pagelayer-elp-trash-button-div{
4573 text-align: center !important;
4574 margin-top: 8px !important;
4575 }
4576
4577 .pagelayer-elp-trash-button{
4578 color: #dc2626 !important;
4579 padding: 6px 14px !important;
4580 white-space: nowrap !important;
4581 background: transparent !important;
4582 text-decoration: none !important;
4583 font-size: 12px !important;
4584 font-weight: 500 !important;
4585 cursor: pointer !important;
4586 border: 1px solid #dc2626 !important;
4587 border-radius: 6px !important;
4588 line-height: 1.2 !important;
4589 display: inline-block !important;
4590 transition: all 0.2s ease !important;
4591 }
4592
4593 .pagelayer-elp-trash-button:hover{
4594 background-color: #fee2e2 !important;
4595 color: #b91c1c !important;
4596 border-color: #b91c1c !important;
4597 box-shadow: none !important;
4598 }
4599
4600 .pagelayer-dark .pagelayer-elp-trash-button:hover{
4601 color: #ffffff !important;
4602 background-color: #dc2626 !important;
4603 border-color: #dc2626 !important;
4604 }
4605
4606
4607 .pagelayer-dark .pagelayer-elp-postdate-div .pagelayer-elp-postdate::-webkit-calendar-picker-indicator{
4608 filter: invert(70%);
4609 }
4610 /* Pagelayer post props(tags) end */
4611 /* Pagelayer widget list tooltip start*/
4612
4613 .pagelayer-widget-tooltip{
4614 position: fixed;
4615 top: 0;
4616 left: 0;
4617 background: #fff;
4618 width: 300px;
4619 max-height: 350px;
4620 min-height: 125px;
4621 height: auto;
4622 overflow-y: auto;
4623 box-shadow: 0 2px 6px rgb(0 0 0 / 5%);
4624 border-radius: 2px;
4625 display: none;
4626 z-index: 999;
4627 }
4628
4629 .pagelayer-widget-search-holder{
4630 position: sticky;
4631 top: 0;
4632 padding: 10px 10%;
4633 z-index: 1;
4634 background: #fff;
4635 }
4636
4637 .pagelayer-widget-search{
4638 position: relative;
4639 }
4640
4641 .pagelayer-pointer.pagelayer-shortcode-text,
4642 .pagelayer-pointer.pagelayer-sc{
4643 cursor: pointer !important;
4644 }
4645
4646 .pagelayer-widget-tooltip .pagelayer-search-field{
4647 border: 2px solid;
4648 }
4649
4650 .pagelayer-widget-tooltip .pagelayer-shortcode-holder{
4651 width: 70px !important;
4652 border: 1px solid transparent;
4653 }
4654
4655 .pagelayer-widget-list-tooltip{
4656 width: 200px !important;
4657 padding: 6px !important;
4658 border-radius: 6px !important;
4659 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
4660 border: 1px solid #e2e8f0 !important;
4661 box-sizing: border-box !important;
4662 }
4663
4664 .pagelayer-dark .pagelayer-widget-list-tooltip {
4665 background-color: #1e1e24 !important;
4666 border-color: #2d2d34 !important;
4667 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
4668 }
4669
4670 .pagelayer-shortcode-holder[pagelayer-tag="pl_row"],
4671 .pagelayer-shortcode-holder[pagelayer-tag="pl_col"],
4672 .pagelayer-widget-list-tooltip .pagelayer-widget-group h5,
4673 .pagelayer-widget-list-tooltip .pagelayer-widget-search-holder{
4674 display:none !important;
4675 }
4676
4677 .pagelayer-widget-list-tooltip .pagelayer-shortcode{
4678 width: 20px !important;
4679 height: 20px !important;
4680 font-size: 16px !important;
4681 text-align: center !important;
4682 display: flex !important;
4683 align-items: center !important;
4684 justify-content: center !important;
4685 }
4686
4687 .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder{
4688 width: 100% !important;
4689 height: auto !important;
4690 float: unset !important;
4691 margin: 2px 0px !important;
4692 border: 1px solid transparent !important;
4693 border-radius: 4px !important;
4694 background-color: transparent !important;
4695 box-sizing: border-box !important;
4696 transition: background-color 0.15s ease, border-color 0.15s ease !important;
4697 }
4698
4699 .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder:hover {
4700 transform: none !important;
4701 background-color: #f1f5f9 !important;
4702 }
4703
4704 .pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder:hover {
4705 background-color: #2d2d34 !important;
4706 }
4707
4708 .pagelayer-widget-list-tooltip .pagelayer-sc{
4709 display: flex !important;
4710 flex-direction: row !important;
4711 align-items: center !important;
4712 justify-content: flex-start !important;
4713 padding: 6px 8px !important;
4714 margin: 0 !important;
4715 height: auto !important;
4716 width: 100% !important;
4717 box-sizing: border-box !important;
4718 }
4719
4720 .pagelayer-widget-list-tooltip .pagelayer-shortcode-text{
4721 text-align: left !important;
4722 white-space: nowrap !important;
4723 overflow: hidden !important;
4724 text-overflow: ellipsis !important;
4725 max-width: none !important;
4726 font-size: 12px !important;
4727 font-weight: 500 !important;
4728 color: #334155 !important;
4729 }
4730
4731 .pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-text {
4732 color: #cbd5e1 !important;
4733 }
4734
4735 .pagelayer-widget-list-tooltip .pagelayer-shortcode-inner{
4736 height: auto !important;
4737 width: auto !important;
4738 margin-bottom: 0px !important;
4739 margin-right: 10px !important;
4740 display: flex !important;
4741 align-items: center !important;
4742 justify-content: center !important;
4743 }
4744
4745 .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder.pagelayer-list-widget-active{
4746 border: 1px solid #3b82f6 !important;
4747 background-color: #eff6ff !important;
4748 }
4749
4750 .pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder.pagelayer-list-widget-active {
4751 border: 1px solid #3b82f6 !important;
4752 background-color: #1e293b !important;
4753 }
4754
4755 /* Pagelayer widget list tooltip end*/
4756 /* Menu start */
4757 .pagelayer-elp-menu-items-holder{
4758 padding-top: 15px;
4759 }
4760
4761 .pagelayer-drag-highlight{
4762 margin-top: 0;
4763 margin-bottom: 10px;
4764 max-width: calc(100% - 2px);
4765 border: 1px dashed #a7aaad;
4766 height: 33px !important;
4767 }
4768
4769 .pagelayer-menu-depth-1{
4770 margin-left: 10px;
4771 width: calc(100% - 10px) !important;
4772 }
4773
4774 .pagelayer-menu-depth-2{
4775 margin-left: 20px;
4776 width: calc(100% - 20px) !important;
4777 }
4778
4779 .pagelayer-menu-depth-3{
4780 margin-left: 30px;
4781 width: calc(100% - 30px) !important;
4782 }
4783
4784 .pagelayer-menu-depth-4{
4785 margin-left: 40px;
4786 width: calc(100% - 40px) !important;
4787 }
4788
4789 .pagelayer-menu-depth-5{
4790 margin-left: 50px;
4791 width: calc(100% - 50px) !important;
4792 }
4793
4794 .pagelayer-menu-depth-6{
4795 margin-left: 60px;
4796 width: calc(100% - 60px) !important;
4797 }
4798
4799 .pagelayer-menu-depth-7{
4800 margin-left: 70px;
4801 width: calc(100% - 70px) !important;
4802 }
4803
4804 .pagelayer-menu-depth-8{
4805 margin-left: 80px;
4806 width: calc(100% - 80px) !important;
4807 }
4808
4809 .pagelayer-menu-depth-9{
4810 margin-left: 90px;
4811 width: calc(100% - 90px) !important;
4812 }
4813
4814 .pagelayer-menu-depth-10{
4815 margin-left: 100px;
4816 width: calc(100% - 100px) !important;
4817 }
4818
4819 .pagelayer-menu-depth-11{
4820 margin-left: 110px;
4821 width: calc(100% - 110px) !important;
4822 }
4823
4824 .pagelayer-menu-depth-12{
4825 margin-left: 120px;
4826 width: calc(100% - 120px) !important;
4827 }
4828
4829 .pagelayer-menu-depth-13{
4830 margin-left: 130px;
4831 width: calc(100% - 130px) !important;
4832 }
4833
4834 .pagelayer-menu-depth-14{
4835 margin-left: 140px;
4836 width: calc(100% - 140px) !important;
4837 }
4838
4839 .pagelayer-menu-depth-15{
4840 margin-left: 150px;
4841 width: calc(100% - 150px) !important;
4842 }
4843
4844 .pagelayer-menu-item-transport:empty{
4845 display: none;
4846 }
4847
4848 .pagelayer-menu-item-transport{
4849 padding-top: 10px;
4850 }
4851
4852 /* Menu end */
4853
4854 /* ==========================================================================
4855 MODERN UI REDESIGN
4856 ========================================================================== */
4857 /* Apply Font Family Everywhere */
4858 .pagelayer-normalize,
4859 .pagelayer-body,
4860 .pagelayer-leftbar-table,
4861 .pagelayer-leftbar,
4862 .pagelayer-shortcode-text,
4863 .pagelayer-elpd-tab,
4864 .pagelayer-widget-tab,
4865 .pagelayer-history-tab,
4866 .pagelayer-leftbar-group h5,
4867 .pagelayer-history-title,
4868 .pagelayer-history-subtitle,
4869 .pagelayer-history-action,
4870 .pagelayer-general-options,
4871 .pagelayer-general-options h5,
4872 .pagelayer-widgets-form label,
4873 .pagelayer-post-settings-holder,
4874 .pagelayer-elpd-title,
4875 .pagelayer-elp-label {
4876 font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
4877 }
4878
4879
4880
4881 /* 2. Pill Segmented Tab Navigation */
4882 .pagelayer-widget-tabs,
4883 .pagelayer-elpd-tabs,
4884 .pagelayer-history-tabs {
4885 background-color: #f8fafc !important;
4886 border-bottom: 1px solid #e2e8f0 !important;
4887 padding: 6px 12px !important;
4888 margin: 0 !important;
4889 display: flex !important;
4890 gap: 6px !important;
4891 }
4892
4893 .pagelayer-dark .pagelayer-widget-tabs,
4894 .pagelayer-dark .pagelayer-elpd-tabs,
4895 .pagelayer-dark .pagelayer-history-tabs {
4896 background-color: #0b0f19 !important;
4897 border-bottom: 1px solid #1e293b !important;
4898 }
4899
4900 .pagelayer-widget-tab,
4901 .pagelayer-elpd-tab,
4902 .pagelayer-history-tab {
4903 flex: 1 !important;
4904 text-align: center !important;
4905 padding: 6px 10px !important;
4906 margin: 0 !important;
4907 font-size: 12px !important;
4908 font-weight: 600 !important;
4909 color: #64748b !important;
4910 border-radius: 6px !important;
4911 border-bottom: none !important;
4912 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
4913 }
4914
4915 .pagelayer-dark .pagelayer-widget-tab,
4916 .pagelayer-dark .pagelayer-elpd-tab,
4917 .pagelayer-dark .pagelayer-history-tab {
4918 color: #94a3b8 !important;
4919 }
4920
4921 /* Active tab style overlaying standard borders */
4922 [pagelayer-elpd-active-tab="1"],
4923 [pagelayer-history-active-tab="1"],
4924 .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
4925 color: #2563eb !important;
4926 border-bottom: none !important;
4927 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
4928 }
4929
4930 .pagelayer-dark [pagelayer-elpd-active-tab="1"],
4931 .pagelayer-dark [pagelayer-history-active-tab="1"],
4932 .pagelayer-dark .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
4933 color: #ffffff !important;
4934 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
4935 }
4936
4937 .pagelayer-widget-tab:hover,
4938 .pagelayer-elpd-tab:hover,
4939 .pagelayer-history-tab:hover {
4940 color: #0f172a !important;
4941 background-color: rgba(0, 0, 0, 0.02) !important;
4942 }
4943
4944 .pagelayer-dark .pagelayer-widget-tab:hover,
4945 .pagelayer-dark .pagelayer-elpd-tab:hover,
4946 .pagelayer-dark .pagelayer-history-tab:hover {
4947 color: #ffffff !important;
4948 background-color: rgba(255, 255, 255, 0.04) !important;
4949 }
4950
4951 /* 3. Leftbar Shell & Search Area */
4952 .pagelayer-leftbar-table {
4953 border-right: 1px solid #e2e8f0 !important;
4954 }
4955
4956 .pagelayer-leftbar {
4957 background: #f8fafc !important;
4958 border-right: none !important;
4959 }
4960
4961 .pagelayer-dark .pagelayer-leftbar-table {
4962 border-right: 1px solid #1e293b !important;
4963 }
4964
4965 .pagelayer-dark .pagelayer-leftbar {
4966 background: #0b0f19 !important;
4967 }
4968
4969 .pagelayer-leftbar-search {
4970 margin: 16px 12px 12px 12px !important;
4971 position: relative !important;
4972 }
4973
4974 .pagelayer-search-field {
4975 background-color: #ffffff !important;
4976 border: 1px solid #cbd5e1 !important;
4977 border-radius: 8px !important;
4978 padding: 8px 12px 8px 32px !important;
4979 font-size: 13px !important;
4980 color: #0f172a !important;
4981 height: 36px !important;
4982 width: 100% !important;
4983 transition: all 0.2s ease !important;
4984 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
4985 }
4986
4987 .pagelayer-dark .pagelayer-search-field {
4988 background-color: #1e293b !important;
4989 border: 1px solid #334155 !important;
4990 color: #f8fafc !important;
4991 }
4992
4993 .pagelayer-search-field:focus {
4994 border-color: #3b82f6 !important;
4995 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
4996 outline: none !important;
4997 }
4998
4999 .pagelayer-dark .pagelayer-search-field:focus {
5000 border-color: #60a5fa !important;
5001 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
5002 }
5003
5004 .pagelayer-leftbar-search .pli-search {
5005 left: 10px !important;
5006 line-height: 36px !important;
5007 height: 36px !important;
5008 color: #94a3b8 !important;
5009 font-size: 14px !important;
5010 }
5011
5012 .pagelayer-leftbar-search .pagelayer-sf-empty {
5013 right: 8px !important;
5014 line-height: 36px !important;
5015 height: 36px !important;
5016 color: #94a3b8 !important;
5017 font-size: 14px !important;
5018 }
5019
5020 /* 4. Group Headings */
5021 .pagelayer-leftbar-group {
5022 margin-bottom: 8px !important;
5023 padding: 0 12px !important;
5024 }
5025
5026 .pagelayer-leftbar-group h5 {
5027 font-size: 11px !important;
5028 font-weight: 700 !important;
5029 letter-spacing: 0.05em !important;
5030 text-transform: uppercase !important;
5031 color: #94a3b8 !important;
5032 margin: 16px 0 8px 0 !important;
5033 text-align: left !important;
5034 border-bottom: 1px solid rgba(0, 0, 0, 0.03);
5035 padding-bottom: 4px;
5036 }
5037
5038 .pagelayer-dark .pagelayer-leftbar-group h5 {
5039 color: #cbd5e1 !important;
5040 background: #0b0f19 !important;
5041 border-top: 1px solid #1e293b !important;
5042 border-bottom: 1px solid #1e293b !important;
5043 }
5044
5045 /* 5. Draggable Widget Cards */
5046 .pagelayer-shortcodes-widget {
5047 padding: 0 4px !important;
5048 }
5049
5050 .pagelayer-shortcode-drag {
5051 width: 112px !important;
5052 height: 58px !important;
5053 margin: 6px !important;
5054 background-color: #ffffff !important;
5055 border: 1px solid #e2e8f0 !important;
5056 border-radius: 10px !important;
5057 float: left !important;
5058 display: flex !important;
5059 flex-direction: column !important;
5060 align-items: center !important;
5061 justify-content: center !important;
5062 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
5063 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
5064 box-sizing: border-box !important;
5065 }
5066
5067 .pagelayer-dark .pagelayer-shortcode-drag {
5068 background-color: #131926 !important;
5069 border: 1px solid #1e293b !important;
5070 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important;
5071 }
5072
5073 .pagelayer-shortcode-drag:hover {
5074 transform: translateY(-3px) scale(1.02) !important;
5075 border-color: #2563eb !important;
5076 box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.08), 0 4px 6px -4px rgba(37, 99, 235, 0.08) !important;
5077 }
5078
5079 .pagelayer-dark .pagelayer-shortcode-drag:hover {
5080 border-color: #2563eb !important;
5081 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
5082 }
5083
5084 .pagelayer-sc {
5085 padding: 0 !important;
5086 margin: 0 !important;
5087 display: flex !important;
5088 flex-direction: column !important;
5089 align-items: center !important;
5090 justify-content: center !important;
5091 width: 100% !important;
5092 height: 100% !important;
5093 }
5094
5095 .pagelayer-shortcode-inner {
5096 height: auto !important;
5097 margin-bottom: 6px !important;
5098 display: flex !important;
5099 align-items: center !important;
5100 justify-content: center !important;
5101 }
5102
5103 .pagelayer-shortcode {
5104 font-size: 20px !important;
5105 color: #2563eb !important;
5106 /* Indigo accent */
5107 transition: color 0.2s ease !important;
5108 }
5109
5110 .pagelayer-dark .pagelayer-shortcode {
5111 color: #818cf8 !important;
5112 }
5113
5114 .pagelayer-shortcode-text {
5115 font-size: 11px !important;
5116 font-weight: 500 !important;
5117 color: #475569 !important;
5118 margin: 0 !important;
5119 text-align: center !important;
5120 transition: color 0.2s ease !important;
5121 white-space: nowrap !important;
5122 overflow: hidden !important;
5123 text-overflow: ellipsis !important;
5124 max-width: 90% !important;
5125 }
5126
5127 .pagelayer-dark .pagelayer-shortcode-text {
5128 color: #cbd5e1 !important;
5129 }
5130
5131 .pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5132 color: #2563eb !important;
5133 }
5134
5135 .pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5136 color: #2563eb !important;
5137 }
5138
5139 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5140 color: #2563eb !important;
5141 }
5142
5143 .pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5144 color: #2563eb !important;
5145 }
5146
5147 /* 6. Settings Panels & Accordions */
5148 .pagelayer-elpd,
5149 .pagelayer-post-settings,
5150 .pagelayer-general-options {
5151 background: #ffffff !important;
5152 }
5153
5154 .pagelayer-dark .pagelayer-elpd,
5155 .pagelayer-dark .pagelayer-post-settings,
5156 .pagelayer-dark .pagelayer-general-options {
5157 background: #0b0f19 !important;
5158 }
5159
5160 .pagelayer-elpd-header {
5161 border-bottom: 1px solid #e2e8f0 !important;
5162 background-color: #ffffff !important;
5163 }
5164
5165 .pagelayer-dark .pagelayer-elpd-header {
5166 border-bottom: 1px solid #1e293b !important;
5167 background-color: #0b0f19 !important;
5168 }
5169
5170 .pagelayer-elpd-title {
5171 font-weight: 600 !important;
5172 color: #0f172a !important;
5173 }
5174
5175 .pagelayer-dark .pagelayer-elpd-title {
5176 color: #f8fafc !important;
5177 }
5178
5179 .pagelayer-form-item {
5180 margin-bottom: 14px !important;
5181 position: relative !important;
5182 border-bottom: none !important;
5183 padding: 8px 0 !important;
5184 }
5185
5186 .pagelayer-elp-label,
5187 .pagelayer-widgets-form label {
5188 font-size: 12px !important;
5189 font-weight: 600 !important;
5190 color: #475569 !important;
5191 margin-bottom: 6px !important;
5192 display: block !important;
5193 }
5194
5195 .pagelayer-dark .pagelayer-elp-label,
5196 .pagelayer-dark .pagelayer-widgets-form label {
5197 color: #94a3b8 !important;
5198 }
5199
5200 /* Rounded Inputs */
5201 .pagelayer-elp-text,
5202 .pagelayer-elp-spinner,
5203 .pagelayer-elp-textarea,
5204 .pagelayer-elp-gradient-input,
5205 .pagelayer-elp-datetime,
5206 .pagelayer-elpd-body input[type="text"],
5207 .pagelayer-widgets-form input[type="text"],
5208 .pagelayer-widgets-form textarea {
5209 background-color: #ffffff !important;
5210 border: 1px solid #cbd5e1 !important;
5211 border-radius: 8px !important;
5212 padding: 8px 10px !important;
5213 font-size: 13px !important;
5214 color: #0f172a !important;
5215 transition: all 0.2s ease !important;
5216 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
5217 box-sizing: border-box !important;
5218 }
5219
5220 .pagelayer-elp-text,
5221 .pagelayer-elp-spinner,
5222 .pagelayer-elp-gradient-input,
5223 .pagelayer-elp-datetime,
5224 .pagelayer-elpd-body input[type="text"],
5225 .pagelayer-widgets-form input[type="text"] {
5226 height: auto !important;
5227 }
5228
5229 .pagelayer-dark .pagelayer-elp-text,
5230 .pagelayer-dark .pagelayer-elp-spinner,
5231 .pagelayer-dark .pagelayer-elp-textarea,
5232 .pagelayer-dark .pagelayer-elp-gradient-input,
5233 .pagelayer-dark .pagelayer-elp-datetime,
5234 .pagelayer-dark .pagelayer-elpd-body input[type="text"],
5235 .pagelayer-dark .pagelayer-widgets-form input[type="text"],
5236 .pagelayer-dark .pagelayer-widgets-form textarea {
5237 background-color: #131926 !important;
5238 border: 1px solid #1e293b !important;
5239 color: #f8fafc !important;
5240 }
5241
5242 .pagelayer-elp-text:focus,
5243 .pagelayer-elp-spinner:focus,
5244 .pagelayer-elp-gradient-input:focus,
5245 .pagelayer-elpd-body input:focus,
5246 .pagelayer-widgets-form input:focus,
5247 .pagelayer-widgets-form textarea:focus {
5248 border-color: #3b82f6 !important;
5249 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
5250 outline: none !important;
5251 }
5252
5253 .pagelayer-dark .pagelayer-elp-text:focus,
5254 .pagelayer-dark .pagelayer-elp-spinner:focus,
5255 .pagelayer-dark .pagelayer-elp-gradient-input:focus,
5256 .pagelayer-dark .pagelayer-elpd-body input:focus,
5257 .pagelayer-dark .pagelayer-widgets-form input:focus,
5258 .pagelayer-dark .pagelayer-widgets-form textarea:focus {
5259 border-color: #2563eb !important;
5260 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
5261 }
5262
5263 /* Custom Dropdown Select styling */
5264 .pagelayer-elp-select,
5265 .pagelayer-widgets-form select {
5266 background-color: #ffffff !important;
5267 border: 1px solid #cbd5e1 !important;
5268 border-radius: 8px !important;
5269 padding: 6px 30px 6px 10px !important;
5270 font-size: 13px !important;
5271 color: #0f172a !important;
5272 height: 34px !important;
5273 transition: all 0.2s ease !important;
5274 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
5275 -webkit-appearance: none !important;
5276 -moz-appearance: none !important;
5277 appearance: none !important;
5278 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
5279 background-position: right 8px center !important;
5280 background-size: 18px 18px !important;
5281 background-repeat: no-repeat !important;
5282 }
5283
5284 .pagelayer-dark .pagelayer-elp-select,
5285 .pagelayer-dark .pagelayer-widgets-form select {
5286 background-color: #131926 !important;
5287 border: 1px solid #1e293b !important;
5288 color: #f8fafc !important;
5289 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
5290 }
5291
5292 .pagelayer-elp-select:focus,
5293 .pagelayer-widgets-form select:focus {
5294 border-color: #2563eb !important;
5295 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
5296 outline: none !important;
5297 }
5298
5299 /* Accordion sections styling */
5300 .pagelayer-post-settings-lable{
5301 border: 1px solid #e2e8f0 !important;
5302 background: #f8fafc !important;
5303 border-radius: 8px !important;
5304 padding: 10px 14px !important;
5305 font-weight: 600 !important;
5306 color: #334155 !important;
5307 margin-bottom: 6px !important;
5308 transition: all 0.2s ease !important;
5309 }
5310
5311 .pagelayer-dark .pagelayer-post-settings-lable{
5312 border: 1px solid #1e293b !important;
5313 background: #131926 !important;
5314 color: #cbd5e1 !important;
5315 }
5316
5317 .pagelayer-post-settings-lable:hover{
5318 border-color: #cbd5e1 !important;
5319 background-color: #f1f5f9 !important;
5320 }
5321
5322 .pagelayer-dark .pagelayer-post-settings-lable:hover{
5323 border-color: #334155 !important;
5324 background-color: #1e293b !important;
5325 }
5326
5327 .pagelayer-elp-group-item-head {
5328 background: #f8fafc !important;
5329 border: none !important;
5330 border-bottom: 1px solid #e2e8f0 !important;
5331 padding: 10px 14px !important;
5332 font-weight: 600 !important;
5333 color: #334155 !important;
5334 margin-bottom: 0 !important;
5335 transition: all 0.2s ease !important;
5336 display: flex !important;
5337 align-items: center !important;
5338 justify-content: space-between !important;
5339 cursor: pointer !important;
5340 }
5341
5342 .pagelayer-dark .pagelayer-elp-group-item-head {
5343 background: #131926 !important;
5344 border-bottom: 1px solid #1e293b !important;
5345 color: #cbd5e1 !important;
5346 }
5347
5348 .pagelayer-elp-group-item-head:hover {
5349 background-color: #f1f5f9 !important;
5350 }
5351
5352 .pagelayer-dark .pagelayer-elp-group-item-head:hover {
5353 background-color: #1e293b !important;
5354 }
5355
5356 .pagelayer-elp-group-item-head span {
5357 padding: 4px 8px !important;
5358 display: inline-flex !important;
5359 align-items: center !important;
5360 }
5361
5362 .pagelayer-elp-group-item-clone:hover i {
5363 color: #2563eb !important;
5364 }
5365
5366 .pagelayer-elp-group-item-del:hover i {
5367 color: #dc2626 !important;
5368 }
5369
5370 .pagelayer-dark .pagelayer-elp-group-item-clone:hover i {
5371 color: #60a5fa !important;
5372 }
5373
5374 .pagelayer-dark .pagelayer-elp-group-item-del:hover i {
5375 color: #f87171 !important;
5376 }
5377
5378 .pagelayer-elp-group-item {
5379 border: 1px solid #e2e8f0 !important;
5380 border-radius: 10px !important;
5381 overflow: hidden !important;
5382 background: #ffffff !important;
5383 margin-bottom: 12px !important;
5384 }
5385
5386 .pagelayer-dark .pagelayer-elp-group-item {
5387 border: 1px solid #1e293b !important;
5388 background: #0b0f19 !important;
5389 }
5390
5391 /* Prevent popup clipping inside list group items */
5392 .pagelayer-elp-group-item:has(.pagelayer-elp-icon-selector:not([style*="display: none"])),
5393 .pagelayer-elp-group-item:has(.pagelayer-elp-link-list:not([style*="display: none"])) {
5394 overflow: visible !important;
5395 }
5396
5397 /* Ranges Sliders Modernization */
5398 .pagelayer-elp-slider-input[type="range"] {
5399 -webkit-appearance: none !important;
5400 width: 100% !important;
5401 height: 6px !important;
5402 border-radius: 3px !important;
5403 background: #e2e8f0 !important;
5404 outline: none !important;
5405 }
5406
5407 .pagelayer-dark .pagelayer-elp-slider-input[type="range"] {
5408 background: #1e293b !important;
5409 }
5410
5411 .pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb {
5412 -webkit-appearance: none !important;
5413 appearance: none !important;
5414 width: 16px !important;
5415 height: 16px !important;
5416 border-radius: 50% !important;
5417 background: #3b82f6 !important;
5418 cursor: pointer !important;
5419 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
5420 transition: transform 0.1s ease !important;
5421 }
5422
5423 .pagelayer-dark .pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb {
5424 background: #60a5fa !important;
5425 }
5426
5427 .pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb:hover {
5428 transform: scale(1.2) !important;
5429 }
5430
5431 /* 7. Revisions & History Panel */
5432 .pagelayer-revision-holder,
5433 .pagelayer-history-holder {
5434 border: 1px solid #e2e8f0 !important;
5435 border-radius: 8px !important;
5436 margin-bottom: 8px !important;
5437 padding: 12px !important;
5438 background-color: #ffffff !important;
5439 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
5440 transition: all 0.2s ease !important;
5441 }
5442
5443 .pagelayer-dark .pagelayer-revision-holder,
5444 .pagelayer-dark .pagelayer-history-holder {
5445 border: 1px solid #1e293b !important;
5446 background-color: #131926 !important;
5447 }
5448
5449 .pagelayer-revision-holder:hover,
5450 .pagelayer-history-holder:hover,
5451 .pagelayer-history-holder.current_active_item {
5452 background-color: #f8fafc !important;
5453 border-color: #cbd5e1 !important;
5454 }
5455
5456 .pagelayer-dark .pagelayer-revision-holder:hover,
5457 .pagelayer-dark .pagelayer-history-holder:hover,
5458 .pagelayer-dark .pagelayer-history-holder.current_active_item {
5459 background-color: #1e293b !important;
5460 border-color: #334155 !important;
5461 }
5462
5463 .pagelayer-revision-img-holder {
5464 border-radius: 50% !important;
5465 width: 24px !important;
5466 height: 24px !important;
5467 box-shadow: 0 0 0 2px #e2e8f0 !important;
5468 overflow: hidden !important;
5469 }
5470
5471 .pagelayer-dark .pagelayer-revision-img-holder {
5472 box-shadow: 0 0 0 2px #1e293b !important;
5473 }
5474
5475 .pagelayer-revision-img-holder img {
5476 width: 100% !important;
5477 height: 100% !important;
5478 object-fit: cover !important;
5479 }
5480
5481 .pagelayer-history-title {
5482 font-weight: 600 !important;
5483 color: #334155 !important;
5484 }
5485
5486 .pagelayer-dark .pagelayer-history-title {
5487 color: #f8fafc !important;
5488 }
5489
5490 .pagelayer-history-subtitle {
5491 color: #64748b !important;
5492 }
5493
5494 .pagelayer-dark .pagelayer-history-subtitle {
5495 color: #94a3b8 !important;
5496 }
5497
5498 /* 8. Loader overlay & Custom scrollbars */
5499 .pagelayer-leftbar-scroll::-webkit-scrollbar,
5500 .pagelayer-leftbar::-webkit-scrollbar,
5501 .slimScrollDiv::-webkit-scrollbar,
5502 #pagelayer-history::-webkit-scrollbar,
5503 #pagelayer-elpd::-webkit-scrollbar {
5504 width: 6px !important;
5505 height: 6px !important;
5506 }
5507
5508 .pagelayer-leftbar-scroll::-webkit-scrollbar-track,
5509 .pagelayer-leftbar::-webkit-scrollbar-track,
5510 #pagelayer-history::-webkit-scrollbar-track,
5511 #pagelayer-elpd::-webkit-scrollbar-track {
5512 background: transparent !important;
5513 }
5514
5515 .pagelayer-leftbar-scroll::-webkit-scrollbar-thumb,
5516 .pagelayer-leftbar::-webkit-scrollbar-thumb,
5517 #pagelayer-history::-webkit-scrollbar-thumb,
5518 #pagelayer-elpd::-webkit-scrollbar-thumb {
5519 background: #cbd5e1 !important;
5520 border-radius: 3px !important;
5521 }
5522
5523 .pagelayer-dark .pagelayer-leftbar-scroll::-webkit-scrollbar-thumb,
5524 .pagelayer-dark .pagelayer-leftbar::-webkit-scrollbar-thumb,
5525 .pagelayer-dark #pagelayer-history::-webkit-scrollbar-thumb,
5526 .pagelayer-dark #pagelayer-elpd::-webkit-scrollbar-thumb {
5527 background: #334155 !important;
5528 }
5529
5530
5531 /* ==========================================================================
5532 HEADER BAR AND ACTIVE SUB-TABS OVERRIDES
5533 ========================================================================== */
5534
5535 /* 1. Show and Redesign Iframe Top Bar */
5536 .pagelayer-iframe-top-bar {
5537 display: block !important;
5538 height: 48px !important;
5539 background-color: #ffffff !important;
5540 border-bottom: 1px solid #e2e8f0 !important;
5541 box-sizing: border-box !important;
5542 }
5543
5544 .pagelayer-dark .pagelayer-iframe-top-bar {
5545 background-color: #0f172a !important;
5546 border-bottom: 1px solid #1e293b !important;
5547 }
5548
5549 .pagelayer-iframe-holder {
5550 max-height: calc(100vh - 48px) !important;
5551 height: calc(100vh - 48px) !important;
5552 }
5553
5554 .pagelayer-iframe-holder-with-bar {
5555 max-height: calc(100vh - 48px) !important;
5556 height: calc(100vh - 48px) !important;
5557 }
5558
5559 /* Header bar inside top container */
5560 .pagelayer-top-header-bar {
5561 display: flex !important;
5562 align-items: center !important;
5563 justify-content: space-between !important;
5564 height: 100% !important;
5565 padding: 0 16px !important;
5566 color: #475569 !important;
5567 }
5568
5569 .pagelayer-dark .pagelayer-top-header-bar {
5570 color: #cbd5e1 !important;
5571 }
5572
5573 /* Hide legacy bottom button switcher */
5574 .pagelayer-bottombar-holder,
5575 .pagelayer-bottombar-row {
5576 display: none !important;
5577 }
5578
5579
5580 /* 2. Style Opened settings sub-tabs (accordions) */
5581 .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5582 background-color: #eff6ff !important;
5583 color: #2563eb !important;
5584 border-left: 4px solid #3b82f6 !important;
5585 border-radius: 8px 8px 0 0 !important;
5586 font-weight: 700 !important;
5587 box-shadow: 0 1px 3px rgba(59, 130, 246, 0.05) !important;
5588 }
5589
5590 .pagelayer-dark .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5591 background-color: #1e293b !important;
5592 color: #60a5fa !important;
5593 border-left: 4px solid #2563eb !important;
5594 }
5595
5596 /* Sibling rows container for opened tab */
5597 .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
5598 background-color: #ffffff !important;
5599 border-left: 4px solid #3b82f6 !important;
5600 border-right: 1px solid #e2e8f0 !important;
5601 border-bottom: 1px solid #e2e8f0 !important;
5602 border-radius: 0 0 8px 8px !important;
5603 padding: 16px 12px !important;
5604 margin-bottom: 12px !important;
5605 }
5606
5607 .pagelayer-dark .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
5608 background-color: #0b0f19 !important;
5609 border-left: 4px solid #2563eb !important;
5610 border-right: 1px solid #1e293b !important;
5611 border-bottom: 1px solid #1e293b !important;
5612 }
5613
5614 /* WordPress postbox (post settings tabs inside iframe) active state */
5615 .postbox:not(.closed) {
5616 border: 1px solid #3b82f6 !important;
5617 border-radius: 10px !important;
5618 overflow: hidden !important;
5619 margin-bottom: 16px !important;
5620 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05) !important;
5621 }
5622
5623 .pagelayer-dark .postbox:not(.closed) {
5624 border: 1px solid #334155 !important;
5625 }
5626
5627 .postbox:not(.closed) .postbox-header,
5628 .postbox:not(.closed) h2.hndle {
5629 background-color: #eff6ff !important;
5630 color: #1e40af !important;
5631 border-bottom: 1px solid #bfdbfe !important;
5632 }
5633
5634 .pagelayer-dark .postbox:not(.closed) .postbox-header,
5635 .pagelayer-dark .postbox:not(.closed) h2.hndle {
5636 background-color: #1e293b !important;
5637 color: #60a5fa !important;
5638 border-bottom: 1px solid #334155 !important;
5639 }
5640
5641 .postbox:not(.closed) .inside {
5642 padding: 16px 12px !important;
5643 background-color: #ffffff !important;
5644 }
5645
5646 .pagelayer-dark .postbox:not(.closed) .inside {
5647 background-color: #0b0f19 !important;
5648 }
5649
5650 /* ==========================================================================
5651 STYLE SKIN
5652 ========================================================================== */
5653
5654 /* Parent topbar Dark Theme */
5655 .pagelayer-iframe-top-bar {
5656 background: #26292c !important;
5657 border-bottom: 1px solid #1f2124 !important;
5658 height: 50px !important;
5659 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
5660 display: block !important;
5661 }
5662
5663 .pagelayer-top-header-bar {
5664 color: #ffffff !important;
5665 height: 100% !important;
5666 }
5667
5668
5669
5670 /* Header right icons & buttons */
5671 .pagelayer-header-icon-wrap {
5672 cursor: pointer !important;
5673 display: inline-flex !important;
5674 align-items: center !important;
5675 justify-content: center !important;
5676 color: #a4afb7 !important;
5677 border-radius: 6px !important;
5678 width: 34px !important;
5679 height: 34px !important;
5680 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5681 }
5682
5683 .pagelayer-header-icon-wrap:hover {
5684 background-color: rgba(255, 255, 255, 0.08) !important;
5685 color: #ffffff !important;
5686 transform: translateY(-1px) !important;
5687 }
5688
5689 .pagelayer-header-right .pagelayer-ai-topbar-btn {
5690 cursor: pointer !important;
5691 display: inline-flex !important;
5692 align-items: center !important;
5693 justify-content: center !important;
5694 width: 34px !important;
5695 height: 34px !important;
5696 border-radius: 6px !important;
5697 color: #c084fc !important;
5698 background: rgba(168, 85, 247, 0.15) !important;
5699 border: 1px solid rgba(168, 85, 247, 0.3) !important;
5700 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5701 position: relative !important;
5702 margin-right: 4px !important;
5703 box-sizing: border-box !important;
5704 font-size: 14px !important;
5705 line-height: 1 !important;
5706 }
5707
5708 .pagelayer-header-right .pagelayer-ai-topbar-btn:hover,
5709 .pagelayer-header-right .pagelayer-ai-topbar-btn.active {
5710 background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
5711 color: #ffffff !important;
5712 border-color: transparent !important;
5713 box-shadow: 0 0 12px rgba(124, 58, 237, 0.5) !important;
5714 transform: translateY(-1px) !important;
5715 }
5716
5717 .pagelayer-header-right .pagelayer-ai-topbar-btn i {
5718 font-size: 14px !important;
5719 line-height: 1 !important;
5720 pointer-events: none !important;
5721 color: inherit !important;
5722 }
5723
5724 .pagelayer-header-divider {
5725 width: 1px !important;
5726 height: 20px !important;
5727 background-color: rgba(255, 255, 255, 0.1) !important;
5728 margin: 0 4px !important;
5729 }
5730
5731 .pagelayer-header-right .pagelayer-update-button {
5732 width: 76px !important;
5733 background-color: #2563eb !important;
5734 color: #ffffff !important;
5735 border-radius: 6px !important;
5736 padding: 0 !important;
5737 font-weight: 600 !important;
5738 box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
5739 height: 34px !important;
5740 display: inline-flex !important;
5741 align-items: center !important;
5742 justify-content: center !important;
5743 border: none !important;
5744 font-size: 13px !important;
5745 line-height: normal !important;
5746 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5747 }
5748
5749 .pagelayer-header-right .pagelayer-update-button:hover {
5750 background-color: #1d4ed8 !important;
5751 box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
5752 transform: translateY(-1px) !important;
5753 }
5754
5755 .pagelayer-header-right .pagelayer-close-button {
5756 background-color: rgba(255, 255, 255, 0.08) !important;
5757 color: #a4afb7 !important;
5758 border: none !important;
5759 border-radius: 6px !important;
5760 width: 34px !important;
5761 height: 34px !important;
5762 display: inline-flex !important;
5763 align-items: center !important;
5764 justify-content: center !important;
5765 padding: 0 !important;
5766 cursor: pointer !important;
5767 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5768 box-sizing: border-box !important;
5769 }
5770
5771 .pagelayer-header-right .pagelayer-close-button:hover {
5772 background-color: #ef4444 !important;
5773 color: #ffffff !important;
5774 transform: translateY(-1px) !important;
5775 }
5776
5777 .pagelayer-header-right .pagelayer-close-button i {
5778 font-size: 14px !important;
5779 display: block !important;
5780 margin: 0 !important;
5781 padding: 0 !important;
5782 }
5783
5784
5785
5786 /* Edit Element properties header */
5787 .pagelayer-elpd-header {
5788 background: transparent !important;
5789 border-bottom: none !important;
5790 height: 100% !important;
5791 color: #ffffff !important;
5792 display: flex;
5793 align-items: center !important;
5794 justify-content: space-between !important;
5795 flex: 1 !important;
5796 margin-left: 25px !important;
5797 }
5798
5799 .pagelayer-elpd-title {
5800 color: #ffffff !important;
5801 font-weight: 700 !important;
5802 font-size: 14px !important;
5803 order: 1 !important;
5804 margin-right: auto !important;
5805 }
5806
5807 .pagelayer-elpd-close {
5808 color: #a4afb7 !important;
5809 cursor: pointer !important;
5810 font-size: 16px !important;
5811 order: 2 !important;
5812 position: static !important;
5813 transform: none !important;
5814 transition: color 0.2s !important;
5815 }
5816
5817 .pagelayer-elpd-close:hover {
5818 color: #ffffff !important;
5819 }
5820
5821 /* Segmented Tab Switchers - Flat light grey theme */
5822 .pagelayer-widget-tabs,
5823 .pagelayer-elpd-tabs {
5824 background-color: #f4f5f7 !important;
5825 border-bottom: 1px solid #eaeaea !important;
5826 padding: 0 !important;
5827 gap: 0 !important;
5828 display: flex !important;
5829 width: 100% !important;
5830 }
5831
5832 .pagelayer-elpd-tabs {
5833 margin-bottom: 12px !important;
5834 }
5835
5836 .pagelayer-widget-tab,
5837 .pagelayer-elpd-tab {
5838 flex: 1 !important;
5839 text-align: center !important;
5840 padding: 12px 6px !important;
5841 font-size: 12px !important;
5842 font-weight: 600 !important;
5843 color: #8c9298 !important;
5844 border-radius: 0 !important;
5845 border: none !important;
5846 background: transparent !important;
5847 box-shadow: none !important;
5848 cursor: pointer !important;
5849 border-bottom: 3px solid transparent !important;
5850 }
5851
5852 .pagelayer-widget-tab:hover,
5853 .pagelayer-elpd-tab:hover {
5854 color: #23282d !important;
5855 background: transparent !important;
5856 }
5857
5858 /* Active tab style */
5859 [pagelayer-elpd-active-tab="1"],
5860 .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
5861 color: #23282d !important;
5862 border-bottom: 3px solid #2563eb !important;
5863 /* Brand indigo line */
5864 font-weight: 700 !important;
5865 box-shadow: none !important;
5866 }
5867
5868 /* Sidebar lists backgrounds */
5869 .pagelayer-leftbar {
5870 background: #ffffff !important;
5871 }
5872
5873 /* Search Area */
5874 .pagelayer-leftbar-search {
5875 margin: 15px 15px 5px 15px !important;
5876 }
5877
5878 .pagelayer-search-field {
5879 border: 1px solid #d5dadf !important;
5880 border-radius: 3px !important;
5881 height: 32px !important;
5882 font-size: 12px !important;
5883 padding-left: 28px !important;
5884 box-shadow: none !important;
5885 background: #ffffff !important;
5886 }
5887
5888 .pagelayer-search-field:focus {
5889 border-color: #2563eb !important;
5890 box-shadow: none !important;
5891 }
5892
5893 /* Group headings list */
5894 .pagelayer-leftbar-group {
5895 display: grid !important;
5896 grid-template-columns: repeat(3, 1fr) !important;
5897 gap: 8px !important;
5898 padding: 0 15px 15px 15px !important;
5899 box-sizing: border-box !important;
5900 clear: both !important;
5901 }
5902
5903 .pagelayer-leftbar-group h5 {
5904 grid-column: span 3 !important;
5905 font-size: 11px !important;
5906 font-weight: 700 !important;
5907 letter-spacing: 0.5px !important;
5908 text-transform: uppercase !important;
5909 color: #495157 !important;
5910 background: #f4f5f7 !important;
5911 margin: 15px -15px 10px -15px !important;
5912 padding: 8px 15px !important;
5913 border-top: 1px solid #eaeaea !important;
5914 border-bottom: 1px solid #eaeaea !important;
5915 text-align: left !important;
5916 }
5917
5918 /* Draggable widgets cards - style (3 Columns & Compact) */
5919 .pagelayer-shortcode-drag {
5920 width: 100% !important;
5921 min-width: 0 !important;
5922 /* Prevents text-nowrap children from expanding grid column width */
5923 height: 58px !important;
5924 margin: 0 !important;
5925 background-color: #ffffff !important;
5926 border: 1px solid #d5dadf !important;
5927 border-radius: 4px !important;
5928 display: flex !important;
5929 flex-direction: column !important;
5930 align-items: center !important;
5931 justify-content: center !important;
5932 gap: 4px !important;
5933 box-shadow: none !important;
5934 box-sizing: border-box !important;
5935 float: none !important;
5936 transition: all 0.2s ease !important;
5937 cursor: grab !important;
5938 }
5939
5940 .pagelayer-shortcode-drag:hover {
5941 transform: none !important;
5942 border-color: #2563eb !important;
5943 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
5944 }
5945
5946 .pagelayer-shortcode {
5947 font-size: 18px !important;
5948 color: #a4afb7 !important;
5949 }
5950
5951 .pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5952 color: #2563eb !important;
5953 }
5954
5955 .pagelayer-shortcode-inner {
5956 margin-bottom: 2px !important;
5957 }
5958
5959 .pagelayer-shortcode-text {
5960 font-size: 10px !important;
5961 color: #556068 !important;
5962 font-weight: 400 !important;
5963 white-space: nowrap !important;
5964 overflow: hidden !important;
5965 text-overflow: ellipsis !important;
5966 max-width: 95% !important;
5967 display: block !important;
5968 }
5969
5970 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5971 color: #2563eb !important;
5972 }
5973
5974 /* Properties forms, sections and inputs */
5975 .pagelayer-elpd-section {
5976 border-bottom: 1px solid #eaeaea !important;
5977 background: #ffffff !important;
5978 }
5979
5980 .pagelayer-elpd-section-name {
5981 background-color: #ffffff !important;
5982 color: #495157 !important;
5983 font-weight: 700 !important;
5984 font-size: 12px !important;
5985 padding: 12px 15px !important;
5986 border-bottom: none !important;
5987 border-radius: 0 !important;
5988 border-left: none !important;
5989 box-shadow: none !important;
5990 transition: background 0.2s !important;
5991 }
5992
5993 .pagelayer-elpd-section-name:hover {
5994 background-color: #f7f8f9 !important;
5995 color: #23282d !important;
5996 }
5997
5998 .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5999 background-color: #f7f8f9 !important;
6000 color: #23282d !important;
6001 border-left: none !important;
6002 border-radius: 0 !important;
6003 font-weight: 700 !important;
6004 box-shadow: none !important;
6005 }
6006
6007 .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
6008 background-color: #ffffff !important;
6009 border-left: none !important;
6010 border-right: none !important;
6011 border-bottom: none !important;
6012 border-radius: 0 !important;
6013 padding: 15px 0 !important;
6014 margin-bottom: 0 !important;
6015 }
6016
6017 .pagelayer-form-item {
6018 padding: 6px 16px !important;
6019 margin-bottom: 10px !important;
6020 border-bottom: none !important;
6021 }
6022
6023 .pagelayer-elp-label,
6024 .pagelayer-widgets-form label {
6025 font-size: 11px !important;
6026 color: #6d7882 !important;
6027 text-transform: uppercase !important;
6028 font-weight: 700 !important;
6029 letter-spacing: 0.5px !important;
6030 margin-bottom: 5px !important;
6031 }
6032
6033 /* Fields & inputs */
6034 .pagelayer-elp-text,
6035 .pagelayer-elp-spinner,
6036 .pagelayer-elp-textarea,
6037 .pagelayer-elp-datetime,
6038 .pagelayer-elpd-body input[type="text"],
6039 .pagelayer-widgets-form input[type="text"],
6040 .pagelayer-widgets-form textarea {
6041 background-color: #ffffff !important;
6042 border: 1px solid #d5dadf !important;
6043 border-radius: 3px !important;
6044 padding: 6px 8px !important;
6045 font-size: 12px !important;
6046 color: #23282d !important;
6047 box-shadow: none !important;
6048 }
6049
6050 .pagelayer-elp-text,
6051 .pagelayer-elp-spinner,
6052 .pagelayer-elp-datetime,
6053 .pagelayer-elpd-body input[type="text"],
6054 .pagelayer-widgets-form input[type="text"] {
6055 height: 30px !important;
6056 }
6057
6058 .pagelayer-elp-select,
6059 .pagelayer-widgets-form select {
6060 background-color: #ffffff !important;
6061 border: 1px solid #d5dadf !important;
6062 border-radius: 3px !important;
6063 padding: 6px 28px 6px 10px !important;
6064 /* Fixed padding to allow text to show fully with select arrow */
6065 font-size: 12px !important;
6066 color: #23282d !important;
6067 height: 30px !important;
6068 box-shadow: none !important;
6069 -webkit-appearance: none !important;
6070 -moz-appearance: none !important;
6071 appearance: none !important;
6072 }
6073
6074 .pagelayer-elp-text:focus,
6075 .pagelayer-elp-spinner:focus,
6076 .pagelayer-elpd-body input:focus,
6077 .pagelayer-widgets-form input:focus,
6078 .pagelayer-widgets-form textarea:focus,
6079 .pagelayer-elp-select:focus,
6080 .pagelayer-widgets-form select:focus {
6081 border-color: #2563eb !important;
6082 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
6083 outline: none !important;
6084 }
6085
6086 /* Custom dropdown arrow for select */
6087 .pagelayer-elp-select,
6088 .pagelayer-widgets-form select {
6089 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236d7882' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
6090 background-position: right 6px center !important;
6091 background-size: 14px 14px !important;
6092 }
6093
6094 /* 4-column Spacing/Padding styles */
6095 .pagelayer-elp-padding-div {
6096 display: flex !important;
6097 align-items: center !important;
6098 gap: 6px !important;
6099 background: transparent !important;
6100 }
6101
6102 .pagelayer-elp-padding-inner {
6103 display: flex !important;
6104 flex-direction: column !important;
6105 align-items: center !important;
6106 flex: 1 !important;
6107 }
6108
6109 .pagelayer-elp-padding-inner input {
6110 width: 100% !important;
6111 text-align: center !important;
6112 padding: 6px !important;
6113 border: 1px solid #d5dadf !important;
6114 border-radius: 3px !important;
6115 font-size: 12px !important;
6116 box-sizing: border-box !important;
6117 height: 28px !important;
6118 background: #ffffff !important;
6119 }
6120
6121 .pagelayer-elp-padding-inner input:focus {
6122 border-color: #2563eb !important;
6123 outline: none !important;
6124 }
6125
6126 .pagelayer-elp-padding-lbl {
6127 font-size: 9px !important;
6128 text-transform: uppercase !important;
6129 color: #a4afb7 !important;
6130 margin-top: 4px !important;
6131 font-weight: 600 !important;
6132 }
6133
6134 .pagelayer-elp-padding-div i.pli-link {
6135 cursor: pointer !important;
6136 font-size: 13px !important;
6137 color: #a4afb7 !important;
6138 padding: 4px !important;
6139 border: 1px solid #d5dadf !important;
6140 border-radius: 3px !important;
6141 background: #ffffff !important;
6142 display: flex !important;
6143 align-items: center !important;
6144 justify-content: center !important;
6145 height: 28px !important;
6146 width: 28px !important;
6147 box-sizing: border-box !important;
6148 align-self: flex-start !important;
6149 }
6150
6151 .pagelayer-elp-padding-div i.pagelayer-elp-padding-linked {
6152 color: #ffffff !important;
6153 background: #2563eb !important;
6154 border-color: #2563eb !important;
6155 }
6156
6157 /* Close bar & toggle tab styling */
6158 .pagelayer-leftbar-toggle {
6159 background: #eaeaea !important;
6160 border: 1px solid #d5dadf !important;
6161 border-left: none !important;
6162 border-radius: 0 4px 4px 0 !important;
6163 color: #556068 !important;
6164 width: 12px !important;
6165 font-size: 14px !important;
6166 line-height: 40px !important;
6167 top: 50% !important;
6168 height: 40px !important;
6169 display: flex !important;
6170 align-items: center !important;
6171 justify-content: center !important;
6172 box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important;
6173 }
6174
6175 .pagelayer-leftbar-toggle:hover {
6176 background: #d5dadf !important;
6177 color: #23282d !important;
6178 }
6179
6180 /* Radio selectors (Normal/Hover, None/Color/Gradient/Image) */
6181 .pagelayer-elp-radio-div {
6182 border: 1px solid #d5dadf !important;
6183 border-radius: 3px !important;
6184 overflow: hidden !important;
6185 background: #ffffff !important;
6186 display: flex !important;
6187 }
6188
6189 .pagelayer-elp-radio {
6190 background: #ffffff !important;
6191 color: #6d7882 !important;
6192 border: none !important;
6193 border-right: 1px solid #d5dadf !important;
6194 font-size: 11px !important;
6195 padding: 6px 10px !important;
6196 font-weight: 500 !important;
6197 transition: all 0.2s ease !important;
6198 text-align: center !important;
6199 flex: 1 !important;
6200 }
6201
6202 .pagelayer-elp-radio:last-child {
6203 border-right: none !important;
6204 }
6205
6206 .pagelayer-elp-radio:hover {
6207 background-color: #f7f8f9 !important;
6208 color: #23282d !important;
6209 }
6210
6211 .pagelayer-elp-radio-active {
6212 background-color: #556068 !important;
6213 color: #ffffff !important;
6214 }
6215
6216 .pagelayer-elp-radio-active:hover {
6217 background-color: #556068 !important;
6218 }
6219
6220 /* Sidebar bottom control bar */
6221 .pagelayer-bottombar-holder {
6222 background: #26292c !important;
6223 border-top: 1px solid #1f2124 !important;
6224 padding: 5px 10px !important;
6225 height: 35px !important;
6226 display: flex !important;
6227 align-items: center !important;
6228 justify-content: space-between !important;
6229 box-sizing: border-box !important;
6230 }
6231
6232 .pagelayer-bottombar-row {
6233 background: #26292c !important;
6234 height: 35px !important;
6235 }
6236
6237 .pagelayer-bottombar-holder button {
6238 border: none !important;
6239 padding: 4px 8px !important;
6240 font-size: 11px !important;
6241 font-weight: 600 !important;
6242 border-radius: 3px !important;
6243 cursor: pointer !important;
6244 transition: background 0.2s !important;
6245 }
6246
6247 .pagelayer-bottombar-holder .pagelayer-success-btn {
6248 background-color: #2563eb !important;
6249 /* Indigo update button */
6250 color: #ffffff !important;
6251 }
6252
6253 .pagelayer-bottombar-holder .pagelayer-success-btn:hover {
6254 background-color: #1d4ed8 !important;
6255 }
6256
6257 .pagelayer-bottombar-holder .pagelayer-close-button {
6258 background-color: transparent !important;
6259 color: #a4afb7 !important;
6260 border: 1px solid #495157 !important;
6261 }
6262
6263 .pagelayer-bottombar-holder .pagelayer-close-button:hover {
6264 background-color: #373a3c !important;
6265 color: #ffffff !important;
6266 }
6267
6268 .pagelayer-bottombar-holder i {
6269 color: #a4afb7 !important;
6270 font-size: 13px !important;
6271 cursor: pointer !important;
6272 transition: color 0.2s !important;
6273 }
6274
6275 .pagelayer-bottombar-holder i:hover {
6276 color: #ffffff !important;
6277 }
6278
6279 /* ==========================================================================
6280 STYLE SIDEBAR WIDTH & RESPONSIVE DEVICERS OVERRIDES
6281 ========================================================================== */
6282
6283 /* Custom Sidebar Width (Style: 300px) */
6284 .pagelayer-leftbar-table {
6285 width: 300px !important;
6286 min-width: 300px !important;
6287 max-width: 300px !important;
6288 }
6289
6290 .pagelayer-leftbar-table.pagelayer-leftbar-hidden {
6291 width: 0px !important;
6292 min-width: 0px !important;
6293 max-width: 0px !important;
6294 }
6295
6296 .pagelayer-leftbar-holder {
6297 width: 300px !important;
6298 }
6299
6300 .pagelayer-leftbar {
6301 width: 300px !important;
6302 max-width: 300px !important;
6303 }
6304
6305 .pagelayer-leftbar-scroll,
6306 .pagelayer-leftbar-tab,
6307 .pagelayer-leftbar-holder .slimScrollDiv {
6308 width: 100% !important;
6309 max-width: 100% !important;
6310 box-sizing: border-box !important;
6311 }
6312
6313 /* absolute center 3-column topbar alignment */
6314 .pagelayer-header-left {
6315 flex: 1 !important;
6316 display: flex !important;
6317 align-items: center !important;
6318 justify-content: flex-end !important;
6319 padding-right: 24px !important;
6320 }
6321
6322 .pagelayer-header-center {
6323 color: #ffffff !important;
6324 font-size: 14px !important;
6325 font-weight: 500 !important;
6326 flex: 1 !important;
6327 display: flex !important;
6328 align-items: center !important;
6329 justify-content: center !important;
6330 }
6331
6332 .pagelayer-header-right {
6333 flex: 1 !important;
6334 display: flex !important;
6335 align-items: center !important;
6336 justify-content: flex-end !important;
6337 gap: 12px !important;
6338 }
6339 .pagelayer-header-document-title {
6340 font-size: 13px !important;
6341 font-weight: 500 !important;
6342 color: #94a3b8 !important;
6343 display: inline-flex !important;
6344 align-items: center !important;
6345 }
6346
6347 .pagelayer-header-post-name {
6348 color: #f8fafc !important;
6349 font-weight: 600 !important;
6350 background-color: rgba(255, 255, 255, 0.06) !important;
6351 border: 1px solid rgba(255, 255, 255, 0.12) !important;
6352 padding: 4px 10px !important;
6353 border-radius: 6px !important;
6354 margin-left: 8px !important;
6355 font-size: 12.5px !important;
6356 transition: all 0.2s ease !important;
6357 }
6358
6359 .pagelayer-header-post-name:hover {
6360 background-color: rgba(255, 255, 255, 0.12) !important;
6361 border-color: rgba(255, 255, 255, 0.2) !important;
6362 }
6363
6364 /* Device Selector Modernization (Style) */
6365 .pagelayer-device-selectors {
6366 background-color: transparent !important;
6367 border: none !important;
6368 padding: 0 !important;
6369 border-radius: 0 !important;
6370 display: flex !important;
6371 gap: 16px !important;
6372 align-items: center !important;
6373 }
6374
6375 .pagelayer-device-selectors .screen-mode {
6376 font-size: 18px !important;
6377 padding: 6px !important;
6378 color: #a4afb7 !important;
6379 cursor: pointer !important;
6380 border-radius: 4px !important;
6381 background-color: transparent !important;
6382 box-shadow: none !important;
6383 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
6384 position: relative !important;
6385 display: inline-flex !important;
6386 align-items: center !important;
6387 justify-content: center !important;
6388 }
6389
6390 .pagelayer-device-selectors .screen-mode:hover {
6391 color: #ffffff !important;
6392 background-color: transparent !important;
6393 transform: translateY(-1px) !important;
6394 }
6395
6396 .pagelayer-device-selectors .screen-mode.active {
6397 color: #2563eb !important;
6398 /* Premium Brand Indigo */
6399 background-color: transparent !important;
6400 box-shadow: none !important;
6401 transform: scale(1.15) !important;
6402 }
6403
6404 /* Accent bottom indicator dot for active screen mode */
6405 .pagelayer-device-selectors .screen-mode.active::after {
6406 content: '' !important;
6407 position: absolute !important;
6408 bottom: -4px !important;
6409 left: calc(50% - 2px) !important;
6410 width: 4px !important;
6411 height: 4px !important;
6412 background-color: #2563eb !important;
6413 border-radius: 50% !important;
6414 box-shadow: 0 0 4px #2563eb !important;
6415 }
6416
6417 /* Consistent Checkbox and Radio styling (Brand Indigo) */
6418 input[type="checkbox"],
6419 input[type="radio"] {
6420 accent-color: #2563eb !important;
6421 }
6422
6423 input[type="checkbox"]:checked,
6424 input[type="radio"]:checked,
6425 .pagelayer-post-category input[type="checkbox"]:checked,
6426 .pagelayer-widgets-form input[type="checkbox"]:checked,
6427 .pagelayer-elpd-body input[type="checkbox"]:checked {
6428 background-color: #2563eb !important;
6429 border-color: #2563eb !important;
6430 }
6431
6432 /* Consistent Toggle switch checked color (Brand Indigo) */
6433 input[type="checkbox"].pagelayer-elp-checkbox:checked {
6434 background-color: #2563eb !important;
6435 border-color: #2563eb !important;
6436 }
6437
6438 .pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked {
6439 background-color: #2563eb !important;
6440 border-color: #2563eb !important;
6441 }
6442
6443 /* Segmented selector active state color override (Brand Indigo) */
6444 .pagelayer-elp-radio-active,
6445 .pagelayer-elp-radio-active:hover,
6446 .pagelayer-dark .pagelayer-elp-radio-active,
6447 .pagelayer-dark .pagelayer-elp-radio-active:hover {
6448 background-color: #2563eb !important;
6449 color: #ffffff !important;
6450 }
6451
6452 /* ==========================================================================
6453 DARK MODE
6454 ========================================================================== */
6455
6456 /* Accordion sections and headings */
6457 .pagelayer-dark .pagelayer-elpd-section {
6458 border-bottom: 1px solid #1e293b !important;
6459 background: #0b0f19 !important;
6460 }
6461
6462 .pagelayer-dark .pagelayer-elpd-section-name {
6463 background-color: #0b0f19 !important;
6464 color: #cbd5e1 !important;
6465 }
6466
6467 .pagelayer-dark .pagelayer-elpd-section-name:hover {
6468 background-color: #1e293b !important;
6469 color: #ffffff !important;
6470 }
6471
6472 .pagelayer-dark .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
6473 background-color: #1e293b !important;
6474 color: #ffffff !important;
6475 }
6476
6477 .pagelayer-dark .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
6478 background-color: #0b0f19 !important;
6479 }
6480
6481 /* Input elements, Selects, Textareas, and Link buttons */
6482 .pagelayer-dark .pagelayer-elp-text,
6483 .pagelayer-dark .pagelayer-elp-spinner,
6484 .pagelayer-dark .pagelayer-elp-textarea,
6485 .pagelayer-dark .pagelayer-elpd-body input[type="text"],
6486 .pagelayer-dark .pagelayer-widgets-form input[type="text"],
6487 .pagelayer-dark .pagelayer-widgets-form textarea,
6488 .pagelayer-dark .pagelayer-elp-select,
6489 .pagelayer-dark .pagelayer-widgets-form select,
6490 .pagelayer-dark .pagelayer-elp-padding-inner input,
6491 .pagelayer-dark .pagelayer-elp-padding-div i.pli-link {
6492 color: #f8fafc !important;
6493 }
6494
6495 /* Form labels text color */
6496 .pagelayer-dark .pagelayer-elp-label,
6497 .pagelayer-dark .pagelayer-widgets-form label {
6498 color: #94a3b8 !important;
6499 }
6500
6501 /* Segmented selectors container & inactive buttons */
6502 .pagelayer-dark .pagelayer-elp-radio-div {
6503 border: 1px solid #334155 !important;
6504 background: #131926 !important;
6505 }
6506
6507 .pagelayer-dark .pagelayer-elp-radio {
6508 border-right: 1px solid #334155 !important;
6509 }
6510
6511 .pagelayer-dark .pagelayer-elp-radio:last-child {
6512 border-right: none !important;
6513 }
6514
6515 .pagelayer-dark .pagelayer-elp-radio:hover {
6516 background-color: #1e293b !important;
6517 color: #ffffff !important;
6518 }
6519
6520 /* Active tab text color */
6521 .pagelayer-dark [pagelayer-elpd-active-tab="1"],
6522 .pagelayer-dark .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
6523 color: #ffffff !important;
6524 }
6525
6526 /* Force hidden elements to be display none even if stylesheet has display important */
6527 .pagelayer-leftbar-group[style*="display: none"],
6528 .pagelayer-leftbar-group[style*="display:none"],
6529 .pagelayer-shortcode-drag[style*="display: none"],
6530 .pagelayer-shortcode-drag[style*="display:none"] {
6531 display: none !important;
6532 }
6533
6534 /* Fix desktop screen selector position to sit inline with label */
6535 .pagelayer-elp-label-div,
6536 .pagelayer-elp-link-label-div {
6537 display: flex !important;
6538 align-items: center !important;
6539 gap: 6px !important;
6540 }
6541
6542 .pagelayer-elp-label-div .pagelayer-elp-label,
6543 .pagelayer-elp-link-label-div .pagelayer-elp-link-label {
6544 display: inline-block !important;
6545 width: auto !important;
6546 vertical-align: middle !important;
6547 margin-bottom: 0 !important;
6548 }
6549
6550 .pagelayer-elp-label-div .pagelayer-elp-units,
6551 .pagelayer-elp-link-label-div .pagelayer-elp-units {
6552 margin-left: auto !important;
6553 }
6554
6555 /* Fix textarea height in sidebar */
6556 .pagelayer-elp-textarea,
6557 .pagelayer-widgets-form textarea {
6558 height: 100px;
6559 min-height: 50px;
6560 resize: vertical;
6561 }
6562
6563 /* Fix restore/revert default icon position to sit inline next to the label text */
6564 .pagelayer-elp-label-div,
6565 .pagelayer-elp-link-label-div {
6566 position: relative !important;
6567 display: flex !important;
6568 width: 100% !important;
6569 align-items: center !important;
6570 flex-wrap: nowrap !important;
6571 gap: 6px !important;
6572 }
6573
6574 .pagelayer-elp-typo .pagelayer-elp-label {
6575 position: relative !important;
6576 display: inline-flex !important;
6577 align-items: center !important;
6578 flex-wrap: wrap !important;
6579 gap: 6px !important;
6580 }
6581
6582 .pagelayer-elp-default,
6583 .pagelayer-typo-default {
6584 position: relative !important;
6585 display: none !important;
6586 align-items: center !important;
6587 justify-content: center !important;
6588 margin: 0 !important;
6589 cursor: pointer !important;
6590 top: 0 !important;
6591 left: 0 !important;
6592 right: 0 !important;
6593 width: auto !important;
6594 height: auto !important;
6595 z-index: 5 !important;
6596 }
6597
6598 .pagelayer-form-item:hover .pagelayer-elp-default[data_show=true],
6599 .pagelayer-base-control:hover .pagelayer-elp-default[data_show=true] {
6600 display: inline-flex !important;
6601 }
6602
6603 .pagelayer-elp-default i,
6604 .pagelayer-typo-default i {
6605 font-size: 11px !important;
6606 color: #64748b !important;
6607 transition: color 0.15s ease !important;
6608 }
6609
6610 .pagelayer-elp-default:hover i,
6611 .pagelayer-typo-default:hover i {
6612 color: #2563eb !important;
6613 }
6614
6615 /* Dark mode colors for restore/revert default icons */
6616 .pagelayer-dark .pagelayer-elp-default i,
6617 .pagelayer-dark .pagelayer-typo-default i {
6618 color: #94a3b8 !important;
6619 }
6620
6621 .pagelayer-dark .pagelayer-elp-default:hover i,
6622 .pagelayer-dark .pagelayer-typo-default:hover i {
6623 color: #3b82f6 !important;
6624 }
6625
6626 /* Active state for topbar header icon wraps */
6627 .pagelayer-header-icon-wrap.active {
6628 background-color: rgba(59, 130, 246, 0.2) !important;
6629 color: #3b82f6 !important;
6630 }
6631
6632 .pagelayer-dark .pagelayer-header-icon-wrap.active {
6633 background-color: rgba(96, 165, 250, 0.2) !important;
6634 color: #60a5fa !important;
6635 }
6636
6637 /* Right sidebar panel for Navigator and History */
6638 .pagelayer-right-sidebar {
6639 position: fixed !important;
6640 right: -300px;
6641 top: 0px !important;
6642 bottom: 0;
6643 width: 300px;
6644 background: #ffffff !important;
6645 border-left: 1px solid #cbd5e1 !important;
6646 box-shadow: -4px 0 15px rgba(0, 0, 0, 0.08) !important;
6647 z-index: 9999 !important;
6648 display: flex !important;
6649 flex-direction: column !important;
6650 transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
6651 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
6652 }
6653
6654 .pagelayer-right-sidebar-header {
6655 display: flex !important;
6656 align-items: center !important;
6657 justify-content: space-between !important;
6658 padding: 0 15px !important;
6659 border-bottom: 1px solid #1f2124 !important;
6660 background: #26292c !important; /* matches left sidebar header topbar background */
6661 height: 50px !important; /* matches left sidebar header topbar height */
6662 box-sizing: border-box !important;
6663 }
6664
6665 .pagelayer-right-sidebar-title {
6666 margin: 0 !important;
6667 font-size: 14px !important;
6668 font-weight: 600 !important;
6669 color: #ffffff !important;
6670 }
6671
6672 .pagelayer-right-sidebar-close {
6673 background: transparent !important;
6674 border: none !important;
6675 font-size: 16px !important;
6676 cursor: pointer !important;
6677 color: #a4afb7 !important;
6678 padding: 4px !important;
6679 line-height: 1 !important;
6680 display: flex !important;
6681 align-items: center !important;
6682 justify-content: center !important;
6683 outline: none !important;
6684 }
6685
6686 .pagelayer-right-sidebar-close:hover {
6687 color: #ffffff !important;
6688 }
6689
6690 .pagelayer-right-sidebar-content {
6691 flex: 1 !important;
6692 overflow-y: auto !important;
6693 padding: 0 !important;
6694 position: relative !important;
6695 }
6696
6697 /* Ensure inside containers are correctly displayed */
6698 .pagelayer-right-sidebar #pagelayer-navigator,
6699 .pagelayer-right-sidebar #pagelayer-history {
6700 position: static !important;
6701 height: 100% !important;
6702 background: transparent !important;
6703 }
6704
6705 .pagelayer-right-sidebar .pagelayer-leftbar-prop-body {
6706 padding: 12px !important;
6707 }
6708
6709 .pagelayer-right-sidebar .pagelayer-history-body {
6710 height: calc(100% - 40px) !important;
6711 overflow-y: auto !important;
6712 }
6713
6714 /* Dark mode overrides */
6715 .pagelayer-dark.pagelayer-right-sidebar {
6716 background: #1c1c1f !important;
6717 border-left-color: #1c1c1f !important;
6718 color: #ffffff !important;
6719 }
6720
6721 .pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-header {
6722 background: #0b0f19 !important;
6723 border-bottom-color: #1e293b !important;
6724 }
6725
6726 .pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-title {
6727 color: #ffffff !important;
6728 }
6729
6730 .pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close {
6731 color: #94a3b8 !important;
6732 }
6733
6734 .pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close:hover {
6735 color: #ffffff !important;
6736 }
6737
6738 /* Adjust Editor section when Right Sidebar is active */
6739 .pagelayer-iframe {
6740 transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
6741 }
6742
6743 .pagelayer-right-sidebar-open .pagelayer-iframe {
6744 padding-right: 300px !important;
6745 }
6746 /* Custom premium input/select/textarea styling inside Sidebar tabs (including Post Settings, Properties, etc.) */
6747 .pagelayer-leftbar-holder textarea,
6748 .pagelayer-leftbar-holder select,
6749 .pagelayer-leftbar-holder input[type="text"],
6750 .pagelayer-leftbar-holder input[type="search"],
6751 .pagelayer-leftbar-holder input[type="email"],
6752 .pagelayer-leftbar-holder input[type="tel"],
6753 .pagelayer-leftbar-holder input[type="url"],
6754 .pagelayer-leftbar-holder input:not([type]) {
6755 border: 1px solid #cbd5e1 !important;
6756 border-radius: 6px !important;
6757 background-color: #ffffff !important;
6758 color: #0f172a !important;
6759 font-size: 13px !important;
6760 transition: all 0.2s ease !important;
6761 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
6762 width: 100% !important;
6763 box-sizing: border-box !important;
6764 outline: none !important;
6765 }
6766
6767 .pagelayer-leftbar-holder textarea:focus,
6768 .pagelayer-leftbar-holder select:focus,
6769 .pagelayer-leftbar-holder input[type="text"]:focus,
6770 .pagelayer-leftbar-holder input[type="search"]:focus,
6771 .pagelayer-leftbar-holder input[type="number"]:focus,
6772 .pagelayer-leftbar-holder input[type="email"]:focus,
6773 .pagelayer-leftbar-holder input[type="tel"]:focus,
6774 .pagelayer-leftbar-holder input[type="url"]:focus,
6775 .pagelayer-leftbar-holder input:not([type]):focus {
6776 border-color: #2563eb !important;
6777 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
6778 }
6779
6780 .pagelayer-dark .pagelayer-leftbar-holder textarea,
6781 .pagelayer-dark .pagelayer-leftbar-holder select,
6782 .pagelayer-dark .pagelayer-leftbar-holder input[type="text"],
6783 .pagelayer-dark .pagelayer-leftbar-holder input[type="search"],
6784 .pagelayer-dark .pagelayer-leftbar-holder input[type="number"],
6785 .pagelayer-dark .pagelayer-leftbar-holder input[type="email"],
6786 .pagelayer-dark .pagelayer-leftbar-holder input[type="tel"],
6787 .pagelayer-dark .pagelayer-leftbar-holder input[type="url"],
6788 .pagelayer-dark .pagelayer-leftbar-holder input:not([type]) {
6789 border-color: #334155 !important;
6790 background-color: #131926 !important;
6791 color: #f8fafc !important;
6792 }
6793
6794 .pagelayer-dark .pagelayer-leftbar-holder textarea:focus,
6795 .pagelayer-dark .pagelayer-leftbar-holder select:focus,
6796 .pagelayer-dark .pagelayer-leftbar-holder input[type="text"]:focus,
6797 .pagelayer-dark .pagelayer-leftbar-holder input[type="search"]:focus,
6798 .pagelayer-dark .pagelayer-leftbar-holder input[type="number"]:focus,
6799 .pagelayer-dark .pagelayer-leftbar-holder input[type="email"]:focus,
6800 .pagelayer-dark .pagelayer-leftbar-holder input[type="tel"]:focus,
6801 .pagelayer-dark .pagelayer-leftbar-holder input[type="url"]:focus,
6802 .pagelayer-dark .pagelayer-leftbar-holder input:not([type]):focus {
6803 border-color: #2563eb !important;
6804 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
6805 }
6806
6807 /* Search field padding and icon alignment fixes */
6808 .pagelayer-leftbar-holder input.pagelayer-search-field {
6809 padding: 6px 28px 6px 32px !important;
6810 height: 32px !important;
6811 border: 1px solid #cbd5e1 !important;
6812 border-radius: 6px !important;
6813 background-color: #ffffff !important;
6814 color: #0f172a !important;
6815 font-size: 13px !important;
6816 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
6817 width: 100% !important;
6818 box-sizing: border-box !important;
6819 outline: none !important;
6820 }
6821
6822 .pagelayer-dark .pagelayer-leftbar-holder input.pagelayer-search-field {
6823 border-color: #334155 !important;
6824 background-color: #1e293b !important;
6825 color: #f8fafc !important;
6826 }
6827
6828 .pagelayer-leftbar-search .pli-search {
6829 left: 10px !important;
6830 line-height: 32px !important;
6831 height: 32px !important;
6832 color: #94a3b8 !important;
6833 font-size: 14px !important;
6834 position: absolute !important;
6835 top: 0 !important;
6836 display: flex !important;
6837 align-items: center !important;
6838 }
6839
6840 .pagelayer-leftbar-search .pagelayer-sf-empty {
6841 right: 10px !important;
6842 line-height: 32px !important;
6843 height: 32px !important;
6844 color: #94a3b8 !important;
6845 font-size: 14px !important;
6846 position: absolute !important;
6847 top: 0 !important;
6848 display: flex !important;
6849 align-items: center !important;
6850 cursor: pointer !important;
6851 transition: color 0.15s ease !important;
6852 }
6853
6854 .pagelayer-leftbar-search .pagelayer-sf-empty:hover {
6855 color: #2563eb !important;
6856 }
6857
6858 /* Fix device icon overlapping/showing on top of select and input fields */
6859 .pagelayer-elp-screen {
6860 flex-shrink: 0 !important;
6861 }
6862
6863 .pagelayer-form-item:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
6864 .pagelayer-form-item:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
6865 .pagelayer-form-item:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
6866 .pagelayer-form-item:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div,
6867 .pagelayer-base-control:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
6868 .pagelayer-base-control:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
6869 .pagelayer-base-control:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
6870 .pagelayer-base-control:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div {
6871 max-width: 45% !important;
6872 flex-wrap: wrap !important;
6873 padding-right: 10px !important;
6874 box-sizing: border-box !important;
6875 }
6876
6877 /* Fix: undo icon overlapping the icon picker select box */
6878 .pagelayer-form-item:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div,
6879 .pagelayer-base-control:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div{
6880 max-width: 45% !important;
6881 flex-wrap: wrap !important;
6882 padding-right: 20px !important;
6883 box-sizing: border-box !important;
6884 }
6885
6886 .pagelayer-elp-typo {
6887 display: flex !important;
6888 align-items: center !important;
6889 justify-content: space-between !important;
6890 flex-wrap: wrap !important;
6891 }
6892
6893 .pagelayer-elp-typo .pagelayer-elp-label {
6894 width: 48% !important;
6895 max-width: 48% !important;
6896 display: flex !important;
6897 align-items: center !important;
6898 flex-wrap: wrap !important;
6899 gap: 6px !important;
6900 margin-bottom: 0 !important;
6901 padding-right: 8px !important;
6902 box-sizing: border-box !important;
6903 }
6904
6905 .pagelayer-elp-typo .pagelayer-elp-typo-input {
6906 width: 48% !important;
6907 max-width: 48% !important;
6908 }
6909
6910 /* Fix link input field and gear icon alignment to form a unified input group */
6911 .pagelayer-elp-link-div {
6912 display: flex !important;
6913 align-items: stretch !important;
6914 flex-wrap: wrap !important;
6915 width: 100% !important;
6916 }
6917
6918 .pagelayer-elp-link-div input.pagelayer-elp-link {
6919 flex: 1 1 auto !important;
6920 width: 0 !important;
6921 height: 32px !important;
6922 border: 1px solid #cbd5e1 !important;
6923 border-right: none !important;
6924 border-radius: 4px 0 0 4px !important;
6925 box-sizing: border-box !important;
6926 padding: 6px 10px !important;
6927 font-size: 13px !important;
6928 background-color: #fff !important;
6929 margin: 0 !important;
6930 }
6931
6932 .pagelayer-dark .pagelayer-elp-link-div input.pagelayer-elp-link {
6933 background-color: #252529 !important;
6934 border-color: #475569 !important;
6935 color: #cbd5e1 !important;
6936 }
6937
6938 .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
6939 flex: 0 0 auto !important;
6940 width: 36px !important;
6941 height: 32px !important;
6942 border: 1px solid #cbd5e1 !important;
6943 border-radius: 0 4px 4px 0 !important;
6944 box-sizing: border-box !important;
6945 background-color: #f8fafc !important;
6946 color: #64748b !important;
6947 cursor: pointer !important;
6948 display: flex !important;
6949 align-items: center !important;
6950 justify-content: center !important;
6951 margin: 0 !important;
6952 position: static !important;
6953 font-size: 14px !important;
6954 line-height: normal !important;
6955 transition: background-color 0.15s ease, color 0.15s ease !important;
6956 }
6957
6958 .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
6959 background-color: #f1f5f9 !important;
6960 color: #2563eb !important;
6961 }
6962
6963 .pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
6964 background-color: #1e1e24 !important;
6965 border-color: #475569 !important;
6966 color: #94a3b8 !important;
6967 }
6968
6969 .pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
6970 background-color: #2d2d34 !important;
6971 color: #3b82f6 !important;
6972 }
6973
6974 .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
6975 border-radius: 4px !important;
6976 border-right: 1px solid #cbd5e1 !important;
6977 }
6978
6979 .pagelayer-dark .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
6980 border-right-color: #475569 !important;
6981 }
6982
6983 .pagelayer-elp-link-div .pagelayer-elp-link-addons {
6984 width: 100% !important;
6985 margin-right: 0 !important;
6986 }
6987
6988 .pagelayer-elp-link-div .pagelayer-elp-link-list {
6989 width: 100% !important;
6990 }
6991
6992 /* Match sidebar top header section and bottombar section background in dark mode */
6993 .pagelayer-dark td.pagelayer-topbar-holder,
6994 .pagelayer-dark .pagelayer-bottombar-row {
6995 background: #0b0f19 !important;
6996 }
6997
6998 .pagelayer-dark td.pagelayer-topbar-holder {
6999 border-bottom: 1px solid #1e293b !important;
7000 }
7001
7002 .pagelayer-dark .pagelayer-bottombar-holder {
7003 border-top: 1px solid #1e293b !important;
7004 background: #0b0f19 !important;
7005 }
7006
7007 /* Sidebar fields alignment and symmetric padding */
7008 .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
7009 padding: 16px 0 !important;
7010 box-sizing: border-box !important;
7011 }
7012
7013 .pagelayer-elpd-section-rows .pagelayer-form-item {
7014 padding: 8px 16px 8px 12px !important;
7015 box-sizing: border-box !important;
7016 width: 100% !important;
7017 }
7018
7019 .pagelayer-elpd-section-rows .pagelayer-elp-select-div,
7020 .pagelayer-elpd-section-rows .pagelayer-elp-spinner-div,
7021 .pagelayer-elpd-section-rows .pagelayer-elp-checkbox-div,
7022 .pagelayer-elpd-section-rows .pagelayer-elp-color-div-holder,
7023 .pagelayer-elpd-section-rows .pagelayer-elp-color-div {
7024 right: 16px !important;
7025 }
7026
7027 .pagelayer-elpd-section-name {
7028 margin-top: 0 !important;
7029 }
7030
7031 /* Global Tab widgets list - styled to match standard widgets tab (3 columns, same box size) */
7032 #pagelayer-global-widget {
7033 display: grid !important;
7034 grid-template-columns: repeat(3, 1fr) !important;
7035 gap: 8px !important;
7036 padding: 0 15px 15px 15px !important;
7037 box-sizing: border-box !important;
7038 }
7039
7040 #pagelayer-global-widget > .pagelayer-global-widget-shortcodes{
7041 grid-column: span 3 !important;
7042 margin-left: -15px !important;
7043 margin-right: -15px !important;
7044 }
7045
7046 #pagelayer-global-widget > .pagelayer-leftbar-group{
7047 grid-column: span 3 !important;
7048 margin-left: -15px !important;
7049 margin-right: -15px !important;
7050 }
7051
7052 #pagelayer-global-widget > .pagelayer-global-widget-pro{
7053 grid-column: span 3 !important;
7054 }