PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 2.1.5
Page Builder: Pagelayer – Drag and Drop website builder v2.1.5
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.1.5, at css/pagelayer-editor.css

7,019 lines 152.6 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-divider {
5690 width: 1px !important;
5691 height: 20px !important;
5692 background-color: rgba(255, 255, 255, 0.1) !important;
5693 margin: 0 4px !important;
5694 }
5695
5696 .pagelayer-header-right .pagelayer-update-button {
5697 width: 76px !important;
5698 background-color: #2563eb !important;
5699 color: #ffffff !important;
5700 border-radius: 6px !important;
5701 padding: 0 !important;
5702 font-weight: 600 !important;
5703 box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
5704 height: 34px !important;
5705 display: inline-flex !important;
5706 align-items: center !important;
5707 justify-content: center !important;
5708 border: none !important;
5709 font-size: 13px !important;
5710 line-height: normal !important;
5711 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5712 }
5713
5714 .pagelayer-header-right .pagelayer-update-button:hover {
5715 background-color: #1d4ed8 !important;
5716 box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
5717 transform: translateY(-1px) !important;
5718 }
5719
5720 .pagelayer-header-right .pagelayer-close-button {
5721 background-color: rgba(255, 255, 255, 0.08) !important;
5722 color: #a4afb7 !important;
5723 border: none !important;
5724 border-radius: 6px !important;
5725 width: 34px !important;
5726 height: 34px !important;
5727 display: inline-flex !important;
5728 align-items: center !important;
5729 justify-content: center !important;
5730 padding: 0 !important;
5731 cursor: pointer !important;
5732 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
5733 box-sizing: border-box !important;
5734 }
5735
5736 .pagelayer-header-right .pagelayer-close-button:hover {
5737 background-color: #ef4444 !important;
5738 color: #ffffff !important;
5739 transform: translateY(-1px) !important;
5740 }
5741
5742 .pagelayer-header-right .pagelayer-close-button i {
5743 font-size: 14px !important;
5744 display: block !important;
5745 margin: 0 !important;
5746 padding: 0 !important;
5747 }
5748
5749
5750
5751 /* Edit Element properties header */
5752 .pagelayer-elpd-header {
5753 background: transparent !important;
5754 border-bottom: none !important;
5755 height: 100% !important;
5756 color: #ffffff !important;
5757 display: flex;
5758 align-items: center !important;
5759 justify-content: space-between !important;
5760 flex: 1 !important;
5761 margin-left: 25px !important;
5762 }
5763
5764 .pagelayer-elpd-title {
5765 color: #ffffff !important;
5766 font-weight: 700 !important;
5767 font-size: 14px !important;
5768 order: 1 !important;
5769 margin-right: auto !important;
5770 }
5771
5772 .pagelayer-elpd-close {
5773 color: #a4afb7 !important;
5774 cursor: pointer !important;
5775 font-size: 16px !important;
5776 order: 2 !important;
5777 position: static !important;
5778 transform: none !important;
5779 transition: color 0.2s !important;
5780 }
5781
5782 .pagelayer-elpd-close:hover {
5783 color: #ffffff !important;
5784 }
5785
5786 /* Segmented Tab Switchers - Flat light grey theme */
5787 .pagelayer-widget-tabs,
5788 .pagelayer-elpd-tabs {
5789 background-color: #f4f5f7 !important;
5790 border-bottom: 1px solid #eaeaea !important;
5791 padding: 0 !important;
5792 gap: 0 !important;
5793 display: flex !important;
5794 width: 100% !important;
5795 }
5796
5797 .pagelayer-elpd-tabs {
5798 margin-bottom: 12px !important;
5799 }
5800
5801 .pagelayer-widget-tab,
5802 .pagelayer-elpd-tab {
5803 flex: 1 !important;
5804 text-align: center !important;
5805 padding: 12px 6px !important;
5806 font-size: 12px !important;
5807 font-weight: 600 !important;
5808 color: #8c9298 !important;
5809 border-radius: 0 !important;
5810 border: none !important;
5811 background: transparent !important;
5812 box-shadow: none !important;
5813 cursor: pointer !important;
5814 border-bottom: 3px solid transparent !important;
5815 }
5816
5817 .pagelayer-widget-tab:hover,
5818 .pagelayer-elpd-tab:hover {
5819 color: #23282d !important;
5820 background: transparent !important;
5821 }
5822
5823 /* Active tab style */
5824 [pagelayer-elpd-active-tab="1"],
5825 .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
5826 color: #23282d !important;
5827 border-bottom: 3px solid #2563eb !important;
5828 /* Brand indigo line */
5829 font-weight: 700 !important;
5830 box-shadow: none !important;
5831 }
5832
5833 /* Sidebar lists backgrounds */
5834 .pagelayer-leftbar {
5835 background: #ffffff !important;
5836 }
5837
5838 /* Search Area */
5839 .pagelayer-leftbar-search {
5840 margin: 15px 15px 5px 15px !important;
5841 }
5842
5843 .pagelayer-search-field {
5844 border: 1px solid #d5dadf !important;
5845 border-radius: 3px !important;
5846 height: 32px !important;
5847 font-size: 12px !important;
5848 padding-left: 28px !important;
5849 box-shadow: none !important;
5850 background: #ffffff !important;
5851 }
5852
5853 .pagelayer-search-field:focus {
5854 border-color: #2563eb !important;
5855 box-shadow: none !important;
5856 }
5857
5858 /* Group headings list */
5859 .pagelayer-leftbar-group {
5860 display: grid !important;
5861 grid-template-columns: repeat(3, 1fr) !important;
5862 gap: 8px !important;
5863 padding: 0 15px 15px 15px !important;
5864 box-sizing: border-box !important;
5865 clear: both !important;
5866 }
5867
5868 .pagelayer-leftbar-group h5 {
5869 grid-column: span 3 !important;
5870 font-size: 11px !important;
5871 font-weight: 700 !important;
5872 letter-spacing: 0.5px !important;
5873 text-transform: uppercase !important;
5874 color: #495157 !important;
5875 background: #f4f5f7 !important;
5876 margin: 15px -15px 10px -15px !important;
5877 padding: 8px 15px !important;
5878 border-top: 1px solid #eaeaea !important;
5879 border-bottom: 1px solid #eaeaea !important;
5880 text-align: left !important;
5881 }
5882
5883 /* Draggable widgets cards - style (3 Columns & Compact) */
5884 .pagelayer-shortcode-drag {
5885 width: 100% !important;
5886 min-width: 0 !important;
5887 /* Prevents text-nowrap children from expanding grid column width */
5888 height: 58px !important;
5889 margin: 0 !important;
5890 background-color: #ffffff !important;
5891 border: 1px solid #d5dadf !important;
5892 border-radius: 4px !important;
5893 display: flex !important;
5894 flex-direction: column !important;
5895 align-items: center !important;
5896 justify-content: center !important;
5897 gap: 4px !important;
5898 box-shadow: none !important;
5899 box-sizing: border-box !important;
5900 float: none !important;
5901 transition: all 0.2s ease !important;
5902 cursor: grab !important;
5903 }
5904
5905 .pagelayer-shortcode-drag:hover {
5906 transform: none !important;
5907 border-color: #2563eb !important;
5908 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
5909 }
5910
5911 .pagelayer-shortcode {
5912 font-size: 18px !important;
5913 color: #a4afb7 !important;
5914 }
5915
5916 .pagelayer-shortcode-drag:hover .pagelayer-shortcode {
5917 color: #2563eb !important;
5918 }
5919
5920 .pagelayer-shortcode-inner {
5921 margin-bottom: 2px !important;
5922 }
5923
5924 .pagelayer-shortcode-text {
5925 font-size: 10px !important;
5926 color: #556068 !important;
5927 font-weight: 400 !important;
5928 white-space: nowrap !important;
5929 overflow: hidden !important;
5930 text-overflow: ellipsis !important;
5931 max-width: 95% !important;
5932 display: block !important;
5933 }
5934
5935 .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
5936 color: #2563eb !important;
5937 }
5938
5939 /* Properties forms, sections and inputs */
5940 .pagelayer-elpd-section {
5941 border-bottom: 1px solid #eaeaea !important;
5942 background: #ffffff !important;
5943 }
5944
5945 .pagelayer-elpd-section-name {
5946 background-color: #ffffff !important;
5947 color: #495157 !important;
5948 font-weight: 700 !important;
5949 font-size: 12px !important;
5950 padding: 12px 15px !important;
5951 border-bottom: none !important;
5952 border-radius: 0 !important;
5953 border-left: none !important;
5954 box-shadow: none !important;
5955 transition: background 0.2s !important;
5956 }
5957
5958 .pagelayer-elpd-section-name:hover {
5959 background-color: #f7f8f9 !important;
5960 color: #23282d !important;
5961 }
5962
5963 .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
5964 background-color: #f7f8f9 !important;
5965 color: #23282d !important;
5966 border-left: none !important;
5967 border-radius: 0 !important;
5968 font-weight: 700 !important;
5969 box-shadow: none !important;
5970 }
5971
5972 .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
5973 background-color: #ffffff !important;
5974 border-left: none !important;
5975 border-right: none !important;
5976 border-bottom: none !important;
5977 border-radius: 0 !important;
5978 padding: 15px 0 !important;
5979 margin-bottom: 0 !important;
5980 }
5981
5982 .pagelayer-form-item {
5983 padding: 6px 16px !important;
5984 margin-bottom: 10px !important;
5985 border-bottom: none !important;
5986 }
5987
5988 .pagelayer-elp-label,
5989 .pagelayer-widgets-form label {
5990 font-size: 11px !important;
5991 color: #6d7882 !important;
5992 text-transform: uppercase !important;
5993 font-weight: 700 !important;
5994 letter-spacing: 0.5px !important;
5995 margin-bottom: 5px !important;
5996 }
5997
5998 /* Fields & inputs */
5999 .pagelayer-elp-text,
6000 .pagelayer-elp-spinner,
6001 .pagelayer-elp-textarea,
6002 .pagelayer-elp-datetime,
6003 .pagelayer-elpd-body input[type="text"],
6004 .pagelayer-widgets-form input[type="text"],
6005 .pagelayer-widgets-form textarea {
6006 background-color: #ffffff !important;
6007 border: 1px solid #d5dadf !important;
6008 border-radius: 3px !important;
6009 padding: 6px 8px !important;
6010 font-size: 12px !important;
6011 color: #23282d !important;
6012 box-shadow: none !important;
6013 }
6014
6015 .pagelayer-elp-text,
6016 .pagelayer-elp-spinner,
6017 .pagelayer-elp-datetime,
6018 .pagelayer-elpd-body input[type="text"],
6019 .pagelayer-widgets-form input[type="text"] {
6020 height: 30px !important;
6021 }
6022
6023 .pagelayer-elp-select,
6024 .pagelayer-widgets-form select {
6025 background-color: #ffffff !important;
6026 border: 1px solid #d5dadf !important;
6027 border-radius: 3px !important;
6028 padding: 6px 28px 6px 10px !important;
6029 /* Fixed padding to allow text to show fully with select arrow */
6030 font-size: 12px !important;
6031 color: #23282d !important;
6032 height: 30px !important;
6033 box-shadow: none !important;
6034 -webkit-appearance: none !important;
6035 -moz-appearance: none !important;
6036 appearance: none !important;
6037 }
6038
6039 .pagelayer-elp-text:focus,
6040 .pagelayer-elp-spinner:focus,
6041 .pagelayer-elpd-body input:focus,
6042 .pagelayer-widgets-form input:focus,
6043 .pagelayer-widgets-form textarea:focus,
6044 .pagelayer-elp-select:focus,
6045 .pagelayer-widgets-form select:focus {
6046 border-color: #2563eb !important;
6047 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
6048 outline: none !important;
6049 }
6050
6051 /* Custom dropdown arrow for select */
6052 .pagelayer-elp-select,
6053 .pagelayer-widgets-form select {
6054 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;
6055 background-position: right 6px center !important;
6056 background-size: 14px 14px !important;
6057 }
6058
6059 /* 4-column Spacing/Padding styles */
6060 .pagelayer-elp-padding-div {
6061 display: flex !important;
6062 align-items: center !important;
6063 gap: 6px !important;
6064 background: transparent !important;
6065 }
6066
6067 .pagelayer-elp-padding-inner {
6068 display: flex !important;
6069 flex-direction: column !important;
6070 align-items: center !important;
6071 flex: 1 !important;
6072 }
6073
6074 .pagelayer-elp-padding-inner input {
6075 width: 100% !important;
6076 text-align: center !important;
6077 padding: 6px !important;
6078 border: 1px solid #d5dadf !important;
6079 border-radius: 3px !important;
6080 font-size: 12px !important;
6081 box-sizing: border-box !important;
6082 height: 28px !important;
6083 background: #ffffff !important;
6084 }
6085
6086 .pagelayer-elp-padding-inner input:focus {
6087 border-color: #2563eb !important;
6088 outline: none !important;
6089 }
6090
6091 .pagelayer-elp-padding-lbl {
6092 font-size: 9px !important;
6093 text-transform: uppercase !important;
6094 color: #a4afb7 !important;
6095 margin-top: 4px !important;
6096 font-weight: 600 !important;
6097 }
6098
6099 .pagelayer-elp-padding-div i.pli-link {
6100 cursor: pointer !important;
6101 font-size: 13px !important;
6102 color: #a4afb7 !important;
6103 padding: 4px !important;
6104 border: 1px solid #d5dadf !important;
6105 border-radius: 3px !important;
6106 background: #ffffff !important;
6107 display: flex !important;
6108 align-items: center !important;
6109 justify-content: center !important;
6110 height: 28px !important;
6111 width: 28px !important;
6112 box-sizing: border-box !important;
6113 align-self: flex-start !important;
6114 }
6115
6116 .pagelayer-elp-padding-div i.pagelayer-elp-padding-linked {
6117 color: #ffffff !important;
6118 background: #2563eb !important;
6119 border-color: #2563eb !important;
6120 }
6121
6122 /* Close bar & toggle tab styling */
6123 .pagelayer-leftbar-toggle {
6124 background: #eaeaea !important;
6125 border: 1px solid #d5dadf !important;
6126 border-left: none !important;
6127 border-radius: 0 4px 4px 0 !important;
6128 color: #556068 !important;
6129 width: 12px !important;
6130 font-size: 14px !important;
6131 line-height: 40px !important;
6132 top: 50% !important;
6133 height: 40px !important;
6134 display: flex !important;
6135 align-items: center !important;
6136 justify-content: center !important;
6137 box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important;
6138 }
6139
6140 .pagelayer-leftbar-toggle:hover {
6141 background: #d5dadf !important;
6142 color: #23282d !important;
6143 }
6144
6145 /* Radio selectors (Normal/Hover, None/Color/Gradient/Image) */
6146 .pagelayer-elp-radio-div {
6147 border: 1px solid #d5dadf !important;
6148 border-radius: 3px !important;
6149 overflow: hidden !important;
6150 background: #ffffff !important;
6151 display: flex !important;
6152 }
6153
6154 .pagelayer-elp-radio {
6155 background: #ffffff !important;
6156 color: #6d7882 !important;
6157 border: none !important;
6158 border-right: 1px solid #d5dadf !important;
6159 font-size: 11px !important;
6160 padding: 6px 10px !important;
6161 font-weight: 500 !important;
6162 transition: all 0.2s ease !important;
6163 text-align: center !important;
6164 flex: 1 !important;
6165 }
6166
6167 .pagelayer-elp-radio:last-child {
6168 border-right: none !important;
6169 }
6170
6171 .pagelayer-elp-radio:hover {
6172 background-color: #f7f8f9 !important;
6173 color: #23282d !important;
6174 }
6175
6176 .pagelayer-elp-radio-active {
6177 background-color: #556068 !important;
6178 color: #ffffff !important;
6179 }
6180
6181 .pagelayer-elp-radio-active:hover {
6182 background-color: #556068 !important;
6183 }
6184
6185 /* Sidebar bottom control bar */
6186 .pagelayer-bottombar-holder {
6187 background: #26292c !important;
6188 border-top: 1px solid #1f2124 !important;
6189 padding: 5px 10px !important;
6190 height: 35px !important;
6191 display: flex !important;
6192 align-items: center !important;
6193 justify-content: space-between !important;
6194 box-sizing: border-box !important;
6195 }
6196
6197 .pagelayer-bottombar-row {
6198 background: #26292c !important;
6199 height: 35px !important;
6200 }
6201
6202 .pagelayer-bottombar-holder button {
6203 border: none !important;
6204 padding: 4px 8px !important;
6205 font-size: 11px !important;
6206 font-weight: 600 !important;
6207 border-radius: 3px !important;
6208 cursor: pointer !important;
6209 transition: background 0.2s !important;
6210 }
6211
6212 .pagelayer-bottombar-holder .pagelayer-success-btn {
6213 background-color: #2563eb !important;
6214 /* Indigo update button */
6215 color: #ffffff !important;
6216 }
6217
6218 .pagelayer-bottombar-holder .pagelayer-success-btn:hover {
6219 background-color: #1d4ed8 !important;
6220 }
6221
6222 .pagelayer-bottombar-holder .pagelayer-close-button {
6223 background-color: transparent !important;
6224 color: #a4afb7 !important;
6225 border: 1px solid #495157 !important;
6226 }
6227
6228 .pagelayer-bottombar-holder .pagelayer-close-button:hover {
6229 background-color: #373a3c !important;
6230 color: #ffffff !important;
6231 }
6232
6233 .pagelayer-bottombar-holder i {
6234 color: #a4afb7 !important;
6235 font-size: 13px !important;
6236 cursor: pointer !important;
6237 transition: color 0.2s !important;
6238 }
6239
6240 .pagelayer-bottombar-holder i:hover {
6241 color: #ffffff !important;
6242 }
6243
6244 /* ==========================================================================
6245 STYLE SIDEBAR WIDTH & RESPONSIVE DEVICERS OVERRIDES
6246 ========================================================================== */
6247
6248 /* Custom Sidebar Width (Style: 300px) */
6249 .pagelayer-leftbar-table {
6250 width: 300px !important;
6251 min-width: 300px !important;
6252 max-width: 300px !important;
6253 }
6254
6255 .pagelayer-leftbar-table.pagelayer-leftbar-hidden {
6256 width: 0px !important;
6257 min-width: 0px !important;
6258 max-width: 0px !important;
6259 }
6260
6261 .pagelayer-leftbar-holder {
6262 width: 300px !important;
6263 }
6264
6265 .pagelayer-leftbar {
6266 width: 300px !important;
6267 max-width: 300px !important;
6268 }
6269
6270 .pagelayer-leftbar-scroll,
6271 .pagelayer-leftbar-tab,
6272 .pagelayer-leftbar-holder .slimScrollDiv {
6273 width: 100% !important;
6274 max-width: 100% !important;
6275 box-sizing: border-box !important;
6276 }
6277
6278 /* absolute center 3-column topbar alignment */
6279 .pagelayer-header-left {
6280 flex: 1 !important;
6281 display: flex !important;
6282 align-items: center !important;
6283 justify-content: flex-end !important;
6284 padding-right: 24px !important;
6285 }
6286
6287 .pagelayer-header-center {
6288 color: #ffffff !important;
6289 font-size: 14px !important;
6290 font-weight: 500 !important;
6291 flex: 1 !important;
6292 display: flex !important;
6293 align-items: center !important;
6294 justify-content: center !important;
6295 }
6296
6297 .pagelayer-header-right {
6298 flex: 1 !important;
6299 display: flex !important;
6300 align-items: center !important;
6301 justify-content: flex-end !important;
6302 gap: 12px !important;
6303 }
6304 .pagelayer-header-document-title {
6305 font-size: 13px !important;
6306 font-weight: 500 !important;
6307 color: #94a3b8 !important;
6308 display: inline-flex !important;
6309 align-items: center !important;
6310 }
6311
6312 .pagelayer-header-post-name {
6313 color: #f8fafc !important;
6314 font-weight: 600 !important;
6315 background-color: rgba(255, 255, 255, 0.06) !important;
6316 border: 1px solid rgba(255, 255, 255, 0.12) !important;
6317 padding: 4px 10px !important;
6318 border-radius: 6px !important;
6319 margin-left: 8px !important;
6320 font-size: 12.5px !important;
6321 transition: all 0.2s ease !important;
6322 }
6323
6324 .pagelayer-header-post-name:hover {
6325 background-color: rgba(255, 255, 255, 0.12) !important;
6326 border-color: rgba(255, 255, 255, 0.2) !important;
6327 }
6328
6329 /* Device Selector Modernization (Style) */
6330 .pagelayer-device-selectors {
6331 background-color: transparent !important;
6332 border: none !important;
6333 padding: 0 !important;
6334 border-radius: 0 !important;
6335 display: flex !important;
6336 gap: 16px !important;
6337 align-items: center !important;
6338 }
6339
6340 .pagelayer-device-selectors .screen-mode {
6341 font-size: 18px !important;
6342 padding: 6px !important;
6343 color: #a4afb7 !important;
6344 cursor: pointer !important;
6345 border-radius: 4px !important;
6346 background-color: transparent !important;
6347 box-shadow: none !important;
6348 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
6349 position: relative !important;
6350 display: inline-flex !important;
6351 align-items: center !important;
6352 justify-content: center !important;
6353 }
6354
6355 .pagelayer-device-selectors .screen-mode:hover {
6356 color: #ffffff !important;
6357 background-color: transparent !important;
6358 transform: translateY(-1px) !important;
6359 }
6360
6361 .pagelayer-device-selectors .screen-mode.active {
6362 color: #2563eb !important;
6363 /* Premium Brand Indigo */
6364 background-color: transparent !important;
6365 box-shadow: none !important;
6366 transform: scale(1.15) !important;
6367 }
6368
6369 /* Accent bottom indicator dot for active screen mode */
6370 .pagelayer-device-selectors .screen-mode.active::after {
6371 content: '' !important;
6372 position: absolute !important;
6373 bottom: -4px !important;
6374 left: calc(50% - 2px) !important;
6375 width: 4px !important;
6376 height: 4px !important;
6377 background-color: #2563eb !important;
6378 border-radius: 50% !important;
6379 box-shadow: 0 0 4px #2563eb !important;
6380 }
6381
6382 /* Consistent Checkbox and Radio styling (Brand Indigo) */
6383 input[type="checkbox"],
6384 input[type="radio"] {
6385 accent-color: #2563eb !important;
6386 }
6387
6388 input[type="checkbox"]:checked,
6389 input[type="radio"]:checked,
6390 .pagelayer-post-category input[type="checkbox"]:checked,
6391 .pagelayer-widgets-form input[type="checkbox"]:checked,
6392 .pagelayer-elpd-body input[type="checkbox"]:checked {
6393 background-color: #2563eb !important;
6394 border-color: #2563eb !important;
6395 }
6396
6397 /* Consistent Toggle switch checked color (Brand Indigo) */
6398 input[type="checkbox"].pagelayer-elp-checkbox:checked {
6399 background-color: #2563eb !important;
6400 border-color: #2563eb !important;
6401 }
6402
6403 .pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked {
6404 background-color: #2563eb !important;
6405 border-color: #2563eb !important;
6406 }
6407
6408 /* Segmented selector active state color override (Brand Indigo) */
6409 .pagelayer-elp-radio-active,
6410 .pagelayer-elp-radio-active:hover,
6411 .pagelayer-dark .pagelayer-elp-radio-active,
6412 .pagelayer-dark .pagelayer-elp-radio-active:hover {
6413 background-color: #2563eb !important;
6414 color: #ffffff !important;
6415 }
6416
6417 /* ==========================================================================
6418 DARK MODE
6419 ========================================================================== */
6420
6421 /* Accordion sections and headings */
6422 .pagelayer-dark .pagelayer-elpd-section {
6423 border-bottom: 1px solid #1e293b !important;
6424 background: #0b0f19 !important;
6425 }
6426
6427 .pagelayer-dark .pagelayer-elpd-section-name {
6428 background-color: #0b0f19 !important;
6429 color: #cbd5e1 !important;
6430 }
6431
6432 .pagelayer-dark .pagelayer-elpd-section-name:hover {
6433 background-color: #1e293b !important;
6434 color: #ffffff !important;
6435 }
6436
6437 .pagelayer-dark .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
6438 background-color: #1e293b !important;
6439 color: #ffffff !important;
6440 }
6441
6442 .pagelayer-dark .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
6443 background-color: #0b0f19 !important;
6444 }
6445
6446 /* Input elements, Selects, Textareas, and Link buttons */
6447 .pagelayer-dark .pagelayer-elp-text,
6448 .pagelayer-dark .pagelayer-elp-spinner,
6449 .pagelayer-dark .pagelayer-elp-textarea,
6450 .pagelayer-dark .pagelayer-elpd-body input[type="text"],
6451 .pagelayer-dark .pagelayer-widgets-form input[type="text"],
6452 .pagelayer-dark .pagelayer-widgets-form textarea,
6453 .pagelayer-dark .pagelayer-elp-select,
6454 .pagelayer-dark .pagelayer-widgets-form select,
6455 .pagelayer-dark .pagelayer-elp-padding-inner input,
6456 .pagelayer-dark .pagelayer-elp-padding-div i.pli-link {
6457 color: #f8fafc !important;
6458 }
6459
6460 /* Form labels text color */
6461 .pagelayer-dark .pagelayer-elp-label,
6462 .pagelayer-dark .pagelayer-widgets-form label {
6463 color: #94a3b8 !important;
6464 }
6465
6466 /* Segmented selectors container & inactive buttons */
6467 .pagelayer-dark .pagelayer-elp-radio-div {
6468 border: 1px solid #334155 !important;
6469 background: #131926 !important;
6470 }
6471
6472 .pagelayer-dark .pagelayer-elp-radio {
6473 border-right: 1px solid #334155 !important;
6474 }
6475
6476 .pagelayer-dark .pagelayer-elp-radio:last-child {
6477 border-right: none !important;
6478 }
6479
6480 .pagelayer-dark .pagelayer-elp-radio:hover {
6481 background-color: #1e293b !important;
6482 color: #ffffff !important;
6483 }
6484
6485 /* Active tab text color */
6486 .pagelayer-dark [pagelayer-elpd-active-tab="1"],
6487 .pagelayer-dark .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
6488 color: #ffffff !important;
6489 }
6490
6491 /* Force hidden elements to be display none even if stylesheet has display important */
6492 .pagelayer-leftbar-group[style*="display: none"],
6493 .pagelayer-leftbar-group[style*="display:none"],
6494 .pagelayer-shortcode-drag[style*="display: none"],
6495 .pagelayer-shortcode-drag[style*="display:none"] {
6496 display: none !important;
6497 }
6498
6499 /* Fix desktop screen selector position to sit inline with label */
6500 .pagelayer-elp-label-div,
6501 .pagelayer-elp-link-label-div {
6502 display: flex !important;
6503 align-items: center !important;
6504 gap: 6px !important;
6505 }
6506
6507 .pagelayer-elp-label-div .pagelayer-elp-label,
6508 .pagelayer-elp-link-label-div .pagelayer-elp-link-label {
6509 display: inline-block !important;
6510 width: auto !important;
6511 vertical-align: middle !important;
6512 margin-bottom: 0 !important;
6513 }
6514
6515 .pagelayer-elp-label-div .pagelayer-elp-units,
6516 .pagelayer-elp-link-label-div .pagelayer-elp-units {
6517 margin-left: auto !important;
6518 }
6519
6520 /* Fix textarea height in sidebar */
6521 .pagelayer-elp-textarea,
6522 .pagelayer-widgets-form textarea {
6523 height: 100px;
6524 min-height: 50px;
6525 resize: vertical;
6526 }
6527
6528 /* Fix restore/revert default icon position to sit inline next to the label text */
6529 .pagelayer-elp-label-div,
6530 .pagelayer-elp-link-label-div {
6531 position: relative !important;
6532 display: flex !important;
6533 width: 100% !important;
6534 align-items: center !important;
6535 flex-wrap: nowrap !important;
6536 gap: 6px !important;
6537 }
6538
6539 .pagelayer-elp-typo .pagelayer-elp-label {
6540 position: relative !important;
6541 display: inline-flex !important;
6542 align-items: center !important;
6543 flex-wrap: wrap !important;
6544 gap: 6px !important;
6545 }
6546
6547 .pagelayer-elp-default,
6548 .pagelayer-typo-default {
6549 position: relative !important;
6550 display: none !important;
6551 align-items: center !important;
6552 justify-content: center !important;
6553 margin: 0 !important;
6554 cursor: pointer !important;
6555 top: 0 !important;
6556 left: 0 !important;
6557 right: 0 !important;
6558 width: auto !important;
6559 height: auto !important;
6560 z-index: 5 !important;
6561 }
6562
6563 .pagelayer-form-item:hover .pagelayer-elp-default[data_show=true],
6564 .pagelayer-base-control:hover .pagelayer-elp-default[data_show=true] {
6565 display: inline-flex !important;
6566 }
6567
6568 .pagelayer-elp-default i,
6569 .pagelayer-typo-default i {
6570 font-size: 11px !important;
6571 color: #64748b !important;
6572 transition: color 0.15s ease !important;
6573 }
6574
6575 .pagelayer-elp-default:hover i,
6576 .pagelayer-typo-default:hover i {
6577 color: #2563eb !important;
6578 }
6579
6580 /* Dark mode colors for restore/revert default icons */
6581 .pagelayer-dark .pagelayer-elp-default i,
6582 .pagelayer-dark .pagelayer-typo-default i {
6583 color: #94a3b8 !important;
6584 }
6585
6586 .pagelayer-dark .pagelayer-elp-default:hover i,
6587 .pagelayer-dark .pagelayer-typo-default:hover i {
6588 color: #3b82f6 !important;
6589 }
6590
6591 /* Active state for topbar header icon wraps */
6592 .pagelayer-header-icon-wrap.active {
6593 background-color: rgba(59, 130, 246, 0.2) !important;
6594 color: #3b82f6 !important;
6595 }
6596
6597 .pagelayer-dark .pagelayer-header-icon-wrap.active {
6598 background-color: rgba(96, 165, 250, 0.2) !important;
6599 color: #60a5fa !important;
6600 }
6601
6602 /* Right sidebar panel for Navigator and History */
6603 .pagelayer-right-sidebar {
6604 position: fixed !important;
6605 right: -300px;
6606 top: 0px !important;
6607 bottom: 0;
6608 width: 300px;
6609 background: #ffffff !important;
6610 border-left: 1px solid #cbd5e1 !important;
6611 box-shadow: -4px 0 15px rgba(0, 0, 0, 0.08) !important;
6612 z-index: 9999 !important;
6613 display: flex !important;
6614 flex-direction: column !important;
6615 transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
6616 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
6617 }
6618
6619 .pagelayer-right-sidebar-header {
6620 display: flex !important;
6621 align-items: center !important;
6622 justify-content: space-between !important;
6623 padding: 0 15px !important;
6624 border-bottom: 1px solid #1f2124 !important;
6625 background: #26292c !important; /* matches left sidebar header topbar background */
6626 height: 50px !important; /* matches left sidebar header topbar height */
6627 box-sizing: border-box !important;
6628 }
6629
6630 .pagelayer-right-sidebar-title {
6631 margin: 0 !important;
6632 font-size: 14px !important;
6633 font-weight: 600 !important;
6634 color: #ffffff !important;
6635 }
6636
6637 .pagelayer-right-sidebar-close {
6638 background: transparent !important;
6639 border: none !important;
6640 font-size: 16px !important;
6641 cursor: pointer !important;
6642 color: #a4afb7 !important;
6643 padding: 4px !important;
6644 line-height: 1 !important;
6645 display: flex !important;
6646 align-items: center !important;
6647 justify-content: center !important;
6648 outline: none !important;
6649 }
6650
6651 .pagelayer-right-sidebar-close:hover {
6652 color: #ffffff !important;
6653 }
6654
6655 .pagelayer-right-sidebar-content {
6656 flex: 1 !important;
6657 overflow-y: auto !important;
6658 padding: 0 !important;
6659 position: relative !important;
6660 }
6661
6662 /* Ensure inside containers are correctly displayed */
6663 .pagelayer-right-sidebar #pagelayer-navigator,
6664 .pagelayer-right-sidebar #pagelayer-history {
6665 position: static !important;
6666 height: 100% !important;
6667 background: transparent !important;
6668 }
6669
6670 .pagelayer-right-sidebar .pagelayer-leftbar-prop-body {
6671 padding: 12px !important;
6672 }
6673
6674 .pagelayer-right-sidebar .pagelayer-history-body {
6675 height: calc(100% - 40px) !important;
6676 overflow-y: auto !important;
6677 }
6678
6679 /* Dark mode overrides */
6680 .pagelayer-dark.pagelayer-right-sidebar {
6681 background: #1c1c1f !important;
6682 border-left-color: #1c1c1f !important;
6683 color: #ffffff !important;
6684 }
6685
6686 .pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-header {
6687 background: #0b0f19 !important;
6688 border-bottom-color: #1e293b !important;
6689 }
6690
6691 .pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-title {
6692 color: #ffffff !important;
6693 }
6694
6695 .pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close {
6696 color: #94a3b8 !important;
6697 }
6698
6699 .pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close:hover {
6700 color: #ffffff !important;
6701 }
6702
6703 /* Adjust Editor section when Right Sidebar is active */
6704 .pagelayer-iframe {
6705 transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
6706 }
6707
6708 .pagelayer-right-sidebar-open .pagelayer-iframe {
6709 padding-right: 300px !important;
6710 }
6711 /* Custom premium input/select/textarea styling inside Sidebar tabs (including Post Settings, Properties, etc.) */
6712 .pagelayer-leftbar-holder textarea,
6713 .pagelayer-leftbar-holder select,
6714 .pagelayer-leftbar-holder input[type="text"],
6715 .pagelayer-leftbar-holder input[type="search"],
6716 .pagelayer-leftbar-holder input[type="email"],
6717 .pagelayer-leftbar-holder input[type="tel"],
6718 .pagelayer-leftbar-holder input[type="url"],
6719 .pagelayer-leftbar-holder input:not([type]) {
6720 border: 1px solid #cbd5e1 !important;
6721 border-radius: 6px !important;
6722 background-color: #ffffff !important;
6723 color: #0f172a !important;
6724 font-size: 13px !important;
6725 transition: all 0.2s ease !important;
6726 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
6727 width: 100% !important;
6728 box-sizing: border-box !important;
6729 outline: none !important;
6730 }
6731
6732 .pagelayer-leftbar-holder textarea:focus,
6733 .pagelayer-leftbar-holder select:focus,
6734 .pagelayer-leftbar-holder input[type="text"]:focus,
6735 .pagelayer-leftbar-holder input[type="search"]:focus,
6736 .pagelayer-leftbar-holder input[type="number"]:focus,
6737 .pagelayer-leftbar-holder input[type="email"]:focus,
6738 .pagelayer-leftbar-holder input[type="tel"]:focus,
6739 .pagelayer-leftbar-holder input[type="url"]:focus,
6740 .pagelayer-leftbar-holder input:not([type]):focus {
6741 border-color: #2563eb !important;
6742 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
6743 }
6744
6745 .pagelayer-dark .pagelayer-leftbar-holder textarea,
6746 .pagelayer-dark .pagelayer-leftbar-holder select,
6747 .pagelayer-dark .pagelayer-leftbar-holder input[type="text"],
6748 .pagelayer-dark .pagelayer-leftbar-holder input[type="search"],
6749 .pagelayer-dark .pagelayer-leftbar-holder input[type="number"],
6750 .pagelayer-dark .pagelayer-leftbar-holder input[type="email"],
6751 .pagelayer-dark .pagelayer-leftbar-holder input[type="tel"],
6752 .pagelayer-dark .pagelayer-leftbar-holder input[type="url"],
6753 .pagelayer-dark .pagelayer-leftbar-holder input:not([type]) {
6754 border-color: #334155 !important;
6755 background-color: #131926 !important;
6756 color: #f8fafc !important;
6757 }
6758
6759 .pagelayer-dark .pagelayer-leftbar-holder textarea:focus,
6760 .pagelayer-dark .pagelayer-leftbar-holder select:focus,
6761 .pagelayer-dark .pagelayer-leftbar-holder input[type="text"]:focus,
6762 .pagelayer-dark .pagelayer-leftbar-holder input[type="search"]:focus,
6763 .pagelayer-dark .pagelayer-leftbar-holder input[type="number"]:focus,
6764 .pagelayer-dark .pagelayer-leftbar-holder input[type="email"]:focus,
6765 .pagelayer-dark .pagelayer-leftbar-holder input[type="tel"]:focus,
6766 .pagelayer-dark .pagelayer-leftbar-holder input[type="url"]:focus,
6767 .pagelayer-dark .pagelayer-leftbar-holder input:not([type]):focus {
6768 border-color: #2563eb !important;
6769 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
6770 }
6771
6772 /* Search field padding and icon alignment fixes */
6773 .pagelayer-leftbar-holder input.pagelayer-search-field {
6774 padding: 6px 28px 6px 32px !important;
6775 height: 32px !important;
6776 border: 1px solid #cbd5e1 !important;
6777 border-radius: 6px !important;
6778 background-color: #ffffff !important;
6779 color: #0f172a !important;
6780 font-size: 13px !important;
6781 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
6782 width: 100% !important;
6783 box-sizing: border-box !important;
6784 outline: none !important;
6785 }
6786
6787 .pagelayer-dark .pagelayer-leftbar-holder input.pagelayer-search-field {
6788 border-color: #334155 !important;
6789 background-color: #1e293b !important;
6790 color: #f8fafc !important;
6791 }
6792
6793 .pagelayer-leftbar-search .pli-search {
6794 left: 10px !important;
6795 line-height: 32px !important;
6796 height: 32px !important;
6797 color: #94a3b8 !important;
6798 font-size: 14px !important;
6799 position: absolute !important;
6800 top: 0 !important;
6801 display: flex !important;
6802 align-items: center !important;
6803 }
6804
6805 .pagelayer-leftbar-search .pagelayer-sf-empty {
6806 right: 10px !important;
6807 line-height: 32px !important;
6808 height: 32px !important;
6809 color: #94a3b8 !important;
6810 font-size: 14px !important;
6811 position: absolute !important;
6812 top: 0 !important;
6813 display: flex !important;
6814 align-items: center !important;
6815 cursor: pointer !important;
6816 transition: color 0.15s ease !important;
6817 }
6818
6819 .pagelayer-leftbar-search .pagelayer-sf-empty:hover {
6820 color: #2563eb !important;
6821 }
6822
6823 /* Fix device icon overlapping/showing on top of select and input fields */
6824 .pagelayer-elp-screen {
6825 flex-shrink: 0 !important;
6826 }
6827
6828 .pagelayer-form-item:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
6829 .pagelayer-form-item:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
6830 .pagelayer-form-item:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
6831 .pagelayer-form-item:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div,
6832 .pagelayer-base-control:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
6833 .pagelayer-base-control:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
6834 .pagelayer-base-control:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
6835 .pagelayer-base-control:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div {
6836 max-width: 45% !important;
6837 flex-wrap: wrap !important;
6838 padding-right: 10px !important;
6839 box-sizing: border-box !important;
6840 }
6841
6842 /* Fix: undo icon overlapping the icon picker select box */
6843 .pagelayer-form-item:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div,
6844 .pagelayer-base-control:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div{
6845 max-width: 45% !important;
6846 flex-wrap: wrap !important;
6847 padding-right: 20px !important;
6848 box-sizing: border-box !important;
6849 }
6850
6851 .pagelayer-elp-typo {
6852 display: flex !important;
6853 align-items: center !important;
6854 justify-content: space-between !important;
6855 flex-wrap: wrap !important;
6856 }
6857
6858 .pagelayer-elp-typo .pagelayer-elp-label {
6859 width: 48% !important;
6860 max-width: 48% !important;
6861 display: flex !important;
6862 align-items: center !important;
6863 flex-wrap: wrap !important;
6864 gap: 6px !important;
6865 margin-bottom: 0 !important;
6866 padding-right: 8px !important;
6867 box-sizing: border-box !important;
6868 }
6869
6870 .pagelayer-elp-typo .pagelayer-elp-typo-input {
6871 width: 48% !important;
6872 max-width: 48% !important;
6873 }
6874
6875 /* Fix link input field and gear icon alignment to form a unified input group */
6876 .pagelayer-elp-link-div {
6877 display: flex !important;
6878 align-items: stretch !important;
6879 flex-wrap: wrap !important;
6880 width: 100% !important;
6881 }
6882
6883 .pagelayer-elp-link-div input.pagelayer-elp-link {
6884 flex: 1 1 auto !important;
6885 width: 0 !important;
6886 height: 32px !important;
6887 border: 1px solid #cbd5e1 !important;
6888 border-right: none !important;
6889 border-radius: 4px 0 0 4px !important;
6890 box-sizing: border-box !important;
6891 padding: 6px 10px !important;
6892 font-size: 13px !important;
6893 background-color: #fff !important;
6894 margin: 0 !important;
6895 }
6896
6897 .pagelayer-dark .pagelayer-elp-link-div input.pagelayer-elp-link {
6898 background-color: #252529 !important;
6899 border-color: #475569 !important;
6900 color: #cbd5e1 !important;
6901 }
6902
6903 .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
6904 flex: 0 0 auto !important;
6905 width: 36px !important;
6906 height: 32px !important;
6907 border: 1px solid #cbd5e1 !important;
6908 border-radius: 0 4px 4px 0 !important;
6909 box-sizing: border-box !important;
6910 background-color: #f8fafc !important;
6911 color: #64748b !important;
6912 cursor: pointer !important;
6913 display: flex !important;
6914 align-items: center !important;
6915 justify-content: center !important;
6916 margin: 0 !important;
6917 position: static !important;
6918 font-size: 14px !important;
6919 line-height: normal !important;
6920 transition: background-color 0.15s ease, color 0.15s ease !important;
6921 }
6922
6923 .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
6924 background-color: #f1f5f9 !important;
6925 color: #2563eb !important;
6926 }
6927
6928 .pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
6929 background-color: #1e1e24 !important;
6930 border-color: #475569 !important;
6931 color: #94a3b8 !important;
6932 }
6933
6934 .pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
6935 background-color: #2d2d34 !important;
6936 color: #3b82f6 !important;
6937 }
6938
6939 .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
6940 border-radius: 4px !important;
6941 border-right: 1px solid #cbd5e1 !important;
6942 }
6943
6944 .pagelayer-dark .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
6945 border-right-color: #475569 !important;
6946 }
6947
6948 .pagelayer-elp-link-div .pagelayer-elp-link-addons {
6949 width: 100% !important;
6950 margin-right: 0 !important;
6951 }
6952
6953 .pagelayer-elp-link-div .pagelayer-elp-link-list {
6954 width: 100% !important;
6955 }
6956
6957 /* Match sidebar top header section and bottombar section background in dark mode */
6958 .pagelayer-dark td.pagelayer-topbar-holder,
6959 .pagelayer-dark .pagelayer-bottombar-row {
6960 background: #0b0f19 !important;
6961 }
6962
6963 .pagelayer-dark td.pagelayer-topbar-holder {
6964 border-bottom: 1px solid #1e293b !important;
6965 }
6966
6967 .pagelayer-dark .pagelayer-bottombar-holder {
6968 border-top: 1px solid #1e293b !important;
6969 background: #0b0f19 !important;
6970 }
6971
6972 /* Sidebar fields alignment and symmetric padding */
6973 .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
6974 padding: 16px 0 !important;
6975 box-sizing: border-box !important;
6976 }
6977
6978 .pagelayer-elpd-section-rows .pagelayer-form-item {
6979 padding: 8px 16px 8px 12px !important;
6980 box-sizing: border-box !important;
6981 width: 100% !important;
6982 }
6983
6984 .pagelayer-elpd-section-rows .pagelayer-elp-select-div,
6985 .pagelayer-elpd-section-rows .pagelayer-elp-spinner-div,
6986 .pagelayer-elpd-section-rows .pagelayer-elp-checkbox-div,
6987 .pagelayer-elpd-section-rows .pagelayer-elp-color-div-holder,
6988 .pagelayer-elpd-section-rows .pagelayer-elp-color-div {
6989 right: 16px !important;
6990 }
6991
6992 .pagelayer-elpd-section-name {
6993 margin-top: 0 !important;
6994 }
6995
6996 /* Global Tab widgets list - styled to match standard widgets tab (3 columns, same box size) */
6997 #pagelayer-global-widget {
6998 display: grid !important;
6999 grid-template-columns: repeat(3, 1fr) !important;
7000 gap: 8px !important;
7001 padding: 0 15px 15px 15px !important;
7002 box-sizing: border-box !important;
7003 }
7004
7005 #pagelayer-global-widget > .pagelayer-global-widget-shortcodes{
7006 grid-column: span 3 !important;
7007 margin-left: -15px !important;
7008 margin-right: -15px !important;
7009 }
7010
7011 #pagelayer-global-widget > .pagelayer-leftbar-group{
7012 grid-column: span 3 !important;
7013 margin-left: -15px !important;
7014 margin-right: -15px !important;
7015 }
7016
7017 #pagelayer-global-widget > .pagelayer-global-widget-pro{
7018 grid-column: span 3 !important;
7019 }